/* Shared Nexus visual system: backgrounds, cards, forms, buttons, and loading. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  background:
    radial-gradient(circle at 15% 15%, rgba(226,52,91,.16), transparent 34%),
    radial-gradient(circle at 85% 80%, rgba(56,85,255,.18), transparent 38%),
    radial-gradient(circle at 55% 45%, rgba(145,61,255,.1), transparent 42%),
    #09090c;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; transform: none !important; }
a { color: inherit; }
[hidden] { display: none !important; }
.gradient-text {
  background: linear-gradient(90deg,#ef3c5c,#a847e8,#416cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Small Beta marker used beside the primary Nexus brand treatments. */
.auth-brand-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.beta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(196, 132, 255, .42);
  border-radius: 999px;
  color: #ead8ff;
  background: linear-gradient(120deg, rgba(233, 54, 88, .14), rgba(86, 102, 250, .17));
  box-shadow: 0 0 18px rgba(168, 71, 232, .12);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: middle;
}
.beta-badge-small {
  min-height: 18px;
  padding: 3px 6px;
  font-size: 8px;
}
.welcome-wrap { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding:32px 20px; }
.card,.panel {
  width:100%; background:rgba(18,18,24,.9); border:1px solid rgba(255,255,255,.1);
  border-radius:26px; box-shadow:0 30px 90px rgba(0,0,0,.42); backdrop-filter:blur(18px);
}
.card { max-width:760px; padding:64px 48px; text-align:center; }
.panel { padding:40px; }
.eyebrow,.completion-pill {
  display:inline-block; padding:8px 14px; border:1px solid rgba(255,255,255,.12);
  border-radius:999px; color:#b7b7c5; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.eyebrow { margin-bottom:24px; }
.intro { max-width:590px; margin:24px auto 0; color:#a9a9b7; font-size:18px; line-height:1.65; }
.field { margin-top:28px; }
label { display:block; margin-bottom:10px; color:#fff; font-size:16px; font-weight:700; line-height:1.45; }
input,textarea {
  width:100%; border:1px solid rgba(255,255,255,.12); border-radius:13px; color:#fff;
  background:rgba(255,255,255,.045); outline:none; transition:border-color .16s,background .16s;
}
input { padding:15px 16px; }
textarea { min-height:125px; padding:16px; resize:vertical; line-height:1.55; }
input:focus,textarea:focus { border-color:rgba(168,71,232,.8); background:rgba(255,255,255,.065); }
.primary-button,.submit-button,.continue-button {
  border:0; color:#fff; background:linear-gradient(90deg,#e93658,#a340e7,#3866fa);
  font-weight:700; box-shadow:0 14px 40px rgba(104,64,255,.2); transition:transform .16s,filter .16s;
}
.primary-button:hover,.submit-button:hover,.continue-button:hover { transform:translateY(-2px); filter:brightness(1.08); }
.primary-button { padding:17px 24px; border-radius:13px; font-size:16px; }
.full-button { width:100%; margin-top:30px; }
.secondary-button,.text-button,.submit-button,.continue-button,.danger-button {
  padding:15px 22px; border-radius:12px; font-weight:700;
}
.secondary-button { border:1px solid rgba(255,255,255,.12); color:#c8c8d2; background:transparent; }
.text-button { border:0; color:#a9a9b7; background:transparent; }
.danger-button { border:1px solid rgba(239,60,92,.35); color:#ff9aae; background:rgba(239,60,92,.06); }
.actions { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:38px; }
.submit-button,.continue-button { flex:1; max-width:340px; }
.status { min-height:24px; margin-top:18px; color:#ff9cab; text-align:right; font-size:14px; }
.helper { margin-top:8px; color:#81818f; font-size:13px; line-height:1.5; }
.auth-screen { display:none; }
.auth-screen.active { display:block; }
.auth-card { max-width:560px; text-align:left; }
.auth-title { margin:0; font-size:clamp(38px,7vw,58px); line-height:1.05; letter-spacing:-.04em; }
.auth-card .intro { margin:16px 0 0; font-size:16px; }
.auth-note { margin-top:20px; color:#858594; font-size:13px; line-height:1.6; text-align:center; }
.auth-email { color:#d9b2f4; font-weight:700; }
.code-input { text-align:center; font-size:28px; font-weight:800; letter-spacing:10px; }
.auth-link-button { display:block; margin:18px auto 0; border:0; color:#aaaab7; background:transparent; text-decoration:underline; }
.loading-overlay {
  position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(5,5,9,.74); backdrop-filter:blur(8px);
}
.loading-overlay.active { display:flex; }
.loading-card { width:100%; max-width:430px; padding:38px 30px; text-align:center; background:rgba(20,20,27,.97); border:1px solid rgba(255,255,255,.12); border-radius:22px; box-shadow:0 30px 90px rgba(0,0,0,.55); }
.spinner { width:48px; height:48px; margin:0 auto 24px; border:4px solid rgba(255,255,255,.12); border-top-color:#a847e8; border-radius:50%; animation:spin .85s linear infinite; }
.loading-card h3 { margin:0; font-size:23px; }
.loading-card p { margin:12px 0 0; color:#9f9fac; line-height:1.6; }
@keyframes spin { to { transform:rotate(360deg); } }
@media(max-width:650px){ .card{padding:48px 24px}.panel{padding:26px 20px}.actions{flex-direction:column-reverse;align-items:stretch}.secondary-button,.submit-button,.continue-button,.danger-button{width:100%;max-width:none} }

/* Cloudflare Turnstile security check on the login form. */
.turnstile-container { margin-top:24px; min-height:65px; display:flex; justify-content:center; }
.turnstile-container iframe { max-width:100%; }

/* Shared confirmation window for beginning a replacement assessment. */
body.dialog-open { overflow: hidden; }
.nexus-action-dialog { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 24px; }
.nexus-action-dialog[hidden] { display: none; }
.nexus-action-dialog-backdrop { position: absolute; inset: 0; background: rgba(3, 3, 8, .78); backdrop-filter: blur(8px); }
.nexus-action-dialog-card { position: relative; width: min(540px, 100%); padding: 30px; border: 1px solid rgba(190, 134, 255, .35); border-radius: 22px; background: linear-gradient(145deg, rgba(31, 24, 45, .98), rgba(12, 12, 18, .99)); box-shadow: 0 28px 90px rgba(0, 0, 0, .55), 0 0 45px rgba(157, 78, 221, .14); }
.nexus-action-dialog-card h2 { margin: 10px 0 12px; }
.nexus-action-dialog-card p { color: var(--muted); line-height: 1.65; }
.nexus-action-dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

/* Assessment action labels should remain readable on one line. */
.actions > button,
.actions > a,
.dashboard-actions > button,
.dashboard-actions > a,
.profile-actions > button,
.profile-actions > a { white-space: nowrap; width: auto; max-width: 100%; }
@media (max-width: 620px) {
  .actions > button,
  .actions > a,
  .dashboard-actions > button,
  .dashboard-actions > a,
  .profile-actions > button,
  .profile-actions > a { font-size: clamp(.72rem, 3.15vw, .9rem); padding-inline: 12px; }
  .nexus-action-dialog-actions { display: grid; grid-template-columns: 1fr; }
}

/* Login-code resend control uses the same branded button system and a visible cooldown. */
.resend-code-button { margin-top: 12px; width: 100%; }
.resend-code-button:not(:disabled):hover { border-color: rgba(168,71,232,.55); color: #fff; background: rgba(168,71,232,.08); }

/* Update 0012: concise login-page value context. */
.auth-value-prop {
  margin: 22px 0 18px;
  padding: 18px 19px;
  border: 1px solid rgba(168,71,232,.2);
  border-radius: 16px;
  background: linear-gradient(145deg,rgba(168,71,232,.075),rgba(56,102,250,.035));
}
.auth-value-prop h2 {
  margin: 0;
  font-size: clamp(20px,3.6vw,26px);
  line-height: 1.2;
  letter-spacing: -.025em;
}
.auth-value-prop p {
  margin: 10px 0 0;
  color: #b8b6c3;
  line-height: 1.58;
}
.auth-value-prop ul {
  display: grid;
  gap: 7px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.auth-value-prop li {
  position: relative;
  padding-left: 20px;
  color: #e7e3ed;
  font-size: 14px;
  line-height: 1.45;
}
.auth-value-prop li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: #c277f0;
  font-size: 11px;
}
.auth-login-intro { margin-top: 0 !important; }

/* 0.2.4: login value context lives above the login card as part of the page. */
.app-version {
  color: #aaa7b5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}
.app-version-small { font-size: 8px; white-space: nowrap; }
.auth-welcome-wrap { align-items: flex-start; padding-top: clamp(38px, 7vh, 78px); padding-bottom: 70px; }
.auth-entry-layout { width: min(720px, 100%); display: grid; gap: 28px; }
.auth-brand-kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 17px; font-size: 22px; font-weight: 900; }
.auth-value-prop {
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.auth-value-prop h2 { max-width: 650px; font-size: clamp(27px, 5vw, 43px); }
.auth-value-prop p { max-width: 680px; font-size: 16px; }
.auth-value-prop ul { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 11px 18px; margin-top: 19px; }
.auth-value-prop li { font-size: 13px; }
.auth-entry-layout .auth-card { max-width: none; }

/* Bottom action rows stay aligned and distribute their buttons evenly. */
.actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: stretch;
  gap: 14px;
}
.actions > span:empty { display: none; }
.actions > button,
.actions > a,
.actions .submit-button,
.actions .continue-button { width: 100%; max-width: none; }
@media (max-width: 650px) {
  .auth-value-prop ul { grid-template-columns: 1fr; }
  .auth-value-prop { padding-inline: 2px; }
  .actions { grid-template-columns: 1fr; }
}

.beta-capacity { margin: 10px 0 0; color: #bfe7ff; font-size: 13px; font-weight: 800; letter-spacing: .02em; }

/* 0.3.0 authentication choice flow. */
.auth-entry-shell { width:min(700px,100%); display:grid; gap:18px; }
.auth-choice-panel { max-width:none; padding:clamp(34px,6vw,58px); text-align:left; background:radial-gradient(circle at 92% 8%,rgba(77,109,255,.12),transparent 34%),rgba(18,18,24,.92); }
.auth-choice-title { max-width:610px; margin:18px 0 12px; font-size:clamp(2.25rem,6vw,4rem); line-height:1.03; letter-spacing:-.045em; }
.auth-choice-copy { max-width:620px; color:#b9b7c4; font-size:1.02rem; line-height:1.68; }
.auth-choice-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:24px 0 0; padding:0; list-style:none; }
.auth-choice-benefits li { position:relative; padding-left:19px; color:#e3e1e9; font-size:.88rem; line-height:1.5; }
.auth-choice-benefits li::before { content:"✦"; position:absolute; left:0; color:#df4cb5; }
.auth-choice-actions { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px; }
.auth-choice-actions button { width:100%; }
.auth-form-panel { position:relative; max-width:620px; margin:0 auto; }
.auth-back-button { margin:0 0 26px; padding:0; border:0; color:#aaa7b5; background:transparent; font-weight:800; }
.auth-back-button:hover { color:#fff; }
.auth-shared-note { margin:0; }
@media(max-width:650px){.auth-choice-benefits,.auth-choice-actions{grid-template-columns:1fr}.auth-choice-panel{padding:34px 24px}}

/* 0.3.0: action labels must stay readable at every responsive width. */
.actions > button,
.actions > a,
.stage-completion-navigation > button,
.stage-completion-navigation > a,
.ignite-complete-actions > button,
.ignite-complete-actions > a {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
  text-align: center;
}

/* Update 0.3.1: aligned, wider authentication and sitewide Nexus scrollbars. */
.auth-entry-shell { width:min(780px,100%); justify-items:center; }
.auth-form-panel { width:min(640px,100%); max-width:640px; }
.auth-create-title { white-space:nowrap; font-size:clamp(34px,6vw,54px); }
.auth-sales-band {
  position:relative;
  left:50%;
  width:100vw;
  margin-left:-50vw;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 18% 18%,rgba(233,54,88,.15),transparent 30%),
    radial-gradient(circle at 82% 78%,rgba(56,102,250,.16),transparent 34%),
    rgba(14,14,20,.9);
  box-shadow:0 26px 80px rgba(0,0,0,.3);
}
.auth-sales-content { width:min(780px,calc(100% - 40px)); margin:0 auto; padding:clamp(38px,6vw,64px) 0; }
.beta-welcome-note { margin:0 0 16px; color:#b9b6c2; }
.create-beta-capacity { margin:12px 0 0; color:#ffd27c; font-size:.92rem; font-weight:800; }
.create-beta-capacity.beta-full { color:#ff9cab; }
.auth-public-links { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; color:#8d8a98; font-size:.82rem; }
.auth-public-links a:hover { color:#fff; }

* { scrollbar-width:auto; scrollbar-color:#a847e8 rgba(255,255,255,.045); }
*::-webkit-scrollbar { width:22px; height:22px; }
*::-webkit-scrollbar-track { background:rgba(255,255,255,.035); border-radius:999px; }
*::-webkit-scrollbar-thumb {
  border:5px solid rgba(9,9,12,.82);
  border-radius:999px;
  background:linear-gradient(180deg,#ef3c5c,#a847e8 48%,#416cff);
  box-shadow:inset 0 0 8px rgba(255,255,255,.2),0 0 12px rgba(168,71,232,.22);
}
*::-webkit-scrollbar-thumb:hover { filter:brightness(1.18); }
@media(max-width:650px){
  .auth-sales-content{width:min(100% - 28px,780px)}
  .auth-create-title{white-space:normal}
}

/* Update 0.3.2: centered authentication, equal confirmation actions, and stable action rows. */
.auth-entry-shell { width:min(760px,calc(100% - 28px)); margin-inline:auto; justify-items:stretch; }
.auth-sales-band { left:auto; width:100dvw; margin-inline:calc(50% - 50dvw); }
.auth-sales-content { width:min(740px,calc(100% - 40px)); }
.auth-form-panel { width:min(640px,100%); margin-inline:auto; }
.auth-form-topline { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-bottom:26px; }
.auth-form-topline .eyebrow { margin:0; text-align:center; }
.auth-form-topline > span { min-width:0; }
.auth-back-button { justify-self:start; margin:0; padding:9px 13px; border:1px solid rgba(176,89,245,.45); border-radius:10px; color:#d9c5ec; background:rgba(168,71,232,.055); }
.auth-back-button:hover,.auth-back-button:focus-visible { color:#fff; border-color:rgba(204,118,255,.8); background:rgba(168,71,232,.12); box-shadow:0 0 18px rgba(168,71,232,.18); }
.nexus-action-dialog-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
.nexus-action-dialog-actions > button { width:100%; min-height:48px; }
@media(max-width:650px){
  .auth-entry-shell{width:min(100% - 20px,760px)}
  .auth-sales-content{width:min(100% - 28px,740px)}
  .auth-form-topline{grid-template-columns:auto 1fr;}
  .auth-form-topline .eyebrow{text-align:right}
  .auth-form-topline > span{display:none}
  .nexus-action-dialog-actions{grid-template-columns:1fr}
}

/* Update 0.3.3: show remaining beta capacity directly on the account choice. */
#chooseCreateButton{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.beta-spots-left{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border:1px solid rgba(255,194,86,.34);border-radius:999px;color:#ffd477;background:rgba(255,183,72,.08);font-size:.68rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.beta-spots-left.beta-full{border-color:rgba(255,102,122,.3);color:#ff9aaa;background:rgba(255,72,100,.07)}

/* Update 0.3.6: shared instruction component used across Onboarding, Passion Path, and Ignite. */
.nexus-instructions{display:grid;gap:10px;margin:20px 0;padding:18px 20px}
.nexus-instructions>strong{font-size:.72rem;letter-spacing:.12em}
.nexus-instructions ol{display:grid;gap:7px;margin:0;padding-left:22px;color:#c7c3cf}
.nexus-instructions li::marker{font-weight:900}

/* Update 0.4.0: universal Journey save state. */
.universal-save-status{display:flex;align-items:center;justify-content:flex-end;gap:9px;width:min(100%,560px);margin:9px 0 0 auto;color:#aaa6b4;text-align:right;font-size:.76rem;line-height:1.25}
.universal-save-status>span:nth-child(2){display:grid;gap:1px}.universal-save-status strong{color:#e9e6ef;font-size:.8rem}.universal-save-status small{color:#85818f}.save-state-dot{width:8px;height:8px;border-radius:50%;background:#48e39b;box-shadow:0 0 10px rgba(72,227,155,.42)}
.universal-save-status[data-state="saving"] .save-state-dot{background:#ffd05a;box-shadow:0 0 10px rgba(255,208,90,.5);animation:nexusSavePulse 1s ease-in-out infinite}.universal-save-status[data-state="retry"] .save-state-dot{background:#ff6f86;box-shadow:0 0 10px rgba(255,111,134,.5)}
.universal-save-status button{padding:5px 9px;border:1px solid rgba(255,111,134,.4);border-radius:8px;background:rgba(255,111,134,.08);color:#ff9cad;font:inherit;font-weight:800}
@keyframes nexusSavePulse{50%{opacity:.35;transform:scale(.75)}}
@media(max-width:680px){.universal-save-status{width:100%;justify-content:flex-end;margin-top:8px}.universal-save-status small{display:none}}


/* 0.4.5 dedicated passwordless email-code form. */
.auth-email-code-form .auth-title{font-size:clamp(36px,6vw,54px)}

/* Nexus 0.4.6 password visibility, confirmation, and requirement feedback. */
.password-input-wrap{position:relative}
.password-input-wrap input{padding-right:52px}
.password-visibility-button{position:absolute;top:50%;right:8px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:10px;background:transparent;color:#9693a3;transform:translateY(-50%);cursor:pointer;transition:color .16s,background .16s,box-shadow .16s}
.password-visibility-button:hover,.password-visibility-button:focus-visible{color:#fff;background:rgba(255,255,255,.075);box-shadow:0 0 0 1px rgba(190,119,255,.22)}
.password-visibility-button.is-visible{color:#cf83ff;background:rgba(179,82,245,.09)}
.password-visibility-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.password-field-group{margin-top:28px}
.password-field-group>.field{margin-top:0}
.password-confirm-field{margin-top:16px!important}
.password-rule-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 14px;margin:14px 0 0;padding:0;list-style:none;color:#8f8b99;font-size:.76rem;line-height:1.35;text-align:left}
.password-rule-list li{position:relative;padding-left:19px;transition:color .16s}
.password-rule-list li::before{content:"";position:absolute;left:1px;top:.3em;width:8px;height:8px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(255,255,255,.035);transition:background .16s,border-color .16s,box-shadow .16s}
.password-rule-list li.is-met{color:#a9e8c8}
.password-rule-list li.is-met::before{border-color:#62dfa5;background:#62dfa5;box-shadow:0 0 9px rgba(98,223,165,.35)}
@media(max-width:520px){.password-rule-list{grid-template-columns:1fr}}