/* ==========================================================
   ALEX SELLER — Core Design System
   Dark glassmorphism / purple-pink neon theme
   ========================================================== */

:root{
  /* Brand */
  --c-primary:      #a855f7;
  --c-primary-2:    #7c3aed;
  --c-accent:       #ec4899;
  --c-accent-2:     #f472b6;
  --c-orange:       #fb923c;

  --c-success:      #22c55e;
  --c-warning:      #facc15;
  --c-danger:       #f43f5e;

  /* Surfaces */
  --bg-base:        #0a0611;
  --bg-elevated:    #120b1f;
  --bg-glass:       rgba(255,255,255,0.045);
  --bg-glass-strong: rgba(255,255,255,0.08);
  --border-glass:   rgba(255,255,255,0.09);
  --border-glow:    rgba(168,85,247,0.45);

  /* Text */
  --text-primary:   #f5f3fa;
  --text-secondary: #b8b0c9;
  --text-muted:     #7a7290;

  /* Effects */
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --shadow-soft: 0 8px 30px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 40px rgba(168,85,247,0.25);
  --glow-pink:   0 0 30px rgba(236,72,153,0.35);
  --transition:  all 0.25s cubic-bezier(.4,0,.2,1);

  --grad-primary: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 100%);
  --grad-orange:  linear-gradient(135deg, var(--c-orange) 0%, var(--c-primary) 100%);
  --font-heading: 'Space Grotesk', 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;
}

