/* Обзор и отчёты. Цвета — из общей темы (styles.css): --ink, --muted, --line, --lime, --green. */
.head-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.period{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.period-presets,.segmented{display:inline-flex;background:#e6e6e6;border-radius:11px;padding:3px;gap:2px;flex-wrap:wrap}
.period-presets button,.segmented button{border:0;background:transparent;border-radius:8px;padding:7px 12px;font:inherit;font-size:var(--fs-md);font-weight:650;color:#4c4c4c;cursor:pointer;white-space:nowrap}
.period-presets button:hover,.segmented button:hover{color:var(--ink)}
.period-presets button.active,.segmented button.active{background:var(--card);color:var(--ink);box-shadow:0 1px 2px #0000001f}
.period-custom{display:flex;align-items:center;gap:6px}.period-custom input{width:auto;padding:7px 9px}
.period-custom[hidden]{display:none}
.page-head .head-tools .btn{padding:8px 13px}
#ovMetrics article small{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.delta{font-weight:750;font-size:var(--fs-xs);color:var(--muted)}
.delta.up{color:#2f7a45}.delta.down{color:var(--danger)}
.metrics .accent .delta.up{color:var(--lime)}.metrics .accent .delta.down{color:#ffb4a8}
.chart-panel{margin-bottom:13px;padding-bottom:16px}
.chart-panel .panel-head{gap:16px;align-items:flex-start;flex-wrap:wrap}
.segmented.small button{padding:6px 11px;font-size:var(--fs-sm)}
.ov-chart{position:relative;height:280px;margin-top:18px}
.ov-plot{position:absolute;inset:0 0 0 58px}
.ov-grid-line{position:absolute;left:0;right:0;border-top:1px dashed #e2e2e2;height:0}
.ov-grid-line.base{border-top:1px solid var(--line)}
.ov-grid-line span{position:absolute;right:calc(100% + 10px);top:-8px;font-size:var(--fs-xxs);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.ov-bars{position:absolute;inset:0 0 -24px 0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;padding-bottom:24px}
.ov-col{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;outline:none;cursor:default;border-radius:6px}
.ov-col:hover,.ov-col:focus-visible{background:#f0f0f0}
.ov-stack{width:min(34px,80%);display:flex;flex-direction:column-reverse;border-radius:6px 6px 2px 2px;overflow:hidden;min-height:0;transition:height .25s ease}
.ov-stack b{display:block;min-height:2px;transition:filter .15s}
.ov-stack b+b{box-shadow:0 1px 0 #ffffffb3}
.ov-col:hover .ov-stack b{filter:saturate(1.15) brightness(1.03)}
.ov-col small{position:absolute;bottom:-22px;font-size:var(--fs-xxs);color:var(--muted);white-space:nowrap}
.ov-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:var(--fs-sm)}
.ov-tip{position:absolute;top:4px;min-width:200px;background:var(--ink);color:#fff;border-radius:11px;padding:10px 12px;font-size:var(--fs-sm);line-height:1.45;pointer-events:none;z-index:5;box-shadow:0 12px 30px #0004}
.ov-tip[hidden]{display:none}
.ov-tip .tip-head{display:flex;justify-content:space-between;gap:16px;color:#c6c6c6;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid #ffffff1f}
.ov-tip .tip-head b{color:#fff}
.ov-tip .tip-row{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center}
.ov-tip .tip-row i{width:9px;height:9px;border-radius:3px}
.ov-tip .tip-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.ov-tip .tip-row b{font-variant-numeric:tabular-nums}
.ov-legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:38px}
.legend-item{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#f9f9f9;border-radius:20px;padding:5px 11px 5px 9px;font:inherit;font-size:var(--fs-sm);cursor:pointer;color:var(--ink);transition:.15s}
.legend-item:hover{border-color:#a6aac0}
.legend-item i{width:10px;height:10px;border-radius:3px}
.legend-item b{font-weight:750;color:#545454;font-variant-numeric:tabular-nums}
.legend-item.off{opacity:.42}.legend-item.off i{background:#c6c6c6!important}.legend-item.off span{text-decoration:line-through}
/* Чем больше показателей в блоках, тем шире нужна панель — иначе имена схлопываются */
.ov-tops{display:grid;grid-template-columns:repeat(var(--tops,3),minmax(0,1fr));gap:13px}
.panel-head.pad{padding:16px 18px 10px;align-items:center}
.link{border:0;background:none;color:#2f386a;font:inherit;font-size:var(--fs-sm);font-weight:750;cursor:pointer;padding:4px}
.link:hover{text-decoration:underline}
/* Ширины не фиксируем по номеру столбца: их число задаёт пользователь в настройках.
Имя тянется, числа держат свою ширину и не переносятся. */
table.compact{width:100%;table-layout:auto}
table.compact th,table.compact td{padding:8px 6px;font-size:var(--fs-sm)}
table.compact th{letter-spacing:.02em;white-space:nowrap}
table.compact th:first-child,table.compact td:first-child{padding-left:16px;width:99%;max-width:0;overflow:hidden;text-overflow:ellipsis}
table.compact th:last-child,table.compact td:last-child{padding-right:16px}
table.compact th.sortable{cursor:pointer;user-select:none}
table.compact th.sortable:hover{color:var(--ink)}
table.compact th.active{color:var(--ink);font-weight:800}
table.compact th:not(:first-child),table.compact td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;width:1%}
table.compact td.name{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
table.compact tbody tr{cursor:pointer}
.empty.small{padding:24px;font-size:var(--fs-sm)}
.rep-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.rep-filters{min-height:30px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;font-size:var(--fs-sm)}
.muted{color:var(--muted)}
.chip{border:1px solid #bfc2d6;background:#eeeeee;border-radius:20px;padding:5px 11px;font:inherit;font-size:var(--fs-sm);cursor:pointer;color:var(--ink)}
.chip b{font-weight:750}.chip span{margin-left:4px;color:var(--muted)}
.chip:hover{border-color:#747db1}.chip.clear{background:transparent;border-color:transparent;color:var(--muted)}
#repTable{overflow:auto;max-height:calc(100vh - 290px);transition:opacity .15s}
#repTable.loading{opacity:.45}
table.report{min-width:880px}
table.report thead th{position:sticky;top:0;z-index:1;cursor:pointer;user-select:none;white-space:nowrap}
table.report thead th:hover{color:var(--ink)}
table.report th.num,table.report td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.report td{padding:11px 16px}
table.report td.name{font-weight:600;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.report td.zero{color:#b4b4b4}
table.report tr.drill{cursor:pointer}
table.report tr.drill:hover td.name{color:#2f386a;text-decoration:underline}
table.report tfoot td{position:sticky;bottom:0;background:#f2f2f2;font-weight:800;border-top:1px solid var(--line)}
@media(max-width:1280px){.ov-tops{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.ov-tops{grid-template-columns:1fr}}
@media(max-width:700px){.head-tools{justify-content:flex-start}.ov-chart{height:200px}#repTable{max-height:none}}
/* Доля кликов строки — тонкая полоска под названием */
table.compact td.name span{display:block;overflow:hidden;text-overflow:ellipsis}
table.compact td.name .share{position:absolute;left:16px;bottom:4px;height:3px;max-width:calc(100% - 32px);border-radius:2px;background:linear-gradient(90deg,#5f6dbf,#667dff)}
table.compact td.money{color:#2f6b45;font-weight:700}
table.compact tbody tr:hover td{background:#f5f5f5}
/* Карточки показателей: чуть больше воздуха и акцент на числе */
#ovMetrics article{position:relative;overflow:hidden}
#ovMetrics article strong{font-variant-numeric:tabular-nums}
#ovMetrics article:not(.accent)::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(#667dff,#5f6dbf);opacity:.9}
/* ---------- Плотность: меньше воздуха, тоньше линии, спокойнее цвет ---------- */
.content{padding:24px 30px 52px}
header{height:56px;padding:0 30px}
.sidebar{width:212px;padding:20px 14px}
.app{grid-template-columns:212px 1fr}
.sidebar nav{margin-top:26px;gap:2px}
.nav-item{padding:8px 11px;font-size:var(--fs-md)}
.page-head{margin-bottom:16px;align-items:flex-end}
.page-head h1{font-size:var(--fs-2xl);letter-spacing:-.03em;margin:2px 0 4px}
.page-head p,.panel-head p{font-size:var(--fs-sm)}
.eyebrow{font-size:var(--fs-xxs)!important;letter-spacing:.12em!important}
.panel{padding:18px}
.metrics{gap:10px;margin-bottom:10px}
.metrics article{padding:14px 16px}
.metrics strong{font-size:var(--fs-num);margin:8px 0 4px}
.metrics article>span{font-size:var(--fs-xs)}
.metrics small{font-size:var(--fs-xs)}
.btn{padding:8px 13px;font-size:var(--fs-md);border-radius:9px}
.btn:hover{transform:none;border-color:#a6aac0}
.btn.primary:hover{background:#000}
th,td{padding:9px 14px}
th{font-size:var(--fs-xxs)}
td{font-size:var(--fs-md)}
.grid-main{gap:10px}
/* ---------- Панель поиска и фильтров ---------- */
.list-tools{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.list-tools .search{position:relative;display:flex;align-items:center;flex:1 1 260px;max-width:380px;gap:0}
.list-tools .search>span{position:absolute;left:11px;color:var(--muted);font-size:var(--fs-md);pointer-events:none}
.list-tools .search input{padding:8px 34px;font-size:var(--fs-md);border-radius:9px}
.list-tools .search input::-webkit-search-cancel-button{-webkit-appearance:none}
.list-tools .search kbd{position:absolute;right:9px;font:inherit;font-size:var(--fs-xxs);color:var(--muted);background:#eaeaea;border-radius:4px;padding:1px 5px;pointer-events:none}
.list-tools .search input:focus+kbd,.list-tools .search input:not(:placeholder-shown)+kbd{display:none}
.list-tools select{width:auto;min-width:118px;max-width:190px;padding:8px 10px;font-size:var(--fs-md);border-radius:9px}
.list-tools .reset{border:0;background:none;color:var(--muted);font:inherit;font-size:var(--fs-sm);cursor:pointer;padding:6px 4px;text-decoration:underline}
.list-tools .reset:hover{color:var(--ink)}
.list-tools .count{margin-left:auto;font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums}
.list-tools .count.filtered{color:#2f386a;font-weight:700}
/* ---------- Списки ---------- */
table.list td{vertical-align:top}
table.list td strong{font-weight:650}
table.list .sub{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--muted);font-weight:400}
table.list th.num,table.list td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.list td.money{color:#2f6b45;font-weight:700}
table.list td.geo{font-size:var(--fs-md);letter-spacing:1px;white-space:nowrap}
table.list .offer-line+.offer-line{margin-top:3px}
table.list .url{max-width:260px;font-size:var(--fs-xs)}
table.list .muted{color:var(--muted)}
table.list .row-actions{white-space:nowrap;text-align:right}
table.list .row-actions>*+*{margin-left:5px}
table.list tbody tr:hover{background:#f9f9f9}
.tag{display:inline-flex;align-items:center;gap:5px;border-radius:7px;padding:3px 8px;font-size:var(--fs-xs);font-weight:650;background:#eaeaea;color:#4c4c4c}
.tag.block{background:#f6e7e4;color:#8d3a30}
.tag.notfound{background:#f2eee6;color:#7b6844}
.tag.campaign{background:#e7eef6;color:#2c5b8f}
.rep-toolbar select{width:auto;min-width:130px;max-width:200px;padding:8px 10px;font-size:var(--fs-md);border-radius:9px}
.rep-toolbar{gap:8px}
.rep-filters{min-height:0;margin-bottom:10px}
.rep-selects{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.rep-toolbar .segmented{flex-wrap:wrap}
/* Журнал кликов: строка в одну линию, полное значение — в подсказке */
td.click-value{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.column-picker summary{font-size:var(--fs-sm);cursor:pointer;color:var(--muted)}
.column-picker{margin-bottom:10px}
.chart-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.inline-select{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--muted);font-weight:600}
.inline-select select{width:auto;padding:6px 9px;font-size:var(--fs-md);border-radius:8px}
.inline-select[hidden]{display:none}
.chart-note{margin:30px 0 0;font-size:var(--fs-xs);color:var(--muted);max-width:720px}
.chart-note[hidden]{display:none}
.chart-note:not([hidden])~.ov-legend{margin-top:10px}
.column-options{display:flex;flex-wrap:wrap;gap:8px 16px;margin:10px 0}
.column-options label{display:flex;align-items:center;gap:7px;font-size:var(--fs-md);font-weight:500}
.column-picker summary{list-style:none}
.column-picker summary::-webkit-details-marker{display:none}
.column-picker summary::before{content:"▸ ";font-size:10px}
.column-picker[open] summary::before{content:"▾ "}
.column-picker[open]{border:1px solid var(--line);background:var(--card);border-radius:11px;padding:12px 14px}
.column-picker[open] summary{margin-bottom:4px;font-weight:650;color:var(--ink)}
.column-picker .btn{margin-right:14px}
/* Кнопки-иконки в шапке страницы и окно настроек отображения */
.btn.icon{padding:8px 10px;line-height:1;font-size:var(--fs-md);min-width:34px}
#prefsDialog{max-width:560px;width:calc(100vw - 32px)}
.prefs-body{display:grid;gap:18px}
.prefs-section h3{margin:0 0 2px;font-size:var(--fs-md)}
.prefs-section p{margin:0 0 8px;font-size:var(--fs-xs);color:var(--muted)}
.prefs-section .column-options{margin:0}
.prefs-section .inline-select select{min-width:160px}
/* Число карточек задаёт пользователь; на узких экранах всё равно 2 и 1 в ряд */
.metrics{grid-template-columns:repeat(var(--cards,4),minmax(0,1fr))}
@media(max-width:900px){.metrics{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.metrics{grid-template-columns:1fr}}
/* Линии: рисуются поверх сетки, колонки остаются невидимой областью наведения */
.ov-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ov-bars.as-lines{gap:0}
.ov-bars.as-lines .ov-col:hover,.ov-bars.as-lines .ov-col:focus-visible{background:#eceee64d}
.ov-bars.as-lines .ov-col:hover::after,.ov-bars.as-lines .ov-col:focus-visible::after{content:"";position:absolute;top:0;bottom:24px;width:1px;background:#969696}
.ov-tip .tip-row.zero b,.ov-tip .tip-row.zero span{color:#969696}
/* ---------- Единый ритм: ничего не должно прыгать при смене разбивки ---------- */
/* Шапка графика: заголовок и подсказка держат постоянную высоту при любой длине текста */
.chart-panel .panel-head{min-height:46px;align-items:flex-start}
.chart-panel .panel-head>div:first-child{flex:1 1 320px;min-width:0}
#ovChartTitle{margin:0 0 3px}
#ovChartHint{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:30px;margin:0}
/* Место под предупреждение занято всегда — иначе график сдвигался бы при его появлении */
.chart-note{min-height:17px;margin:26px 0 0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.chart-note.is-hidden{visibility:hidden}
.chart-note:not(.is-hidden)~.ov-legend{margin-top:8px}
/* Высота легенды постоянная (два ряда): иначе блоки под графиком ездили бы вверх-вниз */
.ov-legend{margin-top:8px;height:58px;overflow-y:auto;align-content:flex-start}
/* Цвет закреплён за показателем: синий — клики, фиолетовый — уникальные и так далее */
.metrics article:not(.accent)::after{background:var(--accent,#5f6dbf);opacity:1}
.metrics article.accent{background:var(--accent,var(--green));border-color:var(--accent,var(--green))}
.ov-tops .panel-head h3{display:flex;align-items:center;gap:7px;margin:0}
.ov-tops .dot{width:8px;height:8px;border-radius:3px;background:var(--accent,#5f6dbf);flex:none}
table.compact td.name .share{background:var(--accent,#5f6dbf);opacity:.55}
/* Одинаковые органы управления во всём трекере */
.btn,.list-tools select,.list-tools .search input,.rep-toolbar select,.inline-select select,.period-custom input,.period-presets button{height:30px;box-sizing:border-box}
.btn.icon{height:30px;display:inline-flex;align-items:center;justify-content:center}
.period-presets button,.segmented button{height:28px;display:inline-flex;align-items:center}
.segmented.small button{height:26px}
/* ---------- График крупнее и спокойнее ---------- */
.ov-chart{height:340px;margin-top:22px}
.ov-grid-line{border-top:1px solid #ebebeb}
.ov-grid-line.base{border-top:1px solid #dddddd}
.ov-grid-line span{font-size:var(--fs-xxs);color:#969696}
/* Точки не перехватывают наведение: за него отвечают невидимые колонки */
.ov-dot{position:absolute;width:5px;height:5px;margin:0 0 -2.5px -2.5px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 1.5px #fff}
.ov-col small{font-size:var(--fs-xxs)}
/* Легенда без лишней обводки — как подпись, а не как кнопки */
.legend-item{border-color:transparent;background:transparent;padding:4px 8px 4px 4px;gap:6px}
.legend-item:hover{border-color:transparent;background:#eeeeee}
.legend-item i{width:9px;height:9px;border-radius:2px}
.legend-item b{color:var(--muted);font-weight:650}
/* ---------- Широкие таблицы прокручиваются, а не обрезаются ---------- */
/* В styles.css у панели стоит overflow:hidden — колонки за краем просто пропадали */
.table-panel{overflow:auto}
#clickHeaders th,#clickRows td{white-space:nowrap}
/* Шапка остаётся на месте при прокрутке длинного журнала */
#clickHeaders th{position:sticky;top:0;z-index:1}
/* Итоговая строка списка — такая же, как в отчётах */
table.list tfoot td{position:sticky;bottom:0;background:#f2f2f2;font-weight:800;border-top:1px solid var(--line)}
/* Название и подпись — в одну строку: при прокручиваемой таблице перенос только мешает */
table.list td:first-child strong,table.list td:first-child .sub{display:block;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.list th:first-child,table.list td:first-child{min-width:190px}
/* Журнал кликов: свод, проваливание в журнал и итоговая строка */
#clickTools select{max-width:170px}
#clickFoot td{position:sticky;bottom:0;background:#f2f2f2;border-top:1px solid var(--line);font-weight:800}
.link-cell{border:0;background:none;padding:0;font:inherit;color:#2f6b45;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:#a8aed0;text-underline-offset:3px}
.link-cell:hover{color:#1f4a2f;text-decoration-color:currentColor}
#clickChips:empty{display:none}
/* Карточка кампании: показатели, её потоки и топы */
.camp-tops{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.camp-top{padding:12px 14px}
.camp-top h3{margin:0;font-size:var(--fs-lg)}
.camp-top table.list td{padding:7px 8px}
.camp-top table.list td:first-child{min-width:0;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#campSub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-sm)}
#campSub code{font-size:var(--fs-xs);background:#efefef;padding:3px 7px;border-radius:6px}
.link-cell.strong{font-weight:750;font-size:inherit}
#campMetrics{margin-bottom:14px}
@media(max-width:900px){.camp-tops{grid-template-columns:1fr}}
/* Линия идёт от края до края: у крайних колонок точка на краю, а не в центре */
.ov-bars.as-lines .ov-col:first-child small{left:0}
.ov-bars.as-lines .ov-col:last-child small{right:0}
.ov-bars.as-lines .ov-col:first-child:hover::after,.ov-bars.as-lines .ov-col:first-child:focus-visible::after{left:0}
.ov-bars.as-lines .ov-col:last-child:hover::after,.ov-bars.as-lines .ov-col:last-child:focus-visible::after{right:0}
/* ============ Родные контролы браузера ============
В Safari select, checkbox, search и textarea рисуются системно и выбиваются из панели:
чужая рамка, синяя галка, инкрустированная тень. Снимаем системный вид и собираем
внешний вид сами — одними правилами на весь интерфейс, включая формы в модалках.
🔴 Базовое `input{width:100%}` из styles.css растягивало и чекбоксы: ниже им задан
свой размер, иначе квадрат разъезжался на всю ширину строки. */
select{-webkit-appearance:none;appearance:none;padding-right:30px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 11px center;background-size:10px 6px;cursor:pointer}
select:disabled{opacity:.55;cursor:default}
/* В панелях селекты компактные — стрелке нужно меньше места */
.list-tools select,.rep-toolbar select,.inline-select select,#clickTools select{padding-right:26px;background-position:right 8px center}
input,textarea,select{font:inherit;color:var(--ink);font-size:var(--fs-md)}/* Поле крупнее своей подписи: иначе закрытый select (12px от label) не совпадал со своим же выпадающим списком (13px). */
/* 🔴 Снимаем системный вид со ВСЕГО, а не по списку типов: у восьми полей (логин,
название, домен) атрибута type нет вовсе, и правило `input[type=text]` их не ловило —
в Safari они оставались с родной вдавленной рамкой.
Радиокнопки исключены: своей отрисовки у нас для них нет, появятся — станут невидимыми. */
input:not([type=radio]),textarea,button,select{-webkit-appearance:none;appearance:none}
/* Стрелки у числовых полей в Safari ломают высоту строки, а шаг и так задан */
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}
input[type=date]::-webkit-date-and-time-value{text-align:left}
/* Жёлтая подложка автозаполнения Safari — поверх неё наш фон */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
-webkit-box-shadow:0 0 0 1000px #f9f9f9 inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink)}
textarea{width:100%;border:1px solid #d6d6d6;background:#f9f9f9;border-radius:9px;padding:11px 12px;
outline:none;resize:vertical;min-height:96px;line-height:1.5}
textarea:focus{border-color:#5b638f;box-shadow:0 0 0 3px #d9ff6633}
/* 🔴 Галочка — фоном, а не ::after: в Safari псевдоэлементы у не рисуются вовсе,
и чекбокс остался бы просто залитым квадратом без отметки. */
input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;display:inline-block;vertical-align:-3px;
width:18px;height:18px;min-width:18px;margin:0;padding:0;border:1.5px solid #c2c2c2;border-radius:5px;
background:#fff no-repeat center;background-size:11px 9px;cursor:pointer;transition:background-color .12s,border-color .12s}
input[type=checkbox]:hover{border-color:#8a8ea8}
input[type=checkbox]:checked{background-color:var(--green);border-color:var(--green);
background-image:url("data:image/svg+xml;utf8,")}
input[type=checkbox]:disabled{opacity:.5;cursor:default}
input[type=checkbox]:focus-visible{outline:2px solid #5b638f;outline-offset:2px}
/* Треугольник у «Показывать колонки» рисуем сами — системный маркер убираем везде */
summary{list-style:none}
summary::-webkit-details-marker{display:none}
/* Полосы прокрутки внутри панелей: системные тёмные в светлой таблице слишком заметны */
.table-panel,.ov-legend,.country-options,.prefs-body{scrollbar-width:thin;scrollbar-color:#c6c6c6 transparent}
.table-panel::-webkit-scrollbar,.ov-legend::-webkit-scrollbar,.country-options::-webkit-scrollbar,.prefs-body::-webkit-scrollbar{width:10px;height:10px}
.table-panel::-webkit-scrollbar-thumb,.ov-legend::-webkit-scrollbar-thumb,.country-options::-webkit-scrollbar-thumb,.prefs-body::-webkit-scrollbar-thumb{background:#cccccc;border:3px solid transparent;background-clip:content-box;border-radius:8px}
.table-panel::-webkit-scrollbar-thumb:hover,.ov-legend::-webkit-scrollbar-thumb:hover{background:#b0b0b0;border:3px solid transparent;background-clip:content-box}
.table-panel::-webkit-scrollbar-track{background:transparent}
/* Кнопки: системная синяя обводка Safari заменяется на нашу */
button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #5b638f;outline-offset:2px}
button:focus:not(:focus-visible){outline:none}
/* Технические вставки в тексте: одинаковые во всех разделах */
code{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:#efefef;padding:2px 6px;border-radius:5px}
/* Свой выпадающий список (select.js): системное меню браузера заменено на наше */
.sel-pop{position:fixed;z-index:300;overflow-y:auto;max-width:min(92vw,460px);padding:5px;
background:#fff;border:1px solid #d6d6d6;border-radius:11px;box-shadow:0 16px 38px #0f140a26;
scrollbar-width:thin;scrollbar-color:#cccccc transparent}
.sel-pop[hidden]{display:none}
.sel-pop::-webkit-scrollbar{width:9px}
.sel-pop::-webkit-scrollbar-thumb{background:#cccccc;border:3px solid transparent;background-clip:content-box;border-radius:8px}
.sel-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;font-size:var(--fs-md);
line-height:1.35;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel-opt.active{background:#ebebeb}
.sel-opt.on{font-weight:700}
.sel-opt.on::after{content:"✓";margin-left:auto;color:var(--green);font-weight:700}
.sel-opt[aria-disabled=true]{color:#ababab;cursor:default}
.sel-empty{padding:10px;color:var(--muted);font-size:var(--fs-sm)}
/* ============ Появление: раздел, строки, модалки ============
Без анимации панель «щёлкает»: раздел возникает мгновенно, потом так же мгновенно
в него падают данные. Движения короткие (180–240 мс) и только по opacity/transform —
это не вызывает пересчёт раскладки. Всё отключается системной настройкой «Меньше
движения» в самом низу файла. */
.load-bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:400;opacity:0;
transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
background:linear-gradient(90deg,var(--green),var(--lime));
transition:transform .2s ease-out,opacity .25s}
.load-bar.on{opacity:1}
@keyframes orbit-page-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes orbit-fade-in{from{opacity:0}to{opacity:1}}
@keyframes orbit-dialog-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
/* Раздел переключается — анимация запускается заново, потому что .active снимает display:none.
🔴 ТОЛЬКО ПРОЗРАЧНОСТЬ, без сдвига. Раньше ехала и страница (7px), и каждая карточка
внутри неё (ещё 7px), и строки таблицы (4px) — смещения вложенных элементов
СКЛАДЫВАЮТСЯ: карточка стартовала на 14px ниже места, строка на 11px. Вдобавок у
карточек были задержки 40/80/120/160 мс, у строк по 18 мс, поэтому всё приезжало
вразнобой — при переходе между разделами это читалось как дрожание первые доли секунды.
Появление одной общей волной прозрачности выглядит спокойно и ничего не двигает. */
.page.active{animation:orbit-fade-in .16s ease-out}
#app,#login{animation:orbit-fade-in .32s ease-out}
/* Карточки и строки проявляются вместе со страницей — своих анимаций у них нет.
Отдельная волна по строкам нужна была, чтобы обновление таблицы было заметно;
теперь за это отвечает полоса загрузки наверху, а таблица просто меняется. */
dialog[open]{animation:orbit-dialog-in .2s cubic-bezier(.22,.7,.3,1)}
dialog[open]::backdrop{animation:orbit-fade-in .2s ease-out}
.sel-pop{animation:orbit-page-in .13s ease-out}
.ov-tip{transition:opacity .12s}
/* Наведение и нажатие — плавно, а не рывком */
.nav-item,.ov-col,.copy,.icon-button,.legend-item,.chip,.link-cell,.period-presets button{transition:background-color .15s,color .15s,border-color .15s,opacity .15s}
tbody tr{transition:background-color .12s}
.btn:active{transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
.page.active,#app,#login,dialog[open],dialog[open]::backdrop,.sel-pop{animation:none!important}
.load-bar{display:none}
}
/* Показатели графика — переключатели: можно включить несколько сразу, у каждого свой цвет */
#ovMetricTabs button{gap:6px}
#ovMetricTabs button i{width:8px;height:8px;border-radius:50%;background:#c0c0c0;flex:none;transition:background-color .15s}
#ovMetricTabs button.active i{background:var(--metric)}
#ovMetricTabs button.active{color:var(--ink)}
/* Заблокированные «Разбивка» и «Вид» при нескольких показателях — видно, что сейчас не к месту */
.inline-select select:disabled{opacity:.45}
.inline-select:has(select:disabled)>span{opacity:.45}
/* Наклонные подписи оси: на длинных периодах прямые не помещаются (как в Keitaro) */
.ov-bars.tilt{inset:0 0 -58px 0;padding-bottom:58px}
.ov-bars.tilt .ov-col small{bottom:-26px;right:50%;left:auto;text-align:right;
transform:rotate(-45deg);transform-origin:100% 0}
.ov-bars.tilt.as-lines .ov-col:hover::after,.ov-bars.tilt.as-lines .ov-col:focus-visible::after{bottom:58px}
.ov-chart.tilted{margin-bottom:34px}
/* Кампания без замыкающего оффера теряет трафик молча — помечаем в карточке */
.warn-text{color:#a8622b}
/* Списки плотнее: 18px по бокам у семи-одиннадцати колонок — это до 250px одних отступов, из-за них таблица и не влезала в окно. */table.list th,table.list td{padding:9px 12px}/* Один рост у всех органов управления: кнопки были 34px, пресеты периода 28px. */.list-tools .search input,.page-head .head-tools .btn{line-height:1.25;padding:4px 10px}/* Высота 30px: при отступах 8px на текст оставалось 12px, и низ букв срезался —
сначала в фильтрах списков, потом так же в «Партнёрке» и «Стране» отчётов. */
.list-tools select,.rep-toolbar select{line-height:1.25;padding:4px 26px 4px 10px}.list-tools .search input{padding-left:30px}.list-tools .search>span{left:10px}.column-picker{padding:10px 14px}.column-picker summary{font-weight:650}.geo-warn{color:#a8452f;font-weight:650;white-space:nowrap}p.form-note.geo-warn{white-space:normal;font-weight:600;margin-top:6px}.modal-actions .grow{flex:1}.test-result{border:1px solid #d6d6d6;border-radius:10px;background:#f9f9f9;padding:12px 14px;font-size:var(--fs-sm);line-height:1.6}.test-result code{font-size:var(--fs-xs);overflow-wrap:anywhere}.test-result .ok{color:#23834b;font-weight:700}.test-result .bad{color:#b42318;font-weight:700}.test-result dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0 0}.test-result dt{color:var(--muted)}.test-result dd{margin:0;overflow-wrap:anywhere}tr.row-edit{cursor:pointer}tr.row-edit:focus-visible{outline:2px solid #5b638f;outline-offset:-2px}table.list .status{padding:3px 7px}table.list .tag{padding:2px 6px}table.list .copy{padding:4px 6px;line-height:1}table.list .sub{margin-top:1px}
/* Поиск в длинных выпадающих списках (select.js): прилипает к верху при прокрутке. */
.sel-search{position:sticky;top:-5px;z-index:1;display:block;width:100%;box-sizing:border-box;margin:-5px -5px 4px;width:calc(100% + 10px);
padding:9px 11px;border:0;border-bottom:1px solid var(--line);border-radius:9px 9px 0 0;background:var(--card,#fff);
font:inherit;font-size:var(--fs-md);outline:none;box-shadow:none}
.sel-search[hidden]{display:none}
.sel-search:focus{border-bottom-color:#5b638f;box-shadow:none}
@media (max-width:760px){.sel-search{font-size:16px}}