/* scan.css — панель «Проверка» 1-в-1 с bsbord (bs4-cmd / bs4-checkout), но в
   наших синих токенах. Структура и имена классов повторяют их фронт: шапка
   ts-page-head с переключателем bs-seg, командная карточка bs4-cmd, внутри —
   сетка bs4-checkout (цель+пробы слева, липкий «Запуск» справа, операторы во всю
   ширину снизу). Пробы — чипы bs-chip поверх прежних radio (id формы не тронуты,
   scan.js читает те же input[name=method]). Грузится после console.css. */

.scan-wrap {
  /* синий акцент вместо зелёного оригинала */
  --s-accent: #4f8cff;
  --s-accent-br: #7fb0ff;
  --s-accent-deep: #2a5bd0;
  --s-accent-soft: rgba(79, 140, 255, 0.12);
  --s-accent-glow: rgba(79, 140, 255, 0.35);
  --s-surface: #0e1422;
  --s-deep: #0a0e17;
  --s-line: rgba(140, 170, 210, 0.14);
  --s-line-soft: rgba(140, 170, 210, 0.08);
  --s-fg: #e8eefc;
  --s-fg-dim: #c4d0ea;
  --s-muted: #8a97b8;
  --s-muted-2: #5e6b8a;
}

/* скрытая подпись поля цели (лейбл переехал в placeholder/шапку) */
.scan-wrap .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── шапка раздела ───────────────────────────────────────────────────────── */
.ts-page-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--s-line-soft);
  padding-bottom: 14px; margin-bottom: 18px;
}
.ts-page-head h1 {
  font-size: clamp(1.15rem, 2.4vw, 1.35rem); font-weight: 700;
  line-height: 1.1; letter-spacing: -0.015em; color: var(--s-fg);
}
.ts-page-sub { color: var(--s-muted); font-size: 12.5px; margin-top: 4px; }
.ts-page-actions { display: flex; align-items: center; gap: 8px; }

/* ── переключатель IP/домен · CIDR ──────────────────────────────────────── */
.bs-seg {
  display: inline-flex; gap: 2px; padding: 2px;
  border: 1px solid var(--s-line); border-radius: 9px; background: var(--s-deep);
}
.bs-seg button {
  border: 0; border-radius: 7px; background: transparent; color: var(--s-muted);
  padding: 5px 13px; font: 550 12px Inter, system-ui, sans-serif; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.bs-seg button:hover { color: var(--s-fg-dim); }
.bs-seg button.active {
  background: var(--s-surface); color: var(--s-fg); box-shadow: 0 1px 2px #0006;
}

/* ── командная карточка ─────────────────────────────────────────────────── */
.bs4-cmd {
  border: 1px solid var(--s-line); background: var(--s-surface);
  border-radius: 14px; box-shadow: 0 1px 2px #00000059; padding: 16px;
}
.bs4-checkout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px; align-items: start;
}
.bs4-checkout > .bs4-main { min-width: 0; display: grid; gap: 4px; }
.bs4-checkout > .ops-wide { grid-column: 1 / -1; margin-top: 4px; }

/* поле ввода целей */
.bs-input {
  width: 100%; box-sizing: border-box; background: var(--s-deep);
  border: 1px solid var(--s-line); border-radius: 9px; color: var(--s-fg);
  padding: 8px 11px; font: 13px var(--mono), ui-monospace, monospace;
  outline: none; resize: vertical; min-height: 66px;
}
.bs-input:focus {
  border-color: var(--s-accent);
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.18);
}
.bs-input::placeholder { color: var(--s-muted-2); }
.bs-hint { color: var(--s-muted); font-size: 11.5px; margin-top: 6px; }

