/* Цвета вынесены в переменные - как в форке коллеги, откуда взят и
   сам вид. Темы оформления переопределяют их же (appearance.css),
   поэтому любой выбранный цвет темы по-прежнему работает. */
:root {
    --page-bg: #090d16;
    --bar-bg: #111827;
    --panel-bg: #141d30;
    --field-bg: #182238;
    --sidebar-bg: color-mix(in srgb, var(--bar-bg, #111827) 55%, var(--page-bg, #090d16));
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: #2b3650;
    --line-subtle: rgba(255, 255, 255, 0.05);
    --text: #f8fafc;
    --text-2: #cbd5e1;
    --muted: #8492a6;
}

* { box-sizing: border-box; }

.hidden { display: none !important; }

body {
    margin: 0;
    font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: #090d16;
    color: #f8fafc;
    font-size: 14px;
}

/* ---------- Раскладка: колонка слева, страница справа ---------- */
/*
   Вкладок полтора десятка, и в один ряд они не помещались - половина
   уезжала за край. В колонке они разложены по смыслу и видны все
   сразу, а ряд сверху оставлен под состояние фоновых кругов и
   служебные разделы.
*/

body { display: flex; min-height: 100vh; }

.page {
    flex: 1;
    min-width: 0;          /* иначе широкие таблицы растягивают страницу */
    display: flex;
    flex-direction: column;
}

.sidebar {
    width: 250px;
    flex: none;
    display: flex;
    flex-direction: column;
    background: var(--sidebar-bg, #0f1523);
    border-right: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    position: sticky;
    top: 0;
    height: 100vh;
}

/* Знак втрое крупнее прежнего (90 против 30), и рядом с названием он
   уже не помещается - колонка всего 250 пикселей. Поэтому вывеска
   собрана столбиком и по центру: знак, под ним название, под ним
   "by STEALNORE". */
.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}

/* Название - крупно: это единственная вывеска программы на экране.
   "by STEALNORE" в одну строку с ним в колонку не влезает,
   поэтому уходит строкой ниже, вровень с названием. */
.sidebar-brand .brand-icon {
    width: 90px;
    height: auto;
    filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--accent, #2f6fed) 45%, transparent));
}

/* margin: 0 - у h1 он свой и немаленький: без сброса вывеска занимала
   184 пикселя высоты вместо 150, и из колонки выдавливались вкладки. */
.sidebar-brand h1 { font-size: 23px; letter-spacing: 0.01em; line-height: 1; margin: 0; }

.sidebar-brand .brand-by {
    font-size: 11px;
    white-space: nowrap;
}

/* В свёрнутой колонке знак такого размера не нужен - там от вывески
   остаётся только он сам. */
body.sidebar-hidden .sidebar-brand .brand-icon { width: 30px; }

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 8px 12px;
}

/* Название группы: не кнопка, а подпись - поэтому мелко и приглушённо. */
.side-group {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    padding: 14px 8px 6px;
}

.side-group:first-child { padding-top: 4px; }

/* Значок вкладки: по нему вкладка находится глазом быстрее, чем по
   слову, - особенно когда их полтора десятка. Ширина фиксированная,
   чтобы подписи стояли ровным столбцом. */
.side-icon {
    width: 18px;
    flex: none;
    text-align: center;
    font-size: 14px;
    opacity: 0.9;
}

.tab-btn.side-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border-radius: 8px;
    border-bottom: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.tab-btn.side-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

/* Выбранная вкладка залита цветом акцента со свечением - как у
   коллеги. Полоска слева читалась хуже: на длинном списке глаз её
   терял. Цвет берётся из темы, поэтому меняется вместе с акцентом. */
.tab-btn.side-btn.active {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent, #2f6fed) 70%, #000), var(--accent, #2f6fed));
    color: #fff;
    font-weight: 600;
    border-bottom: none;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #2f6fed) 35%, transparent);
}

.tab-btn.side-btn.active .side-icon { opacity: 1; }

/* Свёрнутая колонка: страница шире, навигация - по кнопке. */
body.sidebar-hidden .sidebar { display: none; }

/* ---------- Кто вошёл: внизу колонки ---------- */

.sidebar-user {
    border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    background: rgba(11, 16, 27, 0.5);
    padding: 8px 10px;
    position: relative;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.user-chip:hover,
.user-chip[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Раскрытое меню видно и по самой плашке: рамка цветом акцента. */
.user-chip[aria-expanded="true"] {
    border-color: var(--accent, #2f6fed);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent, #2f6fed) 25%, transparent);
}

.user-chip[aria-expanded="true"] .user-chip-arrow { transform: rotate(180deg); }

.user-chip-arrow { transition: transform 0.2s ease; }

.avatar-chip { width: 32px; height: 32px; font-size: 13px; }

.user-chip-text { display: flex; flex-direction: column; min-width: 0; }

.user-chip-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-chip-role { font-size: 11.5px; color: #64748b; }

.user-chip-arrow { margin-left: auto; color: #64748b; }

.user-menu {
    position: absolute;
    bottom: calc(100% - 4px);
    left: 8px;
    right: 8px;
    background: #1e293b;
    border: 1px solid #2b3650;
    border-radius: 8px;
    padding: 4px;
    z-index: 30;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.user-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: #f8fafc;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13.5px;
    text-decoration: none;
}

.user-menu-item:hover { background: #2a374f; }

/* ---------- Служебные разделы: ряд над страницей ---------- */

.service-nav {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}

.service-tabs { display: flex; flex-wrap: wrap; gap: 8px; }

.service-tab {
    padding: 8px 14px;
    background: var(--panel-bg, #141d30);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    color: var(--text-2, #cbd5e1);
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.service-tab:hover {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.service-tab.active {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent, #2f6fed) 70%, #000), var(--accent, #2f6fed));
    border-color: color-mix(in srgb, var(--accent, #2f6fed) 40%, transparent);
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #2f6fed) 35%, transparent);
}

/* Подпись - одна, к открытому разделу. Под каждой кнопкой они
   раздували ряд на два этажа. */
.service-hint {
    margin: 8px 0 0;
    min-height: 16px;
    font-size: 12px;
    color: #64748b;
}

.icon-btn {
    background: none;
    border: none;
    color: #8492a6;
    cursor: pointer;
    font-size: 18px;
    padding: 2px 6px;
    border-radius: 6px;
}

.icon-btn:hover { background: #1e293b; color: #f8fafc; }

.topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    flex: none;
    padding: 0 18px;
    background: var(--bar-bg, #111827);
    border-bottom: 1px solid var(--line, #2b3650);
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
}

.brand-icon { width: 22px; height: auto; }

.topbar h1 {
    font-size: 18px;
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.brand-by {
    font-size: 12px;
    color: #64748b;
    margin-left: 2px;
}

.topbar-actions { display: flex; gap: 8px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #1e293b;
    color: var(--text-2, #cbd5e1);
    border: 1px solid var(--line, #2b3650);
    border-radius: 8px;
    padding: 7px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    font-family: inherit;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* Кнопка чуть приподнимается под курсором - так у коллеги, и так
   понятнее, что она нажимается. */
.btn:hover:not(:disabled) {
    background: #2a374f;
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text, #f8fafc);
    transform: translateY(-1px);
}

.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Главная кнопка - с переливом и тенью: так она заметна среди
   десятка соседних, и это тот же приём, что у коллеги. Цвет берётся
   у акцента, поэтому слушается настроек оформления. */
.btn-primary {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent, #2f6fed) 80%, #000), var(--accent, #2f6fed));
    border-color: color-mix(in srgb, var(--accent, #2f6fed) 40%, transparent);
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent, #2f6fed) 25%, transparent);
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent, #2f6fed) 65%, #000),
        color-mix(in srgb, var(--accent, #2f6fed) 88%, #000));
    border-color: var(--accent, #2f6fed);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent, #2f6fed) 40%, transparent);
    color: #fff;
}

.btn-secondary { background: #1e293b; }
.btn-secondary:hover:not(:disabled) { background: #283548; }

.btn-danger {
    background: linear-gradient(135deg, #be123c, #e11d48);
    border-color: rgba(225, 29, 72, 0.4);
    color: #fff;
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25);
}

.btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #9f1239, #be123c);
    border-color: #e11d48;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.4);
    color: #fff;
}

.btn-small { padding: 5px 10px; font-size: 12px; border-radius: 6px; }

/* Ссылка, оформленная кнопкой. В строке лота так сделана "Правка": она
   ведёт на форму редактирования на FunPay, то есть обязана быть именно
   ссылкой (открывается в новой вкладке), а выглядеть должна как соседние
   кнопки. Без этих строк она вылезала подчёркнутым текстом не по росту. */
a.btn {
    display: inline-flex;
    text-decoration: none;
    vertical-align: middle;
    /* Кнопка строчную высоту не наследует, а ссылка наследует - от
       таблицы, где она в полтора раза больше, и "Правка" распирала
       строку. Ровно 1.1: у кнопки внутренняя строка плотнее обычной, и
       normal её не повторяет - замерено, 22px против 19px у соседей. */
    line-height: 1.1;
}

.btn-link {
    background: none;
    border: none;
    color: #8ab4f8;
    cursor: pointer;
    font-size: 12px;
}

.job-panel {
    background: #070a11;
    border-bottom: 1px solid #1e293b;
    padding: 10px 20px;
}

.job-panel.hidden { display: none; }

.job-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
}

#job-log {
    max-height: 180px;
    overflow-y: auto;
    background: #070a11;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    color: #8492a6;
    margin: 0;
    white-space: pre-wrap;
}

.tabs {
    display: flex;
    gap: 4px;
    padding: 10px 20px 0;
    border-bottom: 1px solid #1e293b;
}

.tab-btn {
    background: none;
    border: none;
    color: #8492a6;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 2px solid transparent;
}

.tab-btn.active {
    color: #f8fafc;
    border-bottom-color: #2f6fed;
}

main { padding: 16px 20px 40px; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Кто вошёл - слева от кнопок в правом верхнем углу. */
.topbar-user { align-self: center; margin-right: 4px; font-size: 13px; color: #8492a6; }

/* Формы профиля: поля и кнопка в одну строку, в узком окне - столбиком. */
.profile-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 14px; }
.profile-form input, .profile-form select, #accounts-tbody input, #accounts-tbody select {
    padding: 7px 10px; color: inherit; font: inherit;
    background: #182238; border: 1px solid #2b3650; border-radius: 6px;
}
#accounts-tbody input { width: 150px; }

/* Вкладки "Чат" и "Заказы": встроенная страница во всю высоту под вкладками. */
#chat-frame,
#orders-frame {
    display: block;
    width: 100%;
    height: calc(100vh - 140px);
    min-height: 480px;
    border: 0;
}

/* Число непрочитанных переписок на вкладке "Чат". */
.tab-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 9px;
    background: #c0392b;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

/* Поля ввода - в цвет панели, а не в белый цвет браузера.
   Тёмная страница с белыми полями выглядит недоделанной и слепит,
   поэтому фон, рамка и цвет текста берутся у самой панели. Правило
   общее, чтобы новое поле не приходилось красить отдельно; частные
   стили ниже его уточняют. */
input[type="text"], input[type="number"], input[type="password"],
input[type="search"], input[type="date"], input[type="email"],
input:not([type]), textarea, select {
    padding: 7px 10px;
    background: var(--field-bg, #182238);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
}

textarea {
    line-height: 1.45;
    resize: vertical;
}

input::placeholder, textarea::placeholder { color: #64748b; }

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent, #2f6fed);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2f6fed) 18%, transparent);
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.toolbar input[type="text"] {
    background: #111827;
    border: 1px solid #2b3650;
    border-radius: 6px;
    color: #f8fafc;
    padding: 7px 10px;
    font-size: 13px;
    min-width: 280px;
}

.toolbar select {
    background: #111827;
    border: 1px solid #2b3650;
    border-radius: 6px;
    color: #f8fafc;
    padding: 7px 10px;
    font-size: 13px;
}

.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 13px; }

.muted { color: #8492a6; font-size: 12px; }

.maintenance-group {
    background: var(--panel-bg, #141d30);
    border: 1px solid var(--line, #2b3650);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.maintenance-group h3 {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text, #f8fafc);
}
.maintenance-group p.muted { margin: 0 0 12px; }
.maintenance-group .btn { margin-right: 8px; }

.seller-rebuild-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 12px;
}
.seller-rebuild-checks label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.price-stale { color: #e0546b; font-weight: 600; }

/* Цена для покупателя - справочная: решение продавец принимает по своей
   цене и прибыли, а эта нужна, чтобы сравнить себя с конкурентами в
   выдаче. Поэтому приглушена, а процент наценки ещё бледнее. */
.buyer-price { color: #8492a6; cursor: help; }

.out-of-stock { color: #e0546b; font-weight: 600; white-space: nowrap; }

/* Скидка в Steam: игра на распродаже идёт первой в очереди на выкладку. */
.discount-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(76, 175, 80, 0.16);
    color: #6fcf7a;
}
.discount-badge.discount-big { background: rgba(76, 175, 80, 0.28); color: #8ae394; }

.spacer { flex: 1; }

/* ---------- Деньги в колонке, над своей фотографией ---------- */

.sidebar-money {
    display: flex;
    gap: 6px;
    padding: 8px 10px 0;
}

.sidebar-money .money-box { flex: 1; min-width: 0; }

.money-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 6px 10px;
    background: var(--panel-bg, #141d30);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    color: inherit;
    font-family: inherit;
    text-align: left;
    line-height: 1.15;
}

button.money-box { cursor: pointer; }

button.money-box:hover {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.15);
}

.money-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

/* Колонка узкая: длинная цифра обрезается многоточием, а не распирает
   плашку и не переносится на вторую строку. Целиком её видно в
   подсказке. */
.money-value {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Заработок за день: зелёный, когда он есть, и приглушённый, когда
   продаж ещё не было - чтобы ноль не выглядел тревожно. */
.money-value.earned { color: #6fd08c; }
.money-value.idle { color: #8492a6; }
.money-value.stale { color: #d1a054; }

.table-wrap {
    overflow-x: auto;
    background: var(--panel-bg, #141d30);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }

th, td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line-subtle, rgba(255, 255, 255, 0.05));
    white-space: nowrap;
}

th {
    background: var(--bar-bg, #111827);
    position: sticky;
    top: 0;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--muted, #8492a6);
}

tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

/* Рынок: выигрываем у соседей или уже упёрлись в норму прибыли. */
.market-winning { color: #6fd08c; }
.market-losing { color: #e0637a; }

/* Лот вне каталога: выложен руками, программой не ведётся. */
.outside-mark {
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(111, 208, 140, 0.12);
    border: 1px solid rgba(111, 208, 140, 0.3);
    color: #6fd08c;
    font-size: 11px;
}

.status-published { color: #6fd08c; }
.status-unpublished { color: #8492a6; }
.status-error { color: #e0637a; }

/* ---------- Фото профиля ---------- */

.avatar {
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

.avatar-small { width: 22px; height: 22px; vertical-align: middle; margin-right: 6px; }

.avatar-big { width: 96px; height: 96px; }

/* Пока фото нет, место под него всё равно занято: иначе блок прыгает
   при первой загрузке. */
.avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border, #2b3650);
    color: #8492a6;
    font-size: 0.8em;
}

.profile-avatar { display: flex; gap: 16px; align-items: flex-start; margin: 12px 0 4px; }

/* Не ошибка, но и не "всё хорошо": данные устарели и это важно видеть
   (например, статусы с FunPay старше самой таблицы лотов). */
.status-warn { color: #d1a054; }
/* Хорошая новость: есть что обновить, лот в наличии и подобное. */
.status-on { color: #5fcf80; }

.active-yes { color: #6fd08c; }
.active-no { color: #e0637a; }

a.link { color: #8ab4f8; text-decoration: none; margin-right: 8px; }
a.link:hover { text-decoration: underline; }

.row-actions button,
.row-actions a.btn { margin-right: 4px; }

.section-title {
    font-size: 15px;
    font-weight: 600;
    margin: 24px 0 8px;
}

.section-title:first-child { margin-top: 0; }

.topup-calc {
    background: #111827;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 16px;
}

.topup-calc input[type="number"] { max-width: 160px; }

.topup-calc-result {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.topup-calc-card {
    background: #070a11;
    border-radius: 6px;
    padding: 10px 14px;
}

.topup-calc-card .label { font-size: 12px; color: #8492a6; margin-bottom: 4px; }
.topup-calc-card .value { font-size: 18px; font-weight: 600; }

/* Доля продавца в процентах: узкое поле, рядом подпись "вам N%". */
/* ---------- список обновлений ---------- */
.changelog-item {
    background: #141d30; border: 1px solid #1e293b; border-radius: 8px;
    padding: 12px 16px; margin-bottom: 10px;
}

/* Новая запись заметна полосой слева - её не пролистываешь мимо. */
.changelog-item.changelog-new { border-left: 3px solid #3fae63; padding-left: 13px; }

.changelog-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.changelog-title { font-weight: 600; }

.changelog-chip {
    padding: 1px 7px; border-radius: 9px; font-size: 11px;
    background: #17301f; color: #6fd08c; border: 1px solid #2f6f45;
}

.changelog-changes {
    margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: #cbd5e1; line-height: 1.55;
}

.changelog-changes li { margin-bottom: 4px; }

/* Поле закупки в таблице кастомных лотов: узкое, чтобы не распирать
   строку, и выровнено по правому краю - там же, где читают числа. */
.custom-cost {
    width: 90px;
    padding: 4px 6px;
    text-align: right;
    font: inherit;
}

/* Ответ на отзыв - строка текста, и места ей нужно больше, чем цифре. */
.custom-reply {
    width: 100%;
    min-width: 220px;
    padding: 4px 6px;
    font: inherit;
}

.share-input {
    width: 68px; padding: 4px 6px; color: inherit; font: inherit;
    background: #182238; border: 1px solid #2b3650; border-radius: 6px;
}

.rate-input {
    background: #070a11;
    border: 1px solid #2b3650;
    border-radius: 4px;
    color: #f8fafc;
    padding: 4px 6px;
    font-size: 13px;
    width: 90px;
}

/* Своя строка в разбивке прибыли: её выделяем, потому что она считается
   иначе - без доли и без выплаты продавцу. */
.earnings-own td { background: #1e293b; }

/* Закупка, подставленная по прежней такой же продаже: цифра настоящая,
   но угаданная - её видно и можно поправить, не перепутав с вписанной. */
.cost-guessed {
    color: #8492a6;
    border-style: dashed;
}

.topup-price-actions {
    white-space: nowrap;
}

.topup-price-actions .act-topup-price-custom-input {
    width: 84px;
    margin-right: 4px;
}

.col-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: #8492a6;
    font-weight: 600;
    font-size: inherit;
    font-family: inherit;
    padding: 0;
    cursor: pointer;
}

.col-filter-btn:hover { color: #f8fafc; }

.col-filter-icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #64748b;
}

.col-filter-btn.filter-active { color: #4c82f0; }
.col-filter-btn.filter-active .col-filter-icon { border-top-color: #4c82f0; }

.col-filter-dropdown {
    position: fixed;
    z-index: 50;
    background: #111827;
    border: 1px solid #2b3650;
    border-radius: 8px;
    padding: 8px;
    min-width: 200px;
    max-width: 320px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.col-filter-dropdown.hidden { display: none; }

.col-filter-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 4px 8px;
    border-bottom: 1px solid #1e293b;
    margin-bottom: 6px;
}

.col-filter-list {
    max-height: 260px;
    overflow-y: auto;
}

.col-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: normal;
    white-space: normal;
    cursor: pointer;
}

.col-filter-item:hover { background: #1e293b; }
.col-filter-item input { flex: none; }

/* Строка под таблицей: раньше кнопки страниц, теперь метка подгрузки.
   Она же служит целью наблюдателя прокрутки, поэтому должна занимать
   место даже пустой. */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 34px;
    margin-top: 10px;
    font-size: 13px;
}

.expand-row td {
    background: #070a11;
    white-space: normal;
}

.variant-mini {
    display: inline-block;
    margin: 2px 8px 2px 0;
    padding: 2px 6px;
    background: #111827;
    border-radius: 4px;
    font-size: 12px;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay.hidden { display: none; }

.modal {
    background: #111827;
    border: 1px solid #2b3650;
    border-radius: 10px;
    padding: 20px;
    max-width: 420px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.edit-modal {
    max-width: 900px;
    width: 90vw;
}

.edit-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.edit-modal-head h3 {
    margin: 0;
    font-size: 15px;
}

.edit-columns {
    display: flex;
    gap: 20px;
}

.edit-col {
    flex: 1;
    min-width: 0;
}

.edit-col h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 13px;
    color: #8492a6;
}

.checkbox-label.small {
    font-size: 12px;
    font-weight: normal;
    color: #8492a6;
}

.edit-label {
    display: block;
    font-size: 12px;
    color: #8492a6;
    margin: 8px 0 4px;
}

.edit-col input[type="text"],
.edit-col textarea {
    width: 100%;
    background: #070a11;
    border: 1px solid #2b3650;
    border-radius: 6px;
    color: #f8fafc;
    padding: 7px 10px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
}

.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #1e293b;
    border: 1px solid #2b3650;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
}

.toast.hidden { display: none; }
.toast.error { border-color: #7a2632; color: #e0637a; }

.task-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f0b429;
    margin-left: 4px;
}

.task-dot.hidden { display: none; }

/* ---------- Справка ---------- */

/* Логотип слева, описание справа. На узком экране колонки складываются
   в одну: читать описание в 30 символов ширины невозможно. */
.help-head {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 8px;
}

.help-logo {
    flex: 0 0 260px;
    max-width: 260px;
}

.help-logo img { width: 100%; display: block; }

/* Подпись идёт сразу под названием в самом логотипе, поэтому отступ
   сверху отрицательный: в SVG под текстом остаётся пустое поле. */
.help-logo-by {
    margin-top: -6px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.help-about { flex: 1; min-width: 0; max-width: 900px; }

.help-about h2 { margin: 0 0 12px; font-size: 22px; }

/* Первая строка описания - главная мысль, и читать её должны раньше
   всего остального. */
.help-lead {
    font-size: 16px;
    color: #cbd5e1 !important;
    margin-bottom: 14px !important;
}
.help-about h3 { margin: 20px 0 8px; font-size: 15px; color: #cbd5e1; }
.help-about p { margin: 0 0 10px; color: #8492a6; line-height: 1.6; }

.help-list {
    margin: 0 0 10px;
    padding-left: 20px;
    color: #8492a6;
    line-height: 1.7;
}

.help-list b { color: #cbd5e1; }

/* Шаги идут карточками: порядок работы читают по диагонали, выхватывая
   "когда", а не подряд. */
.help-steps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}

.help-step {
    background: #111827;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 14px 16px;
}

.help-step-when {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #f0b429;
    margin-bottom: 6px;
}

.help-step h4 { margin: 0 0 8px; font-size: 15px; }
.help-step p { margin: 0; color: #8492a6; line-height: 1.6; font-size: 13px; }

.help-tabs p {
    margin: 0 0 8px;
    color: #8492a6;
    line-height: 1.6;
    max-width: 900px;
}

.help-tabs b { color: #cbd5e1; }

@media (max-width: 900px) {
    .help-head { flex-direction: column; gap: 20px; }
    .help-logo { flex-basis: auto; max-width: 200px; }
}

/* Кнопки в углу работают как вкладки, значит и выглядеть должны так:
   иначе на странице аккаунта не видно, где находишься. */
.topbar-actions .btn.active {
    background: #2f6fed;
    border-color: #2f6fed;
    color: #fff;
}

/* Задача идёт, а служебный ряд закрыт - показываем это на самой кнопке
   "Обслуживание", иначе продавец узнаёт о работе, только заглянув. */
#btn-open-maintenance.has-running-job::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f0b429;
    margin-left: 6px;
    vertical-align: middle;
}

.task-current {
    background: #111827;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.task-current-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.task-status-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.task-status-badge.running { background: #3a3320; color: #f0b429; }
.task-status-badge.done { background: #1e3324; color: #6fd08c; }
.task-status-badge.error { background: #3a2026; color: #e0637a; }
.task-status-badge.cancelled { background: #334155; color: #94a3b8; }

#task-current pre {
    max-height: 420px;
    overflow-y: auto;
    background: #070a11;
    border-radius: 6px;
    padding: 10px;
    font-size: 12px;
    color: #8492a6;
    white-space: pre-wrap;
    margin: 0;
}

.task-history-title { font-size: 14px; color: #8492a6; margin: 0 0 8px; }

/* Столбец действий закреплён у правого края: таблица лотов шире экрана
   (шестнадцать столбцов), и кнопки уезжали за границу окна - до них
   приходилось доскроллить, а на широком мониторе полосу прокрутки под
   таблицей ещё надо было заметить. */
#lots-table th:last-child,
#lots-table td:last-child {
    position: sticky;
    right: 0;
    background: #090d16;
    box-shadow: -8px 0 10px -8px rgba(0, 0, 0, 0.7);
}

#lots-table thead th:last-child {
    background: #111827;
    z-index: 3;
}

#lots-table tbody tr:hover td:last-child { background: #111827; }

/* Чекбокс и ID - у левого края: прокрутив таблицу вправо, надо
   по-прежнему видеть, к какому лоту относится строка и отмечен ли он.
   Ширина чекбокса задана явно - от неё считается отступ столбца ID. */
#lots-table th:first-child,
#lots-table td:first-child {
    position: sticky;
    left: 0;
    width: 36px;
    min-width: 36px;
    background: #090d16;
    z-index: 1;
}

#lots-table th:nth-child(2),
#lots-table td:nth-child(2) {
    position: sticky;
    left: 36px;
    background: #090d16;
    z-index: 1;
    box-shadow: 8px 0 10px -8px rgba(0, 0, 0, 0.7);
}

#lots-table thead th:first-child,
#lots-table thead th:nth-child(2) {
    background: #111827;
    z-index: 3;
}

#lots-table tbody tr:hover td:first-child,
#lots-table tbody tr:hover td:nth-child(2) { background: #111827; }

/* Кнопки действий в одну строку и покомпактнее - иначе закреплённый
   столбец съедает треть ширины таблицы. */
#lots-table .row-actions { white-space: nowrap; }

#lots-table .row-actions button,
#lots-table .row-actions a.btn {
    margin-right: 3px;
    padding: 4px 7px;
    font-size: 12px;
}

/* ---------- Таблица лотов подстраивается под ширину экрана ----------

   Столбцов шестнадцать, и на любом мониторе уже их родных ширин
   таблица не помещалась. Поэтому две меры сразу:

   1) длинный текст обрезается многоточием, а полностью показывается в
      подсказке при наведении - названия игр и перечисления регионов
      растягивали таблицу сильнее всего;
   2) на узких экранах самые второстепенные столбцы прячутся, начиная с
      платформы (у нас всегда PC) и категории.

   Скрытые столбцы не теряются: стоит открыть панель на экране пошире,
   и они возвращаются. */

#lots-table .col-game,
#lots-table .col-edition,
#lots-table .col-region,
#lots-table .col-category,
#lots-table .col-seller,
#lots-table .col-method {
    overflow: hidden;
    text-overflow: ellipsis;
}

#lots-table .col-game { max-width: 24ch; }
#lots-table .col-region { max-width: 17ch; }
#lots-table .col-edition { max-width: 14ch; }
#lots-table .col-category { max-width: 13ch; }
#lots-table .col-seller { max-width: 11ch; }
#lots-table .col-method { max-width: 12ch; }

/* Просторный вариант - для мониторов шире Full HD. */
@media (min-width: 2100px) {
    #lots-table .col-game { max-width: 32ch; }
    #lots-table .col-region { max-width: 24ch; }
    #lots-table .col-edition { max-width: 20ch; }
    #lots-table .col-category { max-width: 18ch; }
    #lots-table .col-seller { max-width: 14ch; }
}

@media (max-width: 1800px) {
    #lots-table .col-game { max-width: 21ch; }
    #lots-table .col-region { max-width: 15ch; }
    #lots-table .col-edition { max-width: 13ch; }
    #lots-table .col-category { max-width: 12ch; }
}

/* Платформа у нас всегда PC - это первое, чем можно пожертвовать. */
@media (max-width: 1750px) {
    #lots-table .col-platform { display: none; }
}

@media (max-width: 1600px) {
    #lots-table .col-category { display: none; }
    #lots-table .col-game { max-width: 19ch; }
    #lots-table .col-region { max-width: 14ch; }
}

/* Цена на FunPay имеет смысл только у выложенных лотов. */
@media (max-width: 1450px) {
    /* Отступы ячеек - незаметная, но самая дешёвая экономия: по паре
       пикселей с каждой из полутора десятков колонок набегает больше,
       чем даёт сжатие любого одного столбца. */
    #lots-table th,
    #lots-table td { padding: 7px 7px; }

    #lots-table .col-live { display: none; }
    /* Прячем следом за "На FunPay": обе цены справочные, а на узком
       экране важнее своя цена, прибыль и кнопки. */
    #lots-table .col-buyer { display: none; }
    #lots-table .col-game { max-width: 15ch; }
    #lots-table .col-region { max-width: 12ch; }
    #lots-table .col-edition { max-width: 10ch; }
    #lots-table .col-method { max-width: 10ch; }
    #lots-table .col-seller { max-width: 9ch; }
}

/* Шесть кнопок действий - самый широкий столбец таблицы (треть от
   всего). На узких экранах ужимаем их, а не прячем: кнопка, до которой
   нельзя дотянуться, бесполезнее мелкой. */
@media (max-width: 1500px) {
    #lots-table .row-actions button,
    #lots-table .row-actions a.btn {
        margin-right: 2px;
        padding: 4px 5px;
        font-size: 11px;
    }
}

@media (max-width: 1300px) {
    #lots-table th,
    #lots-table td { padding: 6px 5px; }

    #lots-table .col-seller { display: none; }
    #lots-table .col-game { max-width: 13ch; }
    #lots-table .col-region { max-width: 10ch; }
    #lots-table .col-edition { max-width: 9ch; }
    #lots-table .col-method { max-width: 9ch; }

    #lots-table .row-actions button,
    #lots-table .row-actions a.btn {
        margin-right: 1px;
        padding: 4px 4px;
    }
}

@media (max-width: 1150px) {
    #lots-table { font-size: 12px; }

    #lots-table th,
    #lots-table td { padding: 5px 4px; }

    #lots-table .col-method { display: none; }
    #lots-table .col-game { max-width: 12ch; }
    #lots-table .col-region { max-width: 9ch; }
    #lots-table .col-edition { max-width: 8ch; }

    #lots-table .row-actions button,
    #lots-table .row-actions a.btn { padding: 3px 4px; font-size: 10px; }
}

/* Ниже этого таблицу уже не ужать без потери смысла - остаётся
   горизонтальная прокрутка, а ID и кнопки закреплены по краям, так что
   строка не теряется. */
@media (max-width: 900px) {
    #lots-table .col-links { display: none; }
}

/* Внешние задачи на вкладке "Задача" - лог процесса, запущенного мимо
   панели. */
.external-job {
    border: 1px solid #1e293b;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.external-job.is-running { border-color: #2f6fed; }

.external-job-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #111827;
}

.external-job-title { font-weight: 600; }

.status-running { color: #6fd08c; font-weight: 600; }

.external-job-log {
    margin: 0;
    padding: 10px 12px;
    max-height: 260px;
    overflow: auto;
    background: #070a11;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Вкладка "Покрытие": ответ "есть/нет" должен читаться взглядом по
   столбцу, не вчитываясь в текст. */
.cov-yes { color: #6fd08c; font-weight: 600; }
.cov-no { color: #e0637a; font-weight: 600; }

#coverage-table .col-game { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; }

#coverage-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }

#coverage-stats .stat {
    background: #111827;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 8px 14px;
}

#coverage-stats .stat .label { font-size: 12px; color: #8492a6; margin-bottom: 4px; }
#coverage-stats .stat .value { font-size: 19px; font-weight: 600; }

/* Заголовки-сортировки на вкладке "Покрытие". Стрелка появляется у
   активного столбца и показывает направление. */
/* Ссылка на заказ на самой площадке - рядом с номером, но тише его:
   в программе у заказа своя страница, и обычно нужна именно она. */
.order-funpay-link { font-size: 11px; }

/* Вид один на все таблицы - покрытие, лоты, продажи: серая "⇅" говорит,
   что по столбцу можно щёлкнуть, стрелка - по какому столбцу и в какую
   сторону отсортировано сейчас. */
th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.sortable:hover { color: #fff; }

th .sort-icon { margin-left: 6px; opacity: 0.5; }

th.sortable:not(.sorted) .sort-icon::after { content: "\2195"; }
th.sorted .sort-icon { opacity: 1; }
th.sorted[data-dir="asc"] .sort-icon::after { content: "\2191"; }
th.sorted[data-dir="desc"] .sort-icon::after { content: "\2193"; }

/* Исключённая категория - приглушённая строка: видно, что она в списке
   есть, но в работе не участвует. */
#excluded-table tr.row-excluded { opacity: 0.55; }
#excluded-table tr.row-excluded td:first-child { text-decoration: line-through; }
#excluded-table .col-game { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; }

/* Приблизительное совпадение - жёлтым: это догадка, требующая решения,
   а не подтверждённый факт. */
.cov-maybe { color: #e0b341; font-weight: 600; }

/* Строка-приоритет на вкладке общих категорий: первая десятка без своей
   категории на FunPay. */
#showcase-table tr.row-preferred { background: rgba(111, 208, 140, 0.07); }

.badge-priority {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    background: #2f6fed;
    color: #fff;
    font-size: 11px;
}

#showcase-table .col-game { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; }
#showcase-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
#showcase-stats .stat { background: #111827; border: 1px solid #1e293b; border-radius: 8px; padding: 8px 14px; }
#showcase-stats .stat .label { font-size: 12px; color: #8492a6; margin-bottom: 4px; }
#showcase-stats .stat .value { font-size: 19px; font-weight: 600; }

/* Таблицы лотов на вкладке общих категорий - те же столбцы, что во
   вкладке "Лоты", и ведут себя так же: длинный текст обрезается, а
   столбец действий закреплён у правого края. */
.showcase-lots-table .col-game { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }
.showcase-lots-table .col-seller { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }

.showcase-lots-table th:last-child,
.showcase-lots-table td:last-child {
    position: sticky;
    right: 0;
    background: #090d16;
    box-shadow: -8px 0 10px -8px rgba(0, 0, 0, 0.7);
}

.showcase-lots-table thead th:last-child { background: #111827; z-index: 3; }
.showcase-lots-table tbody tr:hover td:last-child { background: #111827; }
.showcase-lots-table .row-actions { white-space: nowrap; }
.showcase-lots-table .row-actions button { margin-right: 3px; padding: 4px 7px; font-size: 12px; }

/* Заголовки разделов внутри вкладки - чтобы три таблицы читались как
   три раздела, а не как одна длинная простыня. */
#tab-showcase .section-title { margin-top: 26px; }
#tab-showcase .section-title:first-child { margin-top: 0; }

/* Порядок работы - первым блоком на вкладке "Обслуживание": это ответ
   на вопрос "что нажимать", а не очередная группа кнопок. */
.maintenance-order {
    border-left: 3px solid #2f6fed;
}

.maintenance-order p { margin: 6px 0; }

/* Уточнение под кнопками группы - о времени и о том, когда её звать. */
.maintenance-hint {
    margin-top: 10px;
    font-size: 12px;
    opacity: 0.75;
}

/* Настройка лимита мест - поля ввода рядом с подписями. */
.limit-input { width: 90px; margin-left: 6px; }
.showcase-limits { border-left: 3px solid #e0b341; }

/* Возраст данных лота. Устаревшее выделяем: по такой цене нельзя
   поднимать продажу, не перевыгрузив товары продавца. */
.col-data-age { white-space: nowrap; }
.data-age { color: #8492a6; }
.data-age-stale { color: #e0a33e; font-weight: 600; }

/* Пока идёт задача, остальные кнопки обслуживания выключены - иначе
   нажатие молча упирается в отказ сервера (задача может быть только
   одна), и это выглядит как неработающая кнопка. */
.job-running-banner {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid #6b5a1f;
    border-left: 3px solid #f0b429;
    border-radius: 8px;
    background: #2a2620;
    color: #e8d9a8;
    font-size: 13px;
    line-height: 1.5;
}
.job-running-banner.hidden { display: none; }

/* Настройки автообновления цен - в одну строку, чтобы связь
   "включено / как часто / когда следующий раз" читалась сразу. */
.price-sync-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    font-size: 13px;
}
.price-sync-toggle { display: inline-flex; align-items: center; gap: 6px; }
.price-sync-hours {
    width: 56px;
    padding: 4px 6px;
    background: #182238;
    border: 1px solid #2b3650;
    border-radius: 6px;
    color: inherit;
}

/* Где на FunPay продаётся Roblox - пояснение над таблицей. Мест два и
   устроены они по-разному, поэтому это не подпись, а отдельный блок. */
.roblox-where {
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 1px solid #2a374f;
    border-left: 3px solid #5b8def;
    border-radius: 8px;
    background: #1e293b;
}
.roblox-where p { margin: 0 0 6px; }
.roblox-where ul { margin: 0 0 6px; padding-left: 20px; }
.roblox-where li { margin: 3px 0; }

/* Запасные источники товара под строкой лота. */
.alt-row > td { background: #1e222a; padding: 12px 16px; }
.alt-box p.muted { margin: 0 0 8px; }
.alt-box p.muted:last-child { margin: 8px 0 0; }
.alt-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.alt-table td { padding: 5px 8px; border-top: 1px solid #2b3650; }
.alt-table .alt-head td { border-top: none; color: #8492a6; }
.alt-num { text-align: right; white-space: nowrap; }
.alt-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 5px;
    background: #2b3650;
    color: #cbd5e1;
    font-size: 11px;
}
.alt-tag-now { background: #244436; color: #6cc79a; }

/* Вкладка аккаунта. */
.account-table { font-size: 13px; border-collapse: collapse; }
.account-table td { padding: 5px 10px 5px 0; }
.account-table td:first-child { color: #8492a6; min-width: 190px; }
.margin-row { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }

/* Таймер рядом с кнопкой. Своей строкой, а не в тот же ряд: кнопок в
   группе несколько, и вперемешку с таймерами ряд читался бы как каша. */
.schedule-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin: 6px 0 12px;
    padding-left: 2px;
    font-size: 12px;
}

.schedule-row input[type="number"] {
    width: 64px;
    padding: 4px 8px;
    background: #182238;
    border: 1px solid #2b3650;
    border-radius: 6px;
    color: inherit;
    font-family: inherit;
}

/* Свёрнутый блок редких действий. Раскрывается кликом и по умолчанию
   закрыт: в обычные дни туда заходить незачем, а место занимал целый
   экран. */
.maintenance-rare {
    background: #111827;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.maintenance-rare > summary {
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #cbd5e1;
}

.maintenance-rare .maintenance-group { padding-left: 0; padding-right: 0; }

.pricing-subtitle {
    margin: 18px 0 4px;
    font-size: 14px;
    color: #cbd5e1;
}

.margin-row input {
    width: 90px;
    padding: 7px 10px;
    background: #182238;
    border: 1px solid #2b3650;
    border-radius: 6px;
    color: inherit;
    font-family: inherit;
    font-size: 15px;
}

.account-key-row { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.account-key-row input {
    width: 380px;
    padding: 7px 10px;
    background: #182238;
    border: 1px solid #2b3650;
    border-radius: 6px;
    color: inherit;
    font-family: inherit;
}
/* Описание лота в предпросмотре: перенос по словам и сохранение
   пустых строк - на площадке они и есть абзацы. */
.format-preview-text {
    white-space: pre-wrap;
    word-break: break-word;
    margin: 6px 0;
    padding: 10px 12px;
    background: #182238;
    border: 1px solid #2b3650;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
    max-width: 760px;
}

.withdraw-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0; }
.withdraw-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #8492a6; }
.withdraw-row input, .withdraw-row select {
    min-width: 200px;
    padding: 7px 10px;
    background: #182238;
    border: 1px solid #2b3650;
    border-radius: 6px;
    color: inherit;
    font-family: inherit;
}

.account-help { margin-top: 12px; font-size: 13px; }
.account-help summary { cursor: pointer; color: #8492a6; }
.account-help ol { margin: 8px 0; padding-left: 22px; }
.account-help li { margin: 4px 0; }

/* Задача на паузе. Жёлтый - не ошибка и не успех: работа не идёт, но и
   не потеряна. */
.task-paused {
    padding: 2px 8px;
    border-radius: 6px;
    background: #3a3320;
    color: #f0b429;
    font-size: 12px;
}


/* ---------- Статистика продаж ---------- */

/* Карточки в ряд, но переносятся: окно панели бывает и в половину
   экрана, а четыре периода в одну строку тогда не помещаются. */
.stats-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 26px;
}

.stats-card {
    flex: 1 1 210px;
    background: var(--panel, #141d30);
    border: 1px solid var(--border, #2b3650);
    border-radius: 8px;
    padding: 14px 16px;
}

.stats-card-title {
    font-weight: 600;
    margin-bottom: 10px;
}

/* Карточка-счётчик: подпись сверху мелко, число крупно. Так устроены
   плашки на вкладке "Ротация витрины" - на них смотрят ради числа. */
.stats-card-value {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
}

.stats-label { color: #8492a6; }

/* Числа крупнее подписей: на карточку смотрят ради них. */
.stats-value {
    font-size: 1.15em;
    font-weight: 600;
}

.stats-unit {
    font-size: 0.8em;
    font-weight: 400;
    color: #8492a6;
}

/* Оговорка про охват прибыли - мелко, но на виду: без неё цифру можно
   принять за прибыль по всем продажам. */
.stats-note {
    margin-top: 8px;
    font-size: 0.85em;
    line-height: 1.35;
}

.stats-heading { margin: 0 0 4px; }


/* ---------- Продажи по месяцам ---------- */

/* Строка месяца - кнопка: по ней раскрываются недели. */
.month-table .month-row { cursor: pointer; }

.month-table .month-row:hover > th,
.month-table .month-row:hover > td { background: rgba(255, 255, 255, 0.04); }

/* Название месяца длиннее подписей в таблицах недель, 8ch ему мало. */
.month-table .month-name {
    width: auto;
    color: inherit;
    font-weight: 600;
}

.month-arrow {
    display: inline-block;
    width: 1.2em;
    color: #8492a6;
    transition: transform 0.12s;
}

.month-table .month-open .month-arrow { transform: rotate(90deg); }

/* Текущий месяц отмечаем полосой слева - как и текущую неделю. */
.month-table .month-current > th { box-shadow: inset 3px 0 0 var(--accent, #4a7dff); }

/* Полка с неделями: вложенные таблицы прижаты вправо как клетки, им
   нужно обычное выравнивание и отступ от строки месяца. */
.month-table .month-weeks > td {
    text-align: left;
    white-space: normal;
    padding: 12px 0 4px 18px;
    border-left: 0;
}


/* ---------- Продажи по неделям ---------- */

.week-block { margin-bottom: 18px; }

.week-title {
    font-weight: 600;
    margin-bottom: 6px;
}

/* Текущую неделю отмечаем полосой слева: она интересует чаще
   остальных, а искать её глазами в списке одинаковых блоков неудобно. */
.week-current {
    border-left: 3px solid var(--accent, #4a7dff);
    padding-left: 10px;
    margin-left: -13px;
}

.week-table { width: 100%; }

.week-table th,
.week-table td {
    text-align: right;
    white-space: nowrap;
}

/* Подпись строки и угол таблицы - слева, как в привычной таблице. */
.week-table .week-corner {
    text-align: left;
    width: 8ch;
    color: #8492a6;
    font-weight: 400;
}

.week-day { font-weight: 600; }

.week-date { font-size: 0.85em; font-weight: 400; }

/* Итог отделён чертой: глаз ищет его отдельно от дней. */
.week-table .week-total {
    border-left: 1px solid var(--border, #2b3650);
    font-weight: 600;
}

/* День, который ещё не наступил: клетка пустая и приглушённая, чтобы
   её не читали как ноль продаж. */
.week-table .week-future { background: rgba(255, 255, 255, 0.02); }


/* Оборот - вспомогательная строка под прибылью: по нему сверяются с
   личным кабинетом FunPay, но решение принимают по прибыли. */
.week-table .week-revenue td,
.week-table .week-revenue .week-corner { color: #8492a6; }

/* Звёздочка у неполного итога: часть продаж дня без известной закупки.
   Цвет предупреждающий, но не тревожный - это оговорка, а не ошибка. */
.week-partial {
    color: #d1a054;
    cursor: help;
    font-weight: 700;
}

/* Вопрос в окне подтверждения бывает со списком - переносы в нём
   должны остаться переносами, а не слиться в абзац. */
#modal-text { white-space: pre-line; }


.cost-cell { white-space: nowrap; }

.cost-cell .cost-mode { margin-right: 6px; }

.cost-cell .cost-value { width: 9ch; }


/* Возврат и незакрытый заказ: в деньги не идут, но из списка их не
   прячем - это тоже часть происходившего. Приглушаем, чтобы не путать
   с состоявшейся продажей. */
#stats-orders-table .order-not-counted td { opacity: 0.55; }

/* Название товара - самый длинный столбец; режем по ширине, полный
   текст остаётся в подсказке. */
#stats-orders-table .order-desc-cell {
    max-width: 34ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Поле закупки в строке продажи: узкое, по правому краю - рядом стоят
   числа, и разнобой в выравнивании мешал бы их сравнивать. */
#stats-orders-table .order-cost {
    width: 9ch;
    text-align: right;
}

/* ---------- Оформление лота ---------- */

/* Шаблон правится целиком одной строкой, и видеть её надо целиком:
   смайлики и подстановки вперемешку, а перенос посередине скобки
   читается как ошибка. */
.format-template-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 10px 0;
}

.format-template {
    flex: 1;
    min-width: 0;
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
}

.format-legend {
    border-collapse: collapse;
    margin-bottom: 12px;
}

.format-legend td {
    padding: 2px 12px 2px 0;
    vertical-align: top;
}

/* Заголовок показываем так, как его увидит покупатель: крупно и без
   переносов посередине - по нему и решают, годится формат или нет. */
.format-preview {
    padding: 8px 10px;
    margin-bottom: 4px;
    border: 1px solid #2b3650;
    border-radius: 6px;
    background: #182238;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 15px;
}

.format-error {
    color: #f0808f;
}

.format-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 10px 0;
}

.format-fields label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #8492a6;
}

.format-fields input {
    width: 150px;
}

.format-colors {
    border-collapse: collapse;
    margin: 10px 0;
}

.format-colors th {
    text-align: left;
    padding: 4px 8px 4px 0;
    font-size: 12px;
    color: #8492a6;
    font-weight: normal;
}

.format-colors td {
    padding: 2px 8px 2px 0;
}

.format-colors .format-game { width: 260px; }
.format-colors .format-colors-value { width: 120px; }
.format-exact-cell { text-align: center; }

/* Поля вкладки оформляются как в блоке цены: тот же фон, рамка и
   скругление - иначе они выглядят чужими на той же странице. */
#tab-format input[type="text"] {
    padding: 7px 10px;
    background: #182238;
    border: 1px solid #2b3650;
    border-radius: 6px;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
}

/* Баланс карт гостей */
.text-danger { color: #f07178; }
.balance-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.balance-form .bal-amount { width: 96px; }
.balance-form .bal-note {
    width: 160px; padding: 4px 6px; color: inherit; font: inherit;
    background: #182238; border: 1px solid #2b3650; border-radius: 6px;
}
.bal-entry { display: flex; gap: 8px; align-items: center; padding: 3px 0; }

/* Несколько задач сразу - каждая своим блоком. */
.task-current-item + .task-current-item { margin-top: 14px; padding-top: 14px; border-top: 1px solid #1e293b; }

/* Своя цена лота: закреплённую не трогает ни обход цен, ни рынок.
   Нужна заметная, но не тревожная пометка - это не ошибка, а решение
   продавца. */
.fixed-price {
    color: var(--accent, #2f6fed);
    white-space: nowrap;
}

/* Журнал активности лотов: длинный список коротких строк - читается
   сверху вниз, поэтому одна строка на запись и ничего лишнего. */
.lot-events {
    max-height: 420px;
    overflow-y: auto;
    margin-top: 10px;
}

.lot-event {
    padding: 4px 0;
    border-bottom: 1px solid var(--line, #262b36);
    font-size: 13px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Выключено не нами - то, из-за чего журнал и заводился. */
.lot-event-foreign {
    background: rgba(225, 29, 72, 0.1);
}

/* Партии закупки кастомного лота: список коротких строк в ячейке -
   товар покупается оптом и по разной цене. */
.custom-batches { font-size: 12px; line-height: 1.5; }
.custom-batch { white-space: nowrap; color: var(--muted, #8b95a7); }
.custom-batch-drop { margin-left: 4px; }
.custom-mine { white-space: nowrap; font-size: 12px; }

/* ---------- Телефон ---------- */
/*
   Панель рисовалась для монитора: колонка разделов на 250 точек слева,
   рядом таблицы на десяток столбцов. На телефоне это не помещалось
   никак - до сегодняшнего дня страница там даже не объявляла ширину
   экрана и показывалась уменьшенной втрое.
   Разделение по ширине 760 точек: это граница между планшетом в
   альбомной ориентации (там колонка ещё уместна) и всем, что уже.
*/
@media (max-width: 760px) {
    /* Колонка больше не стоит рядом с содержимым - она выезжает поверх
       него. Иначе на 390 точках ширины от самой страницы остаётся 140. */
    body { display: block; }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 60;
        width: min(82vw, 290px);
        height: 100dvh;
        transform: translateX(0);
        transition: transform 0.18s ease-out;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.55);
    }

    /* На широком экране свёрнутая колонка просто исчезает, здесь -
       уезжает за край: так видно, что она не пропала, а закрылась. */
    body.sidebar-hidden .sidebar {
        display: flex;
        transform: translateX(-100%);
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(0, 0, 0, 0.5);
    }

    body.sidebar-hidden .sidebar-backdrop { display: none; }

    /* Верхняя полоса остаётся на виду при прокрутке: на телефоне до
       кнопки "Обслуживание" иначе пришлось бы листать вверх всю таблицу. */
    .topbar {
        position: sticky;
        top: 0;
        z-index: 40;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }

    .topbar h1 { font-size: 18px; }
    .topbar-actions { flex-wrap: wrap; gap: 6px; }
    .topbar-user { display: none; }

    main { padding: 12px 12px 32px; }

    /* Палец - не курсор: по кнопке ниже 38 точек промахиваются. */
    .btn, .icon-btn, .tab-btn { min-height: 38px; }

    /* 16 точек - не прихоть вёрстки: при меньшем размере Safari на iOS
       приближает страницу, как только палец попадает в поле ввода, и
       обратно она сама не возвращается. */
    input, select, textarea { font-size: 16px; }

    /* Ряд служебных вкладок не переносим, а прокручиваем вбок: перенос
       на четыре строки съедает пол-экрана. */
    .service-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Таблицы и так прокручиваются вбок (.table-wrap), но шрифт монитора
       на телефоне даёт по три столбца на экран. */
    table { font-size: 12px; }
    th, td { padding: 7px 8px; }

    /* Ход идущей задачи полосой под шапкой на телефоне не показываем:
       лог отъедает треть экрана, а смотрят его редко. Никуда он не
       девается - вкладка "Задача" показывает и его, и историю, а о том,
       что работа идёт, говорит точка на кнопке "Обслуживание". */
    .job-panel { display: none; }

    /* Чат занимает весь экран под полосой - он здесь главный. */
    #chat-frame { height: calc(100dvh - 104px); }

    /* Плитки показателей в один столбец: по две они режут цифры. */
    #coverage-stats { gap: 8px; }
    #coverage-stats .stat { flex: 1 1 100%; }
}