:root {
  color-scheme: dark;
  --midnight-950: #0b0f16;
  --midnight-900: #111824;
  --midnight-850: #172130;
  --midnight-700: #29384b;
  --slate-400: #98a9bc;
  --slate-200: #98a9bc;
  --mist: #f2f6fb;
  --mint: #7dd3c7;
  --mint-deep: #2d9d83;
  --periwinkle: #a8a0ff;
  --cpd-color-theme-bg: #0b0f16;
  --cpd-color-gray-100: #0b0f16;
  --cpd-color-gray-200: #111824;
  --cpd-color-gray-300: #172130;
  --cpd-color-gray-400: #29384b;
  --cpd-color-gray-500: #2c4168;
  --cpd-color-gray-600: #3a527d;
  --cpd-color-gray-700: #627ba3;
  --cpd-color-gray-800: #8ea5c9;
  --cpd-color-gray-900: #aec0df;
  --cpd-color-gray-1000: #c8d6ec;
  --cpd-color-gray-1100: #dbe5f5;
  --cpd-color-gray-1200: #e6eefb;
  --cpd-color-gray-1300: #edf3ff;
  --cpd-color-gray-1400: #f5f8ff;
  --cpd-color-bg-action-primary-rest: var(--mint-deep);
  --cpd-color-bg-action-primary-hovered: #39b394;
  --cpd-color-bg-action-primary-pressed: #257f6c;
  --cpd-color-text-on-solid-primary: #061b18;
  --cpd-color-icon-on-solid-primary: #061b18;
  --cpd-color-border-focused: var(--mint);

  /* MAS ships Compound's semantic tokens with a light/dark media query. Keep
   * every account alert readable even when the browser prefers the light theme:
   * this account surface is deliberately dark in both cases. */
  --mas-info-background: #102b4a;
  --mas-info-border: #3a78af;
  --mas-info-text: #e3f1ff;
  --mas-info-icon: #9bcaff;
  --mas-success-background: #10382e;
  --mas-success-border: #3c9279;
  --mas-success-text: #e0fff4;
  --mas-success-icon: #8ee8c8;
  --mas-warning-background: #45300b;
  --mas-warning-border: #a9782d;
  --mas-warning-text: #fff4d6;
  --mas-warning-icon: #ffd27a;
  --mas-critical-background: #35151c;
  --mas-critical-border: #b75664;
  --mas-critical-text: #ffe8e6;
  --mas-critical-icon: #ff9da8;
  --cpd-color-green-200: var(--mas-success-background);
  --cpd-color-green-500: var(--mas-success-border);
  --cpd-color-green-900: var(--mas-success-icon);
  --cpd-color-blue-200: var(--mas-info-background);
  --cpd-color-blue-500: var(--mas-info-border);
  --cpd-color-blue-900: var(--mas-info-icon);
  --cpd-color-red-200: var(--mas-critical-background);
  --cpd-color-red-300: #461b25;
  --cpd-color-red-500: var(--mas-critical-border);
  --cpd-color-red-900: var(--mas-critical-icon);
  --cpd-color-bg-info-subtle: var(--mas-info-background);
  --cpd-color-border-info-subtle: var(--mas-info-border);
  --cpd-color-icon-info-primary: var(--mas-info-icon);
  --cpd-color-text-info-primary: var(--mas-info-icon);
  --cpd-color-bg-success-subtle: var(--mas-success-background);
  --cpd-color-border-success-subtle: var(--mas-success-border);
  --cpd-color-icon-success-primary: var(--mas-success-icon);
  --cpd-color-text-success-primary: var(--mas-success-icon);
  --cpd-color-bg-critical-subtle: var(--mas-critical-background);
  --cpd-color-border-critical-subtle: var(--mas-critical-border);
  --cpd-color-icon-critical-primary: var(--mas-critical-icon);
  --cpd-color-text-critical-primary: var(--mas-critical-icon);
}
html,
body {
  min-width: 320px;
  min-height: 100%;
  background: var(--midnight-950) !important;
  color: var(--mist);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
body {
  background-image: radial-gradient(circle at 50% -10%, #172130 0, transparent 42rem) !important;
}
.layout-container {
  --target-width: 420px;
  --inline-padding: clamp(1rem, 3vw, 1.75rem);
  box-sizing: border-box;
  max-width: min(calc(var(--target-width) + var(--inline-padding) * 2), 100%);
  justify-content: center;
  padding: clamp(1.25rem, 6vh, 4rem) var(--inline-padding);
}
.layout-container > form {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(1.35rem, 4vw, 2.15rem);
  border: 1px solid #29384b;
  border-radius: 1.15rem;
  background: var(--midnight-850);
  box-shadow:
    0 1.5rem 4rem rgb(0 0 0 / 34%),
    0 1px 0 rgb(255 255 255 / 4%) inset;
}
.page-heading {
  margin-block-start: 0 !important;
}
.page-heading .icon {
  color: var(--mint);
  background: #213b46;
}
.page-heading .icon svg {
  color: var(--mint);
}
.page-heading .header .title,
.cpd-form-label {
  color: var(--mist);
}
.page-heading .header .text,
.legal-footer {
  color: var(--slate-200);
}

/* PageHeading and Alert are CSS Modules in MAS. The local-name fragments in
 * these selectors are stable while the generated suffix is not. */
[class*="layout-container"] [class*="page-heading"] [class*="invalid"] {
  background: var(--mas-critical-background) !important;
  border: 1px solid var(--mas-critical-border);
  color: var(--mas-critical-icon) !important;
}
[class*="layout-container"] [class*="page-heading"] [class*="invalid"] svg {
  color: var(--mas-critical-icon) !important;
}
[class*="layout-container"]
  [class*="page-heading"]
  [class*="invalid"]
  + [class*="header"]
  :is(h1, p) {
  color: var(--mas-critical-text) !important;
}

/* Compound Alert is a CSS Module in the account SPA. Scope by the stable
 * Layout local name, then target its stable alert local name; this keeps the
 * dark account treatment away from unrelated app components. The cpd-alert
 * branch supports server-rendered Compound markup from the same surface. */
[class*="layout-container"] :is([class*="_alert_"], .cpd-alert)[data-type="info"] {
  background-color: var(--mas-info-background) !important;
  border-color: var(--mas-info-border) !important;
  color: var(--mas-info-text) !important;
}
[class*="layout-container"] :is([class*="_alert_"], .cpd-alert)[data-type="success"] {
  background-color: var(--mas-success-background) !important;
  border-color: var(--mas-success-border) !important;
  color: var(--mas-success-text) !important;
}
[class*="layout-container"] :is([class*="_alert_"], .cpd-alert)[data-type="warning"] {
  background-color: var(--mas-warning-background) !important;
  border-color: var(--mas-warning-border) !important;
  color: var(--mas-warning-text) !important;
}
[class*="layout-container"] :is([class*="_alert_"], .cpd-alert)[data-type="critical"] {
  background-color: var(--mas-critical-background) !important;
  border-color: var(--mas-critical-border) !important;
  color: var(--mas-critical-text) !important;
}
[class*="layout-container"]
  :is([class*="_alert_"], .cpd-alert)[data-type="info"]
  :is([class*="title"], [class*="text-content"] p, .cpd-alert-title, .cpd-alert-text-content p) {
  color: var(--mas-info-text) !important;
}
[class*="layout-container"]
  :is([class*="_alert_"], .cpd-alert)[data-type="success"]
  :is([class*="title"], [class*="text-content"] p, .cpd-alert-title, .cpd-alert-text-content p) {
  color: var(--mas-success-text) !important;
}
[class*="layout-container"]
  :is([class*="_alert_"], .cpd-alert)[data-type="warning"]
  :is([class*="title"], [class*="text-content"] p, .cpd-alert-title, .cpd-alert-text-content p) {
  color: var(--mas-warning-text) !important;
}
[class*="layout-container"]
  :is([class*="_alert_"], .cpd-alert)[data-type="critical"]
  :is([class*="title"], [class*="text-content"] p, .cpd-alert-title, .cpd-alert-text-content p) {
  color: var(--mas-critical-text) !important;
}
[class*="layout-container"]
  :is([class*="_alert_"], .cpd-alert)[data-type="info"]
  :is([class*="icon"], .cpd-alert-icon) {
  color: var(--mas-info-icon) !important;
}
[class*="layout-container"]
  :is([class*="_alert_"], .cpd-alert)[data-type="success"]
  :is([class*="icon"], .cpd-alert-icon) {
  color: var(--mas-success-icon) !important;
}
[class*="layout-container"]
  :is([class*="_alert_"], .cpd-alert)[data-type="warning"]
  :is([class*="icon"], .cpd-alert-icon) {
  color: var(--mas-warning-icon) !important;
}
[class*="layout-container"]
  :is([class*="_alert_"], .cpd-alert)[data-type="critical"]
  :is([class*="icon"], .cpd-alert-icon) {
  color: var(--mas-critical-icon) !important;
}
.cpd-text-control {
  width: 100%;
  min-height: 42px;
  color: var(--mist);
  caret-color: var(--mint);
  background: var(--midnight-900);
  border-color: #29384b;
}
.cpd-text-control::placeholder {
  color: var(--slate-400);
}
.cpd-text-control:hover {
  border-color: var(--periwinkle);
}
.cpd-text-control:focus,
.cpd-text-control:focus-visible {
  border-color: transparent;
  outline: 3px solid var(--mint);
  outline-offset: 1px;
}
.cpd-button[data-kind="primary"] {
  min-height: 42px;
  border-radius: 0.6rem;
  background: var(--mint);
  color: #061b18;
  font-weight: 700;
}
.cpd-button[data-kind="primary"]:hover {
  background: #a0f1d4;
}
.cpd-button[data-kind="primary"]:active {
  background: #5dc8a8;
}
a {
  color: var(--periwinkle);
}
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
}

@media (max-width: 520px) {
  .layout-container > form {
    padding: 1.1rem;
    border-radius: 0.8rem;
  }
}