/* ============================================================
   login.css — styles for the login page
   ============================================================ */

body{
  display:flex;
  flex-direction:column;
}

.page{
  flex:1;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(100vh - 54px);
  overflow:hidden;
}

/* GEOMETRY BACKGROUND */
.geo{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.geo svg{
  width:100%;
  height:100%;
}

/* LOGIN CARD */
.login-card{
  position:relative;
  z-index:1;
  background:#0e1220;
  border:1px solid #1c2235;
  border-radius:14px;
  padding:3rem 4.5rem;
  width:100%;
  max-width:620px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.login-card-inner{
  width:100%;
  max-width:360px;
}

.login-eyebrow{
  font-family:'Space Mono',monospace;
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#00c8e8;
  margin-bottom:0.85rem;
  text-align:left;
}

.login-heading{
  font-size:30px;
  font-weight:300;
  color:#f0f6ff;
  letter-spacing:-0.01em;
  margin-bottom:0.5rem;
  line-height:1.3;
  text-align:left;
}

.login-heading em{
  font-style:normal;
  color:#00c8e8;
}

.login-heading strong{
  font-style:normal;
  font-weight:300;
  color:#909fff;
}

.login-sub{
  font-size:13px;
  color:#9aabcb;
  font-weight:300;
  margin-bottom:2.25rem;
  text-align:left;
}

.register-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-family: 'Sora', sans-serif;
  color: #909fff;
  padding: 0;
}
.register-link:hover {
  color: #b0b8ff;
}

/* FORM */
.form-inner{
  width:100%;
}

.field{
  margin-bottom:1.25rem;
}

.field label{
  display:block;
  font-family:'Space Mono',monospace;
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#9aabcb;
  margin-bottom:0.5rem;
}

.field input{
  width:100%;
  background:#080b14;
  border:1px solid #1e2a40;
  border-radius:8px;
  padding:12px 16px;
  font-size:14px;
  color:#e0eeff;
  font-family:'Sora',sans-serif;
  outline:none;
  transition:border-color 0.2s;
}

.field input:focus{
  border-color:#00c8e8;
}

.field input::placeholder{
  color:#2a3a58;
}

.login-btn{
  width:100%;
  margin-top:0.5rem;
  background:#00c8e8;
  color:#080b14;
  border:none;
  border-radius:8px;
  padding:13px;
  font-size:14px;
  font-weight:600;
  font-family:'Sora',sans-serif;
  cursor:pointer;
  letter-spacing:0.04em;
  transition:background 0.2s;
}

.login-btn:hover{
  background:#33d8f0;
}

.login-error{
  font-size:12px;
  color:#e060a0;
  margin-bottom:0.75rem;
  font-family:'Space Mono',monospace;
  letter-spacing:0.04em;
}

.login-footer{
  font-size:13px;
  color:#9aabcb;
  text-align:center;
  margin-top:3rem;
}

.login-footer a{
  color:#909fff;
  text-decoration:none;
}

.login-footer a:hover{
  color:#b0b8ff;
}

.login-card-footer{
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid #1e2a40;
  font-family:'Space Mono',monospace;
  font-size:10px;
  color:#6878a0;
  letter-spacing:0.1em;
  text-align:center;
  width:80%;
  margin-left:auto;
  margin-right:auto;
}

/* ============================================================
   REGISTRATION MODAL
   ============================================================ */

.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(8,11,20,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:200;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s;
}

.modal-backdrop.active{
  opacity:1;
  pointer-events:all;
}

.modal-card{
  position:relative;
  background:#0e1220;
  border:1px solid #1c2235;
  border-radius:14px;
  padding:2.5rem 3rem;
  width:100%;
  max-width:580px;
  max-height:90vh;
  overflow-y:auto;
  transform:translateY(12px);
  transition:transform 0.2s;
}

.modal-backdrop.active .modal-card{
  transform:translateY(0);
}

.modal-close{
  position:absolute;
  top:1.25rem;
  right:1.25rem;
  background:none;
  border:none;
  color:#3a4a68;
  font-size:22px;
  cursor:pointer;
  line-height:1;
  transition:color 0.15s;
}

.modal-close:hover{
  color:#9aabcb;
}

.modal-heading{
  font-size:22px;
  font-weight:300;
  color:#f0f6ff;
  letter-spacing:-0.01em;
  margin-bottom:0.4rem;
}

.modal-sub{
  font-size:13px;
  color:#9aabcb;
  font-weight:300;
  margin-bottom:1.75rem;
}

.modal-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.field-optional{
  font-size:9px;
  color:#3a4a68;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-family:'Space Mono',monospace;
}