/* onagi app · same paper/ink/green language as the landing page, laid out as
   a workspace: fixed left rail, content that scrolls under a sticky top bar.
   Design tokens and the .btn / .tag / .auth-* modal styles come from styles.css. */

.ap-page { background: var(--paper); }
.ap-boot {
  padding: 80px 24px;
  text-align: center;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
}

.ap { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- top bar ----------
   8 Aug: the left rail is gone. Three sections fit in one row at any width, so
   a whole navigation layer (rail + drawer + phone bottom bar) was removed
   rather than kept for three links. */
.ap-brand { flex: 0 0 auto; display: block; }
.ap-brand img { display: block; height: auto; max-width: 100%; }
/* .ap-brand img (class+element) outranks a bare class, so the swap rules
   carry the same prefix or the lockup never hides */
.ap-brand img.ap-brandmark { display: none; }
.ap-topnav { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ap-topitem {
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.ap-topitem:hover { color: var(--ink); }
.ap-topitem.on { color: var(--green); border-bottom-color: var(--green); }

.ap-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 28px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.ap-wallet { margin-left: auto; position: relative; }
.ap-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 300px;
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 14px;
  display: grid;
  gap: 8px;
  z-index: 30;
}
.ap-menulabel { font-family: var(--mono); font-size: 11px; color: var(--green); text-transform: uppercase; letter-spacing: 0.08em; }
.ap-menuaddr { font-family: var(--mono); font-size: 12px; word-break: break-all; margin-bottom: 4px; }
.ap-body { padding: 28px; flex: 1 1 auto; }

/* ---------- layout helpers ---------- */
.ap-stack { display: grid; gap: 20px; align-content: start; }
.ap-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.ap-split.wide-left { grid-template-columns: 1.6fr 1fr; }
.ap-split.wide-right { grid-template-columns: 1fr 1.15fr; }
@media (max-width: 1080px) { .ap-split, .ap-split.wide-left, .ap-split.wide-right { grid-template-columns: 1fr; } }

/* ---------- panel ----------
   padding:0 is not decoration: the landing page styles every <section> with
   80px of vertical air, and a panel is a <section>, so without this every card
   in the app opens with an empty band above its own title. */
.ap-panel { border: 1px solid var(--rule); background: var(--panel); padding: 0; }
.ap-panelhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.ap-panelhead h2 { font-size: 15px; letter-spacing: -0.01em; }
.ap-panelaside { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.ap-panelbody { padding: 18px; }

/* ---------- stats ---------- */
.ap-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); background: var(--panel); }
.ap-stat { padding: 18px; border-right: 1px solid var(--hairline); }
.ap-stat:last-child { border-right: none; }
.ap-statlabel { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.ap-statvalue { display: block; margin-top: 6px; font-family: var(--mono); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ap-statvalue.accent { color: var(--green); }
.ap-statsub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-soft); }
@media (max-width: 900px) {
  .ap-stats { grid-template-columns: repeat(2, 1fr); }
  .ap-stat:nth-child(2n) { border-right: none; }
  .ap-stat:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
}

/* ---------- empty, gate, notes ---------- */
.ap-empty { padding: 40px 18px; text-align: center; border: 1px dashed var(--hairline); }
.ap-emptytitle { font-weight: 600; font-size: 14px; }
.ap-emptybody { margin-top: 6px; font-size: 13px; color: var(--ink-soft); max-width: 520px; margin-inline: auto; line-height: 1.6; }
.ap-gate { padding: 36px 18px; text-align: center; border: 1px dashed var(--hairline); }
.ap-gatetitle { font-weight: 600; font-size: 15px; }
.ap-gatebody { margin: 6px auto 16px; font-size: 13px; color: var(--ink-soft); max-width: 480px; line-height: 1.6; }
.ap-note { margin-top: 14px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }
.ap-hint { font-size: 12px; color: var(--ink-soft); line-height: 1.6; }
.ap-formnote { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); line-height: 1.6; }
.ap-warn { font-size: 12px; color: var(--red); line-height: 1.5; margin-top: 6px; }
.ap-prelaunch {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--hairline); background: var(--panel);
  padding: 12px 16px; font-size: 13px; color: var(--ink-soft); line-height: 1.5;
}
.ap-dot { width: 7px; height: 7px; background: var(--green); flex: 0 0 auto; }

