/* ── Base ─────────────────────────────────────── */
* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

body {
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* ── Safe Areas (iOS) ────────────────────────── */
.h-safe-top {
  height: env(safe-area-inset-top, 0px);
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 8px);
}

/* ── Glass Card ──────────────────────────────── */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ── Scrollbar Hide ──────────────────────────── */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ── Custom Range Slider ─────────────────────── */
.custom-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
  transition: background 0.2s;
}

.custom-range:hover {
  background: rgba(255, 255, 255, 0.12);
}

.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}

.custom-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.6);
}

.custom-range::-webkit-slider-thumb:active {
  transform: scale(1.25);
}

.custom-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}

.custom-range::-moz-range-thumb:hover {
  transform: scale(1.15);
}

/* ── Generate Button ─────────────────────────── */
.generate-btn {
  background: linear-gradient(135deg, #9333ea, #4f46e5);
  box-shadow: 0 4px 24px rgba(139, 92, 246, 0.3);
  position: relative;
  overflow: hidden;
}

.generate-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.generate-btn:hover::before {
  transform: translateX(100%);
}

.generate-btn:active {
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.4);
}

/* ── Animations ──────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.4s ease-out;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ── Glow Effects ────────────────────────────── */
.glow-purple {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.15),
              0 0 40px rgba(139, 92, 246, 0.05);
}

/* ── Touch Targets ───────────────────────────── */
button, a, [role="button"] {
  min-height: 44px;
  min-width: 44px;
}

/* Exception for inline elements */
.inline-btn {
  min-height: unset;
  min-width: unset;
}

/* ── Textarea ────────────────────────────────── */
textarea {
  color-scheme: dark;
}

textarea::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

/* ── Image Grid Hover ────────────────────────── */
@media (hover: hover) {
  .group:hover .group-hover\:opacity-100 {
    opacity: 1;
  }
}

/* Mobile: always show overlay */
@media (hover: none) {
  .group .group-hover\:opacity-100 {
    opacity: 1;
  }
}

/* ── Background Noise ────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
                    radial-gradient(circle at 50% 80%, rgba(168, 85, 247, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

/* ── Scrollbar (Desktop) ─────────────────────── */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ── Number Input ────────────────────────────── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  color-scheme: dark;
}