/* Tarkov Navigator — компоненты. Требует tokens.css. (Claude Design, 2026-08) */

/* ── База ─────────────────────────────────────────── */

/* Полосы прокрутки. color-scheme даёт тёмные системные полосы (и тёмные
   нативные select, чекбоксы, автозаполнение) везде, где WebKit-правила ниже
   не работают — например в Firefox, где вместо них действует scrollbar-color.
   Правила общие для сайта и приложения: components.css подключают оба. */
:root { color-scheme: dark; scrollbar-color: rgba(199, 178, 153, 0.28) transparent; scrollbar-width: thin; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb {
  background: rgba(199, 178, 153, 0.22);
  border: 2px solid transparent; background-clip: padding-box;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(199, 178, 153, 0.42); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--accent); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: var(--bg-0); }

/* Внутри панелей полоса тоньше и без своей подложки, чтобы не резала колонку. */
.tn-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.tn-scroll::-webkit-scrollbar-track { background: transparent; }

.tn-mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); font-variant-numeric: tabular-nums; }
.tn-label {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-12); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent-2); line-height: var(--lh-tight);
}
.tn-hud {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-12);
  color: var(--text-2); letter-spacing: var(--tracking-mono);
}
.tn-hud b { color: var(--accent-2); font-family: var(--font-display); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase; }
.tn-hud .sep { color: var(--line-strong); }

/* ── Кнопки ───────────────────────────────────────── */
.tn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 7px 13px; border-radius: var(--r-sm); border: 1px solid transparent;
  font: var(--fw-semibold) var(--fs-13)/1 var(--font-ui);
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.tn-btn:focus-visible { outline: none; box-shadow: var(--glow-accent); }
.tn-btn:active:not(:disabled):not(.is-locked) { transform: translateY(1px); }

.tn-btn--cta { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--sh-inset-top); }
.tn-btn--cta:hover { background: var(--accent-hover); }
.tn-btn--cta:active { background: var(--accent-active); }

.tn-btn--secondary { background: var(--accent-2-soft); border-color: var(--line); color: var(--accent-2); }
.tn-btn--secondary:hover { background: rgba(199, 178, 153, 0.16); border-color: var(--line-strong); }
.tn-btn--secondary:active { background: rgba(199, 178, 153, 0.24); }

.tn-btn--ghost { background: transparent; color: var(--text-2); }
.tn-btn--ghost:hover { background: var(--accent-2-soft); color: var(--accent-2); }
.tn-btn--ghost:active { background: rgba(199, 178, 153, 0.16); }

.tn-btn--icon { width: 32px; height: 30px; padding: 0; background: transparent;
  border-color: var(--line); color: var(--accent-2); }
.tn-btn--icon:hover { background: var(--accent-2-soft); border-color: var(--line-strong); }
.tn-btn--icon.is-on { background: var(--accent-soft); border-color: rgba(207, 106, 50, 0.6); color: var(--accent); }

.tn-btn:disabled, .tn-btn.is-disabled {
  background: rgba(199, 178, 153, 0.05); border-color: var(--line-soft);
  color: var(--text-disabled); cursor: not-allowed; box-shadow: none;
}
/* Залоченная платная фича — не «сломана», а «доступна за Pro» */
.tn-btn.is-locked {
  background: transparent; border: 1px dashed rgba(255, 212, 121, 0.45);
  color: var(--warning); cursor: pointer;
}
.tn-btn.is-locked:hover { background: var(--warning-soft); border-color: var(--warning); }
.tn-lock { font-size: 11px; line-height: 1; opacity: 0.9; }

