/* Served from this host, not Google. A webfont request to a third party hands
   them every visitor's IP on every page, which is exactly what the privacy
   policy says the panel does not do — and self-hosting lets the CSP forbid
   external origins outright. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/font/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/font/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Noxere — customer panel design system
   --------------------------------------------------------------------------
   One accent, neutral charcoal ground, hairline edges, generous air.
   Every page in the panel is assembled from the primitives below; nothing
   here is page-specific.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Ground. Neutral charcoal, not black — black flattens the surfaces
     stacked on it and there is nowhere left to go for depth. */
  --bg:          #08090A;
  --bg-raise:    #0D0E10;
  --surface:     #101113;
  --surface-2:   #17181B;
  --surface-3:   #1E2023;

  /* Edges. Quiet, but a border you cannot see at all is not a border — at
     .055 the straight runs vanished while the anti-aliased corners survived,
     which read as a broken card rather than a subtle one. */
  --line:        rgba(255, 255, 255, .075);
  --line-2:      rgba(255, 255, 255, .11);
  --line-3:      rgba(255, 255, 255, .16);

  /* Ink */
  --fg:          #F2F3F5;
  --fg-2:        #9CA1A8;
  --fg-3:        #6B7178;
  --fg-4:        #4A4F56;

  /* The single accent. Used for state and for one action per view —
     never as decoration. */
  --accent:      #37B6EC;
  --accent-dim:  #1F7CA6;
  --accent-wash: rgba(55, 182, 236, .10);
  --accent-edge: rgba(55, 182, 236, .28);

  /* Status. Read as ink, not as brand. */
  --pos:         #4ADE9B;
  --warn:        #E9B949;
  --neg:         #F27272;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;

  --ease:        cubic-bezier(.16, 1, .3, 1);
  --ease-out:    cubic-bezier(.33, 1, .68, 1);

  --page:        1080px;
  --rail-gap:    16px;

  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

/* Montserrat is a geometric display face: wider than a UI sans and a touch
   loose by default. A hair of negative tracking and a slightly taller line
   bring it back to a comfortable reading colour at panel sizes. */
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.6;
  letter-spacing: -.014em;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* A single wash of light at the top of the page. The only gradient in the
   system, and it never rises above 4% opacity. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 520px;
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(55, 182, 236, .05) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .022) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }

::selection { background: rgba(55, 182, 236, .26); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

.t-page {
  font-size: 34px;
  font-weight: 560;
  letter-spacing: -.032em;
  line-height: 1.12;
}

.t-sect {
  font-size: 16px;
  font-weight: 540;
  letter-spacing: -.017em;
}

.t-lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 62ch;
}

.t-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: -.005em;
}

.t-meta { font-size: 13px; color: var(--fg-3); }
.t-mono { font-family: var(--mono); font-size: 13.5px; letter-spacing: 0; }
.t-num  { font-variant-numeric: tabular-nums; }

