/* The access journey uses the same navy/indigo language as Sylo and ICC. */
:root {
  --ink: #172033;
  --muted: #626d81;
  --line: #dfe4ef;
  --surface: #ffffff;
  --canvas: #f7f8fb;
  --dark: #172033;
  --dark-2: #263553;
  --brand: #4f5fc4;
  --brand-soft: #e9edff;
  --green: #4054a5;
  --green-soft: #e9edff;
  --red: #b84b60;
}

.story-panel {
  background: radial-gradient(circle at 85% 9%, rgb(117 133 223 / 20%), transparent 34%),
    radial-gradient(circle at 7% 90%, rgb(79 95 196 / 16%), transparent 35%), #172033;
}
.story-panel::before { border-color: rgb(184 197 255 / 5%); }
.brand rect, .mobile-brand rect { fill: #7585df; stroke: rgb(255 255 255 / 22%); }
.eyebrow { color: #b8c4e8; }
.story-copy p { color: #c3cce0; }
.story-panel > footer { color: #aab7d4; }
.story-panel > footer i { background: #9baafa; box-shadow: 0 0 0 3px rgb(155 170 250 / 16%); }

.product-visual { max-width: 660px; max-height: 320px; }
.visual-glow { background: rgb(79 95 196 / 25%); }
.product-window { border-color: #cad2e3; background: #f7f8fb; color: #172033; box-shadow: 0 25px 64px rgb(4 10 24 / 30%); }
.window-bar { border-bottom-color: #e2e6f0; background: #fff; color: #33405b; }
.window-brand { font-size: 9px; }
.window-brand i { background: #4f5fc4; }
.window-status { background: #e9edff; color: #344799; }
.window-status i { background: #6577d8; box-shadow: 0 0 0 3px rgb(101 119 216 / 14%); }
.mini-sidebar { background: #172033; }
.mini-sidebar i.selected::before { background: #a7b5ff; }
.window-content { padding: 20px; }
.content-heading span, .setup-head span { color: #687792; }
.content-heading strong { color: #172033; }
.content-heading button { background: #273a83; }
.metric, .activity-card, .setup-company { border-color: #dce2ef; background: #fff; }
.metric > span, .activity-card > div { color: #66738b; }
.metric small, .activity-card li small, .activity-card > div small { color: #77849b; }
.metric.safe strong { color: #4054a5; }
.activity-card li > b { background: #e9edff; color: #4054a5; }
.activity-card li:nth-child(2) > b { background: #eef1f8; color: #435775; }
.setup-head small, .setup-company small { color: #687792; }
.setup-company > i { background: #e9edff; color: #4054a5; }
.setup-company > b { background: #e9edff; color: #4054a5; }
.setup-list span { border-color: #e0e5f0; background: #fff; color: #5f6d85; }
.setup-list i { background: #edf0f7; }
.setup-list .done { color: #4054a5; }
.setup-list .done i, .setup-list .current i { background: #e9edff; color: #4054a5; }
.setup-list .current { border-color: #aab7ee; color: #172033; box-shadow: 0 6px 20px rgb(23 32 51 / 6%); }

/* The recovery visual mirrors the email recipients actually receive. */
.recovery-scene { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(14px) scale(.985); }
.recovery-preview { width: min(100% - 44px, 480px); margin: 16px auto; padding: 20px 23px; border: 1px solid #e0e5f0; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgb(23 32 51 / 8%); }
.recovery-preview-mark { width: 24px; height: 24px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 7px; background: #7585df; color: #fff; font: 800 13px Manrope, sans-serif; }
.recovery-preview > span { display: block; color: #4054a5; font-size: 8px; font-weight: 800; letter-spacing: .11em; }
.recovery-preview > strong { display: block; margin-top: 5px; color: #172033; font: 750 20px/1.2 Manrope, sans-serif; }
.recovery-preview p { max-width: 43ch; margin: 9px 0 12px; color: #606d83; font-size: 10px; line-height: 1.45; }
.recovery-preview-action { width: fit-content; display: flex; align-items: center; gap: 12px; padding: 9px 13px; border-radius: 7px; background: #303e93; color: #fff; font-size: 9px; font-weight: 750; }
.recovery-preview-action b { font-size: 13px; }
.recovery-preview small { display: block; margin-top: 13px; color: #687792; font-size: 8px; }
body[data-view="recovery"] .login-scene, body[data-view="reset"] .login-scene { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(.985); }
body[data-view="recovery"] .recovery-scene, body[data-view="reset"] .recovery-scene { opacity: 1; transform: translateX(-50%); }
.floating-card { display: none; }

.auth-panel { background: #f7f8fb; }
.auth-card { border-color: #dfe4ef; background: #fff; box-shadow: 0 20px 55px rgb(23 32 51 / 8%); }
.topbar-prompt { color: #606d83; }
.topbar-prompt button, .auth-heading > span, .form-stack .text-button, .account-switch button,
.activation-account button, .consent a, .auth-footer a { color: #4054a5; }
.auth-heading p, .form-stack .field-help, .recovery-intro, .recovery-sent p { color: #626d81; }
.form-stack label, .password-label-row { color: #35415a; }
.form-stack input:not([type="checkbox"]), .form-stack select { border-color: #ccd4e4; background-color: #fff; color: #172033; }
.form-stack input::placeholder { color: #78869f; }
.form-stack input:focus, .form-stack select:focus { border-color: #4f5fc4; box-shadow: 0 0 0 4px rgb(79 95 196 / 13%); }
.input-shell svg { stroke: #78869f; }
.form-stack .primary, .recovery-sent .primary { background: #303e93; color: #fff; box-shadow: 0 7px 18px rgb(48 62 147 / 15%); }
.form-stack .primary:hover, .recovery-sent .primary:hover { background: #4054a5; }
.form-stack .primary:focus-visible, .auth-method-secondary:focus-visible, .text-button:focus-visible, .account-switch button:focus-visible { outline-color: #4f5fc4; }
.auth-method-divider { color: #6d7890; }
.auth-method-divider::before { background: #e0e5ee; }
.auth-method-secondary { border-color: #cbd3e3; color: #27365b; }
.auth-method-secondary:hover { border-color: #9ca9df; background: #f5f6ff; }
.account-switch, .activation-account, .signup-next-steps, .password-choice, :root .purchase-context { border-color: #dce2f0; background: #f3f5fc; }
.account-switch span, .activation-account span, .step-progress, .signup-next-steps span, :root .purchase-context small { color: #5d6a83; }
.activation-account strong, .signup-next-steps strong, :root .purchase-context strong { color: #24345b; }
.step-progress i { background: #e1e6f2; }
.step-progress i.active { background: #4f5fc4; }
.form-stack .consent { color: #53617a !important; }
.consent input { accent-color: #4f5fc4; }
.recovery-sent-icon { background: #e9edff; color: #4054a5; }
.password-choice summary { color: #4054a5; }
.auth-footer, .legal { color: #6f7b90; }

@media (max-width: 940px) {
  .auth-panel { background: #f7f8fb; }
}