:root {
  --bg: #07080a;
  --panel: #0e1014;
  --panel-2: #14171d;
  --line: #1e232b;
  --line-soft: #171b21;
  --text: #e7eaef;
  --dim: #8b939f;
  --dimmer: #5b636e;
  --up: #2fd07a;
  --up-soft: rgba(47, 208, 122, 0.12);
  --down: #ff5c5c;
  --down-soft: rgba(255, 92, 92, 0.12);
  --accent: #6ea8ff;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 64px;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--dim); }
.tiny { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dimmer); }

/* ---------- shell ---------- */

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

header.top {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0b0d11, #07080a);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(8px);
}
.top-in { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.mark { display: flex; align-items: center; gap: 9px; }
.mark svg { width: 22px; height: 22px; }
/* Carries the five tap staff gesture. No pointer cursor, nothing to notice. */
.mark { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.mark b { font-size: 15px; letter-spacing: 0.16em; font-weight: 600; }
.mark span { color: var(--dimmer); font-size: 15px; letter-spacing: 0.16em; font-weight: 400; }

.live {
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 rgba(47,208,122,.6); animation: pulse 2.4s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(47,208,122,.5); }
  70% { box-shadow: 0 0 0 7px rgba(47,208,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,208,122,0); }
}

/* ---------- aggregate strip ---------- */

.strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  margin: 22px 0;
}
.cell { background: var(--panel); padding: 14px 16px; }
.cell .k { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dimmer); margin-bottom: 5px; }
.cell .v { font-size: 20px; font-weight: 600; }

/* ---------- leaderboard ---------- */

h2.sec {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dimmer); margin: 26px 0 10px; font-weight: 600;
}

.board { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.row {
  display: grid; grid-template-columns: 34px 1fr 108px 132px 96px 26px;
  align-items: center; gap: 12px;
  padding: 15px 16px; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; transition: background .12s;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--panel-2); }