.t-display {
  font-size: 64px;
  font-weight: 570;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.t-display-sm {
  font-size: 40px;
  font-weight: 560;
  letter-spacing: -.038em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.dim { color: var(--fg-2); }
.dimmer { color: var(--fg-3); }

/* A figure and the sentence that reads it, set side by side and centred on
   the figure's own middle rather than stacked. */
.figure {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.figure .t-lead { margin: 0; }

/* --------------------------------------------------------------------------
   4. Shell — lightweight top navigation, no sidebar
   -------------------------------------------------------------------------- */

.shell { position: relative; z-index: 1; }

/* A single floating bar. Same button language throughout: rounded, hairline,
   the current page held in a quietly lit slot. */
.rail {
  position: sticky;
  top: var(--rail-gap);
  z-index: 60;
  max-width: var(--page);
  margin: var(--rail-gap) auto 0;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(13, 14, 16, .86);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
}

.rail hr {
  width: 1px;
  height: 22px;
  margin: 0 8px;
  border: 0;
  border-left: 1px solid var(--line-2);
}

.rail-group { display: flex; align-items: center; gap: 4px; }
.rail-foot { margin-left: auto; display: flex; align-items: center; gap: 4px; }

.rail-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 460;
  color: var(--fg-3);
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}

.rail-item svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rail-item:hover { color: var(--fg); background: var(--surface-2); }

/* The current page is marked by fill and ink only. An outline on top of the
   fill draws a second, brighter shape and the item stops looking selected —
   it looks framed. */
.rail-item[aria-current] {
  color: var(--fg);
  background: var(--surface-2);
}

/* the account button stays icon-sized */
.rail-item.acct-btn { padding: 0; width: 40px; justify-content: center; gap: 0; }

/* No frame. The mark is already a contained shape and a box around it just
   draws a second one. */
.rail-brand {
  width: 40px; height: 40px;
  margin-right: 6px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  opacity: .95;
  transition: opacity .2s var(--ease);
}

.rail-brand:hover { opacity: 1; }
.rail-brand img { width: 30px; height: 30px; }

/* account */

.acct { position: relative; }

.avatar {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.avatar svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.acct-btn:hover .avatar { border-color: var(--line-3); color: var(--fg); }

.menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 224px;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 48px -14px rgba(0, 0, 0, .9);
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}

.acct.is-open .menu { opacity: 1; transform: none; pointer-events: auto; }

.menu-head { padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-head b { display: block; font-size: 13.5px; font-weight: 520; }
.menu-head span { display: block; margin-top: 2px; font-size: 12px; color: var(--fg-3); }

.menu a, .menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  font-size: 13.5px;
  color: var(--fg-2);
  transition: background .16s var(--ease), color .16s var(--ease);
}

.menu a:hover, .menu button:hover { background: var(--surface-2); color: var(--fg); }
.menu a svg, .menu button svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.menu button { width: 100%; text-align: left; }
.menu form { margin: 0; }
.menu hr { width: auto; margin: 6px 4px; border: 0; border-top: 1px solid var(--line); }

/* page body */

.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 56px 40px 96px;
}

.page-head { margin-bottom: 40px; }
.page-head .t-lead { margin-top: 10px; }

.stack   { display: flex; flex-direction: column; gap: 16px; }
.stack-l { display: flex; flex-direction: column; gap: 28px; }
.two     { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.split   { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }

/* Centred flow: a single column of content with its own heading, used where
   the page is one task rather than an overview. */
.narrow { max-width: 520px; margin: 0 auto; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 22px;
  padding: 6px 12px 6px 9px;
  margin-left: -9px;
  border-radius: var(--r-xs);
  font-size: 13.5px;
  color: var(--fg-3);
  transition: color .2s var(--ease), background .2s var(--ease);
}

.back-link:hover { color: var(--fg); background: var(--surface-2); }
.back-link svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.narrow .page-head { text-align: center; }
.narrow .t-lead { margin-left: auto; margin-right: auto; }

.sect-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   5. Surfaces
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.card-pad-lg { padding: 36px; }
.card-flush  { padding: 0; overflow: hidden; }

/* The subject of the page. Distinguished by a slightly firmer edge only —
   a colour wash behind a surface makes the accent decorative, and the accent
   is reserved for state. */
.card-feature { border-color: var(--line-2); }

.card-quiet { background: var(--bg-raise); }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

/* A status with nothing to sit opposite is pinned to the card's corner rather
   than given a row of its own — a row it does not fill leaves a band of empty
   space above the content that reads as a mistake. */
.card-tag { position: absolute; top: 28px; right: 28px; z-index: 1; }
.card-pad-lg > .card-tag { top: 36px; right: 36px; }

.divider { height: 1px; background: var(--line); border: 0; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.012em;
  white-space: nowrap;
  transition:
    background .22s var(--ease),
    border-color .22s var(--ease),
    color .22s var(--ease),
    transform .22s var(--ease),
    opacity .22s var(--ease);
}

.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn:active { transform: scale(.985); }

/* Solid light — exactly one per view. */
.btn-solid {
  background: var(--fg);
  color: #08090A;
}

.btn-solid:hover { background: #fff; }

.btn-line {
  background: var(--surface-2);
  border-color: var(--line-2);
  color: var(--fg);
}

.btn-line:hover { background: var(--surface-3); border-color: var(--line-3); }

.btn-ghost { color: var(--fg-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--fg); }

.btn-sm { height: 32px; padding: 0 13px; font-size: 13px; border-radius: var(--r-xs); }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; }
.btn-wide { width: 100%; }

/* Disabled is not "the same button, dimmer". A solid fill at low opacity is
   still the largest, lightest shape on the card and keeps pulling the eye to
   something that cannot be pressed. It steps back to an outline instead, and
   fills in only once it works. */
.btn[disabled], .btn[aria-disabled="true"] {
  background: transparent;
  border-color: var(--line-2);
  color: var(--fg-4);
  box-shadow: none;
  cursor: not-allowed;
}

.btn[disabled]:hover, .btn[aria-disabled="true"]:hover { transform: none; background: transparent; }

/* icon-only */

.ibtn {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  color: var(--fg-3);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.ibtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ibtn:hover { color: var(--fg); border-color: var(--line-2); background: var(--surface-2); }

/* --------------------------------------------------------------------------
   7. Badges
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 470;
  color: var(--fg-2);
  letter-spacing: -.006em;
}

.badge i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.badge-pos  { color: var(--pos);  border-color: rgba(74, 222, 155, .26); background: rgba(74, 222, 155, .07); }
.badge-warn { color: var(--warn); border-color: rgba(233, 185, 73, .26); background: rgba(233, 185, 73, .07); }
.badge-neg  { color: var(--neg);  border-color: rgba(242, 114, 114, .26); background: rgba(242, 114, 114, .07); }
.badge-acc  { color: var(--accent); border-color: var(--accent-edge); background: var(--accent-wash); }

.dot-live { position: relative; }
.dot-live::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  animation: ping 2.6s var(--ease-out) infinite;
}

@keyframes ping {
  0%   { opacity: .5; transform: scale(.6); }
  70%, 100% { opacity: 0; transform: scale(1.5); }
}

/* --------------------------------------------------------------------------
   8. Definition rows and lists
   -------------------------------------------------------------------------- */

.rows { display: flex; flex-direction: column; }

.row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.row:last-child { border-bottom: 0; padding-bottom: 0; }
.row:first-child { padding-top: 0; }

/* For rows whose body runs to several lines, the leading mark and the
   trailing timestamp belong on the title's line, not floating at the
   vertical middle of a paragraph. */
.row-top { align-items: flex-start; }
.row-top .row-lead { margin-top: -3px; }
.row-top > .t-meta { margin-top: 1px; }

.row-main { flex: 1; min-width: 0; }
.row-t { font-size: 14.5px; font-weight: 470; display: flex; align-items: center; gap: 9px; }
.row-s { margin-top: 3px; font-size: 13px; color: var(--fg-3); }

.row-lead {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--fg-3);
}

.row-lead svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.row-lead-acc { color: var(--accent); border-color: var(--accent-edge); background: var(--accent-wash); }
.row-lead-pos { color: var(--pos);    border-color: rgba(74, 222, 155, .24); background: rgba(74, 222, 155, .06); }
.row-lead-warn{ color: var(--warn);   border-color: rgba(233, 185, 73, .24); background: rgba(233, 185, 73, .06); }

/* key / value */

.kv { display: flex; flex-direction: column; }

.kv > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
.kv > div:first-child { padding-top: 0; }
.kv dt { font-size: 13.5px; color: var(--fg-3); }
.kv dd { font-size: 14.5px; text-align: right; }

/* --------------------------------------------------------------------------
   9. Table
   -------------------------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; }

/* The header needs air above it: pinned to y=0 it sat inside the card's
   corner radius and its rule appeared to cut the corners off. */
.table th {
  padding: 15px 20px 17px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 460;
  color: var(--fg-3);
  border-bottom: 1px solid var(--line);
}

.table td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  vertical-align: middle;
}

.table tbody tr { transition: background .18s var(--ease); }
.table tbody tr:hover { background: rgba(255, 255, 255, .018); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .right { text-align: right; }
.table thead th:first-child, .table td:first-child { padding-left: 28px; }
.table thead th:last-child, .table td:last-child { padding-right: 28px; }

/* --------------------------------------------------------------------------
   10. Inputs
   -------------------------------------------------------------------------- */

.field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-raise);
  transition: border-color .2s var(--ease);
}

