/* Строгий слой поверх базовых стилей.
   🔴 Грузится ПОСЛЕДНИМ, после reports.css: иначе правила равной силы из него
   выигрывают, и часть правок молча не применяется (так зелёная плитка дохода
   осталась зелёной). Файл можно отключить целиком — вернётся прежний вид.
*/
/* ─────────────────────────────────────────────────────────────────────────
   Строгая раскладка: плотнее, прямее, по сетке — ближе к Keitaro/Binomo,
   чем к витринным проектам. Блок идёт последним и переопределяет то, что
   выше, поэтому его можно снять целиком и вернуться к прежнему виду.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --r:4px;            /* один радиус на всё: углы почти прямые */
  --r-panel:5px;
  --grid:24px;        /* шаг сетки, к которой прижаты блоки */
  --hair:#1618120f;   /* полупрозрачная линия внутри блоков */
  --hair-soft:#16181208;
}
/* Полупрозрачная сетка подложки: блоки лежат на ней, в зазорах она видна. */
body{background-color:var(--bg);background-image:none}
.content{padding:calc(var(--grid)) calc(var(--grid)*1.25) calc(var(--grid)*2)}
.page-head{margin-bottom:var(--grid);align-items:flex-end}
.page-head h1{font-size:var(--fs-xl);letter-spacing:-.02em;margin:2px 0 4px}

/* Поверхности: прямые углы, волосяная граница, без теней. */
.panel,.metrics article,dialog,.login-card{box-shadow:none}
.panel,.metrics article{border-radius:var(--r-panel)}
.panel{padding:calc(var(--grid)*.66)}
.table-panel{padding:0}   /* у таблиц отступа нет: иначе шапка не прилипает вплотную */
.metrics{gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;margin-bottom:var(--grid)}
.metrics article{border:0;border-radius:0;padding:13px 16px}
.metrics strong{font-size:var(--fs-2xl);margin:7px 0 3px;font-variant-numeric:tabular-nums}
.grid-main{gap:var(--grid)}

