/* ========================================
   PREMIUM DARK THEME
   Nike + Cyberpunk • Minimalist • Premium
   ======================================== */

:root {
  /* ========================================
     COLORS - PREMIUM DARK PALETTE
     ======================================== */
  
  /* Base (90% of screen) */
  --pd-bg-primary: #000000;           /* Pure black background */
  --pd-bg-secondary: #0A0A0F;         /* Almost black */
  --pd-bg-card: #12121A;              /* Dark gray cards */
  --pd-bg-elevated: #1A1A24;          /* Elevated elements (dashboard, modals) */
  --pd-bg-hover: #24243A;             /* Hover state */
  
  /* Accents (10% of screen) */
  --pd-accent-primary: #FF6B35;       /* Nike Orange - CTA, hover, active */
  --pd-accent-blue: #4A5FD9;          /* Back exercises */
  --pd-accent-purple: #6B4BA2;        /* Arms exercises */
  --pd-accent-pink: #C43D7D;          /* Core, XP */
  --pd-accent-green: #10B981;         /* Legs exercises */
  --pd-accent-amber: #F59E0B;         /* Shoulders exercises */
  
  /* Text */
  --pd-text-primary: #FFFFFF;         /* Headings, important text */
  --pd-text-secondary: #A0A0B0;       /* Body text, descriptions */
  --pd-text-muted: #606070;           /* Secondary text, labels */
  
  /* Borders & Shadows */
  --pd-border-subtle: rgba(255, 255, 255, 0.1);
  --pd-border-medium: rgba(255, 255, 255, 0.2);
  --pd-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --pd-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --pd-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  
  /* Glow Effects */
  --pd-glow-orange: 0 0 24px rgba(255, 107, 53, 0.3);
  --pd-glow-blue: 0 0 24px rgba(74, 95, 217, 0.3);
  --pd-glow-purple: 0 0 24px rgba(107, 75, 162, 0.3);
  --pd-glow-pink: 0 0 24px rgba(196, 61, 125, 0.3);
  
  /* ========================================
     TYPOGRAPHY
     ======================================== */
  
  --pd-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Font Sizes */
  --pd-text-xs: 0.75rem;      /* 12px */
  --pd-text-sm: 0.875rem;     /* 14px */
  --pd-text-base: 1rem;       /* 16px */
  --pd-text-lg: 1.125rem;     /* 18px */
  --pd-text-xl: 1.25rem;      /* 20px */
  --pd-text-2xl: 1.5rem;      /* 24px */
  --pd-text-3xl: 1.875rem;    /* 30px */
  --pd-text-4xl: 2.25rem;     /* 36px */
  
  /* Font Weights */
  --pd-font-normal: 400;
  --pd-font-medium: 500;
  --pd-font-semibold: 600;
  --pd-font-bold: 700;
  --pd-font-black: 900;
  
  /* ========================================
     SPACING (8px system)
     ======================================== */
  
  --pd-space-1: 0.5rem;       /* 8px */
  --pd-space-2: 1rem;         /* 16px */
  --pd-space-3: 1.5rem;       /* 24px */
  --pd-space-4: 2rem;         /* 32px */
  --pd-space-6: 3rem;         /* 48px */
  --pd-space-8: 4rem;         /* 64px */
  
  /* ========================================
     BORDER RADIUS
     ======================================== */
  
  --pd-radius-sm: 8px;
  --pd-radius-md: 12px;
  --pd-radius-lg: 16px;
  --pd-radius-xl: 24px;
  --pd-radius-full: 9999px;
  
  /* ========================================
     TRANSITIONS
     ======================================== */
  
  --pd-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --pd-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --pd-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   BASE STYLES
   ======================================== */

body {
  background: var(--pd-bg-primary) !important;
  color: var(--pd-text-secondary) !important;
  font-family: var(--pd-font-primary) !important;
}

/* Override existing backgrounds */
.container,
#app,
.app-container {
  background: var(--pd-bg-primary) !important;
  /* Subtle edge glow for container */
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02) !important;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  color: var(--pd-text-primary) !important;
  font-weight: var(--pd-font-bold) !important;
}

h1 { font-size: var(--pd-text-4xl) !important; }
h2 { font-size: var(--pd-text-3xl) !important; }
h3 { font-size: var(--pd-text-2xl) !important; }
h4 { font-size: var(--pd-text-xl) !important; }

