/* Monster Rush · popup  (v3.2.0)
   Flat-black в единой гамме с хаб-сайтом semadrgn.me.
   Toggles: safe-mode + advanced hooks + auto-reset on slot change.
   MR-022: комментарий обновлён — telemetry opt-in убран в v3.1.1, auto-reset
   добавлен там же. */

:root {
  --bg: #0A0A0B;
  --bg-elev: #111114;
  --bg-tile: rgba(20, 22, 26, 0.72);
  --bg-tile-hover: rgba(32, 36, 44, 0.88);
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #F4F7FA;
  --text-dim: rgba(220, 228, 236, 0.58);
  --text-mute: rgba(220, 228, 236, 0.34);

  --accent: #2EE6C7;
  --accent-dim: rgba(46, 230, 199, 0.72);
  --success: #3ddc84;
  --warn: #ffbd59;
  --casino: #2EE6C7;
  --casino-deep: #1bb8a0;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;

  --radius: 10px;
  --radius-lg: 14px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; }
body {
  width: 340px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }

.shell {
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* === HEAD === */
.head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.head__brand {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
}
.head__bolt {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}
.head__name { font-size: 15px; color: var(--text); }
.head__ver {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10px; color: var(--text-mute);
  padding: 3px 7px; border: 1px solid var(--border); border-radius: 999px; letter-spacing: 0.06em;
}

/* === MR-003: read-fail banner === */
.banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 11.5px;
  line-height: 1.4;
}
.banner--error {
  background: rgba(255, 89, 89, 0.08);
  border: 1px solid rgba(255, 89, 89, 0.3);
  color: #ffb0b0;
}
.banner--update {
  background: rgba(83, 252, 24, 0.10);
  border: 1px solid rgba(83, 252, 24, 0.45);
  color: #dffbd0;
}
.banner__action {
  flex-shrink: 0;
  background: #53fc18;
  color: #06140a;
  border: 0;
  border-radius: 8px;
  padding: 5px 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.banner__action:hover { filter: brightness(1.06); }
.banner__icon { font-size: 13px; flex-shrink: 0; }
.banner__text { flex: 1; }

/* === MR-004: apply-failed toast === */
.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--radius);
  background: rgba(255, 189, 89, 0.08);
  border: 1px solid rgba(255, 189, 89, 0.3);
  color: #ffd58a;
  font-size: 11.5px;
  line-height: 1.4;
  animation: toast-in 180ms var(--ease-out);
}
.toast__icon { font-size: 13px; flex-shrink: 0; }
.toast__text { flex: 1; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === PROVIDER CHIP === */
.provider {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--bg-tile); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 11.5px;
}
.provider__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px rgba(46, 230, 199, 0.55); flex-shrink: 0; }
.provider__label { color: var(--text-mute); }
.provider__name { color: var(--text); font-weight: 600; }
.provider__apply {
  margin-left: auto;
  padding: 4px 10px; border-radius: 6px;
  background: rgba(46, 230, 199, 0.08); border: 1px solid rgba(46, 230, 199, 0.28); color: var(--accent);
  font-size: 10.5px; font-weight: 600;
  transition: background 140ms var(--ease-out);
}
.provider__apply:hover { background: rgba(46, 230, 199, 0.18); }

/* === SPEED BLOCK === */
.speed {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 14px 20px;
  background: var(--bg-tile); border: 1px solid var(--border); border-radius: var(--radius-lg);
  position: relative; overflow: hidden;
}
.speed__value {
  font-family: var(--font-display); font-size: 42px; font-weight: 700; letter-spacing: -0.03em;
  line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;
  transition: color 180ms var(--ease-out);
}
.speed__x { font-size: 0.55em; color: var(--text-dim); margin-left: 2px; }

.slider-wrap { width: 100%; display: flex; flex-direction: column; gap: 4px; }
input[type="range"]#speed-input {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 10px;
  background: linear-gradient(
    to right,
    var(--accent) 0%, var(--accent) var(--percent, 10%),
    rgba(255, 255, 255, 0.08) var(--percent, 10%), rgba(255, 255, 255, 0.08) 100%
  );
  border-radius: 5px; outline: none; cursor: pointer;
}
input[type="range"]#speed-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; background: var(--text); border: 3px solid var(--bg); border-radius: 50%;
  cursor: grab; box-shadow: 0 0 0 1px var(--border-strong), 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 140ms var(--ease-out);
}
input[type="range"]#speed-input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.2); }