/* ── Поля ввода ───────────────────────────────────── */
.tn-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.tn-field > .tn-label { font-size: 11px; }
.tn-input, .tn-select {
  background: var(--bg-0); color: var(--text-1);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 6px 10px; font: var(--fs-13)/var(--lh-normal) var(--font-ui);
  outline: none; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.tn-input::placeholder { color: var(--text-2); }
.tn-input:hover, .tn-select:hover { border-color: var(--line-strong); }
.tn-input:focus, .tn-select:focus { border-color: var(--accent); box-shadow: var(--glow-accent); }
.tn-input.is-error { border-color: var(--danger); }
.tn-input:disabled, .tn-select:disabled {
  background: rgba(255, 255, 255, 0.02); color: var(--text-disabled);
  border-color: var(--line-soft); cursor: not-allowed;
}
.tn-input--mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }
.tn-input--search { padding-left: 28px; width: 230px; }
.tn-search-wrap { position: relative; display: inline-flex; align-items: center; }
.tn-search-wrap > svg { position: absolute; left: 9px; pointer-events: none; }

.tn-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 26px; font-weight: var(--fw-semibold);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
                    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 10px) 55%;
  background-size: 4px 4px; background-repeat: no-repeat;
}
.tn-hint { font-size: var(--fs-12); color: var(--text-2); }
.tn-hint--error { color: var(--danger); }

/* ── Чекбокс ──────────────────────────────────────── */
.tn-check {
  display: flex; align-items: center; gap: 9px; padding: 5px 4px;
  font-size: var(--fs-13); color: var(--text-1); cursor: pointer;
  border-radius: var(--r-sm); transition: background var(--dur-1) var(--ease);
}
.tn-check:hover { background: rgba(199, 178, 153, 0.07); }
.tn-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.tn-check .box {
  width: 15px; height: 15px; flex: none; border-radius: 3px;
  border: 1px solid var(--line-strong); background: var(--bg-0);
  display: grid; place-items: center;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.tn-check .box::after {
  content: ""; width: 8px; height: 4px; margin-top: -2px;
  border-left: 2px solid var(--text-on-accent); border-bottom: 2px solid var(--text-on-accent);
  transform: rotate(-45deg) scale(0.5); opacity: 0;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}
.tn-check input:checked + .box { background: var(--accent); border-color: var(--accent); }
.tn-check input:checked + .box::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.tn-check input:focus-visible + .box { box-shadow: var(--glow-accent); }
.tn-check:active .box { border-color: var(--accent); }
.tn-check.is-disabled { color: var(--text-disabled); cursor: not-allowed; }
.tn-check.is-disabled:hover { background: none; }
.tn-check.is-disabled .box { border-color: var(--line-soft); background: rgba(255, 255, 255, 0.02); }
.tn-check.is-locked { color: var(--warning); }
.tn-check.is-locked .box { border-style: dashed; border-color: rgba(255, 212, 121, 0.5); }
/* точка слоя карты в строке чекбокса */
.tn-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }

/* ── Выпадающее меню ──────────────────────────────── */
.tn-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-2); padding: var(--sp-2) var(--sp-3);
  display: flex; flex-direction: column; gap: 2px; z-index: var(--z-dropdown);
  animation: tn-menu-in var(--dur-2) var(--ease-out);
}
@keyframes tn-menu-in { from { opacity: 0; transform: translateY(-4px); } }
.tn-menu--right { left: auto; right: 0; }
.tn-menu-item {
  display: flex; align-items: center; gap: var(--sp-2); justify-content: space-between;
  padding: 6px 8px; margin: 0 -4px; border-radius: var(--r-sm);
  font-size: var(--fs-13); color: var(--text-1); cursor: pointer; background: none; border: none;
  text-align: left; font-family: var(--font-ui);
  transition: background var(--dur-1) var(--ease);
}
.tn-menu-item:hover { background: rgba(199, 178, 153, 0.09); }
.tn-menu-item:active { background: rgba(199, 178, 153, 0.16); }
.tn-menu-item .kbd { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }
.tn-menu-item.is-disabled { color: var(--text-disabled); cursor: not-allowed; }
.tn-menu-item.is-disabled:hover { background: none; }
.tn-menu-item.is-locked { color: var(--warning); }
.tn-menu-item.is-locked:hover { background: var(--warning-soft); }
.tn-menu-sep { border-top: 1px solid var(--line-soft); margin: var(--sp-2) -8px; }
.tn-menu-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: 11px; color: var(--text-2); }
.tn-menu-legend span { display: flex; align-items: center; gap: 5px; }

