:root {
  --night: #0c0913; --night-2: #140f1f; --plum: #2a1630; --rose: #e07a5f; --ember: #f08a3c; --gold: #f2b25c; --gold-hi: #ffd79a;
  --cream: #f3e9dc; --mute: #b9a9a6; --line: rgba(242, 178, 92, 0.18); --card: rgba(26, 18, 34, 0.72);
  --up: #7fd6a8; --down: #e8735c; --violet: #9b8cff; --jade: #6fc3a8;
  --serif: "Cormorant Garamond", Georgia, serif; --sans: "Instrument Sans", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--cream); font: 15px/1.55 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(900px 480px at 82% -8%, rgba(240, 138, 60, 0.16), transparent 62%), radial-gradient(760px 520px at 4% 2%, rgba(155, 140, 255, 0.09), transparent 60%); background-repeat: no-repeat; }
a { color: var(--gold-hi); text-decoration: none; }
a:hover { text-decoration: underline; }
em { font-style: italic; color: var(--gold); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(38px, 6vw, 68px); line-height: 1.02; }
h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; }
h3 { font-size: 22px; }
p { margin: 0; }
.mono { font-family: var(--mono); }
.mute { color: var(--mute); }
.up { color: var(--up); } .down { color: var(--down); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 22px; padding: 12px 26px; background: rgba(12, 9, 19, 0.9); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 9px; color: var(--cream); }
.brand:hover { text-decoration: none; }
.brand span { font: 600 23px/1 var(--serif); letter-spacing: 0.03em; }
.brand i { font: 600 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #2a1406; background: var(--gold); padding: 4px 7px; border-radius: 999px; font-style: normal; }
.bar nav { display: flex; gap: 20px; margin-left: 8px; flex: 1; }
.bar nav a { color: var(--mute); font-weight: 500; font-size: 14px; }
.bar nav a:hover, .bar nav a.on { color: var(--gold-hi); text-decoration: none; }
.hype { font: 12px var(--mono); color: var(--mute); white-space: nowrap; }
.menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; cursor: pointer; }
.wallet-btn { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--sans); color: #2a1406; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; white-space: nowrap; }
.has-wallet .wallet-btn { color: var(--cream); background: rgba(12, 9, 19, 0.6); border: 1px solid var(--line); padding: 8px 14px; }
.wallet-btn b { font: 600 13px var(--mono); color: var(--gold-hi); }
.wallet-btn span { font: 12px var(--mono); color: var(--mute); }
.wallet-menu { position: absolute; top: calc(100% - 4px); right: 16px; z-index: 80; min-width: 230px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: #120c1a; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); display: grid; gap: 2px; }
.wallet-menu p { margin: 4px 10px 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.wallet-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: none; color: var(--cream); font: 500 14px var(--sans); cursor: pointer; text-align: left; }
.wallet-menu button:hover, .wallet-menu button.on { background: rgba(242, 178, 92, 0.12); }
.wallet-menu img, .wallet-menu i { width: 24px; height: 24px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); flex: none; }
.wallet-menu em { margin-left: auto; font: 11px var(--mono); color: var(--gold-hi); font-style: normal; }
.wallet-menu .off { color: var(--rose); justify-content: center; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }

