/* assets/css/register.css - modern register card */
.register-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: calc(100vh - 120px);
  padding:3.5rem 1rem;
}

.register-card{
  width:100%;
  max-width:760px;
  border-radius:16px;
  padding:28px;
  display:flex;
  gap:1.5rem;
  flex-direction:column;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 20px 60px rgba(2,6,10,0.6);
  transition: transform 420ms cubic-bezier(.2,.9,.3,1);
}
.register-card:hover{ transform: translateY(-6px) }

.register-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px }
.register-header h1{ margin:0; font-size:1.6rem }
.register-header .muted{ margin:4px 0 0 0; color:var(--muted) }
.logo-badge{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:12px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#022; font-weight:800 }

.alert{ padding:10px 12px; border-radius:10px; margin-bottom:12px; font-weight:600 }
.alert-error{ background:linear-gradient(180deg, rgba(255,120,120,0.06), rgba(255,120,120,0.03)); border:1px solid rgba(255,120,120,0.06); color:#ffd8d8 }
.alert-info{ background:linear-gradient(180deg, rgba(77,208,225,0.03), transparent); border:1px solid rgba(77,208,225,0.03); color:var(--accent-2) }

.register-form{ display:flex; flex-direction:column; gap:12px }
.grid-two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
@media (max-width:720px){ .grid-two-col{ grid-template-columns:1fr } }

.form-label{ display:block; font-weight:600; color:rgba(255,255,255,0.92); font-size:0.95rem }
.form-label input{ margin-top:8px; width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.04); background: rgba(255,255,255,0.02); color:inherit; font-size:1rem; outline:none }
.form-label input:focus{ box-shadow: 0 10px 36px rgba(77,208,225,0.06); transform: translateY(-2px) }

.password-field{ display:flex; gap:8px; align-items:center }
.password-field input{ flex:1 }
.icon-btn{ background:transparent; border:1px solid rgba(255,255,255,0.04); padding:8px 10px; border-radius:10px; cursor:pointer }

.pw-strength{ display:flex; align-items:center; gap:10px; margin-top:8px }
.pw-strength .bar{ width:120px; height:8px; background:rgba(255,255,255,0.04); border-radius:6px; overflow:hidden }
.pw-strength .bar > i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition: width 240ms ease }
.pw-strength .label{ font-size:0.9rem; color:var(--muted) }

.form-row{ display:flex; gap:12px; align-items:center }
.btn{ font-weight:800; padding:10px 14px; border-radius:12px; cursor:pointer; border:0 }
.btn-primary{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#022; box-shadow: 0 12px 30px rgba(77,208,225,0.08) }
.btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--muted) }

/* small helper */
.muted{ color:var(--muted) }
.auth-foot{ margin-top:12px; font-size:0.9rem; color:var(--muted) }

/* responsive */
@media (max-width:520px){
  .register-card{ padding:20px }
}