/* Компоненты: меню языка, формы, кнопки, карточки, модалка, тосты, результаты, гайд. Mobile-first. */

@layer components {
/* ─── language switch — ghost-кнопка с hairline-бордером ─── */
.lang-switch { position: relative; }
.lang-trigger {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px 10px; border-radius: var(--r-md); cursor: pointer;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--text-2);
  border: 1px solid var(--border);
  background: transparent;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.lang-trigger:hover { color: var(--text-1); background: var(--surface-2); border-color: var(--border-strong); }
.lang-flag { font-size: 14px; line-height: 1; }
.lang-caret {
  width: 14px; height: 14px; color: var(--text-3);
  transition: transform var(--t-fast) var(--ease);
}
.lang-trigger[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + var(--sp-2)); z-index: 60;
  list-style: none; margin: 0; padding: var(--sp-1); min-width: 168px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--inset-hairline);
  /* появление от точки вызова: scale от правого верхнего угла + фейд, 160ms */
  transform-origin: top right;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease),
    display 160ms allow-discrete;
}
.lang-menu[hidden] { display: none; opacity: 0; transform: scale(0.95); }
@starting-style { .lang-menu:not([hidden]) { opacity: 0; transform: scale(0.95); } }
.lang-menu li { margin: 0; }
.lang-menu button {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  padding: var(--sp-2) 10px; border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: transparent; color: var(--text-2); font-family: var(--font-ui); font-size: 13px;
  text-align: left; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lang-menu button:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-1); }
.lang-menu button[aria-selected="true"] { color: var(--text-1); }
.lang-check { margin-left: auto; width: 14px; height: 14px; color: var(--accent); visibility: hidden; }
.lang-menu button[aria-selected="true"] .lang-check { visibility: visible; }

/* ─── карточка-контейнер контента (бывший bento) — тихая, без свечений ─── */
.form-card { padding: 0; }

/* элементы, появляющиеся после успешной проверки ключа — мягкий фейд */
#activate-submit:not(.hidden),
#force-field:not(.hidden),
#reuse-note:not(.hidden) { animation: fade var(--t-med) var(--ease); }

/* re-send note (для использованных ключей) */
.reuse-note {
  margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-1); border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  color: var(--text-2); font-size: 13px; line-height: 1.5;
}
.hint #help-sk { cursor: pointer; }

/* force-recharge opt-in: кастомный чекбокс 16px */
.force-recharge {
  display: flex; align-items: flex-start; gap: 10px;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-1); border: 1px solid var(--border);
  color: var(--text-2); font-size: 13px; line-height: 1.5; cursor: pointer;
}

/* инфо-плашка (например, предупреждение о force-пополнении GPT) */
.note-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--warn) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
  color: var(--text-2); font-size: 13px; line-height: 1.5;
}
.note-card svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--warn); }
.note-card:not(.hidden) { animation: fade var(--t-med) var(--ease); }

/* чекбокс: галочка прорисовывается stroke-dashoffset'ом (~160ms) */
.force-recharge .cb { position: relative; flex: none; width: 16px; height: 16px; margin-top: 2px; }
.force-recharge input {
  appearance: none; -webkit-appearance: none;
  position: absolute; inset: 0; width: 16px; height: 16px; margin: 0;
  border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--surface-2); cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.force-recharge input:checked { background: var(--accent); border-color: var(--accent); }
.force-recharge .cb svg {
  position: absolute; inset: 0; margin: auto; width: 11px; height: 11px;
  color: var(--on-accent); pointer-events: none;
}
.force-recharge .cb svg path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 160ms var(--ease) 40ms;
}
.force-recharge input:checked + svg path { stroke-dashoffset: 0; }

/* ─── X Premium — bookmarklet widget: тихая карточка, ghost-кнопки ─── */
.x-guide {
  margin: 0; padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-1); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.x-guide-head { font-size: 13px; font-weight: 600; color: var(--text-1); }
.x-guide-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.x-bm, .x-copy {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-md); font-size: 13px; font-weight: 500;
  font-family: var(--font-ui); line-height: 1; text-decoration: none;
  color: var(--text-2); background: transparent; border: 1px solid var(--border);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.x-bm { cursor: grab; }
