/* ========================================
   Sinalar - Waitlist Page Styles
   Waiting list specific components
   ======================================== */

/* CSS Variables */
:root {
  --bg: #FCFCFD;
  --bg-card: linear-gradient(145deg, #FAFAF9 0%, #F5F5F4 50%, #E7E5E4 100%);
  --card: #FFFFFF;
  --text: #1C1917;
  --text-body: #292524;
  --text-muted: #57534E;
  --text-secondary: #44403C;
  --border: #E6E8EC;
  --accent: #1F2937;
  --accent-hover: #111827;
  --accent-light: rgba(31, 41, 55, 0.06);
  --success: #22c55e;
  --shadow: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 20px rgba(0,0,0,0.06);
  --check-color: #1F2937;
  --glow: rgba(31, 41, 55, 0.2);
}

[data-theme="dark"] {
  --bg: #0F172A;
  --bg-card: linear-gradient(145deg, #1E293B 0%, #1F2937 50%, #111827 100%);
  --card: #111827;
  --text: #E5E7EB;
  --text-body: #D1D5DB;
  --text-muted: #9CA3AF;
  --text-secondary: #CBD5E1;
  --border: #374151;
  --accent: #CBD5E1;
  --accent-hover: #E5E7EB;
  --accent-light: rgba(203, 213, 225, 0.12);
  --success: #22c55e;
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 20px rgba(0,0,0,0.5);
  --check-color: #CBD5E1;
  --glow: rgba(203, 213, 225, 0.2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  transition: background 0.3s ease, color 0.3s ease;
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

/* Light Particles Animation - Light Mode */
body.theme-light::before {
  content: '';
  position: fixed;
  bottom: -10%;
  left: 0;
  width: 4px;
  height: 4px;
  background-color: transparent;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  box-shadow: 
    15vw 10vh 3px 2px rgba(31, 41, 55, 0.4),
    45vw 25vh 2px 1px rgba(87, 83, 78, 0.35),
    78vw 5vh 3px 2px rgba(31, 41, 55, 0.3),
    32vw 40vh 2px 2px rgba(41, 37, 36, 0.4),
    62vw 18vh 3px 1px rgba(31, 41, 55, 0.35),
    8vw 30vh 2px 2px rgba(87, 83, 78, 0.3),
    88vw 35vh 3px 2px rgba(31, 41, 55, 0.4),
    25vw 12vh 2px 1px rgba(41, 37, 36, 0.35),
    52vw 45vh 3px 2px rgba(87, 83, 78, 0.4),
    72vw 8vh 2px 2px rgba(31, 41, 55, 0.3),
    12vw 50vh 3px 1px rgba(41, 37, 36, 0.35),
    38vw 20vh 2px 2px rgba(31, 41, 55, 0.4),
    68vw 38vh 3px 2px rgba(87, 83, 78, 0.35),
    92vw 15vh 2px 1px rgba(31, 41, 55, 0.3),
    22vw 48vh 3px 2px rgba(41, 37, 36, 0.4),
    48vw 28vh 2px 2px rgba(31, 41, 55, 0.35),
    5vw 42vh 3px 1px rgba(87, 83, 78, 0.4),
    85vw 22vh 2px 2px rgba(31, 41, 55, 0.3),
    35vw 35vh 3px 2px rgba(41, 37, 36, 0.35),
    58vw 52vh 2px 1px rgba(31, 41, 55, 0.4),
    75vw 45vh 3px 2px rgba(87, 83, 78, 0.35),
    18vw 15vh 2px 2px rgba(31, 41, 55, 0.3),
    42vw 55vh 3px 1px rgba(41, 37, 36, 0.4),
    95vw 32vh 2px 2px rgba(31, 41, 55, 0.35),
    28vw 8vh 3px 2px rgba(87, 83, 78, 0.4),
    55vw 38vh 2px 1px rgba(31, 41, 55, 0.3),
    82vw 48vh 3px 2px rgba(41, 37, 36, 0.35),
    2vw 25vh 2px 2px rgba(31, 41, 55, 0.4),
    65vw 12vh 3px 1px rgba(87, 83, 78, 0.35),
    38vw 58vh 2px 2px rgba(31, 41, 55, 0.3);
  animation: particlesFloat 25s linear infinite;
}

body.theme-light::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(31, 41, 55, 0.05), transparent 40%),
    radial-gradient(ellipse at 80% 90%, rgba(87, 83, 78, 0.04), transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(41, 37, 36, 0.03), transparent 50%);
  opacity: 0.9;
  animation: ambientGlow 15s ease-in-out infinite alternate;
}

/* Galaxy Stars Animation - Dark Mode */
body.theme-dark::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  background-color: transparent;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  box-shadow: 24vw 9vh 1px 0px #fff, 12vw -24vh 0px 1px #fff, -45vw -22vh 0px 0px #fff, -37vw -40vh 0px 1px #fff, 29vw 19vh 0px 1px #fff, 4vw -8vh 0px 1px #fff, -5vw 21vh 1px 1px #fff, -27vw 26vh 1px 1px #fff, -47vw -3vh 1px 1px #fff, -28vw -30vh 0px 1px #fff, -43vw -27vh 0px 1px #fff, 4vw 22vh 1px 1px #fff, 36vw 23vh 0px 0px #fff, -21vw 24vh 1px 1px #fff, -16vw 2vh 1px 0px #fff, -16vw -6vh 0px 0px #fff, 5vw 26vh 0px 0px #fff, -34vw 41vh 0px 0px #fff, 1vw 42vh 1px 1px #fff, 11vw -13vh 1px 1px #fff, 48vw -8vh 1px 0px #fff, 22vw -15vh 0px 0px #fff, 45vw 49vh 0px 0px #fff, 43vw -27vh 1px 1px #fff, 20vw -2vh 0px 0px #fff, 8vw 22vh 0px 1px #fff, 39vw 48vh 1px 1px #fff, -21vw -11vh 0px 1px #fff, -40vw 45vh 0px 1px #fff, 11vw -30vh 1px 0px #fff, 26vw 30vh 1px 0px #fff, 45vw -29vh 0px 1px #fff, -2vw 18vh 0px 0px #fff, -29vw -45vh 1px 0px #fff, -7vw -27vh 1px 1px #fff, 42vw 24vh 0px 0px #fff, 45vw -48vh 1px 0px #fff, -36vw -18vh 0px 0px #fff, -44vw 13vh 0px 1px #fff, 36vw 16vh 0px 1px #fff, 40vw 24vh 0px 0px #fff, 18vw 11vh 0px 0px #fff, -15vw -23vh 1px 0px #fff, -24vw 48vh 0px 1px #fff, 27vw -45vh 1px 0px #fff, -2vw -24vh 0px 1px #fff, -15vw -28vh 0px 0px #fff, -43vw 13vh 1px 0px #fff, 7vw 27vh 1px 0px #fff, 47vw 5vh 0px 0px #fff, -45vw 15vh 1px 1px #fff, -5vw -28vh 0px 1px #fff, 38vw 25vh 1px 1px #fff, -39vw -1vh 1px 0px #fff, 5vw 0vh 1px 0px #fff, 49vw 13vh 0px 0px #fff, 48vw 10vh 0px 1px #fff, 19vw -28vh 0px 0px #fff, 4vw 7vh 0px 0px #fff, 21vw 21vh 1px 1px #fff, -15vw -15vh 0px 1px #fff, -6vw -42vh 1px 0px #fff, -15vw 48vh 1px 1px #fff, -23vw 25vh 1px 1px #fff, -48vw 25vh 0px 1px #fff, -31vw -19vh 0px 1px #fff, 4vw 37vh 1px 1px #fff, -43vw 28vh 0px 0px #fff, 3vw -25vh 0px 1px #fff, -39vw 14vh 0px 1px #fff, -40vw 31vh 0px 1px #fff, 35vw -36vh 1px 1px #fff, 16vw 49vh 0px 0px #fff, 6vw 39vh 0px 0px #fff, 3vw -35vh 0px 1px #fff, -44vw -2vh 1px 0px #fff, -6vw 21vh 1px 0px #fff, 48vw 9vh 1px 1px #fff, -43vw 30vh 1px 1px #fff, 29vw -12vh 1px 1px #fff, -48vw 13vh 1px 0px #fff, -42vw 32vh 1px 1px #fff, 34vw 15vh 1px 1px #fff, 29vw -37vh 1px 1px #fff, 28vw 2vh 0px 0px #fff;
  animation: starsZoom 20s linear infinite;
}

body.theme-dark::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  background:
    radial-gradient(ellipse at 10% 20%, rgba(203, 213, 225, 0.12), transparent 40%),
    radial-gradient(ellipse at 90% 80%, rgba(156, 163, 175, 0.10), transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(209, 213, 219, 0.08), transparent 50%);
  opacity: 0.5;
  animation: nebula 20s linear infinite;
}

