/* WEBNOSTRA Реклама — v7. Светлая компактная тема в визуальном языке
   мини-апов WEBNOSTRA (task): плоские карточки, тонкие разделители,
   золото только акцентами, sticky-шапка вместо сайдбара. */
:root{--bg:#f2f3f7;--card:#fff;--text:#16181d;--hint:#70757e;--sep:#ececf0;--night:#111117;--gold:#c9a84c;--gold-dark:#a8862f;--gold-light:#e8d48b;--gold-grad:linear-gradient(145deg,#e8d48b,#c9a84c);--green:#2f9e44;--green-bg:#e9f6ec;--orange:#c07a09;--orange-bg:#fdf3e0;--red:#d6453d;--red-bg:#fdecec;--shadow:0 1px 2px rgba(22,24,29,.05)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
:focus-visible{outline:2px solid var(--gold-dark);outline-offset:2px;border-radius:6px}

/* ── шапка ── */
.topbar{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:1px solid var(--sep)}
.topbar-inner{max-width:1240px;margin:auto;display:flex;align-items:center;gap:16px;min-height:50px;padding:7px 20px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text)}
.brand .word{display:flex;flex-direction:column;line-height:1.15}
.brand .word b{font-size:12px;letter-spacing:.1em;font-weight:800}
.brand .word em{font-style:normal;font-size:8px;letter-spacing:.38em;color:var(--gold-dark);font-weight:700}
.breadcrumb{flex:1;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--hint);min-width:0}
.breadcrumb a{color:var(--hint);text-decoration:none}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb b{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-right{display:flex;align-items:center;gap:16px}
.freshness{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3}
.freshness span{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--hint)}
.freshness b{font-size:11.5px}
.navlink{font-size:12px;color:var(--hint);text-decoration:none;border:1px solid var(--sep);
  border-radius:8px;padding:6px 11px;white-space:nowrap}