.x-bm:active { cursor: grabbing; }
.x-copy { cursor: pointer; }
/* «Копировать скрипт»: иконка copy ↔ check (после копирования — на 1.2s) */
.x-copy .swap { position: relative; width: 14px; height: 14px; flex: none; }
.x-copy .swap .icon {
  position: absolute; inset: 0; width: 14px; height: 14px;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.x-copy .ic-check { opacity: 0; transform: scale(0.5); color: var(--ok); }
.x-copy[data-copied] .ic-check { opacity: 1; transform: none; }
.x-copy[data-copied] .ic-copy { opacity: 0; transform: scale(0.5); }
.x-bm:hover, .x-copy:hover { color: var(--text-1); background: var(--surface-2); border-color: var(--border-strong); }
/* Кнопки внутри шагов гайда — на своей строке под текстом */
.x-step-btn { display: block; margin-top: var(--sp-2); }
.x-guide-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-3); }
.x-guide-note a {
  color: var(--text-2); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--border-strong); white-space: nowrap;
}
.x-guide-note a:hover { color: var(--text-1); }

/* ─── sessionKey help — лайтбокс со скриншотом: фейд + лёгкий scale, 160ms ─── */
.sk-pop {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-6);
  background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px);
  transition: opacity 160ms var(--ease), display 160ms allow-discrete;
}
.sk-pop.hidden { opacity: 0; }
@starting-style { .sk-pop:not(.hidden) { opacity: 0; } }
.sk-pop-img {
  max-width: min(1180px, 94vw); max-height: 88vh; width: auto; height: auto;
  border-radius: var(--r-lg); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-modal); cursor: zoom-out;
  transition: transform 160ms var(--ease);
}
.sk-pop.hidden .sk-pop-img { transform: scale(0.97); }
@starting-style { .sk-pop:not(.hidden) .sk-pop-img { transform: scale(0.97); } }

/* ─── confirm activation modal: фон фейдом, карточка scale(.96→1), 220ms;
   обратная анимация на закрытии (display задерживается через allow-discrete) ─── */
.confirm-pop {
  position: fixed; inset: 0; z-index: 210;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-6);
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
  transition: opacity var(--t-med) var(--ease), display var(--t-med) allow-discrete;
}
.confirm-pop.hidden { opacity: 0; }
@starting-style { .confirm-pop:not(.hidden) { opacity: 0; } }
.confirm-card {
  width: min(400px, 100%);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6);
  box-shadow: var(--shadow-modal), var(--inset-hairline);
  text-align: left;
  transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
.confirm-pop.hidden .confirm-card { transform: scale(0.96); opacity: 0; }
@starting-style { .confirm-pop:not(.hidden) .confirm-card { transform: scale(0.96); opacity: 0; } }
.confirm-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.confirm-logo {
  flex: none; width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--text-1); border-radius: var(--r-sm);
  background: var(--surface-1); border: 1px solid var(--border);
}
.confirm-logo svg { width: 20px; height: 20px; }
.confirm-title { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.confirm-sub { font-size: 13px; color: var(--text-2); margin: 0 0 var(--sp-4); line-height: 1.5; }
.confirm-rows { margin-bottom: var(--sp-5); }
.confirm-rows .info-row > b.mono { font-family: var(--font-mono); font-size: 13px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }

/* ─── forms ─── */
.form { display: flex; flex-direction: column; gap: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }

/* Плавное раскрытие блока (шаг с токеном): grid-template-rows 0fr→1fr.
   JS по-прежнему переключает .hidden — display уходит в none только после
   транзишена (allow-discrete), появление стартует с 0fr (@starting-style). */
.reveal {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows var(--t-slow) var(--ease),
    display var(--t-slow) allow-discrete;
}
.reveal.hidden { display: none; grid-template-rows: 0fr; }
@starting-style {
  .reveal:not(.hidden) { grid-template-rows: 0fr; }
}
.reveal-inner {
  min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sp-2);
  /* компенсация overflow:hidden, чтобы focus-ring полей не обрезался */
  margin: -4px; padding: 4px;
}
.field > label { font-size: 13px; font-weight: 500; color: var(--text-1); display: flex; align-items: center; gap: 6px; }

input[type="text"], textarea {
  width: 100%; font-family: var(--font-ui); font-size: 14px; color: var(--text-1);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 11px var(--sp-3); outline: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
textarea { resize: vertical; min-height: 88px; line-height: 1.55; }
#cdk, #keys, #token { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[data-state="error"], textarea[data-state="error"] {
  border-color: var(--err);
  box-shadow: 0 0 0 3px rgba(240, 84, 90, 0.15);
}

