:root {
  --bg-main: #020406;
  --bg-panel: rgba(5, 8, 11, 0.76);
  --bg-panel-solid: #05080b;
  --bg-control: rgba(0, 0, 0, 0.58);
  --border-subtle: rgba(255, 255, 255, 0.11);
  --border-medium: rgba(255, 255, 255, 0.2);
  --text-main: #f2f2f2;
  --text-muted: #a8a8a8;
  --text-dim: #72777c;
  --accent: #e5e7eb;
  --accent-soft: rgba(229, 231, 235, 0.12);
  --danger: #ff5f57;
  --ok: #70d85f;
  --panel-pad: 18px;
  --card-gap: 14px;
  --body-scale: 1;
  --surface-glow: rgba(255, 255, 255, 0.038);
  --transit-stop-background: #020406;
  --transit-active-ring: rgba(255, 255, 255, 0.24);
  --transit-active-glow: rgba(255, 255, 255, 0.14);
  --surface-button-gap: 9px;
  --surface-button-min-height: 36px;
  --surface-button-padding: 7px 13px;
  --surface-button-radius: 5px;
  --surface-button-font-size: inherit;
}

html,
body {
  font-size: calc(16px * var(--body-scale));
  letter-spacing: 0;
}

body {
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.82;
  background:
    radial-gradient(ellipse at 50% 24%, rgba(255, 255, 255, 0.026), transparent 48%),
    radial-gradient(ellipse at 14% 92%, rgba(255, 255, 255, 0.016), transparent 28%),
    radial-gradient(ellipse at 86% 92%, rgba(255, 255, 255, 0.015), transparent 30%);
}

