/* ftw.trade — one design system for the landing page, sign-in and the app. */
:root {
  /* Surfaces: a cool near-black ladder. The page is the darkest; panels sit a step above it, their header strips a step above that. */
  --bg: #060709;
  --bg2: #0a0b0e;
  --card: #0d0e12;
  --card2: #13151a;
  --raise: #1a1d23;
  --panel: var(--card);
  --panel-head: #101217;
  /* Hairlines rather than borders. */
  --line: rgba(255, 255, 255, 0.065);
  --line2: rgba(255, 255, 255, 0.1);
  --line3: rgba(255, 255, 255, 0.16);
  --ink: #e9eaee;
  --dim: #9a9ca8;
  --faint: #656874;
  /* One accent, for primary actions, links, focus and selection. */
  --accent: #7c84ff;
  --accent-soft: rgba(124, 132, 255, 0.12);
  --blue: var(--accent);
  --blue2: #aeb3ff;
  --violet: #aeb3ff;
  --up: #2ebd85;
  --down: #f0616d;
  --warn: #e8a849;
  --glow: 0 0 0 1px rgba(124, 132, 255, 0.55), 0 0 0 3px rgba(124, 132, 255, 0.16);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  --r: 10px;
  --r-sm: 6px;
  /* Controls share one height so a row of input, select and button lines up. */
  --ctl-h: 32px;
  --ctl-h-sm: 28px;
  /* Type scale: 13px body, labels and table heads at 11, numbers that matter at 20+. */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 20px;
  --sans: var(--font-sans, 'Inter'), ui-sans-serif, system-ui, -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  --mono: var(--font-mono, 'JetBrains Mono'), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 13px/1.5 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01', 'ss03'; text-rendering: optimizeLegibility; }
button, input, select, textarea { font-feature-settings: inherit; }
body { min-height: 100vh; }
a { color: var(--blue2); text-decoration: none; }
a:hover { color: #fff; }
::selection { background: rgba(139, 147, 255, 0.3); }
h1, h2, h3 { letter-spacing: -0.022em; }

/* ── Docs (D1690, /docs) ──────────────────────────────────────────────────
   The app's look v2 (D1682): dark, Inter, one electric accent (#5c6cff), 16px
   cards and pill buttons, scoped to .dx so nothing here reaches the app or the
   landing page. Three columns on a wide screen (sidebar, page, contents), two
   on a laptop, one on a phone with the sidebar behind a menu button. */

.dx {
  --bg: #050608;
  --bg2: #090a0e;
  --card: #0e1015;
  --card2: #15171e;
  --raise: #1c1f27;
  --line: rgba(255, 255, 255, 0.07);
  --line2: rgba(255, 255, 255, 0.11);
  --line3: rgba(255, 255, 255, 0.16);
  --accent: #5c6cff;
  --accent-soft: rgba(92, 108, 255, 0.14);
  --blue2: #a5b0ff;
  --mint: #4fd1a5;
  --r: 16px;
  --r-sm: 10px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
}
.dx::before {
  content: '';
  position: fixed;
  inset: -200px 0 auto;
  height: 520px;
  pointer-events: none;
  background: radial-gradient(600px 260px at 22% 40%, rgba(92, 108, 255, 0.16), transparent 70%), radial-gradient(520px 220px at 78% 30%, rgba(79, 209, 165, 0.08), transparent 70%);
  z-index: 0;
}
.dx a { color: var(--blue2); text-decoration: none; }
.dx a:hover { color: #fff; }

/* Top bar */
.dx-top { position: sticky; top: 0; z-index: 40; background: rgba(5, 6, 8, 0.78); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--line); }
.dx-top-in { display: flex; align-items: center; gap: 18px; padding: 12px 28px; max-width: 1480px; margin: 0 auto; }
.dx-top .logo { color: var(--ink); }
.dx .dx-top-docs { color: var(--dim); font-weight: 550; padding-left: 16px; border-left: 1px solid var(--line2); }
.dx-grow { flex: 1; }
.dx-top-links { display: flex; gap: 20px; font-size: 14px; }
.dx-top-links a { color: var(--dim) !important; }
.dx-top-links a:hover { color: var(--ink) !important; }
.dx .dx-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 6px 20px -8px rgba(92, 108, 255, 0.8); white-space: nowrap; }
.dx .dx-btn:hover { background: #6f7dff; color: #fff; }

/* Search */
.dx-search-btn { display: flex; align-items: center; gap: 12px; width: 280px; height: 36px; padding: 0 8px 0 14px; border: 1px solid var(--line2); border-radius: 999px; background: var(--bg2); color: var(--faint); font: 14px var(--sans); cursor: pointer; }
.dx-search-btn:hover { border-color: var(--line3); color: var(--dim); }
.dx-search-btn span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx kbd { font: 11px var(--mono); padding: 2px 6px; border: 1px solid var(--line2); border-radius: 6px; color: var(--dim); background: var(--card); }
.dx.dx-search-bg { min-height: 0; background: rgba(0, 0, 0, 0.6); }
.dx-search-bg { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); display: flex; justify-content: center; padding: 12vh 16px 16px; }
.dx-search { width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9); overflow: hidden; }
.dx-search input { height: 56px; padding: 0 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: 16px var(--sans); outline: none; }
.dx-results { overflow-y: auto; padding: 8px; }
.dx-results a { display: block; padding: 10px 12px; border-radius: var(--r-sm); color: var(--ink) !important; }
.dx-results a.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(92, 108, 255, 0.3); }
.dx-r-t { display: block; font-weight: 600; font-size: 14px; }
.dx-r-t em { font-style: normal; color: var(--blue2); font-weight: 500; }
.dx-r-s { display: block; color: var(--dim); font-size: 13px; margin-top: 3px; line-height: 1.45; }
.dx-none { color: var(--dim); padding: 14px 12px; margin: 0; }

