:root{
  --bg-0:#0A161C;
  --bg-1:#060B0E;
  --panel:#0E222A;
  --line:rgba(120,220,220,0.14);
  --line-strong:rgba(90,200,210,0.36);
  --text-hi:#E3FBFF;
  --text-mid:#6FC2C9;
  --text-low:#456F79;
  --power:#12D9A0;
  --power-2:#3FF0C4;
  --steel:#2E9BE0;
  --danger:#FF6B6B;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:'Inter',sans-serif;
  color:var(--text-hi);
  background:
    radial-gradient(circle at 10% 0%, rgba(18,217,160,0.13), transparent 36%),
    radial-gradient(circle at 100% 20%, rgba(46,155,224,0.15), transparent 38%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 70%, #030608);
  padding:28px;
}

.shell{
  min-height:calc(100vh - 56px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,420px);
  align-items:center;
  gap:40px;
  max-width:1060px;
  margin:0 auto;
}

.brand .eyebrow,.kicker{
  font-family:'JetBrains Mono',monospace;
  color:var(--power-2);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:11px;
}

.brand h1{
  margin-top:10px;
  font-family:'Big Shoulders Display',sans-serif;
  font-size:76px;
  line-height:.9;
  text-transform:uppercase;
}

.brand h1 span{
  background:linear-gradient(120deg, var(--power), var(--steel));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.brand p{
  max-width:560px;
  margin-top:18px;
  color:var(--text-mid);
  font-family:'JetBrains Mono',monospace;
  line-height:1.7;
}

.panel{
  border:1px solid var(--line);
  border-left:3px solid var(--power);
  background:rgba(14,34,42,.9);
  padding:26px;
  border-radius:4px;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}

.panel-head h2{
  margin-top:6px;
  font-family:'Big Shoulders Display',sans-serif;
  text-transform:uppercase;
  font-size:34px;
}

.panel-head i{
  color:var(--power-2);
  font-size:30px;
}

.form{
  display:grid;
  gap:16px;
  margin-top:22px;
}

label{
  display:grid;
  gap:8px;
  color:var(--text-mid);
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

input{
  width:100%;
  border:1px solid var(--line-strong);
  border-radius:3px;
  background:#071419;
  color:var(--text-hi);
  min-height:46px;
  padding:0 12px;
  font:600 15px 'Inter',sans-serif;
}

input:focus{
  outline:2px solid rgba(63,240,196,.45);
  outline-offset:2px;
}

button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  border:0;
  border-radius:3px;
  background:linear-gradient(120deg, var(--power), var(--steel));
  color:#031011;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  cursor:pointer;
}

button:disabled{
  cursor:wait;
  opacity:.7;
}

.message{
  min-height:20px;
  color:var(--danger);
  font-size:13px;
}

.back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
  color:var(--text-mid);
  text-decoration:none;
  font-size:13px;
}

@media(max-width:820px){
  body{padding:18px}
  .shell{grid-template-columns:1fr;gap:26px}
  .brand h1{font-size:48px}
}