.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.2rem 0.8rem;
  font-weight: var(--btn-font-weight);
  font-size: var(--btn-font-size);
  border-radius: var(--btn-radius);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
}

.btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: currentColor;
}

.btn-primary {
  background: var(--accent-primary);
  color: white;
}

.btn-primary:hover {
  background: #ff7a42;
  transform: translateY(-2px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-secondary.active {
  background: rgba(255, 106, 43, 0.16);
  border-color: rgba(255, 106, 43, 0.42);
  color: var(--text-primary);
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(calc(var(--glass-blur) * 0.9)) saturate(1.2);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.9)) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-glass:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
}