:root{
  --deep-ocean: rgba(64,110,142,0.95);
  --sky-mist: rgba(142,168,195,0.9);
  --arctic-glaze: rgba(203,247,237,0.95);
  --bg-dark: #0f172a;
  --panel: rgba(255,255,255,0.04);
  --muted: #94a3b8;
  --text-light: #e6eef8;
  --white: #ffffff;
  --glass-border: rgba(255,255,255,0.08);
  --success: #10b981;
  --danger: #ef4444;
  --radius: 12px;
  --transition: 220ms cubic-bezier(.2,.9,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Inter", "Avenir Next", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background: linear-gradient(-45deg,var(--bg-dark), var(--deep-ocean));
  color:var(--text-light);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:30px 20px;
  min-height:100vh;
}
main{
  width:100%;
  display:flex;
  justify-content:center;
  box-sizing:border-box;
}

/* container */
.container{
  width:100%;
  max-width:980px;
  min-height:560px;
  display:flex;
  margin: 0 auto;
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow:0 18px 50px rgba(3,7,18,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  box-sizing: border-box;
  border:1px solid var(--glass-border);
  position: relative;
  z-index: 2;
}

/* left graphic column */
.graphic-side{
  flex:1;
  min-width:320px;
  padding:40px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:linear-gradient(135deg,var(--deep-ocean), var(--sky-mist));
  color:var(--white);
  position:relative;
}
.graphic-title{
  font-weight:800;
  letter-spacing:0.2px;
  font-size:1.75rem;
  text-align:center;
  text-shadow:0 6px 18px rgba(0,0,0,0.25);
}
.graphic-text{
  max-width:300px;
  text-align:center;
  opacity:0.95;
  font-size:1rem;
  line-height:1.5;
}

/* right form column */
.form-side{
  flex:1;
  padding:40px 36px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.form-container{
  width:100%;
  max-width:420px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:26px;
  border-radius:10px;
  box-shadow:0 8px 30px rgba(2,6,23,0.45);
  border:1px solid rgba(255,255,255,0.02);
}

/* titles */
.form-title{
  font-size:1.9rem;
  font-weight:800;
  color:var(--white);
  margin-bottom:6px;
  text-align:center;
}
.form-subtitle{
  font-size:0.98rem;
  color:rgba(230,238,248,0.9);
  margin-bottom:18px;
  text-align:center;
}

/* toggle */
.form-toggle{display:flex;gap:8px;justify-content:center;margin-bottom:18px}
.toggle-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,0.03);
  color:var(--muted);
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  transition:all var(--transition);
  letter-spacing:0.1px;
}
.toggle-btn.active{
  background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  color:var(--white);
  border-color: rgba(203,247,237,0.18);
  box-shadow:0 6px 20px rgba(32,120,140,0.08);
}

/* form */
.form{display:none;opacity:0;transform:translateY(8px)}
.form.active{display:block;opacity:1;transform:none;transition:opacity 260ms, transform 260ms}

/* input group and floating label system (works with JS which adds .active to label) */
.input-group{position:relative;margin-bottom:18px}
.input-group input,
.input-group select{
  width:100%;
  padding:14px 44px 14px 14px;
  border-radius:10px;
  background:var(--panel);
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text-light);
  font-size:1rem;
  transition:box-shadow var(--transition), border-color var(--transition), transform var(--transition);
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.input-group input::placeholder{color:rgba(230,238,248,0.45)}
.input-group input:focus,
.input-group select:focus{
  box-shadow:0 10px 30px rgba(32,120,140,0.08), 0 0 12px rgba(203,247,237,0.09);
  border-color: rgba(203,247,237,0.55);
  transform:translateY(-1px);
}

/* label */
.input-group label{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  padding:0 8px;
  font-size:0.98rem;
  color:rgba(230,238,248,0.80);
  background:transparent;
  transition: all 180ms ease;
  pointer-events:none;
  border-radius:6px;
  font-weight:600;
}
.input-group label.active,
.input-group input:focus + label,
.input-group select:focus + label{
  top:-10px;
  left:12px;
  font-size:0.78rem;
  color:var(--arctic-glaze);
  background:linear-gradient(180deg, rgba(15,23,42,0.95), rgba(15,23,42,0.95));
  padding:3px 8px;
  box-shadow:0 4px 14px rgba(2,6,23,0.25);
}

/* select arrow */
.input-group select{
  padding-right:40px;
}
.input-group select::-ms-expand{display:none}
.input-group select + label{cursor:pointer}
.input-group select{background-image:linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.08) 50%), linear-gradient(135deg, rgba(255,255,255,0.08) 50%, transparent 50%); background-position:calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px); background-size:6px 6px, 6px 6px; background-repeat:no-repeat}