/* Ambient subway texture (matches dash and the content sites) — sits behind
   the glow/vignette layers so it stays as subtle as dash's backdrop. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: 0.1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1540 540'%3E%3Cg fill='none' stroke='%23e5e7eb' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 86H158L206 134H370L426 190H612L680 258H812L888 334H1058L1128 404H1432' stroke-opacity='.15' stroke-width='3' stroke-dasharray='10 12'/%3E%3Cpath d='M72 420H210L272 358H458L520 296H678' stroke-opacity='.1' stroke-width='4'/%3E%3Cpath d='M866 118H1008L1060 66H1284L1348 130H1510' stroke-opacity='.12' stroke-width='4'/%3E%3Cpath d='M944 472H1104L1160 416H1328L1394 482' stroke-opacity='.1' stroke-width='3' stroke-dasharray='11 11'/%3E%3C/g%3E%3Cg fill='%23020406' stroke='%23e5e7eb'%3E%3Ccircle cx='158' cy='86' r='7' stroke-opacity='.16' stroke-width='4'/%3E%3Ccircle cx='370' cy='134' r='7' stroke-opacity='.12' stroke-width='4'/%3E%3Ccircle cx='612' cy='190' r='7' stroke-opacity='.12' stroke-width='4'/%3E%3Ccircle cx='812' cy='258' r='7' stroke-opacity='.13' stroke-width='4'/%3E%3Ccircle cx='1058' cy='334' r='7' stroke-opacity='.13' stroke-width='4'/%3E%3Ccircle cx='210' cy='420' r='7' stroke-opacity='.12' stroke-width='4'/%3E%3Ccircle cx='458' cy='358' r='7' stroke-opacity='.11' stroke-width='4'/%3E%3Ccircle cx='1008' cy='118' r='7' stroke-opacity='.13' stroke-width='4'/%3E%3Ccircle cx='1284' cy='66' r='7' stroke-opacity='.13' stroke-width='4'/%3E%3Ccircle cx='1328' cy='416' r='7' stroke-opacity='.11' stroke-width='4'/%3E%3C/svg%3E")
    center top / 100% auto no-repeat;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0 54%, rgba(0, 0, 0, 0.48) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.46));
}

.account-shell {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.account-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(170px, 220px);
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 16px 22px 0;
  pointer-events: none;
}

html.xjk-has-sidenav .account-topbar {
  left: var(--xjk-sidenav-w, 0px);
  transition: left 200ms ease;
}

.account-main {
  position: relative;
  isolation: isolate;
  width: min(100%, 1540px);
  height: 100dvh;
  margin: 0 auto;
  padding: 18px 22px 12px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  gap: 8px;
  min-height: 0;
}

.account-main::before {
  content: "";
  position: absolute;
  inset: 88px 0 38px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.14;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1540 540'%3E%3Cg fill='none' stroke='%23d8d8d8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 86H158L206 134H370L426 190H612L680 258H812L888 334H1058L1128 404H1432' stroke-opacity='.15' stroke-width='3' stroke-dasharray='10 12'/%3E%3Cpath d='M72 420H210L272 358H458L520 296H678' stroke-opacity='.12' stroke-width='4'/%3E%3Cpath d='M866 118H1008L1060 66H1284L1348 130H1510' stroke-opacity='.14' stroke-width='4'/%3E%3Cpath d='M944 472H1104L1160 416H1328L1394 482' stroke-opacity='.12' stroke-width='3' stroke-dasharray='11 11'/%3E%3C/g%3E%3Cg fill='%23020406' stroke='%23d8d8d8'%3E%3Ccircle cx='158' cy='86' r='7' stroke-opacity='.18' stroke-width='4'/%3E%3Ccircle cx='370' cy='134' r='7' stroke-opacity='.14' stroke-width='4'/%3E%3Ccircle cx='612' cy='190' r='7' stroke-opacity='.14' stroke-width='4'/%3E%3Ccircle cx='812' cy='258' r='7' stroke-opacity='.15' stroke-width='4'/%3E%3Ccircle cx='1058' cy='334' r='7' stroke-opacity='.15' stroke-width='4'/%3E%3Ccircle cx='210' cy='420' r='7' stroke-opacity='.14' stroke-width='4'/%3E%3Ccircle cx='458' cy='358' r='7' stroke-opacity='.13' stroke-width='4'/%3E%3Ccircle cx='1008' cy='118' r='7' stroke-opacity='.15' stroke-width='4'/%3E%3Ccircle cx='1284' cy='66' r='7' stroke-opacity='.15' stroke-width='4'/%3E%3Ccircle cx='1328' cy='416' r='7' stroke-opacity='.13' stroke-width='4'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}

.account-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 34px;
  min-height: 78px;
}

.account-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1540 78' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23d8d8d8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 40H560' stroke-opacity='.16' stroke-width='3'/%3E%3Cpath d='M576 26V54' stroke-opacity='.2' stroke-width='4'/%3E%3Cpath d='M96 58H440L488 40' stroke-opacity='.12' stroke-width='3' stroke-dasharray='10 12'/%3E%3Cpath d='M1500 40H980' stroke-opacity='.16' stroke-width='3'/%3E%3Cpath d='M964 26V54' stroke-opacity='.2' stroke-width='4'/%3E%3Cpath d='M1444 58H1100L1052 40' stroke-opacity='.12' stroke-width='3' stroke-dasharray='10 12'/%3E%3C/g%3E%3Cg fill='%23020406' stroke='%23d8d8d8' stroke-width='4'%3E%3Ccircle cx='300' cy='40' r='6' stroke-opacity='.16'/%3E%3Ccircle cx='524' cy='40' r='7' stroke-opacity='.2'/%3E%3Ccircle cx='1240' cy='40' r='6' stroke-opacity='.16'/%3E%3Ccircle cx='1016' cy='40' r='7' stroke-opacity='.2'/%3E%3C/g%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}

.hero-copy {
  display: grid;
  grid-column: 2;
  justify-items: center;
  gap: 3px;
  text-align: center;
}

.card-kicker,
.toolbar-note {
  font-family: "Space Mono", ui-monospace, monospace;
}

.card-kicker {
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.account-hero h1 {
  margin-top: 0;
  font-family: "Inter", "IBM Plex Sans Condensed", system-ui, sans-serif;
  font-size: clamp(31px, 2.82vw, 38px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.1em;
  opacity: 0.92;
  text-shadow: none;
}

.hero-copy p:last-child {
  margin-top: 7px;
  color: var(--text-muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 13px;
}

.ghost-rail {
  display: none;
}

.ghost-rail::before {
  content: "";
  position: absolute;
  top: 23px;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.42);
  transform-origin: center;
}

.ghost-rail::after {
  content: "";
  position: absolute;
  top: 18px;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  background: #020406;
  box-shadow:
    0 0 0 34px rgba(255, 255, 255, 0),
    var(--ghost-node-shadow, none);
}

.ghost-rail--left {
  background:
    linear-gradient(90deg, transparent 0 4%, rgba(255, 255, 255, 0.2) 4% 30%, transparent 30%),
    linear-gradient(90deg, transparent 53%, rgba(255, 255, 255, 0.18) 53% 72%, transparent 72%);
  background-position:
    0 22px,
    0 22px;
  background-repeat: no-repeat;
  background-size:
    100% 2px,
    100% 2px;
}

.ghost-rail--left::before {
  left: 43%;
  width: 22%;
  transform: rotate(45deg);
}

.ghost-rail--left::after {
  right: 26%;
  --ghost-node-shadow: -142px -1px 0 -2px #020406, -142px -1px 0 0 rgba(255, 255, 255, 0.28);
}

.ghost-rail--right {
  background:
    linear-gradient(90deg, transparent 28%, rgba(255, 255, 255, 0.18) 28% 48%, transparent 48%),
    linear-gradient(90deg, transparent 70%, rgba(255, 255, 255, 0.2) 70% 96%, transparent 96%);
  background-position:
    0 22px,
    0 22px;
  background-repeat: no-repeat;
  background-size:
    100% 2px,
    100% 2px;
}

.ghost-rail--right::before {
  right: 43%;
  width: 22%;
  transform: rotate(-45deg);
}

.ghost-rail--right::after {
  left: 26%;
  --ghost-node-shadow: 142px -1px 0 -2px #020406, 142px -1px 0 0 rgba(255, 255, 255, 0.28);
}

.account-rail {
  position: relative;
  justify-self: center;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 0 clamp(96px, 10vw, 138px);
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.account-rail::before {
  content: "";
  position: absolute;
  top: 20px;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0.36) 18%,
    rgba(255, 255, 255, 0.24) 50%,
    rgba(255, 255, 255, 0.36) 82%,
    rgba(255, 255, 255, 0.28)
  );
  opacity: 0.78;
  pointer-events: none;
}

.account-rail::-webkit-scrollbar {
  display: none;
}

.rail-stop {
  flex: 1 0 142px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 0;
}

.rail-stop::before,
.rail-stop::after {
  content: "";
  position: absolute;
  top: 20px;
  height: 2px;
  background: transparent;
  display: block;
}

.rail-stop::before {
  left: 0;
  right: 50%;
}

.rail-stop::after {
  left: 50%;
  right: 0;
}

.rail-stop:first-child::before,
.rail-stop:last-child::after {
  display: none;
}

.rail-stop strong {
  overflow: visible;
  text-overflow: ellipsis;
}

.rail-stop.is-active,
.rail-stop:hover {
  border-color: transparent;
  background: transparent;
}