/* Challenge page styles */
.challenge-hero {
  background: linear-gradient(135deg, #0b0b12 0%, #151531 50%, #1a1a3a 100%);
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
}

.challenge-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(800px 600px at 20% 20%, rgba(124,92,255,.15), transparent),
              radial-gradient(600px 400px at 80% 80%, rgba(48,213,200,.1), transparent);
  pointer-events: none;
}

.challenge-hero .container {
  position: relative;
  z-index: 2;
}

.challenge-title {
  text-align: center;
  margin-bottom: 20px;
}

.challenge-title h1 {
  font-size: 3.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #7c5cff 0%, #30d5c8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
  line-height: 1.1;
}

.challenge-title p {
  font-size: 1.25rem;
  color: #b9bde0;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.challenge-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin: 60px 0;
}

.stat-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124,92,255,.3);
  box-shadow: 0 20px 40px rgba(0,0,0,.2);
}

.stat-card .icon {
  font-size: 2.5rem;
  color: #7c5cff;
  margin-bottom: 16px;
}

.stat-card h3 {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.stat-card p {
  color: #b9bde0;
  font-size: 0.95rem;
  margin: 0;
}

.challenge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 32px;
  margin: 60px 0;
}

.challenge-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 32px;
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  border: 1px solid #f0f0f0;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.challenge-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(0,0,0,.15);
}

.challenge-card.featured {
  background: linear-gradient(135deg, #7c5cff 0%, #5a3eff 100%);
  color: #fff;
  transform: scale(1.05);
}

.challenge-card.featured:hover {
  transform: scale(1.05) translateY(-8px);
}

.challenge-card .badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(124,92,255,.1);
  color: #7c5cff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.challenge-card.featured .badge {
  background: rgba(255,255,255,.2);
  color: #fff;
}

.challenge-card h3 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #1a1a1a;
}

.challenge-card.featured h3 {
  color: #fff;
}

.challenge-card .price {
  font-size: 3rem;
  font-weight: 800;
  color: #7c5cff;
  margin-bottom: 8px;
  line-height: 1;
}

.challenge-card.featured .price {
  color: #fff;
}

.challenge-card .price-period {
  font-size: 1rem;
  color: #666;
  font-weight: 500;
}

.challenge-card.featured .price-period {
  color: rgba(255,255,255,.8);
}

.challenge-card .description {
  color: #666;
  margin-bottom: 32px;
  line-height: 1.6;
}

.challenge-card.featured .description {
  color: rgba(255,255,255,.9);
}

.challenge-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
}

.challenge-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  color: #555;
  font-size: 0.95rem;
}

.challenge-card.featured .challenge-features li {
  color: rgba(255,255,255,.9);
}

.challenge-features li i {
  color: #7c5cff;
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

.challenge-card.featured .challenge-features li i {
  color: #fff;
}

.challenge-card .btn {
  width: 100%;
  padding: 16px 24px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: all 0.3s ease;
}

.challenge-card .btn-primary {
  background: linear-gradient(135deg, #7c5cff 0%, #5a3eff 100%);
  color: #fff;
  border: none;
}

.challenge-card .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(124,92,255,.3);
}

.challenge-card.featured .btn-primary {
  background: #fff;
  color: #7c5cff;
}

.challenge-card.featured .btn-primary:hover {
  background: rgba(255,255,255,.9);
}

.how-it-works {
  background: #f8f9ff;
  padding: 80px 0;
}

.how-it-works h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 60px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 60px;
}

.step-card {
  text-align: center;
  position: relative;
}

.step-number {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #7c5cff 0%, #30d5c8 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 24px;
  position: relative;
  z-index: 2;
}

.step-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 16px;
}

.step-card p {
  color: #666;
  line-height: 1.6;
  font-size: 1rem;
}