.field:focus-within { border-color: var(--line-3); }
.field input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 14px; }
.field-mono input { font-family: var(--mono); font-size: 13.5px; color: var(--fg-2); }

/* choice */

.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-raise);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.choice:hover { border-color: var(--line-2); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-main { flex: 1; min-width: 0; }
.choice-t { font-size: 14.5px; }
.choice-s { margin-top: 2px; font-size: 12.5px; color: var(--fg-3); }

.choice-mark {
  width: 17px; height: 17px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line-3);
  transition: border-color .2s var(--ease), border-width .2s var(--ease);
}

.choice:has(input:checked) { border-color: var(--accent-edge); background: var(--accent-wash); }
.choice:has(input:checked) .choice-mark { border-color: var(--accent); border-width: 5px; }
.choice:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* switch */

.switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }

.switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  transition: background .24s var(--ease), border-color .24s var(--ease);
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--fg-3);
  transition: transform .24s var(--ease), background .24s var(--ease);
}

.switch input:checked + .switch-track { background: var(--accent-dim); border-color: transparent; }
.switch input:checked + .switch-track::after { transform: translateX(16px); background: #fff; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   11. Meter
   -------------------------------------------------------------------------- */

.meter { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }

.meter span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transform-origin: left;
  animation: grow .9s var(--ease) both;
}

.meter-neg span { background: var(--neg); }

@keyframes grow { from { transform: scaleX(0); } }

.meter-legend {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12.5px;
  color: var(--fg-3);
}

/* --------------------------------------------------------------------------
   12. Steps
   -------------------------------------------------------------------------- */

.steps { display: flex; flex-direction: column; }

.step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  font-size: 14px;
  color: var(--fg-3);
}

.step-d {
  width: 9px; height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line-3);
  background: var(--bg);
}

.step + .step::before {
  content: "";
  position: absolute;
  left: 4px; top: -9px;
  width: 1px; height: 18px;
  background: var(--line-2);
}

.step-done { color: var(--fg-2); }
.step-done .step-d { background: var(--pos); border-color: var(--pos); }

.step-now { color: var(--fg); }
.step-now .step-d { background: var(--warn); border-color: var(--warn); box-shadow: 0 0 0 4px rgba(233, 185, 73, .13); }

/* --------------------------------------------------------------------------
   13. Empty state
   -------------------------------------------------------------------------- */

.empty {
  padding: 56px 28px;
  text-align: center;
}

.empty-mark {
  width: 44px; height: 44px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--fg-3);
}

.empty-mark svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.empty h3 { font-size: 16px; font-weight: 520; letter-spacing: -.017em; }
.empty p { margin: 8px auto 0; max-width: 40ch; font-size: 14px; color: var(--fg-3); }
.empty .btn { margin-top: 22px; }

/* --------------------------------------------------------------------------
   14. Skeleton
   -------------------------------------------------------------------------- */

.sk {
  border-radius: var(--r-xs);
  background:
    linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

.sk-line { height: 12px; }
.sk-title { height: 22px; width: 40%; }
.sk-block { height: 84px; border-radius: var(--r-md); }

@keyframes shimmer { to { background-position: -200% 0; } }

/* --------------------------------------------------------------------------
   15. Notice
   -------------------------------------------------------------------------- */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--bg-raise);
}

.notice-i { flex-shrink: 0; margin-top: 1px; }
.notice-i svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.notice b { display: block; font-size: 14px; font-weight: 500; }
.notice p { margin-top: 3px; font-size: 13.5px; color: var(--fg-3); }

.notice-warn { border-color: rgba(233, 185, 73, .22); background: rgba(233, 185, 73, .05); }
.notice-warn .notice-i { color: var(--warn); }
.notice-acc { border-color: var(--accent-edge); background: var(--accent-wash); }
.notice-acc .notice-i { color: var(--accent); }

/* --------------------------------------------------------------------------
   16. Utility
   -------------------------------------------------------------------------- */

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.link { color: var(--accent); transition: opacity .18s var(--ease); }
.link:hover { opacity: .78; }

/* A named third party inside a sentence of secondary text. It has to be
   clickable without becoming the brightest thing in the paragraph, so it
   borrows the foreground rather than the accent. */
.link-plain {
  color: var(--fg);
  border-bottom: 1px solid var(--line-3);
  transition: border-color .18s var(--ease);
}

.link-plain:hover { border-bottom-color: var(--fg-2); }

.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  color: var(--fg-2);
  transition: color .18s var(--ease);
}

.link-quiet:hover { color: var(--fg); }
.link-quiet svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.rise { animation: rise .5s var(--ease) both; }
.rise-2 { animation-delay: .06s; }
.rise-3 { animation-delay: .12s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
}

/* --------------------------------------------------------------------------
   17. Centred flows (sign in)
   -------------------------------------------------------------------------- */

.centre {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 24px;
}

.gate {
  width: 100%;
  max-width: 400px;
  padding: 40px 34px 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
}

