.pill-group { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.pill, .btn { border: 0; cursor: pointer; border-radius: 999px; padding: 9px 15px; background: transparent; color: var(--text-2); transition: .18s ease; white-space: nowrap; }
.pill:hover, .btn:hover { color: var(--text); background: var(--surface-3); }
.pill.active, .btn-primary { color: #041413; background: var(--tap-cyan); font-weight: 700; }
.btn-primary:hover { color: #041413; background: #37e0d5; }
.btn-outline { border: 1px solid var(--line-strong); color: var(--text); background: var(--surface-2); }
.icon-btn { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; cursor: pointer; }
.field { display: grid; gap: 6px; min-width: 128px; }
.field label { font-size: 12px; color: var(--text-3); }
.input, .select { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); padding: 10px 12px; min-height: 40px; }
.range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.range span { color: var(--text-3); }
.tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 11px; color: var(--text-2); background: var(--surface-3); }
.tag-cyan { color: var(--tap-cyan); background: var(--tap-cyan-soft); }
.quality-banner { margin: 16px 0; padding: 12px 16px; border: 1px solid rgba(255,174,56,.28); border-radius: var(--radius-sm); background: rgba(255,174,56,.08); color: #ffd18d; }
.empty { padding: 70px 20px; text-align: center; color: var(--text-2); }
.skeleton { overflow: hidden; background: var(--surface-2); position: relative; }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }