/* =============================================================================
   Blindspot terminal, the aperture system.

   The mark is concentric rings with a wedge cut out. That is the whole design
   language: panels are shapes with a piece missing, section heads are lit arcs
   rather than rules, and waiting is a sweep rather than a spinner. Orange carries
   the brand, Base blue is atmosphere and the privacy semantic only, green and red
   are reserved for pnl and risk.

   Authored at 390px first. Every wider rule adds, never corrects. Class names are
   unchanged on purpose: this is a visual rewrite, not a refactor of behaviour.
   ============================================================================= */

:root {
  --rail: 78px;
  --top: 56px;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;

  /* The wedge, expressed as a corner cut. One value so every panel agrees. */
  --cut: 18px;

  --e1: linear-gradient(168deg, #12121c, #0b0b12);
  --shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.95);
}

body.app {
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(249, 115, 22, 0.08), transparent 62%),
    radial-gradient(900px 520px at 6% 108%, rgba(0, 82, 255, 0.07), transparent 62%),
    var(--void);
  min-height: 100svh;
  overscroll-behavior-y: none;
}

/* The ring field: the mark's geometry, enormous and almost invisible, so the
   product sits inside the shape it is named after. */
body.app::before {
  content: "";
  position: fixed;
  top: -34vmax;
  right: -30vmax;
  width: 88vmax;
  height: 88vmax;
  pointer-events: none;
  z-index: 0;
  background: repeating-radial-gradient(circle at 50% 50%,
    rgba(249, 115, 22, 0.05) 0 1px, transparent 1px 46px);
  mask-image: radial-gradient(closest-side, #000 40%, transparent 78%);
}

.shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100svh;
  min-width: 0;
}

/* ------------------------------------------------------------------ topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--top);
  padding: 0 14px;
  background: rgba(7, 7, 11, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
}

/* A hairline that reads as part of a ring passing through, not a border. */
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.5) 20%, rgba(0, 82, 255, 0.3) 62%, transparent);
}

.topbar__brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.topbar__brand img { width: 24px; height: 24px; }

.topbar__brand b {
  font-family: var(--display);
  font-variation-settings: "wdth" 122;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sections { display: flex; gap: 4px; flex: none; }

.seclink {
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--faint);
  padding: 8px 11px;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}

.seclink:hover { color: var(--muted); }
.seclink.on { color: var(--org); background: rgba(249, 115, 22, 0.1); }

.ticker {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ticker__row { display: flex; gap: 20px; width: max-content; animation: ticker 68s linear infinite; }
.ticker:hover .ticker__row { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

.ticker__item { display: flex; align-items: baseline; gap: 6px; font-family: var(--data); font-size: 11px; white-space: nowrap; cursor: pointer; }
.ticker__item b { color: var(--ink); font-weight: 500; }

.pulse {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--data);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

.pulse i { width: 5px; height: 5px; border-radius: 50%; background: var(--up); animation: beat 2.4s ease-in-out infinite; }
.pulse.down i { background: var(--down); animation: none; }
@keyframes beat { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* --------------------------------------------------------------------- nav */

/* The active tab sits inside a lit aperture rather than under a bar. */

.main { padding: 14px 13px 96px; min-width: 0; overflow-x: clip; }

/* ------------------------------------------------------------------ panels */

/* The signature: every panel is the mark's shape, a rectangle with a wedge taken
   out of one corner. */
.panel {
  position: relative;
  padding: 17px 15px;
  min-width: 0;
  background: var(--e1);
  border-radius: var(--r-lg);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  box-shadow: var(--shadow);
}

/* The outline is an inset ring so it follows the cut, which a border cannot. */
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  clip-path: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
}

.panel + .panel { margin-top: 12px; }

.panel__head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 13px;
  padding-bottom: 11px;
}

.panel__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.5), rgba(30, 30, 43, 0.9) 42%, transparent);
}

.panel__head h2 {
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.panel__head .sub {
  font-family: var(--data);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
}

.grid2 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.grid3 { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.grid4 { display: grid; gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.grid2 > *, .grid3 > *, .grid4 > * { min-width: 0; }

/* ------------------------------------------------------------------- stats */

.stat {
  position: relative;
  padding: 12px 13px;
  min-width: 0;
  background: rgba(255, 255, 255, 0.022);
  border-radius: var(--r);
  overflow: hidden;
}

.stat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line-soft);
  pointer-events: none;
}

.stat i {
  font-style: normal;
  display: block;
  font-family: var(--data);
  font-size: 8.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
}

.stat b {
  display: block;
  margin-top: 5px;
  font-family: var(--data);
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

.stat small { display: block; margin-top: 3px; font-family: var(--data); font-size: 10px; color: var(--muted); }

.stat.hero {
  background:
    radial-gradient(380px circle at 6% 0%, rgba(249, 115, 22, 0.16), transparent 64%),
    rgba(255, 255, 255, 0.022);
}

.stat.hero::before { box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.3); }

.stat.hero b {
  font-family: var(--display);
  font-variation-settings: "wdth" 110;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffdcc0, var(--org) 84%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------------ inputs */

.field { display: flex; gap: 8px; flex-wrap: wrap; }

.field input,
.field select {
  flex: 1 1 200px;
  min-width: 0;
  font: inherit;
  font-family: var(--data);
  /* 16px minimum: iOS zooms the page when a focused input is smaller, and the fix
     is never maximum-scale, which takes pinch zoom away from everyone. */
  font-size: 16px;
  min-height: 46px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 13px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--org);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.14);
}

.field input::placeholder { color: var(--faint); }
input, select, textarea { font-size: 16px; }

.btn {
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  border: 0;
  min-height: 46px;
  border-radius: var(--r);
  padding: 12px 20px;
  color: #150802;
  background: linear-gradient(180deg, var(--org-2), var(--org));
  box-shadow: 0 10px 24px -14px rgba(249, 115, 22, 0.95);
  transition: transform 0.15s ease, filter 0.2s ease, opacity 0.2s ease;
  flex: none;
}

.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(0.985); }
.btn[disabled] { opacity: 0.5; cursor: default; transform: none; filter: none; }

.btn.ghost {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  box-shadow: none;
}