.gate-mark {
  width: 56px; height: 56px;
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
}

.gate-mark img { width: 52px; height: 52px; }
.gate h1 { font-size: 24px; font-weight: 550; letter-spacing: -.028em; }
.gate .t-lead { margin: 10px auto 0; font-size: 14.5px; }
.gate-body { margin-top: 30px; }
.gate-note {
  margin-bottom: 22px;
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg-raise);
  font-size: 13.5px;
  color: var(--fg-2);
}

.sheet-acts .btn { flex-shrink: 0; }

.gate-foot { margin-top: 22px; font-size: 12.5px; line-height: 1.7; color: var(--fg-4); }
.gate-foot a { color: var(--fg); border-bottom: 1px solid var(--line-3); }
.gate-foot a:hover { border-bottom-color: var(--fg-2); }

.code { display: flex; gap: 8px; justify-content: center; }

.code span {
  width: 46px; height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 24px;
  font-weight: 520;
  font-variant-numeric: tabular-nums;
  animation: rise .5s var(--ease) both;
}

.code span:nth-child(2) { animation-delay: .04s; }
.code span:nth-child(3) { animation-delay: .08s; }
.code span:nth-child(4) { animation-delay: .12s; }
.code span:nth-child(5) { animation-delay: .16s; }
.code span:nth-child(6) { animation-delay: .20s; }

.waiting {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--fg-3);
}

.waiting-sub { margin-top: 6px; font-size: 12.5px; color: var(--fg-4); }

.spinner {
  width: 13px; height: 13px;
  border: 1.5px solid var(--line-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.step-panel { display: none; }
.step-panel.is-on { display: block; }

/* --------------------------------------------------------------------------
   19. Banner — panel-wide notice
   -------------------------------------------------------------------------- */

/* Crypto cannot auto-charge, so a licence dies quietly. This rides above every
   page once the end is close enough to matter. */
.banner {
  max-width: var(--page);
  margin: 14px auto 0;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg-raise);
  font-size: 14px;
}

.banner-i { flex-shrink: 0; display: grid; place-items: center; }
.banner-i svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.banner-b { flex: 1; min-width: 0; }
.banner-b b { font-weight: 520; }
.banner-b span { color: var(--fg-3); }

.banner-warn { border-color: rgba(233, 185, 73, .26); background: rgba(233, 185, 73, .05); }
.banner-warn .banner-i { color: var(--warn); }
.banner-neg  { border-color: rgba(242, 114, 114, .26); background: rgba(242, 114, 114, .05); }
.banner-neg  .banner-i { color: var(--neg); }

/* --------------------------------------------------------------------------
   20. Dialog
   -------------------------------------------------------------------------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 5, 6, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}

.sheet.is-open { opacity: 1; pointer-events: auto; }

/* display:grid above outranks the browser's own [hidden] rule, so without this
   the dialog stayed in the tab order and the accessibility tree while being
   invisible — reachable by keyboard, read out by a screen reader. */
.sheet[hidden] { display: none; }

.sheet-box {
  width: 100%;
  max-width: 420px;
  padding: 28px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 40px 80px -24px rgba(0, 0, 0, .9);
  transform: translateY(10px) scale(.985);
  transition: transform .24s var(--ease);
}

.sheet.is-open .sheet-box { transform: none; }

.sheet-box h2 { font-size: 18px; font-weight: 540; letter-spacing: -.02em; }
.sheet-box p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.sheet-acts { margin-top: 24px; display: flex; gap: 10px; justify-content: flex-end; }
.sheet-acts .btn { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   21. Document pages (terms, privacy)
   -------------------------------------------------------------------------- */

.doc { max-width: 720px; margin: 0 auto; padding: 48px 28px 96px; }
.doc-head { margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }

.doc-body h2 {
  margin: 40px 0 12px;
  font-size: 17px;
  font-weight: 540;
  letter-spacing: -.018em;
}

.doc-body h2:first-child { margin-top: 0; }
.doc-body p { margin-bottom: 14px; font-size: 15px; line-height: 1.75; color: var(--fg-2); }
.doc-body ul { margin: 0 0 14px; padding-left: 0; }

.doc-body li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 9px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-2);
}

.doc-body li::before {
  content: "";
  position: absolute;
  left: 4px; top: 12px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--fg-4);
}

.doc-body strong { color: var(--fg); font-weight: 520; }

