/* Account-page typography and navigation parity with the approved Galaxy Oscillation homepage.
   Presentation only; does not change authentication behavior or API calls. */
body {
  margin: 0;
  background: #080d12;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Browsers otherwise apply default blue/purple unvisited/visited link colors on
   the account page (whose stylesheet does not have the homepage's link reset). */
header.topbar .nav a,
header.topbar .nav a:visited {
  color: #9CA8B4;
  text-decoration: none;
}
header.topbar .nav a:hover,
header.topbar .nav a:focus-visible,
header.topbar .nav a.is-active {
  color: #F2F5F7;
}

* { box-sizing: border-box; }
.account-main {
  min-height: calc(100vh - 86px);
  padding: 72px 24px 88px;
  background: radial-gradient(ellipse at 50% 0%, rgba(42, 100, 132, .13), transparent 52%), #080d12;
  color: #F2F5F7;
}
.account-shell { width: min(100%, 540px); margin: 0 auto; }
.account-intro {
  /* The heading and subtitle are wider than the form, but stay centered with it. */
  width: min(1040px, calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
  text-align: center;
  margin-bottom: 30px;
}
@media (min-width: 760px) {
  .account-intro h1,
  .account-intro p { white-space: nowrap; }
}
.account-kicker { color: #4CC9E8; font-size: 11px; font-weight: 800; letter-spacing: .18em; margin-bottom: 14px; }
.account-intro h1 { margin: 0; font-size: clamp(30px, 5vw, 42px); line-height: 1.15; letter-spacing: -.035em; }
.account-intro p { max-width: none; margin: 16px auto 0; color: #AAB8C5; font-size: 16px; line-height: 1.65; }
.account-card {
  overflow: hidden;
  border: 1px solid #2D3946;
  border-radius: 15px;
  background: rgba(16, 23, 32, .96);
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
}
.account-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #2D3946; }
.account-tab { min-height: 58px; border: 0; background: transparent; color: #9CA8B4; font: inherit; font-size: 15px; cursor: pointer; }
.account-tab.is-active { color: #F2F5F7; box-shadow: inset 0 -2px #4CC9E8; }
.account-form { display: flex; flex-direction: column; padding: 34px 38px 36px; }
.account-form[hidden], .account-card[hidden], .account-notice[hidden], form[hidden] { display: none !important; }
.account-form h2, .signed-in-card h2 { margin: 0; font-size: 25px; letter-spacing: -.02em; }
.form-intro { margin: 10px 0 24px; color: #AAB8C5; font-size: 14px; line-height: 1.6; }
.account-form label { margin: 16px 0 8px; color: #DCE5EC; font-size: 13px; font-weight: 650; }
.account-form input {
  width: 100%; min-height: 48px; border: 1px solid #394958; border-radius: 7px;
  background: #0B121A; color: #F2F5F7; padding: 0 13px; font: inherit; font-size: 15px;
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.account-form input:focus { border-color: #4CC9E8; box-shadow: 0 0 0 3px rgba(76,201,232,.12); }
.account-form input::placeholder { color: #647484; }
.field-hint { margin: 7px 0 0; color: #8292A1; font-size: 12px; }
.account-submit {
  min-height: 51px; margin-top: 25px; border: 0; border-radius: 7px;
  background: #4CC9E8; color: #06131A; font-size: 12px; font-weight: 850;
  letter-spacing: .12em; cursor: pointer; transition: filter .15s ease, transform .15s ease;
}
.account-submit:hover { filter: brightness(1.07); }
.account-submit:active { transform: translateY(1px); }
.account-submit:disabled { opacity: .55; cursor: wait; }
.form-footnote { margin: 17px 0 0; color: #DCE5EC; font-size: 13px; font-weight: 650; line-height: 1.6; text-align: center; }
.text-action { align-self: center; margin-top: 17px; border: 0; background: transparent; color: #58CDE9; font: inherit; font-size: 13px; cursor: pointer; }
.text-action:hover { color: #A5EAF8; text-decoration: underline; }
.secondary-action { color: #91A0AE; margin-top: 12px; }
.account-notice { margin: 0 0 18px; padding: 13px 15px; border: 1px solid #35546A; border-radius: 8px; background: rgba(45, 114, 145, .13); color: #D7EAF2; font-size: 13px; line-height: 1.6; }
.account-notice.is-error { border-color: #8C4D4D; background: rgba(150, 55, 55, .13); color: #FFD6D6; }
.signed-in-card { padding: 42px 38px; text-align: center; }
.signed-in-mark { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 20px; border: 1px solid rgba(76,201,232,.55); border-radius: 50%; color: #4CC9E8; font-size: 17px; font-weight: 800; }
.signed-in-email { margin: 10px 0 0; color: #4CC9E8; font-size: 15px; }
.secondary-submit { background: transparent; border: 1px solid #526474; color: #DCE5EC; }
.account-security-note { margin: 22px auto 0; max-width: 470px; color: #718191; font-size: 11px; line-height: 1.6; text-align: center; }
@media (max-width: 600px) {
  .account-main { padding: 48px 16px 64px; }
  .account-form { padding: 28px 22px 30px; }
  .signed-in-card { padding: 34px 22px; }
}

/* Registration clarity improvements, November 5, 2026 */
.account-form .field-error[hidden] { display: none !important; }
.account-form .field-error {
  margin: 8px 0 0;
  color: #FFD4D4;
  font-size: 13px;
  line-height: 1.5;
}
.account-form input[aria-invalid="true"] {
  border-color: #CB7777;
  box-shadow: 0 0 0 2px rgba(203,119,119,.12);
}
.verification-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
  padding: 15px 16px;
  border: 1px solid #31596A;
  border-left: 3px solid #4CC9E8;
  border-radius: 7px;
  background: rgba(76,201,232,.07);
  color: #D4E6EE;
  font-size: 13px;
  line-height: 1.65;
}
.verification-note strong { color: #F2F5F7; font-weight: 750; }
.verification-note-icon {
  flex: 0 0 auto;
  color: #4CC9E8;
  font-size: 23px;
  line-height: 1.2;
}
.verification-note + .account-submit { margin-top: 18px; }

/* Stage 2: dashboard entry point for authenticated members. */
.signed-in-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 24px; }
.signed-in-actions .account-submit { margin-top: 0; padding: 0 20px; }
.dashboard-open-link { min-height: 51px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border-radius: 7px; background: #4CC9E8; color: #06131A; font-size: 12px; font-weight: 850; letter-spacing: .09em; text-decoration: none; }
.dashboard-open-link:hover { filter: brightness(1.07); }
.dashboard-open-link:focus-visible { outline: 3px solid #4CC9E8; outline-offset: 3px; }