.btn.ghost:hover { border-color: var(--org); background: rgba(249, 115, 22, 0.07); }
.btn.sm { min-height: 40px; padding: 9px 14px; font-size: 13px; }
.btn.sell { background: linear-gradient(180deg, #fb7185, var(--down)); box-shadow: 0 10px 24px -14px rgba(239, 68, 68, 0.95); }

/* ------------------------------------------------------------------- chips */

.chips { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  font-family: var(--data);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.chip:hover { color: var(--ink); border-color: var(--muted); }
.chip.on { border-color: transparent; color: #150802; background: linear-gradient(180deg, var(--org-2), var(--org)); font-weight: 600; }

.tag {
  display: inline-block;
  font-family: var(--data);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid currentColor;
}

.tag.long, .up { color: var(--up); }
.tag.short, .down { color: var(--down); }
.tag.warn, .warn { color: var(--org); }
.tag.info { color: var(--blue-lift); }
.dim { color: var(--faint); }

/* ------------------------------------------------------------------ tables */

.tablewrap {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--data);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 560px;
}

table.data th {
  position: sticky;
  top: 0;
  text-align: right;
  font-weight: 500;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 9px 10px;
  background: #0f0f18;
  white-space: nowrap;
}

table.data td {
  text-align: right;
  padding: 11px 10px;
  border-top: 1px solid var(--line-soft);
  color: #c4c4d6;
  white-space: nowrap;
}

table.data th:first-child, table.data td:first-child { text-align: left; }
table.data tbody tr { transition: background 0.14s ease; }
table.data tbody tr:hover { background: rgba(249, 115, 22, 0.05); }
table.data td.key { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------- exposure */

.gauge { display: grid; place-items: center; padding: 4px 0; perspective: 900px; }

.gauge__ring {
  position: relative;
  width: 172px;
  height: 172px;
  transform: rotateX(10deg);
  transform-style: preserve-3d;
  animation: gauge-in 0.75s cubic-bezier(0.2, 0.85, 0.3, 1) both;
}

@keyframes gauge-in {
  from { opacity: 0; transform: rotateX(34deg) translateY(14px) scale(0.94); }
  to { opacity: 1; transform: rotateX(10deg); }
}

.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge__track { fill: none; stroke: rgba(255, 255, 255, 0.05); stroke-width: 9; }

.gauge__val {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.2, 0.85, 0.3, 1);
  filter: drop-shadow(0 0 14px currentColor);
}

.gauge__mid { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; transform: translateZ(30px); }

.gauge__mid b {
  font-family: var(--display);
  font-variation-settings: "wdth" 108;
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.gauge__mid span { margin-top: 4px; font-family: var(--data); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

.factors { display: grid; gap: 7px; margin-top: 13px; }

.factor {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: #bcbccd;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.022);
}

.factor b { font-family: var(--data); font-size: 12px; color: var(--org-2); }

.expo { display: grid; gap: 14px; align-items: center; }

.expo__score {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  padding: 20px;
  border-radius: var(--r-lg);
  background: radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.1), transparent 70%), rgba(255, 255, 255, 0.022);
}

.expo__score b { font-family: var(--display); font-variation-settings: "wdth" 108; font-weight: 700; font-size: 52px; line-height: 1; letter-spacing: -0.04em; }
.expo__score span { font-family: var(--data); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.expo__factors { display: grid; gap: 7px; }

/* ---------------------------------------------------------------- cascade */

.ladder { display: grid; gap: 2px; margin-top: 4px; min-width: 0; }

.rung {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 74px;
  gap: 8px;
  align-items: center;
  font-family: var(--data);
  font-size: 10.5px;
  min-width: 0;
}

.rung__px { color: var(--muted); text-align: right; }
.rung__amt { color: var(--faint); text-align: right; }
.rung__bar { height: 14px; border-radius: 3px; background: rgba(255, 255, 255, 0.03); overflow: hidden; }

.rung__fill {
  height: 100%;
  border-radius: 3px;
  transform-origin: left center;
  animation: rung 0.65s cubic-bezier(0.2, 0.85, 0.3, 1) both;
}

@keyframes rung { from { transform: scaleX(0); } }
.rung__fill.long { background: linear-gradient(90deg, var(--up), rgba(34, 197, 94, 0.25)); }
.rung__fill.short { background: linear-gradient(90deg, var(--down), rgba(239, 68, 68, 0.25)); }
.rung.mark .rung__bar { box-shadow: inset 0 0 0 1px var(--org); }

.rung.mark::after {
  content: "mark";
  position: absolute;
  right: 0;
  top: -9px;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--org);
}

/* ------------------------------------------------------------------ ghost */

.flowsteps { display: grid; gap: 9px; }

.flowstep {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.022);
  transition: background 0.25s ease;
}

.flowstep .n {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--data);
  font-size: 10.5px;
  color: var(--faint);
  border: 1px solid var(--line);
}

.flowstep.on .n { color: #150802; border-color: transparent; background: linear-gradient(180deg, var(--org-2), var(--org)); }
.flowstep.done .n { color: var(--up); border-color: var(--up); }
.flowstep b { display: block; font-size: 14px; }
.flowstep p { margin-top: 4px; font-size: 13px; color: var(--muted); }

.deposit {
  display: grid;
  gap: 11px;
  justify-items: center;
  padding: 16px;
  border-radius: var(--r);
  background: rgba(249, 115, 22, 0.05);
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.3);
}

.deposit canvas { border-radius: 8px; background: #fff; padding: 8px; }
.deposit code { font-family: var(--data); font-size: 11px; color: var(--org-2); word-break: break-all; text-align: center; }

/* Blue is the privacy semantic. It never takes a primary role. */
.honesty {
  margin-top: 12px;
  padding: 13px 14px;
  border-radius: var(--r);
  background: linear-gradient(100deg, rgba(0, 82, 255, 0.11), transparent 62%);
  box-shadow: inset 2px 0 0 var(--blue-lift);
  font-size: 13px;
  color: #b4b4c7;
}

.honesty b { color: var(--ink); }

/* ----------------------------------------------------------------- picker */

.picker__row { align-items: stretch; }

.picker {
  flex: 1 1 210px;
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 13px;
  transition: border-color 0.18s ease;
}

.picker:hover { border-color: var(--muted); }
.picker__sym { font-family: var(--data); font-size: 15px; font-weight: 500; }
.picker__chain { font-family: var(--data); font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__caret { color: var(--muted); font-size: 11px; }

.picker__count { margin-top: 10px; font-family: var(--data); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.picker__list { margin-top: 8px; display: grid; gap: 3px; max-height: 46svh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

.picker__opt {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  align-items: baseline;
  gap: 10px;
  min-height: 46px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  padding: 10px 11px;
  transition: background 0.14s ease;
}

.picker__opt:hover { background: rgba(249, 115, 22, 0.08); }
.picker__opt.on { background: rgba(249, 115, 22, 0.14); box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.45); }
.picker__opt b { font-family: var(--data); font-size: 14px; font-weight: 500; }
.picker__opt span { font-family: var(--data); font-size: 11px; color: var(--faint); }
.picker__opt i { font-style: normal; font-family: var(--data); font-size: 11px; color: var(--muted); }

/* ----------------------------------------------------------------- venues */

.venuebar { display: flex; gap: 6px; margin-bottom: 11px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.venuebar::-webkit-scrollbar { display: none; }

.venuechip {
  flex: none;
  font-family: var(--data);
  font-size: 10.5px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.venuechip.on { border-color: transparent; color: #150802; background: linear-gradient(180deg, var(--org-2), var(--org)); font-weight: 600; }
.venuechip.soon { color: var(--faint); border-style: dashed; }
.venuechip.soon:hover { color: var(--blue-lift); border-color: var(--blue-lift); }
.venuechip.soon::after { content: "soon"; margin-left: 7px; font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; }

/* ------------------------------------------------------------------ trade */

.tradegrid { display: grid; gap: 12px; margin-top: 12px; min-width: 0; }
.tradegrid > * { min-width: 0; }
.chart { height: 320px; min-height: 320px; min-width: 0; }

.book { display: grid; gap: 1px; font-family: var(--data); font-size: 11px; min-width: 0; }

.bookrow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 3px 8px;
  align-items: center;
  isolation: isolate;
}

.bookrow__bar { position: absolute; inset: 0 auto 0 0; z-index: -1; border-radius: 2px; }
.bookrow__bar.bid { background: rgba(34, 197, 94, 0.16); }
.bookrow__bar.ask { background: rgba(239, 68, 68, 0.16); }
.bookrow__px.bid { color: var(--up); }
.bookrow__px.ask { color: var(--down); }
.bookrow__sz { color: var(--muted); text-align: right; }

.book__mid {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 8px;
  margin: 3px 0;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
}

.book__mid b { font-size: 16px; color: var(--ink); }
.book__mid span { font-size: 10px; color: var(--faint); }

.tape { display: grid; gap: 1px; font-family: var(--data); font-size: 11px; }

.taperow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  padding: 3px 8px;
  border-radius: 2px;
}

.taperow.bid { color: var(--up); background: rgba(34, 197, 94, 0.05); }
.taperow.ask { color: var(--down); background: rgba(239, 68, 68, 0.05); }
.taperow span:last-child { color: var(--faint); }

.ticket { display: grid; gap: 11px; min-width: 0; }
.ticket__sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ticket__sides .chip { justify-content: center; min-height: 46px; font-size: 13px; }
.ticket__sides .chip.side-buy.on { background: linear-gradient(180deg, #4ade80, var(--up)); color: #04170b; }
.ticket__sides .chip.side-sell.on { background: linear-gradient(180deg, #fb7185, var(--down)); color: #1a0406; }

.ticket__label { display: block; font-family: var(--data); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint); }
.ticket__check { display: flex; align-items: center; gap: 10px; min-height: 42px; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.ticket__check input { accent-color: var(--org); width: 19px; height: 19px; }
.slider { width: 100%; accent-color: var(--org); height: 30px; }

.preview { display: grid; gap: 7px; padding: 12px; border-radius: var(--r); background: rgba(0, 0, 0, 0.3); }
.preview__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.preview__row span { color: var(--faint); }
.preview__row b { font-family: var(--data); font-weight: 500; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------- hub */

.hub { padding: 6px 0 20px; }

.hub h1 {
  font-family: var(--display);
  font-variation-settings: "wdth" 114;
  font-weight: 700;
  /* 26px on a phone per the standing rule, not a desktop headline shrunk down. */
  font-size: clamp(26px, 7.4vw, 46px);
  letter-spacing: -0.035em;
  line-height: 1.03;
  animation: rise 0.6s cubic-bezier(0.2, 0.85, 0.3, 1) both;
}

.hub__lede { margin-top: 12px; max-width: 52ch; color: var(--muted); font-size: 15.5px; }
.hub__grid { display: grid; gap: 12px; margin-top: 22px; perspective: 1000px; }

.hub__card {
  position: relative;
  display: grid;
  gap: 7px;
  text-decoration: none;
  color: var(--ink);
  padding: 22px 20px 20px;
  background: var(--e1);
  border-radius: var(--r-lg);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
  animation: rise 0.7s cubic-bezier(0.2, 0.85, 0.3, 1) both;
}

.hub__card::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}

.hub__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at 18% 0%, rgba(249, 115, 22, 0.15), transparent 62%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.hub__card:nth-child(2) { animation-delay: 80ms; }
.hub__card:hover { transform: translateY(-2px) rotateX(2deg); }
.hub__card:hover::before { opacity: 1; }
.hub__card b { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 700; font-size: 24px; letter-spacing: -0.025em; }
.hub__card p { color: var(--muted); font-size: 14px; max-width: 44ch; }
.hub__go { margin-top: 5px; font-family: var(--data); font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--org-2); }
.hub__card.soon .hub__go { color: var(--blue-lift); }
.hub__card.soon .hub__go::after { content: " (being built)"; color: var(--faint); }

@keyframes rise { from { opacity: 0; transform: perspective(900px) rotateX(-8deg) translateY(16px); } }

/* ------------------------------------------------------------------- misc */

/* Waiting looks like the mark being scanned, not a generic shimmer. */
.skeleton {
  position: relative;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.035);
  height: 14px;
  overflow: hidden;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 32%, rgba(249, 115, 22, 0.16) 50%, transparent 68%);
  transform: translateX(-100%);
  animation: sweep 1.5s ease-in-out infinite;
}

@keyframes sweep { to { transform: translateX(100%); } }

.empty { text-align: center; padding: 32px 16px; color: var(--faint); font-size: 14px; }
.empty b { display: block; color: var(--muted); font-size: 15px; margin-bottom: 5px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(74px + env(safe-area-inset-bottom));
  transform: translate(-50%, 18px);
  /* Toasts carry the result of actions launched from account, funding and
     trading dialogs. They must remain visible above every overlay, including
     the Telegram sign-in layer. Pointer events stay disabled so this never
     interferes with a confirmation button below it. */
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--r);
  background: rgba(24, 24, 36, 0.98);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
  backdrop-filter: blur(10px);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
  max-width: calc(100vw - 28px);
}

.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.err { box-shadow: inset 0 0 0 1px var(--down), var(--shadow); }
.toast.ok { box-shadow: inset 0 0 0 1px var(--up), var(--shadow); }

/* ------------------------------------------------------------------ modal */

.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: end center; }
.modal[hidden] { display: none; }
.modal__back { position: absolute; inset: 0; background: rgba(3, 3, 6, 0.76); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.22s ease; }
.modal.open .modal__back { opacity: 1; }

/* A sheet from the thumb on a phone, a card in the middle on a desktop. */
.modal__card {
  position: relative;
  width: 100%;
  max-height: 88svh;
  overflow-y: auto;
  background: var(--e1);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
  box-shadow: inset 0 0 0 1px var(--line), 0 -30px 60px -30px rgba(0, 0, 0, 0.95);
  transform: translateY(16%);
  opacity: 0;
  transition: transform 0.34s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.2s ease;
}

.modal.open .modal__card { transform: none; opacity: 1; }

.modal__card::before {
  content: "";
  display: block;
  width: 38px;
  height: 4px;
  margin: -8px auto 16px;
  border-radius: 999px;
  background: var(--line);
}

.modal__card h3 { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.modal__card p { margin-top: 9px; color: var(--muted); font-size: 14px; }

.modal__x {
  position: absolute;
  top: 14px;
  right: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  cursor: pointer;
}

.modal__x:hover { color: var(--ink); background: rgba(255, 255, 255, 0.09); }
.modal__x svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------- install bar */

.installbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 15px;
  border-radius: var(--r-lg);
  background: var(--e1);
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.35), var(--shadow);
  font-size: 14px;
  transform: translateY(150%);
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.installbar.on { transform: none; }
.installbar__actions { display: flex; gap: 8px; }

/* -------------------------------------------------------- view transition */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.16s ease-in both; }
::view-transition-new(root) { animation: vt-in 0.32s cubic-bezier(0.2, 0.85, 0.3, 1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: perspective(1200px) rotateX(-2.5deg) translateY(10px); } }

/* ------------------------------------------------------------ wider views */

@media (min-width: 900px) {
  :root { --cut: 22px; }

  .shell { grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: var(--top) 1fr; }
  .topbar { grid-column: 1 / -1; padding: 0 20px; }

  .nav {
    position: sticky;
    top: var(--top);
    height: calc(100svh - var(--top));
    grid-auto-flow: row;
    align-content: start;
    gap: 3px;
    padding: 12px 9px;
    border-top: 0;
    border-right: 1px solid var(--line-soft);
    background: transparent;
    backdrop-filter: none;
  }

  
  /* 🚨 Explicit placement. The hub hides the nav, and with the rail gone grid
     auto-placement drops main into the 78px rail column, squeezing every page
     that has no nav down to a sliver. */
  .main { grid-column: 2; padding: 20px 24px 40px; }
  .grid2 { grid-template-columns: 350px minmax(0, 1fr); }
  .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .expo { grid-template-columns: 180px minmax(0, 1fr); }
  .hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .modal { place-items: center; padding: 20px; }

  .modal__card {
    max-width: 470px;
    border-radius: var(--r-lg);
    padding-bottom: 22px;
    transform: perspective(1200px) rotateX(-8deg) translateY(16px) scale(0.97);
  }

  .modal__card::before { display: none; }
  .toast { bottom: 24px; }
  .installbar { left: 22px; right: auto; bottom: 22px; max-width: 360px; }
}

/* =============================================================================
   Signal deck — terminal shell redesign

   The product used to read like a collection of equal cards. The new shell is a
   trading desk: identity and network context stay fixed, live data is a focused
   ribbon, and every surface has an unambiguous place in the rail.
   ============================================================================= */

body.app {
  background:
    radial-gradient(960px 510px at 110% -12%, rgba(255, 119, 31, .16), transparent 62%),
    radial-gradient(780px 500px at -8% 108%, rgba(89, 89, 255, .13), transparent 64%),
    linear-gradient(130deg, #08090e 0%, #0d0e17 48%, #07080d 100%);
}
body.app::before {
  top: -40vmax;
  right: -36vmax;
  opacity: .76;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(255, 153, 91, .09) 0 1px, transparent 1px 44px);
}
body.app::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(135deg, #000, transparent 72%);
}
.topbar {
  height: 66px;
  padding: 0 18px;
  gap: 18px;
  background: rgba(9, 10, 16, .88);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar::after { height: 2px; background: linear-gradient(90deg, transparent, rgba(255,128,48,.8) 22%, rgba(118,102,255,.45) 72%, transparent); }
.topbar__identity, .topbar__state { display: flex; align-items: center; gap: 14px; flex: none; }
.topbar__brand { gap: 10px; }
.topbar__brand img { width: 30px; height: 30px; filter: drop-shadow(0 0 12px rgba(249,115,22,.36)); }
.topbar__brand span { display: grid; gap: 1px; }
.topbar__brand b { font-size: 12px; letter-spacing: .18em; }
.topbar__brand i { font-family: var(--data); color: var(--faint); font-size: 8px; font-style: normal; letter-spacing: .16em; text-transform: uppercase; }
.sections { gap: 2px; padding-left: 8px; border-left: 1px solid var(--line); }
.seclink { border-radius: 6px; padding: 8px 10px; }
.seclink.on { color: #ffd4ba; background: rgba(249,115,22,.14); }
.ticker { align-self: stretch; display: flex; align-items: center; border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); padding: 0 18px; }
.ticker__row { gap: 26px; }
.ticker__item { font-size: 10px; letter-spacing: .04em; }
.ticker__item b { color: #f2f2fa; }
.network { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 5px; font-family: var(--data); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.network i { grid-row: 1 / span 2; width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 4px rgba(34,197,94,.09); }
.network b { color: var(--ink); font-size: 9px; }
.network span { color: var(--faint); font-size: 8px; }
.network--test i { background: #9a8cff; box-shadow: 0 0 0 4px rgba(154,140,255,.1); }
.pulse { border: 1px solid var(--line-soft); border-radius: 6px; background: rgba(255,255,255,.025); }
.main { max-width: 1740px; width: 100%; margin: 0 auto; padding: 22px 22px 108px; }
.panel { border-radius: 10px; clip-path: none; background: linear-gradient(145deg, rgba(24,25,38,.94), rgba(10,11,18,.96)); box-shadow: 0 20px 58px -42px #000; }
.panel::after { clip-path: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.panel__head::after { background: linear-gradient(90deg, rgba(255,136,61,.7), rgba(124,105,255,.2) 46%, transparent 78%); }
.panel__head h2 { letter-spacing: -.035em; }
.stat { border-radius: 8px; background: rgba(255,255,255,.026); }
.stat.hero { background: radial-gradient(390px circle at 3% 0%, rgba(249,115,22,.19), transparent 64%), rgba(255,255,255,.028); }
@media (min-width: 900px) {
  .shell { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: 66px minmax(0, 1fr); }
  .topbar { grid-column: 1 / -1; }
  .nav { grid-column: 1; grid-row: 2; top: 66px; height: calc(100svh - 66px); padding: 16px 11px; background: rgba(9,10,16,.38); border-right-color: rgba(255,255,255,.065); }
  .tab { min-height: 64px; border-radius: 8px; }
  .tab.on { color: #ffd4ba; background: linear-gradient(145deg, rgba(249,115,22,.17), rgba(249,115,22,.055)); }
  .main { grid-column: 2; grid-row: 2; }
}
@media (max-width: 899px) {
  .topbar { height: 58px; padding: 0 12px; gap: 10px; }
  .topbar__identity { min-width: 0; }
  .topbar__brand i, .sections, .network span, .network--test, .ticker { display: none; }
  .topbar__brand b { font-size: 11px; }
  .topbar__state { margin-left: auto; gap: 8px; }
  .network { grid-template-columns: auto auto; }
  .pulse { padding: 5px 7px; font-size: 8px; }
  .main { padding: 13px 12px 96px; }
}

@media (min-width: 1140px) {
  .tradegrid {
    grid-template-columns: minmax(0, 1fr) 336px;
    grid-template-areas: "chart ticket" "book ticket" "tape ticket";
    align-items: start;
  }
  .tradegrid > *:nth-child(1) { grid-area: chart; }
  .tradegrid > *:nth-child(2) { grid-area: ticket; position: sticky; top: calc(var(--top) + 14px); }
  .tradegrid > *:nth-child(3) { grid-area: book; }
  .tradegrid > *:nth-child(4) { grid-area: tape; }
  .chart { height: 440px; min-height: 440px; }
}

@media (max-width: 720px) {
  .ticker { display: none; }
  /* The wordmark is the first thing that can go: the mark still identifies the
     product, and clipping a navigation label is worse than dropping a logotype. */
  .topbar__brand b { display: none; }
  .sections { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .sections::-webkit-scrollbar { display: none; }
  .topbar { gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__row, .gauge__ring, .rung__fill, .pulse i, .skeleton::after,
  .hub h1, .hub__card { animation: none; }
  .hub__card:hover { transform: none; }
  .modal__card { transform: none; opacity: 1; transition: none; }
  .modal__back { transition: none; }
  .installbar { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =============================================================================
   Trade, rebuilt as an exchange rather than a stack of cards.

   Price header, chart with its own toolbar and legend, one tabbed data panel,
   and a ticket that behaves like a ticket. On a phone the ticket is a sheet the
   thumb pulls up, which is the only layout that works one handed.
   ============================================================================= */

body.noscroll { overflow: hidden; }

.tradeshell { display: grid; gap: 10px; min-width: 0; }

.tradetop { display: grid; gap: 10px; min-width: 0; }
.tradetop__wallet { display: flex; justify-content: flex-end; }

/* ------------------------------------------------------------ price header */

.px {
  display: grid;
  gap: 12px;
  padding: 14px 15px;
  background: var(--e1);
  border-radius: var(--r-lg);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
  min-width: 0;
}

.px__left { display: grid; gap: 10px; min-width: 0; }
.px__stack { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.px__now {
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 8vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: color 0.45s ease;
}

/* The tick itself: the price flares in its direction, then settles back. */
.px__now.up { animation: flare-up 0.6s ease-out; }
.px__now.down { animation: flare-down 0.6s ease-out; }
@keyframes flare-up { 0% { color: var(--up); text-shadow: 0 0 22px rgba(34,197,94,0.5); } 100% { color: var(--ink); } }
@keyframes flare-down { 0% { color: var(--down); text-shadow: 0 0 22px rgba(239,68,68,0.5); } 100% { color: var(--ink); } }

.px__stack span { font-family: var(--data); font-size: 14px; }

.px__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  min-width: 0;
}

.px__grid > div { min-width: 0; }
.px__grid i { font-style: normal; display: block; font-family: var(--data); font-size: 8.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint); }
.px__grid b { display: block; margin-top: 3px; font-family: var(--data); font-size: 14px; font-variant-numeric: tabular-nums; }
.px__grid small { display: block; font-family: var(--data); font-size: 10px; }

/* ---------------------------------------------------------------- segments */

.seggroup { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); }
.seggroup.wide { display: grid; grid-auto-flow: column; }

.seg {
  font-family: var(--data);
  font-size: 11px;
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.16s ease, background 0.16s ease;
}

.seg:hover { color: var(--ink); }
.seg.on { color: var(--ink); background: var(--seg-on, rgba(249, 115, 22, 0.9)); }
.seg.on { color: #150802; font-weight: 600; }

/* ------------------------------------------------------------------- chart */

.chartpanel { padding: 12px; display: grid; gap: 10px; min-width: 0; }
.chartpanel__head { display: grid; gap: 9px; min-width: 0; }

.chartbar { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }

.legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--data);
  font-size: 10.5px;
  color: var(--faint);
  min-height: 16px;
}

.legend b { color: var(--ink); font-weight: 500; }
.legend .up b { color: var(--up); }
.legend .down b { color: var(--down); }

.chart { height: 300px; min-height: 300px; min-width: 0; }

/* Fullscreen is a real mode, not a bigger box. */
.chartpanel.full {
  position: fixed;
  inset: 0;
  z-index: 95;
  border-radius: 0;
  clip-path: none;
  padding: 14px;
  padding-top: calc(14px + env(safe-area-inset-top));
}

.chartpanel.full .chart { height: calc(100svh - 130px); min-height: 0; }

/* --------------------------------------------------------------- tabs */

.tabpanel { padding: 0; overflow: hidden; }

.tabbar {
  display: flex;
  gap: 2px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(0, 0, 0, 0.28);
}

.tabbar::-webkit-scrollbar { display: none; }

.tab {
  flex: none;
  font-family: var(--data);
  font-size: 11px;
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.16s ease, background 0.16s ease;
}

.tab:hover { color: var(--muted); }
.tab.on { color: var(--org); background: rgba(249, 115, 22, 0.12); }

.tabbody { padding: 12px; min-height: 260px; min-width: 0; }

/* Rows in the book are clickable, so they behave like buttons. */
.bookrow { width: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: left; }
.bookrow:hover { background: rgba(255, 255, 255, 0.035); }

/* ------------------------------------------------------------------ ticket */

.ticketpanel { padding: 14px; }
.ticketwrap { min-width: 0; }

.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.side {
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s ease;
}

.side--buy.on { border-color: transparent; background: linear-gradient(180deg, #4ade80, var(--up)); color: #04170b; }
.side--sell.on { border-color: transparent; background: linear-gradient(180deg, #fb7185, var(--down)); color: #1a0406; }

.tfield { display: grid; gap: 5px; }
.tfield span { font-family: var(--data); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint); }

.tfield input {
  font-family: var(--data);
  font-size: 16px;
  min-height: 46px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 13px;
}

.tfield input:focus { outline: none; border-color: var(--org); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.14); }

.lev { display: grid; gap: 4px; }
.lev span { font-family: var(--data); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint); }

.submit {
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  min-height: 50px;
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
  color: #04170b;
  background: linear-gradient(180deg, #4ade80, var(--up));
  box-shadow: 0 12px 26px -14px rgba(34, 197, 94, 0.9);
  transition: transform 0.14s ease, filter 0.2s ease;
}

.submit.sell { color: #1a0406; background: linear-gradient(180deg, #fb7185, var(--down)); box-shadow: 0 12px 26px -14px rgba(239, 68, 68, 0.9); }
.submit:hover { filter: brightness(1.06); }
.submit:active { transform: scale(0.99); }
.submit[disabled] { opacity: 0.45; cursor: default; filter: none; transform: none; }

.ticket { display: grid; gap: 11px; }

/* The session strip makes the actual venue state visible before a trader signs.
   It is deliberately compact so the ticket still fits in the desktop rail. */
.sessionstate {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(87, 218, 175, 0.22);
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.09), rgba(10, 18, 28, 0.68));
}
.sessionstate.err { border-color: rgba(251, 113, 133, 0.48); background: rgba(127, 29, 29, 0.13); }
.sessionstate__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sessionstate__head > span { font-family: var(--data); font-size: 9px; font-weight: 800; letter-spacing: .15em; color: #9ff4d1; }
.sessionstate__head > span::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 999px; background: #fbbf24; box-shadow: 0 0 9px rgba(251,191,36,.65); }
.sessionstate__head > span.live::before { background: #46e3a7; box-shadow: 0 0 10px rgba(70,227,167,.8); }
.sessionstate__head > span.reconnecting::before { background: #fb7185; box-shadow: 0 0 9px rgba(251,113,133,.7); }
.sessionstate.err .sessionstate__head > span { color: #fda4af; }
.sessionstate p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.sessionstate small { color: var(--faint); font-size: 10px; }
.sessionstate__refresh { border: 1px solid var(--line); border-radius: 7px; padding: 5px 7px; background: rgba(255,255,255,.04); color: var(--muted); font: 700 10px var(--data); letter-spacing: .07em; cursor: pointer; }
.sessionstate__refresh:hover:not(:disabled) { color: var(--ink); border-color: rgba(87, 218, 175, .45); }
.sessionstate__refresh:disabled { opacity: .55; cursor: default; }
.sessionstate__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sessionstate__stats span { display: grid; gap: 3px; color: var(--faint); font-size: 10px; }
.sessionstate__stats b { color: var(--ink); font: 700 12px var(--data); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Hyperliquid account history: dense enough for a terminal, but readable on a
   phone before the position tables begin. */
.hperformance { overflow: hidden; }
.hperformance__live { color: #65e9b6; font: 700 10px var(--data); letter-spacing: .1em; text-transform: uppercase; }
.hperformance__live.reconnecting { color: #fbbf24; }
.hperformance__live.connecting { color: var(--faint); }
.hperformance__grid { display: grid; gap: 14px; padding: 0 14px 14px; }
.hperformance__chart { min-height: 150px; border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; position: relative; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 38px), linear-gradient(135deg, rgba(56,189,248,.07), rgba(34,197,94,.025)); }
.hperformance__chart::after { content: ''; position: absolute; inset: auto 0 0; height: 45%; pointer-events: none; background: linear-gradient(0deg, rgba(34,197,94,.1), transparent); }
.hperformance__chart svg { display: block; position: relative; z-index: 1; width: 100%; height: 150px; filter: drop-shadow(0 8px 6px rgba(52,211,153,.2)); }
.hperformance__empty { display: grid; place-items: center; min-height: 150px; padding: 20px; color: var(--faint); font-size: 12px; text-align: center; }
.hperformance__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hperformance__stats .stat { min-width: 0; padding: 10px; }
.hactivity__rows { display: grid; }
.hactivity__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border-top: 1px solid var(--line-soft); }
.hactivity__row b { display: block; font-size: 13px; }
.hactivity__row small { display: block; margin-top: 3px; color: var(--faint); font-size: 10px; }
.hactivity__row > span { font: 700 12px var(--data); color: var(--ink); text-align: right; }
@media (min-width: 820px) { .hperformance__grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: stretch; } .hperformance__stats { grid-template-columns: 1fr; } }

/* Prediction trade ticket. Quotes can be live while execution remains at the
   venue, so the visual distinction is explicit instead of looking like a buy
   button that silently cannot trade. */
.predictionticket { display: grid; gap: 11px; padding: 13px; border: 1px solid rgba(119, 177, 255, .28); border-radius: var(--r); background: linear-gradient(135deg, rgba(70, 126, 255, .10), rgba(9, 15, 25, .68)); }
.predictionticket__quote { display: grid; gap: 10px; min-height: 54px; }
.predictionticket__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 700 10px var(--data); letter-spacing: .1em; }
.predictionticket__head > span { color: #9bc6ff; }
.predictionticket__book { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font: 11px var(--data); }
.predictionticket__book > div { padding: 8px; border-radius: 8px; background: rgba(4, 9, 18, .48); }
.predictionticket__book span { display: block; margin-bottom: 5px; color: var(--faint); font-size: 9px; letter-spacing: .12em; }
.predictionticket__book p { display: flex; justify-content: space-between; margin: 3px 0; }

/* --------------------------------------------------------------- layout */

@media (min-width: 820px) {
  .px { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: center; }
  .px__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 0; border-top: 0; border-left: 1px solid var(--line-soft); padding-left: 16px; }
  .tradetop { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .tradetop .venuebar { grid-column: 1 / -1; }
  .chart { height: 380px; min-height: 380px; }
}

@media (min-width: 1140px) {
  .tradeshell {
    grid-template-columns: minmax(0, 1fr) 330px;
    grid-template-areas: "top top" "chart ticket" "tabs ticket";
    align-items: start;
  }
  .tradetop { grid-area: top; }
  .chartpanel { grid-area: chart; }
  .tabpanel { grid-area: tabs; }
  .ticketpanel { grid-area: ticket; position: sticky; top: calc(var(--top) + 12px); }
  .chart { height: 430px; min-height: 430px; }
}

@media (prefers-reduced-motion: reduce) {
  .px__now.up, .px__now.down { animation: none; }
}

/* =============================================================================
   The hub. The mark, alive, behind a live readout of what the terminal sees.
   ============================================================================= */

.hub { position: relative; padding: 0 0 24px; isolation: isolate; }

.stage {
  position: absolute;
  inset: -8% -20% auto -20%;
  height: 460px;
  z-index: -1;
  pointer-events: none;
  mask-image: radial-gradient(closest-side, #000 45%, transparent 82%);
}

.eye { display: block; width: 100%; height: 100%; }

.hub__copy { padding-top: 54px; }

.hub h1 {
  display: grid;
  font-family: var(--display);
  font-variation-settings: "wdth" 116;
  font-weight: 700;
  font-size: clamp(30px, 9.6vw, 62px);
  letter-spacing: -0.04em;
  line-height: 0.98;
  animation: rise 0.7s cubic-bezier(0.2, 0.85, 0.3, 1) both;
}

.hub h1 .stroke {
  color: transparent;
  -webkit-text-stroke: 1.2px var(--org);
  text-shadow: 0 0 44px rgba(249, 115, 22, 0.3);
}

.hub__lede { margin-top: 14px; max-width: 50ch; color: var(--muted); font-size: 15.5px; animation: rise 0.7s 80ms cubic-bezier(0.2, 0.85, 0.3, 1) both; }

.hubstats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 26px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--line-soft);
  animation: rise 0.7s 140ms cubic-bezier(0.2, 0.85, 0.3, 1) both;
}

.hubstats > div { background: #0c0c13; padding: 14px 15px; min-width: 0; }
.hubstats i { font-style: normal; display: block; font-family: var(--data); font-size: 8.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint); }
.hubstats b { display: block; margin-top: 5px; font-family: var(--data); font-size: 17px; font-variant-numeric: tabular-nums; }

.sections__grid { display: grid; gap: 12px; margin-top: 14px; perspective: 1100px; }

.sec {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 22px 20px 20px;
  text-decoration: none;
  color: var(--ink);
  background: var(--e1);
  border-radius: var(--r-lg);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
  animation: rise 0.7s 200ms cubic-bezier(0.2, 0.85, 0.3, 1) both;
}

.sec:nth-child(2) { animation-delay: 280ms; }

.sec::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}

.sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(340px circle at var(--mx, 20%) var(--my, 0%), rgba(249, 115, 22, 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.sec:hover::before { opacity: 1; }

.sec__glyph {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--org);
  background: rgba(249, 115, 22, 0.12);
  transform: translateZ(34px);
}

.sec__glyph svg { width: 21px; height: 21px; }
.sec.soon .sec__glyph { color: var(--blue-lift); background: rgba(0, 82, 255, 0.14); }

.sec b { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 700; font-size: 25px; letter-spacing: -0.03em; transform: translateZ(24px); }
.sec p { color: var(--muted); font-size: 14px; max-width: 44ch; transform: translateZ(14px); }

.sec__stats { display: flex; gap: 18px; margin-top: 4px; transform: translateZ(18px); }
.sec__stats i { font-style: normal; font-family: var(--data); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); display: block; }
.sec__stats u { text-decoration: none; font-family: var(--data); font-size: 15px; color: var(--ink); }

.sec__go { margin-top: 6px; font-family: var(--data); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--org-2); transform: translateZ(20px); }
.sec.soon .sec__go { color: var(--blue-lift); }

@media (min-width: 760px) {
  .stage { height: 560px; inset: -10% -10% auto -10%; }
  .hub__copy { padding-top: 76px; }
  .hubstats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sections__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .hub h1, .hub__lede, .hubstats, .sec { animation: none; }
  .sec { transform: none !important; }
}

/* =============================================================================
   Surface components: cascade, basis, board, ghost.

   Everything below is authored at 390px and adds at wider breakpoints. Depth is
   opt-in through .tilt, which only ever gets set on a fine pointer with motion
   allowed, so a phone and a reduced-motion visitor pay nothing for it.
   ============================================================================= */

/* --------------------------------------------------------------- primitives */

.lede {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 14px;
  max-width: 66ch;
}

/* Depth that answers the pointer. The perspective lives on the element itself so
   a card can sit anywhere without its parent knowing about it. */
.tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Reveal on scroll, once. */
.rise {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--rise-delay, 0ms);
}
.rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .tilt { transform: none; transition: none; }
}

/* A proportion, drawn. */
.split {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--line-soft);
}
.split__a { background: var(--up); opacity: 0.8; }
.split__b { background: var(--down); opacity: 0.8; }

/* A 0..1 reading where the number alone does not convey urgency. */
.meter {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--line-soft);
  overflow: hidden;
}
.meter > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.meter.hot > span { background: linear-gradient(90deg, var(--down), #f87171); }
.meter.warm > span { background: linear-gradient(90deg, var(--org), var(--org-2)); }
.meter.cool > span { background: linear-gradient(90deg, var(--blue), var(--blue-lift)); }

/* Tables that scroll their own overflow, never the page. The first column holds
   its place because the row is meaningless without knowing whose row it is. */
.tablewrap.sticky { overflow-x: auto; }
.tablewrap.sticky table { min-width: 100%; }
.tablewrap.sticky td:first-child,
.tablewrap.sticky th:first-child {
  position: sticky;
  left: 0;
  background: var(--panel);
  z-index: 1;
}
.data td.rank { color: var(--faint); font-variant-numeric: tabular-nums; width: 1%; }

input.bad { border-color: rgba(239, 68, 68, 0.55); }

.wide-only { display: none; }
.narrow-only { display: block; }

/* ------------------------------------------------------------------ cascade */

.cascade__head { display: grid; gap: 14px; margin-bottom: 16px; }

.trapdoor {
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 16px 18px 18px;
  text-align: left;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: var(--r);
  background:
    radial-gradient(420px 160px at var(--mx, 30%) var(--my, 0%), rgba(249, 115, 22, 0.14), transparent 70%),
    var(--e1);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  overflow: hidden;
}
.trapdoor__glow {
  position: absolute;
  inset: auto -20% -70% auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.22), transparent 68%);
  pointer-events: none;
}
.trapdoor__label {
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--org);
}
.trapdoor > b {
  font-family: var(--data);
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.trapdoor__meta { color: var(--muted); font-size: 13px; }
.trapdoor__meter { display: block; margin-top: 8px; }

/* The ladder. Five columns at every width: dropping one on a phone would remove
   the cumulative figure, which is the column that answers the question. */
.clad {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
}
.clad__head,
.clad__row {
  display: grid;
  grid-template-columns: minmax(0, 4.2rem) minmax(0, 3.2rem) minmax(0, 1fr) minmax(0, 4.6rem) minmax(0, 4.6rem);
  gap: 8px;
  align-items: center;
  padding: 7px 12px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.clad__head {
  font-family: var(--data);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line-soft);
}
.clad__head > span:nth-child(4),
.clad__head > span:nth-child(5),
.clad__row > .clad__amt,
.clad__row > .clad__cum { text-align: right; }

.clad__side { display: grid; }
.clad__side.up .clad__fill.long { opacity: 0.55; }

.clad__row {
  width: 100%;
  text-align: left;
  font-family: var(--data);
  color: var(--ink);
  background: none;
  border: 0;
  border-top: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 160ms ease;
}
.clad__row:hover,
.clad__row:focus-visible { background: rgba(249, 115, 22, 0.07); }
.clad__row.near { background: rgba(249, 115, 22, 0.05); }

.clad__px { color: var(--ink); }
.clad__dist { color: var(--faint); font-size: 11px; }
.clad__dist.warn { color: var(--org); }
.clad__amt { color: var(--muted); }
.clad__cum { color: var(--faint); }

.clad__bar {
  display: flex;
  height: 9px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--line-soft);
}
.clad__fill { display: block; height: 100%; transition: width 480ms cubic-bezier(0.22, 1, 0.36, 1); }
.clad__fill.long { background: linear-gradient(90deg, rgba(34, 197, 94, 0.45), var(--up)); }
.clad__fill.short { background: linear-gradient(90deg, rgba(239, 68, 68, 0.45), var(--down)); }

.clad__mark {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  padding: 9px 12px;
  border-block: 1px solid rgba(249, 115, 22, 0.34);
  background: rgba(249, 115, 22, 0.08);
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--org);
}
.clad__mark b {
  font-size: 17px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------- basis */

.pair {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 16px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background:
    radial-gradient(340px 140px at var(--mx, 50%) var(--my, 0%), rgba(249, 115, 22, 0.1), transparent 70%),
    var(--e1);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  overflow: hidden;
}
.pair.flagged { border-color: rgba(249, 115, 22, 0.4); }
.pair__sheen {
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transition: transform 700ms ease;
}
.pair:hover .pair__sheen { transform: translateX(320%); }

.pair__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pair__coin { font-family: var(--display); font-size: 17px; letter-spacing: -0.01em; }
.pair__apr { font-family: var(--data); font-size: 21px; font-variant-numeric: tabular-nums; }

.pair__legs { display: flex; gap: 14px; font-size: 12px; }
.pair__legs span { display: grid; gap: 2px; }
.pair__legs i { font-style: normal; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.pair__legs u { text-decoration: none; font-family: var(--data); font-size: 12.5px; }

.pair__foot { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--faint); }
.pair__flag { font-size: 11.5px; color: var(--org); }
.pair__flag.dim { color: var(--faint); }

/* Two legs on opposite sides of a centre line, so the spread is seen rather than
   subtracted in the reader's head. */
.spreadbar { position: relative; display: block; height: 12px; }
.spreadbar__axis {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.spreadbar__leg {
  position: absolute;
  top: 3px;
  height: 6px;
  border-radius: 3px;
  transition: width 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.spreadbar__leg.long { background: var(--up); opacity: 0.85; }
.spreadbar__leg.short { background: var(--down); opacity: 0.85; top: 3px; }

.vstrip { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.vchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--data);
  font-size: 11.5px;
  color: var(--muted);
}
.vchip i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); }
.vchip.off { color: var(--faint); border-color: var(--line-soft); }
.vchip.off i { background: var(--down); }

/* -------------------------------------------------------------------- board */

.acards { display: grid; gap: 10px; }
.acard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px 10px;
  width: 100%;
  padding: 14px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--e1);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.acard__rank {
  font-family: var(--data);
  font-size: 11px;
  color: var(--faint);
  align-self: center;
}
.acard__addr { font-family: var(--data); font-size: 13.5px; }
.acard__pnl { font-family: var(--data); font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: right; }
.acard__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin-top: 4px;
}
.acard__grid span { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.acard__grid i { font-style: normal; color: var(--faint); }
.acard__grid u { text-decoration: none; font-family: var(--data); color: var(--muted); }
.acard .meter { grid-column: 1 / -1; margin-top: 8px; }

/* -------------------------------------------------------------------- ghost */

.ghoststage {
  position: relative;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: radial-gradient(600px 200px at 50% 0%, rgba(0, 82, 255, 0.08), transparent 70%), var(--panel);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  overflow: hidden;
}
.routeviz { display: block; width: 100%; }

.levels { display: grid; gap: 10px; }
.level {
  display: grid;
  gap: 6px;
  padding: 14px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--e1);
}
.level.on {
  border-color: rgba(249, 115, 22, 0.5);
  background:
    radial-gradient(300px 120px at var(--mx, 50%) var(--my, 0%), rgba(249, 115, 22, 0.12), transparent 70%),
    var(--e1);
}
.level b { font-family: var(--display); font-size: 15px; }
.level p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.level__mark { display: flex; gap: 4px; }
.level__mark i {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
}
.level__mark i.on { background: var(--org); }

.costmeter { display: grid; gap: 7px; margin-top: 16px; }

/* --------------------------------------------------------------- wider than */

@media (min-width: 700px) {
  .wide-only { display: block; }
  .narrow-only { display: none; }
  .levels { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .clad__head,
  .clad__row {
    grid-template-columns: minmax(0, 6rem) minmax(0, 4rem) minmax(0, 1fr) minmax(0, 6rem) minmax(0, 6rem);
    padding: 8px 16px;
    font-size: 13px;
  }
  .trapdoor > b { font-size: 32px; }
}

/* Four tabs do not fit at 390px. The group scrolls itself rather than widening
   the page, and the flex children stop shrinking their own labels to fit. */
.seggroup {
  overflow-x: auto;
  scrollbar-width: none;
  justify-self: start;
  max-width: 100%;
  margin-bottom: 12px;
}
.seggroup::-webkit-scrollbar { display: none; }
.seg { flex: 0 0 auto; white-space: nowrap; }

/* Pair cards carry two venue names and a footer of their own, so they get a real
   minimum rather than half of a 390px screen. */
.pairs { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .pairs { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); } }

/* Exposure that liquidates outside the ladder window. Summarised, never folded
   into the nearest bucket, because that would place it at a price it does not
   liquidate at. */
.clad__outside {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  font-family: var(--data);
  font-size: 11.5px;
  color: var(--faint);
  background: rgba(255, 255, 255, 0.015);
  border-block: 1px solid var(--line-soft);
}
.clad__outside b { color: var(--muted); font-weight: 500; }

/* The install prompt is fixed above the tab bar, so the page has to end above it
   or it sits on top of the last rows. */
body.app .main { padding-bottom: 132px; }
@media (min-width: 900px) { body.app .main { padding-bottom: 64px; } }

/* ------------------------------------------------------------------ venues */

.vcards { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .vcards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }

.vcard {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 15px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--e1);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  overflow: hidden;
}
.vcard.soon { border-style: dashed; }
.vcard.off { border-color: rgba(239, 68, 68, 0.3); }
.vcard__sheen {
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transition: transform 700ms ease;
}
.vcard:hover .vcard__sheen { transform: translateX(320%); }
.vcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vcard__top b { font-family: var(--display); font-size: 16px; }
.vcard__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: 0 0 auto; }
.vcard__dot.ok { background: var(--up); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); }
.vcard__dot.off { background: var(--down); }
.vcard__dot.soon { background: var(--org); }
.vcard__chain { font-family: var(--data); font-size: 12px; color: var(--muted); }
.vcard__meta { font-size: 11.5px; color: var(--faint); }
.vcard__reward { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vcard__reward u { text-decoration: none; font-family: var(--data); font-size: 13px; color: var(--org); }
.vcard__reward i { font-style: normal; font-size: 11.5px; color: var(--faint); }

.caps { display: flex; flex-wrap: wrap; gap: 5px; }
.cap {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--data);
  font-size: 10.5px;
  color: var(--faint);
}
.cap.on { color: var(--muted); border-color: rgba(0, 82, 255, 0.35); }

.campaign {
  padding: 14px;
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: var(--r);
  background: rgba(249, 115, 22, 0.06);
}
.campaign b { font-family: var(--data); font-size: 16px; color: var(--org); }
.campaign p { margin: 6px 0 4px; font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------- ghost route watch */

.routewatch {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.routewatch p { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.routestate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--data);
  font-size: 13px;
}
.routestate i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.routestate.live i { background: var(--org); animation: pulsedot 1.6s ease-in-out infinite; }
.routestate.success i { background: var(--up); }
.routestate.refunded i { background: var(--org); }
.routestate.failed i { background: var(--down); }
@keyframes pulsedot { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .routestate.live i { animation: none; } }

/* Route activity is local to the browser that prepared it, never a public
   explorer of other traders' settlement history. */
.routeactivity { overflow: hidden; position: relative; }
.routeactivity::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px 180px at 8% -20%, rgba(249,115,22,.16), transparent 70%), radial-gradient(420px 190px at 100% 110%, rgba(0,82,255,.12), transparent 72%); }
.routeactivity > * { position: relative; }
.routeactivity__timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 12px; }
.routeactivity__card { min-height: 210px; position: relative; overflow: hidden; padding: 16px; border: 1px solid rgba(105,134,151,.32); border-radius: 14px; background: linear-gradient(145deg, rgba(20,31,39,.92), rgba(7,12,17,.97)); box-shadow: 0 20px 45px -34px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06); transform-style: preserve-3d; }
.routeactivity__card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .7; background: linear-gradient(125deg, transparent 20%, rgba(255,255,255,.055) 47%, transparent 61%); transform: translateX(-70%); transition: transform .6s ease; }
.routeactivity__card:hover::after { transform: translateX(70%); }
.routeactivity__card.success { border-color: rgba(14,203,129,.4); }
.routeactivity__card.refunded { border-color: rgba(249,115,22,.5); }
.routeactivity__card.failed { border-color: rgba(255,86,105,.48); }
.routeactivity__orb { position: absolute; width: 118px; height: 118px; right: -42px; top: -44px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ffe59a, #efac16 24%, rgba(249,115,22,.3) 45%, transparent 70%); box-shadow: -12px 16px 42px rgba(249,115,22,.18); }
.routeactivity__card.success .routeactivity__orb { background: radial-gradient(circle at 34% 30%, #b7ffdf, #0ecb81 24%, rgba(14,203,129,.26) 45%, transparent 70%); }
.routeactivity__top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.routeactivity__top b { display: block; font: 800 13px var(--data); letter-spacing: .04em; }
.routeactivity__top small { display: block; margin-top: 4px; color: var(--muted); font: 11px var(--data); }
.routeactivity__top .routestate { font-size: 10px; white-space: nowrap; }
.routeactivity__value { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 8px; margin-top: 24px; }
.routeactivity__value b { font: 800 clamp(24px, 3vw, 34px) var(--data); letter-spacing: -.055em; }
.routeactivity__value span { color: var(--muted); font: 11px var(--data); }
.routeactivity__rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 17px 0 12px; }
.routeactivity__rail span { height: 4px; border-radius: 5px; background: rgba(126,149,160,.23); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.routeactivity__rail span.on { background: linear-gradient(90deg, #f97316, #ffd95f); box-shadow: 0 0 13px rgba(249,115,22,.46); }
.routeactivity__rail span.refund { background: linear-gradient(90deg, #f97316, #ffb55f); box-shadow: 0 0 13px rgba(249,115,22,.46); }
.routeactivity__card p { position: relative; z-index: 1; min-height: 34px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.48; }
.routeactivity__actions { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.routeactivity__actions code { min-width: 0; overflow: hidden; color: var(--org-2); font: 11px var(--data); text-overflow: ellipsis; white-space: nowrap; }
.routeactivity__actions .btn { min-height: 31px; padding: 6px 9px; font-size: 10px; }
.routeactivity--empty { text-align: center; }
@media (max-width: 620px) { .routeactivity__timeline { grid-template-columns: 1fr; } .routeactivity__card { min-height: 194px; } }

/* --------------------------------------------------------------- prediction */

.pmarkets { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pmarkets { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }

.pmarket {
  position: relative;
  display: grid;
  gap: 9px;
  padding: 15px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--e1);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  overflow: hidden;
}
.pmarket__sheen {
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transition: transform 700ms ease;
}
.pmarket:hover .pmarket__sheen { transform: translateX(320%); }
.pmarket__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pmarket__vol { font-family: var(--data); font-size: 11px; color: var(--faint); }
.pmarket__q {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  /* Questions run long. Three lines keeps every card the same height without
     hiding so much that the question stops being readable. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pmarket__foot { font-size: 11.5px; color: var(--faint); }
.pmarket__foot i { font-style: normal; }

/* Venue identity. Each gets its own tint so a scan of mixed venues reads. */
.pvenue {
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--data);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
  color: var(--muted);
}
.pvenue.polymarket { color: #8ab4ff; border-color: rgba(0, 82, 255, 0.4); }
.pvenue.kalshi { color: var(--org-2); border-color: rgba(249, 115, 22, 0.4); }
.pvenue.limitless { color: #a5b4fc; border-color: rgba(99, 102, 241, 0.4); }

/* A probability, drawn against its own track. */
.odds {
  position: relative;
  display: block;
  height: 24px;
  border-radius: 6px;
  background: var(--line-soft);
  overflow: hidden;
}
.odds__yes {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.35), rgba(34, 197, 94, 0.7));
  transition: width 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.odds__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--data);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.xpairs { display: grid; gap: 12px; }
.xpair {
  display: grid;
  gap: 10px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--e1);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.xpair__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.xpair__head b { font-family: var(--data); font-size: 15px; color: var(--org); }
.xpair__sim { font-size: 11.5px; color: var(--faint); }
.xpair__side {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink);
  font-size: 12.5px;
}
.xpair__side:hover { border-color: rgba(249, 115, 22, 0.4); }
.xpair__side b { font-family: var(--data); font-size: 15px; }
.xpair__warn { margin: 0; font-size: 11.5px; color: var(--faint); }

/* The venue strip doubles as a filter here, so its chips are buttons. */
button.vchip { cursor: pointer; font: inherit; font-size: 11.5px; }
button.vchip.on { color: var(--ink); border-color: rgba(249, 115, 22, 0.5); background: rgba(249, 115, 22, 0.08); }

/* ------------------------------------------------------- advanced order types */

/* Two or three short fields side by side. Single column at 390px, because a
   price input squeezed to a third of a phone screen cannot be read while typing. */
.tgrid { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 420px) { .tgrid { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); } }

.protect {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.012);
}

/* The ladder, drawn as the prices it will actually rest at. */
.rungs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.rungs span {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--data);
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* A problem with what has been typed, said while they are typing it. */
.preview__warn {
  margin-top: 6px;
  padding: 7px 9px;
  border-left: 2px solid var(--down);
  font-size: 12px;
  line-height: 1.45;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.07);
}

/* Two actions per position row. They wrap rather than widening the table, which
   would put the whole thing into horizontal scroll on a phone. */
.rowacts { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------------ alerts */

.alertkinds { display: grid; gap: 6px; margin: 12px 0; }
@media (min-width: 520px) { .alertkinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.alertkind {
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
}
.alertkind.on {
  color: var(--ink);
  border-color: rgba(249, 115, 22, 0.5);
  background: rgba(249, 115, 22, 0.08);
}

.arules { display: grid; gap: 10px; }
@media (min-width: 700px) { .arules { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }

.arule {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--e1);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.arule.off { opacity: 0.55; }
.arule__top { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.arule__top b { font-size: 14px; line-height: 1.4; }
.arule__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--faint);
}
.arule__dot.on { background: var(--up); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); }
.arule__kind {
  font-family: var(--data);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.arule__note { margin: 0; font-size: 12.5px; color: var(--muted); }
.arule__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--faint);
}

.aevents { display: grid; gap: 2px; }
.aevent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.aevent b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.aevent span { font-size: 11.5px; color: var(--faint); }
.aevent__dot {
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--line);
}
.aevent.fresh .aevent__dot { background: var(--org); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15); }

/* ----------------------------------------------------------------- routing */

.routes { display: grid; gap: 10px; }
@media (min-width: 700px) { .routes { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } }

.route {
  position: relative;
  display: grid;
  gap: 9px;
  padding: 15px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--e1);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  overflow: hidden;
}
.route--best { border-color: rgba(34, 197, 94, 0.45); }
.route--out { opacity: 0.6; cursor: default; }
.route__sheen {
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transition: transform 700ms ease;
}
.route:hover .route__sheen { transform: translateX(320%); }

.route__top { display: flex; align-items: center; gap: 8px; }
.route__top b { font-family: var(--display); font-size: 16px; }
.route__total {
  margin-left: auto;
  font-family: var(--data);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.route__best {
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--up);
  border: 1px solid rgba(34, 197, 94, 0.4);
}
.route__bad { margin-left: auto; font-size: 11.5px; color: var(--down); }
.route__why { margin: 0; font-size: 12px; line-height: 1.5; color: var(--faint); }

/* Where the cost goes, as one bar. Three numbers side by side is a subtraction
   the reader has to perform; a stack is a picture they can read. */
.route__stack { display: flex; height: 8px; gap: 2px; }
.route__seg { display: block; border-radius: 2px; min-width: 2px; }
.route__seg.slip { background: var(--down); }
.route__seg.fee { background: var(--org); }
.route__seg.fund { background: var(--blue-lift); }

.route__foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--faint);
}

