@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --navy-deep:#070c1f;
  --navy:#0d1b3e;
  --navy-light:#152452;
  --cyan:#37e6ff;
  --white:#f5f7fb;
  --slate:#8b96b3;
  --border:#1f2e5c;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Inter',sans-serif;
  background:var(--navy-deep);
  color:var(--white);
  min-height:100vh;
}
.auth-shell{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  min-height:100vh;
}
.auth-brand{
  background:
    radial-gradient(circle at 15% 20%, rgba(55,230,255,0.15), transparent 40%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  padding:56px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid var(--border);
}
.auth-brand h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:2.6rem;
  line-height:1.15;
  font-weight:700;
  max-width:9ch;
}
.auth-brand .dot{color:var(--cyan);}
.auth-brand p{
  color:var(--slate);
  margin-top:18px;
  max-width:34ch;
  line-height:1.6;
}
.brand-mark{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  letter-spacing:0.02em;
}
.brand-mark span{color:var(--cyan);}
.package-strip{
  display:flex;
  gap:16px;
  margin-top:40px;
}
.package-chip{
  border:1px solid var(--border);
  background:rgba(255,255,255,0.02);
  border-radius:10px;
  padding:16px 18px;
  flex:1;
}
.package-chip b{font-family:'Space Grotesk',sans-serif;display:block;margin-bottom:4px;}
.package-chip span{color:var(--slate);font-size:0.85rem;}
.auth-form-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}
.auth-form{
  width:100%;
  max-width:380px;
}
.auth-form h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.6rem;
  margin-bottom:6px;
}
.auth-form .sub{color:var(--slate);font-size:0.92rem;margin-bottom:28px;}
.field{margin-bottom:16px;}
.field label{
  display:block;
  font-size:0.82rem;
  color:var(--slate);
  margin-bottom:6px;
}
.field input,.field select{
  width:100%;
  padding:12px 14px;
  background:var(--navy-light);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--white);
  font-size:0.95rem;
  outline:none;
  transition:border-color .15s;
}
.field input:focus,.field select:focus{border-color:var(--cyan);}
.pkg-options{display:flex;gap:10px;}
.pkg-options label{
  flex:1;
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px;
  font-size:0.85rem;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.pkg-options input{width:auto;margin-right:6px;}
.pkg-options .price{color:var(--cyan);font-size:0.8rem;}
.btn-primary{
  width:100%;
  padding:13px;
  background:var(--cyan);
  color:var(--navy-deep);
  border:none;
  border-radius:8px;
  font-weight:600;
  font-size:0.95rem;
  cursor:pointer;
  margin-top:8px;
}
.btn-primary:hover{opacity:0.9;}
.form-footer{
  margin-top:20px;
  font-size:0.88rem;
  color:var(--slate);
}
.form-footer a{color:var(--cyan);text-decoration:none;}
.alert{
  padding:12px 14px;
  border-radius:8px;
  font-size:0.85rem;
  margin-bottom:18px;
}
.alert-error{background:rgba(255,80,80,0.1);border:1px solid rgba(255,80,80,0.3);color:#ff9d9d;}
.alert-success{background:rgba(55,230,255,0.08);border:1px solid rgba(55,230,255,0.25);color:var(--cyan);}
@media (max-width:820px){
  .auth-shell{grid-template-columns:1fr;}
  .auth-brand{display:none;}
}