/* ============================================================
   directads.css — Директ Превью · инструментальная страница

   Зависит от: base.css, tool-page.css.
   Здесь компоненты загрузки, отображения объявлений и ключевых фраз.

   REFACTORING NOTES:
   - Error blocks (.da-error) could use .fc-error from tool-page.css
   - Loading state (.da-loading) uses fcPulse animation from shared CSS
   - Note blocks could migrate to .fc-note pattern if needed
   ============================================================ */


/* Атрибут hidden должен всегда скрывать элемент: классы с display:flex/
   inline-flex иначе перебивают его (низкий приоритет браузерного стиля). */
[hidden] { display: none !important; }


/* ============================================================
   PUBLIC VIEW  (клиент открывает по share-ссылке)
   ============================================================ */

body.is-public-view .fc-main {
  min-height: 100vh;
}


/* ============================================================
   LAYOUT OVERRIDE
   ============================================================ */

.da-layout {
  grid-template-columns: 340px 1fr;
}

@media (max-width: 980px) {
  .da-layout { grid-template-columns: 1fr; }
}


/* ============================================================
   CONTROLS PANEL (left)
   ============================================================ */

.da-controls {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

#da-upload-section,
[data-da-panel="api"] {
  padding: 16px;
}

/* ============================================================
   COLLAPSIBLE SECTIONS  (фильтр / комментарий)
   ============================================================ */

.da-filters-section,
.da-global-comment {
  border-top: 1px solid var(--ink-200);
}

/* Тоггер-заголовок — на десктопе обычный fc-panel-head без интерактива */
.da-toggle-head {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: default;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Chevron — скрыт на десктопе */
.da-toggle-icon {
  display: none;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-400);
  border-bottom: 1.5px solid var(--ink-400);
  border-radius: 1px;
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-top: -3px;
  transition: transform var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
.da-toggle-head[aria-expanded="true"] .da-toggle-icon {
  transform: rotate(-135deg);
  margin-top: 3px;
  border-color: var(--ink-700);
}

/* Тело — всегда раскрыто на десктопе */
.da-collapsible { overflow: hidden; }

.da-filter-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 16px;
}

.da-comment-body {
  padding: 12px 16px 16px;
}

/* ── Мобильный коллапс ── */
@media (max-width: 680px) {

  /* Показываем chevron */
  .da-toggle-icon { display: block; }

  /* Заголовок — кликабельная строка */
  .da-toggle-head {
    cursor: pointer;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ink-150) !important; /* solid вместо dashed */
    -webkit-tap-highlight-color: transparent;
    transition: background var(--dur-2) var(--ease-out);
  }
  .da-toggle-head:active { background: var(--ink-50); }

  /* Убираем badge-стиль у eyebrow внутри тоггера */
  .da-toggle-head .fc-panel-eyebrow {
    background: none;
    padding: 0;
    color: var(--ink-800);
    font-size: var(--fc-fs-sm);
    letter-spacing: 0.05em;
  }

  /* Последняя строка без нижней границы когда свёрнута */
  .da-global-comment .da-toggle-head[aria-expanded="false"] {
    border-bottom: none !important;
  }

  /* Тело — скрыто по умолчанию */
  .da-collapsible { display: none; }
  .da-toggle-head[aria-expanded="true"] + .da-collapsible { display: block; }
}


/* ============================================================
   DROP ZONE
   ============================================================ */

.da-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  margin-top: 14px;
  border: 1.5px dashed var(--ink-300);
  border-radius: var(--fc-r-3);
  background: var(--ink-50);
  text-align: center;
  cursor: default;
  transition: border-color var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out);
  color: var(--ink-400);
}

.da-drop-zone.da-drag-over {
  border-color: var(--lime);
  background: var(--lime-100);
  color: var(--ink-700);
}

.da-drop-label {
  font-size: var(--fc-fs-sm);
  color: var(--ink-500);
  line-height: 1.5;
  margin: 0;
}

.da-pick-btn {
  width: 100%;
}


/* ============================================================
   FILE INFO
   ============================================================ */

.da-file-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--ink-200);
}

.da-file-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--fc-r-2);
  color: var(--ink-500);
}

.da-file-name {
  font-family: var(--font-mono);
  font-size: var(--fc-fs-xs);
  color: var(--ink-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}


/* ============================================================
   ДЕЙСТВИЯ С ДАННЫМИ (общие для XLSX и API)
   ============================================================ */

.da-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
}
.da-actions .fc-btn-primary { flex: 1 1 100%; }
.da-actions .fc-btn-outline,
.da-actions .fc-btn-ghost { flex: 1 1 0; }


