/* AstraTrader's public entrance. The workspace keeps its own appearance settings. */
.login-page {
  background:#050b0e;
}
.login-page .signed-out {
  position:relative;
  z-index:1;
  min-height:100svh;
  background:transparent;
}
.login-page .workspace {
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
.universe-scene {
  position:fixed;
  inset:0;
  pointer-events:none;
  background:#050b0e;
}
.universe-scene picture,
.universe-scene img {
  display:block;
  width:100%;
  height:100%;
}
.universe-scene img {
  object-fit:cover;
  object-position:center 58%;
}
.universe-scene::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#04090ddd 0%,#04090d55 26%,#04090d0d 55%,#04090d99 100%);
}
.login-page .auth-header {
  width:100%;
  padding:22px 36px;
  align-items:center;
  gap:16px;
}
.astra-home {
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:#c0e6d8;
}
.astra-mark {
  width:34px;
  height:34px;
  flex-shrink:0;
}
.astra-home span {
  font-size:9px;
  font-weight:550;
  letter-spacing:1.9px;
  color:#aec3bf;
}
.login-page .auth-header .text-button {
  min-height:36px;
  padding:8px 13px;
  border:1px solid #b3d5c72e;
  border-radius:30px;
  color:#cee1da;
  background:#07101473;
  font-size:11px;
  backdrop-filter:blur(10px);
}
.login-page .signed-out main {
  flex:1;
  width:100%;
  max-width:1200px;
  padding:0 28px 20px;
  display:flex;
  flex-direction:column;
}
.login-layout {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:10px 0 28px;
}
.login-intro {
  text-align:center;
}
.astra-wordmark {
  margin:0;
  color:#f2f7f5;
  font-size:clamp(48px,6.4vw,82px);
  line-height:1.05;
  font-weight:550;
  letter-spacing:-4px;
  text-shadow:0 2px 26px #02090bb3;
}
.astra-wordmark span {
  color:#c7e3d8;
  font-weight:400;
}
.astra-tagline {
  margin:15px 0 0;
  color:#e0ede8;
  font-size:18px;
  line-height:1.5;
  letter-spacing:-.25px;
  text-shadow:0 2px 12px #02090b;
}
.astra-description {
  margin:8px 0 0;
  color:#aabeb8;
  font-size:12px;
  line-height:1.6;
  text-shadow:0 2px 12px #02090b;
}
.login-panel {
  width:100%;
  max-width:386px;
  padding:26px 28px 22px;
  border:1px solid #adcebf3b;
  border-radius:18px;
  background:#0c151bcc;
  backdrop-filter:blur(24px);
  box-shadow:0 24px 80px #0008,inset 0 1px 0 #d0f3e80a;
}
.login-panel-heading h2 {
  margin:0;
  font-size:22px;
  letter-spacing:-.5px;
  line-height:1.25;
  font-weight:550;
  color:#edf5f1;
}
.login-panel-heading p {
  margin:7px 0 24px;
  font-size:12px;
  color:#a9bcb5;
}
.login-form {
  display:grid;
  gap:16px;
}
.login-field {
  gap:7px;
}
.login-field label {
  font-size:11px;
  color:#c8d8d2;
  font-weight:500;
}
.login-field input {
  min-height:44px;
  padding:11px 13px;
  border:1px solid #abc4ba38;
  border-radius:8px;
  color:#eef7f2;
  background:#050c116b;
  font-size:13px;
  box-shadow:inset 0 1px 3px #0002;
}
.login-field input::placeholder {
  color:#8fa19b;
  opacity:1;
}
.login-field input[aria-invalid=true] {
  border-color:#f29797;
}
.login-password {
  position:relative;
}
.login-password:has(button:not([hidden])) input {
  padding-right:64px;
}
.login-password-toggle {
  position:absolute;
  right:3px;
  top:3px;
  min-width:54px;
  min-height:38px;
  border:0;
  border-radius:5px;
  background:transparent;
  color:#b0c6bd;
  font-size:11px;
}
.login-password-toggle:hover {
  color:#eef7f2;
  background:#a4d6be14;
}
.login-password-toggle:focus-visible {
  outline-offset:0;
}
.login-submit.button.primary {
  width:100%;
  min-height:46px;
  justify-content:space-between;
  padding:11px 15px;
  margin-top:3px;
  font-size:13px;
  font-weight:600;
  border:1px solid #c2eed57a;
  border-radius:8px;
  color:#0a261b;
  background:linear-gradient(110deg,#c3ebd4,#95d4b9);
  box-shadow:0 3px 18px #8fd6b51c;
}
.login-help {
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid #adcebf26;
  color:#a7bcb2;
  text-align:center;
  font-size:10px;
  line-height:1.6;
}
.login-error {
  margin:0 0 20px;
  padding:13px 15px;
  border:1px solid #c67e7e;
  border-radius:8px;
  background:#352329;
  color:#f7e9e9;
  font-size:12px;
  line-height:1.6;
}
.login-error strong {
  color:#f2aaaa;
  font-weight:550;
}
.login-error ul {
  list-style:none;
  padding:0;
  margin:5px 0 0;
}
.login-page :is(button,a,input):focus-visible,
.login-error:focus-visible {
  outline:2px solid #b5ebcf;
  outline-offset:4px;
}
.login-page .login-password-toggle:focus-visible {
  outline-offset:0;
}
.login-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-top:1px solid #c1e6d821;
  padding-top:15px;
  color:#a2b7ae;
  font-size:10px;
  text-shadow:0 1px 8px #000;
}
.login-footer>span:first-child {
  letter-spacing:2px;
  font-size:9px;
}
/* Light appearance gives the form an opal surface while retaining the universe. */
html[data-theme=light] .login-panel {
  background:#f3f8f2ed;
  border-color:#f1fff1a6;
  box-shadow:0 24px 80px #0005,inset 0 1px 0 #fff;
}
html[data-theme=light] .login-panel-heading h2 { color:#19352e; }
html[data-theme=light] .login-panel-heading p,
html[data-theme=light] .login-help { color:#506a60; }
html[data-theme=light] .login-field label { color:#304d41; }
html[data-theme=light] .login-field input { color:#18382a; background:#ffffff8f; border-color:#aac2b7; }
html[data-theme=light] .login-field input::placeholder { color:#6a8076; }
html[data-theme=light] .login-password-toggle { color:#446254; }
html[data-theme=light] .login-password-toggle:hover { color:#19352e; background:#274f3412; }
html[data-theme=light] .login-submit.button.primary { color:#f2fff8; background:linear-gradient(110deg,#245a47,#1c493b); border-color:#245a47; }
html[data-theme=light] .login-help { border-color:#b2c8ba8c; }
html[data-theme=light] .login-field input[aria-invalid=true] { border-color:#b54850; }
html[data-theme=light] .login-panel :is(button,input):focus-visible { outline-color:#31755a; }
html[data-theme=light] .login-error { color:#4a2929; background:#fff0f0; border-color:#ba7878; }
html[data-theme=light] .login-error strong { color:#963d3d; }
@media(min-width:701px) and (max-height:780px) {
  .login-page .auth-header { padding-top:14px; padding-bottom:14px; }
  .login-layout { gap:22px; padding:4px 0 20px; }
  .astra-wordmark { font-size:66px; }
  .astra-tagline { margin-top:10px; font-size:16px; }
  .astra-description { margin-top:5px; }
}
@media(max-width:700px) {
  .login-page .auth-header { padding:18px 22px; }
  .astra-home { gap:8px; }
  .astra-home span { font-size:8px; letter-spacing:1.2px; }
  .astra-mark { width:28px; height:28px; }
  .login-page .signed-out main { padding:0 22px 20px; }
  .login-layout { gap:26px; padding:20px 0 30px; }
  .astra-wordmark { font-size:56px; letter-spacing:-2.6px; }
  .astra-tagline { margin-top:13px; font-size:15px; }
  .astra-description { max-width:280px; margin:8px auto 0; font-size:11px; }
  .login-panel { padding:24px 24px 20px; }
  .login-field input { font-size:16px; min-height:46px; }
  .universe-scene img { object-position:30% center; }
  .universe-scene::after { background:linear-gradient(180deg,#04090dcc,#04090d33 35%,#04090d33 75%,#04090dba); }
  .login-footer { font-size:9px; gap:10px; }
  .login-footer>span:first-child { font-size:8px; letter-spacing:1.4px; }
}
@media(max-width:360px) {
  .login-page .auth-header { padding:14px 16px; }
  .astra-home span { display:none; }
  .login-page .signed-out main { padding:0 16px 16px; }
  .astra-wordmark { font-size:48px; }
  .login-layout { padding-top:15px; gap:22px; }
  .login-panel { padding:22px 20px 18px; }
  .login-help { font-size:9px; }
}
@media print {
  .universe-scene { display:none; }
  .login-page { background:#fff; }
  .login-page .login-intro p,.login-page .astra-wordmark,.login-page .astra-wordmark span,.login-footer { color:#172e25; text-shadow:none; }
}