p, span, div {
  color: var(--pd-text-secondary);
}

.text-muted,
.secondary-text {
  color: var(--pd-text-muted) !important;
}

/* ========================================
   EXERCISE CARDS - PREMIUM DARK
   ======================================== */

.exercise-card,
.workout-card {
  background: var(--pd-bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--pd-radius-lg) !important;
  padding: var(--pd-space-3) !important;
  position: relative;
  overflow: hidden;
  transition: all var(--pd-transition-base) !important;
  /* Subtle inset shadow to reduce emptiness */
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Accent bar on left (4px) - OVERRIDE ALL PREVIOUS STYLES */
.exercise-card::before,
.workout-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: var(--accent-color, var(--pd-accent-primary)) !important;
  opacity: 0 !important;
  transform: scaleY(0) !important;
  transform-origin: top !important;
  transition: all var(--pd-transition-slow) !important;
  border-radius: var(--pd-radius-lg) 0 0 var(--pd-radius-lg) !important;
  display: block !important;
}

.exercise-card:hover::before,
.workout-card:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.exercise-card:hover,
.workout-card:hover {
  background: var(--pd-bg-hover) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-4px);
  /* Enhanced glow with inset highlight */
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 107, 53, 0.2),
    var(--pd-glow-orange) !important;
}

/* Exercise title */
.exercise-card h3,
.exercise-card h4,
.workout-card h3,
.workout-card h4,
.exercise-name {
  color: var(--pd-text-primary) !important;
  font-size: var(--pd-text-xl) !important;
  font-weight: var(--pd-font-bold) !important;
  margin-bottom: var(--pd-space-1) !important;
  transition: text-shadow var(--pd-transition-base);
}

.exercise-card:hover h3,
.exercise-card:hover h4,
.workout-card:hover h3,
.workout-card:hover h4,
.exercise-card:hover .exercise-name {
  text-shadow: 0 0 12px rgba(255, 107, 53, 0.4);
}

/* Exercise meta (sets, reps, etc) */
.exercise-meta,
.exercise-info {
  color: var(--pd-text-secondary) !important;
  font-size: var(--pd-text-sm) !important;
  margin-bottom: var(--pd-space-2) !important;
}

/* Muscle group colors for accent bars - SET CSS VARIABLE */
.exercise-card[data-muscle="chest"],
.exercise-card[data-muscle="triceps"] { 
  --accent-color: var(--pd-accent-primary);
}

.exercise-card[data-muscle="chest"]::before,
.exercise-card[data-muscle="triceps"]::before { 
  background: var(--pd-accent-primary) !important; 
}

.exercise-card[data-muscle="back"],
.exercise-card[data-muscle="biceps"] { 
  --accent-color: var(--pd-accent-blue);
}

.exercise-card[data-muscle="back"]::before,
.exercise-card[data-muscle="biceps"]::before { 
  background: var(--pd-accent-blue) !important; 
}

.exercise-card[data-muscle="legs"],
.exercise-card[data-muscle="quads"],
.exercise-card[data-muscle="hamstrings"] { 
  --accent-color: var(--pd-accent-green);
}

.exercise-card[data-muscle="legs"]::before,
.exercise-card[data-muscle="quads"]::before,
.exercise-card[data-muscle="hamstrings"]::before { 
  background: var(--pd-accent-green) !important; 
}

.exercise-card[data-muscle="shoulders"] { 
  --accent-color: var(--pd-accent-amber);
}

.exercise-card[data-muscle="shoulders"]::before { 
  background: var(--pd-accent-amber) !important; 
}

.exercise-card[data-muscle="arms"] { 
  --accent-color: var(--pd-accent-purple);
}

.exercise-card[data-muscle="arms"]::before { 
  background: var(--pd-accent-purple) !important; 
}

.exercise-card[data-muscle="core"],
.exercise-card[data-muscle="abs"] { 
  --accent-color: var(--pd-accent-pink);
}

.exercise-card[data-muscle="core"]::before,
.exercise-card[data-muscle="abs"]::before { 
  background: var(--pd-accent-pink) !important; 
}

/* Glow colors by muscle group */
.exercise-card[data-muscle="chest"]:hover,
.exercise-card[data-muscle="triceps"]:hover {
  box-shadow: var(--pd-glow-orange);
}

.exercise-card[data-muscle="back"]:hover,
.exercise-card[data-muscle="biceps"]:hover {
  box-shadow: var(--pd-glow-blue);
}

