/* Simple (2026-10-23): Mehdi's v12.5 design (earn-first sentence with soft chips), scoped to #v7 (simple.js). The global
   sheets use !important on html body, so every rule here is html body #v7 ... !important too. Orange only on the goal
   chip, the Get button, the selected tile's ring, the nav's active tab, the SIMPLE switch and the Pro gate's strike and dot.
   Radii 0. 1280x800: 48 pad, fluid main, 24 gap, 288 rail; 40 top pad under a 48px header; no page scroll.
   #v7 is shown by simple.js while the terminal is in Simple; the terminal itself stays mounted underneath and only its
   review card shows, in #v7's place, while a trade is being reviewed. */
html body #v7[hidden], html body #v7 [hidden][hidden][hidden], .view[data-view="match"].tm-choosing #v7 { display: none !important; }
html.v7-on body .view[data-view="match"]:not(.v7-rv) #mm-pro { display: none !important; }
html.v7-on body .view[data-view="match"].v7-rv #mm-pro > :not(.mp-rv) { display: none !important; }
html.v7-on body .view[data-view="match"].v7-rv #mm-pro { max-width: 560px !important; margin: 24px auto !important; display: block !important; }

/* header in Simple: the site's own header, untouched in size and padding so nothing moves on load or on a switch; page
   white and one light rule are the only changes. #v7 starts under it at the height simple.js measures. */