/* CDK-поле со встроенной кнопкой «Проверить» — компактный primary внутри поля */
.input-wrap { position: relative; }
.input-wrap input { padding-right: 112px; }
.input-btn {
  position: absolute; right: 6px; top: 6px; bottom: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 84px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-sm);
  cursor: pointer; font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  color: var(--on-accent); background: var(--accent);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
    opacity var(--t-fast) var(--ease);
}
.input-btn:hover { background: var(--accent-hover); }
.input-btn:active { transform: scale(0.98); }
.input-btn:disabled { opacity: 0.4; cursor: default; transform: none; }

.hint { font-size: 12px; color: var(--text-3); transition: color var(--t-fast) var(--ease); }
/* подсказка поля в состоянии ошибки валидации — текст «проявляется» цветом */
.hint[data-state="error"] { color: var(--err); }
#token-len, #keys-count {
  font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums;
  transition: color var(--t-med) var(--ease);
}
/* счётчики у лимита: warn с 30 000 символов / 450 ключей, err — за лимитом */
#token-len[data-level="warn"], #keys-count[data-level="warn"] { color: var(--warn); }
#token-len[data-level="err"],  #keys-count[data-level="err"]  { color: var(--err); }

/* короткое покачивание поля при ошибке валидации (±4px, 3 цикла, 240ms) */
.shake { animation: shake 240ms var(--ease); }

/* ─── buttons ─── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-ui); font-weight: 500; font-size: 14px; line-height: 1.45;
  cursor: pointer; border: 1px solid transparent; border-radius: var(--r-md);
  padding: 9px var(--sp-4);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
    opacity var(--t-fast) var(--ease);
}

/* loading: спиннер поверх прозрачного текста — ширина кнопки не прыгает */
.btn[data-loading], .input-btn[data-loading] { color: transparent; pointer-events: none; }
.btn[data-loading]:disabled, .input-btn[data-loading]:disabled { opacity: 1; }
.btn[data-loading]::after, .input-btn[data-loading]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: var(--on-accent);
  animation: spin 0.7s linear infinite;
}
.btn-block { width: 100%; padding: 11px var(--sp-4); }
.btn-primary { color: var(--on-accent); background: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: translateY(1px) scale(0.98); }
.btn-primary:disabled { opacity: 0.4; cursor: default; transform: none; }
.btn-ghost { color: var(--text-2); background: transparent; border-color: var(--border); }
.btn-ghost:hover { color: var(--text-1); background: var(--surface-2); border-color: var(--border-strong); }
.btn-ghost:active { transform: translateY(1px) scale(0.98); }

/* ─── info card (данные ключа) ─── */
.info-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 0 var(--sp-4);
  box-shadow: var(--inset-hairline);
}
/* Проверка ключа: сначала скелетон (data-state="loading"), по приходу данных —
   строки появляются каскадом, бейдж статуса — последним (data-state="ready"). */
