:root {
  /* Color */
  --card: #262626;
  --card-border: #393636;
  --field: #212121;
  --field-border: #535353;
  --field-focus: #2845b5;
  --rule-box: #1a1a1a;
  --hairline: #393636;
  --accent: #427fff;
  --accent-text: #427fff;
  --btn-fg: #ffffff;
  --text: #ffffff;
  --text-muted: #777777;
  --text-dim: #707070;
  --label-color: #ffffff;
  --icon: #ffffff;
  --placeholder: #6f6f6f;
  --check-bg: #313131;
  --check-border: #717171;
  --err-bg: rgb(79,35,35);
  --err-border: #7f4747;
  --err-text: rgb(255,189,189);
  --err-stroke: #ff5555;
  --ok: #4caf50;
  --check-mark: #2196f3;

  /* Shape */
  --radius-card: 8px;
  --radius-field: 7px;
  --radius-btn: 5px;
  --radius-check: 4px;
  --border-w: 1px;
  --field-icon-left: 11px;
  --title-justify: center;

  /* Typography */
  --font: "Roboto", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  --font-mono: "Roboto", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", monospace;
  --field-size: 13px;
  --title-size: 20px;
  --title-weight: 600;
  --title-tracking: 0;
  --title-transform: none;
  --label-size: 13px;
  --label-weight: 400;
  --label-tracking: 0;
  --label-transform: none;
  --btn-size: 15px;
  --btn-weight: 500;
  --btn-tracking: 0.3px;
  --btn-transform: uppercase;

  /* Density */
  --card-pad: 20px;
  --gap: 15px;
  --field-pad-y: 15px;
  --field-pad-x: 15px;
  --field-pad-icon: 40px;
  --btn-h: 40px;

  /* Frame */
  --surface: #171717;
  --surface-panel: #171717;
  --glow: rgba(66, 127, 255, 0.1);
  --rule: rgba(255, 255, 255, 0.022);
  --muted: #777777;
  --hero-bg: #0e1216;
  --hero-overlay: rgba(0, 0, 0, 0.5);
  --hero-font: var(--font);
  --hero-title-size: 47px;
  --hero-title-weight: 700;
  --hero-title-tracking: 0;
  --hero-title-color: #ffffff;
  --hero-title-width: 50%;
  --hero-copy-size: 18px;
  --hero-copy-color: #ffffff;
  --hero-copy-width: 70%;
  --hero-pad-inline: 25px;
  --hero-eyebrow-color: #427fff;
  --hero-eyebrow-font: var(--font-mono);
  --hero-eyebrow-size: 11px;
  --hero-eyebrow-weight: 500;
  --hero-eyebrow-tracking: 0.18em;
  --hero-eyebrow-rule: #427fff;
  --hero-divider: transparent;
  --frame-form-width: 402px;
  --frame-logo-width: 210px;
  --frame-logo-height: 100px;
  --frame-logo-radius: 6px;
  --frame-footer-gap: 25px;
  --frame-footer-size: 12px;
  --frame-footer-tracking: 0;
  --frame-copyright-font: var(--font);
  --frame-copyright-size: 13px;
  --frame-copyright-tracking: 0;
  --media-left: 0;
  --media-bottom: 0;
  --media-border: transparent;
  --media-radius: 0;
  --link-hover: #2196f3;
  --brand-background-image: none;
}

/* Shared layout globals: Wdma, Logout and Widget retain their viewport sizing. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font);
}

*::before,
*::after {
  box-sizing: inherit;
}

body,
html {
  height: 100%;
  margin: 0;
}

.container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  user-select: none;
}

.container #container_wdma {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

body {
  background: var(--surface);
  color: var(--text);
}

a {
  color: var(--text-muted);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
}

button,
input {
  font: inherit;
}

/* Frame: ported from spike-base.css; layout is independent of look. */
.auth-frame {
  min-height: 100vh;
  background: transparent var(--brand-background-image) no-repeat center center fixed;
  background-size: cover;
  background-color: var(--surface);
}

.auth-frame--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 670px);
  overflow: hidden;
}

.auth-hero {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 32% 45%, var(--glow) 0%, transparent 62%),
    repeating-linear-gradient(0deg, var(--rule) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 44px),
    var(--hero-bg);
}