/* ============================================================
   SHARE INFO
   ============================================================ */

.da-share-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 16px 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--ink-200);
}

.da-share-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.da-share-input {
  flex: 1;
  font-size: var(--fc-fs-xs) !important;
  padding: 6px 8px !important;
}

.da-share-note {
  font-family: var(--font-mono);
  font-size: var(--fc-fs-xs);
  color: var(--ink-500);
  margin: 0;
}


/* ============================================================
   RESULTS PANEL (right)
   ============================================================ */

.da-results {
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

.da-output {
  flex: 1;
  padding: 0;
}


/* ============================================================
   LOADING & ERROR
   ============================================================ */

.da-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 48px 24px;
  font-family: var(--font-mono);
  font-size: var(--fc-fs-sm);
  color: var(--ink-600);
  justify-content: center;
}

.da-loading .fc-status-dot {
  background: var(--lime);
  animation: fcPulse 1.2s ease-in-out infinite;
}

.da-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px;
  padding: 12px 14px;
  background: #fff1f0;
  border: 1px solid #fbb4ad;
  border-radius: var(--fc-r-2);
  color: #8a1c10;
  font-size: var(--fc-fs-sm);
  line-height: 1.45;
}


/* ============================================================
   AD GROUPS
   ============================================================ */

.da-group-block {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 16px;
  padding: 20px 16px;
  border-bottom: 1px solid var(--ink-150);
}

.da-group-block:last-child {
  border-bottom: none;
}

/* Визуальный порядок колонок задаём через order (в DOM фразы идут первыми ради
   float:right в печати). order учитывается и при grid-авто-раскладке, и при
   одном столбце на мобиле — в отличие от grid-column, который создал бы лишнюю
   колонку. */
.da-ads-column     { order: 1; }
.da-phrases-column { order: 2; }

.da-ads-column {
  min-width: 0;
}

.da-group-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}

.da-group-title {
  font-family: var(--font-display);
  font-size: var(--fc-fs-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-950);
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.da-group-label {
  color: var(--ink-950);
  font-weight: 700;
  background-color: rgba(197, 255, 26, 0.15);
  padding: 2px 6px;
  border-radius: 3px;
}

.da-copyable-id {
  font-family: var(--font-mono);
  font-size: var(--fc-fs-xs);
  color: var(--ink-500);
  cursor: pointer;
  padding: 2px 7px;
  border-radius: var(--fc-r-1);
  border: 1px solid var(--ink-200);
  white-space: nowrap;
  transition: background var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out);
  flex-shrink: 0;
}

.da-copyable-id:hover { background: var(--ink-100); color: var(--ink-700); }

.da-ads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.da-empty-state {
  padding: 32px 16px;
  text-align: center;
  font-size: var(--fc-fs-sm);
  color: var(--ink-500);
}


/* ============================================================
   AD CARD (Яндекс-стиль)
   ============================================================ */

/* Сбрасываем глобальный border-bottom из base.css для всех ссылок внутри карточек */
.da-ad-card a {
  border-bottom: none;
}

.da-ad-card {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--fc-r-3);
  padding: 12px 14px;
  position: relative;
  transition: box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}

.da-ad-card:hover {
  box-shadow: var(--fc-shadow-card-hover);
  border-color: var(--ink-300);
}

.da-ad-id-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-400);
  cursor: pointer;
  display: inline-block;
  margin-bottom: 8px;
  transition: color var(--dur-1) var(--ease-out);
}

.da-ad-id-badge:hover { color: var(--ink-600); }

.da-ad-image-container {
  position: relative;
  margin-bottom: 8px;
}

.da-ad-image-preview {
  max-width: 100%;
  height: auto;
  border-radius: var(--fc-r-2);
  display: block;
  border: 1px solid var(--ink-150);
}

.da-image-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
}

.da-ad-image-container:hover .da-image-actions { display: block; }

.da-btn-change-image {
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(10,10,10,0.65);
  color: var(--white);
  border: none;
  border-radius: var(--fc-r-1);
  padding: 4px 8px;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.da-ad-image-placeholder {
  border: 1.5px dashed var(--ink-200);
  border-radius: var(--fc-r-2);
  padding: 12px;
  text-align: center;
  font-size: var(--fc-fs-xs);
  color: var(--ink-400);
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out);
}

.da-ad-image-placeholder:hover {
  border-color: var(--lime);
  color: var(--ink-600);
}

