/* ── Filter Bar ────────────────────────────────────── */
    .filter-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 24px;
      background: rgba(9,9,11,0.4);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
      font-size: 11px;
    }
    .filter-bar label {
      color: var(--text-dim);
      font-size: 10px;
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 500;
    }
    .filter-bar input {
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      padding: 5px 10px;
      font-size: 12px;
      width: 88px;
      outline: none;
      transition: all var(--transition-fast);
    }
    .filter-bar input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
    .filter-bar input::placeholder { color: var(--text-dim); }
    .filter-bar input.brand-input { width: 140px; }
    .filter-bar .filter-toggle {
      margin-left: auto;
    }
    .filter-bar .filter-count {
      color: var(--text-dim);
      font-size: 10px;
    }

/* ── Filter bar: inline compact ───────────────────── */
      .filter-bar {
        padding: 6px 10px;
        gap: 6px;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .filter-bar::-webkit-scrollbar { display: none; }
      .filter-bar label {
        font-size: 9px;
        flex-shrink: 0;
      }
      .filter-bar input {
        min-width: 60px;
        width: 70px;
        padding: 5px 8px;
        font-size: 13px;
        min-height: 32px;
        flex-shrink: 0;
      }
      .filter-bar input.brand-input {
        width: 100px;
        flex: 1;
      }
      .filter-bar .filter-count {
        font-size: 9px;
        flex-shrink: 0;
      }