/* --------------------------------------------------------------------------
   22. Checklist
   -------------------------------------------------------------------------- */

.checks { display: flex; flex-direction: column; gap: 2px; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.check:last-child { border-bottom: 0; padding-bottom: 0; }
.check:first-child { padding-top: 0; }

.check-n {
  width: 22px; height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}

.check-b { flex: 1; min-width: 0; }
.check-t { font-size: 14.5px; font-weight: 460; }

/* Required or not, marked the same way on every row.
   In the copy it used to live inside one title as "— not optional", which told
   the reader about that row and left them inferring the other three. */
.check-r {
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-3);
  vertical-align: 1.5px;
  white-space: nowrap;
}

/* The one that is not required reads quieter, so the eye counts three. */
.check-r-soft { opacity: .62; }
.check-s { margin-top: 3px; font-size: 13.5px; line-height: 1.6; color: var(--fg-3); }

/* --------------------------------------------------------------------------
   23. Error pages
   -------------------------------------------------------------------------- */

.oops { min-height: 100vh; display: grid; place-items: center; padding: 40px 24px; text-align: center; }
.oops-code { font-size: 15px; font-weight: 500; color: var(--fg-4); font-variant-numeric: tabular-nums; }
.oops h1 { margin-top: 14px; font-size: 30px; font-weight: 550; letter-spacing: -.03em; }
.oops p { margin: 12px auto 0; max-width: 44ch; font-size: 15px; color: var(--fg-2); }
.oops .btn { margin-top: 28px; }

/* --------------------------------------------------------------------------
   24. Consent
   -------------------------------------------------------------------------- */

/* Explicit acceptance, not a line of small print under a button. Ticking a box
   is the difference between a customer who agreed and a customer who was
   merely shown something — and only one of those is worth anything later. */
.consent {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-2);
}

.consent input { position: absolute; opacity: 0; pointer-events: none; }

.consent-box {
  width: 17px; height: 17px;
  flex-shrink: 0;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line-3);
  border-radius: 5px;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}

.consent-box svg {
  width: 11px; height: 11px;
  stroke: #08090A;
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}

.consent:hover .consent-box { border-color: var(--fg-3); }
.consent input:checked ~ .consent-box { background: var(--accent); border-color: var(--accent); }
.consent input:checked ~ .consent-box svg { opacity: 1; transform: none; }
.consent input:focus-visible ~ .consent-box { outline: 2px solid var(--accent); outline-offset: 3px; }

.consent a { color: var(--fg); border-bottom: 1px solid var(--line-3); }
.consent a:hover { border-bottom-color: var(--fg-2); }

/* --------------------------------------------------------------------------
   25. Pager
   -------------------------------------------------------------------------- */

.pager {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* --------------------------------------------------------------------------
   26. Disclosure
   -------------------------------------------------------------------------- */

.verify {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.verify summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--fg-2);
  cursor: pointer;
  list-style: none;
  transition: color .18s var(--ease);
}

.verify summary::-webkit-details-marker { display: none; }
.verify summary:hover { color: var(--fg); }

.verify summary::before {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s var(--ease);
}

.verify[open] summary::before { transform: rotate(45deg); }
.verify[open] summary { margin-bottom: 16px; }
.verify .field input { font-size: 12.5px; }

/* --------------------------------------------------------------------------
   27. Platform picker
   -------------------------------------------------------------------------- */

.pick {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-raise);
  color: var(--fg);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.pick:hover { border-color: var(--line-3); background: var(--surface-2); }
