/* PERPSWORK -- Uniswap pink, glass panels, terminal density.
   One stylesheet, no build step, no framework.

   The tension in here: glass wants air and soft edges, a trading board wants
   density and hard alignment. The resolution is that the CHROME is glass --
   panels, header, ticket, cards -- and the DATA is not. Numbers sit on flat
   surfaces at tabular widths with no blur behind them, because a price you have
   to squint at is a broken price. */

:root {
  /* Uniswap */
  --pink:       #ff007a;
  --pink-2:     #fc72ff;
  --violet:     #8c6ef6;
  --blue:       #4c82fb;
  --pink-soft:  rgba(255, 0, 122, 0.14);
  --pink-line:  rgba(255, 0, 122, 0.34);

  --bg:         #0a0510;
  --bg-2:       #0d0715;
  --ink:        #05020a;

  --glass:      rgba(255, 255, 255, 0.045);
  --glass-2:    rgba(255, 255, 255, 0.028);
  --glass-hi:   rgba(255, 255, 255, 0.075);
  --brd:        rgba(255, 255, 255, 0.085);
  --brd-soft:   rgba(255, 255, 255, 0.05);
  --solid:      #140b1e;
  --solid-2:    #190f24;

  --text:       #f4eff8;
  --text-2:     #c3b8d0;
  --dim:        #8d81a0;
  --dimmer:     #61566f;

  --up:         #21c77c;
  --up-bg:      rgba(33, 199, 124, 0.13);
  --down:       #ff4d6a;
  --down-bg:    rgba(255, 77, 106, 0.13);
  --idx:        #8ea0c8;

  --sect-rwa:      #fc72ff;
  --sect-rates:    #6ea8fe;
  --sect-metals:   #f0b45c;
  --sect-energy:   #ff8a5c;
  --sect-property: #b389e8;
  --sect-freight:  #4fc9d8;
  --sect-compute:  #4fe0a8;
  --sect-carbon:   #a8d95f;
  --sect-credit:   #ff6fa5;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;

  --r:    12px;
  --r-sm: 8px;
  --gap:  9px;
  --lift: 0 10px 30px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.07);
  --lift-sm: 0 4px 14px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--text);
  font-family: var(--sans); font-size: 13px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  background: var(--bg);
}
/* The glow sits on its own fixed layer so no panel has to composite against a
   moving gradient, and it never scrolls or reflows with content. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% -8%,  rgba(255,0,122,.20), transparent 62%),
    radial-gradient(760px 460px at 92% 6%,   rgba(140,110,246,.17), transparent 60%),
    radial-gradient(1000px 700px at 70% 108%, rgba(252,114,255,.11), transparent 64%),
    linear-gradient(180deg, #0b0512 0%, #08040e 100%);
}

.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.012em; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.09); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,0,122,.4); }
::-webkit-scrollbar-track { background: transparent; }

.ic { display: inline-flex; width: 1em; height: 1em; flex: 0 0 auto; }
.ic svg { width: 100%; height: 100%; display: block; }

.up { color: var(--up); }
.down { color: var(--down); }
.pink { color: var(--pink-2); }
.dim { color: var(--dim); }
.dimmer { color: var(--dimmer); }

/* The glass recipe, in one place. */
.glass {
  background: linear-gradient(158deg, var(--glass), var(--glass-2));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  box-shadow: var(--lift);
}

/* ---------- shell ---------- */
#app { display: flex; flex-direction: column; height: 100vh; gap: var(--gap); padding: var(--gap); }

.top {
  flex: 0 0 auto; height: 52px;
  display: flex; align-items: center; gap: 16px; padding: 0 14px;
  background: linear-gradient(158deg, var(--glass), var(--glass-2));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--brd); border-radius: var(--r); box-shadow: var(--lift);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand .ic { width: 24px; height: 24px; color: var(--pink); filter: drop-shadow(0 0 9px rgba(255,0,122,.55)); }