.costbars { display: grid; gap: 8px; }
.costbar {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
  color: var(--muted);
}
.costbar b { font-family: var(--data); font-size: 12.5px; color: var(--ink); }
.costbar__track { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.costbar__fill { display: block; height: 100%; background: var(--org); border-radius: 3px; }
/* Funding can pay you, and a cost bar that cannot show a credit would report
   being paid as if it were an expense. */
.costbar__fill.credit { background: var(--up); }

/* -------------------------------------------------------------------- flow */

.wmoves { display: grid; gap: 1px; }
.wmove {
  display: grid;
  grid-template-columns: minmax(0, 3.6rem) minmax(0, 1fr) auto;
  grid-template-areas: "when who size" "act act coin";
  gap: 3px 10px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-left: 2px solid transparent;
  transition: background 150ms ease;
}
.wmove:hover, .wmove:focus-visible { background: rgba(255, 255, 255, 0.025); }
.wmove.buy { border-left-color: rgba(34, 197, 94, 0.55); }
.wmove.sell { border-left-color: rgba(239, 68, 68, 0.55); }

.wmove__when { grid-area: when; font-family: var(--data); font-size: 11px; color: var(--faint); }
.wmove__who { grid-area: who; font-family: var(--data); font-size: 13px; }
.wmove__size {
  grid-area: size;
  font-family: var(--data);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.wmove__act { grid-area: act; font-size: 11.5px; }
.wmove__act.buy { color: var(--up); }
.wmove__act.sell { color: var(--down); }
.wmove__coin { grid-area: coin; font-family: var(--data); font-size: 11.5px; color: var(--muted); text-align: right; }

@media (min-width: 620px) {
  .wmove {
    grid-template-columns: minmax(0, 4rem) minmax(0, 7rem) minmax(0, 1fr) minmax(0, 4rem) auto;
    grid-template-areas: "when who act coin size";
    align-items: center;
  }
  .wmove__coin { text-align: left; }
}

.followers { display: grid; gap: 10px; }
@media (min-width: 700px) { .followers { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } }

.follower {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--e1);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.follower__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.follower__top b { font-family: var(--data); font-size: 14px; }
.follower__cov { font-family: var(--data); font-size: 17px; color: var(--org); }
.follower__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--faint);
}

