body{
  background:linear-gradient(180deg,var(--hero-grad-a) 0%,var(--hero-grad-b) 100%);
}

.hero{
  padding:70px 0 40px;
  background:
    radial-gradient(circle at top left, rgba(63,73,227,0.10), transparent 30%),
    radial-gradient(circle at bottom right, rgba(239,28,37,0.06), transparent 24%);
  border-bottom:0;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:999px;
  background:rgba(63,73,227,0.08);
  border:1px solid rgba(63,73,227,0.14);
  color:var(--blue);font-size:0.74rem;font-weight:800;
  text-transform:uppercase;letter-spacing:0.18em;
}
.eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 5px rgba(239,28,37,0.10);
}

h1{
  margin:20px 0 0;
  font-size:clamp(2.4rem,5vw,4.5rem);
  line-height:0.98;letter-spacing:-0.04em;color:var(--ink);
}

.hero p{
  margin:22px 0 0;
  max-width:760px;
  font-size:1.06rem;line-height:1.8;color:var(--muted);
}

.login-wrap{
  padding:20px 0 80px;
}

.login-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.auth-panel{
  border-radius:28px;
  padding:30px;
  min-height:100%;
}

.auth-panel--light{
  background:var(--surface-card);
  border:1px solid var(--border-card);
  box-shadow:0 18px 42px rgba(14,22,38,0.06);
}

.auth-panel--dark{
  background:var(--panel-dark-grad);
  border:1px solid var(--line-dark);
  box-shadow:0 20px 50px rgba(10,16,30,0.20);
  color:var(--on-dark);
}

.tag{
  display:inline-block;
  padding:7px 11px;border-radius:999px;
  background:rgba(63,73,227,0.08);
  color:var(--blue);font-size:0.72rem;
  font-weight:800;text-transform:uppercase;
  letter-spacing:0.15em;border:1px solid rgba(63,73,227,0.14);
}

.auth-panel--dark .tag{
  background:rgba(239,28,37,0.14);
  color:#ffc2c5;
  border-color:rgba(239,28,37,0.24);
}

.auth-panel h2{
  margin:16px 0 10px;
  font-size:1.8rem;
  line-height:1.15;
}

.auth-panel p{
  margin:0;
  line-height:1.8;
  color:var(--muted);
}

.auth-panel--dark p{color:rgba(255,255,255,0.74)}

.form{
  display:grid;
  gap:14px;
  margin-top:24px;
}

input{
  width:100%;
  border:1px solid var(--border-field);
  background:var(--surface-input);
  color:var(--text);
  border-radius:16px;
  padding:15px 16px;
  font:inherit;
  outline:none;
}

input::placeholder{color:#93a0b7}
input:focus{
  border-color:rgba(63,73,227,0.55);
  box-shadow:0 0 0 4px rgba(63,73,227,0.10);
}

.auth-panel-actions{
  display:grid;
  gap:12px;
  margin-top:8px;
}

.note{
  margin-top:18px;
  font-size:0.92rem;
  color:var(--muted);
  line-height:1.7;
}

.auth-panel--dark .note{color:rgba(255,255,255,0.70)}

footer{
  margin-top:40px;
}
.login-anchor{
  height:1px;margin:-1px 0 0;overflow:hidden;clip-path:inset(50%);
  scroll-margin-top:96px;
}
#my-account,
#login-register{
  scroll-margin-top:96px;
}

@media (max-width:980px){
  .login-grid{grid-template-columns:1fr}
}

@media (max-width:700px){
  .hero{padding:56px 0 28px}
  .auth-panel{padding:24px}
}