:root[data-console-theme="night"] {
  color-scheme: dark;
  --night: #020814;
  --deck: #071525;
  --deck2: #0a1d33;
  --line: rgba(120, 166, 207, .16);
  --mint: #56e4d0;
  --currency: var(--mint);
  --text: #f2f7fb;
  --muted: #8fa7bb;
  --amber: #f2c46d;
  --bad: #ff877d;
}

:root[data-console-theme="day"] {
  color-scheme: light;
  --night: #edf4f2;
  --deck: #ffffff;
  --deck2: #f5f9f8;
  --line: rgba(30, 91, 88, .17);
  --mint: #087f75;
  --currency: var(--mint);
  --text: #18353a;
  --muted: #60777a;
  --amber: #a66a16;
  --bad: #bd4c45;
}

body,
.rail,
.card,
input,
select,
textarea,
.terminal,
.console-boot,
.hm-platform-language {
  transition: background-color .24s ease, border-color .24s ease, color .24s ease, box-shadow .24s ease;
}

.console-theme-toggle {
  position: static;
  display: inline-grid;
  grid-template-columns: 20px auto;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  color: var(--text);
  box-shadow: none;
  font: 700 10px/1 "Avenir Next", "PingFang SC", sans-serif;
  cursor: pointer;
}

.console-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.console-controls .hm-platform-language {
  position: static;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 5px 10px;
  border-color: var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
  backdrop-filter: none;
}

.console-controls .hm-platform-language span {
  display: none;
}

.console-controls .hm-platform-language select {
  width: auto;
  min-height: 0;
  max-width: 92px;
  padding: 0;
}

.console-theme-toggle [data-console-theme-glyph] {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mint);
  color: #082724;
  font-size: 13px;
}

.console-theme-toggle:hover {
  border-color: color-mix(in srgb, var(--mint) 58%, transparent);
  filter: none;
}

/* Night is layered like deep water: abyss canvas, trench rail, submerged decks. */
:root[data-console-theme="night"] body,
:root[data-console-theme="night"] body:has(#sign-in:not([hidden])) {
  background: radial-gradient(circle at 82% -10%, rgba(28, 83, 137, .15), transparent 31%), radial-gradient(circle at 7% 108%, rgba(19, 84, 99, .07), transparent 34%), linear-gradient(150deg, #020814 0%, #04101e 46%, #06172a 100%);
}

:root[data-console-theme="night"] .rail {
  border-color: var(--line);
  background: rgba(2, 10, 20, .93);
  box-shadow: 18px 0 54px rgba(0, 3, 10, .3);
}

:root[data-console-theme="night"] .card,
:root[data-console-theme="night"] .sign-in,
:root[data-console-theme="night"] .sign-in-panel {
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(8, 24, 43, .96), rgba(4, 14, 27, .98));
  box-shadow: 0 22px 64px rgba(0, 4, 12, .22);
}

:root[data-console-theme="night"] .reseller-journey,
:root[data-console-theme="night"] .metric.highlight {
  border-color: rgba(86, 228, 208, .16);
  background: linear-gradient(126deg, rgba(10, 31, 54, .98), rgba(4, 15, 29, .98) 72%);
  box-shadow: 0 20px 58px rgba(0, 4, 12, .24);
}

:root[data-console-theme="night"] input,
:root[data-console-theme="night"] select,
:root[data-console-theme="night"] textarea,
:root[data-console-theme="night"] .terminal,
:root[data-console-theme="night"] .guide-step pre,
:root[data-console-theme="night"] .request-receipt dl div {
  border-color: var(--line);
  background: #040f1d;
  color: var(--text);
}

:root[data-console-theme="night"] button.secondary,
:root[data-console-theme="night"] .button.secondary,
:root[data-console-theme="night"] .quiet,
:root[data-console-theme="night"] .topup-preset,
:root[data-console-theme="night"] .console-theme-toggle,
:root[data-console-theme="night"] .console-controls .hm-platform-language {
  border-color: var(--line);
  background: rgba(8, 25, 44, .74);
  color: var(--text);
}