.auth-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: var(--hero-pad-inline);
  background: var(--hero-overlay);
  font-family: var(--hero-font);
}

.auth-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--hero-eyebrow-color);
  font-family: var(--hero-eyebrow-font);
  font-size: var(--hero-eyebrow-size);
  font-weight: var(--hero-eyebrow-weight);
  letter-spacing: var(--hero-eyebrow-tracking);
  text-transform: uppercase;
}

.auth-hero-eyebrow-rule {
  width: 28px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--hero-eyebrow-rule);
}

.auth-hero-title,
.auth-hero-copy,
.auth-centered-title,
.auth-centered-copy {
  margin: 0;
}

.auth-hero-title {
  max-width: var(--hero-title-width);
  margin-bottom: 20px;
  color: var(--hero-title-color);
  font-size: var(--hero-title-size);
  font-weight: var(--hero-title-weight);
  letter-spacing: var(--hero-title-tracking);
  line-height: 1.15;
  text-wrap: pretty;
}

.auth-hero-copy {
  max-width: var(--hero-copy-width);
  color: var(--hero-copy-color);
  font-size: var(--hero-copy-size);
  line-height: 1.5;
}

.auth-hero-divider {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 1px;
  background: var(--hero-divider);
}

.auth-media {
  position: absolute;
  top: 0;
  right: 0;
  left: var(--media-left);
  bottom: var(--media-bottom);
  border: var(--border-w) solid var(--media-border);
  pointer-events: none;
  border-radius: var(--media-radius);
  overflow: hidden;
}

.auth-media video,
.auth-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-hero-content,
.auth-hero-divider {
  z-index: 1;
}

.auth-brand img {
  max-width: 100%;
  max-height: 100%;
}

/* media.logoLight: one logo per theme, switched by the same data-theme as the palette. */
.auth-brand-logo--light,
:root[data-theme="light"] .auth-brand-logo--dark {
  display: none;
}

:root[data-theme="light"] .auth-brand-logo--light {
  display: inline;
}

.auth-panel {
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background: var(--surface-panel);
}

.auth-frame--centered {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(58% 46% at 50% 40%, var(--glow) 0%, transparent 70%),
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 96px),
    var(--brand-background-image) center / cover no-repeat fixed,
    var(--surface);
}

.auth-centered-stack {
  display: flex;
  width: var(--frame-form-width);
  flex-direction: column;
  align-items: center;
}

.auth-centered-intro {
  margin-bottom: 28px;
  text-align: center;
}

.auth-centered-title {
  color: var(--hero-title-color);
  font-family: var(--hero-font);
  font-size: 26px;
  font-weight: var(--hero-title-weight);
  letter-spacing: var(--hero-title-tracking);
  line-height: 1.25;
  text-wrap: pretty;
}

.auth-centered-copy {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

.auth-brand {
  display: flex;
  width: var(--frame-logo-width);
  height: var(--frame-logo-height);
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: var(--frame-logo-radius);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.auth-form-host,
.auth-footer,
.auth-language,
.content-language {
  width: var(--frame-form-width);
}

.auth-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  padding: 20px;
}

.auth-footer-links {
  display: flex;
  gap: var(--frame-footer-gap);
  font-size: var(--frame-footer-size);
  letter-spacing: var(--frame-footer-tracking);
}

.auth-copyright {
  margin-top: 15px;
  color: var(--muted);
  font-family: var(--frame-copyright-font);
  font-size: var(--frame-copyright-size);
  letter-spacing: var(--frame-copyright-tracking);
}

.auth-language,
.content-language {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.auth-language [aria-current="page"],
.content-language [aria-current="page"] {
  color: var(--accent-text);
}

/* Form card: the same static token consumers as LayoutMarkupSpike. */
.auth-form-card {
  display: flex;
  width: 100%;
  flex-direction: column;
  padding: var(--card-pad);
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--card);
}

.auth-heading {
  display: flex;
  justify-content: var(--title-justify);
  margin-block: 15px;
}

.auth-heading h2 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-tracking);
  text-transform: var(--title-transform);
}

.auth-flow {
  display: flex;
  flex-direction: column;
}

.auth-label {
  margin-bottom: 6px;
  color: var(--label-color);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  overflow-wrap: anywhere;
  text-transform: var(--label-transform);
}

