:root{
  --pink:#ff5aa5;
  --pink-strong:#ff2f86;
  --cyan:#4fe3ff;
  --purple:#9b7bff;
  --grad:linear-gradient(90deg,var(--pink-strong),var(--purple),var(--cyan));
  --bg:#060815;
  --panel:#0b1224;
  --stroke:rgba(255,255,255,.14);
  --text:#fff;
  --muted:rgba(255,255,255,.75);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; }

a{ color:rgba(255,255,255,.85); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
  position:relative;
  overflow:hidden;
}

/* soft orbs */
.orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; z-index:0; pointer-events:none; }
.orb.pink{ width:420px; height:420px; background:var(--pink); left:-160px; top:12%; }
.orb.cyan{ width:360px; height:360px; background:var(--cyan); right:-150px; top:10%; }
.orb.purple{ width:520px; height:520px; background:var(--purple); left:25%; bottom:-220px; }

.card{
  width:100%;
  max-width:440px;
  background:rgba(11,18,36,.92);
  border:1px solid var(--stroke);
  border-radius:22px;
  box-shadow:0 35px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  padding:22px;
  position:relative;
  z-index:1;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
}
.brand img{ height:54px; }

h1{
  font-size:22px;
  margin:8px 0 6px;
  text-align:center;
}
.sub{
  text-align:center;
  color:var(--muted);
  font-size:13px;
  margin:0 0 18px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}
label{ font-size:12px; color:rgba(255,255,255,.8); }
input, select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  color:#fff;
  outline:none;
}
input:focus, select:focus{
  border-color:rgba(255,255,255,.25);
}

.row{
  display:flex;
  gap:10px;
}
.row .field{ flex:1; }

.actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:16px;
  font-weight:900;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
}
.btn.primary{ background:var(--grad); color:#081022; }
.btn.ghost{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff; }

.small{
  font-size:12px;
  color:var(--muted);
}

.check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:10px 0 6px;
}
.check input{ width:18px; height:18px; margin-top:2px; }

.alert{
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,90,165,.14);
  border:1px solid rgba(255,90,165,.25);
  color:#fff;
  font-size:13px;
}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px 14px;
  z-index:50;
}
.modal.open{ display:flex; }

.modal__panel{
  width:100%;
  max-width:520px;
  background:rgba(11,18,36,.95);
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  box-shadow:0 40px 100px rgba(0,0,0,.65);
  overflow:hidden;
}

.modal__head{
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.modal__title{
  font-weight:900;
}
.modal__close{
  background:transparent;
  border:none;
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

.modal__body{
  padding:18px;
}

.modal__foot{
  padding:14px 18px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

@media (max-width:520px){
  .row{ flex-direction:column; }
}