/* ---------- toolbar, tabs, search ---------- */
.ap-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ap-tabs { display: flex; gap: 2px; }
.ap-tab {
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  padding: 8px 14px; color: var(--ink-soft);
  border-bottom: 2px solid transparent;
}
.ap-tab:hover { color: var(--ink); }
.ap-tab.on { color: var(--green); border-bottom-color: var(--green); }
.ap-tabs.small .ap-tab { padding: 5px 10px; font-size: 11px; text-transform: capitalize; }
.ap-search {
  margin-left: auto; min-width: 260px; flex: 0 1 340px;
  border: 1px solid var(--hairline); background: var(--panel);
  padding: 9px 12px; font-family: var(--mono); font-size: 12px; color: var(--ink);
}
.ap-search:focus { outline: none; border-color: var(--green); }

/* ---------- table ---------- */
.ap-tablewrap { overflow-x: auto; }
.ap-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ap-table th {
  text-align: left; padding: 10px 12px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline); white-space: nowrap;
}
.ap-table td { padding: 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.ap-table tbody tr:last-child td { border-bottom: none; }
.ap-table tbody tr { cursor: default; }
.ap-table tbody tr.on { background: var(--paper); }
.ap-table td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-table td.num.up { color: var(--green); }
.ap-table td.num.down { color: var(--red); }
.ap-tsym { font-family: var(--mono); font-weight: 600; font-size: 13px; display: block; }
.ap-tname { font-size: 12px; color: var(--ink-soft); display: block; }
.ap-tmint { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); display: block; }
.ap-curve { display: block; width: 90px; height: 5px; background: var(--hairline); }
.ap-curve i { display: block; height: 100%; background: var(--green); }

/* ---------- forms ---------- */
.ap-form { display: grid; gap: 10px; }
.ap-label {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft); display: block; margin-bottom: 2px;
}
.ap-input {
  width: 100%; border: 1px solid var(--hairline); background: var(--paper);
  padding: 10px 12px; font-family: var(--mono); font-size: 13px; color: var(--ink);
}
.ap-input:focus { outline: none; border-color: var(--green); }
.ap-textarea { font-family: var(--sans); line-height: 1.6; resize: vertical; }
.ap-inputrow { display: flex; align-items: stretch; gap: 8px; }
/* same intrinsic-input trap as .ap-amountinput: basis 0 so the row can be as
   narrow as the column it sits in (the phone's book-and-ticket split) */
.ap-inputrow .ap-input { flex: 1 1 0; min-width: 0; }
.ap-suffix { display: flex; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.ap-mini {
  border: 1px solid var(--hairline); background: none; cursor: pointer;
  padding: 0 12px; font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
}
.ap-mini:hover { border-color: var(--green); color: var(--green); }
.ap-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ap-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-choice {
  border: 1px solid var(--hairline); background: var(--paper); cursor: pointer;
  padding: 7px 12px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft);
}
.ap-choice.on { border-color: var(--green); color: var(--green); }
.ap-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.ap-check input { margin-top: 3px; accent-color: var(--green); }
.ap-select {
  border: 1px solid var(--hairline); background: var(--paper);
  padding: 8px 10px; font-family: var(--mono); font-size: 12px; color: var(--ink);
}
.ap-range { width: 100%; accent-color: var(--green); }
.ap-drop { border: 1px dashed var(--hairline); padding: 14px; display: grid; gap: 6px; font-size: 12px; color: var(--ink-soft); }

