:root{
  --bg-0:#0b0f14;
  --bg-1:#0e1320;
  --text:#d7e6ee;
  --muted:#9cb1c2;
  --teal:#00f5d4;
  --teal-2:#39e0ff;
  --card:#0b1222cc;
  --border:#1e2a3d;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 20% -10%, #10304e66, transparent 60%),
    radial-gradient(900px 500px at 80% -20%, #2a125666, transparent 60%),
    linear-gradient(160deg, var(--bg-1), var(--bg-0));
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}


.wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:40px 18px 70px;
  position:relative;
}


.brand{
  margin:0 0 6px;
  font-size: clamp(44px, 7vw, 76px);
  line-height: .95;
  text-align:center;
  color: var(--teal);
  letter-spacing:.5px;
  text-shadow: 0 0 18px #00f5d480, 0 0 48px #00f5d433, 0 2px 0 #032a26;
}


.mascot{
  position:relative;
  display:grid;
  place-items:center;
  margin-bottom: 18px;
}
.mascot img{
  width:min(170px, 38vw);
  filter: drop-shadow(0 10px 24px #000a);
}
.aura{
  position:absolute; inset:auto 0 -8px 0;
  width: 360px; height: 110px;
  margin:auto;
  border-radius: 50%;
  filter: blur(14px);
  opacity:.55;
  pointer-events:none;
}
.aura--1{ background: radial-gradient(60% 60% at 50% 50%, #00f5d4, transparent 70%); transform: translateY(24px) scaleX(.9); }
.aura--2{ background: radial-gradient(60% 60% at 50% 50%, #6aa9ff, transparent 70%); transform: translateY(28px) scaleX(1.1); opacity:.35; }
.aura--3{ background: radial-gradient(60% 60% at 50% 50%, #e250ff, transparent 70%); transform: translateY(32px) scaleX(1.3); opacity:.25; }


.card{
  width:min(560px, 92vw);
  margin-top: 14px;
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px #0008, inset 0 1px 0 #ffffff0d;
  padding: 22px;
}
.form{ display:grid; gap:16px; }


.input{
  display:flex; align-items:center; gap:10px;
  padding: 14px 16px;
  border:1px solid #1e3a4f;
  border-radius: 16px;
  background:#0a1324;
  box-shadow: inset 0 0 0 1px #0f1b30;
}
.input:focus-within{
  border-color:#1e6b6b;
  box-shadow: 0 0 0 2px #11384a, 0 0 24px #00f5d433 inset;
}
.icon{ width:22px; height:22px; display:grid; place-items:center; opacity:.9; }
.icon svg{ width:20px; height:20px; fill:#8fd3ff; }
.input input{
  flex:1;
  background:transparent; border:0; outline:0;
  color:var(--text); font-size:16px;
}
.input input::placeholder{ color:#a2b8c8; opacity:.8; }

/* Buttons */
.btn{
  display:inline-block;
  width:100%;
  padding:14px 16px;
  border-radius: 16px;
  font-weight:600;
  border:1px solid #1f3550;
  background:#0b1424;
  color:#cfe6ff;
  cursor:pointer;
  transition:.2s ease;
}
.btn--primary{
  border-color:#146a6a;
  background: linear-gradient(90deg, #0c1a2e, #0c1a2e) padding-box,
              linear-gradient(90deg, #00f5d4, #5b8cff) border-box;
  border:1px solid transparent;
}
.btn--primary:hover{
  box-shadow: 0 0 22px #00f5d440;
  transform: translateY(-1px);
}


.providers{
  display:flex; gap:16px; justify-content:center; margin-top:4px;
}
.circle{
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid #1e2c44; background:#0a1324;
  cursor:pointer; transition:.2s ease;
}
.circle:hover{ transform: translateY(-2px); box-shadow: 0 6px 20px #0008; }
.circle svg{ width:26px; height:26px; fill:#dbe7ff; }
.circle--fb svg{ fill:#3b5998; }
.circle--gg svg{ fill:#db4437; }


.forgot{
  position: fixed;
  right: 50x;
  bottom: 20px;
  display:inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  color:#d8e9ff;
  text-decoration:none;
  background:#0b1424;
  border:1px solid #24425f;
  box-shadow: inset 0 0 0 1px #0e223a, 0 0 16px #00f5d420;
  backdrop-filter: blur(4px);
  transition:.2s ease;
  font-size:14px;
}
.forgot:hover{ box-shadow: 0 0 24px #00f5d440; transform: translateY(-1px); }


@media (max-width:520px){
  .brand{ font-size: 44px; }
  
  .aura{ width: 260px; }
}