.auth-field-shell {
  position: relative;
  margin-bottom: var(--gap);
}

.auth-field,
.auth-code-field,
.code-inputs-wrapper input {
  border: var(--border-w) solid var(--field-border);
  border-radius: var(--radius-field);
  outline: none;
  background: var(--field);
  color: var(--text);
  font-size: var(--field-size);
}

.auth-field {
  width: 100%;
  padding: var(--field-pad-y) var(--field-pad-x) var(--field-pad-y) var(--field-pad-icon);
}

.auth-field--password {
  padding-right: var(--field-pad-icon);
}

.auth-field::placeholder {
  color: var(--placeholder);
}

.auth-field:focus,
.auth-code-field:focus,
.code-inputs-wrapper input:focus {
  border-color: var(--field-focus);
  box-shadow: 0 0 2px var(--field-focus);
}

.auth-field-icon,
.auth-field-trailing {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  stroke: var(--icon);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.auth-field-icon {
  left: var(--field-icon-left);
}

.auth-field-icon--lock {
  width: 16px;
  height: 16px;
}

.auth-field-trailing {
  right: 12px;
  width: 18px;
  height: 18px;
  stroke: var(--text-dim);
}

.auth-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--gap);
  color: var(--text-dim);
  font-size: 13px;
}

.auth-check,
.custom-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  border: var(--border-w) solid var(--check-border);
  border-radius: var(--radius-check);
  appearance: none;
  background: var(--check-bg);
}

.auth-check:checked {
  border-color: var(--check-mark);
  box-shadow: inset 0 0 0 4px var(--check-mark);
}

.auth-btn {
  width: 100%;
  min-height: var(--btn-h);
  white-space: normal;
  cursor: pointer;
  padding: 5px 10px;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--accent);
  color: var(--btn-fg);
  font-size: var(--btn-size);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-transform: var(--btn-transform);
}

.auth-error,
.content-error-message {
  margin-bottom: 10px;
  padding: 15px;
  border: var(--border-w) solid var(--err-border);
  border-radius: var(--radius-field);
  background: var(--err-bg);
  color: var(--err-text);
  font-size: 13px;
  font-weight: 500;
}

.auth-captcha {
  display: flex;
  height: 78px;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  border: var(--border-w) dashed var(--card-border);
  border-radius: var(--radius-field);
  color: var(--text-muted);
  font-size: 12px;
}

.auth-links {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 13px;
}

.auth-links--center {
  justify-content: center;
}

.auth-copy {
  margin: 0 0 15px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
}

.auth-code-destination {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  padding: 15px;
  border: var(--border-w) solid var(--hairline);
  border-radius: var(--radius-field);
  color: var(--text);
  font-size: 13px;
}

.auth-code-destination span {
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 16px;
}

.auth-code-expiry,
.verify-code-timer {
  margin-bottom: 8px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: right;
}

.auth-code-fields,
.code-inputs-wrapper {
  display: flex;
  gap: 8px;
  margin-bottom: var(--gap);
}

.auth-code-field,
.code-inputs-wrapper input {
  width: 50px;
  height: 55px;
  padding: 0;
  border-color: var(--hairline);
  font-family: var(--font-mono);
  font-size: 22px;
  text-align: center;
}

.auth-rules,
.rules {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
  padding: 12px 16px;
  border-radius: var(--radius-field);
  background: var(--rule-box);
  color: var(--text);
  font-size: 13px;
  list-style: none;
}

.auth-rules li::before,
.rules li::before {
  display: inline-block;
  width: 18px;
  font-family: var(--font-mono);
  font-weight: 700;
}

.auth-rules .is-valid::before,
.auth-rules li.valid-rule::before,
.rules li.valid-rule::before {
  color: var(--ok);
  content: "✓";
}

.auth-rules .is-invalid::before,
.auth-rules li.invalid-rule::before,
.rules li.invalid-rule::before {
  color: var(--err-stroke);
  content: "×";
}

/* Legacy hooks remain literal because auth-flow.js owns these states. */
.auth-panel.has-scroll,
.login.has-scroll {
  justify-content: flex-start;
}

.content-language img {
  height: 15px;
  width: 20px;
  cursor: pointer;
  opacity: 0.3;
}

.content-language .selected {
  opacity: 1;
}