html.v7-on body { background: #fffefb !important; }
html.v7-on:root:root:root:root:root:root:root:root:root:root:root:root body > header.top { background: #fffefb !important; border-bottom: 1px solid #ede4d8 !important; box-shadow: none !important; }
html.v7-on:root:root:root:root:root:root:root:root:root:root:root:root body > header.top nav.rail .rl-item.on,
html.v7-on:root:root:root:root:root:root:root:root:root:root:root:root body > header.top nav.rail .rl-item[aria-current="page"] { background: #ec6b2d !important; }

html body #v7 {
  --page: #fffefb; --panel: #fefaf4; --s2: #f6efe5; --ink: #1a1410; --ink2: #4a4038; --ink3: #8a7f74; --ink4: #b9afa4;
  --hair: #ede4d8; --or: #ec6b2d; --or2: #d95f24; --wash: #fdf6ee; --pale: #f4c3a6;
  --chip: #f8f1e7; --vb: #fdf3ea; --vbB: #f6dcca; --tlh: #fffdf9; --gp: #c4bdb4; --seal: rgba(26,20,16,.28);
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --sans: "Inter", system-ui, -apple-system, sans-serif;
  --ez: cubic-bezier(.2,.8,.2,1);
  position: fixed !important; top: var(--v7-top, 59px) !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  max-height: calc(100vh - var(--v7-top, 59px)) !important; overflow: auto !important; z-index: 5 !important;
  background: var(--page) !important; color: var(--ink) !important; font-family: var(--sans) !important;
  font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1 !important;
  padding: 0 !important; margin: 0 !important; box-sizing: border-box !important;
}
html body #v7 *, html body #v7 *::before, html body #v7 *::after { box-sizing: border-box !important; border-radius: 0 !important; }
html body #v7 button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; box-shadow: none; text-align: left; }
html body #v7 p, html body #v7 h1 { margin: 0 !important; }
html body #v7 [hidden] { display: none !important; }
/* the page-wide body :not(svg) rule sets a font on every element; children here inherit from their component */
html body #v7 :not(svg):not(svg *) { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; }
html body #v7 b, html body #v7 i, html body #v7 em { font-style: normal !important; }

/* grid: fluid main + 288 rail, 48 each side, so the page fills the nav's width (872 main at 1280); the rail stretches to the main column's height */
html body #v7 .wrap { display: grid !important; grid-template-columns: minmax(0, 1fr) 288px !important; gap: 24px !important; justify-content: start !important; align-items: stretch !important; padding: 40px 48px 0 !important; }
html body #v7 .tkt { display: flex !important; flex-direction: column !important; gap: 16px !important; min-width: 0 !important; }

/* panels: 1px ink frame, 32px strip with a 1px ink bottom, mono label left, values right */
html body #v7 .pn { display: block !important; background: var(--panel) !important; border: 1px solid var(--ink) !important; min-width: 0 !important; }
html body #v7 .pn-hd { display: flex !important; width: auto !important; align-self: stretch !important; box-shadow: none !important; align-items: center !important; gap: 12px !important; height: 32px !important; padding: 0 16px !important; margin: 0 !important; background: var(--s2) !important; border-bottom: 1px solid var(--ink) !important; font: 500 10px/1 var(--mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--ink3) !important; white-space: nowrap !important; overflow: hidden !important; }
html body #v7 .pn-hd > span { flex: none !important; color: var(--ink) !important; }
html body #v7 .pn-hd > em { margin-left: auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body #v7 .pn-hd b { font-weight: 500 !important; color: var(--ink) !important; }
html body #v7 .tb { padding: 0 !important; }

/* the sentence (Mehdi v12.6): a 136px box, two lines on its bottom 20px pad: Earn $X now, then the chips under it */
html body #v7 .sx { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: flex-start !important; height: 136px !important; padding: 0 24px 20px !important; border-bottom: 1px solid var(--hair) !important; white-space: nowrap !important; overflow: hidden !important; color: var(--ink) !important; font: 400 15px/32px var(--sans) !important; }
html body #v7 .sl, html body #v7 .chips, html body #v7 .earn { display: flex !important; align-items: baseline !important; flex: none !important; }
html body #v7 .sl { flex-direction: column !important; align-items: flex-start !important; }
html body #v7 .chips { gap: 6px !important; margin-left: 0 !important; }
html body #v7 .earn { margin-bottom: 11px !important; }
html body #v7 .sen-d { display: none !important; }
html body #v7 .glue { flex: none !important; font: 400 15px/32px var(--sans) !important; color: var(--ink3) !important; }
html body #v7 .earn-n { display: inline-block !important; margin-left: 8px !important; font: 500 36px/36px var(--mono) !important; letter-spacing: -.04em !important; color: var(--ink) !important; }
html body #v7 .earn-c, html body #v7 .earn-v { font: 500 36px/36px var(--mono) !important; letter-spacing: -.04em !important; color: var(--ink) !important; }
html body #v7 .earn-now { margin-left: 8px !important; }
html body #v7 .earn.is-na .earn-c { display: none !important; }
html body #v7 .earn.is-na .earn-v { color: var(--ink4) !important; }
html body #v7 .tok { display: inline-block !important; flex: none !important; height: 36px !important; padding: 0 8px !important; background: var(--chip) !important; border: 1px solid var(--hair) !important; font: 600 22px/34px var(--sans) !important; letter-spacing: -.02em !important; color: var(--ink) !important; white-space: nowrap !important; transition: background 140ms var(--ez), border-color 140ms var(--ez) !important; }
html body #v7 .tok-goal { background: var(--vb) !important; border-color: var(--vbB) !important; color: var(--or) !important; }
html body #v7 .tok-lg { display: inline-block !important; width: 20px !important; height: 20px !important; margin-right: 8px !important; vertical-align: -3px !important; }
html body #v7 .tok-lg svg, html body #v7 .tok-lg img { display: block !important; width: 20px !important; height: 20px !important; }
html body #v7 .tok .cr { display: inline-block !important; width: 10px !important; height: 10px !important; margin-left: 8px !important; vertical-align: 1px !important; color: var(--ink4) !important; transition: color 140ms var(--ez) !important; }
html body #v7 .tok-goal .cr { color: var(--or) !important; }
html body #v7 .tok:hover, html body #v7 .tok:focus-visible, html body #v7 .tok:focus-within { background: var(--s2) !important; border-color: var(--ink4) !important; }
html body #v7 .tok:hover .cr, html body #v7 .tok:focus-visible .cr { color: var(--or) !important; }
html body #v7 .tok:focus-visible { outline: 2px solid var(--or) !important; outline-offset: 2px !important; }
/* the size chip: a typed number in the chip's own type, and MAX with the wallet's cover as a small mono label */
html body #v7 .tok-size { display: inline-flex !important; align-items: baseline !important; gap: 8px !important; cursor: text !important; }
html body #v7 .tok-in { font: 600 22px/34px var(--sans) !important; letter-spacing: -.02em !important; color: var(--ink) !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; width: 3ch; min-width: 2ch !important; max-width: 12ch !important; height: 34px !important; outline: 0 !important; box-shadow: none !important; text-align: left !important; }
html body #v7 .tok-in::placeholder { color: var(--ink4) !important; }
html body #v7 .tok-max { font: 500 10px/1 var(--mono) !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--ink3) !important; white-space: nowrap !important; cursor: pointer !important; transition: color 140ms var(--ez) !important; }
html body #v7 .tok-max:hover { color: var(--or) !important; }
html body #v7 .tok-max[hidden] { display: none !important; }
html body #v7.is-short .tok-size { border-color: var(--or) !important; }

/* tiles: one equal column per desk market (the count is set by simple.js), 144 tall, hairline dividers */
html body #v7 .tiles { display: grid !important; border-bottom: 1px solid var(--hair) !important; }
html body #v7 .tl { display: flex !important; flex-direction: column !important; height: 144px !important; padding: 16px 14px !important; min-width: 0 !important; background: transparent !important; border-right: 1px solid var(--hair) !important; transition: background 140ms var(--ez), box-shadow 140ms var(--ez) !important; }
html body #v7 .tl:last-child { border-right: 0 !important; }
html body #v7 .tl:hover { background: var(--tlh) !important; }
html body #v7 .tl.is-on, html body #v7 .tl.is-on:hover { background: var(--wash) !important; box-shadow: inset 0 0 0 1px var(--or) !important; }
html body #v7 .tl-h { display: flex !important; align-items: center !important; gap: 8px !important; height: 18px !important; }
/* marks at 18 in the tiles and 20 in the chip: the venue's own art, never recoloured */
html body #v7 .tl-mk { display: inline-flex !important; width: 18px !important; height: 18px !important; flex: none !important; }
html body #v7 .tl-mk svg, html body #v7 .tl-mk img { width: 18px !important; height: 18px !important; }
html body #v7 .tl-h b { font: 600 13px/1 var(--sans) !important; color: var(--ink) !important; text-decoration: underline transparent !important; text-underline-offset: 3px !important; }
html body #v7 .tl:hover .tl-h b { text-decoration-color: var(--ink4) !important; }
html body #v7 .tl-sp { display: block !important; min-height: 12px !important; margin: 4px 0 0 !important; padding-left: 26px !important; font: 400 10px/12px var(--mono) !important; color: var(--ink3) !important; white-space: nowrap !important; overflow: hidden !important; }
html body #v7 .tl-n { display: block !important; margin-top: 10px !important; font: 500 24px/24px var(--mono) !important; letter-spacing: -.04em !important; color: var(--ink) !important; white-space: nowrap !important; }
html body #v7 .tl-n sup { font: 500 11px/0 var(--mono) !important; color: var(--ink3) !important; margin: 0 2px 0 0 !important; vertical-align: 7px !important; letter-spacing: 0 !important; }
html body #v7 .tl.is-na .tl-n sup { display: none !important; }
html body #v7 .tl.is-na .tl-v { color: var(--ink4) !important; }
html body #v7 .tl-s { display: block !important; font: 400 11px/16px var(--sans) !important; color: var(--ink3) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: 16px !important; }
html body #v7 .tl-n + .tl-s { margin-top: 12px !important; }

/* the two ifs: 80 tall, two columns */
html body #v7 .ocs { display: grid !important; grid-template-columns: 1fr 1fr !important; height: 81px !important; border-bottom: 1px solid var(--hair) !important; }
html body #v7 .oc { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, auto) !important; align-items: baseline !important; align-content: center !important; row-gap: 6px !important; column-gap: 12px !important; padding: 0 24px !important; min-width: 0 !important; overflow: hidden !important; }
html body #v7 .oc + .oc { border-left: 1px solid var(--hair) !important; }
html body #v7 .oc-k { font: 500 12.5px/1.2 var(--sans) !important; color: var(--ink2) !important; white-space: nowrap !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body #v7 .oc-k b { font: 500 12.5px/1.2 var(--mono) !important; color: var(--ink) !important; }
html body #v7 .oc-v { font: 400 13px/1 var(--mono) !important; color: var(--ink3) !important; white-space: nowrap !important; text-align: right !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body #v7 .oc-v b { font: 500 18px/1 var(--mono) !important; letter-spacing: -.02em !important; color: var(--ink) !important; margin-right: 6px !important; }
html body #v7 .oc-x { grid-column: 1 / -1 !important; font: 400 11.5px/1.3 var(--sans) !important; color: var(--ink3) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

/* action row: message left, 264x48 Get right */
html body #v7 .act { display: flex !important; align-items: center !important; gap: 24px !important; height: 88px !important; padding: 0 24px !important; }
html body #v7 .msg { flex: 1 1 auto !important; min-width: 0 !important; font: 400 12px/1.5 var(--sans) !important; color: var(--ink3) !important; }
html body #v7 .msg b { font-weight: 500 !important; color: var(--ink2) !important; }
html body #v7 .msg-e { display: block !important; color: var(--ink2) !important; }
html body #v7 .msg-e:empty { display: none !important; }
html body #v7 .msg-r { display: inline !important; margin-left: 8px !important; font: 500 12px/1.5 var(--sans) !important; color: var(--ink) !important; text-decoration: underline !important; text-underline-offset: 3px !important; cursor: pointer !important; }
html body #v7 .msg-r[hidden] { display: none !important; }
html body #v7.is-short .msg-e { color: var(--or2) !important; }
html body #v7 .go { position: relative !important; overflow: hidden !important; flex: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 264px !important; height: 48px !important; background: var(--or) !important; color: var(--page) !important; font: 600 15px/1 var(--sans) !important; text-align: center !important; transition: background 140ms var(--ez) !important; }
html body #v7 .go:not(:disabled):hover { background: var(--or2) !important; }
html body #v7 .go:disabled, html body #v7.is-short .go { background: var(--pale) !important; cursor: not-allowed !important; }
html body #v7 .go-t { position: relative !important; white-space: nowrap !important; }
html body #v7 .go-v { font: 600 15px/1 var(--mono) !important; letter-spacing: .02em !important; margin: 0 .25em !important; }
html body #v7 .go-sw { position: absolute !important; inset: 0 !important; background: var(--or2) !important; transform: scaleX(0) !important; transform-origin: left !important; }
html body #v7 .go.is-fill .go-sw { animation: v12sw 400ms var(--ez) both !important; }
@keyframes v12sw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* positions: 32 strip, 32 header, 56 rows (two at most), 40 footer */
html body #v7 .pb { padding: 0 !important; }
html body #v7 .pos-b { max-height: 144px !important; overflow: auto !important; }
html body #v7 .pt { display: grid !important; grid-template-columns: 1.6fr .8fr 1fr 1fr .8fr !important; column-gap: 16px !important; align-items: center !important; height: 56px !important; padding: 0 16px !important; border-bottom: 1px solid var(--hair) !important; }
html body #v7 .pt:last-child { border-bottom: 0 !important; }
html body #v7 .pt.pt-h { height: 32px !important; font: 500 9.5px/1 var(--mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--ink3) !important; border-bottom: 1px solid var(--hair) !important; }
html body #v7 .pt-p { display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; }
html body #v7 .pt-lg { display: inline-flex !important; width: 18px !important; height: 18px !important; flex: none !important; }
html body #v7 .pt-lg svg, html body #v7 .pt-lg img { width: 18px !important; height: 18px !important; }
html body #v7 .pt-nm { display: flex !important; align-items: baseline !important; gap: 8px !important; min-width: 0 !important; }
html body #v7 .pt-nm b { flex: none !important; font: 600 14px/1.2 var(--sans) !important; color: var(--ink) !important; }
html body #v7 .pt-nm i { font: 400 13px/1.2 var(--sans) !important; color: var(--ink3) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body #v7 .pt > :nth-child(n+2) { text-align: right !important; justify-self: stretch !important; min-width: 0 !important; }
html body #v7 .pt-v { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 3px !important; font: 400 13px/1.2 var(--mono) !important; color: var(--ink) !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body #v7 .pt-v b { font: 500 13px/1.2 var(--mono) !important; color: var(--ink) !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; }
/* what a protect or upside delivers runs long: those two cells wrap to a second line inside the 56px row */
html body #v7 .pt-ab b, html body #v7 .pt-be b { white-space: normal !important; text-align: right !important; }
html body #v7 .pt-v i { font: 400 11px/1.2 var(--mono) !important; color: var(--ink3) !important; }
html body #v7 .pt-res { grid-column: span 2 !important; }
html body #v7 .pt.is-done .pt-nm b, html body #v7 .pt.is-done .pt-v b { color: var(--ink2) !important; }
html body #v7 .pt.is-new { animation: v12in 280ms var(--ez) both !important; }
@keyframes v12in { from { background: var(--wash); } to { background: transparent; } }
html body #v7 .pos-m { display: block !important; padding: 16px !important; min-height: 88px !important; font: 400 12.5px/1.5 var(--sans) !important; color: var(--ink3) !important; }
html body #v7 .pos-f { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 40px !important; padding: 0 16px !important; border-top: 1px solid var(--hair) !important; font: 400 12.5px/1 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink3) !important; }
html body #v7 .pos-hb { font: 500 12.5px/1 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; }
html body #v7 .pos-hb:hover { color: var(--or2) !important; }

/* Pro rail, the ledger: gate, title, body, trades opened (one cell per trade), the next step, Open Pro once earned, footer */
html body #v7 .pro-rail { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; width: auto !important; height: auto !important; position: static !important; overflow: visible !important; }
html body #v7 .rb { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; padding: 16px !important; }
html body #v7 .gate { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; height: 72px !important; flex: none !important; background: var(--s2) !important; border: 1px solid var(--hair) !important; }
html body #v7 .gate-s { width: 32px !important; height: 32px !important; flex: none !important; color: var(--seal) !important; }
html body #v7 .gate-p { position: relative !important; display: inline-block !important; font: 600 32px/1 var(--sans) !important; letter-spacing: -.04em !important; color: var(--gp) !important; }
html body #v7 .gate-p::after { content: "" !important; position: absolute !important; left: -4px !important; right: -4px !important; top: 50% !important; height: 4px !important; margin-top: -1px !important; background: var(--or) !important; }
html body #v7 .pro-rail.is-open .gate-s, html body #v7 .pro-rail.is-open .gate-p::after { display: none !important; }
html body #v7 .pro-rail.is-open .gate-p { color: var(--ink) !important; }
html body #v7 .rt-h { display: block !important; margin-top: 16px !important; font: 600 16px/24px var(--sans) !important; color: var(--ink) !important; }
html body #v7 .rt-p { margin-top: 4px !important; font: 400 12px/16px var(--sans) !important; color: var(--ink3) !important; }
html body #v7 .rt-g { margin-top: 24px !important; padding-top: 16px !important; border-top: 1px solid var(--hair) !important; }
html body #v7 .rt-gh { display: flex !important; justify-content: space-between !important; align-items: baseline !important; font: 400 12px/16px var(--sans) !important; color: var(--ink2) !important; }
html body #v7 .rt-n { font: 400 12px/16px var(--mono) !important; color: var(--ink) !important; }
html body #v7 .bar, html body #v7 .bar-l { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
html body #v7 .bar { margin-top: 8px !important; }
html body #v7 .bar span { display: block !important; height: 4px !important; background: var(--hair) !important; border: 0 !important; opacity: 1 !important; }
html body #v7 .bar span.is-on { background: var(--ink) !important; }
html body #v7 .bar-l { margin-top: 4px !important; font: 500 10px/16px var(--mono) !important; letter-spacing: .08em !important; color: var(--ink4) !important; }
html body #v7 .bar-l span.is-on { color: var(--ink2) !important; }
html body #v7 .rt-x { margin-top: 8px !important; font: 400 12px/16px var(--sans) !important; color: var(--ink2) !important; }
html body #v7 .rt-sp { display: block !important; flex: 1 1 auto !important; }
html body #v7 .rt-go { display: flex !important; align-items: center !important; justify-content: center !important; flex: none !important; height: 40px !important; width: 100% !important; margin: 0 0 16px !important; background: var(--or) !important; color: var(--page) !important; font: 600 14px/1 var(--sans) !important; text-align: center !important; text-decoration: none !important; transition: background 140ms var(--ez) !important; }
html body #v7 .rt-go:hover { background: var(--or2) !important; }
html body #v7 .rf { display: flex !important; align-items: center !important; justify-content: space-between !important; flex: none !important; width: auto !important; align-self: stretch !important; padding-top: 16px !important; border-top: 1px solid var(--hair) !important; font: 500 10px/16px var(--mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--ink3) !important; white-space: nowrap !important; }
html body #v7 .rt-pv { display: inline !important; margin: 0 !important; padding: 0 !important; font: 500 10px/16px var(--mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--ink) !important; text-decoration: none !important; border: 0 !important; box-shadow: none !important; background: none !important; }
html body #v7 .rt-pv:hover { color: var(--or2) !important; }

/* popovers: page white, 1px ink border */
html body #v7 .scrim { position: fixed !important; inset: var(--v7-top, 59px) 0 0 0 !important; background: transparent !important; z-index: 20 !important; }
html body #v7 .pop { position: absolute !important; z-index: 21 !important; width: 320px !important; background: var(--page) !important; border: 1px solid var(--ink) !important; box-shadow: 0 12px 32px rgba(26,20,16,.08) !important; padding: 6px !important; opacity: 0 !important; transform: translateY(-4px) !important; transition: opacity 140ms var(--ez), transform 140ms var(--ez) !important; }
html body #v7 .pop.is-in { opacity: 1 !important; transform: none !important; }
html body #v7 .pr { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; width: 100% !important; padding: 10px 12px !important; transition: background 140ms var(--ez) !important; }
html body #v7 .pr:hover { background: var(--tlh) !important; }
html body #v7 .pr.is-on { background: var(--wash) !important; box-shadow: inset 0 0 0 1px var(--or) !important; }
html body #v7 .pr-a { display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; }
html body #v7 .pr-lg { width: 20px !important; height: 20px !important; display: inline-flex !important; flex: none !important; }
html body #v7 .pr-lg svg, html body #v7 .pr-lg img { width: 20px !important; height: 20px !important; }
html body #v7 .pr-tx { display: flex !important; flex-direction: column !important; gap: 3px !important; }
html body #v7 .pr-tx b { font: 500 14px/1.2 var(--sans) !important; color: var(--ink) !important; }
html body #v7 .pr-tx i { font: 400 12px/1.35 var(--sans) !important; color: var(--ink3) !important; }
html body #v7 .pr-r { font: 400 13px/1 var(--sans) !important; color: var(--ink2) !important; white-space: nowrap !important; }
html body #v7 .pr-r b { font: 500 13px/1 var(--mono) !important; color: var(--ink) !important; }
html body #v7 .pr-r i { font: 400 10.5px/1.2 var(--mono) !important; color: var(--ink3) !important; }
html body #v7 .pop .pos-m { min-height: 0 !important; padding: 12px !important; }
/* a date the desk lists but will not fill: muted, still a row, the reason in its sub-line */
html body #v7 .pr.is-off .pr-tx b { color: var(--ink3) !important; }
html body #v7 .pr.is-off .pr-tx i { color: var(--ink4) !important; }

/* a price older than the desk's window stays on screen, muted (Mehdi v12.6), until the next read lands; the Get is locked meanwhile */
html body #v7 .earn-c, html body #v7 .earn-v, html body #v7 .tl-v, html body #v7 .oc-v b, html body #v7 .oc-x { transition: color 220ms var(--ez) !important; }
html body #v7.is-stale .earn-c, html body #v7.is-stale .earn-v, html body #v7.is-stale .oc-v b, html body #v7.is-stale .oc-x, html body #v7 .tl.is-stale .tl-v { color: var(--ink3) !important; }

/* loading: a shimmer bar where a figure has not arrived yet (Mehdi's tile skeletons), never a placeholder word */
html body #v7 .sk { display: inline-block !important; width: 3.2em !important; max-width: 100% !important; height: .72em !important; vertical-align: middle !important; background: linear-gradient(90deg, #f1e9de 0%, #f8f3ec 50%, #f1e9de 100%) !important; background-size: 200% 100% !important; animation: v12sk 1.4s linear infinite !important; }
@keyframes v12sk { from { background-position: 200% 0; } to { background-position: 0 0; } }
html body #v7 .earn-v .sk { width: 132px !important; height: 26px !important; vertical-align: -2px !important; }
html body #v7 .tl-v .sk { width: 84px !important; height: 20px !important; vertical-align: -1px !important; }
html body #v7 .tok-t .sk { width: 64px !important; height: 18px !important; vertical-align: -2px !important; }
html body #v7 .tl.is-na .tl-n:has(.sk) sup, html body #v7 .earn.is-na .earn-c { display: none !important; }

/* digit roll */
html body #v7 .dg { display: inline-block !important; white-space: pre !important; }
html body #v7 .dg.is-roll { animation: v12roll 220ms var(--ez) both !important; }
@keyframes v12roll { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html body #v7 *, html body #v7 *::before, html body #v7 *::after { animation: none !important; transition: none !important; }
  html body #v7 .pop { transform: none !important; }
}

/* under 1232px wide the rail drops below the ticket */
@media (max-width: 1231px) {
  html body #v7 .wrap { grid-template-columns: minmax(0, 1fr) !important; padding: 32px 24px 24px !important; }
  html body #v7 .rt-sp { flex: none !important; height: 16px !important; }
}
/* phone: the sentence wraps, two tile columns, the ifs stack, the button fills the row */
@media (max-width: 640px) {
  html body #v7 .wrap { padding: 16px 16px 24px !important; gap: 16px !important; }
  html body #v7 .sx { height: auto !important; padding: 20px 16px !important; }
  html body #v7 .sx .chips { flex-wrap: wrap !important; row-gap: 8px !important; white-space: normal !important; }
  html body #v7 .tok, html body #v7 .tok-in { font-size: 20px !important; }
  html body #v7 .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body #v7 .tl { height: auto !important; min-height: 120px !important; padding: 12px !important; border-bottom: 1px solid var(--hair) !important; }      /* grows with its two 'Uses / at' lines: at a fixed 120 they sat on the border (feedback, 24 Oct) */
  html body #v7 .tl:nth-child(2n) { border-right: 0 !important; }
  html body #v7 .tl-n { font-size: 20px !important; }
  html body #v7 .ocs { grid-template-columns: 1fr !important; height: auto !important; }
  html body #v7 .oc { padding: 14px 16px !important; }
  html body #v7 .oc + .oc { border-left: 0 !important; border-top: 1px solid var(--hair) !important; }
  html body #v7 .oc-x { white-space: normal !important; }
  html body #v7 .act { flex-direction: column !important; align-items: stretch !important; height: auto !important; padding: 16px !important; gap: 12px !important; }
  html body #v7 .go { width: 100% !important; }
  html body #v7 .pt { grid-template-columns: 1.4fr 1fr 1fr !important; height: auto !important; min-height: 56px !important; padding: 10px 16px !important; row-gap: 6px !important; }
  html body #v7 .pt > :nth-child(4), html body #v7 .pt > :nth-child(5) { display: none !important; }
  html body #v7 .pt-nm { flex-wrap: wrap !important; row-gap: 2px !important; }      /* the size and level wrap under the name: in the 1.4fr column they clipped to "Sell higher 1." (2026-10-23 phone capture) */
  html body #v7 .pt-nm i { flex-basis: 100% !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  html body #v7 .pt-res { grid-column: span 1 !important; }
  html body #v7 .pos-b { max-height: none !important; }
  html body #v7 .pn-hd > em { font-size: 9px !important; }
  html body #v7 .pop { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; max-height: 70vh !important; overflow: auto !important; padding: 8px 8px calc(16px + env(safe-area-inset-bottom)) !important; border-width: 1px 0 0 !important; }
  html body #v7 .pop.is-in { transform: none !important; }
  html body #v7 .scrim { background: rgba(26,20,16,.12) !important; }
  html.v7-on body > header.top .brand h1, html.v7-on body > header.top .mm-soc { display: none !important; }
  html.v7-on body > header.top .mm-wallet { height: 30px !important; min-height: 0 !important; padding: 0 10px !important; font-size: 10px !important; }
}

/* the Simple | Pro switch in the header, next to the wallet pill, on both sides of the switch */
html body .topright .tm-sw.tm-sw-hd { position: static !important; display: inline-flex !important; align-items: stretch !important; height: 30px !important; margin: 0 8px 0 0 !important; padding: 0 !important; border: 1px solid #1a1410 !important; background: #fffefb !important; border-radius: 0 !important; top: auto !important; right: auto !important; }
html body .topright .tm-sw.tm-sw-hd[hidden] { display: none !important; }
html body .topright .tm-sw.tm-sw-hd button { all: unset; display: inline-flex !important; align-items: center !important; padding: 0 12px !important; height: 100% !important; box-sizing: border-box !important; cursor: pointer !important; font: 600 11px/1 "Geist Mono", ui-monospace, monospace !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #1a1410 !important; background: transparent !important; }
html body .topright .tm-sw.tm-sw-hd button + button { border-left: 1px solid #1a1410 !important; }
html body .topright .tm-sw.tm-sw-hd button:hover { color: #d95f24 !important; }
html body .topright .tm-sw.tm-sw-hd button.on { color: #ec6b2d !important; background: #fdf6ee !important; box-shadow: inset 0 0 0 1px #ec6b2d !important; cursor: default !important; }
html body .topright .tm-sw.tm-sw-hd button:focus-visible { outline: 2px solid #ec6b2d !important; outline-offset: 2px !important; }
@media (max-width: 640px) { html body .topright .tm-sw.tm-sw-hd button { padding: 0 8px !important; font-size: 10px !important; } }

/* Simple and Pro come in the same way: a short fade and lift, the terminal already warm underneath */
@keyframes v7in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html body #v7.is-enter .wrap, html body .view[data-view="match"] #mm-pro.v7-enter { animation: v7in .26s cubic-bezier(.2,.8,.2,1) both !important; }
@media (prefers-reduced-motion: reduce) { html body #v7.is-enter .wrap, html body .view[data-view="match"] #mm-pro.v7-enter { animation: none !important; } }

/* dark mode (html[data-mode="dark"], the theme toggle): the rail tokens as specified, the rest derived from them.
   dark-mode.css inverts the whole page at the root; #v7 undoes that flip so the tokens above render as written. */
html[data-mode="dark"] body #v7 {
  --page: #020100; --panel: #070400; --s2: #0e0a05; --hair: #1f180e;
  --ink: #e0dbd8; --ink2: #b9b1ab; --ink3: #7f766d; --ink4: #4a433c;
  --wash: #160c04; --pale: #5a2e16; --chip: #0e0a05; --vb: #160c04; --vbB: #4a2812; --tlh: #0b0703;
  --gp: #3d352d; --seal: rgba(224,219,216,.22);
  filter: brightness(1.0638) hue-rotate(-180deg) invert(1) !important; background: var(--page) !important;
}
html[data-mode="dark"] body #v7 img { filter: none !important; }
html[data-mode="dark"] body #v7 .go, html[data-mode="dark"] body #v7 .rt-go { color: #fffdf9 !important; }
html[data-mode="dark"] body #v7 .pop { box-shadow: 0 12px 32px rgba(0,0,0,.5) !important; }