/* Избранное - рабочий список наблюдения.
 *
 * Живёт в мире портфеля v3: те же токены, та же плотность, те же таблицы.
 * Акцент - тот же спокойный синий, что у всего портфеля: избранное надо
 * заметить, а не выделять флагом. Лайм пробовали - он кричит и тянет глаз
 * сильнее самих данных.
 *
 * Раскладка - строка списков над таблицей, таблица во всю ширину. Колонка
 * слева отнимала четверть ширины и оставляла под собой пустоту: списков
 * обычно четыре-пять, а строк в таблице - двадцать.
 */

.fv {
  /* Синий здесь свой, чистый - тот, что был в утверждённом макете V3. Общий
     акцент портала уходит в бирюзу, и в списке наблюдения он спорит с зелёным
     ростом и красным падением: глаз перестаёт отличать «наше указание» от
     «движения рынка». Переопределение живёт только внутри `.fv`, остальной
     портал не трогаем. */
  --acc: #0052ff;
  --acc2: #0040c8;
  --fv-acc: var(--acc);
  --fv-line: color-mix(in oklab, var(--acc) 42%, var(--line));
  --fv-soft: color-mix(in oklab, var(--acc) 11%, var(--pnl));
  --fv-ink: var(--acc);
}
:root[data-theme="dark"] .fv {
  /* В тёмной теме чистый синий выгорает и теряет контраст с фоном, поэтому
     берём его же, но светлее - как в тёмном варианте макета. */
  --acc: #3773f5;
  --acc2: #5a8cf7;
  --fv-soft: color-mix(in oklab, var(--acc) 17%, var(--pnl));
}

/* Селекторы кнопок ниже идут с `.fv` впереди: в app.css есть общий сброс
   `.pf3 button { background:none; color:inherit }`, и он по весу перебивает
   правило из одного класса.
   ── строка списков ─────────────────────────────────────────────────────── */

.fv-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.fv-lists { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.fv .fv-list {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px;
  border: 1px solid var(--line); border-radius: 100px; background: var(--pnl);
  font-size: 12.5px; color: var(--ink2); max-width: 230px;
}
.fv .fv-list:hover { color: var(--ink); border-color: var(--ink3); }
.fv .fv-list[aria-current="true"] {
  background: var(--fv-soft); border-color: var(--fv-line); color: var(--ink); font-weight: 500;
}
.fv-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-list .n { font-family: var(--mono); font-size: 10.5px; color: var(--ink3); }
.fv-list[aria-current="true"] .n { color: var(--fv-ink); }
.fv-list .dot { width: 7px; height: 7px; border-radius: 50%; display: block; flex: none; }
/* У активного списка место под кнопку «…»: она появляется по наведению, и
   без запаса чип дёргался бы по ширине. */
.fv-item.menu .fv-list, .fv-item:hover .fv-list { padding-right: 26px; }
.fv .fv-new {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px;
  border: 1px dashed var(--line); border-radius: 100px; font-size: 12.5px; color: var(--ink3);
}
.fv .fv-new:hover { color: var(--ink); border-color: var(--ink3); }
.fv-count { font-family: var(--mono); font-size: 10.5px; color: var(--ink3); }
.fv-inline {
  font: inherit; font-size: 12.5px; color: var(--ink); background: var(--pnl);
  border: 1px solid var(--fv-line); border-radius: 100px; padding: 5px 12px; width: 190px; outline: none;
}

/* кнопка «…» у списка появляется по наведению и по фокусу с клавиатуры */
.fv-item { position: relative; }
.fv-item { display: inline-flex; }
.fv .fv-item .more {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  opacity: 0; color: var(--ink3); display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
}
.fv-item:hover .more, .fv .fv-item .more:focus-visible, .fv-item.menu .more { opacity: 1; }
.fv .fv-item .more:hover { background: var(--pnl); color: var(--ink); }

.fv-menu {
  position: absolute; z-index: 40; min-width: 176px; padding: 4px; left: 0; top: calc(100% + 5px);
  background: var(--pnl); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow);
}
.fv-menu button { display: flex; gap: 9px; align-items: center; width: 100%; text-align: left; padding: 7px 9px; border-radius: 6px; font-size: 12.5px; color: var(--ink2); }
.fv-menu button:hover { background: var(--pnl2); color: var(--ink); }
.fv-menu button.dn:hover { color: var(--dn); }
.fv-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }

/* ── шапка таблицы ──────────────────────────────────────────────────────── */