/* ── Модальный диалог ─────────────────────────────── */
.tn-scrim { position: absolute; inset: 0; background: var(--bg-scrim); z-index: var(--z-modal); }
.tn-modal {
  width: 100%; max-width: 440px; background: var(--bg-elev);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  overflow: hidden; animation: tn-modal-in var(--dur-3) var(--ease-out);
}
@keyframes tn-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
.tn-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(var(--bg-1), var(--bg-elev));
}
.tn-modal__title {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-18); letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-1); line-height: var(--lh-tight);
}
.tn-modal__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3);
  font-size: var(--fs-13); line-height: var(--lh-loose); color: var(--text-1); }
.tn-modal__foot {
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line-soft); background: var(--bg-1);
}

/* ── Тост ─────────────────────────────────────────── */
.tn-toast {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  min-width: 280px; max-width: 380px; padding: var(--sp-3);
  background: var(--bg-elev); border: 1px solid var(--line);
  border-left: 3px solid var(--accent-2); border-radius: var(--r-md);
  box-shadow: var(--sh-2); z-index: var(--z-toast);
  animation: tn-toast-in var(--dur-3) var(--ease-out);
}
@keyframes tn-toast-in { from { opacity: 0; transform: translateX(12px); } }
.tn-toast--success { border-left-color: var(--success); }
.tn-toast--warning { border-left-color: var(--warning); }
.tn-toast--danger  { border-left-color: var(--danger); }
.tn-toast__title { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-1); }
.tn-toast__text  { font-size: var(--fs-12); color: var(--text-2); line-height: var(--lh-normal); margin-top: 2px; }
.tn-toast__close { margin-left: auto; background: none; border: none; color: var(--text-2);
  cursor: pointer; font-size: var(--fs-14); line-height: 1; padding: 2px; }
.tn-toast__close:hover { color: var(--text-1); }

/* ── Бейдж подписки ───────────────────────────────── */
.tn-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-xs); border: 1px solid var(--line);
  color: var(--text-2); white-space: nowrap; cursor: pointer; background: transparent;
}
.tn-badge__num { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }
.tn-badge--free  { color: var(--text-2); border-color: var(--line); }
.tn-badge--free:hover { color: var(--warning); border-color: rgba(255, 212, 121, 0.55); }
.tn-badge--trial { color: var(--warning); border: 1px dashed rgba(255, 212, 121, 0.55); }
.tn-badge--pro   { color: #1a1204; background: var(--warning); border-color: var(--warning); }

/* ── Таблица ──────────────────────────────────────── */
.tn-table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); color: var(--text-1); }
.tn-table th {
  position: sticky; top: 0; z-index: 1; background: var(--bg-1);
  text-align: left; padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line); white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-2);
  cursor: pointer; user-select: none; transition: color var(--dur-1) var(--ease);
}
.tn-table th:hover { color: var(--accent-2-hover); }
.tn-table th .caret { opacity: 0; margin-left: 5px; font-size: 9px; }
.tn-table th:hover .caret { opacity: 0.45; }
.tn-table th[aria-sort] { color: var(--accent); }
.tn-table th[aria-sort] .caret { opacity: 1; }
.tn-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line-soft); }
.tn-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.022); }
.tn-table tbody tr:hover { background: var(--accent-2-soft); }
.tn-table .num {
  text-align: right; font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono); font-variant-numeric: tabular-nums;
}
.tn-table .num--good { color: var(--success); }
.tn-table .num--bad  { color: var(--danger); }
.tn-table tr.is-locked td { color: var(--text-disabled); }
.tn-table tr.is-locked .num { color: var(--text-disabled); }