.navlink:hover{color:var(--text);border-color:#d8d9e0}
.user-chip{display:flex;align-items:center;gap:7px}
.user-chip b{font-size:12px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--gold-grad);color:#17130a;font-weight:850;font-size:12px}

/* ── контент ── */
main{max-width:1240px;margin:auto;padding:14px 20px 44px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.page-title h1{font-size:20px;line-height:1.15;letter-spacing:-.02em;margin:0}
.page-title p{margin:3px 0 0;color:var(--hint);font-size:12px}
.control-deck{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.periods{display:flex;background:#e8e9ee;padding:2px;border-radius:9px}
.periods button{border:0;background:transparent;border-radius:7px;padding:6px 10px;color:#5d626b;font:600 12px inherit;cursor:pointer;white-space:nowrap}
.periods button:hover{color:var(--text)}
.periods button.active{background:var(--night);color:#f0df9d}
.date-range{display:flex;gap:6px}
.date-range label{display:flex;align-items:center;gap:5px;color:var(--hint);font-size:10px;text-transform:uppercase;font-weight:700}
.date-range input,.filters select,.search{height:30px;border:1px solid var(--sep);background:var(--card);border-radius:8px;color:var(--text);font:500 12px inherit}
.date-range input{padding:0 6px}

.status{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:10px;background:#fff8df;color:#6c571e;margin-bottom:10px}
.attention-strip{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.signal{display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:8px;background:var(--card);border:1px solid var(--sep);font-size:11px;color:var(--hint)}
.signal b{color:var(--text)}
.signal i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.signal.warn i{background:var(--orange)}
.signal.crit{border-color:#f3c9c6;background:var(--red-bg)}
.signal.crit i{background:var(--red)}
.signal.crit b{color:var(--red)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}
.kpis article{background:var(--card);border:1px solid var(--sep);border-radius:12px;padding:10px 13px 11px;box-shadow:var(--shadow);min-width:0}
.kpis span{display:block;color:var(--hint);font-size:11px;font-weight:600;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpis span em{font-style:normal;font-weight:400;font-size:10px}
.kpis strong{font-size:19px;line-height:1;letter-spacing:-.02em}
.kpis small{display:block;margin-top:5px;font-size:10.5px;color:var(--hint)}
.kpis small.up{color:var(--orange)}
.kpis small.down{color:var(--green)}
/* Вердикт по цели CPA в нижней строке плитки: цвет несёт тот же смысл, что
   бейдж проекта в портфеле — «выше цели» тревожно, «в цели» спокойно. */
.kpis small b{font-weight:700}
.kpis small b.over{color:var(--orange)}
.kpis small b.under{color:var(--green)}
/* Вердикт по цели направления в таблице: CPA красится против плана. */
td span.over{color:var(--orange);font-weight:600}
td span.under{color:var(--green);font-weight:600}

.panel{background:var(--card);border:1px solid var(--sep);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:8px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;border-bottom:1px solid var(--sep)}
.panel-head h2{font-size:13.5px;margin:0}
.panel-note{color:var(--hint);font-size:11px;white-space:nowrap}

/* ── график ── */
.chart{position:relative;padding:8px 10px 2px;touch-action:pan-y}
/* viewBox совпадает с реальным размером в пикселях (см. drawChart) — без
   preserveAspectRatio="none", иначе на телефоне график сжимался по X втрое
   и подписи расплющивало. */
.spend-chart{display:block;width:100%;height:auto;overflow:visible}
.chart-grid line{stroke:#ececf0;stroke-width:1;vector-effect:non-scaling-stroke}
.chart-grid text,.chart-labels text{fill:#92929b;font-size:11px}
.chart-area{fill:url(#chart-fill)}
.chart-line{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.chart-dots circle{fill:#fff;stroke:var(--gold);stroke-width:2;vector-effect:non-scaling-stroke}
.chart-cursor{position:absolute;width:1px;background:rgba(22,24,29,.22);pointer-events:none;z-index:2}
.chart-marker{position:absolute;width:9px;height:9px;border:2px solid var(--gold-dark);background:#fff;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:3;box-shadow:0 1px 4px rgba(22,24,29,.2)}
.chart-tip{position:absolute;top:6px;transform:translateX(10px);background:var(--night);color:#fff;border-radius:9px;padding:7px 11px;font-size:11.5px;line-height:1.55;pointer-events:none;z-index:5;box-shadow:0 6px 18px rgba(17,17,23,.28);white-space:nowrap}
.chart-tip.flip{transform:translateX(calc(-100% - 10px))}
.chart-tip>b{display:block;color:var(--gold-light);font-size:10.5px;letter-spacing:.03em;margin-bottom:2px}
.chart-tip span{display:flex;justify-content:space-between;gap:14px;color:#c9c9d1}
.chart-tip span b{color:#fff}

/* ── второй ряд графика: результат столбиками ── */
.chart-bars rect{fill:#8f9bb3;opacity:.30}
.chart-grid text.axis-right{fill:#8f9bb3;font-size:10px}
/* флажки событий на оси дат (ADR-0022) */
.chart-ev path{fill:var(--gold-dark);opacity:.85}
.chart-tip .tip-ev{display:block;color:#f0df9d;font-size:10.5px;max-width:260px;white-space:normal}

/* ── события (ADR-0022) ── */
.events-list{list-style:none;margin:0;padding:4px 0;max-height:260px;overflow-y:auto}
.events-list li{display:flex;gap:10px;align-items:baseline;padding:7px 14px;border-bottom:1px solid #f2f2f5;font-size:12.5px}
.events-list li:last-child{border-bottom:0}
.events-list b{flex:0 0 52px;white-space:nowrap}
.events-list .kind{flex:0 0 auto;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:750;color:var(--gold-dark);background:#f6efdb;border-radius:6px;padding:2px 6px}

/* ── база сравнения (ADR-0023) ── */
.compare-select{height:30px;border:1px solid var(--sep);background:var(--card);border-radius:8px;color:var(--text);font:500 12px inherit;padding:0 8px}

/* ── превью креативов (ADR-0025) ── */
.xthumb{width:34px;height:34px;object-fit:cover;border-radius:7px;vertical-align:middle;margin-right:8px;border:1px solid var(--sep)}

/* ── спарклайн в таблице портфеля ── */
.spark{display:block;margin-left:auto}
.spark polyline{fill:none;stroke:var(--gold-dark);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ── надёжность данных (ADR-0021) ── */
.health-list{list-style:none;margin:0;padding:4px 0}
.health-list li{display:flex;gap:10px;align-items:baseline;padding:8px 14px;border-bottom:1px solid #f2f2f5;font-size:12.5px}
.health-list li:last-child{border-bottom:0}
.health-list .kind{flex:0 0 auto;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:750;color:var(--orange);background:var(--orange-bg);border-radius:6px;padding:2px 6px}
.health-list b{white-space:nowrap}
.health-list li>span:last-child{color:var(--hint)}

/* ── план месяца (пейсинг) ── */
.pacing{padding:12px 14px 16px}
.pace-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.pace-cell span{display:block;color:var(--hint);font-size:10.5px;font-weight:600;margin-bottom:4px}
.pace-cell b{font-size:16px;letter-spacing:-.01em}
.pace-cell small{display:block;margin-top:3px;font-size:10.5px;color:var(--hint)}
.pace-cell small.warn{color:var(--orange)}
.pace-cell small.under{color:var(--green)}
.pace-bar{position:relative;height:10px;border-radius:999px;background:#ececf0}
.pace-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--gold-grad)}
/* Маркер нормы на сегодня: полоса позади маркера — отстаём, впереди — жжём. */
.pace-bar em{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--night);border-radius:2px}

/* ── объявления под кампанией (ADR-0019) ── */
.chev{border:0;background:transparent;cursor:pointer;font-size:11px;color:var(--gold-dark);padding:0 5px 0 0;display:inline-block;transition:transform .15s}
.chev.open{transform:rotate(90deg)}
/* вся ячейка названия — цель клика для раскрытия */
td.cell-title.has-ads{cursor:pointer}
td.cell-title.has-ads:hover .xcount{color:var(--gold-dark)}
.xcount,.xgroup{font-style:normal;font-weight:500;font-size:11px;color:var(--hint)}
tr.xrow td{background:#fbfbfd;font-weight:500}
tr.xrow td.cell-title{font-weight:500;padding-left:26px}
.xindent{color:var(--gold-dark);margin-right:5px}
td.xnote{white-space:normal;font-size:11.5px;padding-left:26px}

/* ── таблица ── */
.projects-head{flex-wrap:wrap}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters select{padding:0 8px;min-width:118px}
.filters select[hidden]{display:none}
.search{display:flex;align-items:center;gap:5px;padding:0 8px}
.search span{font-size:15px;color:#9a9aa3}
.search input{width:120px;border:0;outline:0;background:transparent;font:inherit}
.table-wrap{overflow-x:auto;overscroll-behavior-x:contain}
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid #f2f2f5;white-space:nowrap;font-size:12.5px}
th{position:sticky;top:0;z-index:2;background:#fafafc;color:#82828b;font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:750}
tbody tr:hover{background:#faf9f4}
tbody tr:last-child td{border-bottom:0}
.number{text-align:right}
.muted{color:var(--hint)}
td a{color:var(--text);font-weight:700;text-decoration:none}
td a:hover{color:var(--gold-dark)}
.badge{display:inline-flex;padding:3px 8px;border-radius:999px;background:var(--green-bg);color:var(--green);font-size:10.5px;font-weight:700}
.badge.warn{background:var(--orange-bg);color:var(--orange)}
/* Заблокированный кабинет — не «внимание», а стоп: отдельный красный уровень. */
.badge.crit{background:var(--red-bg);color:var(--red)}
/* Выключенная кампания — не проблема и не норма: нейтральный серый. */
.badge.off{background:#eeeef2;color:#6b6f77}
.empty{text-align:center!important;color:var(--hint);padding:34px!important}

/* ── skeleton ── */
.skeleton-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0;background:transparent}
.skeleton-row span{height:62px;border-radius:12px;background:linear-gradient(100deg,#e9e9ed 20%,#f7f7f9 38%,#e9e9ed 58%);background-size:220% 100%;animation:shimmer 1.15s linear infinite}
@keyframes shimmer{to{background-position-x:-220%}}

/* ── переключатель кабинетов ──
   Сегмент-контрол в каноне панелей WEBNOSTRA: активный сегмент — тёмный,
   рядом с подписью кабинета его расход, чтобы выбор был осмысленным до клика. */
.account-switch{display:flex;gap:2px;background:#e8e9ee;padding:2px;border-radius:10px;
                margin-bottom:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.account-switch button{flex:0 0 auto;border:0;background:transparent;border-radius:8px;
                       padding:7px 12px;color:#5d626b;font:600 12px inherit;cursor:pointer;
                       white-space:nowrap;display:flex;align-items:baseline;gap:6px}
.account-switch button em{font-style:normal;font-weight:500;font-size:11px;color:#8a8f98}
.account-switch button:hover{color:var(--text)}
.account-switch button.active{background:var(--night);color:#f0df9d}
.account-switch button.active em{color:#c9bd8a}

/* ── адаптив ── */
@media(max-width:1000px){.kpis{grid-template-columns:repeat(2,1fr)}.page-head{align-items:flex-start}}
@media(max-width:720px){
  /* Подпись плитки переносится: в одну строку «Средний CPA · цель 3 000 ₽ ·
     выше цели» не влезает и обрезалась многоточием ровно на самом важном. */
  .kpis span{white-space:normal;overflow:visible;min-height:2.6em}
  .topbar-inner{padding:7px 12px;gap:10px}
  .freshness{display:none}
  .navlink{display:none}
  .user-chip b{display:none}
  .breadcrumb{font-size:12px}
  main{padding:12px 12px 36px}
  .control-deck{width:100%}
  .periods{overflow-x:auto;flex:1}
  .periods button{flex:1;padding:6px 7px;font-size:11px}
  .date-range{width:100%;justify-content:space-between}
  .date-range label{flex:1}
  .compare-select{width:100%;height:36px}
  .events-list b{flex-basis:46px}
  .date-range input{width:100%;min-width:0;font-size:16px}
  .account-switch button{flex:1 0 auto;padding:8px 10px}
  .attention-strip{flex-wrap:wrap}
  .signal{min-width:max-content}
  .panel-head{flex-direction:column;align-items:flex-start;gap:8px}
  .filters{width:100%}
  /* На 390 px три контрола в один ряд не влезали: «Все платформы» упиралось
     в нативную стрелку select и обрезалось. Селекты — по половине ряда,
     поиск — отдельной строкой; padding-right оставляет место под стрелку. */
  .filters select{flex:1 1 calc(50% - 3px);min-width:0;height:36px;padding:0 22px 0 8px}
  .search{flex:1 1 100%;height:36px}
  .search input{width:100%;font-size:16px}
  .date-range input{height:36px}
  .periods button{padding:8px 7px}
  .skeleton-row{grid-template-columns:1fr 1fr}
  .skeleton-row span{height:54px}

  /* ── таблица → карточка-плитка ──
     История вопроса. Сначала таблица на телефоне просто уезжала вправо:
     колонки CPA/CTR/CPC обрезались, а горизонтальную прокрутку никто не
     находил. Потом строка разворачивалась в список «метрика — значение»
     сверху вниз: ничего не терялось, но карточка одного проекта занимала
     почти экран, и сравнить клиентов между собой (главное, зачем портфель и
     открывают с телефона) стало нельзя — приходилось скроллить.
     Теперь строка — плитка: имя и статус в шапке, дальше цифры в три колонки
     «подпись сверху, значение снизу». Клиент занимает ~5 строк вместо 9, и
     соседние читаются одним движением. */
  .table-wrap{overflow:visible}
  table,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
           gap:9px 10px;padding:12px 13px 13px;border-bottom:1px solid var(--sep)}
  tbody tr:hover{background:transparent}
  td{border:0;padding:0;white-space:normal;display:flex;flex-direction:column;
     align-items:flex-start;gap:1px;text-align:left;font-size:13.5px;font-weight:650;
     min-width:0}
  td::before{content:attr(data-label);color:var(--hint);font-size:10px;font-weight:700;
             letter-spacing:.04em;text-transform:uppercase}
  td[data-label=""]::before{display:none}
  /* Шапка плитки: имя занимает две колонки, статус — третью, по правому краю.
     Статус стоит в разметке последним (в таблице он крайняя колонка), поэтому
     на телефоне его поднимает order, иначе бейдж уезжал под цифры и читался
     как ещё одна метрика. «Канал» наоборот уходит вниз: это справка, а не
     цифра, ради которой открывают портфель. */
  td.cell-title{grid-column:1/span 2;order:-2;font-weight:750;font-size:14px;
                line-height:1.25;word-break:break-word}
  td.cell-title a{font-size:14px}
  td[data-label="Канал"]{order:5}
  td.cell-status{order:-1;align-items:flex-end;justify-content:flex-start}
  td.cell-status::before{display:none}
  td .badge{margin:0}
  td.muted{font-weight:500}
  td.empty{grid-column:1/-1;text-align:center!important;padding:28px 0!important}
  /* Спарклайн на телефоне не читается в плитке — тренд смотрят в карточке. */
  td[data-label="Динамика"]{display:none}
  /* Плитка объявления чуть притоплена и без левого отступа таблицы. */
  tbody tr.xrow{background:#fbfbfd;padding-top:9px;padding-bottom:10px}
  tr.xrow td.cell-title{padding-left:0;font-size:12.5px}
  .pace-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:420px){.kpis strong{font-size:16px}.page-title h1{font-size:18px}}

/* ── логин ── */
.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--gold-dark);font-weight:800;font-size:10px}
.login-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 0,#2a2830 0,var(--night) 52%)}
.login-card{width:min(430px,100%);padding:36px;text-align:center;background:#fff;border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.3)}
.login-card img{filter:drop-shadow(0 8px 22px rgba(201,168,76,.22));margin-bottom:16px}
.login-card h1{font-size:25px;letter-spacing:-.03em;margin:9px 0}
.login-card p{color:var(--hint);margin:0 auto 20px;max-width:340px;font-size:13px}
.gold-button{display:block;width:100%;padding:13px 18px;border:0;border-radius:11px;background:var(--gold-grad);color:#17130a;text-decoration:none;font:800 15px inherit;box-shadow:0 8px 20px rgba(201,168,76,.22);cursor:pointer}
/* Кнопка подтверждения входа: палец, а не курсор — вход открывают с телефона. */
button.gold-button{min-height:48px}
.login-card small{display:block;color:#92929b;margin-top:14px}