/* ── поле цели: премиальная карточка с шапкой, свечением и счётчиком ─────── */
.target-field { display: grid; gap: 9px; }
.target-field__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.target-field__head .bs4-field-label { margin: 0; }
.target-field__kind {
  font: 700 9.5px var(--mono), monospace; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--s-accent-br); background: var(--s-accent-soft, rgba(79,140,255,.12));
  border: 1px solid rgba(79,140,255,.32); border-radius: 999px; padding: 3px 10px;
  animation: shell-rise 0.25s ease both;
}
/* Карточка ввода: мягкий градиент, иконка-мишень слева, свечение в фокусе. */
.target-field__box {
  position: relative; display: flex; align-items: stretch;
  border: 1px solid var(--s-line); border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(79,140,255,0.06), transparent 55%),
    var(--s-deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 2px 10px rgba(0,0,0,0.18);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  overflow: hidden;
}
.target-field__box::before {
  /* тонкая акцентная полоса слева — «активная» цель */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--s-accent-br), var(--s-accent-deep));
  opacity: 0; transition: opacity 0.18s ease;
}
.target-field__box:hover { border-color: rgba(140,170,210,0.26); }
.target-field__box:focus-within {
  border-color: var(--s-accent);
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.16), 0 6px 22px -8px var(--s-accent-glow, rgba(79,140,255,.35));
}
.target-field__box:focus-within::before { opacity: 1; }
/* иконка-мишень в левом отступе */
.target-field__box::after {
  content: ""; position: absolute; left: 15px; top: 15px; width: 15px; height: 15px;
  background: var(--s-muted-2);
  -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3Cpath d='M10 1v3M10 16v3M1 10h3M16 10h3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3Cpath d='M10 1v3M10 16v3M1 10h3M16 10h3'/%3E%3C/svg%3E");
  opacity: 0.55; transition: background 0.18s ease; pointer-events: none;
}
.target-field__box:focus-within::after { background: var(--s-accent-br); opacity: 0.9; }
/* textarea внутри — без своей рамки/фона, всё несёт обёртка */
.target-field__area {
  border: 0 !important; box-shadow: none !important; background: transparent !important;
  border-radius: 14px; min-height: 108px; padding: 14px 16px 14px 40px; resize: vertical;
  line-height: 1.55; font-size: 13.5px; flex: 1; min-width: 0;
}
.target-field__area:focus { box-shadow: none; }
.target-field__area::placeholder { color: var(--s-muted-2); opacity: 0.85; }
.target-field__count {
  position: absolute; right: 10px; bottom: 9px;
  font: 700 10px var(--mono), monospace; letter-spacing: 0.04em;
  color: var(--s-accent-br);
  background: var(--s-accent-soft, rgba(79,140,255,.12));
  border: 1px solid rgba(79,140,255,.3);
  border-radius: 999px; padding: 2px 9px; pointer-events: none;
}