/* ── Рамка под предметную иконку (CDN assets.tarkov.dev) ── */
.tn-icon {
  position: relative; flex: none; overflow: hidden;
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background-color: var(--bg-map);
  background-image: repeating-linear-gradient(135deg,
      rgba(199,178,153,0.05) 0 4px, transparent 4px 8px);
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.55);
  display: grid; place-items: center;
}
.tn-icon img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 2px; box-sizing: border-box; }
.tn-icon__ph { font: 500 9px var(--font-mono); color: #3c454b; letter-spacing: 0.5px; text-transform: uppercase; }
.tn-icon--sm { width: 28px; height: 28px; border-radius: var(--r-xs); }
.tn-icon--lg { width: 76px; height: 76px; border-radius: var(--r-md); }
.tn-icon.is-rare  { border-color: rgba(255,212,121,0.45); }
.tn-result:hover .tn-icon, .tn-icon.is-active { border-color: var(--line-strong); }

/* ── График цены (canvas) ───────────────────────────── */
.tn-chart {
  position: relative;
  background: var(--bg-map); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 12px 12px 6px;
  --chart-grid:   rgba(199,178,153,0.10);
  --chart-axis:   rgba(199,178,153,0.22);
  --chart-tick:   #8a949b;
  --chart-line:   var(--accent);
  --chart-fill-0: rgba(207,106,50,0.26);
  --chart-fill-1: rgba(207,106,50,0.00);
  --chart-dot:    var(--bg-map);
  --chart-cross:  rgba(199,178,153,0.35);
}
.tn-chart canvas { display: block; width: 100%; height: 188px; cursor: crosshair; }
.tn-chart__head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.tn-chart__tip {
  position: absolute; pointer-events: none; transform: translate(-50%, -120%);
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--sh-2); padding: 6px 9px; white-space: nowrap; z-index: var(--z-tooltip);
}
.tn-chart__tip b { display: block; font: var(--fw-semibold) var(--fs-13)/1.3 var(--font-mono);
  color: var(--text-1); font-variant-numeric: tabular-nums; }
.tn-chart__tip span { font: 11px var(--font-mono); color: var(--text-2); }

/* ── Шкала пробития (шесть делений по 10 единиц, диапазон 0–60) ── */
.tn-pen { display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end; }
.tn-pen__val {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-13); color: var(--text-1); width: 2.4ch; text-align: right;
}
.tn-pen__bar {
  position: relative; width: 76px; height: 8px; flex: none;
  border-radius: 2px; background: rgba(199,178,153,0.09); overflow: hidden;
}
.tn-pen__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px;
  background: var(--accent-2); transition: width var(--dur-2) var(--ease); }
