:root {
  color-scheme: light;
  --white: #ffffff;
  --navy: #13283c;
  --navy-900: #0b1d38;
  --navy-700: #173c69;
  --secondary: #5f6f81;
  --ink-600: #5f6f81;
  --placeholder: #8593a5;
  --orange: #ff4b0a;
  --orange-600: #ed5b22;
  --orange-light: #ff6a28;
  --orange-100: #fff0e8;
  --purple: #6d3cff;
  --line: rgba(19, 40, 60, .11);
  --danger: #a72828;
  --success: #14765f;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--navy);
  background: #fff url("/assets/showcase-white-background.png") left center / cover no-repeat fixed;
}

button,
input { font: inherit; }

button { color: inherit; }

.auth-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 46px 24px;
}

.auth-card {
  position: relative;
  width: min(690px, 100%);
  padding: 68px 76px 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .96);
  border-radius: 42px;
  background: rgba(255, 255, 255, .82);
  box-shadow:
    0 32px 90px rgba(52, 65, 82, .13),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(194, 203, 213, .18);
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
}

.auth-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(242, 246, 250, .7);
  content: "";
  pointer-events: none;
}

.brand-logo {
  display: block;
  width: min(430px, 78%);
  height: auto;
  margin: 0 auto 42px;
}

.showcase-context {
  display: grid;
  max-width: 520px;
  margin: -16px auto 30px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 75, 10, .18);
  border-radius: 14px;
  background: rgba(255, 244, 238, .84);
  text-align: center;
}

