:root {
  --bg:#060200; --amber:#ff8a00; --hot:#ffac24; --yellow:#ffd43b;
  --dim:#99561f; --faint:#3b1c08; --line:#63300f; --white:#ffe8bf;
  --green:#9ddd64; --mono:"IBM Plex Mono",monospace;
  --display:"VT323","IBM Plex Mono",monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; min-width:320px; color:var(--hot); font:13px var(--mono);
  background:radial-gradient(circle at 50% -20%,#351000,transparent 45%),
   linear-gradient(#050200,#090300 50%,#030100);
}
button,input { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
body:before,body:after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:99;
}
body:before {
  opacity:.045;
  background-image:repeating-radial-gradient(#fff 0,#000 1px,transparent 2px);
  background-size:5px 5px;
}
body:after {
  opacity:.12;
  background:repeating-linear-gradient(transparent 0,transparent 3px,#ff8b002b 4px);
}
.shell { max-width:1500px; margin:auto; border-inline:1px solid #1d0b03; }
header {
  height:72px; display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; padding:0 45px; border-bottom:1px solid var(--line);
  background:#050200e8; position:sticky; top:0; z-index:30;
  backdrop-filter:blur(12px);
}
.brand { display:flex; align-items:center; width:max-content; }
.brand img { width:42px; height:42px; object-fit:cover; margin-right:8px; }
.brand>span {
  font:31px var(--display); letter-spacing:2px; text-shadow:0 0 13px #ff5d00;
}
.brand>span b { color:var(--yellow); font-weight:400; }
.brand small {
  font-size:8px; color:var(--dim); align-self:flex-start; margin:17px 0 0 6px;
}
.clock { display:flex; align-items:center; gap:9px; color:var(--dim); font-size:10px; }
.clock i,footer>span i {
  width:7px; height:7px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 9px var(--amber); animation:pulse 1.7s infinite;
}
.clock b,.clock time { color:var(--hot); font-weight:400; }
.clock em { font-style:normal; }
.header-actions {
  justify-self:end;
  display:flex;
  align-items:center;
  gap:9px;
}
.x-link {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  color:var(--white);
  font-size:12px;
  font-weight:600;
}
.x-link:hover {
  border-color:var(--amber);
  color:#130600;
  background:var(--amber);
}
.wallet.network-error { border-color:#e44; color:#ff756b; }
.wallet {
  background:transparent; border:1px solid var(--amber);
  padding:10px 14px; font-size:10px;
}
.wallet b { color:var(--yellow); }
.wallet:hover,.actions a,.order { background:var(--amber); color:#130600; }
.hero {
  min-height:440px; padding:72px clamp(24px,7vw,105px) 60px;
  position:relative; overflow:hidden; border-bottom:1px solid var(--line);
}
.hero:after {
  content:""; position:absolute; width:470px; height:300px; right:1%; top:80px;
  background:url("OpenGap.png") center/contain no-repeat;
  opacity:.09; transform:scale(1.2);
}
.kicker {
  display:flex; justify-content:space-between; max-width:790px;
  padding-bottom:9px; border-bottom:1px dotted var(--faint);
  font-size:9px; color:var(--dim); letter-spacing:.1em;
}
.hero h1 {
  position:relative; z-index:1; font:clamp(55px,7vw,105px)/.82 var(--display);
  font-weight:400; margin:34px 0 22px;
  text-shadow:0 0 9px #ff5e00,0 0 35px #7e2100;
}
.hero h1 em { font-style:normal; color:var(--yellow); }
.hero p { max-width:670px; color:#b56b30; line-height:1.3; margin:4px 0; }
.actions { display:flex; gap:11px; margin-top:28px; }
.actions a,.actions button {
  border:1px solid var(--amber); padding:12px 16px;
  background:transparent; font-size:10px;
}
.actions a { background:var(--amber); color:#130600; }
.actions a:hover,.actions button:hover { background:var(--yellow); color:var(--bg); }
.tape {
  height:36px; overflow:hidden; border-bottom:1px solid var(--line);
  display:flex; align-items:center;
}
.tape>div {
  display:flex; gap:45px; white-space:nowrap; width:max-content;
  animation:ticker 32s linear infinite; font-size:9px;
}
.tape span { color:var(--dim); }
.tape b { color:var(--hot); }
.tape i { color:var(--yellow); font-style:normal; margin-left:7px; }
.terminal {
  display:grid; grid-template-columns:minmax(285px,.8fr) minmax(590px,2fr);
  gap:11px; padding:11px; background:#040100;
}
.panel {
  border:1px solid var(--line);
  background:linear-gradient(135deg,#140800e6,#060200f7); min-width:0;
}
.panel-head {
  height:36px; border-bottom:1px solid var(--line); padding:0 12px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:8px; color:var(--dim); letter-spacing:.08em;
}
.panel-head span { color:var(--hot); }
.panel-head span b { color:var(--yellow); margin-right:8px; }
.panel-head i { font-style:normal; }
.good { color:var(--green)!important; }
.tabs { display:grid; grid-template-columns:repeat(3,1fr); }
.tabs button {
  border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  background:transparent; color:var(--dim); padding:10px 2px; font-size:8px;
}
.tabs button.active,.tabs button:hover { background:#271002; color:var(--yellow); }
#market-list { min-height:510px; }
.market-row {
  width:100%; border:0; border-bottom:1px dotted var(--faint);
  background:transparent; text-align:left; padding:14px 12px;
  display:grid; grid-template-columns:37px 1fr auto; gap:10px; align-items:center;
}
.market-row:hover,.market-row.active {
  background:linear-gradient(90deg,#281003,transparent);
}
.market-row.active { box-shadow:inset 2px 0 var(--yellow); }
.ticker-icon {
  width:35px; height:35px; border:0; background:transparent;
  display:grid; place-items:center; color:var(--yellow); font:18px var(--display);
}
.ticker-icon img {
  width:27px;
  height:27px;
  object-fit:contain;
}
.market-copy b { display:block; font-size:10px; }
.market-copy small { font-size:7px; color:var(--dim); }
.odds { text-align:right; }
.odds b { display:block; color:var(--yellow); font:22px var(--display); }
.odds small { font-size:7px; color:var(--dim); }
.view-all {
  width:100%; border:0; border-top:1px solid var(--line);
  background:transparent; text-align:left; padding:12px; font-size:8px;
}
.view-all span { float:right; }
.trade-body { padding:17px; }
.market-title {
  display:grid; grid-template-columns:51px 1fr auto; gap:13px;
  align-items:center; margin-bottom:16px;
}
.asset {
  width:51px; height:51px; border:1px solid var(--amber);
  display:grid; place-items:center; font:25px var(--display); color:var(--yellow);
}
.market-title small { font-size:7px; color:var(--dim); }
.market-title h2 {
  font:clamp(26px,3vw,39px) var(--display); color:var(--white);
  font-weight:400; margin:2px 0;
}
.market-title>button {
  border:1px solid var(--faint); background:transparent; width:34px; height:34px;
}
.metrics {
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); margin-bottom:12px;
}
.metrics>div { padding:9px 11px; border-right:1px solid var(--line); }
.metrics>div:last-child { border:0; background:#1d0b01; }
.metrics small { display:block; color:var(--dim); font-size:6px; margin-bottom:4px; }
.metrics b { color:var(--white); font-size:11px; }
.metrics>div:last-child b { color:var(--yellow); }
.chart {
  height:260px; border:1px solid var(--line);
  position:relative; padding:14px 13px 24px;
  background:radial-gradient(circle at 80% 30%,#241000,transparent 35%);
}
.chart>div:first-child,.axis {
  display:flex; justify-content:space-between; color:var(--dim); font-size:7px;
}
.chart i { font-style:normal; color:var(--hot); }
.chart svg { width:100%; height:188px; }
.grid line { stroke:#321506; stroke-dasharray:2 4; }
.chart .area { fill:url(#fill); }
.chart .line {
  fill:none; stroke:#ff9a1f; stroke-width:2; filter:url(#glow);
}
.chart circle { fill:var(--yellow); }
.axis { position:absolute; left:13px; right:13px; bottom:6px; }
.chart>strong {
  position:absolute; right:6%; top:23%; color:var(--yellow);
  font:42px var(--display); text-shadow:0 0 17px #ff7900;
}
.chart>strong small { font:8px var(--mono); }
.order-zone {
  display:grid; grid-template-columns:.9fr 1.1fr; gap:10px; margin-top:10px;
}
.sides { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.side {
  border:1px solid var(--faint); background:#090300;
  text-align:left; padding:12px;
}
.side span,.side small { display:block; font-size:7px; color:var(--dim); }
.side b {
  display:block; font:37px var(--display); color:var(--white); margin:7px 0;
}
.side.active,.side:hover { border-color:var(--amber); background:#241003; }
.side.active span { color:var(--yellow); }
.ticket { border:1px solid var(--line); padding:10px; }
.ticket>label {
  display:flex; justify-content:space-between;
  font-size:7px; color:var(--dim); margin-bottom:6px;
}
.amount {
  height:41px; border:1px solid var(--faint);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; padding:0 9px;
}
.amount input {
  width:100%; border:0; outline:0; background:transparent;
  color:var(--white); font:24px var(--display);
}
.amount button { border:0; background:transparent; color:var(--yellow); }
.quick,.summary {
  display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:5px 0 9px;
}
.quick button {
  border:1px solid var(--faint); background:transparent;
  color:var(--dim); font-size:7px; padding:4px;
}
.quick button:hover { border-color:var(--amber); color:var(--yellow); }
.summary { grid-template-columns:repeat(3,1fr); }
.summary div { border-left:1px solid var(--faint); padding-left:6px; }
.summary small { display:block; font-size:5px; color:var(--dim); }
.summary b { font-size:8px; color:var(--white); }
.order { width:100%; border:1px solid var(--amber); padding:7px; }
.order>* { display:block; }
.order small { font-size:5px; }
.order:hover { background:var(--yellow); }
.lower {
  display:grid; grid-template-columns:1.45fr 1fr;
  gap:11px; padding:0 11px 11px; background:#040100;
}
.events article {
  display:grid; grid-template-columns:42px 38px 1fr auto;
  gap:9px; padding:12px; border-bottom:1px dotted var(--faint);
}
.events time,.events p { font-size:7px; color:var(--dim); }
.events article>i { font-style:normal; font-size:6px; color:var(--yellow); }
.events b { color:var(--white); font-size:8px; }
.events p { margin:3px 0; }
.events em { font-size:6px; color:var(--yellow); }
.network { display:grid; grid-template-columns:1fr 1fr; }
.network>div {
  padding:12px; border-right:1px dotted var(--faint);
  border-bottom:1px dotted var(--faint);
}
.network span,.network small { display:block; color:var(--dim); font-size:6px; }
.network b {
  display:block; color:var(--white); font:23px var(--display); margin:3px 0;
}
.network small { color:var(--green); }
footer {
  height:65px; padding:0 22px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; color:var(--dim); font-size:7px;
}
footer img { width:23px; height:23px; vertical-align:middle; }
footer nav { display:flex; gap:20px; }
footer a:hover { color:var(--yellow); }
footer>span { justify-self:end; display:flex; gap:6px; }
dialog {
  width:min(500px,calc(100% - 30px)); border:1px solid var(--amber);
  background:#090300; color:var(--hot); padding:27px;
  box-shadow:0 0 70px #3d1000;
}
dialog::backdrop { background:#000d; }
dialog>button { float:right; border:0; background:none; }
dialog h2 { font:41px var(--display); color:var(--yellow); }
dialog li { display:flex; gap:13px; padding:10px; border-top:1px dotted var(--faint); }
dialog p { color:var(--dim); font-size:8px; }
.toast {
  position:fixed; right:17px; bottom:17px; z-index:120;
  border:1px solid var(--amber); background:#0b0401;
  padding:11px 15px; color:var(--yellow); font-size:9px;
  transform:translateY(160%); transition:.25s;
}
.toast.show { transform:none; }
@keyframes pulse { 50% { opacity:.25; } }
@keyframes ticker { to { transform:translateX(-50%); } }
@media(max-width:950px) {
  header { grid-template-columns:1fr auto; }
  .clock { display:none; }
  .terminal { grid-template-columns:1fr; }
  #market-list {
    min-height:0; display:grid; grid-template-columns:1fr 1fr;
  }
  .market-row:nth-child(n+5) { display:none; }
  .lower { grid-template-columns:1fr; }
}
@media(max-width:650px) {
  header { height:60px; padding:0 12px; }
  .brand img { width:34px; height:34px; }
  .wallet { font-size:0; }
  .wallet b { font-size:10px; }
  .hero { min-height:380px; padding:54px 18px; }
  .kicker span:last-child { display:none; }
  .hero h1 { font-size:16vw; }
  .terminal { padding:6px; }
  #market-list { grid-template-columns:1fr; }
  .market-row:nth-child(n+4) { display:none; }
  .trade-body { padding:9px; }
  .metrics { grid-template-columns:1fr 1fr; }
  .order-zone { grid-template-columns:1fr; }
  .lower { padding:0 6px 6px; }
  footer nav { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  * { animation:none!important; scroll-behavior:auto!important; }
}