:root {
  --cs-bg-a: #0F1115;
  --cs-bg-b: #1A1030;
  --cs-surface: rgba(255, 255, 255, 0.04);
  --cs-border: rgba(255, 255, 255, 0.10);
  --cs-text: #F5F5F7;
  --cs-text-secondary: #A3A6B0;
  --cs-accent: #7C3AED;
  --cs-accent-2: #4F46E5;
  --cs-radius: 20px;
  --cs-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--cs-font);
  color: var(--cs-text);
  background:
    radial-gradient(circle at 20% 20%, rgba(124, 58, 237, 0.25), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(79, 70, 229, 0.25), transparent 45%),
    linear-gradient(160deg, var(--cs-bg-a), var(--cs-bg-b));
  -webkit-font-smoothing: antialiased;
}

.cs-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.cs-card {
  width: 100%;
  max-width: 440px;
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  backdrop-filter: blur(20px);
  padding: 40px 32px;
  text-align: center;
}

.cs-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}

.cs-wordmark {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cs-headline {
  font-size: 26px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.cs-subtitle {
  font-size: 15px;
  color: var(--cs-text-secondary);
  margin: 0 0 28px;
}

.cs-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--cs-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--cs-text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}

.cs-input::placeholder { color: var(--cs-text-secondary); }
.cs-input:focus { border-color: var(--cs-accent); }

.cs-button {
  width: 100%;
  padding: 13px 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--cs-accent), var(--cs-accent-2));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s;
}

.cs-button:hover { opacity: 0.9; }

.cs-success {
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.35);
  font-size: 14px;
  font-weight: 500;
}

.cs-error {
  margin-top: 10px;
  font-size: 13px;
  color: #F87171;
}

.cs-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.cs-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--cs-border);
  color: var(--cs-text-secondary);
  text-decoration: none;
  transition: color .15s, border-color .15s;
}

.cs-social-link:hover {
  color: var(--cs-text);
  border-color: var(--cs-accent);
}

@media (prefers-color-scheme: light) {
  :root {
    --cs-bg-a: #FAFAFB;
    --cs-bg-b: #EFECFB;
    --cs-surface: rgba(255, 255, 255, 0.7);
    --cs-border: rgba(20, 20, 30, 0.10);
    --cs-text: #16181D;
    --cs-text-secondary: #6B7280;
  }
  .cs-input { background: rgba(255, 255, 255, 0.9); }
  .cs-success { background: var(--cs-accent-2, #F3EBFF); background: rgba(124, 58, 237, 0.08); }
}

.cs-consent-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--cs-text-secondary);
  margin-top: 10px;
  text-align: start;
}
.cs-consent-note a { color: inherit; text-decoration: underline; }

.cs-legal-footer {
  margin-top: 32px;
  font-size: 12px;
  color: var(--cs-text-secondary);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.cs-legal-footer a { color: var(--cs-text-secondary); text-decoration: underline; }
.cs-legal-footer a:hover { color: var(--cs-text); }