/* App-wide overrides for consistent cyberpunk styling */

/* Ensure all buttons follow cyberpunk style */
button {
  font-family: 'Orbitron', sans-serif;
}

/* Style Personalise Maths button to match Show Me Models button */
.personalize-btn {
  appearance: none;
  background: linear-gradient(135deg, #ff00ff, #ff0080) !important;
  color: #000 !important;
  border: none !important;
  padding: 10px 16px;
  border-radius: 0;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.15s ease;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  box-shadow: var(--glow-magenta, 0 0 10px rgba(255,0,255,.3)) !important;
}

.personalize-btn:hover {
  box-shadow: var(--glow-magenta, 0 0 10px rgba(255,0,255,.3)), 0 0 20px rgba(255,0,255,.2) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

/* Style Art Direction button with gradient */
#artBtn,
.btn-rose {
  appearance: none;
  background: linear-gradient(135deg, var(--accent-purple, #9945ff), var(--accent-blue, #00d4ff)) !important;
  color: #000 !important;
  border: none !important;
  padding: 10px 16px;
  border-radius: 0;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.15s ease;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  box-shadow: var(--glow-purple, 0 0 10px rgba(153,69,255,.3)) !important;
}

#artBtn:hover,
.btn-rose:hover {
  box-shadow: var(--glow-purple, 0 0 10px rgba(153,69,255,.3)), 0 0 20px rgba(153,69,255,.2) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

.personalize-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

#artBtn:active,
.btn-rose:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Override any conflicting styles from focus.js or other modules */
.btn.primary.personalize-btn {
  background: linear-gradient(135deg, #ff00ff, #ff0080) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 0 !important;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px) !important;
}

button.btn-rose {
  background: linear-gradient(135deg, var(--accent-purple, #9945ff), var(--accent-blue, #00d4ff)) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 0 !important;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px) !important;
}