/* Columns */
.dx-body { position: relative; z-index: 1; display: grid; grid-template-columns: 260px minmax(0, 1fr) 220px; gap: 0 48px; max-width: 1480px; margin: 0 auto; padding: 0 28px; }
.dx-side { position: sticky; top: 61px; align-self: start; max-height: calc(100vh - 61px); overflow-y: auto; padding: 24px 4px 48px 0; scrollbar-width: thin; }
.dx-side-g { margin-bottom: 18px; }
.dx-side-l { font-size: 11.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); padding: 0 12px 8px; }
.dx-side a { display: block; padding: 6px 12px; border-radius: 10px; color: var(--dim) !important; font-size: 14px; line-height: 1.35; }
.dx-side a:hover { color: var(--ink) !important; background: rgba(255, 255, 255, 0.03); }
.dx-side a.on { color: #fff !important; background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(92, 108, 255, 0.3); font-weight: 550; }
.dx-menu { display: none; }

.dx-main { min-width: 0; padding: 40px 0 60px; }
.dx-article { max-width: 760px; }
.dx-aside { position: sticky; top: 61px; align-self: start; padding: 44px 0 40px; max-height: calc(100vh - 61px); overflow-y: auto; }
.dx-toc a { display: block; padding: 4px 0 4px 12px; border-left: 1px solid var(--line); color: var(--faint) !important; font-size: 13px; line-height: 1.4; }
.dx-toc a.sub { padding-left: 24px; }
.dx-toc a:hover { color: var(--ink) !important; }
.dx-toc a.on { color: var(--blue2) !important; border-left-color: var(--accent); }

/* The page */
.dx-eyebrow { color: var(--blue2); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 10px; }
.dx-article h1 { font-size: 2.5rem; line-height: 1.1; font-weight: 680; letter-spacing: -0.04em; margin: 0 0 14px; color: #fff; }
.dx-lead { font-size: 18px; line-height: 1.55; color: var(--dim); margin: 0 0 18px; }
.dx-tools { display: flex; gap: 8px; margin-bottom: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.dx .dx-pill { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--dim) !important; font: 500 13px var(--sans); cursor: pointer; }
.dx .dx-pill:hover { border-color: var(--line3); color: var(--ink) !important; }

.dx-article p, .dx-article li { line-height: 1.7; color: #c9cbd3; }
.dx-article p { margin: 0 0 16px; }
.dx-article strong { color: #fff; font-weight: 620; }
.dx-article h2 { font-size: 1.55rem; letter-spacing: -0.025em; font-weight: 650; color: #fff; margin: 46px 0 14px; scroll-margin-top: 80px; }
.dx-article h3 { font-size: 1.15rem; letter-spacing: -0.015em; font-weight: 620; color: #fff; margin: 30px 0 10px; scroll-margin-top: 80px; }
.dx-article h4 { font-size: 1rem; font-weight: 620; color: #fff; margin: 22px 0 8px; scroll-margin-top: 80px; }
.dx-anchor { margin-left: 8px; color: var(--faint) !important; opacity: 0; font-weight: 400; transition: opacity 0.15s; }
.dx-article :is(h2, h3, h4):hover .dx-anchor { opacity: 1; }
.dx-article ul, .dx-article ol { margin: 0 0 18px; padding-left: 22px; }
.dx-article li { margin: 5px 0; }
.dx-article li::marker { color: var(--faint); }
.dx-article :not(pre) > code { font: 0.86em var(--mono); padding: 2px 6px; border-radius: 6px; background: rgba(92, 108, 255, 0.1); border: 1px solid rgba(92, 108, 255, 0.18); color: #d4d8ff; overflow-wrap: anywhere; }
.dx-article a { color: var(--blue2); border-bottom: 1px solid rgba(165, 176, 255, 0.3); }
.dx-article a:hover { color: #fff; border-bottom-color: #fff; }
.dx-article blockquote { margin: 0 0 18px; padding: 2px 0 2px 16px; border-left: 2px solid var(--line3); color: var(--dim); }

/* Code */
.dx-code { margin: 0 0 20px; border: 1px solid var(--line2); border-radius: 14px; background: #08090d; overflow: hidden; }
.dx-code-h { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--line); background: var(--card); font-size: 12px; color: var(--faint); font-weight: 600; letter-spacing: 0.03em; }
.dx-copy { height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--dim); font: 500 12px var(--sans); cursor: pointer; }
.dx-copy:hover { color: var(--ink); border-color: var(--line3); }
.dx-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; font: 13px/1.65 var(--mono); color: #d9dbe3; }
.tk-c { color: #6b7080; font-style: italic; }
.tk-s { color: #8fdcb8; }
.tk-p { color: #a5b0ff; }
.tk-n { color: #f0b36a; }
.tk-k { color: #c39bff; }

/* Tables */
.dx-table { margin: 0 0 20px; overflow-x: auto; border: 1px solid var(--line2); border-radius: 14px; }
.dx-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dx-table th { text-align: left; font-size: 12px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); background: var(--card); padding: 10px 14px; border-bottom: 1px solid var(--line2); }
.dx-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); color: #c9cbd3; line-height: 1.55; vertical-align: top; }
.dx-table tr:last-child td { border-bottom: 0; }

/* Callouts */
.dx-callout { margin: 0 0 20px; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(92, 108, 255, 0.3); background: rgba(92, 108, 255, 0.08); }
.dx-callout > b { display: block; color: #fff; font-size: 14px; margin-bottom: 4px; }
.dx-callout p:last-child, .dx-callout ul:last-child { margin-bottom: 0; }
.dx-callout.tip { border-color: rgba(79, 209, 165, 0.3); background: rgba(79, 209, 165, 0.07); }
.dx-callout.warning { border-color: rgba(232, 168, 73, 0.35); background: rgba(232, 168, 73, 0.07); }

/* Cards */
.dx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
.dx .dx-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 18px; border-radius: var(--r); border: 1px solid var(--line2); background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 120px), var(--card); color: var(--ink); transition: border-color 0.15s, transform 0.15s; }
.dx .dx-card:hover { border-color: rgba(92, 108, 255, 0.55); transform: translateY(-1px); color: var(--ink); }
.dx-card b { font-size: 15px; font-weight: 620; color: #fff; padding-right: 20px; }
.dx-card span { font-size: 13.5px; line-height: 1.5; color: var(--dim); }
.dx-card i { position: absolute; top: 16px; right: 16px; font-style: normal; color: var(--faint); transition: color 0.15s, transform 0.15s; }
.dx-card:hover i { color: var(--blue2); transform: translateX(2px); }

/* Steps */
.dx-steps { list-style: none; counter-reset: step; padding: 0 !important; margin: 0 0 24px !important; }
.dx-steps > li { position: relative; counter-increment: step; padding: 0 0 6px 48px; margin: 0 !important; }
.dx-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid rgba(92, 108, 255, 0.4); color: #fff; font-size: 13px; font-weight: 650; }
.dx-steps > li::after { content: ''; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 1px; background: var(--line2); }
.dx-steps > li:last-child::after { display: none; }
.dx-steps > li > h3 { margin: 3px 0 8px !important; font-size: 1.12rem !important; }

/* Pager and foot */
.dx-pager { max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 56px; }
.dx-pager a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--card); }
.dx-pager a:hover { border-color: rgba(92, 108, 255, 0.55); }
.dx-pager a.next { text-align: right; grid-column: 2; }
.dx-pager span { font-size: 12.5px; color: var(--faint); }
.dx-pager b { color: #fff; font-weight: 600; }
.dx-foot { max-width: 760px; display: flex; flex-wrap: wrap; gap: 20px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }
.dx-foot span { margin-right: auto; }
.dx-foot a { color: var(--dim) !important; }

/* Narrower screens */
@media (max-width: 1180px) {
  .dx-body { grid-template-columns: 240px minmax(0, 1fr); }
  .dx-aside { display: none; }
  .dx-top-links { display: none; }
}
@media (max-width: 860px) {
  .dx { font-size: 15px; }
  .dx-top-in { padding: 10px 16px; gap: 12px; }
  .dx .dx-top-docs { display: none; }
  .dx-search-btn { width: auto; flex: 1; }
  .dx-search-btn kbd { display: none; }
  .dx-body { display: block; padding: 0 18px; }
  .dx-menu { display: inline-flex; gap: 8px; align-items: center; margin: 14px 0 0; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--ink); font: 500 14px var(--sans); cursor: pointer; }
  .dx-side { display: none; position: static; max-height: none; padding: 16px 0 8px; border-bottom: 1px solid var(--line); }
  .dx-side.open { display: block; }
  .dx-main { padding-top: 22px; }
  .dx-article h1 { font-size: 2rem; }
  .dx-lead { font-size: 16.5px; }
  .dx-pager, .dx-cards { grid-template-columns: 1fr; }
  .dx-pager a.next { grid-column: 1; }
}
@media (max-width: 480px) {
  .dx .dx-btn { padding: 0 14px; }
  .dx-top .logo span:last-child small { display: none; }
}

.flow-docs { --accent: #7c84ff; --blue2: #b6bdff; }
.flow-docs [hidden] { display: none !important; }
.flow-docs :is(a, button, input, summary):focus-visible { outline: 2px solid #b6bdff; outline-offset: 3px; }
.flow-docs .dx-top-in { min-height: 68px; gap: 20px; }
.flow-docs-brand { display: inline-flex; align-items: center; gap: 10px; color: #b6bdff !important; font: italic 28px Georgia, serif; }
.flow-docs-brand span { font: 600 17px var(--sans); letter-spacing: -.04em; color: #eeeef5; }
.flow-docs-ftw { white-space: nowrap; font-size: 12px; color: #b3b8cb !important; }
.flow-docs-skip { position: fixed; top: 10px; left: 16px; padding: 12px 18px; transform: translateY(-180%); background: #efefff; color: #090b12 !important; border-radius: 6px; z-index: 100; }
.flow-docs-skip:focus { transform: none; }
.flow-docs .dx-side { top: 69px; max-height: calc(100vh - 69px); }
.flow-docs .dx-aside { top: 69px; max-height: calc(100vh - 69px); }
.flow-docs .dx-main:focus { outline: none; }
.flow-docs .dx-article h1 { font-size: clamp(30px, 3.4vw, 42px); }
.flow-docs .dx-article :is(h2, h3, h4) { scroll-margin-top: 90px; }
.flow-docs .dx-anchor:focus { opacity: 1; }
.flow-docs-platform { border-top: 1px solid var(--line2); padding-top: 20px; margin-top: 26px; }
.flow-docs .dx-side-l { color: #9099b2; }
.flow-docs .dx-code pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.flow-docs .dx-code-h { height: 42px; }
.flow-docs .dx-copy { min-height: 30px; }
.flow-docs .dx-tools { flex-wrap: wrap; }
.flow-docs .dx-pill { min-height: 36px; height: auto; }
.flow-docs .dx-toc a { color: #919ab2 !important; }
.flow-docs-mobile { display: none; }
.flow-docs-search { position: relative; width: min(360px, 40vw); }
.flow-docs-search > label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.flow-docs-search input { width: 100%; min-height: 38px; border: 1px solid #343a50; border-radius: 7px; padding: 8px 12px; font: 13px var(--sans); color: #e6e9fa; background: #0e121d; }
.flow-docs-search input::placeholder { color: #929cb7; }
.flow-docs-results { position: absolute; top: calc(100% + 10px); left: 0; width: min(540px, 85vw); max-height: min(65vh, 560px); overflow-y: auto; padding: 12px; background: #0f1421; border: 1px solid #353e5d; border-radius: 10px; box-shadow: 0 18px 60px #000a; }
.flow-docs-results p { margin: 0 0 8px; padding: 0 5px; color: #a4afca; font-size: 12px; }
.flow-docs-results ul { list-style: none; padding: 0; margin: 0; }
.flow-docs-results a { display: block; padding: 12px 8px; border-radius: 5px; color: #e1e7fc; }
.flow-docs-results a:hover { background: #202b47; }
.flow-docs-results b { display: block; font-size: 13px; font-weight: 550; }
.flow-docs-results span { display: block; color: #a5b1cf; font-size: 12px; margin-top: 5px; line-height: 1.6; }
.flow-docs-results button { min-height: 36px; padding: 8px 14px; border: 1px solid #59658c; border-radius: 5px; background: #202a43; color: #dbe3fc; cursor: pointer; }
@media (max-width: 860px) {
  .flow-docs .dx-top-in { flex-wrap: wrap; gap: 10px 14px; padding: 12px 18px; }
  .flow-docs .dx-grow { display: none; }
  .flow-docs-ftw { margin-left: auto; }
  .flow-docs-search { width: 100%; order: 3; }
  .flow-docs-results { width: 100%; max-height: 55vh; }
  .flow-docs-mobile { display: block; margin-top: 18px; border: 1px solid #30384d; border-radius: 8px; background: #0d111b; }
  .flow-docs-mobile summary { cursor: pointer; padding: 12px 14px; color: #d4dbf2; font-size: 13px; }
  .flow-docs-mobile summary span { float: right; }
  .flow-docs-mobile nav { padding: 12px 6px 2px; }
  .flow-docs-mobile nav a { display: block; padding: 9px 12px; font-size: 13px; color: #aeb9d6; border-radius: 5px; }
  .flow-docs-mobile nav a[aria-current] { background: #232b49; color: #e3e8ff; }
  .flow-docs .dx-side { display: none; }
  .flow-docs .dx-article :is(h2, h3, h4) { scroll-margin-top: 140px; }
  .flow-docs .dx-pager { margin-top: 36px; }
}