.auth-field-trailing {
  cursor: pointer;
}

.auth-field-trailing svg {
  height: 18px;
  pointer-events: none;
}

/* Validation is opt-in, as with .input-area.invalid; empty required fields
   must not show messages just because the browser considers them invalid. */
.auth-field-message,
.auth-field-shell .message {
  position: absolute;
  bottom: -15px;
  left: 0;
  display: none;
  color: var(--err-stroke);
}

.auth-field-shell.invalid .auth-field-message,
.auth-field-shell.invalid .message,
.auth-field-shell.is-invalid .auth-field-message,
.auth-field.is-invalid ~ .auth-field-message {
  display: block;
  margin-block: 5px;
  color: var(--err-stroke);
  font-size: var(--label-size);
}

/* Required-field feedback set by auth-field.js: the label and the field rule turn
   to the error colour and the message carries an alert icon. Border colour only,
   so boxed presets redden the box and underline presets the rule. */
.auth-page .auth-field-block.is-invalid .auth-label {
  color: var(--err-stroke);
}

.auth-page .auth-field-shell.is-invalid .auth-field,
.auth-page .auth-field-shell.is-invalid .auth-field-trailing {
  border-color: var(--err-stroke);
}

.auth-page .auth-field-shell.is-invalid .auth-field-message {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Same alert icon for field messages and error boxes: a ringed "!" drawn with
   currentColor, with no image: this sheet must not load anything. */
.auth-page .auth-field-shell.is-invalid .auth-field-message::before,
.auth-page .content-error-message:not(.is-success):not(:empty)::before {
  content: "!";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

/* Error box with the icon leading the text. The icon is positioned, not laid out:
   auth-flow.js shows these boxes with an inline display:block, which would defeat
   a flex container. Left padding = box padding + icon + gap, so wrapped lines keep
   a hanging indent. */
.auth-page .content-error-message:not(.is-success):not(:empty) {
  position: relative;
  padding-left: 41px;
}

.auth-page .content-error-message:not(.is-success):not(:empty)::before {
  position: absolute;
  top: 17px;
  left: 15px;
  width: 16px;
  height: 16px;
  font-size: 10px;
}

/* Kept below its form (auth-flow.js owns the element): space it off the content above. */
.auth-page .content-verify-code + .content-error-message {
  margin-top: 12px;
}

.custom-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-checkbox {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.2s;
}

.custom-checkbox.checked {
  background: var(--check-mark);
  border-color: var(--check-mark);
}

.custom-checkbox .checkmark {
  display: none;
  position: absolute;
  top: 0;
  left: 4px;
  font-size: 10px;
  color: var(--text);
}

.custom-checkbox.checked .checkmark {
  display: block;
}

.custom-checkbox-label {
  cursor: pointer;
}

.auth-btn:hover {
  box-shadow: 0 8px 25px -8px var(--accent);
  transition: box-shadow 0.3s ease;
}

.auth-btn.disabled,
.auth-btn:disabled {
  background: var(--text-dim);
}

.auth-btn.disabled:hover,
.auth-btn:disabled:hover {
  box-shadow: none;
  cursor: default;
}

.auth-rules ul,
.rules ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#backToRecoverBtn {
  display: none;
}

#resetPasswordForm.expired-timer #verifyCodeBtn {
  display: none;
}

#resetPasswordForm.expired-timer #backToRecoverBtn {
  display: block;
}

#resetPasswordForm {
  display: flex;
  flex-direction: column;
}

.verify-code-timer {
  transition: color 0.2s;
}

/* State classes replace the inline colors owned by auth-flow.js (D-S06-3). */
.verify-code-timer.is-expired {
  color: var(--err-stroke);
}

.auth-error.is-success,
.content-error-message.is-success {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  border-color: var(--ok);
}

.send-code-timer-info {
  display: block;
  margin-bottom: var(--gap);
  font-size: 12px;
  color: var(--text-muted);
  border: var(--border-w) solid var(--field-border);
  padding: var(--field-pad-y);
}

body.auth-state-recover .content-language {
  display: none;
}

.auth-message {
  margin-bottom: var(--gap);
  font-size: var(--label-size);
  overflow-wrap: anywhere;
}

.auth-message.is-success {
  color: var(--ok);
}

