/* ==========================================================
     3. ОБЩИЕ КОНТРОЛЫ
     ========================================================== */

  .action-btn {
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    color: var(--text);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    height: var(--ctrl-h);
    padding: 0 16px;
    cursor: pointer;
    transition: background-color .08s, border-color .08s, color .08s;
  }

  .action-btn:hover:not(:disabled) { background: var(--surface-3); border-color: var(--accent); color: var(--accent); }
  .action-btn:disabled { opacity: .4; cursor: not-allowed; }

  .text-btn {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line-strong);
    color: var(--text-dim);
    font-size: 12px;
    padding: 1px 2px;
    cursor: pointer;
  }

  .text-btn:hover { color: var(--accent); border-bottom-color: var(--accent); }

  .field { display: flex; flex-direction: column; gap: var(--sp-1); }

  .field label, .field__spacer {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  .field input, .field select {
    background: var(--surface-1);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 14px;
    height: var(--ctrl-h);
    padding: 0 10px;
  }

  .field input::placeholder { color: var(--text-faint); }
  .field input:hover, .field select:hover { border-color: var(--line-strong); }

  .toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: flex-end;
  }

  .toolbar .field { min-width: 150px; }
  .toolbar .field.grow { flex: 1 1 260px; }

  /* Чип — главный элемент интерфейса фильтров. Шесть состояний, и ни
     одно не закодировано единственным каналом (у конкурента включённый
     тумблер отличался ТОЛЬКО глифом ✘/✔). */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--chip-h);
    padding: 0 9px;
    background: var(--surface-1);
    border: 1px solid var(--line);
    color: var(--text-dim);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .03em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .08s, border-color .08s, color .08s;
  }

  .chip:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--text); }

  .chip.is-on {
    background: var(--surface-3);
    border-color: var(--accent);
    color: var(--text);
    box-shadow: inset 0 -2px 0 var(--accent);
  }

  /* Слот под будущий счётчик «сколько квестов пройдёт при нажатии».
     Честно посчитать его можно только на сервере (нужны фасеты с
     учётом остальных активных фильтров) — разметка и место готовы,
     дорисовать останется одно число. */
  .chip__n {
    font-size: 11px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
  }

  .chip.is-on .chip__n { color: var(--accent); }

  /* Трёхпозиционный переключатель: не важно / только эти / исключить.
     Состояние несут одновременно глиф, цвет текста и цвет рамки — плюс
     aria-label в разметке. У конкурента третьего состояния нет вовсе,
     «показать всё, КРОМЕ сюжетных» там задать нельзя. */
  .chip--tri .chip__glyph {
    width: 11px;
    text-align: center;
    font-size: 12px;
  }

  .chip--tri.is-only {
    background: var(--surface-3);
    border-color: var(--ok);
    color: var(--ok);
    box-shadow: inset 0 -2px 0 var(--ok);
  }

  .chip--tri.is-not {
    background: var(--surface-3);
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: inset 0 -2px 0 var(--danger);
    text-decoration: line-through;
    text-decoration-color: var(--danger);
  }

  .toggle-btn {
    background: var(--surface-1);
    border: 1px solid var(--line);
    color: var(--text-dim);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: .04em;
    padding: 0 10px;
    height: var(--ctrl-h);
    cursor: pointer;
  }

  .toggle-btn:hover { border-color: var(--line-strong); color: var(--text); }

  .toggle-btn.active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--surface-3);
  }

  .save-flag { font-size: 12px; color: var(--danger); margin-left: var(--sp-2); }

  .status-block {
    padding: 48px 16px;
    text-align: center;
  }

  .status-block.compact { padding: 24px 16px; }

  .status-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 var(--sp-2);
  }

  .status-block.is-error .status-title { color: var(--danger); }

  .status-text {
    color: var(--text-dim);
    font-size: 13px;
    max-width: 520px;
    margin: 0 auto var(--sp-4);
    line-height: 1.5;
  }

  .status-text code {
    color: var(--text);
    background: var(--surface-2);
    padding: 1px 5px;
  }

  .pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    flex-wrap: wrap;
  }

  .pagination__label {
    color: var(--text-dim);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    margin-right: auto;
  }

  .page-btn {
    background: var(--surface-1);
    border: 1px solid var(--line);
    color: var(--text-dim);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    height: 28px;
    padding: 0 12px;
    cursor: pointer;
  }

  .page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  .page-btn:disabled { opacity: .35; cursor: not-allowed; }

  .section-heading {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
    margin: var(--sp-6) 0 var(--sp-1);
  }

  .section-hint { color: var(--text-dim); font-size: 13px; margin: 0 0 var(--sp-2); line-height: 1.5; }