.da-ad-preview {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.da-ad-title {
  font-family: var(--font-body);
  font-size: var(--fc-fs-md);
  font-weight: 500;
  color: #1a0dab;
  text-decoration: none;
  line-height: 1.3;
}

.da-ad-title:hover { text-decoration: underline; }

.da-ad-text {
  font-size: var(--fc-fs-base);
  color: var(--ink-700);
  line-height: 1.45;
}

.da-ad-link {
  display: block;
  font-size: var(--fc-fs-xs);
  color: #1c6e1c;
  text-decoration: none;
  word-break: break-all;
  margin-top: 2px;
}

.da-ad-sitelinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--ink-100);
}

.da-sitelink {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.da-sitelink-link {
  font-size: var(--fc-fs-xs);
  color: #1a0dab;
  text-decoration: none;
}

.da-sitelink-link:hover { text-decoration: underline; }

.da-sitelink-desc {
  font-size: 10px;
  color: var(--ink-500);
  line-height: 1.3;
}

.da-ad-extensions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.da-extension-tag {
  font-size: 10px;
  color: var(--ink-600);
  background: var(--ink-100);
  border-radius: var(--fc-r-1);
  padding: 2px 7px;
}


/* ============================================================
   KEYWORDS COLUMN
   ============================================================ */

.da-phrases-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.da-phrases-block {
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--fc-r-3);
  overflow: hidden;
}

.da-phrases-block.da-sticky {
  position: sticky;
  top: 80px;
}

.da-phrases-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}

.da-phrases-header h3 {
  font-family: var(--font-mono);
  font-size: var(--fc-fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-700);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.da-phrases-count {
  font-family: var(--font-mono);
  font-size: var(--fc-fs-xs);
  background: var(--lime-100);
  color: var(--accent);
  border-radius: var(--fc-r-1);
  padding: 1px 7px;
}

.da-phrases-toggle {
  font-size: 9px;
  color: var(--ink-400);
  margin-left: 4px;
}

.da-phrases-list-vertical {
  display: flex;
  flex-direction: column;
  padding: 0 12px 10px;
  max-height: 280px;
  overflow-y: auto;
}

.da-phrase-item-vertical {
  font-family: var(--font-mono);
  font-size: var(--fc-fs-xs);
  color: var(--ink-700);
  padding: 5px 0;
  border-bottom: 1px solid var(--ink-150);
  line-height: 1.4;
}

.da-phrase-item-vertical:last-child { border-bottom: none; }

.da-no-phrases {
  font-size: var(--fc-fs-xs);
  color: var(--ink-400);
  font-family: var(--font-mono);
  padding: 8px 0;
}


/* ============================================================
   COMMENT BLOCK (публичный режим)
   ============================================================ */

.da-comment-block {
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--fc-r-3);
  overflow: hidden;
}

.da-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
}

.da-comment-header h3 {
  font-family: var(--font-mono);
  font-size: var(--fc-fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-700);
  margin: 0;
}

.da-save-indicator {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-400);
}

.da-comment-textarea {
  display: block;
  width: 100%;
  border: none;
  border-top: 1px solid var(--ink-200);
  background: var(--white);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: var(--fc-fs-sm);
  color: var(--ink-800);
  resize: vertical;
  min-height: 80px;
  outline: none;
  box-sizing: border-box;
  transition: border-top-color var(--dur-2) var(--ease-out);
}

.da-comment-textarea:focus { border-top-color: var(--lime); }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 860px) {
  .da-group-block {
    grid-template-columns: 1fr;
  }
  .da-phrases-block.da-sticky { position: static; }
}