/* A value shown once and never again gets treated like it matters. */
.secretbox {
  margin: 12px 0;
  padding: 12px;
  border: 1px dashed rgba(249, 115, 22, 0.5);
  border-radius: var(--r-sm);
  background: rgba(249, 115, 22, 0.05);
}
.secretbox code {
  font-family: var(--data);
  font-size: 12.5px;
  color: var(--org-2);
  word-break: break-all;
}

/* =============================================================================
   Signature surfaces.

   Each of these pages now has its own shape rather than the shared panel, stat
   grid and card list. That was the note: a redesign changes structure, not paint.
   What they share is only the hero pattern below, and even that is a frame around
   a different illustration on every page.
   ============================================================================= */

.viz { display: block; width: 100%; }

/* The hero: an illustration behind, the claim in front. One rule, five pages. */
.rhero, .fhero, .vhero, .phero, .ahero {
  position: relative;
  margin-bottom: 16px;
  padding: 0 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(700px 260px at 50% 0%, rgba(249, 115, 22, 0.09), transparent 68%),
    var(--e1);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  overflow: hidden;
}
.rhero h1, .fhero h1, .vhero h1, .phero h1, .ahero h1 {
  margin: 0 20px 8px;
  font-size: clamp(24px, 6.5vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}
.rhero > p, .fhero > p, .vhero > p, .phero > p, .ahero > p {
  margin: 0 20px 14px;
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}
.phero__meta { font-size: 12.5px !important; color: var(--faint) !important; }

.rstage, .fstage, .vstage, .pstage, .astage { position: relative; margin-bottom: 6px; }

/* Controls sit inside the hero, because changing them is the point of the page
   rather than a setting hidden below the fold. */
.rcontrols {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 20px 14px;
}
.rfield {
  display: grid;
  gap: 3px;
  min-width: 92px;
  flex: 1 1 92px;
}
.rfield.wide { flex: 1 1 100%; }
.rfield span {
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.rfield input {
  width: 100%;
  padding: 9px 11px;
  /* 16px, or iOS zooms the page on focus and never zooms back. */
  font-size: 16px;
  font-family: var(--data);
  color: var(--ink);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: 9px;
}

/* -------------------------------------------------------- routing verdict */

.verdict { margin: 0 20px; }
.verdict__in {
  display: grid;
  gap: 3px;
  padding: 15px 17px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: var(--r);
  background: rgba(34, 197, 94, 0.05);
}
.verdict__lead {
  font-family: var(--data);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--up);
}
.verdict__name { font-family: var(--display); font-size: 26px; letter-spacing: -0.02em; }
.verdict__cost { font-family: var(--data); font-size: 13px; color: var(--muted); }
.verdict__save { font-size: 12.5px; color: var(--up); }

/* ----------------------------------------------------------------- lanes */

.lanes { display: grid; gap: 2px; }

.lane {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 5.2rem) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 11px 8px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms ease;
}
.lane:hover, .lane:focus-visible { background: rgba(255, 255, 255, 0.025); }
.lane--out { opacity: 0.5; cursor: default; grid-template-columns: 1.6rem minmax(0, 5.2rem) 1fr; }

