/* Торговая площадка (module_page_trade) — «Терминал». Дизайн-редизайн 2026-07-03.
   Акцент берётся из темы сайта (--button) с фолбэком. Шрифты — Space Grotesk / JetBrains Mono. */
.tr__section { display:block; }

.tr {
    /* Акцент из макета. Тему НЕ используем: у неё --button тёмный (#363753) —
       на нём тёмный текст кнопок нечитаем. Хотите другой — поменяйте это значение. */
    --tr-accent: #FF8A3D;
    --tr-card:  #14151a;
    --tr-row:   #1b1d24;
    --tr-field: #14151a;
    --tr-line:  rgba(255,255,255,.06);
    --tr-line2: rgba(255,255,255,.12);
    --tr-t1: #fff;
    --tr-t2: rgba(255,255,255,.65);
    --tr-t3: rgba(255,255,255,.4);
    --tr-cap: rgba(255,255,255,.35);
    --tr-ok: #4ade80;
    --tr-danger: #f97066;
    --tr-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
    --tr-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;

    position: relative;
    box-sizing: border-box;
    background: var(--tr-card);
    border: 1px solid var(--tr-line);
    border-radius: 14px;
    color: var(--tr-t1);
    font-family: var(--tr-sans);
    overflow: hidden;
}
.tr *, .tr *::before, .tr *::after { box-sizing: border-box; }