/* ---------- trade ticket ---------- */
.ap-ticket { display: grid; gap: 12px; }
.ap-side { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ap-sidebtn {
  border: 1px solid var(--rule); background: none; cursor: pointer;
  padding: 11px; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.ap-sidebtn.buy.on { background: var(--green); border-color: var(--green); color: #fff; }
.ap-sidebtn.sell.on { background: var(--red); border-color: var(--red); color: #fff; }
.ap-amount { display: flex; align-items: center; gap: 10px; border: 1px solid var(--hairline); background: var(--paper); padding: 18px 14px; }
.ap-amountinput {
  /* flex-basis 0, not auto: an <input> defaults to ~20 characters wide, and at
     30px that intrinsic size (>430px) becomes the ticket's minimum width: it
     pushed the whole form out of the 332px trade rail. */
  flex: 1 1 0; width: 0; min-width: 0; border: none; background: none; outline: none;
  font-family: var(--mono); font-size: 30px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ap-unit { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.ap-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ap-preset {
  border: 1px solid var(--hairline); background: none; cursor: pointer;
  padding: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft);
}
.ap-preset:hover { border-color: var(--green); color: var(--green); }
.ap-ticketrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ap-balance { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.ap-slip { border: 1px solid var(--hairline); padding: 12px; display: grid; gap: 8px; }
.ap-slipinput { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; }
.ap-slipinput .ap-input { width: 70px; text-align: right; }
.ap-quote { border: 1px solid var(--hairline); }
.ap-quotehead {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: none; cursor: pointer; padding: 11px 12px;
  font-size: 13px; color: var(--ink-soft);
}
.ap-quotehead b { font-family: var(--mono); color: var(--ink); }
.ap-quotebody { border-top: 1px solid var(--hairline); padding: 10px 12px; display: grid; gap: 6px; font-size: 12px; }
.ap-quotebody > div { display: flex; justify-content: space-between; gap: 10px; }
.ap-quotebody dt { color: var(--ink-soft); }
.ap-quotebody dd { font-family: var(--mono); }
.ap-info { display: grid; gap: 6px; border-top: 1px solid var(--hairline); padding-top: 10px; font-size: 12px; }
.ap-info > div { display: flex; justify-content: space-between; gap: 10px; }
.ap-info dt { color: var(--ink-soft); }
.ap-info dd { font-family: var(--mono); }
.ap-long, .ap-short {
  border: 1px solid var(--rule); cursor: pointer; padding: 11px;
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: #fff;
}
.ap-long { background: var(--green); border-color: var(--green); }
.ap-short { background: var(--red); border-color: var(--red); }
.ap-long:disabled, .ap-short:disabled { opacity: 0.5; cursor: default; }

/* ---------- market bar, chart, book ---------- */
.ap-marketbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border: 1px solid var(--rule); background: var(--panel); padding: 14px 18px;
}
.ap-marketbar .ap-label { margin: 0; }
.ap-marketstats { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto; font-family: var(--mono); font-size: 13px; }
.ap-marketstats i {
  display: block; font-style: normal; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft);
}
.ap-chart {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; border: 1px dashed var(--hairline);
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft); text-align: center; padding: 16px;
}
.ap-chart.tall { min-height: 340px; }
.ap-book { display: grid; gap: 8px; }
.ap-bookhead {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-soft);
  padding-bottom: 8px; border-bottom: 1px solid var(--hairline);
}

/* ---------- payouts ---------- */
.ap-cycles { display: grid; gap: 10px; }
.ap-cycle { border: 1px solid var(--hairline); padding: 14px; }
.ap-cycle header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ap-cycletime { font-family: var(--mono); font-size: 12px; }
.ap-cycleusd { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--green); }
.ap-cyclesub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.ap-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ap-chip { border: 1px solid var(--hairline); padding: 4px 8px; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.ap-chip b { color: var(--ink); }
.ap-facts { display: grid; gap: 0; }
.ap-factrow { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.ap-factrow:last-child { border-bottom: none; }
.ap-sym { font-family: var(--mono); font-weight: 600; font-size: 14px; }
.ap-name { font-size: 13px; color: var(--ink-soft); }
.ap-weight { font-family: var(--mono); font-size: 12px; color: var(--green); }
.ap-steps { display: grid; gap: 12px; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.ap-steps b { color: var(--ink); }

/* the rewards panel is reused from the landing page; drop its outer border here
   because the app panel already draws one */
.ap-panelbody > .rw-panel { border: none; }
.ap-panelbody > .rw-panel > .rw-head { padding-left: 0; padding-right: 0; padding-top: 0; }
.ap-panelbody > .rw-panel > .rw-note { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.ap-panelbody > .rw-connect { border: 1px dashed var(--hairline); }

/* ---------- responsive rail ---------- */
/* On a phone the top bar competes with the page for the first 60px of screen.
   The section hint is the one thing there that repeats what the nav already
   says, so it goes, and the wallet button stops wrapping onto two lines. */
@media (max-width: 620px) {
  .ap-top { gap: 10px; padding: 12px 16px; }
  .ap-top .btn { white-space: nowrap; padding: 9px 13px; font-size: 10px; min-height: 38px; }
}

@media (max-width: 900px) {
  .ap-body { padding: 20px 16px; }
  .ap-top { padding: 14px 16px; }
}

/* ---------- transaction toast ---------- */
.ap-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; align-items: center; gap: 14px; max-width: 460px;
  border: 1px solid var(--rule); background: var(--panel);
  padding: 13px 16px; box-shadow: 0 10px 30px rgba(13, 13, 12, 0.12);
}
.ap-toast.success { border-left: 4px solid var(--green); }
.ap-toast.error { border-left: 4px solid var(--red); }
.ap-toasttext { font-size: 13px; line-height: 1.5; flex: 1 1 auto; }
.ap-toastlink { font-family: var(--mono); font-size: 11px; color: var(--green); white-space: nowrap; }
.ap-toastlink:hover { text-decoration: underline; }
.ap-toastx { background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--ink-soft); }
.ap-txlink {
  border: 1px solid var(--hairline); padding: 4px 8px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
}
.ap-txlink:hover { border-color: var(--green); color: var(--green); }
@media (max-width: 560px) { .ap-toast { left: 16px; right: 16px; max-width: none; } }

/* ---------- launch feed ---------- */
.ap-feed { display: grid; }
.ap-feedrow {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--hairline);
}
.ap-feedrow:last-child { border-bottom: none; }
/* feed rows open the coin page, so they are buttons now: strip the UA chrome
   without touching the row's own hairline */
button.ap-feedrow {
  width: 100%; background: none; border: none; border-bottom: 1px solid var(--hairline);
  cursor: pointer; text-align: left; font: inherit; color: inherit;
}
button.ap-feedrow:last-child { border-bottom: none; }
.ap-feedrow:hover .ap-feedsym { color: var(--green); }
.ap-feedsym { font-family: var(--mono); font-weight: 600; font-size: 13px; }
.ap-feedname { font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-feedage { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.ap-slip.danger { border-color: var(--red); }

/* ---------- create: success state ---------- */
.ap-done { display: grid; gap: 12px; padding: 8px 0; }
.ap-donetitle { font-size: 18px; font-weight: 700; color: var(--green); }
.ap-donebody { font-size: 13px; color: var(--ink-soft); line-height: 1.6; max-width: 520px; }
.ap-doneactions { display: flex; gap: 10px; flex-wrap: wrap; }

.ap-info dd.danger { color: var(--red); }
.ap-marketstats .up { color: var(--green); }
.ap-marketstats .down { color: var(--red); }

/* ---------- perps: market bar, book ---------- */
.ap-marketpick { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ap-marketpick .ap-sym { font-family: var(--mono); font-size: 16px; font-weight: 600; }
.ap-mark { font-family: var(--mono); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ap-marketpick .up { color: var(--green); font-family: var(--mono); font-size: 13px; }
.ap-marketpick .down { color: var(--red); font-family: var(--mono); font-size: 13px; }
.ap-searchfull { margin: 0 0 12px; width: 100%; flex: none; min-width: 0; }
.ap-scroll { max-height: 360px; overflow-y: auto; }
.ap-bookrow {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  font-family: var(--mono); font-size: 12px; padding: 3px 0;
  font-variant-numeric: tabular-nums;
}
.ap-bookrow.ask span:first-child { color: var(--red); }
.ap-bookrow.bid span:first-child { color: var(--green); }
.ap-bookmid {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: 8px 0; margin: 6px 0;
  font-family: var(--mono); font-size: 15px; font-weight: 600;
}
.ap-bookmid i { font-style: normal; font-size: 11px; color: var(--ink-soft); font-weight: 400; }

/* ---------- chart ---------- */
.ap-chartbox { position: relative; }
.ap-chartnote {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  background: var(--paper); pointer-events: none; text-align: center; padding: 16px;
}
.ap-poside {
  display: inline-block; margin-right: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ap-poside.long { color: var(--green); }
.ap-poside.short { color: var(--red); }

/* ══════════════════════════════════════════════════════════════════════════
   TERMINAL KIT (tm-*)
   The trading surfaces: coin detail, spot ticket, perps: are denser than a
   dashboard: a phone has to carry a book, a ticket and a chart at once. This
   layer adds that vocabulary without inventing a second design language: same
   paper ground, same hairlines, same zero radius, same mono numerals. Nothing
   here uses a colour that is not already a token.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- visibility helpers ----------
   These switch layouts, so they have to beat whatever display the element sets
   for itself (.tm-tiles is a grid, .tm-cards is a block, and so on) no matter
   which rule comes later in the file. */
.only-desk { display: none !important; }
@media (min-width: 901px) {
  .only-desk { display: block !important; }
  .only-mob { display: none !important; }
}

/* ---------- mobile detail header ----------
   A detail screen on a phone is its own world: the app's rail and top bar step
   aside and this bar carries everything: where you are, what it costs, and the
   way back. Modelled on the broker apps people already trade in. */
.tm-mhead { display: none; }
@media (max-width: 900px) {
  .tm-mhead {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 30;
    margin: -20px -16px 14px;
    padding: 8px 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
}
.tm-back {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: -10px;
  background: none; border: none; cursor: pointer; color: var(--ink);
}
.tm-mid {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  background: none; border: none; cursor: pointer; padding: 0; text-align: left;
  min-height: 44px;
}
.tm-mtitle {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-msub {
  display: block; font-size: 10px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-mprice { flex: 0 0 auto; text-align: right; }
.tm-mpx {
  display: block;
  font-family: var(--mono); font-size: 15px; font-weight: 600; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.tm-mchg { display: block; font-family: var(--mono); font-size: 10px; line-height: 1.2; }
.up { color: var(--green); }
.down { color: var(--red); }
.tm-iconbtn {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: none; border: 1px solid var(--hairline); cursor: pointer; color: var(--ink-soft);
}
.tm-iconbtn:hover { border-color: var(--green); color: var(--green); }
.tm-iconbtn.on { border-color: var(--green); color: var(--green); background: var(--green-soft); }

/* ---------- desktop stat strip ----------
   Aster/Binance grammar in onagi's typeface: identity, then the price big
   enough to read across the desk, then hairline-separated facts. */
.tm-strip { display: none; }
@media (min-width: 901px) {
  .tm-strip {
    display: flex; align-items: center; gap: 22px;
    border: 1px solid var(--rule); background: var(--panel);
    padding: 12px 18px; overflow-x: auto;
  }
}
.tm-ident {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; cursor: pointer; padding: 4px 8px 4px 4px; text-align: left;
}
.tm-ident:disabled { cursor: default; }
.tm-ident:hover:not(:disabled) { background: var(--paper); }
.tm-identname {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.tm-identsub { display: block; font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.tm-badge {
  border: 1px solid var(--hairline); padding: 1px 5px;
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 500;
}
.tm-caret { font-size: 9px; color: var(--ink-soft); transition: transform 0.15s ease; }
.tm-caret.open { transform: rotate(180deg); }
.tm-big {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 24px; font-weight: 600;
  line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.tm-bigchg { display: block; margin-top: 3px; font-family: var(--mono); font-size: 11px; font-weight: 600; }
.tm-cell { flex: 0 0 auto; border-left: 1px solid var(--hairline); padding-left: 22px; }
.tm-celllabel {
  display: block; white-space: nowrap;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft);
}
.tm-cellvalue {
  display: block; margin-top: 5px; white-space: nowrap;
  font-family: var(--mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ---------- market picker dropdown (desktop) ---------- */
.tm-pickwrap { position: relative; }
.tm-pick {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 50;
  width: 340px; max-width: 86vw;
  background: var(--panel); border: 1px solid var(--rule);
  box-shadow: 0 14px 34px rgba(13, 13, 12, 0.14);
}
.tm-pickscrim { position: fixed; inset: 0; z-index: 40; background: none; border: none; cursor: default; }
.tm-picklist { max-height: 340px; overflow-y: auto; }
.tm-pickrow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; background: none; border: none;
  border-bottom: 1px solid var(--hairline); cursor: pointer; text-align: left;
}
.tm-pickrow:last-child { border-bottom: none; }
.tm-pickrow:hover { background: var(--paper); }
.tm-pickname { flex: 1 1 auto; min-width: 0; }
.tm-picksym { display: block; font-family: var(--mono); font-size: 13px; font-weight: 600; }
.tm-picksub {
  display: block; font-size: 11px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-pickpx { flex: 0 0 auto; text-align: right; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.tm-pickchg { display: block; font-family: var(--mono); font-size: 10px; }

/* ---------- terminal layout ----------
   Desktop: chart and book share a row of one adjustable height, the ticket
   rides beside them and stays put while the page scrolls.
   Mobile: book and ticket sit shoulder to shoulder in one frame: the layout
   every phone trading app converged on, because scrolling to a form while a
   book moves is how you fill at the wrong price. */
.tm-term { display: grid; gap: 16px; }
.tm-termmain { min-width: 0; display: grid; gap: 16px; align-content: start; }
@media (min-width: 901px) {
  .tm-term { grid-template-columns: minmax(0, 1fr) 332px; align-items: start; }
  .tm-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 16px;
    height: var(--termh, 470px);
  }
  .tm-rowcell { min-width: 0; min-height: 0; border: 1px solid var(--rule); background: var(--panel); }
  .tm-aside { position: sticky; top: calc(var(--topbar) + 16px); align-self: start; }
}
.tm-grip {
  display: none; width: 100%; height: 14px; cursor: ns-resize;
  align-items: center; justify-content: center; background: none; border: none;
}
@media (min-width: 901px) { .tm-grip { display: flex; } }
.tm-grip i { display: block; width: 44px; height: 2px; background: var(--hairline); }
.tm-grip:hover i { background: var(--green); }

.tm-msplit {
  display: grid; grid-template-columns: 0.95fr 1.3fr;
  border: 1px solid var(--rule); background: var(--panel); overflow: hidden;
}
.tm-msplit > * + * { border-left: 1px solid var(--hairline); }
.tm-msplit > * { min-width: 0; }
@media (min-width: 901px) { .tm-msplit { display: none; } }

/* ---------- order book ---------- */
.tm-book {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
  font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;
}
.tm-booktabs {
  display: flex; align-items: center; gap: 2px;
  padding: 5px 6px; border-bottom: 1px solid var(--hairline);
}
.tm-booktab {
  background: none; border: none; cursor: pointer; padding: 5px 8px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink-soft);
}
.tm-booktab.on { color: var(--ink); background: var(--paper); }
.tm-group {
  margin-left: auto; border: 1px solid var(--hairline); background: var(--paper);
  font-family: var(--mono); font-size: 10px; color: var(--ink-soft); padding: 2px 4px;
}
.tm-bookhead,
.tm-brow {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 6px;
  padding: 2px 10px;
}
.tm-bookhead {
  padding-top: 6px; padding-bottom: 6px;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft);
}
/* Asks stack upward from the last price, bids downward from it. On a desk both
   halves share the leftover height and clip what does not fit, so the mid of
   the book sits on the panel's centre line however tall the terminal is
   dragged. On a phone the rows simply set the height (CSS above keeps nine a
   side) and the pressure bar drops to the bottom of the cell. */
.tm-bookside { display: flex; flex-direction: column; }
.tm-pressure { margin-top: auto; }
@media (min-width: 901px) {
  .tm-bookside { flex: 1 1 0; min-height: 0; overflow: hidden; }
  .tm-bookside.asks { justify-content: flex-end; }
}
.tm-brow {
  position: relative; width: 100%; background: none; border: none;
  cursor: pointer; text-align: left; font: inherit; line-height: 1.75;
}
.tm-brow:hover { background: var(--paper); }
.tm-brow.empty { cursor: default; opacity: 0.35; }
.tm-depth { position: absolute; top: 0; bottom: 0; right: 0; }
.tm-brow.ask .tm-depth { background: var(--red-soft); }
.tm-brow.bid .tm-depth { background: var(--green-soft); }
.tm-bpx { position: relative; }
.tm-brow.ask .tm-bpx { color: var(--red); }
.tm-brow.bid .tm-bpx { color: var(--green); }
.tm-bsz, .tm-btot { position: relative; text-align: right; }
.tm-btot { color: var(--ink-soft); }
.tm-blast {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 10px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.tm-blastpx { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.tm-bspread { font-size: 10px; color: var(--ink-soft); }
.tm-pressure {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-top: 1px solid var(--hairline); font-size: 9.5px;
}
.tm-pbar { flex: 1 1 auto; min-width: 0; height: 4px; background: var(--red); }
.tm-pbar i { display: block; height: 100%; background: var(--green); }
.tm-bookempty { padding: 28px 12px; text-align: center; font-size: 11px; color: var(--ink-soft); }
@media (max-width: 900px) {
  .tm-bookhead, .tm-brow { grid-template-columns: 1.15fr 1fr; padding-left: 8px; padding-right: 8px; }
  .tm-btot { display: none; }
  /* nine levels a side on a phone: deeper than that is noise at this width,
     and it keeps the book the same height as the ticket beside it */
  .tm-brow[data-idx="9"],
  .tm-brow[data-idx="10"],
  .tm-brow[data-idx="11"] { display: none; }
  .tm-blast { padding-left: 8px; padding-right: 8px; }
  .tm-blastpx { font-size: 14px; }
}

/* ---------- stat tiles ---------- */
.tm-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule); background: var(--panel);
}
.tm-tile { padding: 12px 14px; border-right: 1px solid var(--hairline); min-width: 0; }
.tm-tile:last-child { border-right: none; }
.tm-tilelabel {
  display: block; font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft);
}
.tm-tilevalue {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) {
  .tm-tiles { grid-template-columns: repeat(2, 1fr); }
  .tm-tile:nth-child(2n) { border-right: none; }
  .tm-tile:nth-child(-n + 2) { border-bottom: 1px solid var(--hairline); }
}

/* ---------- segmented control ---------- */
.tm-seg { display: inline-flex; border: 1px solid var(--hairline); background: var(--panel); }
.tm-seg.wide { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
.tm-segbtn {
  background: none; border: none; cursor: pointer;
  padding: 9px 14px; min-height: 40px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.tm-segbtn + .tm-segbtn { border-left: 1px solid var(--hairline); }
.tm-segbtn:hover { color: var(--ink); }
.tm-segbtn.on { background: var(--ink); color: var(--paper); }
.tm-seg.small .tm-segbtn { padding: 6px 10px; min-height: 32px; font-size: 10px; }

/* ---------- board toolbar ---------- */
.tm-toolbar {
  position: sticky; top: var(--topbar); z-index: 15;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; background: var(--paper);
}
.tm-toolbar .ap-search { min-width: 0; }
@media (max-width: 620px) { .tm-toolbar .ap-search { flex: 1 1 100%; margin-left: 0; } }

/* ---------- board cards (phone) ---------- */
.tm-cards { border: 1px solid var(--rule); background: var(--panel); }
/* inside a panel the card list is already framed: drop the second border and
   let the rows run to the panel's own edges */
.ap-panelbody > .tm-cards { border: none; margin: -18px; }
.tm-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
  width: 100%; padding: 12px 14px; min-height: 60px;
  background: none; border: none; border-bottom: 1px solid var(--hairline);
  cursor: pointer; text-align: left;
}
.tm-card:last-child { border-bottom: none; }
.tm-card:hover, .tm-card.on { background: var(--paper); }
.tm-cardsym { display: block; font-family: var(--mono); font-size: 13px; font-weight: 600; }
.tm-cardname {
  display: block; font-size: 11.5px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-cardpx { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.tm-cardchg { display: block; font-family: var(--mono); font-size: 11px; text-align: right; }

/* ---------- token identity ---------- */
.tm-hero {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--rule); background: var(--panel); padding: 18px;
}
.tm-logo {
  flex: 0 0 auto; width: 56px; height: 56px; object-fit: cover;
  border: 1px solid var(--hairline); background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--green);
}
.tm-logo.sm { width: 40px; height: 40px; font-size: 14px; }
.tm-logo.xs { width: 28px; height: 28px; font-size: 11px; }
.tm-heroid { flex: 1 1 220px; min-width: 0; }
.tm-heroname { font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; }
.tm-herosym { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); }
.tm-chiprow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.tm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--hairline); background: none; cursor: pointer;
  padding: 5px 9px; min-height: 30px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
}
.tm-chip:hover { border-color: var(--green); color: var(--green); }
.tm-chip.static { cursor: default; }
.tm-chip.static:hover { border-color: var(--hairline); color: var(--ink-soft); }
.tm-metric { margin-left: auto; text-align: right; }
.tm-metrictoggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft);
}
.tm-metrictoggle:hover { color: var(--green); }
.tm-metricvalue {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-size: 32px; font-weight: 600;
  letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}
.tm-metricchg { display: block; margin-top: 2px; font-family: var(--mono); font-size: 12px; font-weight: 600; }
.tm-chiprow.wide {
  flex: 1 1 100%;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
@media (max-width: 620px) {
  /* One line for identity and the number: the shape every broker app settled
     on, because a phone screen has no room for a second row of chrome above
     the chart. Links keep their own full-width row underneath. */
  .tm-hero {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; column-gap: 12px; padding: 14px;
  }
  .tm-logo { width: 46px; height: 46px; font-size: 16px; }
  .tm-heroname { font-size: 16px; }
  .tm-metric { margin-left: 0; }
  .tm-metricvalue { font-size: 22px; margin-top: 2px; }
  .tm-metrictoggle { font-size: 9.5px; }
  .tm-metricchg { font-size: 11px; }
  .tm-chiprow.wide { grid-column: 1 / -1; margin-top: 12px; }
}

/* ---------- range / progress ---------- */
.tm-range {
  display: flex; align-items: center; gap: 12px; flex: 1 1 100%;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline);
}
.tm-rangebar { position: relative; flex: 1 1 auto; min-width: 0; height: 4px; background: var(--hairline); }
.tm-rangefill { position: absolute; inset: 0 auto 0 0; background: var(--green); }
.tm-rangemark { position: absolute; top: -3px; width: 2px; height: 10px; background: var(--ink); }
.tm-rangelabel { flex: 0 0 auto; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.tm-rangelabel b { color: var(--ink); font-weight: 600; }

/* ---------- live dot ---------- */
.tm-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.tm-live::before {
  content: ""; width: 6px; height: 6px; background: var(--green);
  animation: tm-pulse 2s ease-in-out infinite;
}
@keyframes tm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ---------- skeleton ---------- */
.tm-skel {
  background: linear-gradient(90deg, var(--hairline), var(--paper) 50%, var(--hairline));
  background-size: 220% 100%;
  animation: tm-shimmer 1.5s linear infinite;
}
@keyframes tm-shimmer { from { background-position: 220% 0; } to { background-position: -20% 0; } }

/* ---------- mobile trade bar + fullscreen ticket ---------- */
.tm-tradebar { display: none; }
@media (max-width: 900px) {
  .tm-tradebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    background: var(--paper); border-top: 1px solid var(--rule);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
}
.tm-tradebtn {
  min-height: 48px; border: 1px solid; cursor: pointer;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
}
.tm-tradebtn.buy { background: var(--green); border-color: var(--green); }
.tm-tradebtn.sell { background: var(--red); border-color: var(--red); }

.tm-sheet {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; background: var(--paper);
}
.tm-sheethead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid var(--rule);
}
.tm-sheettitle { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.tm-sheetsub { display: block; font-size: 11px; color: var(--ink-soft); }
.tm-sheetbody {
  flex: 1 1 auto; overflow-y: auto;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
}
.tm-sheetsearch { padding: 10px 16px; border-bottom: 1px solid var(--hairline); }
.tm-sheetsearch .ap-search { width: 100%; flex: none; margin: 0; min-width: 0; }

/* ---------- phone ----------
   No bottom bar any more: the three sections ride in the same top row. The row
   must actually FIT: min-width:0 on the nav let flexbox squeeze it below its
   text, and the overflow slid "Credit" underneath the Connect button. So the
   nav refuses to shrink, and the brand pays for it by dropping to its icon. */
@media (max-width: 900px) {
  .ap-top { gap: 12px; }
  .ap-topnav { flex: 0 0 auto; gap: 2px; }
  .ap-brand img.ap-brandlockup { width: 104px; }
  .ap-topitem { padding: 8px 10px; font-size: 12px; }
  /* detail mode: the screen belongs to the market, not to the app chrome */
  .ap.detail .ap-top { display: none; }
}
@media (max-width: 480px) {
  .ap-brand img.ap-brandlockup { display: none; }
  .ap-brand img.ap-brandmark { display: block; }
  .ap-topitem { padding: 8px 8px; }
}

/* ---------- ticket refinements shared by spot / perps / detail ---------- */
.tm-tick { display: grid; gap: 10px; }
.tm-tickhead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--hairline);
}
.tm-tickbody { padding: 12px; display: grid; gap: 10px; }
.tm-pctrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tm-levrow { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-lev {
  flex: 1 1 auto; min-width: 46px;
  border: 1px solid var(--hairline); background: var(--paper); cursor: pointer;
  padding: 8px 4px; min-height: 38px;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft);
}
.tm-lev.on { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.tm-cost {
  display: grid; gap: 6px; padding: 10px 12px;
  border: 1px solid var(--hairline); background: var(--paper); font-size: 12px;
}
.tm-cost > div { display: flex; justify-content: space-between; gap: 10px; }
.tm-cost dt { color: var(--ink-soft); }
.tm-cost dd { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tm-cost dd.danger { color: var(--red); }
.tm-cta {
  width: 100%; min-height: 48px; cursor: pointer; border: 1px solid;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
}
.tm-cta.buy { background: var(--green); border-color: var(--green); }
.tm-cta.sell { background: var(--red); border-color: var(--red); }
.tm-cta:disabled { opacity: 0.45; cursor: default; }
.tm-ctarow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Compact ticket: the half of a phone that sits next to the order book. Same
   controls, smaller type: nothing is removed except the prose, which belongs
   on the roomier version. */
.tm-tickcompact { padding: 8px; gap: 8px; }
.tm-tickcompact .ap-sidebtn { padding: 8px 4px; font-size: 12px; }
.tm-tickcompact .ap-label { font-size: 9.5px; margin-bottom: 4px; }
.tm-tickcompact .ap-input { padding: 8px; font-size: 12px; }
.tm-tickcompact .tm-lev { min-width: 38px; padding: 6px 2px; min-height: 34px; font-size: 11px; }
.tm-tickcompact .tm-cost { padding: 8px; font-size: 11px; gap: 4px; }
.tm-tickcompact .tm-cta { min-height: 44px; font-size: 12px; }
.tm-tickcompact .ap-check { font-size: 11px; }
.tm-tickcompact .ap-suffix { font-size: 10px; }
.tm-tickcompact .ap-warn { font-size: 11px; }

/* The order book is the one place a scrollbar helps: it says the list goes on. */
.tm-bookrows::-webkit-scrollbar { width: 4px; }
.tm-bookrows::-webkit-scrollbar-thumb { background: var(--hairline); }