/* ================================================================
   Offers — стиль "Higgsfield" (2026-10-06), как кампании и крео в
   AdKombain: Inter, каждая ячейка строки — отдельная графитовая карточка
   #1A1B1E (r18) с промежутками цвета фона, залитые фильтры/кнопки,
   серые подписи обычным регистром, залитые статус-пилюли с иконкой.
   Разметка/функции не меняются. Только offers.html (body.of-hf).
   Откат — убрать <link> на этот файл.
   ================================================================ */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter/inter-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter/inter-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
body.of-hf { --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
body.of-hf .sh-workspace { font-family: var(--sans); font-feature-settings: "cv11", "ss01"; }

/* ── шапка ─────────────────────────────────────────────────────── */
body.of-hf .offers-toolbar .btn { height: 34px; padding: 0 14px; border-radius: 12px; font-size: 12.5px; font-weight: 600; gap: 6px; }
body.of-hf .offers-toolbar .btn:not(.btn-primary) { background: #1A1B1E; border-color: transparent; }
body.of-hf .offers-toolbar .btn:not(.btn-primary):hover { background: #222327; }
body.of-hf .page-sub { color: #8B8C92; }

/* ── фильтры — залитые, без обводки ─────────────────────────────── */
body.of-hf .offers-filters-divider { background: rgba(255,255,255,.06); }
body.of-hf .offers-filters input,
body.of-hf .offers-filters select { background-color: #1A1B1E; border-color: transparent; border-radius: 12px; font-weight: 500; }
body.of-hf .offers-filters input:focus { box-shadow: 0 0 0 1px var(--accent-1); border-color: transparent; }
body.of-hf .offers-filters input.search-icon { border-color: transparent; }
body.of-hf .offers-filters .pill-field input { font-weight: 500; }
body.of-hf .offers-filters .filter-active { box-shadow: 0 0 0 1px var(--accent-1); border-color: transparent; }
body.of-hf .offers-filters .btn:not(.btn-primary),
body.of-hf button.filter-apply-btn { background: #1A1B1E; border-color: transparent; border-radius: 12px; font-weight: 500; }
body.of-hf .offers-filters .btn:not(.btn-primary):hover,
body.of-hf button.filter-apply-btn:hover { background: #222327; }
body.of-hf .search-select-menu { background: #1A1B1E; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; }

/* ── таблица: каждая ячейка — карточка ─────────────────────────── */
body.of-hf .data-table-wrap { background: transparent; border: none; box-shadow: none; border-radius: 0; }
body.of-hf table.offers-table { border-collapse: separate; border-spacing: 8px 8px; margin: -8px -8px 0; width: calc(100% + 16px); }
body.of-hf table.offers-table thead th { background: transparent; border: none; color: #8B8C92; font-size: 11.5px; font-weight: 500;
  text-transform: none; letter-spacing: 0; padding: 4px 16px 0; }
body.of-hf table.offers-table tbody tr { border: none; background: transparent; }
body.of-hf table.offers-table tbody tr:hover { background: transparent; }
body.of-hf table.offers-table tbody td { background: #1A1B1E; border-radius: 18px; padding: 14px 16px; transition: background .12s; }
body.of-hf table.offers-table tbody tr:hover td { background: #1E1F23; }
body.of-hf .offers-table .col-offer { padding-left: 16px; }

/* ── оффер ─────────────────────────────────────────────────────── */
body.of-hf .offer-banner-thumb { border-radius: 12px; background: #26272B; }
body.of-hf .offer-name { color: #F2F2F3; font-weight: 600; font-size: 13.5px; }
body.of-hf .offer-name:hover { color: #fff; text-decoration: underline; text-decoration-color: #6B6C72; }
body.of-hf .offer-meta { color: #8B8C92; font-size: 12px; }
body.of-hf .offer-info-seal:hover { background: #F2F2F3; color: #F2F2F3; }
body.of-hf .order-php-icon-btn { border-radius: 8px; }
body.of-hf .order-php-icon-btn.ready:hover { color: #F2F2F3; background: #26272B; }

/* ── подписи/значения (шкала как в кампаниях: 11.5/500 серый · 12.5) ── */
body.of-hf .commercial-label,
body.of-hf .perf-label,
body.of-hf .cap-day-label { color: #8B8C92; font-size: 11.5px; font-weight: 500; }
body.of-hf .commercial-value,
body.of-hf .perf-value,
body.of-hf .cap-day-line .cap-day-value { color: #F2F2F3; font-size: 12.5px; font-weight: 500; }
body.of-hf .cap-day-line { color: #8B8C92; }
body.of-hf .cap-number { color: #F2F2F3; font-size: 13.5px; font-weight: 600; }
body.of-hf .cap-day-pct { color: #A3A4AA; }
body.of-hf .cap-bar { background: #26272B; height: 4px; border-radius: 3px; }
body.of-hf .perf-tag { background: #26272B; border: none; border-radius: 6px; color: #D8D8D8; font-size: 10.5px; font-weight: 600;
  text-transform: none; letter-spacing: 0; padding: 1px 7px; }
body.of-hf .perf-empty, body.of-hf .buyers-empty { color: #6B6C72; }
body.of-hf .buyer-code-row { color: #6B6C72; }
body.of-hf .buyer-code { color: #F2F2F3; font-size: 11.5px; font-weight: 600; }
body.of-hf .match-check-btn { background: #26272B; border: none; border-radius: 10px; color: #D8D8D8; font-weight: 500; }
body.of-hf .match-check-btn:hover { background: #2F3034; color: #F2F2F3; }

/* ── статус — залитая пилюля с иконкой, обычным регистром ──────── */
body.of-hf .status-badge { height: 22px; padding: 0 8px 0 6px; gap: 5px; border-radius: 7px; font-size: 12px; font-weight: 600;
  text-transform: none; letter-spacing: 0; }
body.of-hf .status-badge.editable { padding-right: 22px; }
body.of-hf .status-badge.active { background: #3A9D4A; color: #fff; }
body.of-hf .status-badge.waiting { background: #E0B43A; color: #1a1a1a; }
body.of-hf .status-badge.draft { background: #3B82F6; color: #fff; }
body.of-hf .status-badge.no_traffic_7d,
body.of-hf .status-badge.qc_block,
body.of-hf .status-badge.stopped { background: #D63C41; color: #fff; }
body.of-hf .status-badge.pause,
body.of-hf .status-badge.archived { background: #26272B; color: #A3A4AA; padding-left: 8px; }
body.of-hf .status-badge.active::before, body.of-hf .status-badge.waiting::before, body.of-hf .status-badge.draft::before,
body.of-hf .status-badge.no_traffic_7d::before, body.of-hf .status-badge.qc_block::before, body.of-hf .status-badge.stopped::before {
  content: ''; width: 12px; height: 12px; flex: 0 0 12px; background: center / 12px no-repeat; }
body.of-hf .status-badge.active::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23fff'/%3E%3Cpath d='M3.4 6.2l1.7 1.7 3.5-3.6' fill='none' stroke='%233a9d4a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body.of-hf .status-badge.no_traffic_7d::before, body.of-hf .status-badge.qc_block::before, body.of-hf .status-badge.stopped::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23fff'/%3E%3Cpath d='M6 3.2v3.4' stroke='%23d63c41' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='8.6' r='.9' fill='%23d63c41'/%3E%3C/svg%3E"); }
body.of-hf .status-badge.waiting::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%231a1a1a'/%3E%3Cpath d='M6 3.3V6l1.8 1.1' fill='none' stroke='%23e0b43a' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.of-hf .status-badge.draft::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23fff'/%3E%3Cpath d='M3.6 8.4l.4-1.6 3.6-3.6 1.2 1.2-3.6 3.6z' fill='%233b82f6'/%3E%3C/svg%3E"); }

/* ── действия / пагинация / пусто ──────────────────────────────── */
body.of-hf .iconbtn.kebab-btn:hover { background: #26272B; }
body.of-hf .pagination-info { color: #8B8C92; }
body.of-hf .sh-workspace > .btn-sm, body.of-hf [class*="pagination"] .btn { background: #1A1B1E; border: none; border-radius: 10px; color: #A3A4AA; }
body.of-hf [class*="pagination"] .btn:hover { background: #26272B; color: #F2F2F3; }
body.of-hf .offers-empty { background: #1A1B1E; border-radius: 18px; color: #8B8C92; }

/* ================================================================
   3 карточки в строке (2026-10-06): Оффер+Commercial · ROI→Cap→Leads ·
   Статус+⋮. Колонка покупателей временно скрыта.
   ================================================================ */
body.of-hf .offers-table .col-main { width: 44%; }
body.of-hf .offers-table .col-performance { width: 44%; }
body.of-hf .offers-table .col-status { width: 12%; min-width: 150px; }
body.of-hf .main-card { display: flex; gap: 22px; align-items: flex-start; }
body.of-hf .main-left { flex: 1.25 1 0; min-width: 0; }
body.of-hf .main-right { flex: 1 1 0; min-width: 0; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.05); }

body.of-hf .perf-card { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 0; }
body.of-hf .perf-sec { min-width: 0; padding: 0 18px; border-left: 1px solid rgba(255,255,255,.05); display: flex; flex-direction: column; gap: 5px; }
body.of-hf .perf-sec:first-child { padding-left: 0; border-left: none; }
body.of-hf .perf-sec-title { color: #6B6C72; font-size: 11px; font-weight: 500; margin-bottom: 3px; }
body.of-hf .perf-sec-cap .cap-number { margin-bottom: 2px; }
body.of-hf .perf-sec-cap .cap-day-line, body.of-hf .perf-sec-cap .cap-bar { width: 100%; }

body.of-hf .status-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 100%; }
body.of-hf .offers-table .col-status { vertical-align: middle; }

/* TOP — золотая плашка с короной */
body.of-hf .perf-tag.top { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px 0 6px; border-radius: 6px;
  background: #C9A227; color: #1a1a1a; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; }
body.of-hf .perf-tag.top svg { flex: 0 0 auto; margin-top: -1px; }

/* ── 2026-10-06, правки: без подписей, капа отдельной карточкой ─── */
body.of-hf table.offers-table thead { display: none; }
body.of-hf .offers-table .col-main { width: 42%; }
body.of-hf .offers-table .col-performance { width: 30%; }
body.of-hf .offers-table .col-cap { width: 16%; min-width: 170px; }
body.of-hf .offers-table .col-status { width: 12%; min-width: 150px; }
body.of-hf .perf-card { grid-template-columns: 1fr 1fr; }
body.of-hf .col-cap .cap-day-line, body.of-hf .col-cap .cap-bar { width: 100%; }

/* Ленды — иконка рядом с названием */
body.of-hf .offer-title-row { align-items: center; gap: 6px; }
body.of-hf .offer-landers-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 8px; color: #A3A4AA; text-decoration: none; }
body.of-hf .offer-landers-icon:hover { background: #26272B; color: #F2F2F3; }
body.of-hf .offer-landers-icon:focus-visible { outline: 1px solid var(--accent-1); outline-offset: 1px; }

/* TOP — синяя плашка, белый текст и корона */
body.of-hf .perf-tag.top { background: #3B82F6; color: #fff; }

/* TOP — фиолетовая (2026-10-06), тот же оттенок, что «changed» в AdKombain */
body.of-hf .perf-tag.top { background: #8B5CF6; color: #fff; }

/* ── 2026-10-06: партнёр + order.php под названием, капа второй карточкой ── */
body.of-hf .offer-partner { display: flex; align-items: center; gap: 6px; margin-top: 6px; min-width: 0; }
body.of-hf .offer-partner-name { color: #C7C7C7; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.of-hf .offer-partner .order-php-icon-btn { width: 24px; height: 24px; flex: 0 0 24px; }

/* форм-фактор, определённый автоматически, — приглушённо (2026-10-06) */
body.of-hf .ff-auto { color: #8B8C92; }

/* ── 2026-10-06: загрузка статистики, клики-фильтры языка/формы ─── */
body.of-hf .of-loading { display: inline-flex; align-items: center; gap: 8px; color: #8B8C92; font-size: 12px; }
body.of-hf .of-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #3A3B40; border-top-color: #A3A4AA; animation: of-spin .8s linear infinite; }
@keyframes of-spin { to { transform: rotate(360deg); } }
body.of-hf .cap-loading { margin-top: 8px; }
body.of-hf .of-filter-link { all: unset; cursor: pointer; color: inherit; border-radius: 4px; }
body.of-hf .of-filter-link:hover { color: #fff; text-decoration: underline; text-decoration-color: #6B6C72; text-underline-offset: 2px; }
body.of-hf .of-filter-link.ff-auto { color: #8B8C92; }
body.of-hf .of-filter-link:focus-visible { outline: 1px solid var(--accent-1); outline-offset: 1px; }
body.of-hf .of-sep { color: #6B6C72; margin-right: 4px; }

/* ── 2026-10-06: капа Reserved/Available, My traffic ───────────── */
body.of-hf .cap-split { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.05); }
body.of-hf .cap-split .cap-day-line { margin-top: 4px; }
body.of-hf .cap-available { color: #4ADE80; }
body.of-hf .perf-card { grid-template-columns: 1fr 1fr 1.1fr; }
body.of-hf .perf-label { min-width: 44px; white-space: nowrap; }
body.of-hf .offers-table .col-performance { width: 36%; }
body.of-hf .offers-table .col-main { width: 38%; }

/* ── карточка статуса: доступ к офферу (2026-10-06) ─────────────── */
body.of-hf .offers-table .col-status { vertical-align: top; }
body.of-hf .status-actions { height: auto; }
body.of-hf .access-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
body.of-hf .acc-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: none; border-radius: 9px;
  background: #26272B; color: #D8D8D8; font: 600 12px var(--sans); cursor: pointer; white-space: nowrap; }
body.of-hf .acc-btn:hover:not(:disabled) { background: #2F3034; color: #F2F2F3; }
body.of-hf .acc-btn.primary { background: #F2F2F3; color: #111; }
body.of-hf .acc-btn.primary:hover:not(:disabled) { background: #fff; }
body.of-hf .acc-btn:disabled { opacity: .4; cursor: not-allowed; }
body.of-hf .acc-x { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none;
  border-radius: 9px; background: #26272B; color: #A3A4AA; cursor: pointer; }
body.of-hf .acc-x:hover:not(:disabled) { background: rgba(214,60,65,.18); color: #F87171; }
body.of-hf .access-open { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 6px; border-radius: 7px;
  background: #3A9D4A; color: #fff; font-size: 12px; font-weight: 600; }
body.of-hf .access-open::before { content: ''; width: 12px; height: 12px; background: center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23fff'/%3E%3Cpath d='M3.4 6.2l1.7 1.7 3.5-3.6' fill='none' stroke='%233a9d4a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* без разделителя над Reserved (2026-10-06) */
body.of-hf .cap-split { border-top: none; padding-top: 0; margin-top: 2px; }

/* ── раскрывашка: статистика по баерам (2026-10-06) ─────────────── */
body.of-hf table.offers-table tbody tr.ob-row td { background: transparent; padding: 0 0 4px; }
body.of-hf table.offers-table tbody tr.ob-row:hover td { background: transparent; }
body.of-hf tr.ob-open td { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
body.of-hf .ob-wrap { background: #1A1B1E; border-radius: 18px; padding: 10px 16px 12px; margin-top: -2px; }
body.of-hf .ob-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
body.of-hf .ob-table th { text-align: left; color: #8B8C92; font-weight: 500; font-size: 11.5px; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.06); white-space: nowrap; }
body.of-hf .ob-table td { padding: 8px 10px; color: #F2F2F3; border-bottom: 1px solid rgba(255,255,255,.04); white-space: nowrap; }
body.of-hf .ob-table tr:last-child td { border-bottom: none; }
body.of-hf .ob-buyer { font-weight: 600; }
body.of-hf .ob-nick { color: #8B8C92; font-weight: 500; }
body.of-hf .ob-table .pos { color: #4ADE80; }
body.of-hf .ob-table .mid { color: #E0B43A; }
body.of-hf .ob-table .neg { color: #F87171; }
body.of-hf .ob-empty, body.of-hf .ob-loading { color: #8B8C92; font-size: 12.5px; padding: 6px 2px; }

/* ── 2026-10-06: раскрывашка по центру, подписи, итог, правка капы ── */
body.of-hf table.offers-table > thead { display: none; }
body.of-hf table.offers-table .ob-table thead { display: table-header-group; }
body.of-hf .ob-wrap { width: fit-content; max-width: 100%; margin: -2px auto 0; overflow-x: auto; }
body.of-hf .ob-table { width: auto; }
body.of-hf .ob-table th, body.of-hf .ob-table td { text-align: center; padding: 7px 14px; }
body.of-hf .ob-table th:first-child, body.of-hf .ob-table td:first-child { text-align: left; }
body.of-hf .ob-table tr.ob-total td { border-top: 1px solid rgba(255,255,255,.10); font-weight: 600; color: #F2F2F3; }
body.of-hf .ob-cap-ed { display: inline-flex; align-items: center; gap: 4px; }
body.of-hf .ob-cap-in { width: 56px; height: 26px; padding: 0 6px; border: none; border-radius: 8px; background: #26272B; color: #F2F2F3;
  font: 500 12.5px var(--sans); text-align: center; }
body.of-hf .ob-cap-in:focus { outline: none; box-shadow: 0 0 0 1px var(--accent-1); }
body.of-hf .ob-cap-in::-webkit-outer-spin-button, body.of-hf .ob-cap-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.of-hf .ob-cap-save { width: 26px; height: 26px; border: none; border-radius: 8px; background: #3A9D4A; color: #fff; font-weight: 700; cursor: pointer; }
body.of-hf .ob-cap-save:disabled { background: #26272B; color: #6B6C72; cursor: default; }
body.of-hf .ob-capnote { margin-top: 8px; font-size: 12px; color: #8B8C92; text-align: center; }
body.of-hf .ob-capnote b { color: #F2F2F3; font-weight: 600; }
/* отступ между Today и Reserved в карточке капы */
body.of-hf .cap-split { margin-top: 12px; }

/* ================================================================
   Раскрывашка по баерам v2 (2026-10-06): строки — чёрные плитки, как
   строки адсетов; заголовки белые; ровные отступы; полоска капы.
   ================================================================ */
body.of-hf .ob-wrap { padding: 14px 16px 10px; }
body.of-hf .ob-table { border-collapse: separate; border-spacing: 0 6px; margin: -6px 0; }
body.of-hf .ob-table th { color: #F2F2F3; font-size: 12px; font-weight: 600; padding: 4px 18px 6px; border: none; text-align: center; }
body.of-hf .ob-table td { background: var(--bg); color: #F2F2F3; padding: 11px 18px; border: none; text-align: center; vertical-align: middle; }
body.of-hf .ob-table td:first-child { border-radius: 12px 0 0 12px; text-align: left; }
body.of-hf .ob-table td:last-child { border-radius: 0 12px 12px 0; }
body.of-hf .ob-table th:first-child { text-align: left; }
body.of-hf .ob-table tr.ob-total td { background: transparent; border-top: 1px solid rgba(255,255,255,.08); font-weight: 600; padding-top: 12px; }
body.of-hf .ob-table tr.ob-total td:first-child, body.of-hf .ob-table tr.ob-total td:last-child { border-radius: 0; }
body.of-hf .ob-buyer { font-weight: 600; }
body.of-hf .ob-cap { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; min-width: 70px; border-radius: 8px; padding: 2px 6px; }
body.of-hf .ob-cap-edit { cursor: pointer; }
body.of-hf .ob-cap-edit:hover { background: #1E1F23; }
body.of-hf .ob-cap-num { font-variant-numeric: tabular-nums; }
body.of-hf .ob-capbar { width: 64px; height: 4px; border-radius: 3px; background: #26272B; overflow: hidden; }
body.of-hf .ob-capbar i { display: block; height: 100%; background: #3A9D4A; border-radius: 3px; }
body.of-hf .ob-capnote { display: none; }
body.of-hf .cap-modal-err { color: #F87171; font-size: 12px; margin-top: 6px; min-height: 14px; }

/* ================================================================
   Таблица по баерам v3 (2026-10-06, ТЗ «классическая таблица»):
   один контейнер, header + строки с тонкими разделителями + Total,
   числа справа (tabular-nums), цвет — только ROI/Profit по знаку.
   ================================================================ */
body.of-hf .ob-wrap { background: #161616; border: 1px solid #262626; border-radius: 12px; overflow: hidden; padding: 0; margin: -2px auto 0; }
body.of-hf .ob-table { border-collapse: collapse; border-spacing: 0; margin: 0; width: auto; font-size: 13px; font-variant-numeric: tabular-nums; }
body.of-hf .ob-table th { height: 42px; padding: 0 18px; color: #8A8A8A; font-size: 12px; font-weight: 500; text-align: left;
  border: none; border-bottom: 1px solid #262626; white-space: nowrap; background: transparent; }
body.of-hf .ob-table td { height: 46px; padding: 0 18px; background: transparent; color: #EDEDED; font-weight: 500; text-align: left;
  border: none; border-bottom: 1px solid #222222; border-radius: 0 !important; white-space: nowrap; vertical-align: middle; }
body.of-hf .ob-table .ob-num { text-align: right; }
body.of-hf .ob-table tbody tr:last-child td { border-bottom: none; }
body.of-hf .ob-table td.ob-buyer { color: #EDEDED; font-weight: 600; }
body.of-hf .ob-table td.ob-strong { font-weight: 600; }
body.of-hf .ob-table .pos { color: #4ADE80; }
body.of-hf .ob-table .neg { color: #F87171; }
body.of-hf .ob-table .na { color: #8A8A8A; }
body.of-hf .ob-table tr.ob-total td { background: #191919; border-top: 1px solid #333333; font-weight: 600; padding-top: 0; }
/* Cap today — число, тонкая вторичная полоска под ним, без «таблеток» */
body.of-hf .ob-cap { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; padding: 0; border-radius: 0; }
body.of-hf .ob-cap-edit:hover { background: transparent; }
body.of-hf .ob-cap-edit:hover .ob-cap-num { text-decoration: underline dotted #6B6C72; text-underline-offset: 3px; }
body.of-hf .ob-capbar { width: 40px; height: 2px; background: #2A2A2A; border-radius: 1px; }
body.of-hf .ob-capbar i { border-radius: 1px; }

/* ================================================================
   Buyer statistics — сетка в стиле секции Adsets (2026-10-06, ТЗ):
   тёмно-серая секция, спокойные заголовки, чёрные скруглённые строки
   с промежутком 6px, без классической сетки и линий между строками.
   ================================================================ */
body.of-hf .ob-wrap { width: auto; max-width: none; margin: -2px 0 0; background: #1A1A1C; border: none; border-radius: 16px; padding: 12px; overflow-x: auto; }
body.of-hf .obg { display: flex; flex-direction: column; gap: 6px; min-width: 640px; font-variant-numeric: tabular-nums; }
body.of-hf .obg-r { display: grid; grid-template-columns: minmax(70px, 1.2fr) 55px 70px 70px 65px 90px 90px 70px 70px;
  align-items: center; column-gap: 10px; padding: 0 14px; }
body.of-hf .obg-head { height: 36px; color: #8A8A8A; font-size: 12px; font-weight: 500; }
body.of-hf .obg-row, body.of-hf .obg-total { min-height: 48px; background: var(--bg, #0D0D0E); border-radius: 11px; color: #EDEDED; font-size: 13px; font-weight: 500; }
body.of-hf .obg-total { background: #121214; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); font-weight: 600; }
body.of-hf .obg-n { text-align: right; }
body.of-hf .obg-buyer { color: #EDEDED; font-weight: 600; }
body.of-hf .obg-strong { font-weight: 600; }
body.of-hf .obg .pos { color: #4ADE80; }
body.of-hf .obg .neg { color: #F87171; }
body.of-hf .obg .na { color: #5A5A5A; }
body.of-hf .obg .ob-cap { align-items: flex-end; }

/* ── компактнее: секция по ширине содержимого, Buyer фиксированный ── */
body.of-hf .ob-wrap { width: max-content; max-width: 100%; margin: -2px 0 0; }
body.of-hf .obg { min-width: 0; }
body.of-hf .obg-r { grid-template-columns: 90px 78px 50px 52px 58px 86px 86px 58px 62px; column-gap: 12px; }
/* полоска вылитой капы под числом */
body.of-hf .obg .ob-cap { align-items: stretch; gap: 5px; width: 100%; }
body.of-hf .obg .ob-cap-num { text-align: right; }
body.of-hf .ob-cap-of { color: #8A8A8A; font-weight: 500; }
body.of-hf .obg .ob-capbar { width: 100%; height: 4px; border-radius: 2px; background: #2A2A2D; overflow: hidden; }
body.of-hf .obg .ob-capbar i { display: block; height: 100%; background: #3A9D4A; border-radius: 2px; }
body.of-hf .obg .ob-capbar.empty { background: #1F1F22; }

/* секция по баерам — фон как у карточек оффера, по центру (2026-10-06) */
body.of-hf .ob-wrap { background: #1A1B1E; margin: -2px auto 0; }
body.of-hf table.offers-table tbody tr:hover + tr.ob-row .ob-wrap { background: #1A1B1E; }

/* Cap в таблице баеров — как в карточке капы: «14 / 20 (70%)» + длинная полоска (2026-10-06) */
body.of-hf .obg-r { grid-template-columns: 90px 150px 50px 52px 58px 86px 86px 58px 62px; }
body.of-hf .obg .ob-cap-num { white-space: nowrap; }
body.of-hf .obg .cap-day-pct { color: #A3A4AA; font-weight: 500; }
body.of-hf .obg .cap-day-pct.over { color: #F87171; }
body.of-hf .obg .ob-capbar { height: 4px; }

/* окно брони капы (2026-10-06) */
.rsv-modal .rsv-sub { color: #A3A4AA; font-size: 13px; margin-bottom: 12px; }
.rsv-modal .rsv-note { color: #8B8C92; font-size: 12.5px; }
.rsv-modal .rsv-note b { color: #F2F2F3; font-weight: 600; }

/* ================================================================
   Окна в нашем стиле (2026-10-06): графит, Inter, залитые поля/кнопки.
   ================================================================ */
.of-modal-backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.of-modal { background: #1A1B1E; border: 1px solid rgba(255,255,255,.06); border-radius: 18px; padding: 22px 22px 18px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.of-modal h2 { font-size: 16px; font-weight: 600; color: #F2F2F3; margin: 0 0 6px; }
.of-modal .of-modal-text { color: #A3A4AA; font-size: 13px; line-height: 1.45; margin-bottom: 12px; }
.of-modal .rsv-note { color: #8B8C92; font-size: 12.5px; margin-bottom: 4px; }
.of-modal .rsv-note b { color: #F2F2F3; font-weight: 600; }
.of-modal .of-field { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.of-modal .of-field span { color: #8B8C92; font-size: 12px; font-weight: 500; }
.of-modal .of-field input { height: 38px; padding: 0 12px; border: none; border-radius: 10px; background: #26272B; color: #F2F2F3;
  font: 500 14px "Inter", sans-serif; outline: none; }
.of-modal .of-field input:focus { box-shadow: 0 0 0 1px var(--accent-1); }
.of-modal .of-modal-err { color: #F87171; font-size: 12px; min-height: 16px; margin-top: 6px; }
.of-modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.of-btn { height: 34px; padding: 0 14px; border: none; border-radius: 10px; background: #26272B; color: #D8D8D8;
  font: 600 12.5px "Inter", sans-serif; cursor: pointer; }
.of-btn:hover:not(:disabled) { background: #2F3034; color: #F2F2F3; }
.of-btn.primary { background: #F2F2F3; color: #111; }
.of-btn.primary:hover:not(:disabled) { background: #fff; }
.of-btn.danger { background: #D63C41; color: #fff; }
.of-btn.danger:hover:not(:disabled) { background: #E24A4F; }
.of-btn:disabled { opacity: .5; cursor: default; }

/* My traffic скрыт — 2 колонки */
body.of-hf .perf-card.no-my { grid-template-columns: 1fr 1fr; }
/* Reserve — выразительная */
body.of-hf .acc-btn.reserve { background: #3B82F6; color: #fff; }
body.of-hf .acc-btn.reserve:hover:not(:disabled) { background: #4C8DF7; color: #fff; }

/* 2026-10-06: третья карточка всегда 3 колонки (пустая My traffic не сдвигает раскладку);
   Reserve и Get access — одинаковые выразительные серые, × помещается рядом */
body.of-hf .perf-card.no-my { grid-template-columns: 1fr 1fr 1.1fr; }
body.of-hf .acc-btn.reserve,
body.of-hf .acc-btn.primary { background: #3A3B40; color: #F2F2F3; font-weight: 600; padding: 0 10px; gap: 5px; }
body.of-hf .acc-btn.reserve:hover:not(:disabled),
body.of-hf .acc-btn.primary:hover:not(:disabled) { background: #46474D; color: #fff; }
body.of-hf .access-row { flex-wrap: nowrap; }
body.of-hf .offers-table .col-status { min-width: 170px; }


/* ── Комментарии по офферу (2026-10-08) ──────────────────────────────────── */
/* кнопка-чат в status-actions, как kebab, с бейджем количества */
body.of-hf .iconbtn.comments-btn { position: relative; color: #A3A4AA; }
body.of-hf .iconbtn.comments-btn:hover { background: #26272B; color: #F2F2F3; }
body.of-hf .iconbtn.comments-btn.has { color: #D8D8D8; }
body.of-hf .comments-btn .comments-count {
  position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center; border-radius: 8px;
  background: #3B82F6; color: #fff; font: 700 9.5px "Inter", sans-serif; box-sizing: border-box; }

/* окно комментариев */
.of-modal.cmt-modal { padding-bottom: 16px; }
.of-modal.cmt-modal h2 .cmt-offer { color: #A3A4AA; font-weight: 500; }
.of-modal .cmt-list { max-height: 44vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  margin: 4px 0 12px; padding-right: 4px; }
.of-modal .cmt-empty { color: #8B8C92; font-size: 13px; text-align: center; padding: 18px 0; }
.of-modal .cmt-item { background: #26272B; border-radius: 12px; padding: 9px 12px; }
.of-modal .cmt-item.overflow { background: #2A211C; box-shadow: inset 0 0 0 1px rgba(214,60,65,.35); }
.of-modal .cmt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.of-modal .cmt-src { font: 700 10px "Inter", sans-serif; text-transform: uppercase; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 6px; color: #fff; }
.of-modal .cmt-src.src-partner { background: #7C5CFF; }
.of-modal .cmt-src.src-bizdev { background: #3B82F6; }
.of-modal .cmt-src.src-hub { background: #D63C41; }
.of-modal .cmt-src.src-telegram { background: #229ED9; }
.of-modal .cmt-author { color: #D8D8D8; font-size: 12px; font-weight: 600; }
.of-modal .cmt-when { color: #6B6C72; font-size: 11px; margin-left: auto; }
.of-modal .cmt-body { color: #EDEDED; font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }

.of-modal .cmt-composer { border-top: 1px solid rgba(255,255,255,.06); padding-top: 12px; }
.of-modal .cmt-src-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.of-modal .cmt-src-label { color: #8B8C92; font-size: 12px; font-weight: 500; }
.of-modal .cmt-src-opt { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.of-modal .cmt-src-opt input { accent-color: #3B82F6; margin: 0; }
.of-modal .cmt-src-opt span { color: #D8D8D8; font-size: 12.5px; }
.of-modal .cmt-text { width: 100%; box-sizing: border-box; resize: vertical; min-height: 60px;
  padding: 9px 11px; border: none; border-radius: 10px; background: #26272B; color: #F2F2F3;
  font: 500 13px "Inter", sans-serif; outline: none; }
.of-modal .cmt-text:focus { box-shadow: 0 0 0 1px var(--accent-1); }
.of-modal .cmt-hint { color: #6B6C72; font-size: 11.5px; margin-top: 6px; }

/* адресат коммента (2026-10-08) */
.of-modal .cmt-to { color: #8B8C92; font-size: 11px; font-weight: 600; }
.of-modal .cmt-to-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.of-modal .cmt-target { flex: 1; height: 32px; padding: 0 10px; border: none; border-radius: 10px;
  background: #26272B; color: #F2F2F3; font: 500 12.5px "Inter", sans-serif; outline: none; cursor: pointer; }
.of-modal .cmt-target:focus { box-shadow: 0 0 0 1px var(--accent-1); }

/* Тумблер автостопа по переливу капы (2026-10-11): выкл — серый, вкл — синяя подложка */
body.of-hf .iconbtn.autostop-btn { color: #6F6F6F; }
body.of-hf .iconbtn.autostop-btn:hover { background: #26272B; color: #F2F2F3; }
body.of-hf .iconbtn.autostop-btn.on { background: rgba(59,130,246,.18); color: #60A5FA; }
body.of-hf .iconbtn.autostop-btn.on:hover { background: rgba(59,130,246,.28); }

/* Автостоп + комментарии — строкой под Get access / Reserve (2026-10-11) */
body.of-hf .tools-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }

/* Кнопка «Ленды» под картинкой оффера (2026-10-11), вместо иконки у названия */
body.of-hf .offer-thumb-col { display: flex; flex-direction: column; align-items: stretch; gap: 12px; flex-shrink: 0; width: 58px; }
body.of-hf .offer-landers-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 22px; border-radius: 7px;
  margin: 0; padding: 0; background: #26272B; color: #A3A4AA; font-size: 11px; font-weight: 500; text-decoration: none; white-space: nowrap; }
body.of-hf .offer-landers-btn:hover { background: #2F3034; color: #F2F2F3; }
body.of-hf .offer-landers-btn:focus-visible { outline: 1px solid var(--accent-1); outline-offset: 1px; }

/* Ширины карточек (2026-10-11): оффер уже, ROI/лиды шире */
body.of-hf .offers-table .col-main { width: 32%; }
body.of-hf .offers-table .col-performance { width: 42%; }

/* Узкие экраны (2026-10-11): название и строка #id · гео · категория переносятся, а не режутся/вылезают */
body.of-hf .offer-block, body.of-hf .offer-main { min-width: 0; }
body.of-hf .offer-title-row { min-width: 0; }
body.of-hf .offer-name { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: normal; }
body.of-hf .offer-meta { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.35; }