#cdk-info .info-skeleton { display: none; }
#cdk-info[data-state="loading"] .info-skeleton { display: block; }
#cdk-info[data-state="loading"] > :not(.info-skeleton) { display: none; }
.info-skeleton .skel-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.info-skeleton .skel-row:last-child { border-bottom: 0; }
#cdk-info[data-state="ready"] .info-identity { animation: fade var(--t-med) var(--ease) both; }
#cdk-info[data-state="ready"] .info-row { animation: fade var(--t-med) var(--ease) both; }
#cdk-info[data-state="ready"] .info-row:nth-child(3) { animation-delay: 40ms; }
#cdk-info[data-state="ready"] .info-row:nth-child(4) { animation-delay: 80ms; }
#cdk-info[data-state="ready"] .info-row:nth-child(5) { animation-delay: 120ms; }
#cdk-info[data-state="ready"] .info-row:nth-child(6) { animation-delay: 160ms; }
#cdk-info[data-state="ready"] #info-status .ok,
#cdk-info[data-state="ready"] #info-status .bad { animation: fadein var(--t-med) var(--ease) 220ms both; }
/* продукт: монохромный логотип + имя — верхняя строка карточки */
.info-identity {
  display: flex; align-items: center; gap: 10px;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--border);
}
.product-logo { display: inline-flex; color: var(--text-1); }
.product-logo svg { width: 20px; height: 20px; }
.info-identity > b { font-size: 14px; font-weight: 600; }
.info-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.info-row:last-child { border-bottom: 0; }
.info-row > span { color: var(--text-2); font-size: 13px; }
.info-row > b { font-size: 14px; font-weight: 500; text-align: right; word-break: break-word; }
#info-user, #info-time {
  font-family: var(--font-mono); font-size: 13px; font-weight: 400;
  font-variant-numeric: tabular-nums;
}
/* статус-бейдж: pill; free — ok, used — warn */
.info-row .ok, .info-row .bad {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.info-row .ok { color: var(--ok); background: rgba(62, 207, 122, 0.12); }
.info-row .bad { color: var(--warn); background: rgba(227, 165, 60, 0.12); }
.ok { color: var(--ok); }
.bad { color: var(--err); }

/* ─── activation status (data-state: running | success | error) ─── */
.activation-status {
  display: flex; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-5);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4);
  box-shadow: var(--inset-hairline);
}
.as-icon {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
}
.as-icon svg { width: 16px; height: 16px; display: none; }
.activation-status:not(.hidden) { animation: fade var(--t-med) var(--ease); }
.activation-status[data-state="running"] .as-icon .as-spin { display: block; color: var(--accent); animation: spin 0.9s linear infinite; }
/* финал: галочка/крест прорисовываются stroke-dashoffset'ом (~300ms) */
.activation-status[data-state="success"] .as-icon { background: rgba(62, 207, 122, 0.12); }
.activation-status[data-state="success"] .as-icon .as-ok { display: block; color: var(--ok); }
.activation-status[data-state="success"] .as-icon .as-ok path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 300ms var(--ease) 60ms forwards;
}
.activation-status[data-state="error"] .as-icon { background: rgba(240, 84, 90, 0.12); }
.activation-status[data-state="error"] .as-icon .as-err { display: block; color: var(--err); }
.activation-status[data-state="error"] .as-icon .as-err path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 200ms var(--ease) forwards;
}
.activation-status[data-state="error"] .as-icon .as-err path:last-child { animation-delay: 160ms; }
.as-title { font-weight: 600; font-size: 14px; line-height: 28px; }
.as-sub { color: var(--text-2); font-size: 13px; margin-top: 2px; word-break: break-word; }
.as-verify { margin-top: var(--sp-3); }
.confirm-warn { margin: calc(-1 * var(--sp-2)) 0 var(--sp-5); }
/* echo ключа при успехе — моноширинный */
.activation-status[data-state="success"] .as-sub {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}

/* ─── bulk check — результаты ─── */
.check-results { margin-top: var(--sp-6); }
.check-results:not(.hidden) { animation: fadein var(--t-med) var(--ease); }
/* каскад первых 15 строк (задержку задаёт JS), остальные появляются сразу */
.results-list li.cascade { animation: fade var(--t-med) var(--ease) backwards; }
.results-summary { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.results-summary span {
  padding: 5px 11px; border-radius: 999px; font-size: 12px; color: var(--text-2);
  background: var(--surface-1); border: 1px solid var(--border);
}
.results-summary span b {
  color: var(--text-1); margin-left: 3px;
  font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums;
}
.results-summary span.ok b { color: var(--ok); }
.results-summary span.bad b { color: var(--warn); }
.results-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* Mobile-first: карточка — ключ сверху, статус-бейдж, meta снизу. Без переполнения. */
.results-list li {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--surface-1); border: 1px solid var(--border); font-size: 13px;
  min-width: 0;
}
.results-list .marker { display: none; font-size: 12px; text-align: center; line-height: 1; }
.results-list .code {
  font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--text-1); min-width: 0; overflow-wrap: anywhere;
}
/* статус-бейдж: pill с точкой; цвета — семантические токены (used = warn, error = hollow) */
.results-list .status {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px; line-height: 1.5; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
}
.results-list .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.results-list li[data-status="free"] .status::before,
.results-list li[data-status="free"] .marker { color: var(--ok); }
.results-list li[data-status="used"] .status::before,
.results-list li[data-status="used"] .marker { color: var(--warn); }
.results-list li[data-status="unsupported"] .status::before,
.results-list li[data-status="unsupported"] .marker { color: var(--warn); }
.results-list li[data-status="error"] .status::before,
.results-list li[data-status="error"] .marker { color: var(--text-3); }
/* error — «полая» точка */
.results-list li[data-status="error"] .status::before {
  background: transparent; box-shadow: inset 0 0 0 1.5px currentColor;
}
.results-list .meta { color: var(--text-2); font-size: 12px; min-width: 0; overflow-wrap: anywhere; }