.lane__rank { font-family: var(--data); font-size: 11px; color: var(--faint); }
.lane__name { font-family: var(--display); font-size: 14px; }
.lane__why { font-size: 11.5px; color: var(--faint); }

/* The bar is the ranking. Its LENGTH is the cost against the dearest that can
   fill, so the cheapest venue is visibly the shortest before a number is read. */
.lane__track { display: block; height: 12px; }
.lane__bar {
  display: flex;
  height: 100%;
  gap: 1px;
  border-radius: 3px;
  overflow: hidden;
  transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lane__seg { display: block; }
.lane__seg.slip { background: var(--down); }
.lane__seg.fee { background: var(--org); }
.lane__seg.fund { background: var(--blue-lift); }
.lane--best .lane__seg.slip { background: rgba(34, 197, 94, 0.85); }
.lane--best .lane__seg.fee { background: rgba(34, 197, 94, 0.5); }
.lane--best .lane__seg.fund { background: rgba(34, 197, 94, 0.28); }

.lane__cost { display: grid; justify-items: end; gap: 1px; }
.lane__cost b { font-family: var(--data); font-size: 13px; font-variant-numeric: tabular-nums; }
.lane__cost i { font-style: normal; font-size: 10.5px; color: var(--faint); }

.legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 4px; font-size: 11.5px; color: var(--faint); }
.legend__key { display: inline-block; width: 10px; height: 4px; border-radius: 2px; margin-right: 6px; }
.legend__key.slip { background: var(--down); }
.legend__key.fee { background: var(--org); }
.legend__key.fund { background: var(--blue-lift); }