.pick svg { width: 17px; height: 17px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Platform marks are solid shapes, so they take a fill rather than the stroke
   every other icon in the system uses. */
.pick-os {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #FFFFFF;
}

.pick-os svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.pick.is-off .pick-os { color: var(--fg-3); }

.pick-b { flex: 1; min-width: 0; }
.pick-t { display: block; font-size: 14.5px; }
.pick-s { display: block; margin-top: 3px; font-size: 12.5px; color: var(--fg-3); }

.pick.is-off { cursor: not-allowed; background: transparent; }
.pick.is-off:hover { border-color: var(--line); background: transparent; }
.pick.is-off .pick-t { color: var(--fg-3); }

/* --------------------------------------------------------------------------
   28. Footer
   -------------------------------------------------------------------------- */

.foot {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 12.5px;
  color: var(--fg-4);
}

.foot-links { display: flex; gap: 20px; }
.foot-links a { color: var(--fg-3); transition: color .18s var(--ease); }
.foot-links a:hover { color: var(--fg-2); }

/* --------------------------------------------------------------------------
   29. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .split, .two { grid-template-columns: 1fr; }
  .t-display { font-size: 52px; }
  .card { padding: 24px; }
  .card-pad-lg { padding: 28px; }
  .card-pad-lg > .card-tag { top: 28px; right: 28px; }

  .rail { margin: 0; border-radius: 0; border-width: 0 0 1px; padding: 8px 14px; }
  .rail-item { padding: 0 11px; font-size: 13.5px; }
  .page { padding: 36px 20px 72px; }
}

@media (max-width: 640px) {
  /* The corner is only free while the heading fits on one line. Below this the
     heading wraps and runs underneath the badge, so the badge takes a line of
     its own — it sits first in the markup, which is where it belongs on a
     narrow screen anyway. */
  .card-tag,
  .card-pad-lg > .card-tag { position: static; display: inline-flex; margin-bottom: 14px; }

  .t-page { font-size: 27px; }
  .t-display { font-size: 44px; }
  .t-display-sm { font-size: 30px; }

  /* icons only — four labels will not fit a phone */
  .rail { padding: 8px 10px; gap: 2px; }
  .rail hr { margin: 0 5px; }
  .rail-item { padding: 0; width: 38px; justify-content: center; gap: 0; }
  /* labels only — the avatar is a span inside a rail item too, and hiding
     everything took the account button with it */
  .rail-item > span:not(.sr):not(.avatar) { display: none; }
  .rail-brand { margin-right: 2px; }

  /* A label and its value at opposite ends of a phone read as two unrelated
     columns once either of them wraps. Stacked, they stay a pair. */
  .kv > div { flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 0; }
  .kv dd { text-align: left; }

  /* An action beside the text has nowhere to go at this width and squeezes the
     title into two or three lines. It moves to its own row, indented to line up
     with the text rather than the icon. */
  /* the mark belongs beside the first line, not floating at the middle of a
     block that is now three lines tall */
  .row { flex-wrap: wrap; row-gap: 14px; align-items: flex-start; }
  .row-lead { margin-top: 2px; }
  .row-main { flex: 1 1 0; }
  .row-t { flex-wrap: wrap; }
  .row > .btn,
  .row > form,
  .row > .t-meta { flex-basis: 100%; }
  .row:has(.row-lead) > .btn,
  .row:has(.row-lead) > form,
  .row:has(.row-lead) > .t-meta { margin-left: 50px; }
  .row > .btn { justify-content: center; }

  /* A 38px toggle is not what the rule above is for; flex-basis overrides
     width, so it stretched into a bar. It stays put and stays its own size. */
  .row > .switch { flex: 0 0 auto; }

  .card-head { flex-wrap: wrap; row-gap: 14px; }
  .pager { flex-wrap: wrap; row-gap: 12px; justify-content: center; }

  /* Stacked table rows: every cell says what it is, and the first and last
     keep the same inset as the rest — the desktop rule gave them 28px while
     the middle ones had 20px, which read as a broken indent. */
  .table thead { display: none; }
  .table tbody tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .table tbody tr:last-child { border-bottom: 0; }
  .table tbody tr:hover { background: none; }

  .table td,
  .table td:first-child,
  .table td:last-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 5px 24px;
    border: 0;
    text-align: right;
  }

  .table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 13px;
    color: var(--fg-3);
    text-align: left;
  }

  .table td:empty { display: none; }

  /* six boxes plus their gaps overflowed the card */
  .gate { padding: 32px 20px 28px; }
  .code { gap: 7px; }
  .code span { width: 42px; height: 52px; font-size: 21px; border-radius: 10px; }

  /* same reason: the spinner sat centred against two lines of text */
  .waiting { align-items: flex-start; }
  .waiting .waiting-sub { margin-top: 6px; font-size: 12.5px; color: var(--fg-4); }

.spinner { margin-top: 4px; }

  .foot { flex-direction: column; align-items: center; gap: 12px; text-align: center; }

  .doc { padding: 36px 20px 72px; }
  .empty { padding: 40px 18px; }
}

@media (max-width: 380px) {
  .code { gap: 5px; }
  .code span { width: 38px; height: 48px; font-size: 19px; }
}