/* Настройки Скрепки — редизайн на канон ui-kit (фиче-слайс `features/settings`).
 *
 * Было: панели собраны на глаз — радиусы 14/12/9/7/6 вперемешку, хардкод-хексы (#0c0e08),
 * рамки rgba(198,242,78,.35), тени врозь. Admin: «ну что это за дизайн».
 *
 * Стало: единый канон ui-kit (`ui-kit/docs/design-reference.md`)
 *   • «острова на канвасе»: поверхность острова = --surface-primary, контролы = --surface-secondary;
 *   • радиусы: остров 20 · контрол 8 · чип 6 — и никаких других;
 *   • тени: только на островах (shadow-overlay для плавающих панелей), НЕ на строках списка;
 *   • цвет: только токены (--surface-* / --text* / --border-* / --lime как акцент-CTA);
 *   • акцент (--lime) — не больше одного «зовущего» элемента на панель.
 *
 * Файл грузится ПОСЛЕ инлайн-стилей index.html и перекрывает их точечно, без правки разметки.
 * Токены НЕ переименовываются — это общие переменные экосистемы.
 */

:root,
[data-theme="dark"] {
  --st-radius-island: 20px;
  --st-radius-control: 8px;
  --st-radius-chip: 6px;
  --st-shadow-overlay: 0 8px 40px rgba(0, 0, 0, .55);
  --st-accent-soft: color-mix(in srgb, var(--lime) 12%, transparent);
  --st-accent-line: color-mix(in srgb, var(--lime) 40%, transparent);
}

/* ================= общий «остров» для плавающих панелей ================= */
.facepanel,
#tunepanel {
  background: var(--surface-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--st-radius-island);
  box-shadow: var(--st-shadow-overlay);
  padding: 18px 18px 16px;
  color: var(--text-secondary);
  font: 13px/1.45 -apple-system, Inter, "Segoe UI", Roboto, sans-serif;
}
.facepanel { backdrop-filter: blur(12px); }

/* ================= заголовки ================= */
.fp-title,
#tunepanel h4 {
  font-size: 14px;
  font-weight: 650;
  color: var(--fg);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
#tunepanel h4 { color: var(--fg); }          /* был кислотный --lime заголовок */

.fp-adv-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 16px 0 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

/* ================= закрытие ================= */
.fp-close {
  border-radius: var(--st-radius-control);
  color: var(--text-secondary);
  padding: 4px 9px;
}
.fp-close:hover { color: var(--fg); background: var(--surface-secondary); }

/* ================= строки со слайдерами ================= */
.fp-row,
#tunepanel .row { margin: 12px 0; }
.fp-lbl,
.fp-lbl2,
#tunepanel .row label { color: var(--text-secondary); font-weight: 500; }
.fp-val,
#tunepanel .row label b { color: var(--fg); font-variant-numeric: tabular-nums; }

.fp-row input[type="range"],
#tunepanel input[type="range"] { accent-color: var(--lime); cursor: pointer; }

/* ================= контролы: радиус 8, поверхность --surface-secondary ================= */
.fp-preset,
.fp-btn,
#tunepanel button {
  border-radius: var(--st-radius-control);
  border: 1px solid var(--border-color);
  background: var(--surface-secondary);
  color: var(--fg);
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  transition: background .12s ease, border-color .12s ease;
}
.fp-preset { border-radius: var(--st-radius-chip); font-size: 12px; }
.fp-preset:hover,
.fp-btn:hover,
#tunepanel button:hover { background: var(--surface-primary); border-color: var(--text-secondary); color: var(--fg); }

/* выбранный пресет — заливка акцентом, а не inset-обводка */
.fp-preset.active {
  background: var(--st-accent-soft);
  border-color: var(--st-accent-line);
  color: var(--lime);
  box-shadow: none;
}

/* ровно ОДИН зовущий элемент на панель (правило 70/20/9/1) */
#tunepanel .btns button:first-child,
.fp-btns .fp-btn:first-child {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--bg);
}
#tunepanel .btns button:first-child:hover,
.fp-btns .fp-btn:first-child:hover { filter: brightness(1.08); background: var(--lime); }

/* ================= поля ввода: токены вместо хардкод-хекса ================= */
#tunepanel textarea {
  background: var(--surface-secondary);        /* был #0c0e08 */
  color: var(--fg);
  border: 1px solid var(--border-color);       /* была rgba(255,255,255,.15) */
  border-radius: var(--st-radius-control);
  padding: 8px 10px;
  font-size: 11px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
#tunepanel textarea:focus { outline: none; border-color: var(--text-secondary); }

/* ================= чекбокс «сравнить со стоком» ================= */
#tunepanel .ab {
  color: var(--text-secondary);                /* был --lime: кричал наравне с CTA */
  font-weight: 600;
  gap: 8px;
  margin: 6px 0 14px;
}
#tunepanel .ab input { accent-color: var(--lime); }

/* ================= подсказки / статус ================= */
#tunehint,
.fp-msg { color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.fp-msg { color: var(--lime); }                /* успех — единственное акцентное пятно */

/* ================= сегмент-переключатель ================= */
.seg { border-radius: var(--st-radius-control); background: var(--surface-secondary); }
.segbtn { border-radius: var(--st-radius-chip); }
.segbtn.active { background: var(--surface-primary); color: var(--lime); }

/* ================= мобилка: панель = лист снизу, не обрезанный «островок» ================= */
@media (max-width: 640px) {
  .facepanel,
  #tunepanel {
    left: 0; right: 0; top: auto; bottom: 0;
    width: 100%; max-width: 100%; transform: none;
    max-height: 72dvh;
    border-radius: var(--st-radius-island) var(--st-radius-island) 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  #micpanel { left: 0; transform: none; }
}