.auth-message.is-error {
  color: var(--err-stroke);
}

/* W1: focus, validation and autofill must keep their deliberate priority. */
.auth-field:focus + .auth-field-icon,
.auth-field:focus + .icon,
.focused {
  color: var(--field-focus) !important;
  stroke: var(--field-focus) !important;
}

.auth-field--password:focus + .auth-field-icon,
.focused-password {
  color: var(--field-focus) !important;
  stroke: var(--field-focus) !important;
}

.auth-field.is-invalid,
#resetPasswordForm.expired-timer {
  border: 2px solid var(--err-stroke) !important;
}

/* The expired frame hugs the form: keep its content off the red border. */
#resetPasswordForm.expired-timer {
  padding: 16px;
  border-radius: var(--radius-card);
}

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset !important;
  box-shadow: 0 0 0 1000px var(--field) inset !important;
  -webkit-text-fill-color: var(--text) !important;
}

.auth-field--password[type="password"],
.auth-field--password[type="text"] {
  -webkit-text-security: none !important;
  -moz-text-security: none !important;
  text-security: none !important;
}

/* Initial visibility yields to the legacy JS's element.style.display updates. */
.is-hidden {
  display: none;
}

.auth-action {
  cursor: pointer;
  color: var(--icon);
}

.auth-centered-stack.auth-panel {
  background: transparent;
}

.content-error-message:empty {
  display: none;
}

/* Legal overlays keep the same show/close hooks after removal of legacy CSS. */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--hero-overlay);
  z-index: 2;
}

.modal.show {
  display: block;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  padding: var(--card-pad);
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--card);
  color: var(--text);
}

.modal-content .body {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--card-pad);
  height: 96%;
  overflow-y: auto;
}

.modal-content .title {
  font-size: var(--title-size);
  font-weight: var(--title-weight);
}

.modal-content .header-modal {
  display: flex;
  justify-content: space-between;
}

.close-modal {
  cursor: pointer;
}

/* A separate keyboard ring stays visible even over invalid/autofilled fields. */
.auth-field:focus-visible,
.auth-code-field:focus-visible,
.code-inputs-wrapper input:focus-visible,
.auth-btn:focus-visible,
.auth-check:focus-visible,
.custom-checkbox:focus-visible,
.auth-check:focus-visible + .custom-checkbox,
.auth-field-trailing:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

/* S07: the original root above remains the brand/spike baseline. Only this
   closed set of colour tokens outranks the later, simple :root brand sheet. */
:root[data-theme="light"] {
  --surface: #eef0f4;
  --surface-panel: #eef0f4;
  --card: #ffffff;
  --card-border: #c8cdd6;
  --field: #f7f8fa;
  --field-border: #697586;
  --field-focus: #2456c7;
  --rule-box: #eef0f4;
  --hairline: #c8cdd6;
  --accent: #2456c7;
  --accent-text: #2456c7;
  --btn-fg: #ffffff;
  --text: #14171c;
  --text-muted: #505b6b;
  --text-dim: #505b6b;
  --label-color: #303b4b;
  --icon: #303b4b;
  --placeholder: #505b6b;
  --check-bg: #ffffff;
  --check-border: #697586;
  --check-mark: #2456c7;
  --err-bg: #fff0f1;
  --err-border: #a51d2d;
  --err-text: #a51d2d;
  --err-stroke: #a51d2d;
  --ok: #206734;
  --muted: #505b6b;
  --hero-bg: #eef0f4;
  --hero-overlay: rgba(20, 23, 28, 0.7);
  /* The media sits under the dark --hero-overlay above, so hero text stays light. */
  --hero-title-color: #f5f7fa;
  --hero-copy-color: #e1e6ee;
  --hero-eyebrow-color: #2456c7;
  --hero-eyebrow-rule: #2456c7;
  --hero-divider: #c8cdd6;
  --glow: rgba(36, 86, 199, 0.08);
  --rule: rgba(20, 23, 28, 0.03);
  --media-border: #697586;
  --link-hover: #163d96;
}