/* icons and password toggle */
.password-toggle{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  cursor:pointer;
  font-size:0.98rem;
  transition:color var(--transition), transform var(--transition);
}
.password-toggle:hover{color:var(--arctic-glaze);transform:translateY(-50%) scale(1.04)}

/* checkbox group */
.checkbox-group{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.checkbox-group input{width:18px;height:18px;accent-color:var(--arctic-glaze)}
.checkbox-group label{font-size:0.95rem;color:rgba(230,238,248,0.92);font-weight:600}

/* buttons */
.btn-submit{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:0;
  background:linear-gradient(90deg, rgba(203,247,237,0.95), rgba(142,168,195,0.9));
  color:#07202a;
  font-weight:800;
  letter-spacing:0.2px;
  cursor:pointer;
  transition:transform 180ms ease, box-shadow 180ms ease;
  box-shadow:0 8px 24px rgba(6,40,46,0.12);
}
.btn-submit:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(6,40,46,0.16)}

/* footer links */
.form-footer{margin-top:18px;text-align:center;color:rgba(230,238,248,0.85);font-size:0.92rem}
.form-footer a{color:var(--arctic-glaze);text-decoration:none;font-weight:700}
.form-footer a:hover{text-decoration:underline}

/* feedback alerts */
.alert{
  display:block;
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  font-weight:700;
  text-align:center;
  margin-bottom:14px;
  box-sizing:border-box;
}
.alert-success{background:rgba(16,185,129,0.08);color:var(--success);border:1px solid rgba(16,185,129,0.12)}
.alert-danger{background:rgba(239,68,68,0.06);color:var(--danger);border:1px solid rgba(239,68,68,0.12)}
.d-none{display:none !important}

/* particles behind everything */
.particles{position:fixed;inset:0;z-index: -3 !important;pointer-events:none  }
.particle{width:6px;height:6px;border-radius:999px;background:rgba(203,247,237,0.85);position:absolute;opacity:0.08;filter:blur(1px);animation:float 7s infinite linear}

.footer {
  position: relative;     
  z-index: 1;             
  width: calc(100% - 40px); 
  max-width: 980px;
  margin: 18px auto 0;    
  padding: 12px 18px;
  border-radius: 10px;
  box-sizing: border-box;
  text-align: center;
  color: rgba(230,238,248,0.82);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.02);
  backdrop-filter: blur(4px);
  font-size: 0.92rem;
}
/* responsive */
@media (max-width:880px){
    body {
    justify-content: flex-start;  
    padding: 18px;
    gap: 12px;
  }
  .container{flex-direction:column;max-width:520px ;z-index: 2; margin-bottom: 8px;}
  .graphic-side{padding:26px 20px;min-height:160px}
  .form-side{padding:22px}
  .form-container{padding:18px}
  .logo{width:96px}
  .form-title{font-size:1.6rem}
  .footer {
    max-width: 520px;
    margin: 14px auto 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
  }
}
@media (max-width:480px){
  .form-container{max-width:100%;padding:16px}
  .input-group input,.input-group select{padding:12px 40px 12px 12px}
  .form-subtitle{font-size:0.95rem}
}

/* animations */
@keyframes float{
  0%{transform:translateY(0) scale(0.9);opacity:0.12}
  50%{transform:translateY(-36px) scale(1.1);opacity:0.28}
  100%{transform:translateY(0) scale(0.9);opacity:0.12}
}