@media (max-width: 600px) {
  .da-ads-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   PRINT — печатаем только панель результатов (.fc-panel.da-results)
   ============================================================ */

@media print {
  /* Убираем из потока всё, кроме цепочки до панели результатов, чтобы
     содержимое шло от верхней кромки и корректно билось на страницы.
     (visibility оставляет пустоты и ломает разбивку — поэтому display.) */
  body > *:not(#main-content)                  { display: none !important; }
  #main-content .container > *:not(.da-layout) { display: none !important; }
  .da-layout > *:not(#da-results)              { display: none !important; }

  #main-content,
  #main-content .container,
  .da-layout {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* Боковые/нижний отступы гарантируют поля даже когда в диалоге печати выбрано
     «Без полей» (тогда @page margin обнуляется браузером). Верхний padding НЕ
     задаём: он сработал бы только на первом листе и создал бы лишний отступ
     сверху, которого нет на остальных страницах. */
  #da-results {
    display: block;
    margin: 0;
    padding: 0 0.6cm 0.6cm;
    border: none;
    box-shadow: none;
    background: var(--white);
  }

  /* Каждая группа объявлений — с новой страницы (первая остаётся на 1-й).
     Верхний отступ задаём padding-top: padding (в отличие от margin) при разрыве
     страницы сохраняется внутри блока, поэтому отступ появляется на КАЖДОМ листе
     одинаково — в т.ч. когда в диалоге печати выбрано «Поля: Нет». */
  #adsContainer > .da-group-block             { break-before: page; padding-top: 0.7cm; }
  #adsContainer > .da-group-block:first-child { break-before: avoid; }

  /* Несколько кампаний (режим API): каждая карточка кампании печатается
     с новой страницы. В печати убираем рамку/тень/скругление карточки —
     остаётся только шапка-разделитель. Шапка не отрывается от первой группы
     (break-after: avoid), а последующие группы внутри кампании идут каждая
     с новой страницы (как и в одиночном режиме). */
  /* #da-results-префикс поднимает специфичность над экранным правилом
     #adsContainer.da-has-cards (оно ниже по файлу и иначе перебивало бы padding,
     оставляя верхний отступ 16px только на первом листе). */
  #da-results #adsContainer.da-has-cards { display: block; padding: 0; }
  #da-results #adsContainer.da-has-cards > .da-campaign-card {
    break-before: page;
    border: none; box-shadow: none; border-radius: 0; margin: 0; overflow: visible;
  }
  #da-results #adsContainer.da-has-cards > .da-campaign-card:first-child { break-before: avoid; }
  /* Шапку карточки кампании в печати не показываем: кампанию обозначает
     строка «Кампания №N: …» в шапке КАЖДОЙ группы (видна на каждом листе).
     Селекторы с #adsContainer — чтобы перебить экранные правила
     .da-campaign-card-head / .da-group-campaign, которые объявлены НИЖЕ
     по файлу (при равной специфичности побеждало бы последнее). */
  #adsContainer .da-campaign-card-head { display: none; }
  /* Метка кампании — eyebrow в стиле дизайн-системы: моно, капс, разрядка,
     приглушённый цвет. Читается как заголовок секции над группой, не споря
     с лаймовым «Группа объявлений» ниже. */
  #adsContainer .da-group-campaign {
    display: block;
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-500);
    margin-bottom: 9px;
  }
  /* Каждая группа внутри кампании — с новой страницы. Верхний отступ через
     padding-top (сохраняется при разрыве) — одинаковый на каждом листе. */
  .da-campaign-card-body > .da-group-block             { break-before: page; padding-top: 0.7cm; }
  .da-campaign-card-body > .da-group-block:first-child { break-before: avoid; }

  /* Группа — БЛОЧНАЯ раскладка. Двухколоночный CSS-grid на печати
     фрагментируется покомпонентно (фразы остаются на одной странице,
     объявления уезжают на другую), поэтому в печати грид отключаем.
     Колонка объявлений течёт обычным потоком и корректно бьётся на
     страницы; колонка фраз позиционируется абсолютно в правом верхнем
     углу ПЕРВОЙ страницы группы и не уходит на вторую. */
  .da-group-block {
    display: flow-root;   /* содержит плавающую колонку фраз */
    padding: 0;
    border-bottom: none;
  }
  .da-ads-column { padding-right: 0; }

  /* Карточки фиксированной ширины с естественным переносом (inline-block):
     сколько помещается по ширине, столько и встаёт в ряд. Рядом с колонкой
     ключей (float справа) влезает 4, а ниже неё / на листах-продолжении, где
     место свободно, — 5. Карточки НЕ растягиваются на пустое место.
     inline-block переносится и разбивается по страницам как текст. */
  .da-ads-grid {
    display: block;
    font-size: 0;          /* убираем пробелы между inline-block */
    orphans: 1;            /* разрешаем переносить ряды поодиночке — */
    widows: 1;             /* иначе остаются большие пробелы внизу листа */
  }
  .da-ad-card {
    display: inline-block;
    vertical-align: top;
    width: 17.8%;
    margin: 0 1% 6px 0;
    padding: 5px 7px;
    font-size: 7.5px;      /* база вместо обнулённого родителем */
  }
  .da-ad-preview { gap: 1px; }
  .da-group-title { font-size: 11px; }
  .da-ad-title   { font-size: 8.5px; line-height: 1.2; }
  .da-ad-text    { font-size: 7.5px; line-height: 1.25; }
  .da-ad-link    { font-size: 6.5px; }
  .da-ad-sitelinks { gap: 3px; margin-top: 4px; padding-top: 4px; }
  .da-sitelink { gap: 0; }
  .da-sitelink-link { font-size: 6.5px; line-height: 1.2; }
  .da-sitelink-desc { font-size: 6px; line-height: 1.15; }
  .da-ad-extensions { gap: 3px; margin-top: 4px; }
  .da-extension-tag { font-size: 6px; padding: 1px 4px; }

  /* Не разрываем карточки и фразы между страницами: перенос идёт по
     строке, а не сквозь карточку. */
  .da-ad-card,
  .da-phrase-item-vertical { break-inside: avoid; }

  /* Колонка фраз: float:right в правом верхнем углу группы, объявления
     обтекают её слева. Float (в отличие от position:absolute) не ломает
     постраничную разбивку обтекающих рядов. Ограничена по высоте и обрезается;
     в DOM идёт перед колонкой объявлений, поэтому резервирует им место. */
  .da-phrases-column {
    float: right;
    width: 22%;
    max-height: 24cm;
    overflow: hidden;
    margin: 0 0 6px 2.5%;
  }
  .da-phrases-block.da-sticky { position: static; }
  .da-phrases-list-vertical {
    display: flex !important;
    max-height: none;
    overflow: hidden;
    padding: 0 8px 4px;
  }
  .da-phrases-toggle { display: none; }

  /* Очень компактные строки, шрифт вдвое меньше (11px → ~6px). */
  .da-phrase-item-vertical {
    font-size: 6px;
    line-height: 1.2;
    padding: 1px 0;
  }

  /* Блок комментария в печать не выводим. */
  .da-comment-block { display: none !important; }

  /* Изображения объявлений в печати: фиксированное соотношение 16:9 с
     кадрированием (object-fit), чтобы не плющило. */
  .da-ad-image-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: none;
    object-fit: cover;
  }
  .da-ad-image-container { margin-bottom: 4px; }

  /* ── Колонтитул: название кампании + кол-во объявлений вверху КАЖДОГО листа ──
     Реализован через нативные @page margin-box (@top-left / @top-right) — их
     содержимое (динамическое: имя кампании + количество) генерирует JS в
     <style id="da-print-page-style">, см. renderPrintPageStyle() в script.js.
     Браузер сам печатает их в верхнем поле КАЖДОГО листа. DOM-элемент
     .da-print-header в печати не используется и остаётся скрытым. */

  /* Колонтитула больше нет — поля одинаковые со всех сторон. Верхнее поле даёт
     единый зазор сверху на КАЖДОМ листе (padding элементов на разрыве страницы
     браузер отбрасывает, поэтому его не используем). */
  @page { margin: 0.6cm 0.4cm 0.4cm; }
}

