/* vpn.css — панель VPN-теста 1-в-1 с bsbord (vpn2a / bs4-cmd-top), но в наших
   синих токенах. Слева поле конфига, справа блок стоимости; ниже — выбор ядра
   xray через bs-seg и список сохранённых ключей. Все id формы прежние —
   vpn.js читает те же vpn-uri/vpn-title/vpn-note/vpn-add/vpn-list. Грузится
   после scan.css (переменные --s-* берём оттуда же). */

.vpn2a { display: grid; gap: 4px; }

.vpn2a .bs4-cmd {
  border: 1px solid var(--s-line, rgba(140,170,210,.14));
  background: var(--s-surface, #0e1422);
  border-radius: 14px; box-shadow: 0 1px 2px #00000059; padding: 16px;
}
.vpn2a .bs4-cmd-top {
  display: grid; grid-template-columns: minmax(0, 1fr) 240px;
  gap: 16px; align-items: stretch;
}
.vpn2a .bs4-cmd-side {
  border-left: 1px solid var(--s-line-soft, rgba(140,170,210,.08));
  padding-left: 16px; display: flex; flex-direction: column;
  justify-content: space-between; gap: 10px;
}
.vpn2a .bs4-cmd-meta {
  color: var(--s-muted, #8a97b8); font: 600 10.5px var(--mono), monospace;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.vpn2a .bs4-cmd-price {
  font: 700 24px var(--mono), monospace; color: var(--s-accent-br, #7fb0ff);
  margin-top: 2px;
}
.vpn2a .bs4-cmd-price .u {
  font-size: 12px; color: var(--s-muted, #8a97b8); font-weight: 500; margin-left: 4px;
}

.vpn2a .ts-form-label {
  color: var(--s-muted, #8a97b8); font: 600 11px Inter, system-ui, sans-serif;
}
.vpn2a .bs-row.between { display: flex; align-items: center; justify-content: space-between; }

/* поле конфига — тот же bs-input, что на сканере */
.vpn2a .bs-input {
  width: 100%; box-sizing: border-box; background: var(--s-deep, #0a0e17);
  border: 1px solid var(--s-line, rgba(140,170,210,.14)); border-radius: 9px;
  color: var(--s-fg, #e8eefc); padding: 8px 11px;
  font: 12.5px var(--mono), ui-monospace, monospace; outline: none; resize: vertical;
  min-height: 64px;
}
.vpn2a .bs-input:focus { border-color: var(--s-accent, #4f8cff); box-shadow: 0 0 0 3px rgba(79,140,255,.18); }
.vpn2a .bs-input::placeholder { color: var(--s-muted-2, #5e6b8a); }
.vpn2a .bs-hint { color: var(--s-muted, #8a97b8); font-size: 11.5px; margin-top: 6px; }

/* поля «название / заметка» */
.vpn2a .vpn2a-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.vpn2a .vpn2a-meta .bs-input { min-height: 0; padding: 8px 11px; }

/* кнопка запуска — как ts-btn primary у них */
.vpn2a #vpn-add {
  width: 100%; border: 1px solid transparent; border-radius: 9px;
  background: linear-gradient(135deg, var(--s-accent-br, #7fb0ff), var(--s-accent-deep, #2a5bd0));
  color: #061024; font: 650 13px Inter, system-ui, sans-serif; padding: 9px 0; cursor: pointer;
  box-shadow: 0 6px 18px -5px var(--s-accent-glow, rgba(79,140,255,.35));
}
.vpn2a #vpn-add:hover { filter: brightness(1.05); }
.vpn2a #vpn-add:disabled { opacity: 0.45; cursor: default; box-shadow: none; filter: none; }

/* поле «Ядро xray» — bs-seg */
.vpn2a .bs4-field { margin-top: 15px; }
.vpn2a .bs4-field-label {
  color: var(--s-muted, #8a97b8); font: 600 10.5px var(--mono), monospace;
  text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px;
}
.vpn2a .bs-seg {
  display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--s-line, rgba(140,170,210,.14));
  border-radius: 9px; background: var(--s-deep, #0a0e17);
}
.vpn2a .bs-seg button {
  border: 0; border-radius: 7px; background: transparent; color: var(--s-muted, #8a97b8);
  padding: 5px 13px; font: 550 12px Inter, system-ui, sans-serif; cursor: pointer;
}
.vpn2a .bs-seg button:hover { color: var(--s-fg-dim, #c4d0ea); }
.vpn2a .bs-seg button.active { background: var(--s-surface, #0e1422); color: var(--s-fg, #e8eefc); box-shadow: 0 1px 2px #0006; }

/* список сохранённых ключей */
.vpn2a .vpn2a-list { margin-top: 4px; }
.vpn2a .bs-empty { color: var(--s-muted-2, #5e6b8a); font-size: 12.5px; padding: 6px 0; }

@media (max-width: 860px) {
  .vpn2a .bs4-cmd-top { grid-template-columns: 1fr; gap: 12px; }
  .vpn2a .bs4-cmd-side { border-left: none; padding-left: 0; border-top: 1px solid var(--s-line-soft, rgba(140,170,210,.08)); padding-top: 12px; }
  .vpn2a .vpn2a-meta { grid-template-columns: 1fr; }
}