.exercise-card[data-muscle="legs"]:hover,
.exercise-card[data-muscle="quads"]:hover,
.exercise-card[data-muscle="hamstrings"]:hover {
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.3);
}

.exercise-card[data-muscle="shoulders"]:hover {
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.3);
}

.exercise-card[data-muscle="arms"]:hover {
  box-shadow: var(--pd-glow-purple);
}

.exercise-card[data-muscle="core"]:hover,
.exercise-card[data-muscle="abs"]:hover {
  box-shadow: var(--pd-glow-pink);
}

/* ========================================
   DASHBOARD STATS - PREMIUM DARK
   ======================================== */

.dashboard,
.stats-container,
.progress-dashboard {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(26, 26, 36, 0.95)) !important;
  background-size: 200% 200%;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
  border-radius: var(--pd-radius-xl) !important;
  padding: var(--pd-space-4) !important;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Stat cards */
.stat-card,
.progress-card {
  background: var(--pd-bg-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--pd-radius-lg) !important;
  padding: var(--pd-space-3) !important;
  position: relative;
  overflow: hidden;
  transition: all var(--pd-transition-base) !important;
  /* Inset shadow for depth */
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Top accent bar (3px) */
.stat-card::before,
.progress-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--stat-color, var(--pd-accent-primary));
  opacity: 0;
  transition: opacity var(--pd-transition-base);
}