:root[data-theme="dark"] {
  --surface: #171717;
  --surface-panel: #171717;
  --card: #262626;
  --card-border: #535353;
  --field: #212121;
  --field-border: #8993a1;
  --field-focus: #90b8ff;
  --rule-box: #1a1a1a;
  --hairline: #535353;
  --accent: #2456c7;
  --accent-text: #90b8ff;
  --btn-fg: #ffffff;
  --text: #f5f7fa;
  --text-muted: #b6bec9;
  --text-dim: #b6bec9;
  --label-color: #e1e6ee;
  --icon: #e1e6ee;
  --placeholder: #b6bec9;
  --check-bg: #313131;
  --check-border: #8993a1;
  --check-mark: #2456c7;
  --err-bg: #4f2323;
  --err-border: #ff9ca8;
  --err-text: #ffd4db;
  --err-stroke: #ff9ca8;
  --ok: #8dd69c;
  --muted: #b6bec9;
  --hero-bg: #0e1216;
  --hero-overlay: rgba(0, 0, 0, 0.7);
  --hero-title-color: #f5f7fa;
  --hero-copy-color: #e1e6ee;
  --hero-eyebrow-color: #90b8ff;
  --hero-eyebrow-rule: #90b8ff;
  --hero-divider: #535353;
  --glow: rgba(66, 127, 255, 0.1);
  --rule: rgba(255, 255, 255, 0.022);
  --media-border: #8993a1;
  --link-hover: #c4d8ff;
}

:root[data-theme="light"] .auth-page { color-scheme: light; }
:root[data-theme="dark"] .auth-page { color-scheme: dark; }

/* Document scroll has no fixed-height, centre-aligned scrollport that can lose
   the beginning of a tall form. WDMA/Widget .container rules stay untouched. */
.auth-page,
.auth-page .container,
.auth-page .container > main {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 100%;
  overflow: visible;
}

.auth-page .auth-frame {
  width: 100%;
  min-width: 0;
  min-height: 100svh;
  overflow: visible;
}

/* Split already renders brand media via its resolved local img/video slot.
   Do not fetch a second, fully obscured image behind the opaque two columns. */
.auth-page .auth-frame--split { background-image: none; }

.auth-page .auth-panel {
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 100svh;
  padding: 32px 24px;
  overflow: visible;
  justify-content: safe center;
}

.auth-page .auth-panel > * { flex-shrink: 0; }

.auth-page .auth-frame--centered {
  padding: 32px 24px;
  align-items: safe center;
}

.auth-page .auth-centered-stack.auth-panel {
  width: var(--frame-form-width);
  min-height: 0;
  padding: 0;
  background: var(--surface-panel);
}

.auth-page :is(.auth-form-host, .auth-footer, .auth-language, .content-language,
  .auth-form-card, .auth-brand, .auth-centered-intro, .auth-flow, .auth-field-block,
  .auth-field-shell, .auth-check-row, .custom-checkbox-wrapper, .text-action) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.auth-page .auth-frame--centered > .auth-form-card {
  max-width: var(--frame-form-width);
}