.fv-top { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.fv-top .fv-chips { margin-top: 0; }
.fv-tools { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }

.fv-field {
  display: inline-flex; align-items: center; gap: 6px; background: var(--pnl);
  border: 1px solid var(--line); border-radius: 7px; padding: 0 9px; color: var(--ink3);
}
.fv-field:focus-within { border-color: var(--ink3); }
.fv-field input, .fv-newline input, .fv-rename input {
  font: inherit; font-size: 12px; color: var(--ink); background: none; border: 0; outline: none;
  padding: 5px 0; width: 158px;
}
.fv-newline input, .fv-rename input { border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; background: var(--pnl); width: 100%; }
.fv-field input::placeholder, .fv-newline input::placeholder, .fv-note textarea::placeholder { color: var(--ink3); }

/* Главное действие: заливка остаётся - это единственная кнопка раздела,
   которая что-то создаёт, и её надо находить глазом. Но она в размер
   соседних кнопок, а не крупнее. */
.fv .btn-fv {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  color: var(--pnl); background: var(--fv-acc); border: 1px solid var(--fv-acc);
  border-radius: 7px; padding: 4px 10px;
}
.fv .btn-fv:hover { background: color-mix(in oklab, var(--acc) 86%, #000); }

.fv-chips { display: flex; gap: 4px; align-items: center; font-size: 11.5px; flex-wrap: wrap; margin-top: 10px; }
.fv-chips button { padding: 4px 9px; border-radius: 6px; color: var(--ink3); border: 1px solid transparent; }
.fv-chips button[aria-pressed="true"] { background: var(--pnl2); border-color: var(--line); color: var(--ink); }
.fv-chips button:hover { color: var(--ink); }
.fv-chips .n { font-family: var(--mono); font-size: 10px; margin-left: 5px; color: var(--ink3); }
.fv-chips .fv-hint { margin-left: 6px; }

/* ── поиск инструмента ──────────────────────────────────────────────────── */

.fv-add { margin-top: 11px; border: 1px solid var(--fv-line); border-radius: 9px; background: var(--pnl2); overflow: hidden; }
.fv-add .ah { display: flex; gap: 8px; align-items: center; padding: 9px 11px; }
.fv-add .ah .fv-field { flex: 1; background: var(--pnl); }
.fv-add .ah .fv-field input { width: 100%; }
.fv-found { max-height: 232px; overflow: auto; border-top: 1px solid var(--line); }
.fv-found button {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  width: 100%; text-align: left; padding: 7px 11px; border-bottom: 1px solid var(--line);
}
.fv-found button:last-child { border-bottom: 0; }
.fv-found button:hover { background: var(--pnl); }
.fv-found .nm { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-found .tk { font-family: var(--mono); font-size: 10px; color: var(--ink3); }
.fv-found .in { font-size: 10.5px; color: var(--ink3); }

/* ── таблица ────────────────────────────────────────────────────────────── */

.fv-row { border-bottom: 1px solid var(--line); }
.fv-row:hover { background: var(--pnl2); }
.fv-row .gt-row { border-bottom: 0; }
.fv-row.open { background: var(--pnl2); }

.fv-x { display: grid; place-items: center; }
.fv-x button { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--ink3); opacity: 0; }
.fv-row:hover .fv-x button, .fv-x button:focus-visible { opacity: 1; }
.fv-x button:hover { background: var(--pnl); color: var(--dn); }

.fv-in { font-size: 11px; text-align: right; }
.fv-in b { display: block; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink); }
.fv-in span { color: var(--ink3); }

/* Заметка - вторая строка под бумагой, а не колонка: причина «почему слежу»
   не влезает в 140 пикселей, а ради неё раздел и нужен. Пустая заметка
   показывается только при наведении и при фокусе, иначе список превращается
   в поле подсказок. */
.fv-note { padding: 0 12px 9px 44px; font-size: 12px; }
.fv-note .txt { display: flex; gap: 8px; align-items: flex-start; text-align: left; color: var(--ink2); line-height: 1.5; width: 100%; }
.fv-note .txt svg { flex: none; margin-top: 2px; color: var(--ink3); }
.fv-note .txt:hover { color: var(--ink); }
.fv-note .txt:hover svg { color: var(--fv-ink); }
.fv-note.ghost { opacity: 0; height: 0; padding: 0; overflow: hidden; }
.fv-row:hover .fv-note.ghost, .fv-row:focus-within .fv-note.ghost { opacity: 1; height: auto; padding: 0 12px 9px 44px; }
.fv-note.ghost .txt { color: var(--ink3); }
.fv-note textarea {
  font: inherit; font-size: 12px; line-height: 1.5; color: var(--ink); background: var(--pnl);
  border: 1px solid var(--fv-line); border-radius: 8px; padding: 8px 10px; width: 100%;
  min-height: 62px; resize: vertical; outline: none;
}
.fv-note .ed { display: flex; gap: 8px; align-items: center; margin-top: 7px; font-size: 11px; color: var(--ink3); }
.fv-note .ed .sp { margin-left: auto; font-family: var(--mono); }

/* ── пустые состояния ───────────────────────────────────────────────────── */

.fv-empty { padding: 34px 22px 38px; text-align: center; }
.fv-empty .ic { width: 38px; height: 38px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 11px; background: var(--fv-soft); color: var(--fv-ink); }
.fv-empty h3 { font-size: 14px; font-weight: 600; }
.fv-empty p { font-size: 12px; color: var(--ink3); margin: 7px auto 0; max-width: 46ch; line-height: 1.6; }
.fv-empty .acts { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }

.fv-hint { font-size: 11px; color: var(--ink3); }

/* ── вкладка в ряду вкладок портфеля ────────────────────────────────────── */

@media (max-width: 1000px) {
  .fv-lists { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .fv-item { flex: none; }
  .fv .fv-item .more { display: none; }
  .fv-item.menu .fv-list, .fv-item:hover .fv-list { padding-right: 11px; }
  .fv-count { display: none; }
  .pf3-tab.tab-fav { margin-left: 0; }
}
@media (max-width: 1000px) {
  /* Таблица на телефоне ездит вбок, а заметка - текст: если оставить её в
     общей ширине сетки, читать придётся горизонтальной прокруткой. Держим
     её на левом крае и в ширину экрана. */
  .fv-note { position: sticky; left: 0; max-width: calc(100vw - 64px); padding-left: 14px; }
  .fv-row:hover .fv-note.ghost, .fv-row:focus-within .fv-note.ghost { padding-left: 14px; }
}
@media (max-width: 640px) {
  .fv-field input { width: 100%; }
  .fv-tools { width: 100%; }
  .fv-tools .fv-field { flex: 1; }
}

/* ── подтверждение мышкой ───────────────────────────────────────────────── */

.fv-ok { display: inline-flex; gap: 2px; }
.fv .fv-ok button {
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--ink3);
}
.fv .fv-ok button:hover { background: var(--pnl2); color: var(--ink); }
.fv .fv-ok button:first-child:hover { color: var(--fv-acc); }
.fv-item.editing {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 0;
}
.fv-item.editing .fv-inline { width: 168px; }

/* ── целевая цена ───────────────────────────────────────────────────────── */

/* Цель - цена, по которой человек готов купить. В списке наблюдения это
   половина смысла заметки: «жду 280» короче любого текста. Пустая ячейка
   показывает приглашение только по наведению, иначе колонка пестрит. */
.fv-target { text-align: right; }
.fv .fv-target button { display: block; width: 100%; text-align: right; border-radius: 6px; padding: 2px 4px; }
.fv .fv-target button:hover { background: var(--pnl); outline: 1px solid var(--line); }
.fv-target b { display: block; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink); }
.fv-target span { display: block; font-size: 10px; color: var(--ink3); }
.fv .fv-target button.ghost { font-size: 11px; color: var(--ink3); opacity: 0; }
.fv-row:hover .fv-target button.ghost, .fv .fv-target button.ghost:focus-visible { opacity: 1; }
.fv-target.edit { display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
.fv-target input {
  font: inherit; font-family: var(--mono); font-size: 12px; color: var(--ink); background: var(--pnl);
  border: 1px solid var(--fv-line); border-radius: 6px; padding: 3px 6px; width: 78px; text-align: right; outline: none;
}

/* Название бумаги ведёт на её карточку. Подчёркивание по наведению, а не
   постоянный цвет ссылки: в таблице из двадцати строк синий текст в каждой
   строке шумит сильнее, чем помогает. */
.fv .fv-link { color: inherit; text-decoration: none; }
.fv .fv-link:hover { color: var(--fv-acc); text-decoration: underline; text-underline-offset: 2px; }

/* График в строке отвечает на вопрос «сколько стоило тогда»: курсор и точка
   следуют за мышью, цена и месяц - в общей подсказке портфеля. */
.fv [data-fspark] { cursor: crosshair; }

/* ── Скелетон первого кадра ───────────────────────────────────────────────
   Показываем форму таблицы, а не надпись «Загружаем…»: глаз сразу встаёт
   туда, где появятся строки. Дышит медленно - быстрый пульс на финансовом
   экране читается как тревога. */
.fv-sk { padding: 0; overflow: hidden; }
.fv-sk-head {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.fv-sk-row {
  display: grid; grid-template-columns: 26px 1fr 96px;
  gap: 12px; align-items: center; padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.fv-sk-row:last-child { border-bottom: 0; }
.fv-sk-dot, .fv-sk-line, .fv-sk-num {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg, var(--pnl2) 0%, var(--line) 50%, var(--pnl2) 100%);
  background-size: 220% 100%;
  animation: fv-sk-shine 1.6s ease-in-out infinite;
}
.fv-sk-dot { width: 26px; height: 26px; border-radius: 50%; }
.fv-sk-line { height: 11px; }
.fv-sk-num { height: 11px; justify-self: end; width: 72px; }
@keyframes fv-sk-shine {
  0%   { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fv-sk-dot, .fv-sk-line, .fv-sk-num { animation: none; background: var(--pnl2); }
}

/* ══ Таблица наблюдения: собственная сетка ════════════════════════════════
   Раньше избранное рисовалось общими классами .gt-* из app.css. Их же
   использует портфель, поэтому «сделать в избранном крупнее» означало бы
   молча поменять портфель. Здесь своя сетка на своих классах: портфель
   остаётся каким был.

   Строки фиксированной высоты - требование, а не вкус: раньше заметка жила
   отдельной строкой под бумагой, и таблица прыгала при каждом раскрытии.
   Теперь заметка в поповере, а высота строки не зависит от содержимого. */
/* Прокрутка остаётся предохранителем на совсем узкие окна, но в норме её нет:
   колонки сжимаются, а лишние не рисуются вовсе (см. fitCols). */
.fv-tbl { overflow-x: auto; }
.fv-tbl > .in { min-width: 0; width: 100%; }
.fv-r { max-width: 100%; }
.fv-r {
  display: grid;
  grid-template-columns: minmax(206px, 1.25fr) 104px 82px 84px 104px 110px 78px 82px 176px 100px 34px;
  align-items: center;
}
.fv-hd {
  height: 38px; background: var(--pnl2); border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink3);
}
.fv-hd > * { padding: 0 9px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fv-hd .r { text-align: right; }
.fv-hd button {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer; width: 100%; text-align: inherit;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: color 150ms ease;
}
.fv-hd button:hover { color: var(--ink); }
.fv-hd button[data-on="1"] { color: var(--acc); }
.fv-hd .al-hd { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.fv-hd .al-hd button { width: auto; }

.fv-line { height: 64px; border-bottom: 1px solid var(--line); transition: background 170ms ease; }
.fv-line:hover { background: var(--pnl2); }
.fv-line > * { padding: 0 9px; min-width: 0; }
/* Последняя ячейка - только кнопка «убрать»: обычные девять пикселей полей
   выталкивали её за край панели, и таблица получала лишние пять пикселей
   прокрутки. */
.fv-line > *:last-child, .fv-hd > *:last-child { padding: 0 2px; }

.fv-inst { display: flex; align-items: center; gap: 11px; min-width: 0; }
.fv-inst .nm { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-inst .nm a { color: inherit; text-decoration: none; }
.fv-inst .nm a:hover { color: var(--acc); }
.fv-inst .tk { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink3);
               white-space: nowrap; margin-top: 2px; }

.fv-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums;
          font-size: 14px; font-weight: 600; white-space: nowrap; line-height: 1.25; }
.fv-num.s { font-size: 13px; font-weight: 400; }
.fv-num .u { display: block; font-family: 'Manrope', system-ui, sans-serif; font-size: 10.5px;
             font-weight: 400; color: var(--ink3); line-height: 1.2; margin-top: 1px; }
.fv-num.up { color: var(--up); } .fv-num.dn { color: var(--dn); }
.fv-mut { color: var(--ink3); font-weight: 400; }

/* Заметка: след в строке - иконка, текст живёт в поповере. */
.fv-note-btn { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
               margin-left: auto; flex: none; color: var(--ink3); background: none; border: 0; cursor: pointer;
               transition: color 170ms ease, background 170ms ease, transform 140ms cubic-bezier(.23,1,.32,1); }
.fv-note-btn:hover { color: var(--acc); background: color-mix(in oklab, var(--acc) 14%, transparent); }
.fv-note-btn:active { transform: scale(0.93); }
.fv-note-btn.on { color: var(--acc); background: color-mix(in oklab, var(--acc) 14%, transparent); }
/* Пустая кнопка «добавить заметку» ждёт наведения - пока заметки нет, ей нечего
   сообщать. Но там, где наведения не существует, прятать вход нельзя: на
   тач-устройстве она видна всегда, просто бледной. */
.fv-note-btn.off { opacity: 0.4; }
@media (hover: hover) and (pointer: fine) {
  .fv-note-btn.off { opacity: 0; }
  .fv-line:hover .fv-note-btn.off { opacity: 1; }
}
.fv-note-btn.off:focus-visible { opacity: 1; }

/* Алерт. Пять состояний, и ни одно не кричит громче самих чисел. */
.fv-al { display: flex; align-items: center; justify-content: flex-end; gap: 9px; width: 100%;
         padding: 6px 10px; border-radius: 10px; background: none; border: 0; cursor: pointer;
         color: inherit; font: inherit; transition: background 170ms ease; }
.fv-al:hover { background: var(--line); }
.fv-al .t { min-width: 0; text-align: right; }
.fv-al .cond { display: block; font-family: var(--mono); font-size: 13px; font-weight: 600;
               font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.25; }
.fv-al .gap { display: block; font-size: 10.5px; color: var(--ink3); white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.fv-al .bell { flex: none; color: var(--ink3); display: grid; place-items: center; }
.fv-al.near .cond, .fv-al.near .bell { color: var(--warn); }
.fv-al.fired { background: color-mix(in oklab, var(--acc) 12%, transparent); }
.fv-al.fired .cond, .fv-al.fired .bell, .fv-al.fired .gap { color: var(--acc); }
.fv-al.paused { opacity: 0.62; }
.fv-al.paused .cond { text-decoration: line-through; text-decoration-thickness: 1px;
                      text-underline-offset: 2px; color: var(--ink2); }

/* «Алерта нет» - приглашение, а не пустое место: пунктирный кружок, виден
   всегда, но тихо. */
.fv-al-add { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto;
             border-radius: 50%; border: 1px dashed var(--line); background: none; cursor: pointer;
             color: var(--ink3); opacity: 0.5;
             transition: opacity 170ms ease, color 170ms ease, border-color 170ms ease,
                         background 170ms ease, transform 140ms cubic-bezier(.23,1,.32,1); }
@media (hover: hover) and (pointer: fine) { .fv-line:hover .fv-al-add { opacity: 0.85; } }
.fv-al-add:hover { opacity: 1; color: var(--acc); border-color: transparent;
                   background: color-mix(in oklab, var(--acc) 14%, transparent); }
.fv-al-add:active { transform: scale(0.94); }
.fv-al-add:focus-visible { opacity: 1; }

/* Бейдж платного. Один и тот же у колонки алертов и у создания списка. */
.fv-pro { display: inline-block; padding: 2px 5px; border-radius: 4px; background: var(--lime, #c8f048);
          color: #131a02; font-size: 9px; font-weight: 800; letter-spacing: 0.07em; line-height: 1;
          vertical-align: 1px; }

.fv-x { opacity: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
        color: var(--ink3); background: none; border: 0; cursor: pointer;
        transition: opacity 170ms ease, color 170ms ease, background 170ms ease; }
@media (hover: hover) and (pointer: fine) { .fv-line:hover .fv-x { opacity: 1; } }
.fv-x:focus-visible { opacity: 1; }
.fv-x:hover { color: var(--dn); background: color-mix(in oklab, var(--dn) 14%, transparent); }

/* ── Поповеры заметки и алерта ─────────────────────────────────────────── */
.fv-pop {
  position: fixed; z-index: 60; width: 336px; background: var(--pnl); border-radius: 14px;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  transform-origin: var(--po, top center); opacity: 0; transform: scale(0.965);
  transition: opacity 165ms cubic-bezier(.23,1,.32,1), transform 165ms cubic-bezier(.23,1,.32,1);
}
.fv-pop[data-open="1"] { opacity: 1; transform: scale(1); }
.fv-pop h4 { font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em; padding: 15px 16px 0; }
.fv-pop .hint { font-size: 12.5px; color: var(--ink2); padding: 6px 16px 0; line-height: 1.45; }
.fv-pop textarea {
  width: 100%; min-height: 88px; resize: vertical; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
  font: 400 14px/1.55 'Manrope', system-ui, sans-serif; outline: 0; transition: border-color 165ms ease;
}
.fv-pop textarea:focus { border-color: var(--acc); }
.fv-pop .body { padding: 11px 16px 13px; }
.fv-pop .meta { font-size: 11.5px; color: var(--ink3); padding: 0 16px 12px; }
.fv-pop .acts { display: flex; gap: 8px; align-items: center; padding: 0 16px 15px; }
.fv-pop .acts .sp { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink3); }
.fv-pop .seg { display: flex; gap: 6px; padding: 12px 16px 0; flex-wrap: wrap; }
.fv-pop .seg button {
  padding: 7px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--ink2);
  background: none; border: 1px solid var(--line); cursor: pointer;
  transition: background 165ms ease, color 165ms ease, border-color 165ms ease;
}
.fv-pop .seg button:hover { color: var(--ink); }
.fv-pop .seg button[aria-pressed="true"] { background: var(--acc); color: #fff; border-color: var(--acc); }
.fv-pop .lvl { display: flex; align-items: center; gap: 10px; margin: 12px 16px 4px; background: var(--bg);
               border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
               transition: border-color 165ms ease; }
.fv-pop .lvl:focus-within { border-color: var(--acc); }
.fv-pop .lvl input { flex: 1; background: none; border: 0; outline: 0; color: var(--ink);
                     font: 700 18px/1 var(--mono); font-variant-numeric: tabular-nums; }
.fv-pop .lvl .unit { font-size: 13px; color: var(--ink3); font-weight: 600; }
.fv-pop .quick { display: flex; gap: 6px; margin: 8px 16px 12px; flex-wrap: wrap; }
.fv-pop .quick button { font-family: var(--mono); font-size: 11px; padding: 5px 9px; border-radius: 7px;
                        background: var(--bg); color: var(--ink2); border: 1px solid var(--line); cursor: pointer;
                        transition: color 165ms ease, border-color 165ms ease; }
.fv-pop .quick button:hover { color: var(--ink); border-color: var(--ink3); }
.fv-pop .soon { display: flex; align-items: flex-start; gap: 8px; margin: 0 16px 14px; font-size: 11.5px;
                color: var(--ink2); background: var(--pnl2); border-radius: 10px; padding: 10px 12px; line-height: 1.4; }
.fv-scrim { position: fixed; inset: 0; z-index: 55; }
@media (prefers-reduced-motion: reduce) { .fv-pop { transition-duration: 1ms; } }

/* На телефоне таблица едет вбок - это осознанно: числа в колонках сравнивают
   глазами, а карточный режим ломает сравнение. */
@media (max-width: 720px) {
  .fv-tbl > .in { min-width: 0; }
}

/* На узком экране всплывашка занимает ширину экрана с отступами по краям.
   Ширину задаём стилем, а не расчётом в скрипте: скрипт меряет элемент до
   того, как браузер применит это правило, и всплывашка уезжала за край. */
@media (max-width: 520px) {
  .fv-pop { width: calc(100vw - 24px); max-width: 360px; }
}

/* ══ Вид согласованного макета ════════════════════════════════════════════
   Механику и сетку перенесли раньше, а кегли, знаки и вкладки остались от
   прежнего экрана - список выглядел мельче и суше макета. Здесь доводим до
   него: крупное имя, круглый знак эмитента, крупные числа, вкладки списков
   подчёркиванием вместо чипсов.

   Правила переопределяют базовые из этого же файла и `.bdg` из app.css,
   поэтому стоят ниже и с весом в два класса: `.bdg` общий с портфелем, и
   трогать его там нельзя. */

/* Знак эмитента: круглый и крупный, как в макете. */
.fv .fv-inst .bdg { width: 34px; height: 34px; border-radius: 50%; border: 0; font-size: 12px; }

/* Имя бумаги - главный текст строки, тикер под ним приглушён. */
.fv .fv-inst .nm { font-size: 16px; font-weight: 700; letter-spacing: -0.018em; }
/* Тикер набран тем же шрифтом, что и имя, а не моноширинным: в макете V3 он
   читается подписью под названием, а не кодом в таблице. */
.fv .fv-inst .tk { font-family: inherit; font-size: 13px; font-weight: 500;
                   letter-spacing: 0; margin-top: 1px; }

/* Числа крупнее: список читают глазами по колонкам, а не вчитываясь. */
.fv .fv-num { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.fv .fv-num.s { font-size: 15px; font-weight: 600; }
.fv .fv-num .u { font-size: 11.5px; }
.fv .fv-line { height: 66px; }

/* Списки - вкладки с подчёркиванием. Чипсы-пилюли спорили с чипсами фильтров
   ниже: два ряда одинаковых пилюль подряд читались как один ряд. */
.fv .fv-bar { border-bottom: 1px solid var(--line); margin-bottom: 14px; padding-bottom: 0; }
.fv .fv-lists { gap: 2px; }
.fv .fv-list {
  border: 0; border-radius: 0; background: none; padding: 10px 14px;
  font-size: 15px; font-weight: 600; color: var(--ink3); max-width: 260px;
}
.fv .fv-list:hover { color: var(--ink); border-color: transparent; background: none; }
.fv .fv-list[aria-current="true"] {
  background: none; border-color: transparent; color: var(--ink); font-weight: 700;
}
.fv .fv-item { position: relative; }
.fv .fv-item .fv-list[aria-current="true"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 2px; background: var(--acc); border-radius: 2px;
}
.fv .fv-list .n { font-size: 12.5px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.fv .fv-item.menu .fv-list, .fv .fv-item:hover .fv-list { padding-right: 28px; }
.fv .fv-new {
  border: 0; border-radius: 0; padding: 10px 12px; font-size: 14px; color: var(--ink3);
}
.fv .fv-new:hover { color: var(--acc); border-color: transparent; }

/* Инструменты списка стоят в строке вкладок справа: они относятся к списку,
   а не к заголовку страницы. Под ними - только фильтры по классу актива. */
.fv .fv-bar .fv-tools { margin-left: auto; padding-bottom: 6px; }
.fv .fv-count-row { display: flex; justify-content: flex-end; margin: -6px 0 10px; }
.fv .fv-chips button { font-size: 13.5px; padding: 7px 13px; }
.fv .fv-chips .fv-hint { font-size: 12.5px; }

/* ══ Избранное на телефоне: карточки вместо таблицы ═══════════════════════
   Одиннадцать колонок на 375 пикселях - это прокрутка вбок на полтора экрана.
   Тот же вывод, что у скринера облигаций, и тот же приём: список.

   В карточке ровно то, ради чего человек открывает список наблюдения: что за
   бумага, почём она сейчас, как изменилась за день, сколько она платит, что
   случилось с ней с момента, когда он её заметил, и стоит ли на ней уровень.
   Спарклайна и колонок «За год» и «От пика» здесь нет: на ширине ладони они
   вытесняют главное. */
.fv-cards { display: flex; flex-direction: column; }
.fv-card { padding: 13px 14px; border-bottom: 1px solid var(--line); }
.fv-card:last-child { border-bottom: 0; }

.fv-c-top { display: flex; align-items: center; gap: 11px; }
.fv-c-name { min-width: 0; flex: 1; }
.fv-c-name .nm { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -0.015em;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-c-name .nm a { color: inherit; text-decoration: none; }
.fv-c-name .tk { display: block; font-size: 11.5px; color: var(--ink3); margin-top: 2px;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-c-price { text-align: right; flex: none; }
.fv-c-price .p { display: block; font-family: var(--mono); font-size: 15.5px; font-weight: 700;
                 font-variant-numeric: tabular-nums; white-space: nowrap; }
.fv-c-price .d { display: block; font-family: var(--mono); font-size: 12.5px; margin-top: 2px;
                 font-variant-numeric: tabular-nums; }
.fv-c-price .d.up { color: var(--up); } .fv-c-price .d.dn { color: var(--dn); }

.fv-c-bot { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.fv-c-y, .fv-c-s { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.fv-c-y .u, .fv-c-s .u { font-family: 'Manrope', system-ui, sans-serif; font-size: 11px;
                         color: var(--ink3); margin-left: 4px; }
.fv-c-s.up { color: var(--up); } .fv-c-s.dn { color: var(--dn); }
.fv-c-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Кнопки в карточке крупнее, чем в таблице: палец не мышь, сорок пикселей -
   это не запас, а минимум зоны касания. */
.fv-c-note, .fv-c-al {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 11px;
  border-radius: 99px; border: 1px solid var(--line); background: var(--pnl); cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--ink2);
}
.fv-c-note { padding: 6px 9px; }
.fv-c-note.on { color: var(--acc); border-color: transparent;
                background: color-mix(in oklab, var(--acc) 14%, transparent); }
.fv-c-al { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.fv-c-al.add { color: var(--ink3); border-style: dashed; font-family: inherit; }
.fv-c-al.near { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 40%, transparent); }
.fv-c-al.fired { color: var(--acc); border-color: transparent;
                 background: color-mix(in oklab, var(--acc) 12%, transparent); }
.fv-c-al.paused { color: var(--ink3); text-decoration: line-through;
                  text-decoration-thickness: 1px; text-underline-offset: 2px; }

@media (max-width: 767px) {
  /* Ряд инструментов на телефоне переносится и занимает всю ширину: поиск в
     одну строку с кнопками не помещается, а резать его нельзя - это главный
     способ найти бумагу в длинном списке. */
  .fv .fv-bar { flex-wrap: wrap; }
  .fv .fv-bar .fv-tools { width: 100%; margin-left: 0; padding-bottom: 10px; }
  .fv .fv-bar .fv-tools .fv-field { flex: 1; }
  .fv .fv-lists { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .fv .fv-lists::-webkit-scrollbar { display: none; }
  .fv .fv-count-row { display: none; }
}

/* ══ Органы управления по макету ══════════════════════════════════════════
   Кегли и сетку подтянули раньше, а кнопки, поиск и фильтры остались от
   прежнего экрана: скруглённые прямоугольники высотой 26-29 пикселей против
   макетных пилюль в 36. Рядом с крупной таблицей они выглядели служебными
   мелочами, хотя это главные действия раздела.

   Высота 36 - не вкус: это нижняя граница удобной зоны нажатия на
   десктопе и ровно та высота, на которой поиск, «Колонки» и «Добавить»
   встают в одну линию с вкладками. */
.fv .btn-fv, .fv .btn-q {
  border-radius: 99px; padding: 8px 15px; font-size: 13.5px; font-weight: 600;
  min-height: 36px; display: inline-flex; align-items: center; gap: 6px;
}
.fv .btn-q { background: var(--pnl2); border: 1px solid transparent; color: var(--ink); }
.fv .btn-q:hover { background: var(--line); color: var(--ink); }
.fv .btn-fv { border: 0; }

/* Поиск - такая же пилюля, как кнопки рядом: в одном ряду не должно быть двух
   разных форм поля и кнопки. */
.fv .fv-field {
  border-radius: 99px; background: var(--pnl2); border: 1px solid transparent;
  padding: 0 15px; height: 36px; display: inline-flex; align-items: center; gap: 8px;
}
.fv .fv-field:focus-within { border-color: transparent;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--acc) 22%, transparent); }
.fv .fv-field input { font-size: 13.5px; }

/* Фильтры по классу актива: пилюли, активная - заливкой акцента, а не рамкой.
   Рамка на светлом фоне читается слабее, чем соседние кнопки, и фильтр
   переставал выглядеть выбранным. */
.fv .fv-chips button {
  border-radius: 99px; padding: 8px 14px; font-size: 13.5px; font-weight: 600;
  min-height: 36px; background: var(--pnl2); border: 1px solid transparent; color: var(--ink2);
}
.fv .fv-chips button:hover { color: var(--ink); }
.fv .fv-chips button[aria-pressed="true"] {
  background: color-mix(in oklab, var(--acc) 12%, var(--pnl));
  color: var(--acc); border-color: transparent;
}
.fv .fv-chips button[aria-pressed="true"] .n { color: var(--acc); }

/* Шапка таблицы: без заливки и чуть крупнее - в макете она читается как
   подписи колонок, а не как отдельная серая полоса. */
.fv .fv-hd { background: none; height: 40px; font-size: 11px; }

/* Бейдж Pro объясняет себя при наведении и с клавиатуры. Формулировка
   намеренно мягкая: функция сейчас работает у всех, и пугать замком человека,
   который ничего не нарушил, незачем. */
.fv-pro, .al-quota .fv-pro { position: relative; cursor: help; }
.fv-pro[data-tip]:hover::after, .fv-pro[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; z-index: 50; top: calc(100% + 8px); right: 0;
  width: max-content; max-width: 260px; padding: 9px 11px;
  background: var(--pnl); color: var(--ink2); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow);
  font-family: 'Manrope', system-ui, sans-serif; font-size: 12px; font-weight: 400;
  line-height: 1.45; letter-spacing: 0; text-transform: none; white-space: normal;
}
@media (max-width: 767px) {
  .fv-pro[data-tip]:hover::after { right: auto; left: 0; max-width: 220px; }
}


/* ---------- ближайшее событие ---------- */
/* Дата крупная, название события подписью: в списке сравнивают именно даты -
   «что случится раньше», а не что именно случится. */
.fv-ev { text-align: right; line-height: 1.2; }
.fv-ev b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.fv-ev span { display: block; font-size: 11.5px; color: var(--ink3); margin-top: 2px;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-ev.mut { color: var(--ink3); font-weight: 500; }


/* ---------- заметка в строке ---------- */
/* Заметка живёт в подписи под именем, следом за тикером: столбец под неё был
   бы пустым почти у всех бумаг, а наведение не работает на телефоне. Цветом не
   выделяем - это чужой текст в ряду наших данных, ему хватает позиции. */
.fv .fv-inst .tk { display: flex; gap: 5px; align-items: baseline;
                   flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.fv .fv-inst .tk > :first-child { flex: none; }
/* Своё имя класса, а не общий `.note`: в оболочке портала у него свой фон, и
   заметка превращалась в плашку посреди строки. */
.fv .fv-inst .tk .fv-note-text { min-width: 0; overflow: hidden; text-overflow: ellipsis;
                                 white-space: nowrap; color: var(--ink2);
                                 font-size: 12.5px; background: none; }
/* Заметка отделена от кода точкой - без неё два разных факта сливаются в один
   поток. Точку рисует псевдоэлемент: в разметке её нет, и при копировании
   кода она не попадает в буфер. */
.fv .fv-inst .tk .fv-note-text::before { content: "·"; margin-right: 5px; color: var(--ink3); }

/* Код бумаги - кнопка, но выглядит как текст: подчёркивание и рамка сделали бы
   из подписи управляющий элемент, которым она не является. */
.fv .fv-inst .tk .code {
  flex: none; border: 0; background: none; padding: 0; font: inherit; color: inherit;
  cursor: pointer; transition: color 150ms ease;
}
.fv .fv-inst .tk .code:hover { color: var(--ink); }
.fv .fv-inst .tk .code.done { color: var(--up); }
.fv .fv-inst .tk .code.done::after { content: " скопировано"; font-size: 11px; }
/* Заметка в карточке телефона: там строка не ограничена соседними колонками,
   поэтому текст показываем целиком - до двух строк. */
.fv-c-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
             overflow: hidden; margin-top: 4px; font-size: 12.5px; line-height: 1.35;
             color: var(--ink2); }