.brand b {
  font-size: 14.5px; letter-spacing: 0.15em; font-weight: 660; white-space: nowrap;
  background: linear-gradient(96deg, #fff 8%, var(--pink-2) 58%, var(--pink) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.brand small { color: var(--dimmer); font-size: 9px; letter-spacing: 0.13em; display: block; margin-top: -2px; }

.navtabs { display: flex; gap: 3px; }
.navtabs button {
  padding: 7px 14px; border-radius: var(--r-sm); color: var(--dim);
  font-size: 11.5px; letter-spacing: 0.07em; font-weight: 570; white-space: nowrap;
  border: 1px solid transparent; transition: color .14s, background .14s, border-color .14s;
}
.navtabs button:hover { color: var(--text); background: var(--glass-hi); }
.navtabs button[aria-selected="true"] {
  color: #fff; border-color: var(--pink-line);
  background: linear-gradient(150deg, rgba(255,0,122,.30), rgba(252,114,255,.13));
  box-shadow: 0 3px 14px rgba(255,0,122,.28), inset 0 1px 0 rgba(255,255,255,.16);
}

.top-right { margin-left: auto; display: flex; align-items: center; gap: 11px; min-width: 0; }
.simclock {
  display: flex; align-items: center; gap: 9px; padding: 5px 10px;
  background: rgba(0,0,0,.26); border: 1px solid var(--brd-soft); border-radius: var(--r-sm);
}
.simclock .lbl { color: var(--dimmer); font-size: 8.5px; letter-spacing: 0.11em; white-space: nowrap; }
.simclock .val { font-size: 11.5px; white-space: nowrap; }
.speeds { display: flex; gap: 2px; }
.speeds button {
  padding: 3px 7px; font-size: 10px; color: var(--dim); border-radius: 5px; font-family: var(--mono);
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px;
}
.speeds button .ic { width: 10px; height: 10px; }
.speeds button:hover { color: var(--text); background: var(--glass-hi); }
.speeds button[aria-pressed="true"] { color: #fff; background: var(--pink); box-shadow: 0 2px 10px rgba(255,0,122,.45); }

.equity { text-align: right; white-space: nowrap; }
.equity .k { color: var(--dimmer); font-size: 8.5px; letter-spacing: 0.11em; }
.equity .v { font-size: 15px; }

/* ---------- session bar ---------- */
.sessionbar {
  /* Wraps. This strip is 1420px of content and used to scroll horizontally with
     a hidden scrollbar, which put the LIVE FEEDS and SOLE VENUE counters -- the
     two aggregate numbers the whole venue is about -- off the right edge of any
     screen narrower than a 1440. Wrapping costs a row and hides nothing. */
  flex: 0 0 auto; min-height: 34px; display: flex; align-items: center; flex-wrap: wrap;
  row-gap: 2px; padding: 5px 13px;
  background: rgba(255,255,255,.028);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--brd-soft); border-radius: var(--r-sm);
}
.sessionbar::-webkit-scrollbar { display: none; }
.sessionbar .sb-label { color: var(--dimmer); font-size: 8.5px; letter-spacing: 0.13em; margin-right: 13px; white-space: nowrap; }
.venue {
  display: flex; align-items: center; gap: 6px; padding: 0 13px; white-space: nowrap;
  border-left: 1px solid var(--brd-soft); height: 17px;
}
.venue:first-of-type { border-left: 0; padding-left: 0; }
@media (max-width: 1200px) { .sessionbar .sb-label { display: none; } }
.venue .ic { width: 10px; height: 10px; }
.venue .vn { font-size: 10.5px; color: var(--text-2); font-weight: 540; }
.venue .vs { font-size: 9.5px; font-family: var(--mono); letter-spacing: .04em; }
.venue.is-open .ic, .venue.is-open .vs { color: var(--up); }
.venue.is-solo .ic, .venue.is-solo .vs { color: var(--pink-2); }
.venue.is-print .ic, .venue.is-print .vs { color: var(--idx); }
.venue.is-live .ic, .venue.is-live .vs { color: var(--pink); }
.venue .cd { font-size: 9.5px; color: var(--dimmer); font-family: var(--mono); }

/* ---------- footer ---------- */
.foot {
  flex: 0 0 auto; height: 28px; display: flex; align-items: center; gap: 14px;
  padding: 0 13px; font-size: 10px; color: var(--dimmer); letter-spacing: 0.05em;
  border-top: 1px solid var(--brd-soft);
}
.foot .sep { flex: 1; }
.foot b { color: var(--text-2); font-weight: 560; }
.foot .lit { display: inline-flex; align-items: center; gap: 5px; color: var(--dim); }
.foot .lit i { width: 5px; height: 5px; border-radius: 50%; background: var(--up); box-shadow: 0 0 7px var(--up); }
.foot .lit.off i { background: var(--down); box-shadow: 0 0 7px var(--down); }
.foot a { color: var(--pink-2); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* ---------- trade layout ---------- */
.view { flex: 1 1 auto; min-height: 0; }
.trade {
  display: grid; height: 100%; gap: var(--gap);
  grid-template-columns: 262px minmax(0,1fr) 218px 288px;
}
.pane {
  min-width: 0; min-height: 0; overflow: hidden;
  background: linear-gradient(158deg, var(--glass), var(--glass-2));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--brd); border-radius: var(--r); box-shadow: var(--lift);
}
.center { display: grid; grid-template-rows: auto minmax(0,1fr) 224px; gap: var(--gap); min-width: 0; min-height: 0; }

/* ---------- market rail ---------- */
.rail { display: flex; flex-direction: column; }
.rail-search {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--brd-soft);
}
.rail-search .ic { width: 13px; height: 13px; color: var(--dimmer); }
.rail-search input { flex: 1; background: none; border: 0; outline: none; font-size: 12px; min-width: 0; }
.rail-search input::placeholder { color: var(--dimmer); }
.rail-head {
  display: grid; grid-template-columns: minmax(0,1fr) 66px 52px; gap: 5px;
  padding: 6px 12px; font-size: 8.5px; letter-spacing: 0.1em; color: var(--dimmer);
  border-bottom: 1px solid var(--brd-soft);
}
.rail-head span:not(:first-child) { text-align: right; }
.rail-list { overflow-y: auto; overflow-x: hidden; flex: 1; }
.sect-head {
  display: flex; align-items: center; gap: 7px; padding: 9px 12px 4px;
  font-size: 8.5px; letter-spacing: 0.13em; color: var(--dimmer);
  position: sticky; top: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(12,6,20,.97) 62%, rgba(12,6,20,0));
}
.sect-head::after { content: ''; flex: 1; height: 1px; background: var(--brd-soft); }
.sect-dot { width: 6px; height: 6px; border-radius: 2px; flex: 0 0 auto; }
.mrow {
  display: grid; grid-template-columns: minmax(0,1fr) 66px 52px; gap: 5px; align-items: center;
  padding: 5px 12px; cursor: pointer; border-left: 2px solid transparent;
}
.mrow:hover { background: var(--glass-hi); }
.mrow[aria-current="true"] {
  border-left-color: var(--pink);
  background: linear-gradient(90deg, rgba(255,0,122,.16), rgba(255,0,122,.02));
}
.mrow .mid { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mrow .tk { font-size: 11px; font-weight: 600; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .sess-dot { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto; }
.sess-dot.open { background: var(--up); }
.sess-dot.solo { background: var(--pink-2); box-shadow: 0 0 0 2px rgba(252,114,255,.16); }
.sess-dot.print { background: var(--idx); }
.mrow .px { text-align: right; font-size: 11.5px; overflow: hidden; }
.mrow .ch { text-align: right; font-size: 10.5px; overflow: hidden; }
.livedot { width: 4px; height: 4px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 6px var(--pink); flex: 0 0 auto; }

/* ---------- market header ---------- */
.mhead {
  /* Wraps rather than scrolls. A horizontally scrolling header with a hidden
     scrollbar puts the price source and the funding countdown off the right
     edge with nothing on screen saying they are there -- so at narrow widths
     the row simply becomes two rows and everything stays visible. */
  display: flex; align-items: stretch; flex-wrap: wrap; min-width: 0;
}

.mh-main { padding: 10px 16px; display: flex; flex-direction: column; justify-content: center; min-width: 0; max-width: 100%; flex: 1 1 190px; }
.mh-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mh-title b { font-size: 15.5px; letter-spacing: 0.015em; }
.mh-sub { font-size: 10px; color: var(--dim); margin-top: 2px; line-height: 1.4; }
.mh-price { display: flex; padding: 10px 18px; justify-content: center; flex-direction: column; flex: 0 0 auto; }
.mh-price .p { font-size: 22px; line-height: 1.15; }
.mh-price .c { font-size: 11px; margin-top: 1px; }
.stat {
  /* flex:0 0 auto, not the default 0 1 auto. As a shrinkable item these cells
     were being squeezed to 101px with 122px of content inside a nowrap box,
     which clips silently -- the funding countdown simply stopped existing. */
  flex: 0 0 auto;
  padding: 10px 13px; display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid var(--brd-soft);
}
.stat .k { font-size: 8.5px; letter-spacing: 0.11em; color: var(--dimmer); white-space: nowrap; }
.stat .v { font-size: 12px; margin-top: 3px; white-space: nowrap; }
.stat .sub { font-size: 9.5px; color: var(--dim); white-space: nowrap; margin-top: 1px; font-family: var(--mono); }
/* Open interest and volume are on the BOARD page too. They are the first thing
   to go when the header runs out of room, so the numbers that are ONLY here --
   index, basis, funding, price source -- never scroll out of sight. */
/* Open interest and volume are the first to go when space is short -- the
   BOARD page carries both in full, so nothing is lost. */
@media (max-width: 1560px) { .stat.opt { display: none; } }
/* The first cell of a wrapped second row has no left neighbour to divide from. */
.mhead .stat:first-child { border-left: 0; }

.sesspill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 20px;
  font-size: 9px; letter-spacing: 0.09em; font-family: var(--mono); white-space: nowrap;
  border: 1px solid transparent;
}
.sesspill .ic { width: 9px; height: 9px; }
.sesspill.open  { background: var(--up-bg); color: var(--up); border-color: rgba(33,199,124,.3); }
.sesspill.solo  { background: var(--pink-soft); color: var(--pink-2); border-color: var(--pink-line); }
.sesspill.print { background: rgba(142,160,200,.13); color: var(--idx); border-color: rgba(142,160,200,.28); }
.sesspill.live  { background: linear-gradient(140deg, rgba(255,0,122,.3), rgba(252,114,255,.14)); color: #fff; border-color: var(--pink-line); }

.solobar {
  display: flex; align-items: center; gap: 9px; padding: 6px 15px;
  background: linear-gradient(90deg, rgba(255,0,122,.15), rgba(255,0,122,.03));
  border-top: 1px solid var(--pink-line);
  font-size: 10.5px; color: #f5cfe4; line-height: 1.5;
}
.solobar .ic { width: 12px; height: 12px; color: var(--pink-2); }
.solobar b { color: #fff; font-weight: 600; }

/* ---------- chart ---------- */
.chartwrap { display: flex; flex-direction: column; }
.chart-bar { display: flex; align-items: center; gap: 3px; padding: 7px 11px; border-bottom: 1px solid var(--brd-soft); flex-wrap: wrap; }
.chart-bar button { padding: 3px 9px; font-size: 10px; color: var(--dim); border-radius: 6px; font-family: var(--mono); }
.chart-bar button:hover { color: var(--text); background: var(--glass-hi); }
.chart-bar button[aria-pressed="true"] { color: #fff; background: var(--pink); box-shadow: 0 2px 10px rgba(255,0,122,.4); }
.chart-legend { margin-left: auto; display: flex; gap: 13px; font-size: 9.5px; color: var(--dim); align-items: center; white-space: nowrap; }
.chart-legend i { display: inline-block; width: 13px; height: 0; border-top: 2px solid; margin-right: 5px; vertical-align: middle; }
.chart-legend .l-mark i { border-color: var(--up); }
.chart-legend .l-idx i { border-top-style: dashed; border-color: var(--idx); }
.chart-legend .l-solo i { border-top: 9px solid rgba(255,0,122,.3); height: 9px; }
canvas.chart { flex: 1; width: 100%; min-height: 0; display: block; cursor: crosshair; }

/* ---------- book ---------- */
.book { display: flex; flex-direction: column; }
.panel-h {
  display: flex; align-items: center; gap: 8px; padding: 8px 11px; flex: 0 0 auto;
  border-bottom: 1px solid var(--brd-soft); font-size: 8.5px; letter-spacing: 0.13em; color: var(--dimmer);
}
.panel-h .ic { width: 12px; height: 12px; }
.panel-h .r { margin-left: auto; font-family: var(--mono); letter-spacing: 0; white-space: nowrap; }
.book-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; padding: 5px 11px;
  font-size: 8.5px; letter-spacing: 0.08em; color: var(--dimmer); border-bottom: 1px solid var(--brd-soft); flex: 0 0 auto;
}
.book-cols span:not(:first-child) { text-align: right; }
.book-side { flex: 1 1 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.book-side.asks { justify-content: flex-end; }
.blvl {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px;
  padding: 1.5px 11px; font-size: 10px; font-family: var(--mono); cursor: pointer;
}
.blvl:hover { background: var(--glass-hi); }
.blvl span { position: relative; overflow: hidden; text-overflow: ellipsis; }
.blvl span:not(:first-child) { text-align: right; }
.blvl .bar { position: absolute; right: 0; top: 0; bottom: 0; pointer-events: none; z-index: 0; }
.blvl.ask .p { color: var(--down); }
.blvl.bid .p { color: var(--up); }
.blvl.ask .bar { background: var(--down-bg); }
.blvl.bid .bar { background: var(--up-bg); }
.book-mid {
  display: flex; align-items: center; gap: 8px; padding: 6px 11px; flex: 0 0 auto;
  border-top: 1px solid var(--brd-soft); border-bottom: 1px solid var(--brd-soft);
  font-family: var(--mono); font-size: 12px; background: rgba(0,0,0,.2);
}
.book-mid .sp { margin-left: auto; font-size: 9.5px; color: var(--dim); }
.tape { display: flex; flex-direction: column; min-height: 0; flex: 0 0 38%; border-top: 1px solid var(--brd-soft); }
.tape-list { overflow-y: auto; flex: 1; }
.trow { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 46px; gap: 4px; padding: 1.5px 11px; font-size: 10px; font-family: var(--mono); }
.trow span { overflow: hidden; text-overflow: ellipsis; }
.trow span:nth-child(2) { text-align: right; }
.trow span:nth-child(3) { text-align: right; color: var(--dimmer); }
.trow.mine { background: var(--pink-soft); }

/* ---------- ticket ---------- */
.ticket { display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.seg { display: flex; gap: 5px; padding: 11px 11px 0; }
.seg button {
  flex: 1; padding: 9px 0; text-align: center; font-size: 11.5px; font-weight: 620;
  border-radius: var(--r-sm); background: rgba(0,0,0,.25); color: var(--dim); letter-spacing: 0.04em;
  border: 1px solid var(--brd-soft); transition: .14s;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"].buy { background: linear-gradient(150deg, #21c77c, #14a163); color: #04150c; border-color: transparent; box-shadow: 0 4px 16px rgba(33,199,124,.34); }
.seg button[aria-pressed="true"].sell { background: linear-gradient(150deg, #ff4d6a, #d92f4f); color: #1c0409; border-color: transparent; box-shadow: 0 4px 16px rgba(255,77,106,.34); }
.subseg { display: flex; gap: 3px; padding: 9px 11px 0; }
.subseg button { flex: 1; padding: 6px 0; font-size: 10px; color: var(--dim); border-radius: 6px; letter-spacing: 0.05em; }
.subseg button[aria-pressed="true"] { color: #fff; background: var(--glass-hi); border: 1px solid var(--brd); }

.field { padding: 10px 11px 0; }
.field label { display: block; font-size: 8.5px; letter-spacing: 0.11em; color: var(--dimmer); margin-bottom: 5px; }
.inbox {
  display: flex; align-items: center; gap: 7px; background: rgba(0,0,0,.3);
  border: 1px solid var(--brd-soft); border-radius: var(--r-sm); padding: 8px 10px;
  transition: border-color .14s, box-shadow .14s;
}
.inbox:focus-within { border-color: var(--pink-line); box-shadow: 0 0 0 3px rgba(255,0,122,.11); }
.inbox input { flex: 1; background: none; border: 0; outline: none; font-family: var(--mono); font-size: 13px; min-width: 0; }
.inbox .suf { font-size: 10px; color: var(--dim); font-family: var(--mono); white-space: nowrap; }
.inbox .maxbtn { font-size: 9.5px; color: var(--pink-2); letter-spacing: 0.08em; padding: 2px 6px; border-radius: 5px; white-space: nowrap; }
.inbox .maxbtn:hover { background: var(--pink-soft); }

.levrow { display: flex; align-items: center; gap: 10px; padding: 12px 11px 0; }
.levrow input[type=range] { flex: 1; accent-color: var(--pink); height: 3px; min-width: 0; }
.levrow .lv { font-family: var(--mono); font-size: 12px; min-width: 32px; text-align: right; color: var(--pink-2); }
.pcts { display: flex; gap: 4px; padding: 9px 11px 0; }
.pcts button { flex: 1; padding: 5px 0; font-size: 9.5px; color: var(--dim); background: rgba(0,0,0,.25); border-radius: 6px; font-family: var(--mono); border: 1px solid var(--brd-soft); }
.pcts button:hover { color: #fff; border-color: var(--pink-line); }

.checks { display: flex; gap: 12px; padding: 11px 11px 0; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--dim); cursor: pointer; }
.chk input { accent-color: var(--pink); }

.readout { padding: 11px 11px 0; }
.rline { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 10.5px; }
.rline .k { color: var(--dim); white-space: nowrap; }
.rline .v { font-family: var(--mono); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rline.warn .v { color: var(--pink-2); }

.submit { padding: 12px 11px 13px; }
.submit button {
  width: 100%; padding: 12px 0; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 660;
  letter-spacing: 0.06em; transition: .14s;
}
.submit button.buy { background: linear-gradient(150deg, #21c77c, #14a163); color: #04150c; box-shadow: 0 5px 20px rgba(33,199,124,.32); }
.submit button.sell { background: linear-gradient(150deg, #ff4d6a, #d92f4f); color: #1c0409; box-shadow: 0 5px 20px rgba(255,77,106,.32); }
.submit button:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.submit button:not(:disabled):hover { filter: brightness(1.09); transform: translateY(-1px); }

.acct { border-top: 1px solid var(--brd-soft); margin-top: 5px; }
.acct-body { padding: 5px 11px 13px; }
.mbar { height: 5px; border-radius: 3px; background: rgba(0,0,0,.35); overflow: hidden; margin: 8px 0 4px; }
.mbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--up), #14a163); transition: width .25s; }
.mbar.mid i { background: linear-gradient(90deg, var(--pink-2), var(--pink)); }
.mbar.hot i { background: linear-gradient(90deg, var(--down), #b81f3c); }

/* ---------- bottom panel ---------- */
.bottom { display: flex; flex-direction: column; }
.btabs { display: flex; gap: 3px; padding: 8px 11px; border-bottom: 1px solid var(--brd-soft); align-items: center; flex: 0 0 auto; flex-wrap: wrap; }
.btabs button { padding: 5px 11px; font-size: 10.5px; color: var(--dim); border-radius: 6px; letter-spacing: 0.05em; white-space: nowrap; }
.btabs button:hover { color: var(--text); }
.btabs button[aria-selected="true"] { color: #fff; background: var(--glass-hi); border: 1px solid var(--brd); }
.btabs .count { font-size: 9px; color: var(--pink-2); font-family: var(--mono); margin-left: 5px; }
.btabs .right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.btabs .right button { color: var(--dim); font-size: 10px; }
.btabs .right button:hover { color: var(--down); }
.bbody { flex: 1; overflow: auto; min-height: 0; }

table.grid { width: 100%; border-collapse: collapse; font-size: 11px; }
table.grid th {
  text-align: left; font-size: 8.5px; letter-spacing: 0.1em; color: var(--dimmer); font-weight: 500;
  padding: 7px 11px; position: sticky; top: 0; z-index: 2;
  background: #120a1b; border-bottom: 1px solid var(--brd-soft); white-space: nowrap;
}
table.grid td { padding: 7px 11px; border-bottom: 1px solid var(--brd-soft); white-space: nowrap; }
table.grid td.num, table.grid th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.grid tbody tr:hover td { background: var(--glass-hi); }
.tagl { color: var(--up); font-size: 9.5px; letter-spacing: 0.07em; }
.tags { color: var(--down); font-size: 9.5px; letter-spacing: 0.07em; }
.lnkbtn { color: var(--dim); font-size: 10px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--brd-soft); white-space: nowrap; }
.lnkbtn:hover { color: #fff; border-color: var(--pink-line); background: var(--pink-soft); }
.lnkbtn.danger:hover { color: var(--down); border-color: var(--down); background: var(--down-bg); }

.empty { padding: 32px 16px; text-align: center; color: var(--dimmer); font-size: 11px; line-height: 1.7; }
.empty .ic { width: 22px; height: 22px; display: block; margin: 0 auto 9px; color: rgba(255,255,255,.1); }

/* ---------- pages ---------- */
.pageview { height: 100%; overflow-y: auto; overflow-x: hidden; }
.page { max-width: 1200px; margin: 0 auto; padding: 26px 22px 44px; }
.page h1 {
  font-size: 23px; letter-spacing: 0.005em; margin: 0 0 6px; font-weight: 640;
  background: linear-gradient(96deg, #fff 20%, var(--pink-2) 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.page .lede { color: var(--dim); font-size: 12.5px; max-width: 66ch; margin: 0 0 24px; line-height: 1.65; }
.page h2 { font-size: 9.5px; letter-spacing: 0.15em; color: var(--dimmer); margin: 30px 0 11px; font-weight: 500; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--gap); }
.card {
  background: linear-gradient(158deg, var(--glass), var(--glass-2));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--brd); border-radius: var(--r); box-shadow: var(--lift-sm);
  padding: 14px 15px; min-width: 0;
}
.card .k { font-size: 8.5px; letter-spacing: 0.11em; color: var(--dimmer); }
/* 18px, not 20px, and a wider minimum track. A seven-figure signed total --
   "+$1,107,391.57" -- is 14 monospace characters and was being ellipsed inside
   a 172px card, which silently turns a PnL figure into a different number. */
.card .v { font-size: 18px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .s { font-size: 10px; color: var(--dim); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
.panelbox {
  background: linear-gradient(158deg, var(--glass), var(--glass-2));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--brd); border-radius: var(--r); box-shadow: var(--lift-sm);
  overflow: hidden; min-width: 0;
}
.panelbox .ph { padding: 11px 15px; border-bottom: 1px solid var(--brd-soft); font-size: 9px; letter-spacing: 0.13em; color: var(--dimmer); }
.panelbox .scrollx { overflow-x: auto; }
.split { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: var(--gap); align-items: start; }
canvas.navchart { width: 100%; height: 196px; display: block; }
.bars { padding: 14px 15px; display: flex; flex-direction: column; gap: 11px; }
.barrow .t { display: flex; justify-content: space-between; gap: 12px; font-size: 10.5px; margin-bottom: 5px; }
.barrow .track { height: 6px; background: rgba(0,0,0,.35); border-radius: 3px; overflow: hidden; }
.barrow .track i { display: block; height: 100%; border-radius: 3px; }
.vform { padding: 14px 15px; }
.vform .seg2 { display: flex; gap: 4px; margin-bottom: 12px; }
.vform .seg2 button { flex: 1; padding: 7px 0; font-size: 11px; color: var(--dim); background: rgba(0,0,0,.25); border-radius: var(--r-sm); border: 1px solid var(--brd-soft); }
.vform .seg2 button[aria-pressed="true"] { color: #fff; background: var(--glass-hi); border-color: var(--pink-line); }
.note { font-size: 10.5px; color: var(--dim); line-height: 1.7; padding: 12px 15px; border-top: 1px solid var(--brd-soft); }
.note b { color: var(--text-2); font-weight: 600; }
.srcrow { display: flex; align-items: center; gap: 9px; padding: 9px 15px; border-bottom: 1px solid var(--brd-soft); font-size: 11px; }
.srcrow:last-child { border-bottom: 0; }
.srcrow .nm { font-weight: 570; min-width: 96px; }
.srcrow .st { margin-left: auto; font-family: var(--mono); font-size: 10px; }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 16px; bottom: 46px; display: flex; flex-direction: column-reverse; gap: 8px; z-index: 60; max-width: min(360px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 13px; min-width: 240px;
  background: rgba(26,14,38,.93); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--brd); border-left: 2px solid var(--dim);
  border-radius: var(--r-sm); font-size: 11px; box-shadow: 0 12px 34px rgba(0,0,0,.6);
  animation: tin .17s ease-out;
}
@keyframes tin { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.toast.ok { border-left-color: var(--up); }
.toast.err { border-left-color: var(--down); }
.toast.warn { border-left-color: var(--pink); }
.toast .ic { width: 13px; height: 13px; margin-top: 1px; }
.toast.ok .ic { color: var(--up); }
.toast.err .ic { color: var(--down); }
.toast.warn .ic { color: var(--pink); }
.toast .tb { min-width: 0; }
.toast .tt { font-weight: 600; }
.toast .td { color: var(--dim); margin-top: 2px; font-family: var(--mono); font-size: 10px; word-break: break-word; }

/* ---------- responsive ---------- */

/* The header holds a brand, five nav tabs, a clock, a wallet chip and an equity
   readout -- about 1170px of content. Adding the COLLATERAL tab pushed it past
   a 1024 laptop, which shoved the wallet chip 42px off the right edge and gave
   the whole document a horizontal scrollbar. Two stages: compress first, and
   wrap only when compressing is not enough. */
/* Widened from 1240 after the BUY button landed: it adds ~130px and the header
   went 21px over at 1400, which the layout audit caught as a horizontal
   scrollbar on the whole document. */
@media (max-width: 1460px) {
  .top { gap: 11px; }
  .brand small { display: none; }
  .navtabs button { padding: 7px 9px; letter-spacing: 0.045em; }
  .simclock { gap: 7px; padding: 5px 8px; }
  .simclock .cdate { display: none; }
  .speeds button { min-width: 24px; padding: 3px 6px; }
}
@media (max-width: 1180px) {
  .top { height: auto; flex-wrap: wrap; padding: 9px 12px; row-gap: 9px; }
  .navtabs { order: 3; width: 100%; }
  .navtabs button { flex: 1; text-align: center; }
  .top-right { margin-left: auto; }
}

@media (max-width: 1560px) { .trade { grid-template-columns: 244px minmax(0,1fr) 200px 268px; } }
@media (max-width: 1330px) {
  .trade { grid-template-columns: 232px minmax(0,1fr) 258px; }
  .book { display: none; }
  .center { grid-template-rows: auto minmax(0,1fr) 206px; }
}
@media (max-width: 1040px) {
  body { overflow: auto; }
  #app { height: auto; min-height: 100vh; }
  .trade { display: flex; flex-direction: column; height: auto; }
  .rail { max-height: 262px; }
  .center { height: 74vh; }
  .ticket { max-height: none; }
  .split { grid-template-columns: minmax(0,1fr); }
  .toasts { bottom: 12px; }
}
@media (max-width: 760px) {
  .mh-price { padding: 8px 14px; }
  .mh-price .p { font-size: 19px; }
  .stat { padding: 8px 11px; }
}
@media (max-width: 660px) {
  .top { height: auto; flex-wrap: wrap; padding: 9px 11px; gap: 9px; }
  /* The clock, the wallet chip and the equity readout total ~490px of content.
     On a 375px phone they have to wrap onto two rows -- left as one nowrap row
     they pushed the document to 574px wide and the whole page scrolled
     sideways, which is the one thing a fixed-layout terminal must never do. */
  .top-right { width: 100%; margin-left: 0; flex-wrap: wrap; row-gap: 9px; justify-content: flex-start; }
  .simclock { flex: 1 1 100%; min-width: 0; }
  .simclock .lbl { display: none; }
  .simclock .val { font-size: 11px; }
  .speeds { margin-left: auto; }
  .speeds button { min-width: 22px; padding: 3px 5px; }
  .wchip { flex: 0 1 auto; min-width: 0; }
  .wchip .wa { overflow: hidden; text-overflow: ellipsis; }
  .equity { margin-left: auto; }
  .navtabs { order: 3; width: 100%; }
  .navtabs button { flex: 1; padding: 7px 4px; font-size: 10.5px; }
  .page { padding: 18px 13px 40px; }
  .center { height: 66vh; }
  .foot { height: auto; padding: 8px 11px; flex-wrap: wrap; gap: 7px; }
  .foot .sep { display: none; }
}

/* ---------- wallet ---------- */
.wchip {
  display: flex; align-items: center; gap: 8px; padding: 6px 11px; white-space: nowrap;
  border: 1px solid var(--brd-soft); border-radius: 20px; background: rgba(0,0,0,.26);
  font-size: 11px; transition: border-color .14s, background .14s;
}
.wchip:hover { border-color: var(--pink-line); background: var(--pink-soft); }
.wchip .ic { width: 13px; height: 13px; color: var(--pink-2); }
.wchip .wa { letter-spacing: .05em; font-weight: 560; }
.wchip .wb { color: var(--dim); font-size: 10.5px; }
.wchip .wdot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 7px var(--up); flex: 0 0 auto; }
.wchip.wrong .wdot { background: var(--down); box-shadow: 0 0 7px var(--down); }
.wchip .wwarn { color: var(--down); font-size: 9px; letter-spacing: .08em; }
.wchip.connect { border-color: var(--pink-line); background: linear-gradient(150deg, rgba(255,0,122,.26), rgba(252,114,255,.1)); }
.wchip.connect .wa { color: #fff; }

.scrim {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(5,2,10,.72); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  animation: fadein .15s ease-out;
}
@keyframes fadein { from { opacity: 0; } }
.modal {
  width: min(470px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  background: linear-gradient(158deg, rgba(38,20,54,.96), rgba(20,10,32,.97));
  backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid var(--brd); border-radius: 16px;
  box-shadow: 0 26px 70px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.1);
  animation: pop .17s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.modal .mh { display: flex; align-items: center; padding: 15px 17px; border-bottom: 1px solid var(--brd-soft); }
.modal .mh b { font-size: 14px; letter-spacing: .02em; }
.modal .mh .x { margin-left: auto; color: var(--dim); padding: 4px; border-radius: 6px; }
.modal .mh .x:hover { color: #fff; background: var(--glass-hi); }
.modal .mh .x .ic { width: 15px; height: 15px; }
.modal .mb { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 10px; }

.wopt {
  display: flex; align-items: flex-start; gap: 12px; text-align: left; width: 100%;
  padding: 13px 14px; border-radius: var(--r); border: 1px solid var(--brd-soft);
  background: rgba(0,0,0,.24); transition: .14s;
}
.wopt:hover:not(:disabled) { border-color: var(--pink-line); background: var(--pink-soft); transform: translateY(-1px); }
.wopt:disabled { opacity: .6; cursor: wait; }
.wopt.primary { border-color: var(--pink-line); background: linear-gradient(150deg, rgba(255,0,122,.2), rgba(252,114,255,.06)); }
.wopt .oi { display: flex; }
.wopt .oi .ic { width: 19px; height: 19px; color: var(--pink-2); margin-top: 1px; }
.wopt .ob { min-width: 0; }
.wopt .ob b { display: block; font-size: 13px; font-weight: 600; }
.wopt .ob small { display: block; color: var(--dim); font-size: 11px; margin-top: 3px; line-height: 1.5; }

.wrow { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--brd-soft); }
.wrow .k { color: var(--dim); font-size: 11.5px; min-width: 84px; }
.wrow .v { margin-left: auto; font-size: 12.5px; display: flex; align-items: center; gap: 7px; text-align: right; }
.wrow .exl { color: var(--dim); display: inline-flex; }
.wrow .exl:hover { color: var(--pink-2); }
.wrow .exl .ic { width: 13px; height: 13px; }
.wsplit { display: flex; gap: 9px; margin-top: 4px; }
.wbtn { flex: 1; padding: 10px 0; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 570; letter-spacing: .04em; }
.wbtn.ghost { border: 1px solid var(--brd-soft); background: rgba(0,0,0,.24); color: var(--text-2); }
.wbtn.ghost:hover { border-color: var(--pink-line); color: #fff; }
.wbtn.ghost.danger:hover { border-color: var(--down); color: var(--down); background: var(--down-bg); }

.wnote {
  display: flex; gap: 9px; padding: 11px 12px; border-radius: var(--r-sm);
  background: rgba(0,0,0,.26); border: 1px solid var(--brd-soft);
  font-size: 10.5px; color: var(--dim); line-height: 1.6;
}
.wnote .ic { width: 13px; height: 13px; margin-top: 1px; color: var(--dim); }
.wnote b { color: var(--text-2); font-weight: 620; }
.wnote.warn { border-color: var(--pink-line); background: var(--pink-soft); }
.wnote.warn .ic { color: var(--pink-2); }
.wnote.err { border-color: rgba(255,77,106,.4); background: var(--down-bg); }
.wnote.err .ic { color: var(--down); }
@media (max-width: 660px) { .wchip .wb { display: none; } }

/* ---------- collateral ---------- */
:root {
  --col-cash:     #7fe0c0;
  --col-fund:     #6ea8fe;
  --col-metal:    #f0b45c;
  --col-contract: #fc72ff;
}
.selbox {
  width: 100%; padding: 9px 10px; border-radius: var(--r-sm);
  background: rgba(0,0,0,.3); border: 1px solid var(--brd-soft); color: var(--text);
  font-size: 12px; outline: none; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.selbox:focus { border-color: var(--pink-line); box-shadow: 0 0 0 3px rgba(255,0,122,.11); }
.selbox option { background: #1a0f26; color: var(--text); }
table.grid tr[aria-current="true"] td { background: var(--pink-soft); }

/* ---------- brand mark ---------- */
.brandmark {
  width: 28px; height: 28px; border-radius: 8px; display: block; flex: 0 0 auto;
  object-fit: cover;
  /* The mark ships with its own hot-pink ground, so it needs a rim and a lift
     rather than a tint -- treating it as a monochrome glyph would flatten the
     glass render it is made of. */
  box-shadow: 0 3px 12px rgba(255,0,122,.42), inset 0 0 0 1px rgba(255,255,255,.16);
}
@media (max-width: 660px) { .brandmark { width: 24px; height: 24px; border-radius: 7px; } }

/* ---------- social ---------- */
.foot a.xlink {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  border: 1px solid var(--brd-soft); border-radius: 20px; color: var(--text-2);
  text-decoration: none; letter-spacing: .04em; white-space: nowrap;
  transition: color .14s, border-color .14s, background .14s;
}
.foot a.xlink:hover {
  color: #fff; border-color: var(--pink-line); background: var(--pink-soft); text-decoration: none;
}
.foot a.xlink .ic { width: 11px; height: 11px; }

/* ---------- ticker ---------- */
.foot .tick {
  font-family: var(--mono); font-weight: 620; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
  color: #fff; border: 1px solid var(--pink-line);
  background: linear-gradient(150deg, rgba(255,0,122,.3), rgba(252,114,255,.12));
}

/* ---------- buy button + contract address ---------- */
.buybtn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: 20px; text-decoration: none; white-space: nowrap;
  font-size: 11.5px; font-weight: 640; letter-spacing: .05em; color: #fff;
  background: linear-gradient(150deg, var(--pink), #d1006a);
  box-shadow: 0 4px 16px rgba(255,0,122,.42), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .14s, filter .14s;
}
.buybtn:hover { filter: brightness(1.09); transform: translateY(-1px); }
.buybtn .ic { width: 13px; height: 13px; }

.foot .ca {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  border: 1px solid var(--brd-soft); border-radius: 20px; color: var(--dim);
  font-size: 10px; white-space: nowrap; cursor: pointer;
  transition: color .14s, border-color .14s, background .14s;
}
.foot .ca:hover { color: #fff; border-color: var(--pink-line); background: var(--pink-soft); }
.foot .ca .ic { width: 10px; height: 10px; }

/* The buy button is the one header element that must never be compressed away. */
@media (max-width: 1460px) { .buybtn { padding: 7px 10px; } }
@media (max-width: 1180px) { .buybtn .ic { display: none; } }
@media (max-width: 660px)  { .buybtn { flex: 1 1 auto; justify-content: center; } }