/* Approved Valgardia login: shared form for portrait and desktop. */
#auth-screen {
  justify-content: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  background: linear-gradient(180deg, #0c10200a, #080d2038),
    url("assets/branding/valgardia-login-desktop-v2.webp") 24% center / cover no-repeat,
    #131729;
}
#auth-screen .auth-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(calc(100% - 32px), 440px);
  min-height: 100%;
  margin: 0 auto;
  padding: max(40px, env(safe-area-inset-top)) 0 max(30px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
#auth-screen .brand-lockup { width: 100%; margin: auto 0 0; flex-shrink: 0; }
#auth-screen #auth-title { width: 100%; max-width: none; margin: 0; text-indent: 0; }
#auth-screen .auth-logo {
  width: 100%;
  height: clamp(110px, 21dvh, 170px);
  object-fit: contain;
  filter: drop-shadow(0 3px 1px #071022) drop-shadow(0 8px 18px #050817cc);
}
#auth-screen .login-card {
  position: relative;
  gap: 18px;
  width: 100%;
  min-width: 0;
  padding: 22px;
  border: 1px solid #cca656;
  border-radius: 16px;
  color: #f5f2ff;
  background: linear-gradient(145deg, #151d30f5, #101526f5);
  box-shadow: inset 0 0 0 3px #9572b217, 0 12px 40px #04071399, 0 0 24px #34204740;
  text-align: left;
  backdrop-filter: blur(14px);
}
#auth-screen #login-form, #auth-screen #alpha-access-form { margin: 0 0 auto; flex-shrink: 0; }
#login-form::before, #login-form::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 1px solid #e9c477;
  background: #302744;
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}
#login-form::before { top: 0; }
#login-form::after { top: 100%; }
#login-form [hidden] { display: none !important; }
#alpha-access-form[hidden], #login-form[hidden] { display: none !important; }
#alpha-access-form h2, #login-form h2 { margin: 0; color: #f6ebd3; font: 600 20px/1.3 "Cinzel", Georgia, serif; text-align: center; }
#alpha-access-form .auth-field { display: grid; gap: 8px; min-width: 0; }
#alpha-access-form .auth-field label { font-size: 14px; font-weight: 500; color: #eeebf6; }
#alpha-access-form .auth-input { position: relative; min-width: 0; }
#alpha-access-form .auth-input svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: #b7b9d0; stroke-width: 1.5; pointer-events: none; }
#alpha-access-form input { width: 100%; box-sizing: border-box; padding: 12px 12px 12px 44px; }
#alpha-access-form .primary-button { margin-top: 4px; }
#alpha-access-form .text-button { justify-self: center; min-height: 40px; padding: 9px 10px; color: #c9a6ff; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
#alpha-access-message:not([hidden]) { padding: 10px 12px; border: 1px solid #c69aff55; border-radius: 8px; background: #34244780; color: #e7d9ff; }
.auth-credit { margin: 2px 0 0; color: #a6abc1; font-size: 12px; text-align: center; }
.auth-credit a { color: #e3c98e; text-decoration: underline; text-underline-offset: 3px; }
#login-form .auth-tabs {
  display: flex;
  gap: 0;
  margin: 0 0 4px;
  border-bottom: 1px solid #85839f7a;
}
#login-form .auth-tabs button {
  position: relative;
  min-height: 46px;
  padding: 6px 8px 15px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #b5b5cd;
  font: 500 16px/1.25 "DM Sans", sans-serif;
  cursor: pointer;
}
#login-form .auth-tabs button.selected { color: #fff; font-weight: 700; }
#login-form .auth-tabs button.selected::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: #c69aff;
  box-shadow: 0 0 8px #c089ff, 0 -3px 18px #944fff88;
}
#login-form .auth-field { display: grid; gap: 8px; min-width: 0; }
#login-form .auth-field label { font-size: 14px; font-weight: 500; color: #eeebf6; }
#login-form .auth-input { position: relative; min-width: 0; }
#login-form .auth-input svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  fill: none;
  stroke: #b7b9d0;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
