/* Thoughtcast Club styling for Element's sign-in screens.
   Scoped to .mx_AuthPage so it only touches the sign-in, sign-out and
   password-reset pages, never the chat itself. */

.mx_AuthPage {
  --tc-ink: #f4efe6;
  --tc-dim: #a9adc4;
  --tc-red: #ff3d55;
  --tc-blue: #3f8cff;
  --tc-gold: #ffc23d;
  --tc-panel: #0c0f1d;

  /* Element's primary buttons (the "Sign in" button) in sign gold */
  --cpd-color-bg-action-primary-rest: #ffc23d;
  --cpd-color-bg-action-primary-hovered: #ffd062;
  --cpd-color-bg-action-primary-pressed: #e8a91c;
  --cpd-color-text-on-solid-primary: #1a1204;
  /* focused fields and links in sign blue */
  --cpd-color-border-interactive-hovered: #3f8cff;
  --cpd-color-border-focused: #3f8cff;
  --cpd-color-text-link-external: #7fb0ff;
}

/* the box: neon rim and a red-white-blue rail along the top */
.mx_AuthPage .mx_AuthPage_modal {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 194, 61, .35);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 46px rgba(255, 194, 61, .18), 0 18px 60px rgba(0, 0, 0, .55);
}
.mx_AuthPage .mx_AuthPage_modal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, var(--tc-red) 0 33%, var(--tc-ink) 33% 66%, var(--tc-blue) 66%);
  box-shadow: 0 0 12px rgba(63, 140, 255, .6);
}

/* left column: dark instead of frosted white, bigger sign */
.mx_AuthPage .mx_AuthHeader {
  width: 270px;
  min-width: 270px;
  box-sizing: border-box;
  padding-inline: 20px;
  background: rgba(7, 8, 15, .78);
  border-right: 1px solid rgba(255, 255, 255, .06);
}
.mx_AuthPage .mx_AuthHeaderLogo {
  width: auto;
  padding-inline: 0;
  margin-top: 8px;
}
.mx_AuthPage .mx_AuthHeaderLogo img {
  width: 100%;
  max-width: 220px;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(255, 194, 61, .25));
}

/* right column */
.mx_AuthPage .mx_AuthBody {
  background: var(--tc-panel);
  color: var(--tc-ink);
}
.mx_AuthPage .mx_AuthBody h1 {
  color: var(--tc-ink);
  letter-spacing: .02em;
  text-shadow: 0 0 6px rgba(255, 255, 255, .3), 0 0 18px rgba(63, 140, 255, .55);
}
.mx_AuthPage .mx_AuthBody h2,
.mx_AuthPage .mx_AuthBody label { color: var(--tc-dim); }

.mx_AuthPage .mx_Login_submit {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .03em;
  box-shadow: 0 0 20px rgba(255, 194, 61, .45);
}
.mx_AuthPage .mx_Login_submit:hover { box-shadow: 0 0 30px rgba(255, 194, 61, .7); }

/* footer: make "Create an account" a real button, keep the rest quiet */
.mx_AuthPage .mx_AuthFooter { align-items: center; }
.mx_AuthPage .mx_AuthFooter a:first-child {
  padding: 10px 22px;
  border: 2px solid var(--tc-blue);
  border-radius: 999px;
  background: rgba(12, 15, 29, .85);
  color: var(--tc-ink) !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none !important;
  box-shadow: 0 0 16px rgba(63, 140, 255, .45);
}
.mx_AuthPage .mx_AuthFooter a:first-child:hover { box-shadow: 0 0 26px rgba(63, 140, 255, .7); }