/* BREAK — shared shell */
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=Unbounded:wght@300;400;600;800&family=DotGothic16&family=JetBrains+Mono:wght@400;600&display=swap');
:root{
  --bg:#0a0a0c; --ink:#f4f4f6; --acc:#ff3b25; --acc2:#ffb3a8; --line:rgba(255,255,255,.12); --dim:rgba(255,255,255,.55);
  --px:'Silkscreen',monospace; --wide:'Unbounded',system-ui,sans-serif; --mono:'DotGothic16','JetBrains Mono',monospace; --code:'JetBrains Mono',monospace;
  --cur:url(cursor.svg) 2 2, auto;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.55;overflow-x:clip;min-height:100svh;cursor:var(--cur);-webkit-font-smoothing:antialiased}
a,button,[role=button],label,select,.hex,.row{cursor:var(--cur)}
a,button,[role=button]{cursor:url(cursor.svg) 2 2, pointer}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
::selection{background:var(--acc);color:#000}

/* millimeter grid */
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,rgba(0,0,0,.35) 100%);mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,rgba(0,0,0,.35) 100%)}
.glow-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 72% 30%,color-mix(in srgb,var(--acc) 30%,transparent),transparent 70%)}

/* inner page shell */
.shell{position:relative;z-index:2;width:min(1120px,calc(100% - 40px));margin:0 auto;padding:26px 0 60px}
.top{display:grid;grid-template-columns:auto 1fr auto;gap:10px 14px;align-items:end}
.ttl{font-family:var(--px);font-weight:700;font-size:clamp(30px,4.4vw,48px);line-height:.9;letter-spacing:.02em;color:var(--acc);
  text-shadow:0 0 18px color-mix(in srgb,var(--acc) 55%,transparent)}
.ttl i{font-style:normal;font-family:var(--wide);font-weight:300;font-size:.5em;letter-spacing:0;vertical-align:.25em;color:var(--acc2)}
.snd{display:flex;gap:8px;justify-self:end;align-self:start}
.snd button{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:var(--acc);opacity:.5;transition:opacity .2s}
.snd button.on{opacity:1}
.snd svg{width:18px;height:18px}
.bar{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.back{display:flex;align-items:center;height:34px;border:1.5px solid var(--acc);border-radius:6px;overflow:hidden;text-decoration:none;font-family:var(--mono);letter-spacing:.32em;font-size:14px}
.back b{display:grid;place-items:center;width:34px;height:100%;background:var(--acc);color:#000}
.back span{padding:0 10px 0 8px;background:#e9e9ec;color:#111;height:100%;display:flex;align-items:center}
.path{height:34px;border:1.5px solid color-mix(in srgb,var(--acc) 70%,transparent);border-radius:999px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:13px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 20%,transparent),transparent 70%);color:var(--acc2);gap:10px;min-width:0}
.path b{color:var(--acc);font-family:var(--wide);font-weight:600;font-size:11px;letter-spacing:.08em}
.path span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.connect{height:34px;display:flex;align-items:center;gap:8px;padding:0 14px 0 0;border-radius:6px;background:#e9e9ec;color:#111;font-family:var(--mono);font-size:14px;overflow:hidden}
.connect i{display:grid;place-items:center;width:34px;height:34px;background:var(--acc);color:#000;font-style:normal}
.connect i svg{width:16px;height:16px}

/* tab strip with slanted ends */
.tabs{display:flex;gap:4px;align-items:flex-end;border-bottom:1.5px solid var(--acc)}
.tab{position:relative;padding:6px 26px 4px 12px;font-family:var(--wide);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 14%,transparent),transparent);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 100%,0 100%)}
.tab em{font-style:normal;font-family:var(--mono);margin-left:8px;padding:0 6px;border-radius:9px;background:rgba(255,255,255,.12)}
.tab.on{background:var(--acc);color:#000}
.tab.on em{background:rgba(0,0,0,.2)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{height:26px;padding:0 10px;border:1.5px solid var(--acc);border-radius:7px;font-size:12px;color:var(--acc2);display:inline-flex;align-items:center;white-space:nowrap}
.chip.on{background:var(--acc);color:#000}
.search{height:30px;width:100%;border:1.5px solid var(--acc);border-radius:5px;background:rgba(0,0,0,.35);color:var(--ink);font:inherit;padding:0 10px;outline:none}
.search::placeholder{color:var(--dim)}

/* viewer panel with clipped corner */
.vtab{display:inline-flex;gap:6px;align-items:center;padding:4px 40px 3px 10px;background:var(--acc);color:#000;font-family:var(--code);font-size:12px;font-weight:600;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 100%,0 100%)}
.viewer{position:relative;border:2px solid var(--acc);border-radius:2px;background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 22%,transparent),rgba(0,0,0,.3) 60%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 52px),calc(100% - 52px) 100%,0 100%);min-height:340px}
.viewer::after{content:"";position:absolute;right:-2px;bottom:-2px;width:74px;height:74px;background:linear-gradient(135deg,transparent 49%,var(--acc) 49% 53%,transparent 53%)}

/* big pill action button (TRADE / SWAP) */
.pill{position:relative;display:flex;align-items:center;height:68px;margin-top:22px;text-decoration:none}
.pill .pl{flex:1;height:52px;border-radius:999px 0 0 999px;background:linear-gradient(180deg,#9b9ba3,#6f6f77);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.25);
  display:grid;place-items:center;font-family:var(--px);font-weight:700;font-size:34px;letter-spacing:.06em;color:#c9c9cf;text-shadow:0 2px 0 rgba(0,0,0,.25);transition:color .2s,background .2s}
.pill .ph{width:84px;height:76px;margin-left:-14px;background:#6f6f77;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);display:grid;place-items:center;transition:background .2s}
.pill .ph svg{width:36px;height:36px;color:#d4d4d9}
.pill.live .pl{background:linear-gradient(180deg,var(--acc2),var(--acc));color:#fff}
.pill.live .ph{background:var(--acc)}
.pill.live:hover .pl{box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 0 28px color-mix(in srgb,var(--acc) 70%,transparent)}
.caption{margin-top:16px;display:inline-block;padding:2px 60px 2px 4px;font-family:var(--wide);font-size:10px;letter-spacing:.1em;color:var(--acc);background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 30%,transparent),transparent)}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;z-index:200;background:#111;border:1.5px solid var(--acc);color:var(--ink);padding:10px 16px;border-radius:8px;font-size:13px;transition:.3s;pointer-events:none;max-width:calc(100% - 30px)}
.toast.on{opacity:1;transform:translate(-50%,0)}

.foot{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;width:min(1120px,calc(100% - 40px));margin:0 auto;padding:0 0 26px;font-size:12px;color:var(--dim)}
.foot nav{display:flex;gap:16px;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{color:var(--acc)}

@media (max-width:760px){
  .shell{width:calc(100% - 24px);padding-top:16px}
  .bar{grid-template-columns:auto 1fr}
  .bar .connect{grid-column:1/-1;justify-self:start}
  .back span{letter-spacing:.2em}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}