/* --- Buttons ---
   Idle: prominent dark-blue body with a visible accent border and soft blue aura.
   Hover: subtle lift and shadow deepening. */

.btn-accent,
.btn-outline-accent {
  position: relative;
  display: inline-block;
  border-radius: var(--radius-md);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    color var(--transition);
}

/* Solid variant — dark body, persistent accent border, blue aura */
.btn-accent {
  background-color: var(--bg-card);
  border: 1px solid var(--accent-deep);
  box-shadow:
    0 6px 22px -8px rgba(61, 147, 237, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.btn-accent:hover {
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px -8px rgba(61, 147, 237, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.btn-accent:active {
  transform: translateY(0);
}

/* Outline variant — translucent body, softer idle border */
.btn-outline-accent {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px -10px rgba(0, 0, 0, 0.4);
}

.btn-outline-accent:hover {
  color: #fff;
  border-color: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -10px rgba(61, 147, 237, 0.35);
}

.btn-outline-accent:active {
  transform: translateY(0);
}

/* Trailing arrow — icon-cycle swap on hover (see main.css) */
.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-arrow .icon-cycle {
  width: 18px;
  height: 18px;
}