/* Theme variants — swapped via body[data-theme] */
body[data-theme="blue-neon"]    { --c-primary:#3b82f6; --c-primary-2:#2563eb; --c-accent:#06b6d4; --c-accent-2:#22d3ee; }
body[data-theme="green-neon"]   { --c-primary:#22c55e; --c-primary-2:#16a34a; --c-accent:#a3e635; --c-accent-2:#4ade80; }
body[data-theme="red-neon"]     { --c-primary:#f43f5e; --c-primary-2:#e11d48; --c-accent:#fb7185; --c-accent-2:#fda4af; }
body[data-theme="orange-neon"]  { --c-primary:#fb923c; --c-primary-2:#f97316; --c-accent:#facc15; --c-accent-2:#fde047; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height:1.6;
  position: relative;
  overflow-x: hidden;
}

/* Animated ambient background blobs */
body::before, body::after{
  content:"";
  position:fixed;
  width:45vw; height:45vw;
  border-radius:50%;
  filter: blur(120px);
  opacity:0.25;
  z-index:-1;
  animation: floatBlob 18s ease-in-out infinite;
}
body::before{ background: var(--c-primary); top:-10%; left:-10%; }
body::after{ background: var(--c-accent); bottom:-15%; right:-10%; animation-delay:4s; }

@keyframes floatBlob{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(40px,-30px) scale(1.1); }
}

h1,h2,h3,h4,h5,h6{ font-family: var(--font-heading); font-weight:700; margin:0 0 .5em; letter-spacing:-0.02em; }
p{ color: var(--text-secondary); }
a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{ width:100%; max-width:1240px; margin:0 auto; padding:0 20px; }
.section{ padding:80px 0; position:relative; }

/* ---------------- Glass surfaces ---------------- */
.glass-card{
  background: var(--bg-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}
.glass-card:hover{ border-color: var(--border-glow); }

.glass-panel{
  background: var(--bg-glass-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-xl);
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight:600;
  font-size:15px;
  border:none;
  cursor:pointer;
  transition: var(--transition);
  position:relative;
  overflow:hidden;
  white-space:nowrap;
}
.btn:active{ transform: scale(0.97); }

.btn-gradient{
  background: var(--grad-primary);
  color:#fff;
  box-shadow: 0 8px 24px rgba(168,85,247,0.35);
}
.btn-gradient:hover{
  box-shadow: 0 8px 34px rgba(236,72,153,0.5);
  transform: translateY(-2px);
}
.btn-gradient::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
}
.btn-gradient:hover::after{ transform: translateX(120%); }

.btn-outline{
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border-glass);
}
.btn-outline:hover{ border-color: var(--c-primary); box-shadow: 0 0 18px rgba(168,85,247,0.25); }

.btn-secondary{ background: var(--bg-glass-strong); color: var(--text-primary); }
.btn-danger{ background: var(--c-danger); color:#fff; }
.btn-sm{ padding:9px 18px; font-size:13px; }
.btn-lg{ padding:18px 38px; font-size:17px; }
.btn-icon{ width:44px; height:44px; padding:0; border-radius:50%; }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }
.btn-loading{ pointer-events:none; opacity:0.7; }

/* ---------------- Badges / Tags ---------------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size:12px; font-weight:600;
  background: var(--bg-glass-strong);
  border:1px solid var(--border-glass);
}
.badge-glow{ box-shadow: 0 0 16px currentColor; }
.tag-pulse{ animation: tagPulse 1.6s ease-in-out infinite; }
.tag-glow{ animation: tagGlow 2s ease-in-out infinite; }
.tag-bounce{ animation: tagBounce 1.4s ease-in-out infinite; }
.tag-shine{ position:relative; overflow:hidden; }
@keyframes tagPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.06);} }
@keyframes tagGlow{ 0%,100%{ filter:drop-shadow(0 0 2px currentColor);} 50%{ filter:drop-shadow(0 0 9px currentColor);} }
@keyframes tagBounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-3px);} }

/* ---------------- Forms ---------------- */
.field{ position:relative; margin-bottom:20px; }
.field input, .field select, .field textarea{
  width:100%;
  padding: 16px 16px 8px;
  background: var(--bg-glass);
  border: 1.5px solid var(--border-glass);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size:15px;
  transition: var(--transition);
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(168,85,247,0.18);
}
.field label{
  position:absolute; left:16px; top:16px;
  color: var(--text-muted); font-size:15px;
  pointer-events:none;
  transition: var(--transition);
  background:transparent;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  top:6px; font-size:11px; color: var(--c-primary);
}
.field-hint{ font-size:12px; color: var(--text-muted); margin-top:4px; }
.field-error{ font-size:12px; color: var(--c-danger); margin-top:4px; }

/* ---------------- Scrollbar ---------------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--bg-base); }
::-webkit-scrollbar-thumb{ background: var(--c-primary-2); border-radius:10px; }

/* ---------------- Utility ---------------- */
.text-gradient{
  background: var(--grad-primary);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.text-muted{ color: var(--text-muted); }
.flex{ display:flex; }
.flex-center{ display:flex; align-items:center; justify-content:center; }
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }

@media (max-width: 992px){ .grid-4{ grid-template-columns: repeat(2,1fr);} .grid-3{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; } .section{ padding:56px 0; } }

/* ---------------- Skeleton loading ---------------- */
.skeleton{
  background: linear-gradient(90deg, var(--bg-glass) 25%, var(--bg-glass-strong) 37%, var(--bg-glass) 63%);
  background-size: 400% 100%;
  animation: skeletonLoad 1.4s ease infinite;
  border-radius: var(--radius-md);
}
@keyframes skeletonLoad{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* ---------------- Toasts ---------------- */
.toast-stack{ position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:12px; }
.toast{
  min-width:280px; max-width:340px;
  padding:14px 18px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border:1px solid var(--border-glass);
  box-shadow: var(--shadow-soft);
  display:flex; gap:12px; align-items:flex-start;
  animation: toastIn 0.35s ease;
}
@keyframes toastIn{ from{ opacity:0; transform: translateX(30px);} to{ opacity:1; transform: translateX(0);} }
.toast.success{ border-left:3px solid var(--c-success); }
.toast.error{ border-left:3px solid var(--c-danger); }
.toast.warning{ border-left:3px solid var(--c-warning); }
.toast.info{ border-left:3px solid var(--c-primary); }

/* ---------------- Modal ---------------- */
.modal-overlay{
  position:fixed; inset:0; background: rgba(5,2,10,0.7);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  z-index:9998; opacity:0; pointer-events:none;
  transition: opacity 0.25s ease;
}
.modal-overlay.active{ opacity:1; pointer-events:auto; }
.modal-box{
  transform: scale(0.92); transition: transform 0.25s ease;
  max-width: 520px; width:92%; max-height:88vh; overflow-y:auto;
  padding:28px;
}
.modal-overlay.active .modal-box{ transform: scale(1); }

/* ---------------- Maintenance page ---------------- */
.maintenance-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.maintenance-card{ text-align:center; padding:48px; max-width:440px; }
.maintenance-icon{ font-size:48px; margin-bottom:16px; }