main { max-width: 1180px; margin: 0 auto; padding: 0 22px 80px; }
section { margin-top: 56px; }
.kicker { font: 600 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.lead { color: var(--mute); font-size: 17px; max-width: 620px; margin-top: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px var(--sans); color: #2a1406; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border: 0; border-radius: 999px; padding: 12px 22px; cursor: pointer; }
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn.ghost { background: none; color: var(--cream); border: 1px solid var(--line); }
.btn.small { padding: 7px 14px; font-size: 12px; }
.btn.wide { width: 100%; padding: 14px; font-size: 15px; }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.msg { min-height: 20px; font-size: 13px; color: var(--mute); margin-top: 10px; overflow-wrap: anywhere; }
.msg.ok { color: var(--up); } .msg.bad { color: var(--down); }
.pill { display: inline-flex; align-items: center; gap: 5px; font: 600 11px var(--mono); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--mute); white-space: nowrap; }
.pill.c { color: var(--gold-hi); } .pill.b { color: var(--down); border-color: rgba(232, 115, 92, .35); } .pill.h { color: var(--violet); border-color: rgba(155, 140, 255, .35); } .pill.g { color: var(--jade); border-color: rgba(111, 195, 168, .35); }

.av { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; font: 700 13px var(--mono); color: #1a0f08; overflow: hidden; background: var(--gold); }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.lg { width: 72px; height: 72px; border-radius: 20px; font-size: 20px; }
.av.sm { width: 24px; height: 24px; border-radius: 7px; font-size: 9px; }

.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; margin-top: 44px; }
.hero .art { position: relative; aspect-ratio: 1; max-width: 400px; margin-left: auto; width: 100%; }
.hero .art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(240, 138, 60, .35)); animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .hero .art img { animation: none; } }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; }
.stat { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: rgba(20, 15, 31, .6); }
.stat small { display: block; font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.stat b { display: block; font: 600 22px var(--mono); margin-top: 4px; }
.stat span { font-size: 12px; color: var(--mute); }

.lead-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.lead-card { display: block; color: var(--cream); border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: linear-gradient(160deg, rgba(42, 22, 48, .9), rgba(20, 15, 31, .9)); }
.lead-card:hover { text-decoration: none; border-color: var(--gold); }
.lead-card .cap { font: 600 22px var(--mono); margin-top: 12px; }
.lead-card .sub { font-size: 12px; color: var(--mute); }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { font: 600 13px var(--sans); color: var(--mute); background: none; border: 1px solid transparent; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.tab.on { color: var(--gold-hi); border-color: var(--line); background: rgba(242, 178, 92, .08); }
.search { background: rgba(12, 9, 19, .7); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; min-width: 200px; outline: none; }
.search:focus, .in:focus { border-color: var(--gold); }
table { width: 100%; border-collapse: collapse; }
.mk th { text-align: right; font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.mk th:nth-child(-n+2), .mk td:nth-child(-n+2) { text-align: left; }
.mk td { padding: 12px; border-bottom: 1px solid rgba(242, 178, 92, .08); text-align: right; font: 14px var(--mono); vertical-align: middle; }
.mk tr.go { cursor: pointer; }
.mk tr.go:hover td { background: rgba(242, 178, 92, .05); }
.tk { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tk b { font: 600 15px var(--sans); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.tk span { font: 12px var(--mono); color: var(--mute); }
.empty { text-align: center; padding: 44px 16px; color: var(--mute); }

.tape { display: grid; gap: 6px; }
.tape a { display: flex; align-items: center; gap: 10px; color: var(--cream); font: 13px var(--mono); padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(242, 178, 92, .08); }
.tape a:hover { text-decoration: none; border-color: var(--line); }
.tape .t { margin-left: auto; color: var(--mute); font-size: 11px; }
.two { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; }
.roads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.road b { font: 600 20px var(--serif); display: block; margin: 10px 0 6px; }
.road p { font-size: 14px; color: var(--mute); }
.road .n { font: 600 12px var(--mono); color: var(--gold); }
.cmp td, .cmp th { padding: 11px 12px; border-bottom: 1px solid rgba(242, 178, 92, .1); text-align: left; font-size: 14px; vertical-align: top; }
.cmp th { font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.cmp td:first-child { color: var(--mute); width: 30%; }
.cmp td:nth-child(2) { color: var(--gold-hi); }

.form { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; margin-top: 30px; }
.form .card + .card { margin-top: 18px; }
.sticky { position: sticky; top: 76px; }
label.f { display: block; font: 600 12px var(--sans); color: var(--mute); margin: 16px 0 6px; }
label.f:first-child { margin-top: 0; }
.in { width: 100%; background: rgba(12, 9, 19, .7); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; outline: none; }
textarea.in { resize: vertical; min-height: 78px; }
.hint { font-size: 12px; color: var(--mute); margin-top: 6px; }
.opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.opt { text-align: left; border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; background: rgba(12, 9, 19, .5); cursor: pointer; }
.opt b { display: block; font: 600 14px var(--sans); }
.opt span { font-size: 12px; color: var(--mute); }
.opt.on { border-color: var(--gold); background: rgba(242, 178, 92, .1); }
.opt:disabled { opacity: .45; cursor: not-allowed; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chip { font: 600 12px var(--mono); border: 1px solid var(--line); background: none; border-radius: 999px; padding: 6px 12px; cursor: pointer; color: var(--mute); }
.chip.on, .chip:hover { color: var(--gold-hi); border-color: var(--gold); }
input[type=range] { width: 100%; accent-color: var(--gold); }
.up-img { display: flex; gap: 16px; align-items: center; }
.sum dt { color: var(--mute); font-size: 13px; }
.sum dd { margin: 0; font: 13px var(--mono); text-align: right; }
.sum { display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; margin: 16px 0; }
.bar3 { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .06); margin: 10px 0; }
.bar3 i { display: block; height: 100%; }
.sh-row { display: grid; grid-template-columns: 1fr 86px 34px; gap: 8px; margin-top: 8px; }
.x { background: none; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--mute); }

.tok-head { display: flex; gap: 18px; align-items: center; margin-top: 30px; flex-wrap: wrap; }
.tok-head h1 { font-size: clamp(30px, 4.4vw, 46px); }
.tok-grid { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; margin-top: 22px; }
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.kpis .stat b { font-size: 17px; }
.chart-wrap { margin-top: 14px; padding: 14px; }
#chart { width: 100%; height: 320px; display: block; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 5px 11px; font: 600 12px var(--mono); color: var(--mute); cursor: pointer; }
.seg button.on { background: rgba(242, 178, 92, .16); color: var(--gold-hi); }
.side { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.side button { border: 1px solid var(--line); background: none; border-radius: 12px; padding: 10px; font-weight: 600; cursor: pointer; color: var(--mute); }
.side button.on.buy { background: rgba(127, 214, 168, .14); border-color: var(--up); color: var(--up); }
.side button.on.sell { background: rgba(232, 115, 92, .14); border-color: var(--down); color: var(--down); }
.amt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; background: rgba(12, 9, 19, .7); }
.amt input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font: 600 20px var(--mono); }
.amt select, .amt span { font: 600 13px var(--mono); color: var(--gold-hi); background: none; border: 0; outline: none; }
.amt select option { background: #120c1a; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 5px 0; }
.kv span:first-child { color: var(--mute); white-space: nowrap; }
.kv span:last-child { font-family: var(--mono); text-align: right; }
.rules .big { font: 600 34px var(--mono); color: var(--gold-hi); }
.note { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 12px; padding: 10px 14px; font-size: 13px; color: var(--mute); margin-top: 12px; }
.note.warn { border-left-color: var(--down); }
.tr td, .tr th { padding: 9px 10px; font: 13px var(--mono); text-align: right; border-bottom: 1px solid rgba(242, 178, 92, .08); }
.tr th { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.tr td:first-child, .tr th:first-child { text-align: left; }
.scroll { overflow-x: auto; }
.doc { max-width: 820px; }
.doc h2 { margin: 44px 0 12px; }
.doc h3 { margin: 26px 0 8px; }
.doc p, .doc li { color: #d8cbc4; margin-bottom: 10px; }
.doc ul { padding-left: 20px; }
.doc code { font: 13px var(--mono); color: var(--gold-hi); overflow-wrap: anywhere; }
footer { border-top: 1px solid var(--line); margin-top: 70px; padding: 26px 22px 40px; text-align: center; color: var(--mute); font-size: 13px; }
footer a { margin: 0 8px; }

.tok-grid > *, .form > *, .two > *, .hero > * { min-width: 0; }
.bloom { margin-top: 14px; padding: 16px 20px; }
.bloom .bar3 { height: 10px; }
.bloom .bar3 i { background: linear-gradient(90deg, var(--ember), var(--gold-hi)); border-radius: 999px; }
.curve td, .curve th { padding: 8px 12px; text-align: right; font: 13px var(--mono); border-bottom: 1px solid rgba(242, 178, 92, .1); }
.curve th { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.curve td:first-child, .curve th:first-child { text-align: left; }
@media (max-width: 980px) {
  .hero, .two, .form, .tok-grid { grid-template-columns: 1fr; }
  .hero .art { max-width: 220px; margin: 0 auto; order: -1; }
  .lead-grid, .roads { grid-template-columns: repeat(2, 1fr); }
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .sticky { position: static; }
  .bar { padding: 10px 14px; gap: 10px; }
  .bar nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; background: #120c1a; border-bottom: 1px solid var(--line); padding: 8px 14px; }
  .bar nav.open { display: flex; }
  .bar nav a { padding: 11px 6px; }
  .menu-btn { display: block; }
  .bar .wallet-btn { margin-left: auto; }
  .hype { display: none; }
}
@media (max-width: 640px) {
  main { padding: 0 14px 60px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .lead-grid, .roads { grid-template-columns: 1fr; }
  .mk .hide-s { display: none; }
  .mk td, .mk th { padding: 10px 6px; font-size: 13px; }
  .tk b { max-width: 130px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .has-wallet .wallet-btn span { display: none; }
  #chart { height: 240px; }
  .brand i { display: none; }
}