/* ---------- Шапка ---------- */
.tr__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 20px; border-bottom: 1px solid var(--tr-line);
}
.tr__h1 { font: 700 18px var(--tr-sans); }
.tr__h2 { font: 500 11.5px var(--tr-sans); color: rgba(255,255,255,.42); margin-top: 2px; }
.tr__head-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tr__seg { display: flex; gap: 3px; background: var(--tr-row); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: 3px; }
.tr__seg-btn {
    padding: 7px 14px; border-radius: 7px; cursor: pointer; text-decoration: none;
    font: 600 12px var(--tr-sans); color: var(--tr-t2);
}
.tr__seg-btn.active { background: var(--tr-accent); color: #14151a; }
.tr__bal { display: flex; align-items: baseline; gap: 8px; }
.tr__bal-label { font: 500 9.5px var(--tr-mono); letter-spacing: .16em; color: var(--tr-t3); }
.tr__bal-value { font: 600 17px var(--tr-mono); }
.tr__bal-cur { font: 500 10.5px var(--tr-mono); color: var(--tr-t3); }
.tr__login {
    padding: 9px 18px; border-radius: 9px; background: var(--tr-accent); color: #14151a;
    font: 700 12.5px var(--tr-sans); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.tr__login:hover { filter: brightness(1.08); }

/* ---------- Тело: сайдбар + контент ---------- */
.tr__body { display: grid; grid-template-columns: 188px 1fr; min-height: 640px; }
.tr__side {
    border-right: 1px solid var(--tr-line);
    padding: 16px 10px 16px 0; display: flex; flex-direction: column; gap: 20px;
}
.tr__cap { font: 600 9px var(--tr-mono); letter-spacing: .18em; color: var(--tr-cap); padding: 0 0 8px 16px; }
.tr__chips { display: flex; flex-direction: column; gap: 2px; }
.tr__chip {
    padding: 8px 14px; border-radius: 0 8px 8px 0; cursor: pointer;
    font: 600 12.5px var(--tr-sans); color: rgba(255,255,255,.5);
    border-left: 2px solid transparent; transition: color .12s, background .12s;
}
.tr__chip:hover { color: #fff; }
.tr__chip.active { background: rgba(255,255,255,.07); color: #fff; border-left: 2px solid var(--tr-accent); }
.tr__legend { display: flex; flex-direction: column; gap: 7px; padding-left: 16px; }
.tr__leg { display: flex; align-items: center; gap: 7px; font: 500 10px var(--tr-mono); color: rgba(255,255,255,.55); }
.tr__leg-dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.tr__side-foot { margin-top: auto; padding-left: 16px; font: 500 9.5px/1.7 var(--tr-mono); color: rgba(255,255,255,.3); }

.tr__content { display: flex; flex-direction: column; min-width: 0; }

/* ---------- Вкладки ---------- */
.tr__tabs { display: flex; gap: 6px; padding: 14px 18px 12px; flex-wrap: wrap; }
.tr__tab {
    padding: 8px 13px; border-radius: 8px; cursor: pointer;
    font: 600 12.5px var(--tr-sans); color: rgba(255,255,255,.45);
    display: flex; gap: 7px; align-items: baseline;
}
.tr__tab:hover { color: #fff; }
.tr__tab.active { background: rgba(255,255,255,.09); color: #fff; }
.tr__tab-n { font: 500 10px var(--tr-mono); opacity: .55; }
.tr__panel { display: none; }
.tr__panel.active { display: block; }

/* ---------- Заголовки колонок + ряды ---------- */
.tr__cols {
    display: grid; gap: 12px; align-items: center; padding: 4px 18px 8px;
    font: 600 9px var(--tr-mono); letter-spacing: .16em; color: rgba(255,255,255,.32);
}
.tr__cols .tr__r { text-align: right; }
.tr__cols--m   { grid-template-columns: 48px 1fr 128px 110px 80px; }
.tr__rows { display: flex; flex-direction: column; gap: 6px; padding: 0 18px 18px; }
.tr__row {
    display: grid; gap: 12px; align-items: center;
    padding: 8px 12px 8px 10px; background: var(--tr-row);
    border-left: 3px solid rgba(255,255,255,.16); border-radius: 8px;
}
.tr__row--m   { grid-template-columns: 48px 1fr 128px 110px 80px; }
.tr__row--inv { grid-template-columns: 48px 1fr 128px 90px; }
.tr__row--lot { grid-template-columns: 48px 1fr 110px 100px 80px; }
.tr__row--m:hover, .tr__row--inv:hover { filter: brightness(1.12); }

.tr__ph { width: 48px; height: 34px; border-radius: 5px; overflow: hidden;
    background: repeating-linear-gradient(135deg,#23252c 0 8px,#20222a 8px 16px); }
.tr__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr__ph--ico { display: flex; align-items: center; justify-content: center; }
.tr__ph--ico svg { width: 20px; height: 20px; color: var(--tr-accent); opacity: .85; }
.tr__it { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tr__it-name { font: 600 13px var(--tr-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr__it-sub { font: 500 10.5px var(--tr-sans); color: var(--tr-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr__rar { font: 600 9.5px var(--tr-mono); letter-spacing: .12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr__price { text-align: right; font: 600 13.5px var(--tr-mono); white-space: nowrap; }
.tr__price .tr__cur { font: 500 9.5px var(--tr-mono); color: var(--tr-t3); }
.tr__status { display: flex; align-items: center; gap: 6px; justify-content: center; }
.tr__status-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.tr__status-txt { font: 600 9.5px var(--tr-mono); letter-spacing: .1em; }

/* Кнопки в рядах */
.tr__act { padding: 7px 0; text-align: center; border-radius: 7px; font: 700 11.5px var(--tr-sans); cursor: pointer; }
.tr__act--ghost { border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.75); }
.tr__act--ghost:hover { border-color: var(--tr-accent); color: var(--tr-accent); }
.tr__act--accent { border: 1px solid var(--tr-accent); color: var(--tr-accent); }
.tr__act--accent:hover { background: var(--tr-accent); color: #14151a; }
.tr__act--danger { border: 1px solid rgba(249,112,102,.4); color: var(--tr-danger); }
.tr__act--danger:hover { background: rgba(249,112,102,.12); }
.tr__act--mine { border: 1px solid var(--tr-line); color: var(--tr-t3); cursor: default; }

.tr__empty { padding: 24px 0; text-align: center; font: 500 11px var(--tr-mono); color: var(--tr-t3); }
.tr__gate { padding: 46px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tr__gate-t { font: 600 14px var(--tr-sans); }
.tr__notice { padding: 40px 20px; text-align: center; font: 500 12px var(--tr-mono); color: var(--tr-t3); }

/* Пагинация */
.tr__pager { display: flex; gap: 6px; padding: 0 18px 16px; flex-wrap: wrap; }
.tr__page {
    min-width: 30px; height: 30px; border-radius: 7px; cursor: pointer;
    background: var(--tr-row); color: var(--tr-t2); border: 1px solid var(--tr-line);
    font: 600 11px var(--tr-mono); display: inline-flex; align-items: center; justify-content: center;
}
.tr__page.active { background: var(--tr-accent); color: #14151a; border-color: transparent; }

/* ---------- Админка ---------- */
.tr__acontent { display: flex; flex-direction: column; padding: 16px 18px 18px; gap: 14px; min-width: 0; overflow-x: auto; }
.tr__apanel { display: none; }
.tr__apanel.active { display: block; }
.tr__settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tr__scard { background: var(--tr-row); border: 1px solid var(--tr-line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; }
.tr__scard-h { display: flex; align-items: center; justify-content: space-between; }
.tr__scard-cap { font: 600 9.5px var(--tr-mono); letter-spacing: .16em; color: var(--tr-t3); }
.tr__frow { display: grid; grid-template-columns: 1fr 132px; gap: 10px; align-items: center; }
.tr__frow--wide { grid-template-columns: 1fr 150px; }
.tr__flabel { font: 500 12px var(--tr-sans); color: var(--tr-t2); }
.tr__fbox { display: flex; align-items: center; gap: 7px; }
.tr__inp {
    width: 100%; height: 34px; background: var(--tr-field); border: 1px solid var(--tr-line2);
    border-radius: 7px; padding: 0 10px; color: #fff; font: 600 12.5px var(--tr-mono); outline: none;
}
.tr__inp--num { text-align: right; }
.tr__inp:focus { border-color: var(--tr-accent); }
.tr__suffix { font: 500 10px var(--tr-mono); color: var(--tr-cap); width: 22px; flex: none; }
.tr__col { display: flex; flex-direction: column; gap: 14px; }
.tr__tgl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tr__tgl-txt { display: flex; flex-direction: column; gap: 1px; }
.tr__tgl-label { font: 500 12px var(--tr-sans); color: var(--tr-t2); }
.tr__tgl-desc { font: 400 10.5px var(--tr-sans); color: var(--tr-cap); }
.tr__switch { flex: none; width: 38px; height: 21px; border-radius: 999px; cursor: pointer; position: relative; transition: background .15s; background: rgba(255,255,255,.14); }
.tr__switch-knob { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: left .15s; }
.tr__switch.on { background: var(--tr-accent); }
.tr__switch.on .tr__switch-knob { left: 20px; }
.tr__rcon-note { font: 400 10.5px/1.5 var(--tr-sans); color: var(--tr-cap); }
.tr__rcon-fields.off { opacity: .4; pointer-events: none; }
.tr__save-row { display: flex; justify-content: flex-end; }
.tr__save { padding: 10px 22px; border-radius: 8px; background: var(--tr-accent); color: #14151a; font: 700 12.5px var(--tr-sans); cursor: pointer; }
.tr__save:hover { filter: brightness(1.08); }

.tr__cols--mod  { grid-template-columns: 48px minmax(140px,1fr) 120px 96px 84px 150px; }
.tr__row--mod   { grid-template-columns: 48px minmax(140px,1fr) 120px 96px 84px 150px; }
.tr__row--mod.done { opacity: .55; }
.tr__row--mod .tr__price { text-align: right; }
.tr__modacts { display: flex; gap: 6px; }
.tr__modacts .tr__act { flex: 1; }
.tr__cols--hist { grid-template-columns: 106px minmax(130px,1fr) minmax(150px,1.2fr) 88px 76px 104px; }
.tr__row--hist  { grid-template-columns: 106px minmax(130px,1fr) minmax(150px,1.2fr) 88px 76px 104px; background: var(--tr-row); border: 1px solid rgba(255,255,255,.05); border-left: 1px solid rgba(255,255,255,.05); padding: 10px 12px; }
.tr__h-time { font: 500 10.5px var(--tr-mono); color: rgba(255,255,255,.45); }
.tr__h-name { font: 600 12.5px var(--tr-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr__h-who  { font: 500 11px var(--tr-sans); color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr__h-price { text-align: right; font: 600 12.5px var(--tr-mono); }
.tr__h-fee { text-align: right; font: 600 11.5px var(--tr-mono); color: rgba(255,255,255,.45); }
.tr__link { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.28); }
.tr__link:hover { color: var(--tr-accent); border-bottom-color: var(--tr-accent); }

/* Лайтбокс предпросмотра картинки товара. Живёт на body (вне .tr) — цвета литеральные.
   Размеры: карточка <= 94vw/720px; картинка вписывается в 70vh, мелкая — укрупняется
   до ~320px по ширине (пропорции браузер сохраняет сам). */
.tr__ph img, .tr__catimg img { cursor: zoom-in; }
.tr__lightbox {
    position: fixed; inset: 0; z-index: 99999; display: none;
    align-items: center; justify-content: center; padding: 24px;
    background: rgba(8,8,12,.82); cursor: zoom-out;
}
.tr__lightbox.is-open { display: flex; }
.tr__lightbox-box {
    background: #1b1d24; border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
    padding: 14px; display: flex; flex-direction: column; gap: 10px;
    max-width: min(720px, 94vw); animation: trPop .18s ease;
}
.tr__lightbox-box img {
    display: block; margin: 0 auto; width: auto; height: auto;
    max-width: 100%; max-height: 70vh; min-width: min(320px, 76vw);
    border-radius: 8px;
}
.tr__lightbox-cap { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.tr__lightbox-t { font: 600 14px 'Space Grotesk', system-ui, sans-serif; color: #fff; }
.tr__lightbox-s { font: 500 10.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; color: rgba(255,255,255,.45); text-transform: uppercase; }

/* Каталог: доступность + картинки */
.tr__cathint { font: 400 12px var(--tr-sans); color: var(--tr-t3); line-height: 1.5; margin-bottom: 14px; }
.tr__catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tr__catcard { background: var(--tr-row); border: 1px solid var(--tr-line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tr__catcard.is-off { opacity: .5; }
.tr__catimg { height: 96px; border: 1.5px solid rgba(255,255,255,.16); border-radius: 8px; overflow: hidden;
    background: repeating-linear-gradient(135deg,#23252c 0 8px,#20222a 8px 16px); }
.tr__catimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr__catname { font: 600 13px var(--tr-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr__catsub { font: 600 9.5px var(--tr-mono); letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr__catctrl { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.tr__catbtn { padding: 6px 10px; border-radius: 7px; border: 1px solid var(--tr-line2); color: var(--tr-t2);
    font: 700 11px var(--tr-sans); cursor: pointer; background: transparent; }
.tr__catbtn:hover { color: #fff; border-color: var(--tr-accent); }
.tr__catbtn--del { border-color: rgba(249,112,102,.4); color: var(--tr-danger); }
.tr__catbtn--del:hover { background: rgba(249,112,102,.12); }
.tr__catctrl .tr__switch { margin-left: auto; }

/* ---------- Модалки ---------- */
.tr__overlay {
    position: absolute; inset: 0; z-index: 20; display: none;
    align-items: center; justify-content: center; background: rgba(8,8,12,.68); border-radius: 14px;
}
.tr__overlay.is-open { display: flex; }
.tr__modal {
    width: 340px; max-width: calc(100% - 32px); background: var(--tr-row);
    border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 20px;
    display: flex; flex-direction: column; gap: 14px; animation: trPop .18s ease;
}
@keyframes trPop { from { transform: scale(.96); } to { transform: none; } }
.tr__modal-h { font: 700 16px var(--tr-sans); }
.tr__modal-item { font: 600 13px var(--tr-sans); color: rgba(255,255,255,.85); }
.tr__modal-cat { font: 500 11px var(--tr-sans); color: var(--tr-t3); }
.tr__receipt { display: flex; flex-direction: column; gap: 8px; background: var(--tr-field); border-radius: 9px; padding: 12px 14px; }
.tr__rrow { display: flex; justify-content: space-between; gap: 10px; font: 500 11px var(--tr-mono); color: rgba(255,255,255,.5); }
.tr__rrow b { color: #fff; font-weight: 600; white-space: nowrap; }
.tr__rrow b.ok { color: var(--tr-ok); }
.tr__rrow b.bad { color: var(--tr-danger); }
.tr__modal-inp {
    width: 100%; background: var(--tr-field); border: 1px solid rgba(255,255,255,.14); border-radius: 9px;
    padding: 11px 14px; color: #fff; font: 600 14px var(--tr-mono); outline: none;
}
.tr__modal-inp:focus { border-color: var(--tr-accent); }
.tr__modal-actions { display: flex; gap: 8px; }
.tr__btn { padding: 10px 0; text-align: center; border-radius: 8px; font: 700 12px var(--tr-sans); cursor: pointer; }
.tr__btn--ghost { flex: 1; border: 1px solid rgba(255,255,255,.14); color: var(--tr-t2); }
.tr__btn--ghost:hover { color: #fff; }
.tr__btn--accent { flex: 1.4; background: var(--tr-accent); color: #14151a; }
.tr__btn--accent:hover { filter: brightness(1.08); }

/* ---------- Адаптив ---------- */
@media (max-width: 720px) {
    .tr__body { grid-template-columns: 1fr; }
    .tr__side { flex-direction: row; flex-wrap: wrap; gap: 14px; border-right: none; border-bottom: 1px solid var(--tr-line); padding: 14px; }
    .tr__side-foot { display: none; }
    .tr__settings-grid { grid-template-columns: 1fr; }
    .tr__cols { display: none; }
    .tr__row--m, .tr__row--inv, .tr__row--lot { grid-template-columns: 40px 1fr auto; }
    .tr__row .tr__rar { display: none; }
}