/* ------------------------------------------------------------- flow ticks */

.fstrip { margin: 0 20px; }
.fstrip__note { margin: 10px 0 0; font-size: 12px; color: var(--faint); }

.lean { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.lean__side { font-family: var(--data); font-size: 11.5px; }
.lean__side.up { color: var(--up); }
.lean__side.down { color: var(--down); }
.lean__bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--line-soft); }
.lean__bar i { display: block; transition: flex 520ms cubic-bezier(0.22, 1, 0.36, 1); }
.lean__bar i.up { background: var(--up); }
.lean__bar i.down { background: var(--down); }

/* A timeline, not a table. The spine carries time, the side carries direction. */
.ticks { display: grid; }
.tick {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  padding: 0;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: 0;
}
.tick__spine { position: relative; display: block; }
.tick__spine::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.tick:first-child .tick__spine::before { top: 14px; }
.tick:last-child .tick__spine::before { bottom: calc(100% - 14px); }
.tick__spine i {
  position: absolute;
  left: 8px;
  top: 11px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--void);
  background: var(--faint);
}
.tick.buy .tick__spine i { background: var(--up); }
.tick.sell .tick__spine i { background: var(--down); }
.tick:hover .tick__spine i { box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.16); }

.tick__body { padding: 9px 0 11px; border-bottom: 1px solid var(--line-soft); }
.tick__line { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tick__line b { font-family: var(--data); font-size: 14px; font-variant-numeric: tabular-nums; }
.tick__line.dim { margin-top: 3px; font-size: 11.5px; color: var(--faint); }
.tick__coin { font-family: var(--data); font-size: 11.5px; color: var(--muted); }

/* ---------------------------------------------------------- venue matrix */

.vmx__head {
  display: none;
  gap: 10px;
  padding: 0 8px 8px;
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line-soft);
}
.vmatrix { display: grid; }

.vmx {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  grid-template-areas: "dot name meta" ". caps caps";
  gap: 6px 10px;
  width: 100%;
  padding: 12px 8px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background 150ms ease;
}
.vmx:hover, .vmx:focus-visible { background: rgba(255, 255, 255, 0.025); }
.vmx__dot {
  grid-area: dot;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--faint);
}
.vmx__dot.ok { background: var(--up); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); }
.vmx__dot.off { background: var(--down); }
.vmx__dot.soon { background: var(--org); }
.vmx__name { grid-area: name; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.vmx__name b { font-family: var(--display); font-size: 15px; }
.vmx__name i { font-style: normal; font-family: var(--data); font-size: 11px; color: var(--faint); }
.vmx__caps { grid-area: caps; display: flex; flex-wrap: wrap; gap: 4px; }
.vmx__cap {
  padding: 2px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-family: var(--data);
  font-size: 10px;
  color: var(--faint);
  /* Off is not hidden, it is dimmed. What a venue CANNOT do is information. */
  opacity: 0.55;
}
.vmx__cap.on { opacity: 1; color: var(--blue-lift); border-color: rgba(0, 82, 255, 0.4); }
.vmx__meta { grid-area: meta; font-family: var(--data); font-size: 11px; color: var(--muted); text-align: right; }
.vmx__meta u { text-decoration: none; color: var(--org); }
.vmx__meta u i { font-style: normal; color: var(--faint); }

@media (min-width: 700px) {
  .vmx__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem) minmax(0, 12rem); }
  .vmx {
    grid-template-columns: 10px minmax(0, 1fr) minmax(0, 16rem) minmax(0, 12rem);
    grid-template-areas: "dot name caps meta";
    align-items: center;
  }
}

/* ------------------------------------------------------ prediction bands */

.pband { margin-bottom: 22px; }
.pband__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}
.pband__head b { font-family: var(--display); font-size: 15px; }
.pband__head span { font-family: var(--data); font-size: 11px; color: var(--faint); }

.prows { display: grid; }
.prow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  width: 100%;
  padding: 11px 8px 12px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background 150ms ease;
}
.prow:hover, .prow:focus-visible { background: rgba(255, 255, 255, 0.025); }