.auth-page .auth-heading {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.auth-page .auth-heading h2 { min-width: 0; }
.auth-page .auth-heading > .auth-action { flex: 0 0 28px; }

/* auth-flow switches these forms to display:flex; their children must retain
   a vertical flow after navigation, including a copied username. */
.auth-page .auth-form-card form {
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
}

.auth-page :is(.auth-footer-links, .auth-links, .auth-language, .content-language) {
  max-width: 100%;
  flex-wrap: wrap;
}

.auth-page .auth-footer-links { justify-content: center; }
.auth-page .auth-copyright { text-align: center; }

/* Actual boxes, not negative-inset pseudo targets. The eye occupies a reserved
   grid column, so its complete target is outside the password typing box. */
.auth-page :is(a, button, .auth-action, label[for], .custom-checkbox,
  .auth-check, .auth-field-trailing, .close-modal) {
  min-width: 24px;
  min-height: 24px;
}

/* The 24px floor above weighs (0,2,1) through label[for] and would squash the
   button; qualifying by element restores each preset's --btn-h. */
.auth-page button.auth-btn { min-height: var(--btn-h); }

.auth-page :is(a, span.auth-action, label[for], .close-modal) {
  display: inline-flex;
  align-items: center;
  overflow-wrap: anywhere;
}

.auth-page .auth-label { display: flex; }
.auth-page .custom-checkbox { width: 24px; height: 24px; }
.auth-page .custom-checkbox .checkmark { left: 6px; top: 3px; color: var(--btn-fg); }
.auth-page .content-language a { justify-content: center; }
.auth-page .content-language img { flex: 0 0 auto; }

.auth-page .auth-field-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.auth-page .auth-field-block--password .auth-field-shell {
  grid-template-columns: minmax(0, 1fr) 32px;
  column-gap: 4px;
}

.auth-page .auth-field {
  grid-column: 1;
  grid-row: 1;
  min-width: 24px;
  min-height: 40px;
}

.auth-page .auth-field--password { padding-right: var(--field-pad-x); }

.auth-page .auth-field-icon {
  position: static;
  grid-column: 1;
  grid-row: 1;
  margin-left: var(--field-icon-left);
  transform: none;
  z-index: 1;
  pointer-events: none;
}

.auth-page .auth-field-trailing {
  position: static;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transform: none;
}

.auth-page .auth-field-trailing svg { width: 18px; flex-shrink: 0; }

.auth-page .auth-field-shell .message {
  position: static;
  grid-column: 1 / -1;
  grid-row: 2;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.auth-page :is(.content-error-message, .auth-error, .auth-message,
  .auth-code-destination, .rules, .send-code-timer-info) {
  max-width: 100%;
  height: auto;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.auth-page :is(.code-inputs-wrapper, .auth-code-fields) {
  display: grid;
  grid-template-columns: repeat(6, minmax(24px, 1fr));
  min-width: 0;
}

.auth-page :is(.code-inputs-wrapper input, .auth-code-field) {
  width: 100%;
  min-width: 24px;
  min-height: 24px;
}

.auth-page :is(.g-recaptcha, .auth-captcha) {
  min-height: 78px;
  max-width: 100%;
  margin-block: 12px;
  overflow: visible;
  flex-shrink: 0;
}

.auth-page .auth-btn:disabled,
.auth-page .auth-btn.disabled { color: var(--card); }

.auth-page :is(a, .auth-action):is(:hover, :focus-visible) { color: var(--link-hover); }
.auth-page :is(a, .auth-action, label[for], .close-modal):focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

/* Text sits directly on the media: contrast comes from the --hero-overlay film
   this block lays over the whole column, not from solid boxes behind each line. */
.auth-page .auth-hero-content {
  position: relative;
  width: 100%;
  min-height: 100svh;
  padding-block: 32px;
  overflow-wrap: anywhere;
}

.auth-page .auth-hero-eyebrow { flex-wrap: wrap; }
.auth-page .auth-hero-eyebrow > span { min-width: 0; max-width: 100%; }
.auth-page .auth-hero-divider { pointer-events: none; }

/* Modal header is never in the scrollable body. The fixed overlay still owns
   the full viewport and intercepts clicks outside the dialog. */
.auth-page .modal-content {
  display: flex;
  flex-direction: column;
  width: min(800px, calc(100% - 32px));
  height: auto;
  max-height: calc(100svh - 32px);
}

.auth-page .modal-content .header-modal {
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 12px;
}

.auth-page .modal-content .title { min-width: 0; overflow-wrap: anywhere; }
.auth-page .close-modal { flex: 0 0 24px; justify-content: center; }

.auth-page .modal-content .body {
  min-height: 0;
  height: auto;
  padding: 12px 0;
  overflow: auto;
  overflow-wrap: anywhere;
}

.auth-page .modal-content .body * { max-width: 100%; }

:root:lang(zh) .auth-page .auth-brand { letter-spacing: 0; }

/* split-card: media column on the left, a narrower panel strip on the right, and
   the panel reaching --split-card-reach into the media, so the form card straddles
   the seam. The strip is sized from the card, not the viewport, so every preset's
   --frame-form-width keeps the same overlap. Structure only: the preset paints the
   ground, the card and the seam. Placed after the shared .auth-page rules above,
   which it refines at the same or higher weight. */
.auth-page .auth-frame--split-card {
  --split-card-gutter: 44px;
  --split-card-reach: 104px;
  --split-card-inset: 56px;
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    calc(var(--frame-form-width) + 2 * var(--split-card-gutter) - var(--split-card-reach));
  overflow: hidden;
  background-image: none;
}

.auth-page .auth-frame--split-card > .auth-hero {
  grid-column: 1;
  grid-row: 1;
  border-right: var(--border-w) solid var(--hairline);
}

/* Title and copy sit low on the media, clear of the logo above and of the card
   that overlaps the column's right edge. */
.auth-page .auth-frame--split-card .auth-hero-content {
  justify-content: flex-end;
  padding-block: 140px 72px;
  padding-inline: var(--split-card-inset) calc(var(--split-card-reach) + 48px);
}

.auth-page .auth-frame--split-card > .auth-panel {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: end;
  z-index: 2;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: safe center;
  align-items: center;
  column-gap: 20px;
  width: calc(var(--frame-form-width) + 2 * var(--split-card-gutter));
  padding: 40px var(--split-card-gutter);
  background: transparent;
}

.auth-page .auth-frame--split-card .auth-form-host {
  flex: 0 0 100%;
  width: 100%;
}

/* Legal links and copyright under the card, the flags closing the same row;
   when the card is too narrow for both, the flags wrap to a row of their own. */
.auth-page .auth-frame--split-card .auth-footer {
  flex: 1 1 auto;
  width: auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px var(--frame-footer-gap);
  margin-top: 20px;
  padding: 0;
}

.auth-page .auth-frame--split-card .auth-footer-links {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.auth-page .auth-frame--split-card .auth-copyright { margin: 0 0 0 auto; }

.auth-page .auth-frame--split-card .auth-language {
  flex: 0 0 auto;
  width: auto;
  margin-top: 20px;
  margin-left: auto;
}

/* The logo stays first in the panel's markup (a phone shows it above the card)
   and is lifted onto the media, top left, on a desktop. */
.auth-page .auth-frame--split-card .auth-brand {
  position: absolute;
  top: 40px;
  left: var(--split-card-inset);
  justify-content: flex-start;
  width: auto;
  max-width: var(--frame-logo-width);
  margin: 0;
}

.auth-page .auth-frame--split-card .auth-brand img { height: 100%; }

/* The regulatory band runs under both columns. */
.auth-page .auth-frame--split-card > .auth-disclaimer {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* 1024 remains desktop, including fractional widths below that boundary. */
@media (width < 1024px) {
  .auth-page .auth-frame--split {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .auth-page :is(.auth-hero, .auth-media, .auth-hero-divider, .auth-centered-intro) {
    display: none;
  }

  .auth-page .auth-panel {
    width: 100%;
    padding: 24px 16px;
  }

  .auth-page .auth-frame--centered { padding: 24px 16px; }
  .auth-page .auth-centered-stack.auth-panel { padding: 0; }
  .auth-page .auth-brand { width: 150px; height: 64px; }

  /* 360 - 32 gutters - 2 borders - 20 padding = 306: fits a 304px
     CAPTCHA without scaling, hiding it, or clipping its provider-owned frame. */
  .auth-page .auth-form-card { padding: min(var(--card-pad), 10px); }
  .auth-page .auth-footer { padding: 12px 0; margin-top: 16px; }
  .auth-page .auth-footer-links { gap: 8px 20px; }
  .auth-page :is(.auth-language, .content-language) { gap: 8px 18px; }
  .auth-page .modal-content { padding: 12px; }

  /* split-card collapses like split-hero: the media column goes, the logo drops
     back above the card and the footer rows stack again. */
  .auth-page .auth-frame--split-card {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .auth-page .auth-frame--split-card > .auth-panel {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    padding: 24px 16px;
  }

  .auth-page .auth-frame--split-card .auth-brand {
    position: static;
    justify-content: center;
    width: 150px;
    height: 64px;
    margin-bottom: 20px;
  }

  .auth-page .auth-frame--split-card :is(.auth-form-host, .auth-footer, .auth-language) {
    width: var(--frame-form-width);
  }

  .auth-page .auth-frame--split-card .auth-footer {
    flex: 0 0 auto;
    flex-direction: column;
    margin-top: 16px;
    padding: 12px 0;
  }

  .auth-page .auth-frame--split-card .auth-footer-links {
    flex-wrap: wrap;
    white-space: normal;
  }

  .auth-page .auth-frame--split-card .auth-copyright { margin: 15px 0 0; }
  .auth-page .auth-frame--split-card .auth-language { margin: 10px 0 0; }
}