#auth-screen .login-card input {
  min-width: 0;
  min-height: 50px;
  border: 1px solid #80859e;
  border-radius: 9px;
  background: #0b1020b3;
  color: #f5f3fc;
  font: 400 16px/1.4 "DM Sans", sans-serif;
  box-shadow: inset 0 1px 4px #05081344;
  scroll-margin-block: 22px;
}
#login-form .auth-input input { padding: 12px 12px 12px 44px; }
#auth-screen .login-card input::placeholder { color: #9c9fb7; opacity: 1; }
#auth-screen .login-card input:focus {
  border-color: #c49aff;
  box-shadow: 0 0 0 3px #ab75ff26;
}
#auth-screen .login-card input:-webkit-autofill {
  -webkit-text-fill-color: #f5f3fc;
  -webkit-box-shadow: 0 0 0 100px #171d31 inset;
  caret-color: #fff;
}
#auth-screen .login-card .primary-button {
  position: relative;
  min-height: 58px;
  border: 1px solid #ebc77b;
  border-radius: 9px;
  background: linear-gradient(180deg, #9453fc 0%, #7431e6 22%, #5020b3 100%);
  box-shadow: inset 0 0 0 3px #b295ee44, inset 0 1px 0 #f4d4ffad, 0 0 20px #9855f538;
  color: #fff;
  font-size: 17px;
  text-shadow: 0 1px 3px #35196c;
  cursor: pointer;
}
#auth-screen #auth-submit { margin-top: 4px; }
#auth-submit .auth-submit-label { font-size: inherit; line-height: 1.3; }
#auth-submit .auth-submit-arrow { font-size: 24px; font-weight: 400; }
#auth-screen .login-card .primary-button:disabled { cursor: wait; }
#auth-screen .login-card .text-button {
  justify-self: center;
  min-height: 40px;
  width: auto;
  margin: -6px 0;
  padding: 9px 10px;
  color: #c9a6ff;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
#auth-screen .login-card button:focus-visible {
  outline: 2px solid #ffe4a7;
  outline-offset: 4px;
}
#auth-screen .login-card .form-note { margin: 0; color: #a6abc1; font-size: 11px; line-height: 1.5; }
#auth-screen .auth-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #df89954d;
  border-radius: 8px;
  background: #68293c33;
  color: #ffc7cf;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#password-reset-modal { width: min(440px, calc(100% - 28px)); margin: auto; padding: 0; border-color: #cca656; border-radius: 16px; }
#auth-screen #password-reset-form { border: 0; box-shadow: none; }
#password-reset-form .auth-field { display: grid; gap: 8px; }
#password-reset-form .auth-field label { color: #eeebf6; font-size: 14px; }
#password-reset-form .auth-field input { width: 100%; box-sizing: border-box; padding: 12px; }
#password-reset-form [hidden] { display: none !important; }
#auth-feedback { color: #d4c0ff; }
#resend-verification-open[hidden], #password-reset-feedback[hidden], #reset-password-fields[hidden], #reset-email-field[hidden] { display: none !important; }
.app-shell:has(#auth-screen.active) .music-controls { top: max(12px, env(safe-area-inset-top)); right: 16px; }
@media (min-width: 1024px) {
  html[data-layout="horizontal"] #auth-screen { background-position: center, center; }
  html[data-layout="horizontal"] #auth-screen .auth-content { width: 550px; gap: 20px; padding-block: 32px; }
  html[data-layout="horizontal"] #auth-screen .auth-logo { height: clamp(150px, 25dvh, 265px); }
  html[data-layout="horizontal"] #auth-screen #login-form, html[data-layout="horizontal"] #auth-screen #alpha-access-form { max-width: 480px; padding: 28px 34px; gap: 22px; }
  html[data-layout="horizontal"] #login-form .auth-field label { font-size: 16px; }
}
@media (max-width: 359px) {
  #auth-screen .auth-content { width: calc(100% - 24px); }
  #auth-screen .login-card { padding: 20px 16px; }
}
@media (max-height: 740px) {
  #auth-screen .auth-content { gap: 10px; padding-block: 30px; }
  #auth-screen .auth-logo { height: 115px; }
  #auth-screen #login-form, #auth-screen #alpha-access-form { gap: 14px; padding-block: 20px; }
  html[data-layout="horizontal"] #auth-screen .auth-content { gap: 10px; padding-block: 24px; }
  html[data-layout="horizontal"] #auth-screen .auth-logo { height: 145px; }
  html[data-layout="horizontal"] #auth-screen #login-form, html[data-layout="horizontal"] #auth-screen #alpha-access-form { gap: 16px; padding-block: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #auth-screen.active { animation: none; }
  #auth-screen .login-card :is(input, button) { transition: none; }
}