/* ── быстрый ввод: чипы-примеры под полем цели ──────────────────────────── */
.target-examples {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 2px;
}
.target-examples__lbl {
  font: 600 9.5px var(--mono), monospace; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--s-muted-2); margin-right: 2px;
}
.target-chip {
  font: 500 11.5px var(--mono), monospace; color: var(--s-fg-dim);
  background: var(--s-deep); border: 1px solid var(--s-line);
  border-radius: 8px; padding: 4px 10px; cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.target-chip:hover {
  border-color: var(--s-accent); color: var(--s-accent-br);
  background: var(--s-accent-soft, rgba(79,140,255,.10));
}
.target-chip--clear {
  margin-left: auto; color: var(--s-muted); font-family: Inter, system-ui, sans-serif;
}
.target-chip--clear:hover { border-color: rgba(255,120,140,.5); color: #ff8a9b; background: transparent; }

/* ── поле «Пробы» + прочие поля ─────────────────────────────────────────── */
.bs4-field { margin-top: 15px; }
.bs4-field-label {
  color: var(--s-muted); font: 600 10.5px var(--mono), monospace;
  text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px;
}
.bs4-ops-line { display: flex; flex-wrap: wrap; gap: 6px; }

/* Пробы-чипы: label оборачивает скрытый radio (scan.js читает input[name=method]) */
.scan-wrap .ping-method {
  border: 0; background: transparent; padding: 0; margin: 0; min-width: 0;
}
.scan-wrap .ping-method__legend { display: none; }
.scan-wrap .ping-method__opts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.scan-wrap .ping-method__opt {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px;
  border: 1px solid var(--s-line); border-radius: 9px; background: var(--s-deep);
  color: var(--s-fg-dim); padding: 6px 11px;
  font: 500 12px Inter, system-ui, sans-serif; white-space: nowrap;
  cursor: pointer; user-select: none; transition: all 0.12s ease;
}
.scan-wrap .ping-method__opt:hover { border-color: var(--s-muted-2); }
.scan-wrap .ping-method__opt:has(input:checked) {
  border-color: var(--s-accent); color: var(--s-fg);
  background: color-mix(in oklab, var(--s-accent) 10%, var(--s-surface));
}
.scan-wrap .ping-method__opt input { position: absolute; opacity: 0; pointer-events: none; }
.scan-wrap .ping-method__addon { color: var(--s-muted); font-size: 10px; font-weight: 600; margin-left: 2px; }
.scan-wrap .ping-method__opt:has(input:checked) .ping-method__addon { color: var(--s-accent-br); }
.scan-wrap .ping-method__opt:has(input:disabled) { opacity: 0.35; cursor: not-allowed; }
.scan-wrap .ping-method--locked .ping-method__opt:has(input:not(:checked)) { display: none; }
.scan-wrap .ping-method__note { color: var(--s-muted); font-size: 11px; margin-top: 8px; }

/* поле SNI-имён под галки TLS-SNI / Multi-SNI */
.scan-wrap .sni-hosts { margin-top: 10px; display: grid; gap: 4px; animation: shell-rise 0.25s ease both; }
.scan-wrap .sni-hosts[hidden] { display: none; }
.scan-wrap .bs-input--sni { min-height: 0; padding: 8px 11px; }

/* ── правый липкий «Запуск» ─────────────────────────────────────────────── */
.bs4-launch {
  position: sticky; top: 0;
  border-left: 1px solid var(--s-line-soft); padding-left: 16px;
  display: flex; flex-direction: column;
}
.bs4-launch-title {
  font: 600 10.5px var(--mono), monospace; color: var(--s-muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px;
}
.bs4-launch .lab-hint { margin: 0; font-size: 11.5px; color: var(--s-muted); }
.bs4-launch__actions { display: grid; gap: 8px; margin-top: 14px; }

/* стоимость: крупный моно-ценник как у bsbord */
.launch-price { margin-bottom: 12px; }
.launch-price__val {
  font: 700 26px var(--mono), monospace; color: var(--s-accent-br, #7fb0ff);
  line-height: 1;
}
.launch-price__val .u { font-size: 12px; color: var(--s-muted, #8a97b8); font-weight: 500; margin-left: 5px; }
.launch-price__meta {
  color: var(--s-muted, #8a97b8); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.05em; margin-top: 4px;
}

/* смета: цели / операторы / проверки / пробы */
.launch-facts {
  display: grid; gap: 0; margin: 0 0 14px; padding: 10px 0;
  border-top: 1px solid var(--s-line-soft, rgba(140,170,210,.08));
  border-bottom: 1px solid var(--s-line-soft, rgba(140,170,210,.08));
}
.launch-facts > div {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 3px 0;
}
.launch-facts dt { color: var(--s-muted, #8a97b8); font-size: 11.5px; }
.launch-facts dd {
  margin: 0; font: 600 12.5px var(--mono), monospace; color: var(--s-fg, #e8eefc);
}

/* основная кнопка запуска */
.scan-wrap .ts-btn.primary,
.scan-wrap #run-btn {
  width: 100%; border: 1px solid transparent; border-radius: 9px;
  background: linear-gradient(135deg, var(--s-accent-br), var(--s-accent-deep));
  color: #061024; font: 650 13.5px Inter, system-ui, sans-serif;
  padding: 10px 0; cursor: pointer;
  box-shadow: 0 6px 18px -5px var(--s-accent-glow);
  transition: box-shadow 0.12s ease, filter 0.12s ease;
}
.scan-wrap #run-btn:hover { box-shadow: 0 9px 26px -5px var(--s-accent-glow); filter: brightness(1.04); }
.scan-wrap #run-btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; filter: none; }
.scan-wrap #stop-scan-btn {
  width: 100%; border-radius: 9px; border: 1px solid rgba(255, 120, 140, 0.4);
  background: transparent; color: #ff8a9b; padding: 9px 0; cursor: pointer;
  font: 600 13px Inter, system-ui, sans-serif;
}
.scan-wrap #stop-scan-btn:hover { background: rgba(255, 120, 140, 0.12); }

/* операторы во всю ширину: ops2b уже стилизован своим файлом. Даём воздуха —
   отступ сверху и минимальную высоту, чтобы блок не был приплюснут. */
.ops-wide { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--s-line-soft); }
.ops-wide .bs4-field-label { margin-bottom: 12px; }
.ops-wide .agent-picks { min-height: 120px; }
.ops-wide .ops2b { padding: 18px; }
.ops-wide .ops2b-ops { gap: 8px; }
.ops-wide .ops2b-op { padding: 7px 10px 7px 7px; }

/* ── адаптив: колонки складываются, «Запуск» перестаёт липнуть ──────────── */
@media (max-width: 860px) {
  .bs4-checkout { grid-template-columns: 1fr; gap: 14px; }
  .bs4-launch {
    position: static; border-left: none; padding-left: 0;
    border-top: 1px solid var(--s-line-soft); padding-top: 12px;
  }
}

/* ── светлая тема ───────────────────────────────────────────────────────── */
body.theme-light .scan-wrap {
  --s-surface: #ffffff; --s-deep: #f5f7fb; --s-line: #d5dce4;
  --s-line-soft: #e3e8ee; --s-fg: #16202b; --s-fg-dim: #3a4650;
  --s-muted: #64707c; --s-muted-2: #93a0ad;
}