.tn-pen__bar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(16.6667% - 1px),
    rgba(14,17,19,0.92) calc(16.6667% - 1px) 16.6667%);
}
.tn-pen.is-low  .tn-pen__val { color: var(--text-2); }
.tn-pen.is-low  .tn-pen__fill { background: #5d6a70; }
.tn-pen.is-mid  .tn-pen__fill { background: var(--accent-2); }
.tn-pen.is-high .tn-pen__val { color: var(--accent-2-hover); }
.tn-pen.is-high .tn-pen__fill { background: var(--accent); }
.tn-pen-legend { display: flex; align-items: center; gap: var(--sp-3); font-size: 11px; color: var(--text-2); }

/* ── Строка результата поиска ─────────────────────── */
.tn-result {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  cursor: pointer; border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.tn-result:hover { background: var(--accent-2-soft); border-color: var(--line-soft); }
.tn-result:active, .tn-result.is-active { background: var(--accent-soft); border-color: rgba(207, 106, 50, 0.5); }
.tn-result__icon {
  width: 30px; height: 30px; flex: none; border-radius: var(--r-sm);
  background: var(--bg-0); border: 1px solid var(--line-soft);
  display: grid; place-items: center;
}
.tn-result__body { display: flex; flex-direction: column; min-width: 0; }
.tn-result__name { display: block; font-size: var(--fs-13); color: var(--text-1); line-height: var(--lh-tight); }
.tn-result__meta { display: block; font-size: 11px; color: var(--text-2); margin-top: 2px; }
.tn-result__price {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-13);
  color: var(--accent-2); letter-spacing: var(--tracking-mono); font-variant-numeric: tabular-nums;
}
.tn-result.is-locked { cursor: pointer; }
.tn-result.is-locked .tn-result__name,
.tn-result.is-locked .tn-result__price { color: var(--text-disabled); }
.tn-result.is-locked .tn-result__price { filter: blur(3px); user-select: none; }
.tn-result.is-locked:hover { background: var(--warning-soft); border-color: rgba(255, 212, 121, 0.4); }

/* ── Модальное окно обратной связи ─────────────────
   Общее для сайта и приложения: копия этого блока лежит в
   src/webapp/components.css клиентского репозитория. */
.feedback-overlay { position: fixed; inset: 0; z-index: var(--z-feedback); display: grid; place-items: center; padding: var(--sp-4); background: var(--bg-scrim); }
.feedback-modal { width: min(100%, 448px); max-height: calc(100vh - var(--sp-8)); overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3); animation: tn-modal-in var(--dur-3) var(--ease-out); }
.feedback-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.feedback-modal__title { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font: var(--fw-semibold) var(--fs-18)/var(--lh-tight) var(--font-display); letter-spacing: .5px; color: var(--text-1); }
.feedback-modal__mark { color: var(--accent); font: 22px/1 var(--font-mono); }
.feedback-close { width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font: 26px/1 var(--font-ui); cursor: pointer; }
.feedback-close:hover { background: var(--accent-2-soft); color: var(--text-1); }
.feedback-close:focus-visible { outline: none; box-shadow: var(--glow-accent); }
.feedback-form { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4); }
.feedback-topics { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.feedback-topic { padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: transparent; color: var(--text-2); font: var(--fw-medium) var(--fs-13)/1 var(--font-ui); cursor: pointer; }
.feedback-topic:hover { border-color: var(--line-strong); color: var(--text-1); }
.feedback-topic.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-2-hover); }
.feedback-topic:focus-visible { outline: none; box-shadow: var(--glow-accent); }
.feedback-message { min-height: 122px; resize: vertical; padding: 11px 12px; }
.feedback-count { align-self: flex-end; margin-top: calc(var(--sp-3) * -1); color: var(--text-2); font: var(--fs-12)/1 var(--font-mono); }
/* Ловушка для скриптов: не видно глазу, не слышно диктору, не поймать табом. */
.feedback-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.feedback-note { margin: calc(var(--sp-2) * -1) 0 0; color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-loose); }
/* Галочка технической информации и раскрывающийся снимок под ней. */
.feedback-tech { display: flex; align-items: center; gap: var(--sp-2); margin: calc(var(--sp-3) * -1) 0 0; color: var(--text-2); font-size: var(--fs-12); cursor: pointer; }
.feedback-tech input { accent-color: var(--accent); cursor: pointer; }
.feedback-peek { margin: calc(var(--sp-3) * -1) 0 0; color: var(--text-2); font-size: var(--fs-12); }
.feedback-peek[hidden] { display: none; }
.feedback-peek summary { cursor: pointer; }
.feedback-peek summary:focus-visible { outline: none; box-shadow: var(--glow-accent); }
/* Снимок бывает и в двадцать строк — держим его в своей рамке со скроллом, */
/* иначе он растягивает модалку за пределы экрана. */
.feedback-peek pre { max-height: 168px; margin: var(--sp-2) 0 0; padding: var(--sp-2); overflow: auto; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--bg-1); font: var(--fs-12)/1.5 var(--font-mono); white-space: pre-wrap; word-break: break-all; }
.feedback-status { min-height: 17px; margin: calc(var(--sp-2) * -1) 0 0; color: var(--danger); font-size: var(--fs-12); }
.feedback-status.is-success { color: var(--success); }
.feedback-submit { width: 100%; min-height: 40px; }