:root[data-console-theme="night"] .account-state,
:root[data-console-theme="night"] .topup-balance,
:root[data-console-theme="night"] .asset-preview-item,
:root[data-console-theme="night"] .guide-step,
:root[data-console-theme="night"] #models .price-table-wrap,
:root[data-console-theme="night"] #models .market-card,
:root[data-console-theme="night"] #models .market-technical,
:root[data-console-theme="night"] .price-offer {
  border-color: var(--line);
  background: rgba(5, 18, 33, .88);
}

:root[data-console-theme="night"] .flight span,
:root[data-console-theme="night"] .journey-index {
  background: #07172a;
}

:root[data-console-theme="night"] .activation-hmt-summary,
:root[data-console-theme="night"] .asset-hmt-strip,
:root[data-console-theme="night"] .flow-context,
:root[data-console-theme="night"] .topup-result,
:root[data-console-theme="night"] .exchange-receipt,
:root[data-console-theme="night"] .invite-result {
  background: rgba(18, 53, 84, .34);
}

:root[data-console-theme="night"] .balance-dialog {
  border-color: rgba(86, 228, 208, .22);
  background: linear-gradient(145deg, #0a1f36, #040e1c);
  box-shadow: 0 28px 90px rgba(0, 2, 9, .72);
}

:root[data-console-theme="night"] .balance-dialog::backdrop {
  background: rgba(0, 4, 12, .78);
}

:root[data-console-theme="night"] .console-boot {
  background: var(--night);
}

:root[data-console-theme="day"] body,
:root[data-console-theme="day"] body:has(#sign-in:not([hidden])) {
  background: radial-gradient(circle at 76% -8%, rgba(41, 157, 145, .16), transparent 30%), linear-gradient(145deg, #f7faf9, #e8f1ef 58%, #f3f7f6);
}

:root[data-console-theme="day"] .rail {
  border-color: var(--line);
  background: rgba(242, 247, 246, .94);
  box-shadow: 18px 0 50px rgba(34, 76, 72, .045);
}

:root[data-console-theme="day"] .brand,
:root[data-console-theme="day"] .rail nav a:hover,
:root[data-console-theme="day"] .rail nav a.active,
:root[data-console-theme="day"] .asset-preview-item strong,
:root[data-console-theme="day"] .model-token-terms p,
:root[data-console-theme="day"] .invite-result code,
:root[data-console-theme="day"] .reseller-journey li.current strong {
  color: var(--text);
}

:root[data-console-theme="day"] .rail nav a,
:root[data-console-theme="day"] .rail nav small,
:root[data-console-theme="day"] th {
  color: var(--muted);
}

:root[data-console-theme="day"] .rail nav a:hover,
:root[data-console-theme="day"] .rail nav a.active {
  background: rgba(8, 127, 117, .09);
}

:root[data-console-theme="day"] .card,
:root[data-console-theme="day"] .sign-in,
:root[data-console-theme="day"] .sign-in-panel {
  border-color: var(--line);
  background: rgba(255, 255, 255, .91);
  box-shadow: 0 18px 52px rgba(32, 83, 78, .09);
}

:root[data-console-theme="day"] .sign-in-intro .access-points span {
  color: var(--text);
  border-color: rgba(8, 127, 117, .25);
  background: rgba(8, 127, 117, .07);
}

:root[data-console-theme="day"] .sign-in-intro .service-entry {
  color: var(--text);
  border-color: rgba(8, 127, 117, .32);
  background: rgba(8, 127, 117, .08);
}

.sign-in-intro .service-entry {
  width: fit-content;
  max-width: 100%;
  white-space: normal;
}

.sign-in-intro .service-entry-mark {
  flex: none;
}

:root[data-console-theme="day"] .reseller-journey {
  border-color: rgba(8, 127, 117, .22);
  background: linear-gradient(115deg, rgba(255, 255, 255, .95), rgba(231, 242, 239, .96) 70%);
  box-shadow: 0 18px 48px rgba(32, 83, 78, .08);
}

:root[data-console-theme="day"] .metric.highlight {
  background: linear-gradient(130deg, rgba(8, 127, 117, .12), rgba(255, 255, 255, .96));
}

:root[data-console-theme="day"] input,
:root[data-console-theme="day"] select,
:root[data-console-theme="day"] textarea,
:root[data-console-theme="day"] .terminal,
:root[data-console-theme="day"] .guide-step pre,
:root[data-console-theme="day"] .request-receipt dl div {
  border-color: var(--line);
  background: #f7faf9;
  color: var(--text);
}

:root[data-console-theme="day"] input::placeholder,
:root[data-console-theme="day"] textarea::placeholder {
  color: #819396;
}

:root[data-console-theme="day"] button.secondary,
:root[data-console-theme="day"] .button.secondary,
:root[data-console-theme="day"] .quiet,
:root[data-console-theme="day"] .topup-preset {
  border-color: var(--line);
  background: rgba(255, 255, 255, .76);
  color: var(--text);
}

:root[data-console-theme="day"] .button:not(.secondary),
:root[data-console-theme="day"] .primary {
  color: #f7fffd;
}

:root[data-console-theme="day"] .console-theme-toggle [data-console-theme-glyph] {
  color: #f7fffd;
}

:root[data-console-theme="day"] .account-state,
:root[data-console-theme="day"] .topup-balance,
:root[data-console-theme="day"] .asset-preview-item,
:root[data-console-theme="day"] .guide-step,
:root[data-console-theme="day"] #models .price-table-wrap,
:root[data-console-theme="day"] #models .market-card,
:root[data-console-theme="day"] #models .market-technical,
:root[data-console-theme="day"] .price-offer {
  border-color: var(--line);
  background: rgba(248, 251, 250, .94);
}

:root[data-console-theme="day"] #models .price-filters input,
:root[data-console-theme="day"] #models .price-table thead th,
:root[data-console-theme="day"] #models .price-table thead tr:last-child th {
  background: #e9f1ef;
}

:root[data-console-theme="day"] td,
:root[data-console-theme="day"] .official-price b {
  color: var(--text);
}

:root[data-console-theme="day"] .flight span,
:root[data-console-theme="day"] .journey-index {
  background: #eef5f3;
}

:root[data-console-theme="day"] .activation-hmt-summary,
:root[data-console-theme="day"] .asset-hmt-strip,
:root[data-console-theme="day"] .flow-context,
:root[data-console-theme="day"] .topup-result,
:root[data-console-theme="day"] .exchange-receipt,
:root[data-console-theme="day"] .invite-result {
  background: rgba(8, 127, 117, .065);
}

:root[data-console-theme="day"] .request-receipt,
:root[data-console-theme="day"] .note {
  background: rgba(166, 106, 22, .07);
}

:root[data-console-theme="day"] .balance-dialog {
  background: #ffffff;
  box-shadow: 0 28px 90px rgba(25, 61, 58, .22);
}

:root[data-console-theme="day"] .balance-dialog::backdrop {
  background: rgba(37, 58, 57, .34);
}

:root[data-console-theme="day"] .balance-dialog p,
:root[data-console-theme="day"] .balance-dialog strong {
  color: var(--text);
}

:root[data-console-theme="day"] .console-boot {
  background: #edf4f2;
}

:root[data-console-theme="day"] body .hm-platform-language {
  border-color: var(--line);
  background: rgba(255, 255, 255, .92);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(31, 73, 69, .12);
}

:root[data-console-theme="day"] body .hm-platform-language span {
  color: var(--mint);
}

:root[data-console-theme="day"] body .console-controls .hm-platform-language {
  background: rgba(255, 255, 255, .76);
  box-shadow: none;
}

/* Text stays quiet and legible. Blue is reserved for money denominated in USD. */
:root[data-console-theme="night"] .brand i,
:root[data-console-theme="night"] .eyebrow,
:root[data-console-theme="night"] .rail nav a span,
:root[data-console-theme="night"] .rail-foot a,
:root[data-console-theme="night"] .message:not(.error),
:root[data-console-theme="night"] .status,
:root[data-console-theme="night"] .tabs button.active,
:root[data-console-theme="night"] .price-table .actual,
:root[data-console-theme="night"] .account-link,
:root[data-console-theme="night"] .flow b,
:root[data-console-theme="night"] .offer-numbers input,
:root[data-console-theme="night"] .offer-profit strong,
:root[data-console-theme="night"] .reseller-journey li.complete .journey-index,
:root[data-console-theme="night"] .reseller-journey li.complete em,
:root[data-console-theme="night"] .key-secret code,
:root[data-console-theme="night"] .terminal,
:root[data-console-theme="night"] .flight span.live,
:root[data-console-theme="night"] .topup-result b,
:root[data-console-theme="night"] .asset-preview-item b,
:root[data-console-theme="night"] .asset-preview-foot a,
:root[data-console-theme="night"] .asset-value.available,
:root[data-console-theme="night"] .topup-token-item span,
:root[data-console-theme="night"] .exchange-receipt strong,
:root[data-console-theme="night"] .guide-step a,
:root[data-console-theme="night"] .account-avatar,
:root[data-console-theme="night"] .account-kind,
:root[data-console-theme="night"] .account-health b,
:root[data-console-theme="night"] .account-manage i,
:root[data-console-theme="night"] .model-price.output b,
:root[data-console-theme="night"] .discount-chip,
:root[data-console-theme="night"] .key-state-badge:not(.revoked),
:root[data-console-theme="night"] .key-limits summary,
:root[data-console-theme="night"] .flow-context a,
:root[data-console-theme="night"] .activation-step.done .journey-index,
:root[data-console-theme="night"] .activation-step.done .journey-state,
:root[data-console-theme="night"] .rail nav a[data-flow-order] .mobile-dock-icon,
:root[data-console-theme="night"] #models .price-tabs button.active,
:root[data-console-theme="night"] #models .price-table .price-discount,
:root[data-console-theme="night"] #models .price-table .price-burn,
:root[data-console-theme="night"] #models .market-formula strong,
:root[data-console-theme="night"] #models .market-mt b,
:root[data-console-theme="night"] .burn-rate-grid b,
:root[data-console-theme="night"] .receipt-rates b {
  color: var(--text);
}

:root[data-console-theme="night"] .flow-next {
  color: var(--text) !important;
}

:root[data-console-theme="night"] .currency-value,
:root[data-console-theme="night"] #topup-amount,
:root[data-console-theme="night"] #key-daily-budget,
:root[data-console-theme="night"] #key-budget,
:root[data-console-theme="night"] #key-lifetime-budget,
:root[data-console-theme="night"] #amount,
:root[data-console-theme="night"] .topup-presets .topup-preset,
:root[data-console-theme="night"] .topup-quote:not(.topup-result) b {
  color: var(--currency) !important;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .console-controls {
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) {
  .console-theme-toggle {
    grid-template-columns: 20px;
    padding: 4px;
  }

  .console-theme-toggle [data-console-theme-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .console-controls #console-logout,
  .console-controls #logout {
    padding-inline: 10px;
    white-space: nowrap;
  }

  :root[data-console-theme="day"] .rail {
    background: rgba(242, 247, 246, .97);
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  .rail,
  .card,
  input,
  select,
  textarea,
  .terminal,
  .console-boot,
  .hm-platform-language {
    transition: none;
  }
}