:root {
 /* Force browser UI (scrollbars, form controls) to dark */
  color-scheme: dark;

  --registration-primary:#3b82f6;
  --registration-primary-foreground:#ffffff;

  /* Always-dark palette */
  --registration-background:#0b1220;
  --registration-card:#0f172a;
  --registration-muted:#111c33;

  --registration-foreground:#e5e7eb;
  --registration-muted-foreground:#9ca3af;

  --registration-border:#24324a;
  --registration-input:#0f172a;

  --registration-danger:#dc2626;

  --radius: 14px;
  --radius-sm: 12px;

  --shadow-sm: 0 2px 14px rgba(0,0,0,.35);
  --shadow: 0 18px 60px rgba(0,0,0,.45);

  --ring: 0 0 0 4px color-mix(in srgb, var(--registration-primary) 22%, transparent);

  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";

}


*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family: var(--font);
  background: var(--registration-background);
  color: var(--registration-foreground);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

.registration-min-h-screen{ min-height:10vh; }


.registration-main-content{
  min-height: 10vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(2.5rem, 8vh, 4rem) 1rem;
}

.registration-form-container{
  width: min(45rem, 92vw);
  background: var(--registration-card);
  border: 1px solid var(--registration-border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--shadow-sm);
}


.registration-grid{ display:grid; gap: 1rem; }
.registration-grid-cols-2{ grid-template-columns: 1fr 1fr; }
@media (max-width: 640px){
  .registration-grid-cols-2{ grid-template-columns: 1fr; }
}

.registration-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 850;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .08s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
  font-size: 1rem;
  text-decoration:none;
}
.registration-btn:active{ transform: scale(.98); }

.registration-btn-primary{
  background: var(--registration-primary);
  color: var(--registration-primary-foreground);
  border-color: var(--registration-primary);
  width: 100%;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--registration-primary) 18%, transparent);
}
.registration-btn-primary:hover:not(:disabled){
  background: color-mix(in srgb, var(--registration-primary) 86%, black);
}
.registration-btn-primary:disabled{
  opacity: .6;
  cursor: not-allowed;
  box-shadow:none;
}

.registration-alert{
  border-radius: var(--radius);
  padding: .9rem 1rem;
  margin: 0 0 1rem;
  border: 1px solid var(--registration-border);
  background: var(--registration-muted);
}
.registration-alert-error{
  border-color: color-mix(in srgb, var(--registration-danger) 35%, var(--registration-border));
  background: color-mix(in srgb, var(--registration-danger) 8%, white);
}

.registration-error{
  min-height: 1.1em;
  margin: .35rem 0 0;
  font-size: .92rem;
  color: var(--registration-danger);
}


.registration-error-message{
  font-size: .9rem;
  margin-top: .35rem;
  color: var(--registration-danger);
  font-weight: 600;
}
.registration-error-message ul{
  list-style:none;
  padding:0;
  margin:0;
}


.registration-hint{
  margin: .35rem 0 0;
  font-size: .9rem;
  color: var(--registration-muted-foreground);
}

.registration-form-group{ margin-bottom: 1rem; }

.registration-form-label{
  display:block;
  font-size: .9rem;
  font-weight: 850;
  margin-bottom: .5rem;
}

.registration-input-wrapper{ position:relative; }

.registration-input-icon{
  position:absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--registration-muted-foreground);
  pointer-events:none;
}

.registration-form-input{
  width:100%;
  padding: .8rem .95rem .8rem 2.85rem;
  border: 1px solid var(--registration-border);
  border-radius: var(--radius-sm);
  background: var(--registration-input);
  color: var(--registration-foreground);
  caret-color: var(--registration-foreground);
  font-size: 1rem;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.registration-form-input::placeholder{
  color: color-mix(in srgb, var(--registration-muted-foreground) 75%, transparent);
}
.registration-form-input:focus{
  outline:none;
  border-color: color-mix(in srgb, var(--registration-primary) 70%, var(--registration-border));
  box-shadow: var(--ring);
}


.registration-form-input.error,
.registration-form-input.is-invalid{
  border-color: var(--registration-danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--registration-danger) 18%, transparent);
}


.registration-password-toggle{
  position:absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--registration-border);
  background: color-mix(in srgb, var(--registration-muted) 85%, white);
  color: var(--registration-muted-foreground);
  border-radius: 10px;
  padding: .35rem .5rem;
  cursor:pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .08s ease;
}
.registration-password-toggle:hover{
  background: var(--registration-muted);
  border-color: color-mix(in srgb, var(--registration-border) 55%, var(--registration-primary));
}
.registration-password-toggle:active{ transform: translateY(-50%) scale(.98); }


.registration-input-wrapper .registration-form-input{
  padding-right: 3.2rem;
}


.registration-form-input:-webkit-autofill,
.registration-form-input:-webkit-autofill:hover,
.registration-form-input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--registration-foreground);
  box-shadow: 0 0 0 1000px var(--registration-input) inset;
  caret-color: var(--registration-foreground);
}


.registration-password-strength{ margin-top: .5rem; }
.registration-strength-bars{
  display:flex;
  gap:.25rem;
  margin-bottom:.25rem;
}
.registration-strength-bar{
  height:.3rem;
  flex:1;
  border-radius: 999px;
  background: var(--registration-muted);
  transition: background-color .18s ease;
}
.registration-strength-bar.active{ background: var(--registration-primary); }
.registration-strength-bar.weak{ background:#dc2626; }
.registration-strength-bar.fair{ background:#f59e0b; }
.registration-strength-bar.good{ background:#10b981; }
.registration-strength-text{
  font-size:.78rem;
  color: var(--registration-muted-foreground);
}

.registration-checkbox-container{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  cursor:pointer;
  margin: 1rem 0;
  user-select:none;
}

.registration-checkbox{
  width: 1rem;
  height: 1rem;
  accent-color: var(--registration-primary);
  margin-top: .25rem;
  flex-shrink:0;
}

.registration-checkbox-text{
  font-size: .9rem;
  color: var(--registration-muted-foreground);
  line-height: 1.4;
}


.registration-link{
  color: var(--registration-primary);
  text-decoration:none;
  font-weight: 850;
}
.registration-link:hover{ text-decoration: underline; }

:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--registration-primary) 55%, transparent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  .registration-btn,
  .registration-form-input,
  .registration-password-toggle{
    transition:none !important;
  }
}

@media (prefers-color-scheme: dark){
  :root{
    --registration-background:#0b1220;
    --registration-card:#0f172a;
    --registration-muted:#111c33;

    --registration-foreground:#e5e7eb;
    --registration-muted-foreground:#9ca3af;

    --registration-border:#24324a;
    --registration-input:#0f172a;

    --shadow-sm: 0 2px 14px rgba(0,0,0,.35);
    --shadow: 0 18px 60px rgba(0,0,0,.45);
  }

  .registration-alert-error{
    background: color-mix(in srgb, var(--registration-danger) 12%, transparent);
  }
}

.registration-form-input:-webkit-autofill,
.registration-form-input:-webkit-autofill:hover,
.registration-form-input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--registration-foreground);
  box-shadow: 0 0 0 1000px var(--registration-input) inset;
  caret-color: var(--registration-foreground);
}

/* Keep this (your error background will now be dark-friendly) */
.registration-alert-error{
  background: color-mix(in srgb, var(--registration-danger) 12%, transparent);
}