.portal-page {
  min-height: 100vh;
  min-height: 100svh;
  background:
    radial-gradient(ellipse at 86% 68%, #692e382f 0%, transparent 42%),
    radial-gradient(ellipse at 15% 55%, #67339e3e 0%, transparent 48%),
    radial-gradient(ellipse at 50% 29%, #44235a73 0%, transparent 62%),
    linear-gradient(154deg, #161026, #1e1231 55%, #110c1d);
}
.portal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 96px;
  gap: 20px;
}
.portal-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  color: #e4cfff;
  text-decoration: none;
  font-size: .94rem;
  transition: color 180ms ease;
}
.portal-back:hover, .portal-recovery:hover { color: #ffd1a7; }
.portal-main {
  width: min(100% - 40px, 760px);
  margin-inline: auto;
  padding-block: clamp(32px, 6vh, 72px) clamp(48px, 8vw, 104px);
}
.portal-intro {
  margin-block-end: clamp(28px, 4vw, 46px);
  text-align: center;
}
.portal-intro h1 {
  font: 800 clamp(1.95rem, 4.8vw, 3.45rem)/1.1 var(--head);
  letter-spacing: -.045em;
  text-wrap: balance;
}
.portal-intro h1 span { color: #d9b9ff; }
.portal-intro p {
  max-width: 42ch;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.15rem);
  text-wrap: balance;
}
.portal-card {
  width: min(100%, 476px);
  margin-inline: auto;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid transparent;
  border-radius: 26px;
  background:
    linear-gradient(150deg, #3b2352e8, #221730e8 57%, #342037e8) padding-box,
    linear-gradient(136deg, #c087fc, #79529c 38%, #644882 68%, #d28e6b) border-box;
  box-shadow: inset 0 0 26px #aa72df26, 0 24px 64px #0f061eab, 0 0 36px #a65cea26;
  backdrop-filter: blur(16px);
}
.portal-card-heading { text-align: center; margin-bottom: 24px; }
.portal-card-heading h2 {
  font: 800 clamp(1.6rem, 3vw, 2.12rem)/1.15 var(--head);
  letter-spacing: -.025em;
}
.portal-card-heading p { margin-top: 6px; color: var(--muted); }
.portal-mark {
  display: grid;
  place-items: center;
  width: 51px;
  aspect-ratio: 1;
  margin: 0 auto 14px;
  border-radius: 15px;
  border: 1px solid #e6b5fd99;
  color: #f5d8ff;
  background: linear-gradient(140deg, #b16ced67, #5224737a 62%, #a65d453d);
  box-shadow: 0 0 19px #a75ce04d, inset 0 0 12px #dab0f337;
}
.portal-mark svg { width: 26px; height: 26px; }
.portal-form, .portal-field { display: grid; gap: 8px; }
.portal-form { gap: 16px; }
.portal-field label { color: #f8edff; font-weight: 600; }
.portal-field input {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #ad8ac678;
  border-radius: 12px;
  background: #150e24b8;
  color: var(--white);
  font: 1rem/1.4 var(--body);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.portal-field input::placeholder { color: #beaaca; }
.portal-field input:focus {
  outline: 2px solid #d2a4ff;
  outline-offset: 2px;
  box-shadow: 0 0 14px #9c61d738;
}
.portal-password { position: relative; }
.portal-password input { padding-inline-end: 56px; }
.portal-password input::-ms-reveal { display: none; }
.portal-reveal {
  position: absolute;
  inset-block: 3px;
  inset-inline-end: 3px;
  display: grid;
  place-items: center;
  width: 44px;
  border-radius: 9px;
  color: #e3c6ff;
  cursor: pointer;
}
.portal-reveal:hover { background: #b176ec24; }
.portal-reveal:focus-visible { outline-offset: -2px; }
.portal-reveal svg { width: 21px; height: 21px; }
.portal-eye-slash { display: none; }
.portal-password:has(input[type="text"]) .portal-eye-slash { display: inline; }
.portal-recovery {
  justify-self: end;
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-block: -10px -4px;
  color: #e8caff;
  font-size: .91rem;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 180ms ease;
}
.portal-submit {
  width: 100%;
  min-height: 50px;
  font: 700 1rem/1.3 var(--head);
  background: linear-gradient(110deg, #7025b3, #913cae 62%, #ad542e);
  cursor: pointer;
}
.portal-submit:is(:hover, :focus-visible) { transform: translateY(-2px); }
.portal-submit:disabled, .portal-reveal:disabled { cursor: default; }
.portal-status {
  min-height: 2.8em;
  color: #dfcde9;
  text-align: center;
  font-size: .85rem;
  line-height: 1.4;
}
@media (max-width: 520px) {
  .portal-header { min-height: 74px; }
  .portal-back { font-size: .86rem; }
  .portal-card { border-radius: 22px; }
}
@media (min-width: 761px) and (max-height: 820px) {
  .portal-header { min-height: 76px; }
  .portal-main { padding-block-start: 30px; }
  .portal-intro { margin-block-end: 28px; }
  .portal-intro h1 { font-size: clamp(2.6rem, 4vw, 3rem); }
  .portal-card { padding-block: 26px; }
  .portal-card-heading { margin-bottom: 18px; }
  .portal-form { gap: 14px; }
}