/* Таблицы — основная рабочая поверхность, поэтому плотность и выравнивание по сетке. */
th,td{padding:8px 12px}
th{font-size:var(--fs-xxs);background:#f5f5f5;border-bottom:1px solid var(--line)}
td{border-bottom:1px solid var(--hair)}
th+th,td+td{border-left:1px solid var(--hair)}          /* те самые вертикали сетки */
td.num,th.num{font-variant-numeric:tabular-nums}
tbody tr:hover{background:#f6f6f6}
table.list th.actions,table.list td.row-actions{border-left:1px solid var(--line)}

/* Органы управления: один радиус, без подпрыгивания на наведении. */
.btn{border-radius:var(--r);padding:7px 12px;font-weight:650;display:inline-flex;align-items:center;gap:7px;line-height:1.2}
.btn:hover{transform:none;background:#eeeeee}
.btn.primary:hover{background:#282828}
.btn.primary span{margin-left:0}
.btn.icon{padding:7px}
input,.input-prefix,select,textarea{border-radius:var(--r)}
dialog{border-radius:var(--r-panel)}
.nav-item,.brand-mark{border-radius:var(--r)}
.pill,.status,.user-chip,.copy{border-radius:3px}
.status{padding:3px 7px;font-size:var(--fs-xxs);text-transform:uppercase;letter-spacing:.04em}

/* Значки — Material Symbols Outlined (Google, Apache 2.0), вшиты в спрайт index.html.
   🔴 Это ЗАЛИВКА, а не штрих: при fill:none они просто не видны. Цвет наследуется
   от кнопки, поэтому значок живёт вместе с её состоянием. */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:16px;height:16px;flex:none;fill:currentColor;stroke:none}
.i{pointer-events:none}   /* клик должен попадать в кнопку, а не в значок */
/* В меню крупнее и приглушены; у текущего пункта и под курсором — в полный цвет. */
.nav-i{width:20px;height:20px;flex:none;fill:currentColor;stroke:none;opacity:.62;pointer-events:none;transition:opacity .15s}
.nav-item:hover .nav-i,.nav-item.active .nav-i{opacity:1}
.btn .i{width:14px;height:14px}
.list-tools .search>.i{position:absolute;left:11px;width:14px;height:14px;color:var(--muted)}
.list-tools .search input{padding-left:32px;border-radius:var(--r)}

/* Кнопка-значок в строке таблицы. */
.act{display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid transparent;border-radius:var(--r);background:transparent;color:var(--muted);cursor:pointer}
.act+.act{margin-left:2px}
.act:hover{background:#eaeaea;color:var(--ink);border-color:var(--line)}
.act[data-del-flow]:hover{background:#fbeceb;color:var(--danger);border-color:#e4c3c0}
td.row-actions{white-space:nowrap;text-align:right}

/* ── Палитра без зелёного ──────────────────────────────────────────────────
   Кислотный акцент и тёмно-зелёная плитка читались как «витрина». Строгий вид
   даёт нейтральная шкала: светлая метка на тёмном и почти чёрная плитка дохода.
   Цвета линий графика не трогаем — там оттенок несёт смысл (какой показатель). */
:root{
  --lime:#e3e3e3;   /* бывший кислотный: светлая нейтральная метка */
  --green:#1c1c1c;  /* бывший зелёный: почти чёрная плитка-акцент */
  --focus:#16181226; /* обводка фокуса вместо зелёного свечения */
}
.live-dot{background:#b6b6b6;box-shadow:0 0 0 4px #ffffff14}
.quality-ring{background:conic-gradient(var(--ink) calc(var(--value)*1%),#e0e0e0 0)}
input:focus,select:focus,textarea:focus{border-color:#989898;box-shadow:0 0 0 3px var(--focus)}
.metrics .accent .delta.up{color:#cccccc}
.sel-opt.on::after{color:var(--ink)}
.signal i{background:#393939;opacity:1}
/* Остатки кислотного и зелёного заданы литералами в reports.css/forms.css. */
table.compact td.name .share{background:linear-gradient(90deg,#9c9c9c,#cacaca)}
#ovMetrics article:not(.accent)::after{background:linear-gradient(#2b2b2b,#8b8b8b)}
table.compact td.money,td.money{color:var(--ink)}
table.list td.geo{letter-spacing:normal;white-space:normal;max-width:220px}
tr.row-edit:focus-visible{outline-color:#8c8c8c}
.test-result .ok{color:var(--ink)}

/* Переставляемый список настроек: подпись тянется, стрелки прижаты к правому краю. */
/* 🔴 В несколько колонок стрелки врут: «выше» уводит в предыдущую ячейку сетки,
   а не на строку вверх. Переставляемый список — всегда в одну колонку. */
.column-options.sortable{display:grid;grid-template-columns:1fr;gap:2px}
.column-options.sortable label{display:flex;align-items:center;gap:8px;padding:3px 4px;border-radius:var(--r)}
.column-options.sortable label:hover{background:#eeeeee}
.column-options.sortable label>span{flex:1;min-width:0}
.column-options.sortable .move{width:22px;height:22px;color:var(--muted)}
.column-options.sortable label:first-child .move[data-move="up"],
.column-options.sortable label:last-child .move[data-move="down"]{opacity:.3;pointer-events:none}

/* 🔴 Цвет плитки-акцента приходил из палитры показателей (`--accent`, у дохода
   зелёный). Крупную заливку делаем нейтральной: оттенок там ничего не кодирует,
   а вот у линий графика кодирует — их палитру не трогаем. */
.metrics article.accent{background:var(--green);border-color:var(--green)}

/* ── Знак и начертание ──────────────────────────────────────────────────────
   Взяты с макета посадочной: планета с кольцом и «Orbit TDS», где TDS светится.
   Это единственное место, где остался фирменный цвет — логотипу он положен,
   на панель он не распространяется. */
.logo-mark{width:26px;height:26px;flex:none}
.brand-large .logo-mark{width:34px;height:34px}
.wordmark{font-weight:700;text-transform:uppercase;letter-spacing:.045em;font-size:var(--fs-md)}
.brand-large .wordmark{font-size:var(--fs-lg)}
.wordmark i{font-style:normal;color:#7e9bff;margin-left:.34em}
.brand{gap:9px;padding-left:2px}
.login-planet{width:min(300px,46%);height:auto;align-self:flex-start;opacity:.95}

/* ── Акцент — цвет логотипа ────────────────────────────────────────────────
   Зелёный в списках читался как чужая тема: шар логотипа сине-фиолетовый,
   а названия кампаний и метка «активна» были зелёные. Берём цвет оттуда.

   🔴 Сам #4f6ef0 для текста слишком светлый (4.36:1 на белом), поэтому для
   надписей отдельный затемнённый тон: 6.50:1 — как у прежнего зелёного (6.34:1),
   то есть читаемость не ухудшилась.
   🔴 НЕ трогаем зелёный там, где он несёт смысл: рост показателя (.delta.up
   против красного .delta.down) и успех проверки (.test-result .ok против .bad).
   Там цвет — это значение, а не оформление. */
:root{
  --brand:#4f6ef0;       /* шар логотипа */
  --brand-ink:#3f51c9;   /* он же для текста */
  --brand-deep:#2f3f9e;  /* наведение */
  --brand-soft:#eef0fc;  /* подложка меток */
  --brand-line:#c3cbf2;  /* подчёркивание ссылок */
}
.link-cell{color:var(--brand-ink);text-decoration-color:var(--brand-line)}
.link-cell:hover{color:var(--brand-deep)}
.link,.list-tools .count.filtered{color:var(--brand-ink)}
.link:hover{color:var(--brand-deep)}
table.report tr.drill:hover td.name{color:var(--brand-ink)}
/* 🔴 Метку состояния в цвет бренда НЕ красим (пробовали — вернули): зелёный тут
   не оформление, а значение. Работает/на паузе читается мгновенно по цвету,
   как светофор, и не спорит с синими ссылками в той же строке. */

/* ── Плавность ─────────────────────────────────────────────────────────────
   Движения короткие и только по opacity/transform/цвету — раскладка не
   пересчитывается. Всё глушится системным «Меньше движения» (конец reports.css). */

/* Полоса загрузки — главный сигнал «идёт запрос». После перехода палитры в серое
   она стала серой на сером и почти пропала; возвращаем ей заметность цветом бренда. */
.load-bar{background:linear-gradient(90deg,var(--brand-deep),var(--brand),#8a5be6)}

/* Поля ввода раньше «щёлкали» рамкой на фокусе — теперь обводка наезжает. */
input,select,textarea{transition:border-color .15s,box-shadow .15s,background-color .15s}

/* Отклик на нажатие: кнопка слегка проседает под пальцем. Без этого клик по
   значку в таблице выглядит так, будто ничего не произошло. */
.copy,.btn.icon,.icon-button{transition:background-color .15s,transform .09s}
.copy:active,.btn.icon:active,.icon-button:active{transform:scale(.93)}

/* Остальное, что меняет цвет и делало это рывком. */
.status,.tag,.sel-opt,.ov-col,.column-picker summary,.alias-chip,.country-tag{
  transition:background-color .14s,color .14s,border-color .14s}

/* Прокрутка к якорю и к строке — без рывка. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .copy:active,.btn.icon:active,.icon-button:active{transform:none}
}

/* Сортировка списков: заголовок кликабелен, стрелка показывает направление. */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--ink)}
th.sortable:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
th.sorted{color:var(--ink)}
.sort-arrow{font-style:normal;display:inline-block;width:.85em;margin-left:3px;color:var(--brand-ink)}

/* Второй фактор */
.sec-2fa{display:grid;gap:14px;max-width:760px;margin-bottom:22px}
.sec-2fa h2{margin:0;font-size:var(--fs-lg,18px)}
.sec-2fa .state{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.sec-2fa .state.on{color:#23834b}
.sec-2fa .state.off{color:#b42318}
.sec-2fa .row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
/* 🔴 Подписи здесь — обычные блоки, не сетка: сетка-подпись внутри вертикального flex
   в Safari (WebKit) получала строки по 400+ px, и поле кода рисовалось огромным ниже
   таблицы входов. В Chrome этого не видно. */
.sec-2fa label{display:block;font-weight:700}
.sec-2fa label input{display:block;width:100%;margin-top:6px}
.sec-2fa .row label{min-width:220px}
.sec-2fa .side{display:grid;gap:12px;align-content:start;min-width:0}
.sec-2fa input.otp{max-width:220px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;letter-spacing:.18em}
.sec-2fa input.otp::placeholder{letter-spacing:.18em;color:#bdbdbd}
.sec-2fa .setup{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.sec-2fa .qr{background:#fff;border:1px solid var(--line,#e5e5e5);border-radius:10px;padding:8px;line-height:0}
.sec-2fa .qr svg{width:184px;height:184px}
.sec-2fa .secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;letter-spacing:.04em;word-break:break-all;user-select:all}
.sec-2fa .codes{display:grid;grid-template-columns:repeat(2,max-content);gap:6px 28px;margin:0;padding:12px 16px;list-style:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;background:var(--soft,#f6f6f6);border-radius:10px;user-select:all}
.sec-2fa .error{margin:0}
@media (max-width:640px){.sec-2fa .setup{grid-template-columns:1fr}.sec-2fa .qr{justify-self:start}}
#loginForm[hidden],#login2faForm[hidden]{display:none}

/* Корзина */
.modal-actions .trash-btn{margin-right:auto;color:var(--danger)}
.modal-actions .trash-btn:hover{background:#fbeceb;border-color:#e4c3c0}
.page-head .head-tools .btn{white-space:nowrap}
.trash-kind{display:inline-block;padding:3px 8px;border-radius:12px;background:var(--soft,#eaeaea);font-size:var(--fs-xs);font-weight:650;white-space:nowrap}
.act[data-trash-purge]:hover{background:#fbeceb;color:var(--danger);border-color:#e4c3c0}

/* Ширина столбцов (col-width.js). Позиционирование — с нулевой специфичностью:
   закреплённые шапки отчётов и кликов (position:sticky) должны остаться главнее. */
:where(#app th){position:relative}
.col-grip{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;z-index:2;touch-action:none}
.col-grip::after{content:"";position:absolute;top:22%;bottom:22%;right:3px;width:2px;border-radius:1px;background:transparent;transition:background .15s}
th:hover>.col-grip::after{background:var(--line)}
.col-grip:hover::after,body.col-resizing .col-grip:hover::after{background:var(--brand)}
body.col-resizing,body.col-resizing *{cursor:col-resize!important;user-select:none}
table.colw-fixed{table-layout:fixed}
table.colw-fixed th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.colw-fixed td{overflow:hidden;overflow-wrap:anywhere}
body.layout-wide .content{max-width:none}
#layoutDialog .modal-actions{flex-wrap:wrap}
/* На телефоне таблицы — карточки: ни ручек, ни кнопки ширины. */
@media (max-width:760px){.col-grip,#layoutOpen{display:none}}

/* Иконки вместо символов ☰ ↪ ⚠ ▶ ⧉: на iOS эти символы рисуются цветными эмодзи. */
.sidebar-close{display:none}
.sidebar-head{display:block}
header .icon-button{display:inline-grid;place-items:center;min-width:36px;min-height:36px}
header .icon-button .i{width:20px;height:20px}
.copy .i{width:14px;height:14px;vertical-align:-2px}
.geo-warn .i{width:13px;height:13px;vertical-align:-2px;fill:currentColor}
/* «Запомнить меня» — строкой: галочка, подпись, пояснение. Без сетки внутри flex (WebKit). */
.login-card label.remember{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;font-weight:600;cursor:pointer}
.login-card label.remember input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--ink)}
.login-card label.remember small{flex-basis:100%;padding-left:27px;font-weight:400}