.account-layout {
  width: min(100%, 1020px);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(360px, 460px) minmax(320px, 1fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}

.account-layout .login-card,
.account-layout .register-card {
  width: 100%;
  margin: 35px 0;
}

.account-info-panel {
  padding: clamp(28px, 4vw, 48px);
  background: rgba(10, 7, 15, .78);
  border-left: 3px solid #b56cff;
  backdrop-filter: blur(12px);
}

.account-info-panel h2 {
  margin: 10px 0 14px;
  font: 700 clamp(36px, 4vw, 58px)/.95 "Space Grotesk";
  letter-spacing: -.05em;
}

.account-info-panel > p:not(.eyebrow) {
  max-width: 540px;
  margin: 0;
  color: #c2b8cc;
  line-height: 1.7;
}

.account-info-panel ul {
  display: grid;
  gap: 0;
  margin: 28px 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #49365c;
}

.account-info-panel li {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid #49365c;
}

.account-info-panel li strong { font: 600 15px "Space Grotesk"; }
.account-info-panel li span { color: #aaa1b5; font-size: 13px; line-height: 1.55; }
.account-info-panel > a {
  display: inline-flex;
  gap: 28px;
  padding: 8px 0;
  border-bottom: 1px solid #765396;
  color: #d7b6ff;
  font-weight: 700;
  text-decoration: none;
}
.account-info-panel > a:hover { color: #fff; }

@media (max-width: 900px) {
  .account-layout { grid-template-columns: 1fr; margin: 45px 0 0; }
  .account-info-panel { border-top: 3px solid #b56cff; border-left: 1px solid #49365c; }
}

@media (max-width: 560px) {
  .account-info-panel { padding: 28px; }
}