.pill-group {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.pill,
.btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.pill:hover,
.btn:hover { color: var(--text); background: var(--surface-3); }

.pill.active,
.pill[aria-pressed="true"] {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
}

.btn-primary {
  border-color: var(--tap-cyan-strong);
  background: var(--tap-cyan-strong);
  color: #ffffff;
  font-weight: 700;
}

.btn-primary:hover { background: #067d79; color: #ffffff; }
.btn-outline { border-color: var(--line-strong); background: var(--surface); color: var(--text); }

.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
}

.icon-btn:hover { color: var(--text); background: var(--surface-2); }
.field { display: grid; gap: 6px; min-width: 128px; }
.field label { color: var(--text-3); font-size: 11px; }

.input,
.select {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: 12px/1.4 var(--font);
}

.input::placeholder { color: var(--text-3); }
.range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.range span { color: var(--text-3); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: var(--radius-xs);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 10px;
}

.tag-cyan { background: var(--tap-cyan-soft); color: var(--tap-cyan-strong); }
.quality-banner { margin: 12px 0 0; border: 1px solid #ecd5aa; border-radius: var(--radius-sm); background: #fff8ed; color: #744100; }
.quality-banner summary { padding: 9px 12px; cursor: pointer; font-size: 11px; list-style-position: inside; }
.quality-banner p { margin: 0; padding: 0 12px 11px; color: #744100; font-size: 11px; line-height: 1.6; }
.empty { padding: 70px 20px; color: var(--text-2); text-align: center; }
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); }
.skeleton::after { content: ""; position: absolute; inset-block: 0; left: -35%; width: 35%; background: rgba(255, 255, 255, .72); animation: skeleton-shift 1.4s infinite; }
@keyframes skeleton-shift { to { transform: translateX(390%); } }