.slider-ticks {
  position: relative; height: 12px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 9.5px; color: var(--text-mute); padding: 0 2px; letter-spacing: 0.04em;
}
/* v3.5.2: шкала КУСОЧНАЯ (posToSpeed в popup.js): 1..10 на левой половине,
   10..25 на правой → «10×» ровно в ЦЕНТРЕ (50%), совпадает с бегунком/заливкой. */
.slider-ticks span { position: absolute; top: 0; white-space: nowrap; }
.slider-ticks span:nth-child(1) { left: 2px; }                               /* 1×  → 0%  */
.slider-ticks span:nth-child(2) { left: 50%; transform: translateX(-50%); }  /* 10× → 50% */
.slider-ticks span:nth-child(3) { right: 2px; }                              /* 25× → 100% */

/* ===== Режимы rAF-ускорения (название сверху, кнопка-картинка, описание СНИЗУ; 50/50) ===== */
.accel-group { margin: 12px 0; }
.accel-note {
  margin: 0 0 7px; font-size: 10.5px; line-height: 1.35; color: var(--text-dim);
}
.accel-note b { color: var(--text); font-weight: 700; }
.accel-modes { display: flex; gap: 8px; margin: 0; }
/* v3.6.1: картинки-кнопки (accel-opioid.jpg/accel-salt.jpg) убраны — «перегруз».
   Компактные текст-тумблеры; класс .accel-btn + id/.is-active сохранены (popup.js). */