/* The scale runs under the whole row, so position along it is readable at a
   glance without a separate bar competing with the text. */
.prow__scale {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--line-soft);
}
.prow__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.5), rgba(34, 197, 94, 0.65));
  transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.prow__pin {
  position: absolute;
  bottom: -2px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--ink);
}
.prow__body { grid-column: 1; display: grid; gap: 5px; }
.prow__body b {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prow__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.prow__meta i { font-style: normal; font-size: 11px; color: var(--faint); }
.prow__pct {
  grid-column: 2;
  align-self: center;
  font-family: var(--data);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- alerts line */

.watchline {
  margin: 0 20px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
.watchline b { font-family: var(--data); font-size: 17px; color: var(--ink); }
.watchline u { text-decoration: none; color: var(--org); }

@media (prefers-reduced-motion: reduce) {
  .lane, .lane__bar, .lean__bar i, .prow__fill { transition: none; }
}

/* =============================================================================
   The original six surfaces, restructured.

   Same rule as the newer five: the shape comes from the subject. Board is a
   field, cascade is a pressure axis, basis is a set of distances, portfolio is
   one arc, mirror is a silhouette beside its score, ghost is one journey.
   ============================================================================= */

.bhero, .chero, .bahero, .ghero, .pfhero, .mhero {
  position: relative;
  margin-bottom: 16px;
  padding: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(700px 260px at 50% 0%, rgba(249, 115, 22, 0.09), transparent 68%),
    var(--e1);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  overflow: hidden;
}
.bhero h1, .chero h1, .bahero h1, .ghero h1, .pfhero h1 {
  margin: 0 20px 8px;
  font-size: clamp(23px, 6vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}
.bhero > p, .chero > p, .bahero > p, .ghero > p {
  margin: 0 20px 14px;
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

.bstage, .cstage, .bastage, .postage { position: relative; margin-bottom: 8px; }

/* One sentence carrying the numbers that used to be four tiles. Emphasis, not
   layout, separates them. */
.cline {
  margin: 0 20px 12px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}
.cline b { font-family: var(--data); font-size: 15px; color: var(--ink); }
.cline u { text-decoration: none; font-family: var(--data); color: var(--ink); }
.cline u.up { color: var(--up); }
.cline u.down { color: var(--down); }

/* The cascade head and basis venue strip sit inside their hero. */
.chero .cascade__head, .bahero .vstrip { margin: 0 20px 12px; }
.bhero .rcontrols, .pfhero .rcontrols { margin: 0 20px 10px; }
.bhero .sub { margin: 0 20px; font-size: 12.5px; color: var(--faint); }

/* --------------------------------------------------------------- portfolio */

.vitals { margin: 0 20px; }
.vitals__equity { display: grid; gap: 2px; margin-bottom: 8px; }
.vitals__equity i {
  font-style: normal;
  font-family: var(--data);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.vitals__equity b {
  font-family: var(--data);
  font-size: clamp(26px, 8vw, 36px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.vitals__equity small { font-size: 12px; color: var(--faint); }
.pfaddr { font-family: var(--data); font-size: 12px; color: var(--faint); margin-right: auto; }

/* Deposit, exit and key-export cards share one restrained security treatment.
   These are deliberately readable on a phone; an irreversible transaction
   should never make a full address or a fee hard to inspect. */
.routecard { display: grid; gap: 13px; }
.routecard h4, .routecard p { margin: 0; }
.routecard h4 { font-size: 17px; letter-spacing: -0.015em; }
.routecard > p { color: var(--muted); line-height: 1.55; font-size: 13px; }
.routecard__eyebrow { font-family: var(--data); letter-spacing: .1em; font-size: 10px; color: var(--up); }
.routecard .field { display: grid; gap: 6px; }
.routecard .field label { color: var(--faint); font: 10px var(--data); letter-spacing: .08em; text-transform: uppercase; }
.routecard .input { width: 100%; min-height: 44px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.22); color: var(--ink); padding: 10px 12px; font: 14px var(--data); }
.routecard .input:focus { border-color: var(--up); outline: none; }
.checkline { display: flex; gap: 9px; align-items: flex-start; color: var(--muted); font-size: 13px; line-height: 1.5; cursor: pointer; }
.checkline input { margin-top: 3px; accent-color: var(--up); }
.privatekey { display: block; overflow-wrap: anywhere; padding: 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #06080d; color: var(--ink); font: 12px/1.65 var(--data); user-select: text; }
.privatekey--blur { filter: blur(7px); user-select: none; }

/* SLX is deliberately a separate testnet desk: the cool cyan/lime treatment
   keeps it distinct from the orange live-perps shell at a glance. */
.slxhero, .slxmodal__hero { padding: 22px; margin-bottom: 14px; border: 1px solid rgba(127,227,245,.2); border-radius: 14px; background: radial-gradient(620px 230px at 80% 0%, rgba(127,227,245,.12), transparent 66%), radial-gradient(460px 220px at 0% 100%, rgba(235,255,153,.08), transparent 68%), #061b22; }
.slxhero__eyebrow { font: 11px var(--data); letter-spacing: .13em; color: #bdf5ff; }
.slxhero h1 { margin: 8px 0; font-size: clamp(30px, 7vw, 48px); letter-spacing: -.04em; }
.slxhero p { max-width: 64ch; margin: 0; color: var(--muted); line-height: 1.6; }
.slxhero__rail { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.slxchip { border: 1px solid rgba(127,227,245,.22); background: rgba(127,227,245,.07); border-radius: 999px; color: #bdeef7; padding: 5px 9px; font: 10px var(--data); letter-spacing: .06em; text-transform: uppercase; }
.slxchip--test { border-color: rgba(234,179,8,.4); background: rgba(234,179,8,.1); color: #f5d477; }
.slxmarkets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.slxmarket { min-height: 92px; display: grid; gap: 3px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(127,227,245,.025); }
.slxmarket b { font: 16px var(--data); color: #cfeef7; }.slxmarket span, .slxmarket i { color: var(--faint); font-size: 11px; font-style: normal; }.slxmarket i { color: #eab308; }
.slxmodal { display: grid; gap: 14px; }.slxmodal__hero h4 { margin: 8px 0; font-size: 24px; letter-spacing: -.035em; }.slxmodal__hero p { margin: 0; color: var(--muted); line-height: 1.55; }
.slxmodal__tabs { display:flex; gap:7px; overflow:auto; padding-bottom:2px; scrollbar-width:none; }.slxmodal__tab { flex:0 0 auto; border:1px solid var(--line); background:#08171d; color:var(--muted); border-radius:8px; padding:8px 11px; font:12px var(--data); cursor:pointer; }.slxmodal__tab:hover,.slxmodal__tab.on { border-color:rgba(127,227,245,.5); background:rgba(127,227,245,.1); color:#dffaff; }
.slxlive { display:grid; grid-template-columns:minmax(150px,.8fr) minmax(240px,1.2fr); gap:10px; }.slxlive__quote,.slxlive__book,.slxfund { border:1px solid var(--line); background:#08171d; border-radius:12px; padding:14px; }.slxlive__quote { display:flex; flex-direction:column; gap:7px; justify-content:center; }.slxlive__quote>span,.slxlive__label { color:var(--faint); font:10px var(--data); text-transform:uppercase; letter-spacing:.1em; }.slxlive__price { font:28px var(--data); letter-spacing:-.05em; color:#e7fbff; }.slxlive__move { font:12px var(--data); color:var(--faint); }.slxlive__move.up { color:#5ee5a3; }.slxlive__move.down { color:#ff8393; }.slxlive__spread { color:var(--muted); font-size:11px; }.slxlive__book { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.slxbook { min-height:72px; display:grid; align-content:start; gap:3px; }.slxbook__row { display:grid; grid-template-columns:1fr .9fr 1fr; gap:5px; font:10px var(--data); }.slxbook__row b { color:#b7dbe4; }.slxbook__row span { text-align:right; color:var(--muted); }.slxbook__row i { text-align:right; color:var(--faint); font-style:normal; }.slxbook__row.ask b { color:#ff8292; }.slxbook__row.bid b { color:#65dfa7; }.slxbook__empty { color:var(--faint); font-size:11px; }
.slxfund h5 { margin:7px 0 9px; font-size:16px; }.slxfund ol { margin:0 0 14px 18px; padding:0; display:grid; gap:7px; color:var(--muted); font-size:12px; line-height:1.45; }.slxfund li b { color:#e4f8ff; }.slxfund__actions { display:flex; flex-wrap:wrap; gap:8px; }.slxfund__actions button { min-height:38px; }.slxlive__connection { color:#90dff0; }
.slxsurface { max-width:1120px; margin:0 auto; padding:clamp(16px,3vw,28px); }
.venuepage__head { padding:16px 2px 2px; }.venuepage__head h2 { margin:5px 0; font-size:clamp(24px,4vw,34px); letter-spacing:-.04em; }.venuepage__head p { max-width:68ch; margin:0; color:var(--muted); line-height:1.5; }.venuepage__eyebrow { color:#8ddff0; font:10px var(--data); letter-spacing:.13em; }.venuepage { display:grid; gap:16px; }.venuepage__cta { margin-top:2px; padding:18px; border:1px solid rgba(127,227,245,.22); border-radius:12px; background:radial-gradient(480px 180px at 80% 0%,rgba(127,227,245,.09),transparent 65%),#08171d; }.venuepage__cta b { font-size:17px; }.venuepage__cta p { margin:6px 0 14px; color:var(--muted); }
@media(max-width:620px){.slxlive{grid-template-columns:1fr}.slxlive__book{min-height:145px}.slxlive__price{font-size:25px}}

.withdrawbalance { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid rgba(34,197,94,.25); border-radius: 12px; background: radial-gradient(230px 90px at 0 0, rgba(34,197,94,.12), transparent 78%), rgba(34,197,94,.035); }
.withdrawbalance > div { display: grid; gap: 2px; }.withdrawbalance span { color: var(--faint); font: 10px var(--data); letter-spacing: .1em; }.withdrawbalance b { color: var(--up); font: 24px var(--data); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }.withdrawbalance small { color: var(--muted); font-size: 11px; }
.withdrawbalance__max { flex: none; border: 1px solid rgba(34,197,94,.4); border-radius: 8px; background: rgba(34,197,94,.1); color: var(--up); padding: 7px 10px; font: 11px var(--data); font-weight: 700; cursor: pointer; }

/* ------------------------------------------------------------------ mirror */

.mhero { padding-bottom: 8px; }
.mhero__grid {
  display: grid;
  gap: 8px;
  align-items: center;
  padding: 8px 0 12px;
}
@media (min-width: 620px) {
  .mhero__grid { grid-template-columns: minmax(0, 1fr) auto; padding-right: 24px; }
}
.mstage { position: relative; min-height: 168px; }
.mhero__score { display: flex; justify-content: center; }

/* The terminal's mark turns with the pointer like every other header's. The
   perspective has to live on the anchor, or the rotation on the image inside is
   a flat squash rather than a turn. */
.topbar__brand { perspective: 420px; }
.topbar__brand img {
  transform: rotateX(var(--mrx, 0deg)) rotateY(var(--mry, 0deg));
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .topbar__brand img { transition: none; } }

/* =============================================================================
   The tab bar and the sheet.

   The old bar laid every surface out with grid-auto-flow: column, so eleven
   items shared 390px and each got 35px with a clipped 8.5px label. That is not a
   navigation, it is a list that happens to be horizontal. This is four slots and
   a More that opens a sheet, which is what a phone actually does.
   ============================================================================= */

.nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 45;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  gap: 2px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: rgba(9, 9, 14, 0.9);
  backdrop-filter: blur(18px) saturate(1.25);
  border-top: 1px solid var(--line-soft);
}

/* A lit edge, so the bar reads as a surface the page sits above rather than a
   strip glued to the bottom. */
.nav::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.55), transparent);
}

.tab {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  /* 52px of height and a full column of width: a tab has to be hittable with a
     thumb without aiming. */
  min-height: 52px;
  padding: 6px 2px;
  border: 0;
  border-radius: 14px;
  background: none;
  font: inherit;
  text-decoration: none;
  color: var(--faint);
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.tab__ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  transition: transform 320ms cubic-bezier(0.34, 1.4, 0.5, 1);
}
.tab svg { width: 21px; height: 21px; }
.tab__label {
  font-family: var(--data);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  /* Never wraps and never clips: a two-word label is truncated with an ellipsis
     rather than becoming two cramped lines. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab.on { color: var(--org); background: rgba(249, 115, 22, 0.1); }
.tab.on .tab__ico { transform: translateY(-2px) scale(1.08); }
.tab:active .tab__ico { transform: scale(0.92); }

/* --------------------------------------------------------------- the sheet */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.sheet.on { opacity: 1; pointer-events: auto; }
.sheet__back { position: absolute; inset: 0; background: rgba(4, 4, 8, 0.68); backdrop-filter: blur(3px); }

.sheet__card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, #14141f, #0b0b12);
  box-shadow: 0 -24px 60px -30px rgba(0, 0, 0, 0.95);
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sheet.on .sheet__card { transform: none; }

.sheet__grip {
  display: block;
  width: 38px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 2px;
  background: var(--line);
}
.sheet__card h3 {
  margin: 0 0 12px;
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
}

.sheet__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 480px) { .sheet__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sheet__item {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  text-decoration: none;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.015);
  transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.sheet__item b { font-family: var(--data); font-size: 11px; letter-spacing: 0.04em; }
.sheet__ico { display: grid; place-items: center; width: 26px; height: 26px; }
.sheet__item svg { width: 22px; height: 22px; }
.sheet__item:active { transform: scale(0.96); }
.sheet__item.on { color: var(--org); border-color: rgba(249, 115, 22, 0.45); background: rgba(249, 115, 22, 0.08); }

@media (prefers-reduced-motion: reduce) {
  .tab, .tab__ico, .sheet, .sheet__card, .sheet__item { transition: none; }
}

/* On a wide screen the bar becomes the rail again and every surface fits, so
   nothing is hidden behind More. */
@media (min-width: 900px) {
  .nav {
    position: sticky;
    top: var(--top);
    bottom: auto;
    left: auto;
    right: auto;
    height: calc(100svh - var(--top));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    align-content: start;
    gap: 3px;
    padding: 12px 9px;
    border-top: 0;
    border-right: 1px solid var(--line-soft);
    background: transparent;
    backdrop-filter: none;
  }
  .nav::before { display: none; }
  .tab { min-height: 58px; border-radius: var(--r); }
  .tab__label { font-size: 9px; }
  .tab.on { background: rgba(249, 115, 22, 0.09); }
}

/* Superluminal desk: phone first. The trading panels stack into one clear flow
   before becoming a three-column terminal on screens that can actually hold it. */
.slxterminal { display:grid; gap:10px; min-width:0; }.slxlive__quote,.slxlive__book,.slxorder { min-width:0; border:1px solid var(--line); background:linear-gradient(160deg,rgba(11,31,38,.96),rgba(6,20,27,.98)); border-radius:14px; padding:14px; overflow:hidden; }.slxlive__quote { display:grid; gap:7px; }.slxchart { height:150px; margin:5px -5px -4px; border-top:1px solid rgba(127,227,245,.1); background:linear-gradient(180deg,rgba(127,227,245,.045),transparent); }.slxchart svg { display:block; width:100%; height:100%; }.slxchart__area { fill:rgba(78,218,179,.12); }.slxchart__line { fill:none; stroke:#70e8d0; stroke-width:2.4; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }.slxlive__book { grid-template-columns:1fr 1fr; gap:10px; }.slxbook__row { grid-template-columns:minmax(0,1fr) minmax(0,.85fr) minmax(0,1fr); font-size:10px; }.slxbook__row>* { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.slxorder { display:grid; gap:11px; }.slxorder h5 { margin:0; font-size:18px; letter-spacing:-.03em; }.slxorder p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }.slxorder__stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }.slxorder__stats span { display:grid; gap:3px; min-width:0; padding:9px; border:1px solid rgba(127,227,245,.12); border-radius:9px; color:var(--faint); font:9px var(--data); letter-spacing:.06em; text-transform:uppercase; }.slxorder__stats b { overflow:hidden; color:#d5f6fb; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.slxorder .primary,.slxfund__actions button { width:100%; justify-content:center; }.slxfund { padding:15px; }.slxfund__actions { display:grid; grid-template-columns:1fr; }.slxmodal__tabs { margin:0 -2px; padding:2px 2px 6px; -webkit-overflow-scrolling:touch; }.slxmodal__tab { min-height:39px; }
@media(min-width:680px){.slxorder .primary,.slxfund__actions button{width:auto}.slxfund__actions{display:flex}.slxchart{height:180px}.slxterminal{grid-template-columns:minmax(0,1.25fr) minmax(250px,.9fr)}.slxlive__quote{grid-row:span 2}.slxorder{align-content:start}.slxorder .primary{margin-top:3px}}
@media(min-width:1080px){.slxterminal{grid-template-columns:minmax(360px,1.45fr) minmax(275px,.95fr) minmax(230px,.8fr)}.slxlive__quote{grid-row:auto}.slxchart{height:210px}.slxlive__book{min-height:280px}.slxorder{min-height:280px}}
@media(min-width:1140px){.tradeshell > .venuepage{grid-column:1 / -1;}}
.slxorder__sides{display:grid;grid-template-columns:1fr 1fr;gap:7px}.slxorder__sides button{min-height:40px;border:1px solid var(--line);border-radius:8px;background:#0b171d;color:var(--muted);font:700 13px var(--data);cursor:pointer}.slxorder__sides button.on{border-color:rgba(14,203,129,.58);background:linear-gradient(180deg,rgba(14,203,129,.28),rgba(14,203,129,.12));color:#a7f5d6}.slxorder__field{display:grid;gap:6px}.slxorder__field label,.slxorder__range span{color:var(--faint);font:10px var(--data);letter-spacing:.08em;text-transform:uppercase}.slxorder__field input{width:100%;min-height:42px;border:1px solid var(--line);border-radius:8px;background:#081218;color:var(--ink);padding:0 11px;font:15px var(--data);outline:0}.slxorder__field input:focus,.slxfaucet__input:focus{border-color:rgba(112,232,208,.65);box-shadow:0 0 0 3px rgba(112,232,208,.1)}.slxorder__range{display:grid;gap:7px}.slxorder__range>div{display:flex;justify-content:space-between;gap:8px}.slxorder__range b{color:#d5f6fb;font:11px var(--data)}.slxorder__range input{width:100%;accent-color:#70e8d0}.slxorder__preview{min-height:38px;padding:9px;border:1px solid rgba(112,232,208,.14);border-radius:8px;background:rgba(112,232,208,.045);color:var(--muted);font:10px/1.45 var(--data)}.slxfund>p{margin:6px 0 12px;color:var(--muted);font-size:12px;line-height:1.5}.slxfaucet{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:14px}.slxfaucet__input{min-width:0;min-height:42px;border:1px solid var(--line);border-radius:8px;background:#081218;color:var(--ink);padding:0 11px;font:12px var(--data);outline:0}.slxfaucet__input.bad{border-color:var(--down);box-shadow:0 0 0 3px rgba(246,70,93,.12)}.slxstage{display:grid;gap:12px}.slxstage p{margin:0;color:var(--muted);line-height:1.55}.slxstage .primary{justify-content:center}@media(min-width:680px){.slxfaucet{grid-template-columns:minmax(0,1fr) auto}.slxfaucet .primary{width:auto}}

/* Shared action system. Controls stay compact where density matters, while
   every user-facing action has the same readable hierarchy and focus state. */
button.primary,.btn.primary,.btn:not(.ghost):not(.danger):not(.sell),button.soft,.btn.ghost,.submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 15px;border:1px solid transparent;border-radius:8px;font:800 12px var(--data);letter-spacing:.015em;cursor:pointer;transition:transform 160ms ease,filter 160ms ease,box-shadow 160ms ease,border-color 160ms ease}.btn:not(.ghost):not(.danger):not(.sell),button.primary{background:linear-gradient(180deg,#ffd95f,#e9ac09);border-color:rgba(255,218,98,.68);box-shadow:0 10px 22px -13px rgba(240,185,11,.95),inset 0 1px 0 rgba(255,255,255,.48);color:#211800}.btn.ghost,button.soft{border-color:#35424d;background:linear-gradient(180deg,#182128,#10171d);box-shadow:inset 0 1px 0 rgba(255,255,255,.045);color:#dce8ed}.submit{box-shadow:0 12px 26px -15px rgba(14,203,129,.85),inset 0 1px 0 rgba(255,255,255,.25)}button.primary:hover,.btn:not(.ghost):not(.danger):not(.sell):hover,.submit:hover{filter:brightness(1.07);transform:translateY(-1px)}button.soft:hover,.btn.ghost:hover{border-color:rgba(240,185,11,.58);color:#fff;transform:translateY(-1px)}button.primary:active,.btn:active,.submit:active{transform:translateY(0) scale(.985)}button.primary:focus-visible,button.soft:focus-visible,.btn:focus-visible,.submit:focus-visible,.venuechip:focus-visible,.tab:focus-visible{outline:2px solid #8eeaff;outline-offset:2px}button.primary:disabled,button.soft:disabled,.btn:disabled,.submit:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none;box-shadow:none}.slxterminal button.primary,.slxfund button.primary,.slxstage button.primary{background:linear-gradient(180deg,#eaff9a,#cde85b);border-color:rgba(234,255,154,.7);box-shadow:0 12px 26px -14px rgba(205,232,91,.85),inset 0 1px 0 rgba(255,255,255,.5);color:#0a180d}.slxterminal button.soft,.slxfund button.soft{border-color:rgba(112,232,208,.3);background:rgba(112,232,208,.08);color:#bdf8ec}
.venuedesk{display:grid;gap:14px}.venuedesk__live{min-width:0;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,rgba(16,29,36,.96),rgba(8,16,21,.98));padding:14px}.venuedesk__head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:13px}.venuedesk__head div{display:grid;gap:4px}.venuedesk__head span,.venuedesk__campaign>span{color:#8edced;font:10px var(--data);letter-spacing:.11em}.venuedesk__head b{font-size:17px;letter-spacing:-.025em}.venuedesk__head small{color:var(--faint);font:10px var(--data);text-align:right}.venuefunding{display:grid;border-top:1px solid var(--line)}.venuefunding__head,.venuefunding__row{display:grid;grid-template-columns:minmax(60px,1fr) minmax(100px,1.45fr) minmax(70px,1fr);gap:8px;align-items:center}.venuefunding__head{padding:8px 0;color:var(--faint);font:9px var(--data);letter-spacing:.07em;text-transform:uppercase}.venuefunding__row{padding:10px 0;border-top:1px solid rgba(38,48,58,.7);font:11px var(--data)}.venuefunding__row b{color:#e2f5f8}.venuefunding__row span{text-align:right}.venuedesk__campaign{display:grid;gap:4px;padding:15px;border:1px solid rgba(240,185,11,.3);border-radius:12px;background:radial-gradient(420px 130px at 0 0,rgba(240,185,11,.12),transparent 70%),#11171d}.venuedesk__campaign b{font:20px var(--data);color:var(--org-2)}.venuedesk__campaign p{margin:0;color:var(--muted);font-size:12px}.venueexecution{display:grid;gap:6px;padding:15px;border:1px solid var(--line);border-radius:12px;background:#0c1318}.venueexecution b{font-size:14px}.venueexecution p{max-width:80ch;margin:0;color:var(--muted);font-size:12px;line-height:1.55}@media(max-width:560px){.venuedesk__head{align-items:start;flex-direction:column}.venuedesk__head small{text-align:left}.venuefunding__head,.venuefunding__row{grid-template-columns:minmax(52px,.8fr) minmax(95px,1.3fr) minmax(64px,.9fr);gap:5px}.venuefunding__row{font-size:10px}}

/* Radar: thin frame over the four intelligence surfaces */
.radar__tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.radartab{display:flex;flex-direction:column;gap:1px;padding:8px 14px;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:10px;text-decoration:none;color:inherit;min-width:96px}
.radartab b{font-size:13px}
.radartab span{font-size:11px;opacity:.6}
.radartab.on{border-color:var(--accent,#4b7bff);background:rgba(75,123,255,.08)}
.watchlink{margin-top:6px;display:inline-block;opacity:.85;text-decoration:underline;color:inherit}
.ticket__cost{margin-top:8px}