/* Disable Background Animation - Add class 'no-bg-animation' to body to disable */
body.no-bg-animation::before,
body.no-bg-animation::after {
  display: none !important;
}

/* Disable Gradient Background - Add class 'no-bg-gradient' to element to remove gradient */
.no-bg-gradient {
  background: var(--card) !important;
}

/* Ensure content is above stars - REMOVED, stars now on top with pointer-events: none */


@keyframes particlesFloat {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-120vh) translateX(5vw);
    opacity: 0;
  }
}

@keyframes ambientGlow {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.9;
  }
}

@keyframes starsZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}

@keyframes nebula {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.6;
  }
  100% {
    transform: translate(5%, 5%) rotate(360deg);
    opacity: 0.8;
  }
}

/* Header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .header { padding: 14px 20px; }
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

/* Theme Toggle */
.theme-toggle {
  display: flex;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 4px;
}

.theme-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.theme-btn.active {
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow);
}

.theme-btn:hover:not(.active) { color: var(--text); }

@media (max-width: 480px) {
  .theme-btn span:last-child { display: none; }
  .theme-btn { padding: 8px 12px; }
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Main Wrapper */
.main-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

@media (max-width: 768px) {
  .main-wrapper {
    padding: 32px 20px;
    align-items: flex-start;
  }
}

.container {
  max-width: 1100px;
  width: 100%;
}

/* Main Layout */
.main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

@media (max-width: 968px) {
  .main-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Left Content */
.content {
  animation: fadeIn 0.6s ease-out;
}

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

h1 {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
  color: var(--text);
}

.subtitle {
  font-size: 18px;
  color: var(--text-body);
  margin-bottom: 40px;
  line-height: 1.7;
}

@media (max-width: 768px) {
  h1 { font-size: 34px; margin-bottom: 16px; }
  .subtitle { font-size: 16px; margin-bottom: 32px; }
}

/* Features */
.features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.feature-check {
  width: 24px;
  height: 24px;
  background: var(--accent-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-check svg {
  width: 12px;
  height: 12px;
  color: var(--check-color);
}

.feature-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.feature-content p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Right Form Card */
.form-section {
  animation: fadeIn 0.6s ease-out 0.15s both;
}

.form-card {
  background: var(--bg-card);
  border-radius: 28px;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(139, 92, 246, 0.08), 0 8px 32px rgba(139, 92, 246, 0.12);
}

/* Decorative elements */
.form-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.form-card::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

@media (max-width: 768px) {
  .form-card { padding: 32px 24px; }
}

.form-inner {
  position: relative;
  z-index: 1;
}

/* Badge */
.form-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 20px;
}

.form-badge .dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.form-header {
  text-align: center;
  margin-bottom: 28px;
}

.form-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.form-subtitle {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.5;
}

/* Floating icons */
.floating-icons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}

.float-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  animation: float 3s ease-in-out infinite;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.float-icon:nth-child(1) {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  animation-delay: 0s;
}
.float-icon:nth-child(2) {
  background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
  animation-delay: 0.5s;
}
.float-icon:nth-child(3) {
  background: linear-gradient(135deg, #cffafe, #a5f3fc);
  animation-delay: 1s;
}
.float-icon:nth-child(4) {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  animation-delay: 1.5s;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Form */
.form-group {
  margin-bottom: 14px;
}

.form-input {
  width: 100%;
  padding: 15px 18px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-light), 0 2px 8px rgba(0,0,0,0.04);
}

.form-input::placeholder {
  color: var(--text-muted);
}

/* Submit Button */
.submit-btn {
  width: 100%;
  padding: 16px 24px;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: white;
  background: linear-gradient(135deg, var(--accent), #6366f1);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 16px var(--glow);
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--glow);
}

.submit-btn:active { transform: translateY(0); }

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.submit-btn .arrow { transition: transform 0.2s; }
.submit-btn:hover .arrow { transform: translateX(4px); }

/* Terms */
.terms-text {
  margin-top: 18px;
  font-size: 12px;
  text-align: center;
  color: var(--text-muted);
  line-height: 1.6;
}

.terms-text a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.terms-text a:hover { text-decoration: underline; }

/* Success Message */
.success-message {
  display: none;
  text-align: center;
  padding: 20px 0;
}

.success-message.show {
  display: block;
  animation: scaleIn 0.4s ease-out;
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.success-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--success), #16a34a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
}

.success-message h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.success-message p {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.6;
}

/* Loading Spinner */
.spinner {
  border: 2px solid rgba(255,255,255,0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Footer */
.footer {
  border-top: 1px solid var(--border);
  padding: 20px 40px;
  text-align: center;
  flex-shrink: 0;
  margin-top: auto;
}

.footer-content {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.footer p {
  font-size: 13px;
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--accent); }

@media (max-width: 768px) {
  .footer { padding: 16px 20px; }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(124,92,255,0.12), rgba(99,102,241,0.12));
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 24px;
}

/* Features */
.features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
}

.feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.feature-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-content h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.feature-content p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Social Proof */
.social-proof {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.avatars {
  display: flex;
  margin-left: -8px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--card);
  margin-left: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: white;
  transition: transform 0.2s;
}

.avatar:hover {
  transform: translateY(-4px);
  z-index: 10;
}

.avatar:nth-child(1) { background: linear-gradient(135deg, #667eea, #764ba2); }
.avatar:nth-child(2) { background: linear-gradient(135deg, #f093fb, #f5576c); }
.avatar:nth-child(3) { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.avatar:nth-child(4) { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.avatar:nth-child(5) {
  background: linear-gradient(135deg, var(--accent), #6366f1);
  font-size: 16px;
}

.social-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.social-text strong {
  color: var(--accent);
  font-weight: 700;
}

/* Form Card */
.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px;
  box-shadow: var(--shadow-lg);
  animation: fadeInRight 0.6s ease-out;
  backdrop-filter: blur(10px);
}

.form-header {
  text-align: center;
  margin-bottom: 28px;
}

.form-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.form-subtitle {
  font-size: 15px;
  color: var(--text-muted);
}

/* Form Elements */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  transition: all 0.2s;
  font-family: inherit;
}

.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(124,92,255,0.1);
}

.form-input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

/* Checkbox */
.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0;
}

.checkbox {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 6px;
  transition: all 0.2s;
}

.checkbox input:checked ~ .checkmark {
  background: var(--accent);
  border-color: var(--accent);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
}

/* Submit Button */
.submit-btn {
  width: 100%;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, var(--accent), #6366f1);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 4px 16px rgba(124,92,255,0.35);
  font-family: inherit;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124,92,255,0.45);
}

.submit-btn:active {
  transform: translateY(0);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Helper Text */
.helper-text {
  margin-top: 16px;
  font-size: 12px;
  text-align: center;
  color: var(--text-muted);
  line-height: 1.5;
}

.helper-text a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.helper-text a:hover {
  text-decoration: underline;
}

/* Success Message */
.success-message {
  display: none;
  text-align: center;
  padding: 32px;
}

.success-message.show {
  display: block;
  animation: scaleIn 0.4s ease-out;
}

.success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--success), #10b981);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.success-message h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.success-message p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Loading Spinner */
.spinner {
  border: 3px solid rgba(255,255,255,0.3);
  border-top: 3px solid white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}