/* ─── guide ─── */
.product-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.ptab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--text-2);
  background: transparent; border: 1px solid var(--border);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ptab svg { width: 16px; height: 16px; flex: none; }
.ptab:hover { color: var(--text-1); background: var(--surface-2); }
.ptab.active { color: var(--text-1); background: var(--surface-2); border-color: var(--border-strong); }
.guide-title { font-size: 16px; font-weight: 600; margin: 0 0 var(--sp-4); letter-spacing: -0.01em; }
.guide-steps { margin: 0 0 var(--sp-5); padding-left: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: var(--sp-3); }
.guide-steps li { position: relative; padding: 1px 0 1px 36px; counter-increment: step; color: var(--text-1); font-size: 14px; }
.guide-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-2);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-sm);
}
/* заметки и правила — тихие карточки с hairline-бордером */
.guide-notes {
  display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--sp-4);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
}
.guide-notes p { margin: 0; padding-left: 14px; position: relative; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.guide-notes p::before { content: "·"; position: absolute; left: 2px; color: var(--text-3); }
.guide-rules { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-2); }

/* скелетон загрузки гайда — пульсирующие плейсхолдеры (только opacity) */
.guide-skeleton { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-1) 0; }
.skel-bar { height: 13px; border-radius: 4px; background: var(--surface-2); animation: pulse 1.4s var(--ease) infinite; }
.guide-skeleton .skel-bar:first-child { height: 17px; margin-bottom: var(--sp-2); }

/* Кросс-фейд при смене продукта: контейнер гаснет (out) и проявляется (in).
   Только opacity + transform — без скачка вёрстки. */
#instruction { transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
#instruction[data-swap="out"] { opacity: 0; transform: translateY(4px); }
#instruction[data-swap="in"]  { opacity: 1; transform: none; }

/* ошибка загрузки гайда — тихая карточка с err-меткой */
.guide-error {
  display: flex; align-items: center; gap: 10px;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-1); border: 1px solid var(--border);
  border-left: 2px solid var(--err);
  color: var(--text-2); font-size: 13px; line-height: 1.5;
}
.guide-rules-section { padding: var(--sp-1) 0; }
.guide-rules-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.guide-rules-list li { color: var(--text-2); font-size: 13px; }
#instruction a, .guide-notes a, .guide-steps a, .guide-rules a {
  color: var(--text-2); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
}
#instruction a:hover, .guide-notes a:hover, .guide-steps a:hover, .guide-rules a:hover { color: var(--text-1); }

/* ─── toasts: стопка до 3, въезд снизу + фейд, авто-скрытие фейдом ─── */
.toast {
  position: fixed; left: 50%; bottom: var(--sp-8); transform: translateX(-50%); z-index: 100;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  pointer-events: none;
}
.toast-item {
  display: flex; align-items: center; gap: 10px;
  max-width: min(92vw, 440px); padding: 11px var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-1); font-size: 13px; line-height: 1.45;
  box-shadow: var(--inset-hairline);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
@starting-style { .toast-item { opacity: 0; transform: translateY(12px); } }
.toast-item.leaving { opacity: 0; }
.toast-item .icon { width: 16px; height: 16px; }
.toast-item[data-kind="ok"] .icon { color: var(--ok); }
.toast-item[data-kind="error"] .icon { color: var(--err); }

/* ─── breakpoints ─── */
/* >640px: карточки → строки (точка | ключ | meta справа), бейдж не нужен */
@media (min-width: 641px) {
  .results-list li {
    grid-template-columns: 16px minmax(0, auto) 1fr; align-items: center; gap: var(--sp-3);
    padding: 10px var(--sp-3);
  }
  .results-list .marker { display: block; }
  .results-list .status { display: none; }
  .results-list .code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .results-list .meta { text-align: right; }
}

/* ─── статус сервиса поставщика по тарифу (data-level: normal | unstable | abnormal) ─── */
.svc-banner {
  display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
  border: 1px solid; font-size: 13px; line-height: 1.45;
}
.svc-banner:not(.hidden) { animation: fade var(--t-med) var(--ease); }
.svc-dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 20%, transparent); }
.svc-banner[data-level="normal"]   { color: var(--ok);   background: rgba(62, 207, 122, 0.08); border-color: rgba(62, 207, 122, 0.25); }
.svc-banner[data-level="unstable"] { color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.svc-banner[data-level="abnormal"] { color: var(--err);  background: rgba(240, 84, 90, 0.08); border-color: rgba(240, 84, 90, 0.28); }

}