/* ==========
   General iT — DNS Monitor
   Унификация с прошлой разработкой
   Версия: 2025-10-02-compact-trace+mobile
   ========== */

:root{
  --gm-bg: #ffffff;
  --gm-fg: #0f172a;
  --gm-muted: #64748b;
  --gm-soft: #94a3b8;
  --gm-border: #e2e8f0;
  --gm-border-2: #f1f5f9;
  --gm-accent: #1D7990;
  --gm-accent-2: #2aa1bd;
  --gm-good: #16a34a;
  --gm-warn: #d97706;
  --gm-bad:  #dc2626;
  --gm-shadow: 0 10px 25px rgba(2, 6, 23, .08);
}

/* Ограничение ширины секций на десктопе */
.gm-page{ width:100%; }
@media (min-width: 1024px){
  .gm-page{
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Карточка-секция */
.gm-container{
  background: var(--gm-bg);
  color: var(--gm-fg);
  padding: 24px 20px;
  border-radius: 16px;
  box-shadow: var(--gm-shadow);
  overflow: hidden;
}

/* Заголовки */
.gm-title{
  font-size: 28px; line-height:1.2; margin:0 0 8px;
}
.gm-subtitle{
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* SEO-описание */
.gm-lead{
  margin: 0;
  color: var(--gm-muted);
  max-width: none;          /* на всю ширину */
  text-align: justify;
}

/* Блок с описанием (SEO) — увеличенный отступ вниз */
.gm-hero{
  margin-bottom: 32px;
}

/* Форма запроса (функционал) — увеличенный отступ вниз */
.gm-form{
  margin: 18px 0 32px;
  background: var(--gm-bg);
  border: 1px solid var(--gm-border);
  border-radius: 16px;
  box-shadow: var(--gm-shadow);
  padding: 16px;
}
.gm-label{ display:block; font-size:14px; color: var(--gm-muted); margin-bottom:6px; }

/* Строка ввода */
.gm-input-row{ display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
.gm-input-row input{
  flex:1; min-width: 240px;
  border:1px solid var(--gm-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  outline: none;
  transition: box-shadow .2s, border-color .2s, background .2s;
  background:#fff; color:#0f172a;
}
.gm-input-row input:focus{
  border-color: var(--gm-accent);
  box-shadow: 0 0 0 4px rgba(29,121,144,.12);
}

/* Кнопки */
.gm-btn{
  position: relative;
  border: none;
  background: var(--gm-accent);
  color: #fff;
  border-radius: 12px;
  padding: 0 18px;
  font-size: 16px;
  cursor: pointer;
  min-width: 136px;
  height: 44px;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .2s, transform .1s, opacity .2s;
}
.gm-btn:hover{ background: var(--gm-accent-2); }
.gm-btn:active{ transform: translateY(1px); }
.gm-btn[disabled]{ opacity:.7; cursor:not-allowed; }

/* ВАЖНО: .loading больше НЕ блокирует клики, только слегка меняет вид и показывает спиннер */
.gm-btn.loading{ opacity:.95; }
.gm-btn.loading::after{
  content:"";
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.6);
  border-top-color:#fff;
  animation: gm-spin .8s linear infinite;
  position:absolute; right:12px;
}
@keyframes gm-spin{ to{ transform:rotate(360deg);} }

/* Вторичная кнопка */
.gm-btn--ghost{
  background: #f8fdff;
  color: var(--gm-accent);
  border:1px solid var(--gm-border);
}
.gm-btn--ghost:hover{
  background: #eefaff;
}

/* Опции (чекбоксы) */
.dnsmon-optrow{
  display:flex; gap:20px; margin-top:10px; flex-wrap:wrap;
  color: var(--gm-muted); font-size:14px;
}
.dnsmon-check input{ margin-right:6px; }

/* Статусы/ошибки */
.dnsmon-status{ margin-top:10px; font-size:14px; color:var(--gm-muted); min-height: 20px; }
.dnsmon-status.is-error{ color: var(--gm-bad); }
.dnsmon-status.is-warn{ color: var(--gm-warn); }
.dnsmon-status.is-ok{ color: var(--gm-good); }

/* Прогресс-бар этапов */
.dnsmon-progress{
  position: relative;
  width:100%;
  height:10px; margin-top:10px;
  background: #f0f6fa;
  border-radius: 999px; overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(2,6,23,.06);
  display:none;
}
.dnsmon-progress.active{ display:block; }
.dnsmon-progress__bar{
  position:absolute; left:0; top:0; height:100%; width:0%;
  background: linear-gradient(90deg, var(--gm-accent), var(--gm-accent-2));
  transition: width .35s ease;
}
.dnsmon-progress__label{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:8px; font-size:13px; color:var(--gm-muted);
}
.dnsmon-phase{ font-weight:600; color:#0f172a; }
.dnsmon-percent{ color: var(--gm-muted); }

/* Внешние табы результатов */
.dnsmon-tabs{
  display:flex; gap:8px; flex-wrap:wrap;
  position: sticky; top:0; z-index:2;
  background:#fff; padding:6px;
  border:1px solid var(--gm-border);
  border-radius:12px; box-shadow: var(--gm-shadow);
  margin-top:16px;
}
.dnsmon-tab{
  border:1px solid var(--gm-border);
  background:#fff; color:#0f172a;
  padding:8px 12px; border-radius:10px; font-size:14px; cursor:pointer;
  transition: background .2s, border-color .2s, color .2s, transform .1s;
}
.dnsmon-tab:hover{ border-color: var(--gm-accent); color: var(--gm-accent); }
.dnsmon-tab:active{ transform: translateY(1px); }
.dnsmon-tab.active{
  background: #f2fbff; border-color: var(--gm-accent);
  color: var(--gm-accent); box-shadow: inset 0 0 0 1px rgba(29,121,144,.12);
}
.dnsmon-panels{ margin-top:12px; }

/* Карточка результата
   ВАЖНО: делаем overflow:auto для мобильных — чтобы таблицы НЕ вылезали за край */
.dnsmon-card{
  border:1px solid var(--gm-border);
  border-radius:16px; background:#fff;
  box-shadow: var(--gm-shadow);
  padding:16px;
  overflow: auto;          /* ← добавлено для мобильных */
}
.hidden{ display:none !important; }

/* Таблицы (dnsmon-table) */
.dnsmon-table{
  width:100%; border-collapse:separate; border-spacing:0; font-size:14px; color:#0f172a;
  min-width: 680px;          /* на узких экранах карточка прокрутится горизонтально */
}
.dnsmon-table thead th{
  position: sticky; top:0; z-index:1;
  background:#fbfdff; border-bottom:1px solid var(--gm-border);
  text-align:left; padding: 12px; font-size:13px; color: var(--gm-muted);
}
.dnsmon-table tbody td{
  padding: 12px; border-bottom:1px solid var(--gm-border-2); vertical-align: top;
  word-break: break-word;
}
.dnsmon-table tbody tr:last-child td{ border-bottom: none; }

/* Кнопка копирования */
.copy-btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:6px 10px; border:1px solid var(--gm-border); border-radius:10px; font-size:13px;
  background:#fff; transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.copy-btn:hover{ background:#f7fcff; border-color: var(--gm-accent); }
.copy-btn.success{ background:#f0fff4; border-color:#bbf7d0; color: var(--gm-good); }

/* ДОБАВЛЕНО: поддержка состояния .copied (если скрипт использует именно его) */
.copy-btn.copied{
  background:#16a34a; border-color:#16a34a; color:#fff;
  box-shadow: 0 6px 18px rgba(22,163,74,.28);
}
.copy-btn.copied::after{
  content:"✓"; font-weight:700;
}

/* Внутренние табы типов записей */
.dnsrec-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin: 6px 0 10px; }
.dnsrec-tab{
  border:1px solid var(--gm-border); background:#fff; color:#0f172a;
  border-radius: 999px; padding: 8px 12px; font-size: 13px; cursor:pointer;
  transition: border .2s, background .2s, color .2s;
}
.dnsrec-tab:hover{ border-color: var(--gm-accent); color: var(--gm-accent); }
.dnsrec-tab.active{ border-color: var(--gm-accent); background: rgba(29,121,144,.08); color: var(--gm-accent); }
.dnsrec-pane{ display:none; }
.dnsrec-pane.active{ display:block; }

/* Скелетон */
.dnsrec-skeleton{ display:grid; gap:8px; }
.dnsrec-skel-row{
  height: 44px; border-radius: 10px; background: linear-gradient( 90deg, #f3f6f9 25%, #e9eef5 37%, #f3f6f9 63%);
  animation: dnsrec-shimmer 1.2s infinite;
  border:1px solid var(--gm-border-2);
}
@keyframes dnsrec-shimmer{
  0%{ background-position: -200px 0; }
  100%{ background-position: calc(200px + 100%) 0; }
}

/* Делегация (как было) */
.dnsmon-delegation{ display:grid; gap:12px; margin-top:8px; }
.delegation-step{ padding:12px; border:1px solid var(--gm-border); border-radius:12px; background:#fff; }
.delegation-step .step-title{ font-weight:700; margin-bottom:6px; }
.delegation-step .step-body{ color: var(--gm-muted); line-height:1.5; }

/* ===== ДОБАВЛЕНО: Компактная трассировка ===== */
.trace-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  min-width: 520px;          /* на мобилках карточка скроллится */
}
.trace-table thead th{
  text-align: left;
  font-weight: 600;
  color: #555b66;
  border-bottom: 1px solid var(--gm-border);
  padding: 10px 12px;
  background: #fafbfc;
  position: sticky;
  top: 0;
  z-index: 1;
}
.trace-table td{
  padding: 8px 12px;
  border-bottom: 1px solid var(--gm-border-2);
  vertical-align: middle;
}
.trace-row:hover td{ background: #fbfdff; }
.trace-row--gap td{ color: #a0a6b3; font-style: italic; }
.trace-host{
  max-width: 520px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.muted{ color: #8b8f99; }

/* Кнопка и блок «сырого вывода» */
.trace-raw-toggle{
  margin-top: 12px;
  border: 1px dashed var(--gm-border);
  background: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  transition: background .2s ease, border-color .2s ease;
}
.trace-raw-toggle:hover{ background: #f7faff; border-color: #b7c2d8; }
.trace-raw{
  margin-top: 10px;
  padding: 12px;
  background: #0f172a;
  color: #e5e7eb;
  border-radius: 12px;
  max-height: 240px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.45;
}

/* Сообщения */
.dnsmon-msg{
  padding: 10px 12px; border-radius: 10px; border:1px solid var(--gm-border); background:#fff; font-size:14px; color: var(--gm-muted);
}
.dnsmon-msg--info{ border-color: var(--gm-accent); background:#ecfeff; color:#083344; }

/* FAQ — увеличенный отступ сверху */
.gm-faq{
  margin-top: 36px;
  padding: 16px 14px;
  border:1px solid var(--gm-border); border-radius:14px; background:#fff;
  box-shadow: var(--gm-shadow);
}
.gm-faq .gm-subtitle{ margin: 0 0 12px; font-size: 22px; }
.faq-list{ margin:0; padding:0; }
.faq-item{ border-top:1px solid var(--gm-border-2); }
.faq-item:first-child{ border-top:none; }
.faq-q{
  list-style:none; cursor:pointer; position:relative;
  font-size:17px; padding:14px 36px 14px 6px; margin:0;
  transition: color .2s, background .2s;
}
.faq-item[open] .faq-q{ color: var(--gm-accent); background:#f7fcff; }
.faq-q::after{
  content:""; position:absolute; right:8px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--gm-muted); border-bottom:2px solid var(--gm-muted);
  transform: translateY(-50%) rotate(45deg);
  transition: transform .22s, border-color .22s;
}
.faq-item[open] .faq-q::after{ transform: translateY(-50%) rotate(-135deg); border-color: var(--gm-accent); }
.faq-a{ padding: 0 6px 12px 6px; color: var(--gm-fg); animation: gm-ans .22s ease; }
@keyframes gm-ans{ from{opacity:0; transform: translateY(-4px);} to{opacity:1; transform: translateY(0);} }

/* Адаптивные мелочи */
@media (max-width: 840px){
  .trace-host{ max-width: 100%; }
  .dnsmon-tabs{ position: static; }
}