.showcase-context[hidden] { display: none; }
.showcase-context span { color: var(--orange); font-size: 10px; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.showcase-context strong { margin-top: 4px; font-size: 16px; }
.showcase-context small { margin-top: 3px; color: var(--secondary); font-size: 12px; }

.invite-required {
  margin: 24px 0 6px;
  padding: 20px;
  border: 1px solid #f0d6ca;
  border-radius: 14px;
  background: rgba(255, 247, 243, .9);
  text-align: center;
}

.invite-required[hidden] { display: none; }
.invite-required strong { color: var(--orange); }
.invite-required p { margin: 8px 0 0; color: var(--secondary); font-size: 13px; line-height: 1.55; }

.auth-view h1 {
  margin: 0;
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 680;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
}

.view-intro {
  max-width: 500px;
  margin: 13px auto 30px;
  color: var(--secondary);
  font-size: 15px;
  line-height: 1.55;
  text-align: center;
}

.auth-form {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}

.compact-form { margin-top: 26px; }

label {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 540;
}

input {
  width: 100%;
  height: 64px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  color: var(--navy);
  background: rgba(255, 255, 255, .93);
  box-shadow: inset 0 1px 2px rgba(19, 40, 60, .025);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input::placeholder { color: var(--placeholder); }

input:focus {
  border-color: rgba(255, 75, 10, .55);
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255, 89, 24, .12);
}

.input-wrap { position: relative; }

.input-wrap input { padding-left: 62px; }

.input-wrap::before {
  position: absolute;
  z-index: 1;
  left: 22px;
  top: 50%;
  width: 20px;
  height: 18px;
  transform: translateY(-50%);
  content: "";
  pointer-events: none;
}

.input-email::before {
  border: 2px solid var(--navy);
  border-radius: 3px;
  background:
    linear-gradient(32deg, transparent 47%, var(--navy) 48% 52%, transparent 53%) left center / 50% 100% no-repeat,
    linear-gradient(-32deg, transparent 47%, var(--navy) 48% 52%, transparent 53%) right center / 50% 100% no-repeat;
  opacity: .86;
}

.input-password::before {
  width: 18px;
  height: 16px;
  border: 2px solid var(--navy);
  border-radius: 3px;
  opacity: .86;
}

.input-password::after {
  position: absolute;
  z-index: 1;
  left: 26px;
  top: 18px;
  width: 10px;
  height: 11px;
  border: 2px solid var(--navy);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  content: "";
  opacity: .86;
  pointer-events: none;
}

.visibility-toggle {
  position: absolute;
  z-index: 2;
  right: 12px;
  top: 50%;
  min-width: 52px;
  min-height: 40px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 8px;
  color: var(--secondary);
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.visibility-toggle:hover { background: rgba(19, 40, 60, .05); }
.input-password input { padding-right: 72px; }

.primary-button {
  display: flex;
  width: 100%;
  min-height: 68px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 0 28px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(100deg, var(--orange-light), var(--orange));
  box-shadow: 0 17px 28px rgba(255, 75, 10, .20), inset 0 1px 0 rgba(255,255,255,.28);
  font-size: 19px;
  font-weight: 620;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.primary-button .arrow {
  position: absolute;
  right: 100px;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}

.primary-button:hover {
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow: 0 21px 32px rgba(255, 75, 10, .25), inset 0 1px 0 rgba(255,255,255,.28);
}

.primary-button:disabled {
  transform: none;
  filter: grayscale(.2);
  cursor: wait;
  opacity: .72;
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(255, 75, 10, .28);
  outline-offset: 3px;
}

.trust-row {
  display: flex;
  min-height: 73px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-bottom: 1px solid rgba(19, 40, 60, .08);
  color: var(--navy);
  font-size: 14px;
  font-weight: 520;
}

.microsoft-mark {
  display: grid;
  width: 24px;
  height: 24px;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.microsoft-mark i:nth-child(1) { background: #f35325; }
.microsoft-mark i:nth-child(2) { background: #81bc06; }
.microsoft-mark i:nth-child(3) { background: #05a6f0; }
.microsoft-mark i:nth-child(4) { background: #ffba08; }

.trust-dot { margin-inline: 4px; }

.security-mark {
  display: grid;
  width: 25px;
  height: 29px;
  place-items: center;
  clip-path: polygon(50% 0, 94% 17%, 84% 75%, 50% 100%, 16% 75%, 6% 17%);
  color: #fff;
  background: var(--purple);
  font-size: 13px;
  font-weight: 800;
}

.support-copy {
  margin: 18px 0 0;
  color: var(--secondary);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.login-switch-link {
  display: block;
  width: max-content;
  margin: 14px auto 0;
  color: var(--secondary);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.login-switch-link:hover { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }

.text-button,
.back-button {
  border: 0;
  color: var(--orange);
  background: transparent;
  font-weight: 650;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.back-button {
  display: block;
  margin: -24px 0 22px;
  padding: 8px 0;
  text-decoration: none;
}

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.two-column > div { display: grid; gap: 10px; }
.two-column label { margin-top: 0; }

.message {
  min-height: 0;
  margin-top: 14px;
  padding: 0;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.message:not(:empty) { padding: 11px 13px; }
.message.error { color: var(--danger); background: #fff0f0; }
.message.success { color: var(--success); background: #edf9f5; }

.success-view { padding: 32px 8px 26px; text-align: center; }

.success-view p {
  max-width: 440px;
  margin: 18px auto 28px;
  color: var(--secondary);
  line-height: 1.65;
}

.success-icon {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 24px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #29a480, #14765f);
  box-shadow: 0 14px 28px rgba(20, 118, 95, .20);
  font-size: 28px;
}

.compact-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.status-card {
  width: min(590px, 100%);
  padding: 54px 58px;
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 34px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 28px 80px rgba(52,65,82,.13);
  backdrop-filter: blur(24px) saturate(145%);
  text-align: center;
}

.status-card .brand-logo { width: min(360px, 82%); margin-bottom: 34px; }

.status-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 22px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--orange-light), var(--orange));
  box-shadow: 0 13px 26px rgba(255,75,10,.18);
  font-size: 26px;
  font-weight: 700;
}

.status-card h1 { margin: 0; font-size: clamp(30px, 5vw, 42px); letter-spacing: -.04em; }
.status-card > p:not(.eyebrow) { color: var(--secondary); line-height: 1.65; }
.status-card .primary-button { color: #fff; text-decoration: none; }

@media (max-width: 760px) {
  body { background-position: 35% center; }
  .auth-shell { align-items: start; padding: 24px 14px; }
  .auth-card { padding: 42px 28px 28px; border-radius: 32px; }
  .brand-logo { width: min(360px, 88%); margin-bottom: 34px; }
  .auth-view h1 { font-size: 31px; }
  .view-intro { margin-bottom: 24px; }
  .auth-form { margin-top: 26px; }
  input { height: 60px; }
  .primary-button { min-height: 62px; font-size: 17px; }
  .primary-button .arrow { right: 54px; }
  .trust-row { flex-wrap: wrap; gap: 8px; padding: 18px 0; }
  .two-column { grid-template-columns: 1fr; gap: 10px; }
  .back-button { margin-top: -16px; }
  .status-card { padding: 42px 28px; border-radius: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}