/*
  Дополнения редизайна ЛК поверх кита (cabinet.css смежников НЕ трогаем).
  Здесь — то, чего нет в макете, но есть в нашем реальном ЛК: сетка из N торговых счетов на дашборде и т.п.
  Все цвета/размеры — через токены кита (:root в cabinet.css).
*/

/* ---------- Дашборд: сетка торговых счётов (у нас их может быть много) ---------- */
.acct-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(248px, 1fr)); gap:20px; }
.acct-card{ display:grid; grid-template-rows:auto 1fr auto; gap:16px; padding:20px; }
.acct-card__top{ display:flex; align-items:center; gap:12px; min-width:0; }
.acct-card__name{ min-width:0; }
.acct-card__name b{ display:block; font-weight:650; font-size:15px; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-card__name small{ font-size:13px; color:var(--ink-2); }
.acct-card__bal .big{ margin-top:4px; font-size:30px; line-height:1.05; font-weight:650; letter-spacing:-.03em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.acct-card__bal .big .unit{ margin-inline-start:6px; font-size:14px; font-weight:600; color:var(--ink-3); letter-spacing:0; }
.acct-card__bal .sub{ margin-top:8px; display:flex; flex-wrap:wrap; gap:4px 16px; font-size:14px; color:var(--ink-2); }
.acct-card__bal .sub b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.acct-card__cta{ display:flex; gap:8px; align-items:center; }
.acct-card__cta .btn--p{ flex:1; }
.acct-card__go{ width:46px; min-width:46px; padding:0; }
.acct-card__go .ic{ scale:var(--dir) 1; }
/* prop-счёт: синий знак PropTen вместо значка Pelliron */
.acct-card.is-prop .acct__logo{ background:linear-gradient(135deg, #2d7bff, #0b5cff 45%, #0a3fc2); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
.acct-card.is-prop .acct__logo img{ width:24px; height:24px; }
.acct-card__badge{ display:inline-block; margin-inline-start:6px; padding:1px 8px; border-radius:999px; background:var(--blue-soft); color:var(--blue-ink); font-size:12px; font-weight:600; vertical-align:middle; }

/* пустая карточка «открыть новый счёт» */
.acct-card--empty{ grid-template-rows:none; align-content:center; justify-items:center; gap:14px; text-align:center; min-height:188px; }
.acct-card--empty .empty__ic{ width:48px; height:48px; }
.acct-card--empty b{ font-weight:600; font-size:15px; }

/* маленькая иконка направления операции в первом столбце таблицы */
.op-ic{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--track); color:var(--ink-3); }
.op-ic .ic{ width:16px; height:16px; }
.op-ic.is-in{ background:#e9f6ef; color:var(--ok); }
.op-ic.is-out{ background:var(--red-soft); color:var(--err); }
.op-ic.is-swap{ background:var(--blue-soft); color:var(--blue); }
.op-ic .ic{ scale:var(--dir) 1; }

@media (max-width: 760px){
  .acct-grid{ grid-template-columns:repeat(auto-fill, minmax(100%, 1fr)); }
}

/* ---------- Вкладки (кит-сегмент .seg) + панели ---------- */
[data-tabwrap] > .seg{ margin-bottom:16px; }
[data-tab-panel][hidden]{ display:none; }

/* вертикальный ритм между блоками внутри панели/группы (как .page, но локально) */
.stack{ display:grid; gap:16px; }

/* маленькая кнопка в ячейке таблицы (например PDF у ожидающего депозита) */
.btn--sm{ min-height:30px; padding:0 12px; font-size:13px; }

/* ---------- Контентные карточки (support/instructions и прочие текстовые) ---------- */
.card--pad{ padding:20px 22px; }
.sec-title{ font-size:18px; font-weight:650; letter-spacing:-.02em; }
.muted{ color:var(--ink-2); }
/* живое видео внутри кит-карточки .vid (постер макета заменён): заполняет верх карточки 16:9, текст — в .vid__body ниже */
.vid__media{ display:block; width:100%; aspect-ratio:16 / 9; background:#000; object-fit:cover; }

/* иконка-чип + список контактов (страница поддержки) */
.ic-chip{ display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; border-radius:50%; background:var(--blue-soft); color:var(--blue-ink); }
.ic-chip .ic{ width:19px; height:19px; }
.contact-list{ display:grid; gap:12px; margin-top:16px; }
.contact-list li{ display:flex; align-items:center; gap:12px; }

/* ---------- Реквизиты счёта PropTen (пароли/сервер) в карточке ---------- */
.specs{ display:grid; gap:9px; }
.specs__row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13.5px; }
.specs__row .lbl{ color:var(--ink-2); }
.specs__row .val{ font-weight:600; text-align:end; overflow-wrap:anywhere; }
.mono{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight:500; }

/* доп. варианты алертов (кит даёт только --err / --info) */
.alert--ok{ background:#e9f6ef; box-shadow:inset 0 0 0 1px rgba(26,160,99,.22); }
.alert--ok > .ic{ color:var(--ok); }
.alert--warn{ background:#fff6e6; box-shadow:inset 0 0 0 1px rgba(181,131,15,.24); }
.alert--warn > .ic{ color:#b5830f; }

/* ---------- Форма: действия + нативный select-chevron + аплоадер ---------- */
.form-acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.inp > select{ flex:1; }
.inp > select + .ic{ flex:0 0 auto; pointer-events:none; }

/* суффикс-единица валюты внутри поля ввода (сумма депозита/вывода) */
.inp .unit{ flex:0 0 auto; margin:0; font-size:14px; font-weight:600; color:var(--ink-3); letter-spacing:0; }
.inp input[readonly]{ color:var(--ink-2); cursor:default; }

/* инфо-блок способа оплаты (реквизиты/QR крипты, WebMoney; проп-счёт; equity) */
.note{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; padding:14px 16px; border-radius:12px; background:var(--blue-soft); color:var(--ink); font-size:14px; line-height:1.5; }
.note__body{ flex:1 1 200px; min-width:0; overflow-wrap:anywhere; }
.note__body p{ margin:0; }
.note__body p + p{ margin-top:4px; }
.note__qr{ flex:0 0 auto; width:160px; height:160px; border-radius:10px; background:#fff; padding:6px; box-shadow:inset 0 0 0 1px var(--line); }
.note--warn{ background:#fff6e6; box-shadow:inset 0 0 0 1px rgba(181,131,15,.24); }

/* [hidden] поверх классов, задающих display (как у [data-tab-panel][hidden] выше) */
.field[hidden], .note[hidden], .err[hidden], .stack[hidden]{ display:none; }

/* Пагинатор Yii LinkPager (история и прочие списки) — в стиль кита */
.pagination{ display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 2px; padding:0; list-style:none; }
.pagination .page-link{ display:flex; align-items:center; justify-content:center; min-width:38px; min-height:38px; padding:0 10px; border-radius:10px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink); font-weight:600; font-size:14px; text-decoration:none; }
.pagination .active .page-link{ background:var(--blue); color:#fff; box-shadow:none; }
.pagination .disabled .page-link{ opacity:.45; pointer-events:none; }
@media (hover: hover){ .pagination .page-link:hover{ background:#f3f3f6; } .pagination .active .page-link:hover{ background:var(--press); } }

/* Офлайн-курсы (обучение): фильтры страна/город + подзаголовок офиса над карточками */
.off-filters{ display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:440px; margin-top:4px; }
#off-cards .head{ margin-top:4px; }
#off-cards .head h3{ font-size:16px; font-weight:650; letter-spacing:-.015em; }

/* Блок согласия при открытии счёта: список ссылок на документы + галочка (кит course-terms, но ссылок несколько). */
.agree{ display:grid; gap:8px; }
.agree-docs{ display:grid; gap:2px; }
.agree-docs .lnk{ justify-self:start; padding:8px 0; text-decoration:underline; text-decoration-color:rgba(29,95,208,.32); text-underline-offset:3px; }
.agree-docs .lnk .ic{ scale:1; flex:0 0 auto; }
@media (hover: hover){ .agree-docs .lnk:hover{ text-decoration-color:currentColor; } }

.uploader{ display:grid; gap:10px; justify-items:start; }
.uploader__list{ display:grid; gap:6px; width:100%; margin:0; padding:0; list-style:none; }
.uploader__item{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px; background:var(--track); font-size:14px; }
.uploader__item.is-up{ opacity:.6; }
.uploader__item.is-err{ background:var(--red-soft); }
.uploader__name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uploader__rm{ flex:0 0 auto; width:24px; height:24px; border:0; border-radius:50%; background:transparent; color:var(--ink-3); font-size:18px; line-height:1; cursor:pointer; }
@media (hover: hover){ .uploader__rm:hover{ background:#e3e3e8; color:var(--ink); } }

/* ---------- Профиль: верификация / документы ---------- */
.ver-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.docs-list{ display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.docs-list li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:10px; background:var(--track); font-size:14px; }
.docs-list .doc-name{ display:flex; align-items:center; gap:10px; min-width:0; }
.docs-list .doc-name .ic{ flex:0 0 auto; color:var(--ink-3); }
.docs-list .doc-name span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* кнопка-лейбл выбора файлов (нативный input внутри) */
.file-btn{ cursor:pointer; }

/* ---------- Тикет: тред комментариев (чат-пузыри) ---------- */
.cmts{ display:grid; gap:16px; }
.cmt{ display:flex; gap:12px; max-width:92%; }
.cmt__ava{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:var(--track); }
/* Аватарки тикета: сотрудник — бренд-марка Pelliron (как Адриан в чате), клиент — серый кружок + силуэт */
.cmt__ava--staff{ display:grid; place-items:center; background:#f3f5f9; box-shadow:inset 0 0 0 1px var(--line); }
.cmt__ava--staff img{ width:22px; height:22px; object-fit:contain; }
.cmt__ava--client{ display:grid; place-items:center; color:var(--ink-3); }
.cmt__ava--client svg{ width:22px; height:22px; fill:currentColor; }
.cmt__main{ min-width:0; }
.cmt__head{ display:flex; align-items:baseline; gap:10px; margin-bottom:5px; }
.cmt__head b{ font-weight:600; font-size:14px; }
.cmt__time{ color:var(--ink-3); font-size:12.5px; }
.cmt__text{ padding:10px 14px; border-radius:14px; background:var(--track); font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.cmt__text > *:not(:last-child){ margin-bottom:8px; }
.cmt--own{ margin-inline-start:auto; flex-direction:row-reverse; }
.cmt--own .cmt__head{ flex-direction:row-reverse; }
.cmt--own .cmt__text{ background:var(--blue-soft); }
.cmt--sys{ max-width:100%; justify-content:center; }
.cmt--sys .cmt__text{ background:transparent; color:var(--ink-2); font-style:italic; font-size:13px; text-align:center; padding:4px 0; }

/* вложения тикета/комментария (разметка из TicketViewHelper — рескин по её классам) */
.ticket_files_row, #html5-videos.row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.files-item{ cursor:pointer; }
.ticket_files_row img.img-thumbnail, .files-item img.img-thumbnail, .docs img.img-thumbnail{ width:74px; height:74px; object-fit:cover; border-radius:10px; box-shadow:inset 0 0 0 1px var(--line); display:block; background:var(--track); }
.docs{ margin:0 !important; }
.ticket-msg{ font-size:15px; line-height:1.6; overflow-wrap:anywhere; }
.ticket-msg > *:not(:last-child){ margin-bottom:8px; }
.owner-row{ display:flex; align-items:center; gap:12px; margin-top:8px; }
.owner-row b{ display:block; font-weight:600; font-size:14px; }
.owner-row small{ color:var(--ink-2); font-size:13px; }

/* на узких экранах тикет-страница в одну колонку */
@media (max-width: 900px){ .grid-2{ grid-template-columns:minmax(0, 1fr); } }

/* ---------- Пагинация (Yii LinkPager -> кит) ---------- */
.pagination{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin:18px 0 2px; padding:0; list-style:none; }
.pagination .page-link{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border-radius:10px; color:var(--ink); font-size:14px; font-weight:600; background:transparent; }
.pagination .page-item.active .page-link{ background:var(--press); color:#fff; }
.pagination .page-item.disabled .page-link{ color:var(--ink-3); opacity:.5; pointer-events:none; }
@media (hover: hover){ .pagination .page-link:hover{ background:var(--track); } .pagination .page-item.active .page-link:hover{ background:var(--press); } }

/* ---------- Карточка счёта: строки «ключ — значение» (info) ---------- */
.kv{ display:grid; gap:1px; background:var(--line); border-radius:12px; overflow:hidden; }
.kv__row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:13px 16px; background:var(--surface); }
.kv__row span{ color:var(--ink-2); font-size:14px; }
.kv__row b{ font-weight:600; font-variant-numeric:tabular-nums; text-align:end; }

/* ---------- Карточка счёта: сводка балансов (3 плитки) ---------- */
.sum3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.sum3 > div{ padding:16px 18px; border-radius:14px; background:var(--track); }
.sum3 .stat__v{ margin-top:6px; font-size:26px; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.stat__v .unit{ margin-inline-start:4px; font-size:14px; font-weight:600; color:var(--ink-3); letter-spacing:0; }
@media (max-width: 620px){ .sum3{ grid-template-columns:1fr; } }

/* переключатель активного счёта + вкладки в одной строке над панелями */
.acct-switch{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; }
.acct-switch .lbl{ color:var(--ink-2); font-size:14px; }
.acct-switch .lbl b{ color:var(--ink); font-weight:650; }
.acct-switch .chip-btn{ background:var(--track); }
.acct-switch .chip-btn .ic{ scale:1; color:var(--ink-3); }
.acct-switch .seg{ margin-inline-start:auto; }
@media (max-width: 620px){ .acct-switch .seg{ margin-inline-start:0; } }