:root {
  --bg: #0a0a0b;
  --raise: #111113;
  --line: #1d1d21;
  --bar: #2b2b31;
  --muted: #7d7d87;
  --text: #ededf0;
  --accent: #8f7dff; /* the VWAP line */
  --up: #35c27f;
  --down: #ef5350;
  --warn: #e0b252;
  --head: 56px;
  --foot: 56px;
  --pad: 20px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 13px/1.45 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }

/* ---------- header ---------- */

.top {
  position: sticky; top: 0; z-index: 10;
  height: var(--head);
  /* brand left, nav centred on the page, the mobile menu button right */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.brand { justify-self: start; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
.mark { width: 20px; height: 20px; display: block; color: var(--text); }
.mark .cut { stroke: var(--bg); }
.mark .line { stroke: var(--accent); }
.nav { justify-self: center; display: flex; gap: 26px; }
.nav a { color: var(--muted); transition: color .15s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.menu {
  grid-column: 3; justify-self: end;
  display: none;
  font: inherit; color: var(--text); background: none;
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; cursor: pointer;
}

/* ---------- footer ---------- */

.bottom {
  min-height: var(--foot);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--pad);
  border-top: 1px solid var(--line);
}
.tagline { font-size: 15px; letter-spacing: -0.01em; }
.session { color: var(--muted); font-variant-numeric: tabular-nums; }
.session b { font-weight: 500; }
.session .open { color: var(--up); }
.session .closed { color: var(--text); }

/* ---------- market board (landing) ---------- */

.landing { height: 100vh; height: 100dvh; display: grid; grid-template-rows: var(--head) minmax(0, 1fr) auto; }
.board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  min-height: 0;
}
.cell {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px;
  min-width: 0; min-height: 0;
  padding: 14px 16px 12px;
  background: var(--bg);
  transition: background .15s;
}
a.cell:hover { background: var(--raise); }
.cell .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.cell .id { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sym { font-weight: 500; white-space: nowrap; }
.name { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px { font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .9s; }
.px.tick-up { color: var(--up); transition: none; }
.px.tick-down { color: var(--down); transition: none; }
.cell .foot { font-size: 12px; }
.chg { font-variant-numeric: tabular-nums; }
.chg.up { color: var(--up); }
.chg.down { color: var(--down); }
.vw { color: var(--muted); white-space: nowrap; }
.vw i { font-style: normal; color: var(--accent); }

.chart { display: block; width: 100%; height: 100%; min-height: 48px; overflow: visible; }
.chart .vol { fill: var(--bar); }
.chart .price { fill: none; stroke: #9a9aa4; stroke-width: 1.25; stroke-linejoin: round; }
.chart .vwap { fill: none; stroke: var(--accent); stroke-width: 1.25; stroke-linejoin: round; }
.chart .last { fill: var(--text); }

/* ---------- placeholder pages ---------- */

.page { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: var(--head) 1fr auto; }
.soon { padding: 12vh var(--pad) 48px; max-width: 720px; }
.soon .kicker { color: var(--accent); margin-bottom: 14px; }
.soon h1 { margin: 0 0 14px; font-size: 32px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.soon p { color: var(--muted); max-width: 52ch; }
.soon a { color: var(--text); border-bottom: 1px solid var(--line); }
.soon a:hover { border-color: var(--text); }

/* ---------- trade terminal ---------- */

.trade .terminal {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 380px;
  min-height: 0;
}

.markets { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.search {
  margin: 12px; padding: 9px 12px;
  font: inherit; color: var(--text);
  background: var(--raise); border: 1px solid var(--line); border-radius: 6px; outline: none;
}
.search:focus { border-color: #3a3a42; }
.list { list-style: none; margin: 0; padding: 0 0 12px; overflow-y: auto; max-height: calc(100vh - var(--head) - var(--foot) - 60px); }
.list button {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px;
  padding: 9px 14px 9px 12px;
  font: inherit; color: inherit; text-align: left;
  background: none; border: 0; border-left: 2px solid transparent; cursor: pointer;
}
.list button:hover { background: var(--raise); }
.list button[aria-current="true"] { background: var(--raise); border-left-color: var(--accent); }
.list .px { text-align: right; }
.list .chg { text-align: right; font-size: 12px; }

.market { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px 24px 24px; }
.market-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.market-head h1 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.market-head p { margin-top: 2px; color: var(--muted); }
.quote-now { text-align: right; }
.big-px { font-size: 24px; font-variant-numeric: tabular-nums; }
.quote-now .chg { display: block; font-size: 12px; margin-top: 2px; }
.chart.big { height: clamp(220px, 38vh, 420px); }
.chart text { font: 500 11px 'IBM Plex Mono', ui-monospace, monospace; }
.chart .tag-price { fill: var(--text); }
.chart .tag-vwap { fill: var(--accent); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 12px; }
.legend .key::before { content: ''; display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; background: #9a9aa4; }
.legend .key.vwap::before { background: var(--accent); }
.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  margin: 0; background: var(--line); border: 1px solid var(--line);
}
.stats div { padding: 12px 14px; background: var(--bg); }
.stats dt { color: var(--muted); font-size: 12px; }
.stats dd { margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.token-meta { color: var(--muted); font-size: 12px; }
.token-meta a { color: var(--text); border-bottom: 1px solid var(--line); }

.ticket { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 24px; border-left: 1px solid var(--line); }
.ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sides { display: flex; padding: 2px; border: 1px solid var(--line); border-radius: 7px; }
.sides button { padding: 6px 16px; font: inherit; color: var(--muted); background: none; border: 0; border-radius: 5px; cursor: pointer; }
.sides button[aria-selected="true"] { color: var(--text); background: var(--raise); }
.wallet-chip { padding: 6px 10px; font: inherit; font-size: 12px; color: var(--text); background: none; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.wallet-chip:hover { border-color: #3a3a42; }
.field { display: block; padding: 12px 14px; background: var(--raise); border: 1px solid var(--line); border-radius: 8px; }
.field:focus-within { border-color: #3a3a42; }
.field-top { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.bal { padding: 0; font: inherit; font-size: 12px; color: var(--muted); background: none; border: 0; cursor: pointer; }
button.bal:hover { color: var(--text); }
.field-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.field input, .field output {
  flex: 1; min-width: 0; padding: 0;
  font: 500 24px 'IBM Plex Mono', ui-monospace, monospace; color: var(--text);
  background: none; border: 0; outline: none;
}
.field input::placeholder { color: #45454d; }
.unit { color: var(--muted); white-space: nowrap; }
.quote { display: grid; gap: 7px; margin: 2px 0; font-size: 12px; }
.quote div { display: flex; justify-content: space-between; gap: 12px; }
.quote dt { color: var(--muted); }
.quote dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cta {
  padding: 14px; font: 500 14px 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--bg); background: var(--accent); border: 1px solid var(--accent); border-radius: 8px; cursor: pointer;
}
.cta:hover:not(:disabled) { filter: brightness(1.08); }
.cta:disabled { color: var(--muted); background: var(--raise); border-color: var(--line); cursor: default; }
.cta.small { padding: 10px 18px; font-size: 13px; }
.note { min-height: 1em; color: var(--muted); font-size: 12px; }
.note.error { color: var(--down); }
.receipt { padding: 12px 14px; font-size: 12px; border: 1px solid var(--line); border-radius: 8px; }
.receipt b { font-weight: 500; color: var(--up); }
.receipt a { display: inline-block; margin-top: 6px; border-bottom: 1px solid var(--line); }
.fineprint { color: var(--muted); font-size: 11px; line-height: 1.5; }
.link { padding: 0; font: inherit; color: var(--text); background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }

/* ---------- launch ---------- */

a.cta { display: inline-block; text-align: center; }
.launch { display: flex; flex-direction: column; gap: 28px; width: 100%; min-width: 0; max-width: 1240px; margin: 0 auto; padding: 24px var(--pad) 48px; }
.net-notice { padding: 10px 14px; font-size: 12px; color: var(--text); background: var(--raise); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 6px; }
.launch-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.launch-head h1, .coin-head h1 { margin: 0 0 6px; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.launch-head .cta { padding: 12px 18px; }
.section-title { margin: 0 0 12px; font-size: 13px; font-weight: 500; color: var(--muted); }
.accent { color: var(--accent); }
.up { color: var(--up); }
.down { color: var(--down); }

.top-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.top-cards > p { grid-column: 1 / -1; padding: 18px; border: 1px solid var(--line); border-radius: 10px; }
.top-cards > p a, .muted a { color: var(--text); border-bottom: 1px solid var(--line); }
.top-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.top-card:hover { background: var(--raise); }
.top-card dl { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 10px; margin: 0; font-size: 12px; }
.top-card dt { color: var(--muted); }
.top-card dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.curve { display: block; width: 100%; height: 64px; }
.curve .off { fill: var(--bar); }
.curve .on { fill: var(--accent); }

.coin-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.coin-id img { width: 32px; height: 32px; flex: none; object-fit: cover; background: var(--raise); border-radius: 6px; }
.coin-id > span { display: flex; flex-direction: column; min-width: 0; }
.coin-id b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coin-id .muted { font-size: 12px; }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.filters .search { width: 240px; margin: 0 0 0 auto; }
.seg { display: flex; padding: 2px; border: 1px solid var(--line); border-radius: 7px; }
.seg button { padding: 6px 12px; font: inherit; font-size: 12px; color: var(--muted); background: none; border: 0; border-radius: 5px; cursor: pointer; }
.seg button span { color: var(--muted); margin-left: 4px; }
.seg button[aria-selected="true"] { color: var(--text); background: var(--raise); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table.coins, table.trades { width: 100%; border-collapse: collapse; font-size: 13px; }
.coins th, .trades th { padding: 10px 14px; font-size: 12px; font-weight: 400; color: var(--muted); text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.coins td, .trades td { padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.coins tr:last-child td, .trades tr:last-child td { border-bottom: 0; }
.coins tbody tr:hover { background: var(--raise); }
.num { text-align: right !important; }
.curve-cell { display: flex; align-items: center; gap: 10px; }
.curve-cell .curve { width: 96px; height: 22px; }
.empty { padding: 18px 14px; }

.subnav { display: flex; align-self: flex-start; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; }
.subnav a { padding: 6px 14px; font-size: 13px; color: var(--muted); border-radius: 6px; }
.subnav a:hover { color: var(--text); }
.subnav a[aria-current="page"] { color: var(--text); background: var(--raise); }
.yours-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); }
.yours-sum div { padding: 12px 14px; background: var(--bg); }
.yours-sum dt { color: var(--muted); font-size: 12px; }
.yours-sum dd { margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.yours-body { display: flex; flex-direction: column; gap: 28px; }
/* Admin page */
#sum.yours-sum { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; background: none; border: 0; }
#sum.yours-sum div { border: 1px solid var(--line); border-radius: 8px; }
#sum dd a { color: var(--text); }
.admin-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-actions { display: flex; align-items: center; gap: 16px; }
table.coins td small { display: block; margin-top: 2px; font-size: 11px; }
table.coins tr.is-hidden .coin-id, table.coins tr.is-hidden .curve-cell { opacity: 0.5; }
.toggle { padding: 4px 10px; font: inherit; font-size: 12px; color: var(--muted); background: var(--raise); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.toggle[aria-pressed="true"] { color: var(--text); border-color: var(--accent); }
.link:disabled { color: var(--muted); border-bottom-color: transparent; cursor: default; }
.yours-body .table-wrap + .muted { margin-top: 10px; font-size: 12px; }
.connect-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; }

/* create */
.create { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.create form { display: flex; flex-direction: column; gap: 26px; }
.step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; }
.step > .no { color: var(--accent); font-size: 12px; padding-top: 2px; }
.step h2 { margin: 0 0 14px; font-size: 15px; font-weight: 500; }
.step .body { display: flex; flex-direction: column; gap: 12px; grid-column: 2; }
.row2 { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.input { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.input input, .input textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 13px; color: var(--text);
  background: var(--raise); border: 1px solid var(--line); border-radius: 6px; outline: none; resize: vertical;
}
.input input:focus, .input textarea:focus { border-color: #3a3a42; }
.image-drop {
  display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; cursor: pointer;
  color: var(--muted); font-size: 12px; background: var(--raise); border: 1px dashed #3a3a42; border-radius: 8px;
}
.image-drop img { width: 100%; height: 100%; object-fit: cover; }
.pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pair {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; text-align: left;
  font: inherit; color: var(--text); background: var(--raise); border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.pair span { color: var(--muted); font-size: 11px; }
.pair[aria-pressed="true"] { border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { padding: 8px 14px; font: inherit; font-size: 12px; color: var(--muted); background: var(--raise); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.chips button[aria-pressed="true"] { color: var(--text); border-color: var(--accent); }
.terms { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.terms b { color: var(--text); font-weight: 500; }
.preview { position: sticky; top: calc(var(--head) + 16px); display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.preview .coin-id img { width: 44px; height: 44px; }
.preview dl { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 10px; margin: 0; font-size: 12px; }
.preview dt { color: var(--muted); }
.preview dd { margin: 2px 0 0; }
.progress-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.progress-steps .now { color: var(--text); }
.progress-steps .done { color: var(--up); }

/* coin page */
.coin { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.coin-head { display: flex; align-items: center; gap: 16px; }
.coin-head img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--raise); }
.coin-head .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.badge { padding: 2px 8px; font-size: 11px; color: var(--text); border: 1px solid var(--line); border-radius: 999px; }
.badge.grad { color: var(--up); border-color: var(--up); }
.ca { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.ca code { color: var(--text); font-family: inherit; }
.ca button { padding: 2px 8px; font: inherit; font-size: 11px; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; }
.coin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); }
.coin-stats div { padding: 12px 14px; background: var(--bg); }
.coin-stats dt { color: var(--muted); font-size: 12px; }
.coin-stats dd { margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.coin-stats dd small { display: block; color: var(--muted); font-size: 11px; }
.panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.panel h2 { margin: 0; font-size: 13px; font-weight: 500; }
.panel-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.panel-row span:first-child { color: var(--muted); }
.price-chart { display: block; width: 100%; height: 220px; }
.price-chart .price { fill: none; stroke: #9a9aa4; stroke-width: 1.5; }
.price-chart .vol { fill: var(--bar); }
.about p { margin: 0; color: var(--muted); font-size: 13px; }
.links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; }
.links a { border-bottom: 1px solid var(--line); }
.slip { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.slip .chips button { padding: 4px 10px; }

/* ---------- documents (litepaper, whitepaper, docs) ---------- */

.doc {
  display: grid; grid-template-columns: 220px minmax(0, 72ch); justify-content: center; gap: 56px;
  width: 100%; padding: 36px var(--pad) 72px;
}
.toc {
  position: sticky; top: calc(var(--head) + 28px); align-self: start;
  display: flex; flex-direction: column; max-height: calc(100vh - var(--head) - 56px); overflow-y: auto;
  font-size: 12px;
}
.toc p { margin: 16px 0 6px; color: var(--text); font-weight: 500; }
.toc p:first-child { margin-top: 0; }
.toc a { padding: 5px 12px; color: var(--muted); border-left: 1px solid var(--line); }
.toc a:hover { color: var(--text); }
.toc a[aria-current="true"] { color: var(--text); border-left-color: var(--accent); }
.prose { min-width: 0; }
.prose .kicker { margin-bottom: 10px; color: var(--accent); font-size: 12px; }
.prose h1 { margin: 0 0 10px; font-size: 30px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; }
.prose .lede { margin-bottom: 30px; color: var(--muted); font-size: 15px; }
.prose h2 { margin: 44px 0 14px; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; scroll-margin-top: calc(var(--head) + 20px); }
.prose h3 { margin: 26px 0 10px; font-size: 14px; font-weight: 500; scroll-margin-top: calc(var(--head) + 20px); }
.prose p, .prose li { color: #c8c8ce; font-size: 14px; line-height: 1.75; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin-bottom: 4px; }
.prose strong { color: var(--text); font-weight: 500; }
.prose a { color: var(--text); border-bottom: 1px solid #3a3a42; }
.prose a:hover { border-color: var(--text); }
.prose code { padding: 1px 5px; font-family: inherit; font-size: 13px; color: var(--text); background: var(--raise); border-radius: 4px; }
.prose table { width: 100%; margin: 0 0 20px; border-collapse: collapse; font-size: 13px; }
.prose th, .prose td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.6; }
.prose thead th { color: var(--muted); font-weight: 400; }
.prose tbody th { width: 32%; color: var(--text); font-weight: 500; }
.prose td { color: #c8c8ce; }
.callout { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 6px; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.formula {
  margin: 0 0 16px; padding: 12px 14px; overflow-x: auto;
  font-size: 13px; color: var(--text); white-space: pre; background: var(--raise); border-radius: 6px;
}
.status-list { margin: 0 0 20px; padding: 0; list-style: none; }
.status-list li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.status-list li span:first-child { flex: none; width: 88px; font-size: 12px; }
.live { color: var(--up); }
.preview-tag { color: var(--accent); }
.planned { color: var(--muted); }
.doc-foot { margin-top: 48px; padding-top: 16px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }

/* ---------- status ---------- */

.status-page { display: flex; flex-direction: column; gap: 30px; width: 100%; max-width: 920px; margin: 0 auto; padding: 32px var(--pad) 64px; }
.status-head h1 { margin: 0 0 10px; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.overall { font-size: 17px; }
.overall.ok, .state.ok { color: var(--up); }
.overall.degraded, .state.degraded { color: var(--warn); }
.overall.down, .state.down { color: var(--down); }
.state.off { color: var(--muted); }
.svc { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 10px; }
.svc li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.svc li:last-child { border-bottom: 0; }
.svc li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.svc b { font-weight: 500; }
.svc .muted { font-size: 12px; }
.state { flex: none; font-size: 12px; }
.addr { font-family: inherit; }

/* ---------- dialogs ---------- */

dialog.sheet {
  width: min(440px, calc(100vw - 32px)); padding: 22px;
  color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
}
dialog.sheet::backdrop { background: rgba(0, 0, 0, 0.6); }
.sheet h2 { margin: 0 0 6px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.sheet form > .ghost { margin-top: 6px; }
.muted { color: var(--muted); font-size: 12px; }
.muted a, .check a { color: var(--text); border-bottom: 1px solid var(--line); }
.wallets { display: grid; gap: 8px; margin: 16px 0; padding: 0; list-style: none; }
.wallets button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px;
  font: inherit; color: var(--text); text-align: left;
  background: var(--raise); border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.wallets button:hover { border-color: #3a3a42; }
.wallets img { width: 24px; height: 24px; border-radius: 6px; }
.wallets .connected { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0 8px; font-size: 12px; }
.wallets .connected b { font-weight: 500; }
.select { display: block; margin: 16px 0 12px; font-size: 12px; color: var(--muted); }
.select select {
  display: block; width: 100%; margin-top: 6px; padding: 10px;
  font: inherit; font-size: 13px; color: var(--text);
  background: var(--raise); border: 1px solid var(--line); border-radius: 6px;
}
.check { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.check input { margin-top: 2px; accent-color: var(--accent); }
.blocked { margin-top: 10px; color: var(--down); font-size: 12px; }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.ghost { padding: 10px 16px; font: inherit; font-size: 13px; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.ghost:hover { color: var(--text); }

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

@media (max-width: 1199px) {
  .trade .terminal { grid-template-columns: minmax(0, 1fr) 360px; }
  .markets { grid-column: 1 / -1; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
  .search { width: 180px; flex: none; }
  .list { display: flex; max-height: none; padding: 0; overflow-x: auto; overflow-y: hidden; }
  .list li { flex: none; }
  .list button { width: auto; min-width: 128px; padding: 10px 14px; border-left: 0; border-bottom: 2px solid transparent; }
  .list button[aria-current="true"] { border-bottom-color: var(--accent); }
  .list .name { display: none; }
}

@media (max-width: 959px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 24px; }
  .toc { position: static; flex-direction: row; gap: 6px; max-height: none; overflow-x: auto; padding-bottom: 4px; }
  .toc p { display: none; }
  .toc a { flex: none; padding: 5px 10px; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; }
  .toc a[aria-current="true"] { border-color: var(--accent); }
  .top-cards { grid-template-columns: minmax(0, 1fr); }
  .create, .coin { grid-template-columns: minmax(0, 1fr); }
  .preview { position: static; }
  .coin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yours-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 859px) {
  .launch-head { flex-direction: column; align-items: stretch; }
  .filters .search { width: 100%; margin: 0; }
  .row2 { grid-template-columns: 96px minmax(0, 1fr); }
  .row3 { grid-template-columns: minmax(0, 1fr); }
  .trade .terminal { grid-template-columns: minmax(0, 1fr); }
  .ticket { border-left: 0; border-top: 1px solid var(--line); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search { display: none; }
  .market { padding: 16px var(--pad) 20px; }
  .ticket { padding: 16px var(--pad) 24px; }
}

@media (max-width: 1099px) {
  .landing { height: auto; min-height: 100vh; }
  .board { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 168px; }
}

@media (max-height: 620px) and (min-width: 1100px) {
  .landing { height: auto; }
  .board { grid-auto-rows: 160px; }
}

@media (max-width: 719px) {
  :root { --pad: 16px; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 156px; }
  .cell { padding: 12px 12px 10px; }
  .name { display: none; }
  .menu { display: block; }
  .nav {
    display: none;
    position: absolute; top: var(--head); left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .nav a { padding: 14px var(--pad); border-top: 1px solid var(--line); }
  .top.open .nav { display: flex; }
  .bottom { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding-top: 14px; padding-bottom: 14px; }
  .tagline { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}