.accel-btn {
  position: relative; flex: 1 1 0; min-width: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 8px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius);
  background: var(--panel, #14181f); color: var(--text);
  transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out), transform 90ms var(--ease-out);
}
.accel-btn__name {
  font-family: var(--font-display); font-weight: 700; font-size: 12px; line-height: 1.1;
}
.accel-btn__hint {
  font-size: 9.5px; line-height: 1.2; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.accel-btn:hover  { border-color: var(--accent-dim); transform: translateY(-1px); }
.accel-btn:active { transform: translateY(0); }
.accel-btn.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 16px rgba(0,217,255,0.45); }
.accel-btn.is-active::after {
  content: "✓ ВКЛ"; position: absolute; top: 6px; right: 6px; z-index: 2;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.03em;
  background: var(--accent); color: #04121a; padding: 1px 6px; border-radius: 5px;
}
/* Солевое — АГРЕССИВНАЯ КРАСНАЯ подсветка (в отличие от cyan у Опиоидного) + пульс. */
#accel-salt.is-active {
  border-color: #ff3030;
  box-shadow: 0 0 0 1.5px #ff3030, 0 0 20px rgba(255,48,48,0.75);
  animation: salt-pulse 1.05s ease-in-out infinite;
}
#accel-salt.is-active::after { background: #ff3030; color: #fff; }
@keyframes salt-pulse {
  0%, 100% { box-shadow: 0 0 0 1.5px #ff3030, 0 0 12px rgba(255,48,48,0.5); }
  50%      { box-shadow: 0 0 0 2px  #ff4040, 0 0 30px rgba(255,48,48,1); }
}
/* «Эффект непредсказуем» — жирный красный. */
.accel-warn { font-weight: 800; color: #ff4d4d; }

/* apply-indicator удалён в v3.1.1 — мерцание зелёной полоски при каждом
   `input` event на слайдере в связке с частым applySpeed лочило DOM на
   Pragmatic и давало «значок запрета». Visual feedback теперь только через
   `.is-active` на пресетах и позицию слайдера. */

/* === PRESETS === */
/* v3.4.10: добавлен 6-й пресет (25×) — было repeat(5, 1fr) 36px, ресет
   вылезал на вторую строку. Кнопки уже + gap уже, чтобы все 7 влезли в одну
   строку при ширине попапа 340px. */
.presets { display: grid; grid-template-columns: repeat(6, 1fr) 30px; gap: 4px; }
.preset {
  padding: 8px 0;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-tile);
  font-family: var(--font-display); font-size: 11px; font-weight: 600; color: var(--text-dim);
  transition: background 140ms var(--ease-out), border-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.preset:hover { background: var(--bg-tile-hover); border-color: var(--border-strong); color: var(--text); }
.preset.is-active { background: rgba(46, 230, 199, 0.1); border-color: rgba(46, 230, 199, 0.38); color: var(--accent); }
.preset--reset { display: grid; place-items: center; color: var(--text-mute); }
.preset--reset:hover { color: var(--warn); }

/* === HINT === */
.hint { font-size: 11px; color: var(--text-mute); text-align: center; line-height: 1.4; }
kbd {
  display: inline-block;
  padding: 1px 5px; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 10px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-dim); min-width: 16px; text-align: center;
}

/* === TOGGLES === */
.toggles { display: flex; flex-direction: column; gap: 10px; }

/* iOS-style switch для safe-mode */
.toggle {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px;
  background: var(--bg-tile); border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; user-select: none;
  transition: background 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.toggle:hover { background: var(--bg-tile-hover); border-color: var(--border-strong); }
.toggle input[type="checkbox"] { appearance: none; -webkit-appearance: none; margin: 0; width: 0; height: 0; position: absolute; opacity: 0; }
.toggle__switch {
  width: 32px; height: 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border);
  position: relative; flex-shrink: 0;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.toggle__switch::after {
  content: ""; position: absolute;
  top: 50%; left: 2px; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--text-dim);
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out);
}
.toggle input:checked ~ .toggle__switch {
  background: rgba(255, 189, 89, 0.22);
  border-color: rgba(255, 189, 89, 0.5);
}
.toggle input:checked ~ .toggle__switch::after {
  transform: translateY(-50%) translateX(14px);
  background: var(--warn);
}
.toggle__label { font-size: 12.5px; font-weight: 600; color: var(--text); display: flex; flex-direction: column; gap: 1px; }
.toggle__sub { font-weight: 400; font-size: 10.5px; color: var(--text-mute); }

/* Advanced collapse */
.advanced {
  background: var(--bg-tile); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.advanced summary {
  padding: 10px 12px; font-size: 11.5px; color: var(--text-dim); cursor: pointer;
  list-style: none; display: flex; align-items: center; gap: 6px;
  transition: color 140ms var(--ease-out);
}
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::before {
  content: "▸"; font-size: 9px; color: var(--text-mute);
  transition: transform 160ms var(--ease-out);
  display: inline-block; transform-origin: center;
}
.advanced[open] summary::before { transform: rotate(90deg); }
.advanced summary:hover { color: var(--text); }
.advanced__grid {
  padding: 4px 12px 12px;
  display: flex; flex-direction: column; gap: 7px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}

/* MR-040: панель диагностики сбросов */
.diag__body {
  padding: 4px 12px 12px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.diag__empty {
  font-size: 11px; color: var(--text-mute); line-height: 1.4; padding: 4px 0;
}
.diag__list { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 2px 0; }
.diag__item {
  display: flex; flex-direction: column; gap: 1px;
  font-size: 11px; padding: 5px 7px;
  background: var(--bg-tile); border: 1px solid var(--border); border-radius: 8px;
}
.diag__time { color: var(--warn); font-variant-numeric: tabular-nums; font-weight: 600; }
.diag__src { color: var(--text-dim); }
.diag__url {
  color: var(--text-mute); font-size: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.diag__clear {
  margin-top: 8px; font-size: 10.5px; color: var(--text-mute);
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px;
  transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.diag__clear:hover { color: var(--text); border-color: var(--border-strong); }

.check {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--text-dim);
  cursor: pointer; padding: 4px 0;
  transition: color 140ms var(--ease-out);
}
.check:hover { color: var(--text); }
.check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 14px; height: 14px;
  border: 1px solid var(--border-strong); border-radius: 3px;
  background: transparent;
  position: relative; cursor: pointer; flex-shrink: 0;
  transition: background 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.check input[type="checkbox"]:checked {
  background: var(--accent); border-color: var(--accent);
}
.check input[type="checkbox"]:checked::after {
  content: ""; position: absolute;
  left: 4px; top: 1px; width: 3px; height: 7px;
  border: solid #04221c; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Отдельная визуальная заметность для auto-reset — перед hooks group. */
.check--auto-reset {
  padding: 7px 10px;
  margin: 0 -10px 4px;
  border-radius: 7px;
  background: rgba(46, 230, 199, 0.04);
  border: 1px solid rgba(46, 230, 199, 0.14);
  border-bottom: 1px dashed var(--border);
}
.check--auto-reset:hover { background: rgba(46, 230, 199, 0.07); }
.check--auto-reset span { font-size: 12px; color: var(--text); }

.foot {
  padding-top: 8px;
  padding-bottom: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  border-top: 1px solid var(--border);
  margin-top: 2px;
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: var(--bg);
}

.foot__drgn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 210px;
  padding: 10px 20px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px dashed rgba(46, 230, 199, 0.55);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.foot__drgn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}
.foot__drgn-text { color: var(--text); }
.foot__drgn-go {
  color: var(--accent);
  font-weight: 800;
}