/* ============================================================
   Режим загрузки по API Директа
   ============================================================ */
.da-mode {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  background: var(--ink-50);
  border-radius: 10px;
}
.da-mode-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-600);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.da-mode-tab.is-active {
  background: var(--white);
  color: var(--ink-900);
  box-shadow: var(--shadow-1);
}

.da-api-token { margin-top: 16px; margin-bottom: 14px; }
.da-api-token .da-oauth { margin-top: 8px; width: 100%; }

.da-load-campaigns { width: 100%; }

.da-campaigns-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}
.da-campaigns-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-500);
}
.da-campaigns {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 8px;
}
.da-campaign-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--ink-100);
  border-radius: 8px;
  cursor: pointer;
}
.da-campaign-row:hover { border-color: var(--ink-200); }
.da-campaign-name {
  font-size: 13px;
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.da-campaign-state {
  font-size: 11px;
  color: var(--ink-500);
  white-space: nowrap;
}

/* чекбокс-галочка (паттерн yg-check) */
.da-check { position: relative; display: inline-flex; width: 18px; height: 18px; }
.da-check input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.da-check > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink-300);
  border-radius: 5px;
  color: transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.da-check input:checked + span {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink-900);
}

.da-load-ads-foot { margin-top: 14px; }

.da-archive-toggle { margin-bottom: 14px; }

/* ============================================================
   Карточка кампании в просмотре (режим API, >1 кампании)
   ============================================================ */

/* В режиме карточек кампаний внешняя панель результатов перестаёт быть
   карточкой — иначе карточки кампаний оказываются вложены в ещё одну
   карточку (карточка-в-карточке). Сами карточки кампаний дают всё обрамление. */
.da-results.da-results-bare {
  background: none;
  border: none;
  box-shadow: none;
}
.da-results.da-results-bare:hover { box-shadow: none; }

#adsContainer.da-has-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 0 16px;
}
.da-campaign-card {
  overflow: hidden;
}
.da-campaign-card-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-150);
}
.da-campaign-card-name {
  font-family: 'Geologica', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900);
}
.da-campaign-card-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-500);
}

/* Метка «Кампания №N: …» в шапке группы — нужна только для печати,
   на экране кампанию обозначает шапка карточки. */
.da-group-campaign { display: none; }

.svc-final { display: none; }