/* ── Audio Therapy ── */

.at-presets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.at-preset-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  cursor: pointer;
  transition: all var(--transition-normal);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}
.at-preset-btn i {
  font-size: var(--font-size-lg);
  opacity: 0.7;
}
.at-preset-btn:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.at-preset-btn:hover i { opacity: 1; }

.at-preset-btn.at-preset-active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--text-inverse);
  box-shadow: var(--shadow-md);
  animation: at-pulse 2s ease-in-out infinite;
}
.at-preset-btn.at-preset-active i { opacity: 1; }

@keyframes at-pulse {
  0%, 100% { box-shadow: var(--shadow-md); }
  50% { box-shadow: 0 0 12px color-mix(in srgb, var(--color-brand) 40%, transparent); }
}

/* A/B test protocol checkboxes */
.ab-proto-label {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color var(--transition-normal);
}
.ab-proto-label:has(input:checked) {
  border-color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 8%, transparent);
}

/* Progress bar */
.at-progress-track {
  width: 100%; height: 6px;
  background: var(--bg-hover);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.at-progress-bar {
  height: 100%; width: 0;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  transition: width 1s linear;
}

/* Mobile: 2 columns */
@media (max-width: 480px) {
  .at-presets-grid { grid-template-columns: repeat(2, 1fr); }
}