.stat-card:hover::before,
.progress-card:hover::before {
  opacity: 1;
  animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.stat-card:hover,
.progress-card:hover {
  background: var(--pd-bg-hover) !important;
  transform: translateY(-4px);
  box-shadow: var(--pd-shadow-lg);
}

/* Stat values */
.stat-value,
.stat-number {
  color: var(--pd-text-primary) !important;
  font-size: var(--pd-text-4xl) !important;
  font-weight: var(--pd-font-black) !important;
  transition: transform var(--pd-transition-base);
}

.stat-card:hover .stat-value,
.stat-card:hover .stat-number {
  transform: scale(1.05);
}

/* Stat labels */
.stat-label,
.stat-title {
  color: var(--pd-text-muted) !important;
  font-size: var(--pd-text-xs) !important;
  font-weight: var(--pd-font-semibold) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Stat icons */
.stat-icon {
  font-size: var(--pd-text-4xl);
  transition: transform var(--pd-transition-base);
  display: inline-block;
}

.stat-card:hover .stat-icon {
  transform: scale(1.15) rotate(5deg);
}

/* ========================================
   BUTTONS - PREMIUM DARK
   ======================================== */

.btn,
button {
  padding: var(--pd-space-2) var(--pd-space-4) !important;
  border-radius: var(--pd-radius-md) !important;
  font-size: var(--pd-text-base) !important;
  font-weight: var(--pd-font-bold) !important;
  border: none !important;
  cursor: pointer;
  transition: all var(--pd-transition-base) !important;
  position: relative;
  overflow: hidden;
}

/* Primary button (Orange) */
.btn-primary,
.btn.primary,
button[type="submit"] {
  background: linear-gradient(135deg, var(--pd-accent-primary) 0%, #FF8A5C 100%) !important;
  background-size: 200% 200%;
  color: #000000 !important;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.btn-primary:hover,
.btn.primary:hover,
button[type="submit"]:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

/* Ripple effect */
.btn-primary::after,
button[type="submit"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-primary:active::after,
button[type="submit"]:active::after {
  width: 300px;
  height: 300px;
  opacity: 0;
}

/* Secondary button */
.btn-secondary,
.btn.secondary {
  background: var(--pd-bg-elevated) !important;
  color: var(--pd-text-primary) !important;
  border: 1px solid var(--pd-border-medium) !important;
}

.btn-secondary:hover,
.btn.secondary:hover {
  background: var(--pd-bg-hover) !important;
  border-color: var(--pd-border-medium) !important;
  transform: translateY(-2px);
  box-shadow: var(--pd-glow-blue);
}

/* Ghost button */
.btn-ghost,
.btn.ghost {
  background: transparent !important;
  color: var(--pd-text-secondary) !important;
  border: 1px solid var(--pd-border-subtle) !important;
}

.btn-ghost:hover,
.btn.ghost:hover {
  color: var(--pd-text-primary) !important;
  border-color: var(--pd-border-medium) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.1);
}

/* ========================================
   FORMS & INPUTS - PREMIUM DARK
   ======================================== */

input,
textarea,
select {
  background: var(--pd-bg-card) !important;
  border: 1px solid var(--pd-border-subtle) !important;
  border-radius: var(--pd-radius-md) !important;
  color: var(--pd-text-primary) !important;
  padding: var(--pd-space-2) !important;
  font-size: var(--pd-text-base) !important;
  transition: all var(--pd-transition-base) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--pd-accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--pd-text-muted) !important;
}

/* ========================================
   BADGES - PREMIUM DARK
   ======================================== */

.badge,
.tag,
.muscle-badge {
  display: inline-block;
  padding: var(--pd-space-1) var(--pd-space-2);
  border-radius: var(--pd-radius-full);
  font-size: var(--pd-text-xs);
  font-weight: var(--pd-font-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--pd-border-subtle) !important;
  color: var(--pd-text-secondary) !important;
  transition: all var(--pd-transition-fast);
}

.badge:hover,
.tag:hover,
.muscle-badge:hover {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--pd-border-medium) !important;
  cursor: pointer;
}

/* Colored badges by muscle group */
.badge-chest,
.badge-triceps {
  background: rgba(255, 107, 53, 0.1) !important;
  color: var(--pd-accent-primary) !important;
  border-color: rgba(255, 107, 53, 0.3) !important;
}

.badge-back,
.badge-biceps {
  background: rgba(74, 95, 217, 0.1) !important;
  color: var(--pd-accent-blue) !important;
  border-color: rgba(74, 95, 217, 0.3) !important;
}

.badge-legs,
.badge-quads,
.badge-hamstrings {
  background: rgba(16, 185, 129, 0.1) !important;
  color: var(--pd-accent-green) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.badge-shoulders {
  background: rgba(245, 158, 11, 0.1) !important;
  color: var(--pd-accent-amber) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

.badge-arms {
  background: rgba(107, 75, 162, 0.1) !important;
  color: var(--pd-accent-purple) !important;
  border-color: rgba(107, 75, 162, 0.3) !important;
}

.badge-core,
.badge-abs {
  background: rgba(196, 61, 125, 0.1) !important;
  color: var(--pd-accent-pink) !important;
  border-color: rgba(196, 61, 125, 0.3) !important;
}

/* ========================================
   MODALS & OVERLAYS - PREMIUM DARK
   ======================================== */

.modal,
.overlay,
.popup {
  background: var(--pd-bg-elevated) !important;
  border: 1px solid var(--pd-border-subtle) !important;
  border-radius: var(--pd-radius-xl) !important;
  box-shadow: var(--pd-shadow-lg) !important;
}

.modal-backdrop,
.overlay-backdrop {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(8px);
}

/* ========================================
   SMOOTH SCROLL & PAGE LOAD
   ======================================== */

html {
  scroll-behavior: smooth;
}

/* Page load fade-in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.exercise-card,
.stat-card,
.workout-card {
  animation: fadeIn 0.6s ease-out;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-primary { color: var(--pd-text-primary) !important; }
.text-secondary { color: var(--pd-text-secondary) !important; }
.text-muted { color: var(--pd-text-muted) !important; }

.bg-primary { background: var(--pd-bg-primary) !important; }
.bg-card { background: var(--pd-bg-card) !important; }
.bg-elevated { background: var(--pd-bg-elevated) !important; }

.border-subtle { border: 1px solid var(--pd-border-subtle) !important; }
.border-medium { border: 1px solid var(--pd-border-medium) !important; }

.shadow-sm { box-shadow: var(--pd-shadow-sm) !important; }
.shadow-md { box-shadow: var(--pd-shadow-md) !important; }
.shadow-lg { box-shadow: var(--pd-shadow-lg) !important; }

.glow-orange { box-shadow: var(--pd-glow-orange) !important; }
.glow-blue { box-shadow: var(--pd-glow-blue) !important; }
.glow-purple { box-shadow: var(--pd-glow-purple) !important; }
.glow-pink { box-shadow: var(--pd-glow-pink) !important; }

/* ========================================
   HERO SECTION - PREMIUM DARK
   ======================================== */

.hero-landing {
  background: var(--pd-bg-primary) !important;
  padding: var(--pd-space-8) var(--pd-space-4) !important;
  /* Framed hero with subtle border */
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--pd-radius-xl) !important;
  /* Inset shadow for depth */
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 4px 16px rgba(0, 0, 0, 0.3) !important;
  margin-bottom: var(--pd-space-4) !important;
}

.hero-title {
  color: var(--pd-text-primary) !important;
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  font-weight: var(--pd-font-black) !important;
  line-height: 1.1 !important;
  margin-bottom: var(--pd-space-3) !important;
  background: linear-gradient(135deg, var(--pd-text-primary) 0%, var(--pd-accent-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  color: var(--pd-text-secondary) !important;
  font-size: var(--pd-text-lg) !important;
  line-height: 1.6 !important;
  margin-bottom: var(--pd-space-4) !important;
  max-width: 600px;
}

.hero-cta {
  background: linear-gradient(135deg, var(--pd-accent-primary) 0%, #FF8A5C 100%) !important;
  color: #000000 !important;
  padding: var(--pd-space-3) var(--pd-space-6) !important;
  border-radius: var(--pd-radius-md) !important;
  font-size: var(--pd-text-lg) !important;
  font-weight: var(--pd-font-bold) !important;
  border: none !important;
  cursor: pointer;
  transition: all var(--pd-transition-base) !important;
  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.4);
}

.hero-cta:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 32px rgba(255, 107, 53, 0.6);
}

.hero-badge {
  display: inline-block;
  padding: var(--pd-space-1) var(--pd-space-2);
  background: rgba(255, 107, 53, 0.1) !important;
  border: 1px solid rgba(255, 107, 53, 0.3) !important;
  border-radius: var(--pd-radius-full);
  color: var(--pd-accent-primary) !important;
  font-size: var(--pd-text-xs) !important;
  font-weight: var(--pd-font-bold) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--pd-space-2);
}

.hero-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--pd-space-3);
  margin-top: var(--pd-space-6);
}

.feature-card {
  background: var(--pd-bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--pd-radius-lg) !important;
  padding: var(--pd-space-3) !important;
  transition: all var(--pd-transition-base) !important;
  /* Dual outline: outer + inner */
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.feature-card:hover {
  background: var(--pd-bg-hover) !important;
  border-color: rgba(255, 107, 53, 0.3) !important;
  transform: translateY(-4px);
  /* Enhanced glow on hover */
  box-shadow: 
    0 0 0 1px rgba(255, 107, 53, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 24px rgba(255, 107, 53, 0.15),
    var(--pd-shadow-lg) !important;
}

.feature-title {
  color: var(--pd-text-primary) !important;
  font-size: var(--pd-text-lg) !important;
  font-weight: var(--pd-font-bold) !important;
  margin-bottom: var(--pd-space-1) !important;
}

.feature-description {
  color: var(--pd-text-secondary) !important;
  font-size: var(--pd-text-sm) !important;
}

/* ========================================
   HEADER - PREMIUM DARK
   ======================================== */

header {
  background: var(--pd-bg-card) !important;
  border-bottom: 1px solid var(--pd-border-subtle) !important;
  padding: var(--pd-space-3) var(--pd-space-4) !important;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
}

.header-title h1 {
  color: var(--pd-text-primary) !important;
  font-size: var(--pd-text-2xl) !important;
  font-weight: var(--pd-font-black) !important;
  margin: 0 !important;
}

.subtitle {
  color: var(--pd-text-muted) !important;
  font-size: var(--pd-text-sm) !important;
  margin-top: var(--pd-space-1) !important;
}

/* ========================================
   CARD SECTIONS - PREMIUM DARK
   ======================================== */

.card,
section.card {
  background: var(--pd-bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  /* Top accent line */
  border-top: 2px solid rgba(255, 107, 53, 0.25) !important;
  border-radius: var(--pd-radius-xl) !important;
  padding: var(--pd-space-4) !important;
  margin-bottom: var(--pd-space-4) !important;
  transition: all var(--pd-transition-base) !important;
  /* Subtle inset shadow for depth */
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.card h2 {
  color: var(--pd-text-primary) !important;
  font-size: var(--pd-text-3xl) !important;
  font-weight: var(--pd-font-black) !important;
  margin-bottom: var(--pd-space-3) !important;
}

/* ========================================
   PROFILE DRAWER - PREMIUM DARK
   ======================================== */

.profile-drawer {
  background: var(--pd-bg-elevated) !important;
  border-left: 1px solid var(--pd-border-subtle) !important;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5) !important;
}

.drawer-header {
  background: var(--pd-bg-card) !important;
  border-bottom: 1px solid var(--pd-border-subtle) !important;
  padding: var(--pd-space-3) var(--pd-space-4) !important;
}

.drawer-title {
  color: var(--pd-text-primary) !important;
  font-size: var(--pd-text-2xl) !important;
  font-weight: var(--pd-font-black) !important;
  margin: 0 !important;
}

.drawer-close {
  background: transparent !important;
  border: 1px solid var(--pd-border-subtle) !important;
  color: var(--pd-text-secondary) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--pd-radius-md) !important;
  font-size: var(--pd-text-xl) !important;
  cursor: pointer;
  transition: all var(--pd-transition-base) !important;
}

.drawer-close:hover {
  background: var(--pd-bg-hover) !important;
  border-color: var(--pd-accent-primary) !important;
  color: var(--pd-accent-primary) !important;
  transform: rotate(90deg);
}

.drawer-content {
  padding: var(--pd-space-4) !important;
}

.drawer-section {
  margin-bottom: var(--pd-space-4) !important;
}

.drawer-section h2 {
  color: var(--pd-text-primary) !important;
  font-size: var(--pd-text-xl) !important;
  font-weight: var(--pd-font-bold) !important;
  margin-bottom: var(--pd-space-3) !important;
}

.drawer-overlay {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(8px);
}

/* ========================================
   MOOD/LEVEL/SPLIT SELECTORS - PREMIUM DARK
   ======================================== */

.mood-selector,
.level-selector,
.split-selector {
  display: flex;
  gap: var(--pd-space-2);
  flex-wrap: wrap;
  margin-top: var(--pd-space-2);
}

.mood-btn,
.level-btn,
.split-btn {
  background: var(--pd-bg-elevated) !important;
  border: 1px solid var(--pd-border-subtle) !important;
  border-radius: var(--pd-radius-md) !important;
  padding: var(--pd-space-2) var(--pd-space-3) !important;
  color: var(--pd-text-secondary) !important;
  font-size: var(--pd-text-sm) !important;
  font-weight: var(--pd-font-semibold) !important;
  cursor: pointer;
  transition: all var(--pd-transition-base) !important;
}

.mood-btn:hover,
.level-btn:hover,
.split-btn:hover {
  background: var(--pd-bg-hover) !important;
  border-color: var(--pd-border-medium) !important;
  color: var(--pd-text-primary) !important;
  transform: translateY(-2px);
}

.mood-btn.active,
.level-btn.active,
.split-btn.active {
  background: linear-gradient(135deg, var(--pd-accent-primary) 0%, #FF8A5C 100%) !important;
  border-color: transparent !important;
  color: #000000 !important;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

/* ========================================
   LOADING STATES - PREMIUM DARK
   ======================================== */

.loading {
  background: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(16px);
}

.spinner {
  border: 4px solid var(--pd-border-subtle) !important;
  border-top-color: var(--pd-accent-primary) !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading p {
  color: var(--pd-text-secondary) !important;
  font-size: var(--pd-text-lg) !important;
  margin-top: var(--pd-space-3) !important;
}

/* ========================================
   SUCCESS MESSAGE - PREMIUM DARK
   ======================================== */

.success-message {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  border-radius: var(--pd-radius-md) !important;
  padding: var(--pd-space-2) var(--pd-space-3) !important;
  color: var(--pd-accent-green) !important;
  font-size: var(--pd-text-sm) !important;
  font-weight: var(--pd-font-semibold) !important;
  margin-top: var(--pd-space-2) !important;
}

/* ========================================
   FORM GROUPS - PREMIUM DARK
   ======================================== */

.form-group {
  margin-bottom: var(--pd-space-3) !important;
}

.form-group label {
  display: block;
  color: var(--pd-text-secondary) !important;
  font-size: var(--pd-text-sm) !important;
  font-weight: var(--pd-font-semibold) !important;
  margin-bottom: var(--pd-space-1) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--pd-space-2);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
  .hero-landing {
    padding: var(--pd-space-6) var(--pd-space-3) !important;
  }
  
  .hero-title {
    font-size: 2rem !important;
  }
  
  .hero-features {
    grid-template-columns: 1fr;
  }
  
  .card,
  section.card {
    padding: var(--pd-space-3) !important;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
}