.cta-section {
  background: linear-gradient(135deg, #7c5cff 0%, #5a3eff 100%);
  padding: 80px 0;
  text-align: center;
  color: #fff;
}

.cta-section h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.cta-section p {
  font-size: 1.25rem;
  margin-bottom: 40px;
  opacity: 0.9;
}

.cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-buttons .btn {
  padding: 16px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cta-buttons .btn-white {
  background: #fff;
  color: #7c5cff;
  border: none;
}

.cta-buttons .btn-white:hover {
  background: rgba(255,255,255,.9);
  transform: translateY(-2px);
}

.cta-buttons .btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}

.cta-buttons .btn-outline-white:hover {
  background: #fff;
  color: #7c5cff;
}

/* Responsive design */
@media (max-width: 768px) {
  .challenge-title h1 {
    font-size: 2.5rem;
  }
  
  .challenge-title p {
    font-size: 1.1rem;
  }
  
  .challenge-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .challenge-card.featured {
    transform: none;
  }
  
  .challenge-card.featured:hover {
    transform: translateY(-8px);
  }
  
  .steps-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-buttons .btn {
    width: 100%;
    max-width: 300px;
  }
}

/* Auth page styles */
.auth-wrap{min-height:calc(100vh - 140px);display:flex;align-items:center;justify-content:center;padding:24px 16px;width:100%}
.auth-page{width:100%;max-width:640px;margin:0 auto;padding:0 16px}
.auth-card{padding:36px;border-radius:14px;box-shadow:0 14px 30px rgba(0,0,0,.08);background:#ffffff}
.auth-alert{padding:8px 10px;background:#fee;border:1px solid #fcc;color:#b00;border-radius:6px;margin-bottom:12px}
.form-group{margin-bottom:18px}
.form-group label{display:block;margin-bottom:6px;font-weight:600}
.form-input-icon{gap:10px;align-items:center;border:1px solid #e4e6ef;border-radius:14px;padding:12px 12px;background:#f7f8fc;overflow:hidden}
.form-input-icon{position:relative}
.form-input-icon .toggle-visibility{position:absolute;right:10px;top:50%;transform:translateY(-50%);padding:6px 8px;border-radius:10px;font-size:12px;height:auto;line-height:1;background:transparent;border:1px solid #d6d9e6;color:#4a4f63}
.auth-theme .form-input-icon .toggle-visibility{border-color:rgba(255,255,255,.18);color:#cfd4ff}
.form-input-icon:focus-within{border-color:#7c5cff;box-shadow:0 0 0 2px rgba(124,92,255,.18)}
.form-input-icon input,.form-input-icon textarea{border:none;outline:none;width:100%;font-size:15px;line-height:1.4;background:transparent;color:#222;padding-right:88px}
.auth-theme .form-input-icon input{color:#e7e9ff}
.form-input-icon input::placeholder,.form-input-icon textarea::placeholder{color:#9aa0b4}
.form-input-icon i{display:none}
.auth-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0 20px 0}
.auth-actions{display:flex;flex-direction:row;gap:12px;margin-top:8px}
.auth-actions .btn-login{flex:1.4}
.auth-actions .btn-create{flex:.8}
.check-inline{display:flex;align-items:center;gap:6px}
.auth-social{margin-top:16px;display:flex;gap:8px;align-items:center;justify-content:center}
.auth-terms{text-align:center;margin-top:12px}
.auth-terms a{color:#cfd4ff}
.auth-terms a:hover{color:#fff}
.auth-head{text-align:center}
.auth-head img{display:inline-block;margin-bottom:6px}
.auth-head h1{margin:6px 0 6px 0;font-size:26px;font-weight:800;letter-spacing:.2px}
.auth-head .subtitle{margin:0 0 18px 0;color:#b9bde0;font-size:14.5px}

/* Buttons refinements */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:14px;padding:10px 14px;font-weight:600;text-decoration:none;font-size:15px;line-height:1;min-height:40px}
a.btn{text-decoration:none}
a.btn:hover,a.btn:focus{text-decoration:none}
.btn-outline{border:1px solid #e2e2e2}
.btn-link{color:#555;text-decoration:none;background:transparent;border:none;padding:0}
.btn-link:hover,.btn-link:focus{text-decoration:none}

/* Page base for better contrast */
body{background:#f5f6ff}
.auth-theme{--primary:#7c5cff;--bg:#0b0b12;--card:#141427;--muted:#9aa0b4;--accent:#30d5c8}
.auth-theme,.auth-theme *{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.auth-theme{background:radial-gradient(1000px 600px at 10% 10%,rgba(124,92,255,.22),transparent),radial-gradient(800px 500px at 90% 80%,rgba(48,213,200,.16),transparent),linear-gradient(135deg,#0b0b12 0%,#151531 100%);min-height:100vh;color:#e7e9ff}
.auth-theme .auth-card{background:var(--card);box-shadow:0 12px 28px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06)}
.auth-theme .auth-alert{background:rgba(255,60,60,.1);border-color:rgba(255,60,60,.35);color:#ff9a9a}
.auth-theme .form-input-icon{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.auth-theme .form-input-icon input,.auth-theme .form-input-icon textarea{color:#e7e9ff}
.auth-theme .form-input-icon input::placeholder{color:#8e93b2}
.auth-theme .btn-primary{background:var(--primary);color:#fff;border:none}
.auth-theme .btn-outline{border-color:rgba(255,255,255,.15);color:#e7e9ff}
.auth-theme .btn-outline:hover{background:rgba(255,255,255,.06)}
.auth-theme a.btn-link{color:#8e93b2}

/* Two-column auth grid */
.auth-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.auth-side{display:none}
.auth-side::before{content:"";position:absolute;inset:0;background:url('/site/assets/images/dragon.png') center/60% no-repeat, radial-gradient(600px 400px at 70% 30%, rgba(124,92,255,.22), transparent), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
.auth-side::after{content:"Train consistently. Grow responsibly.";position:absolute;left:24px;bottom:24px;color:#cfd4ff;font-weight:600;letter-spacing:.2px}

/* Fancy primary button */
.btn-primary{background:linear-gradient(135deg,#7c5cff 0%,#5a3eff 50%,#30d5c8 120%);border:none}
.btn-primary:hover{filter:brightness(1.05)}

@media (min-width: 768px){
  .auth-card{padding:32px}
}
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}