.rank { font-size: 13px; color: var(--dimmer); font-weight: 600; }
.who { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.who b { font-size: 16px; font-weight: 600; }
.who .stake { font-size: 11.5px; color: var(--dimmer); }
.bal { font-size: 17px; font-weight: 600; text-align: right; }
.spark { height: 30px; }
.spark svg { display: block; width: 100%; height: 30px; }
.delta { text-align: right; font-size: 13px; font-weight: 500; }
.chev { color: var(--dimmer); display: flex; justify-content: flex-end; }
.chev svg { width: 14px; height: 14px; }

.tag {
  font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; border: 1px solid var(--line);
  color: var(--dimmer); white-space: nowrap;
}
.tag.hot { color: var(--up); border-color: rgba(47,208,122,.3); background: var(--up-soft); }
.tag.cold { color: var(--down); border-color: rgba(255,92,92,.28); background: var(--down-soft); }

/* ---------- detail ---------- */

.back {
  display: inline-flex; align-items: center; gap: 7px; margin: 20px 0 4px;
  background: none; border: 0; color: var(--dim); font-family: var(--sans);
  font-size: 13px; cursor: pointer; padding: 0;
}
.back:hover { color: var(--text); }
.back svg { width: 13px; height: 13px; }

.hero { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 14px 0 4px; }
.hero h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.hero .eq { font-size: 40px; font-weight: 650; letter-spacing: -0.02em; }
.hero .sub { font-size: 14px; padding-bottom: 7px; }

.chart { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 8px; margin: 16px 0; }
.chart svg { display: block; width: 100%; height: 240px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }

/* ---------- open positions ---------- */

.open { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.op {
  display: grid; grid-template-columns: 74px 60px 1fr auto;
  gap: 12px; align-items: center; padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft); font-size: 13.5px;
}
.op:last-child { border-bottom: 0; }
.side { font-size: 10px; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 3px; text-align: center; }
.side.LONG { color: var(--up); background: var(--up-soft); }
.side.SHORT { color: var(--down); background: var(--down-soft); }

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

.log { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.tr {
  display: grid; grid-template-columns: 62px 88px 1fr 96px 104px;
  gap: 12px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
}
.tr:last-child { border-bottom: 0; }
.tr .ts { font-size: 11.5px; color: var(--dimmer); }
.kind {
  font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px; text-align: center; border: 1px solid var(--line);
  color: var(--dim); white-space: nowrap;
}
.kind.arb  { color: var(--accent); border-color: rgba(110,168,255,.28); background: rgba(110,168,255,.1); }
.kind.meme { color: var(--up); border-color: rgba(47,208,122,.3); background: var(--up-soft); }
.kind.rug, .kind.liq { color: var(--down); border-color: rgba(255,92,92,.3); background: var(--down-soft); }
.desc { font-size: 13.5px; min-width: 0; }
.desc .m { color: var(--dim); font-size: 12px; }
.tr .pct { text-align: right; font-size: 12.5px; }
.tr .pnl { text-align: right; font-size: 14px; font-weight: 600; }
.tr .run { text-align: right; font-size: 11.5px; color: var(--dimmer); }

.loghead {
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--dimmer); background: var(--panel-2); padding-top: 9px; padding-bottom: 9px;
}
.loghead > div:nth-child(4), .loghead > div:nth-child(5) { text-align: right; }
h2.sec .hint .dot { display: inline-block; margin-right: 5px; vertical-align: middle; }

.more {
  width: 100%; padding: 13px; background: var(--panel-2); border: 0; border-top: 1px solid var(--line);
  color: var(--dim); font-family: var(--sans); font-size: 12.5px; cursor: pointer;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.more:hover { color: var(--text); }

.recon {
  display: flex; align-items: center; gap: 8px; justify-content: flex-end;
  padding: 12px 16px; font-size: 11.5px; color: var(--dimmer);
  border-top: 1px solid var(--line); background: var(--panel-2);
}
.recon svg { width: 13px; height: 13px; color: var(--up); }

/* ---------- login gate ---------- */

.whobox { display: flex; align-items: center; gap: 8px; margin-left: 14px; }
.whoname { font-size: 12.5px; color: var(--dim); }
.signout {
  background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--dimmer);
  cursor: pointer; padding: 4px 6px; display: flex; align-items: center;
}
.signout svg { width: 14px; height: 14px; }
.signout:hover { color: var(--text); border-color: var(--dim); }

.gate { display: flex; justify-content: center; padding: 54px 0 20px; }
.gate-card {
  width: 100%; max-width: 380px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; padding: 30px 26px 24px; text-align: center;
}
.gate-lock { color: var(--dimmer); margin-bottom: 12px; }
.gate-lock svg { width: 26px; height: 26px; }
.gate-card h1 { font-size: 21px; font-weight: 600; margin-bottom: 6px; }
.gate-sub { font-size: 13.5px; color: var(--dim); margin-bottom: 20px; line-height: 1.5; }
.gate-names { display: flex; flex-direction: column; gap: 8px; }
.namebtn {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 13px 15px; cursor: pointer; font-family: var(--sans); color: var(--text);
  transition: border-color .12s;
}
.namebtn:hover { border-color: var(--accent); }
.namebtn b { font-size: 15.5px; font-weight: 600; }
.namebtn span { font-size: 11.5px; color: var(--dimmer); }
.stafflink {
  width: 100%; margin-top: 16px; padding: 11px;
  background: none; border: 1px solid var(--line); border-radius: 9px;
  color: var(--dim); font-family: var(--sans); font-size: 12.5px; cursor: pointer;
}
.stafflink:hover { color: var(--text); border-color: var(--dim); }

.pinbox {
  width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 13px; font-family: var(--mono); font-size: 21px;
  text-align: center; letter-spacing: 0.4em; margin-bottom: 9px;
}
.pinbox:focus { outline: 0; border-color: var(--accent); }
.gate-err { font-size: 12.5px; color: var(--down); margin: 4px 0 10px; }
.gate-go {
  width: 100%; background: var(--up); border: 0; border-radius: 9px; color: #04120a;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600; padding: 12px; cursor: pointer;
  margin-top: 4px;
}
.gate-go:disabled { opacity: .6; cursor: default; }
.gate-back {
  width: 100%; background: none; border: 0; color: var(--dimmer);
  font-family: var(--sans); font-size: 12.5px; cursor: pointer; padding: 12px 0 2px;
}
.gate-back:hover { color: var(--text); }
.gate-note { font-size: 11px; color: var(--dimmer); line-height: 1.6; margin-top: 8px; }
.keybox {
  width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 12px; font-family: var(--mono); font-size: 14px;
  text-align: center; margin-bottom: 9px;
}
.keybox:focus { outline: 0; border-color: var(--accent); }

.tag.adm { color: #ffb84d; border-color: rgba(255,184,77,.35); background: rgba(255,184,77,.1); }
.ctlbtn {
  font-size: 11.5px; color: var(--accent); text-decoration: none;
  border: 1px solid rgba(110,168,255,.3); border-radius: 6px; padding: 4px 9px;
}
.ctlbtn:hover { background: rgba(110,168,255,.1); }
.backlink { display: inline-block; font-size: 12.5px; color: var(--dim); text-decoration: none; margin-bottom: 16px; }
.backlink:hover { color: var(--text); }

/* ---------- row affordance ---------- */

h2.sec .hint {
  float: right; text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--dimmer); font-size: 11.5px;
}
.row.mine { background: rgba(110, 168, 255, 0.04); box-shadow: inset 2px 0 0 var(--accent); }
.tag.you { color: var(--accent); border-color: rgba(110,168,255,.35); background: rgba(110,168,255,.1); }
.rowfoot {
  grid-column: 2 / -1; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-top: 5px; font-size: 11.5px;
}
.viewlink { color: var(--accent); display: inline-flex; align-items: center; gap: 3px; }
.viewlink svg { width: 11px; height: 11px; }
.row:hover .viewlink { text-decoration: underline; }
.lastmove { font-size: 11px; }

.mix { display: flex; gap: 7px; flex-wrap: wrap; }
.kind.option { color: #c79bff; border-color: rgba(199,155,255,.3); background: rgba(199,155,255,.1); }

footer { margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--dimmer); line-height: 1.7; }

@media (max-width: 720px) {
  .strip { grid-template-columns: repeat(2, 1fr); }
  .row { grid-template-columns: 26px 1fr auto; gap: 10px; row-gap: 4px; }
  .spark, .chev { display: none; }
  .delta { grid-column: 2 / 4; text-align: left; font-size: 12px; }
  .tr { grid-template-columns: 56px 1fr auto; row-gap: 4px; }
  .tr .pct, .tr .run { display: none; }
  .desc { grid-column: 1 / 4; }
  .hero .eq { font-size: 32px; }
}