/* THE SIFT STYLE (2026-11-03, copied from Testchain's style and made Sift's own). Axiom's page with its layout untouched (the
 * owner's way for Testchain: "abit different from axiom. not too much"). The palette ("graphite + crystal": a cool lifted
 * graphite, a light ice accent) is tools/recolour.mjs; this file is the rest of the look, built on one idea: A SIFT SPLITS A RAY.
 *   - the spectrum (red, amber, yellow, green, cyan, blue, violet) appears only as hairlines: the seam under the header, the
 *     first stretch of every panel's top line, the open tab;
 *   - every panel header (Trenches' three columns and the like) has a crystal top line that starts as a spectrum, its title in
 *     mono capitals after a small crystal triangle (the sift);
 *   - crystal buttons squared off (6 px) with dark ink type (the accent is light) and a cool top light;
 *   - rows: a crystal wash and a crystal edge under the pointer; thin graphite scrollbars, crystal selection.
 * Loaded LAST in <head> (server.mjs page()), so it wins over Axiom's own sheet at the same specificity. Nothing here changes
 * a size or a position. */
:root {
  --px-ink: #0C0E13;
  --px-crystal: 168, 222, 255;
  --px-spectrum: linear-gradient(90deg, #FF6B7A 0%, #FFB45C 17%, #FFE066 33%, #5FE3A1 50%, #5CD3F0 66%, #7CA8FF 83%, #A992FF 100%);
}

/* ---- the header: a spectral seam along its bottom edge ---- */
#platform-layout > div:first-child { position: relative; }
#platform-layout > div:first-child::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: var(--px-spectrum); opacity: .55;
}
/* the open tab: underlined in crystal */
#platform-layout > div:first-child a > button.text-primaryBlue::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 1px; height: 2px; border-radius: 2px; pointer-events: none;
  background: rgb(var(--primary-color));
}
@media (min-width: 1280px) { #platform-layout > div:first-child a > button.text-primaryBlue::after { left: 14px; right: 14px; } }

/* ---- panel headers (Trenches' columns, …): a top line that leaves the sift as a spectrum and runs on in crystal; the title in mono
   capitals after a small crystal triangle ---- */
section.bg-backgroundSecondary > header { position: relative; }
section.bg-backgroundSecondary > header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: var(--px-spectrum) 0 0 / 96px 1px no-repeat, linear-gradient(90deg, rgba(var(--px-crystal), .55) 0, rgba(var(--px-crystal), .5) 96px, rgba(var(--px-crystal), .12) 60%, rgba(var(--px-crystal), 0) 100%);
}
section.bg-backgroundSecondary > header span.truncate.text-\[16px\] {
  font-family: var(--font-geist-mono); font-size: 13px !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgb(var(--text-primary));
}
section.bg-backgroundSecondary > header span.truncate.text-\[16px\]::before {
  content: ""; display: inline-block; width: 9px; height: 8px; margin-right: 10px; vertical-align: 0;
  background: rgb(var(--primary-color)); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* ---- crystal buttons (Trenches' quick buy, Deposit, the trade panel's): squared off, a cool light from the top, DARK INK type (the
   accent is light: Axiom wrote white type on its blue) ---- */
button.bg-primaryBlue {
  border-radius: 6px !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 6px 18px -10px rgba(var(--px-crystal), .9);
  color: var(--px-ink) !important;
}
button.bg-primaryBlue span, button.bg-primaryBlue i, button.bg-primaryBlue div, button.bg-primaryBlue .text-background,
button.bg-primaryBlue .text-white, button.bg-primaryBlue .text-textPrimary { color: var(--px-ink) !important; }
button.bg-primaryBlue svg { color: var(--px-ink); }
button.bg-primaryBlue img[src*="sol-fill"], button.bg-primaryBlue img[src*="solana"] { filter: brightness(0) saturate(100%); opacity: .82; }
button.bg-primaryBlue:hover { filter: brightness(1.06); }
/* any other solid crystal fill with type in it (badges, selected pills, the trade panel's big button as a div) */
.bg-primaryBlue.text-white, .bg-primaryBlue .text-white, .bg-primaryBlue.text-textPrimary, div.bg-primaryBlue > span,
a.bg-primaryBlue, a.bg-primaryBlue span, a.bg-primaryBlue i { color: var(--px-ink) !important; }
/* Axiom's pills squared off the same way: buttons (an avatar inside one keeps it round), bordered fields, the controls in the
   panel headers and the header's search / wallet / watchlist. Dots, avatars and switch knobs stay round. */
button.rounded-full:not(:has(img)),
div.rounded-full.border-primaryStroke, div.rounded-full.border-secondaryStroke,
section.bg-backgroundSecondary > header .rounded-full,
#platform-layout > div:first-child button.rounded-full.border-primaryStroke,
#platform-layout > div:first-child button.rounded-full.bg-primaryStroke { border-radius: 6px !important; }

/* ---- Trenches rows: a crystal wash and a crystal edge under the pointer ---- */
.border-primaryStroke\/50.border-b-\[1px\].cursor-pointer:hover {
  background-color: rgba(var(--px-crystal), .045) !important;
  box-shadow: inset 2px 0 0 rgb(var(--primary-color));
}

/* ---- scrollbars and selection ---- */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgb(var(--secondary-stroke)); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--px-crystal), .45); }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-corner { background: transparent; }
@supports (-moz-appearance: none) { * { scrollbar-width: thin; scrollbar-color: rgb(var(--secondary-stroke)) transparent; } }
::selection { background: rgba(var(--px-crystal), .35); color: #fff; }

/* ---- OUR OWN HEADER AND FOOTER (10-27, owner: "change footer completely to be our own / same with header"): Axiom's bars stay in
   the page out of sight (their space kept, so everything they open still opens where it belongs); ours (client/oscope.js,
   client/oscope.css .tc-head / .tc-foot) sit fixed over them. Phones keep Axiom's phone bars. ---- */
@media (min-width: 640px) {
  #platform-layout > div:first-child, div.h-\[36px\].min-h-\[36px\].border-t-\[1px\] { visibility: hidden !important; }
}

/* ---- the page title (Trenches, Discover, …): mono capitals after the crystal triangle, then the platform chip (which coins are
   listed: client/oscope.js sets --px-chip from the engine's /api/config); the other chains' pills gone ---- */
main div.min-h-\[32px\].flex-none.flex-row > div.flex-none > button.text-\[20px\] {
  display: inline-flex; align-items: center; font-family: var(--font-geist-mono); font-size: 16px !important; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
main div.min-h-\[32px\].flex-none.flex-row > div.flex-none > button.text-\[20px\]::before {
  content: ""; width: 11px; height: 10px; margin-right: 11px; background: rgb(var(--primary-color)); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
main div.min-h-\[32px\].flex-none.flex-row > div.flex-none > button.text-\[20px\]::after {
  content: var(--px-chip, "Sift"); display: inline-flex; align-items: center; height: 22px; margin-left: 14px; padding: 0 8px 0 21px; border-radius: 4px;
  font-size: 10.5px; letter-spacing: .14em; color: rgb(var(--px-crystal)); border: 1px solid rgba(var(--px-crystal), .3);
  background: rgba(var(--px-crystal), .07) url("/tc/coin.svg") 6px 50% / 11px 11px no-repeat;
}
div.rounded-full.p-\[4px\]:has(img[src*="bnb-fill"]), div.rounded-full.p-\[4px\]:has(img[src*="eth-fill"]),
div.rounded-full.p-\[4px\]:has(img[src*="robinhood"]) { display: none !important; }

/* ---- the page toolbar (help, Display, settings, hidden coins, buy delay, wallets): our chips ---- */
main div.min-h-\[32px\].flex-none.flex-row button.bg-primaryStroke,
main div.min-h-\[32px\].flex-none.flex-row button.border-primaryStroke {
  background: rgba(255, 255, 255, .015) !important; border: 1px solid rgb(var(--secondary-stroke)) !important; border-radius: 6px !important;
}
main div.min-h-\[32px\].flex-none.flex-row button.bg-primaryStroke:hover,
main div.min-h-\[32px\].flex-none.flex-row button.border-primaryStroke:hover { border-color: rgba(var(--px-crystal), .45) !important; background: rgba(var(--px-crystal), .06) !important; }
main div.min-h-\[32px\].flex-none.flex-row button.bg-primaryStroke span {
  font-family: var(--font-geist-mono); font-size: 11.5px !important; letter-spacing: .12em; text-transform: uppercase;
}
main div.min-h-\[32px\].flex-none.flex-row button { border-radius: 6px !important; }

/* ---- Axiom's settings windows (Display, Quick Bar, presets …) in our style: a crystal line on top, squared corners ---- */
.z-modal .rounded-\[16px\], .z-modal .rounded-\[20px\], .z-modal .rounded-\[12px\] { border-radius: 10px !important; }
.z-modal .pointer-events-auto > div[class*="border"], .z-modal .pointer-events-auto > aside {
  box-shadow: inset 0 1px 0 rgba(var(--px-crystal), .7), 0 24px 80px rgba(0, 0, 0, .6) !important;
}

/* ---- DISCOVER, TRACKERS, PORTFOLIO IN OUR STYLE (10-27, owner: "make the discover and tracking page our own style as well /
   portfolio as well"). These pages have no <main> (Trenches has one, its rules are above): scoped to the page container
   without a <main>, so nothing here touches Trenches. Same language as Trenches: mono capitals, crystal triangles and lines. ---- */
/* the page tabs (Discover's Top / Trending, Portfolio's Spot / Wallets / Compare): mono capitals, the open one after a crystal triangle */
#platform-layout-container:not(:has(main)) button span[class*="tracking-[-0.02em]"][class*="text-[20px]"],
#platform-layout-container:not(:has(main)) div.mb-\[16px\].h-\[32px\] button span[class*="tracking-[-0.02em]"] {
  font-family: var(--font-geist-mono) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: .14em !important;
  text-transform: uppercase; display: inline-flex; align-items: center;
}
#platform-layout-container:not(:has(main)) button span[class*="tracking-[-0.02em]"][class*="text-[20px]"].text-textPrimary::before,
#platform-layout-container:not(:has(main)) div.mb-\[16px\].h-\[32px\] button span[class*="tracking-[-0.02em]"].text-textPrimary::before {
  content: ""; width: 9px; height: 8px; margin-right: 10px; background: rgb(var(--primary-color)); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
/* tabs inside panels (Active Positions / History / Top 100, Activity / Transfers, Manager / Live Trades, My List / Social Alerts …):
   mono capitals; the open one crystal-underlined (Portfolio) or after a crystal triangle (Trackers) */
#platform-layout-container:not(:has(main)) div.border-b-\[2px\].border-textPrimary { border-color: rgb(var(--primary-color)) !important; }
#platform-layout-container:not(:has(main)) button.group.text-nowrap span.text-\[14px\].font-medium,
#platform-layout-container:not(:has(main)) button.group.h-\[24px\] > span.text-\[14px\] {
  font-family: var(--font-geist-mono); font-size: 11.5px !important; font-weight: 600; letter-spacing: .12em !important; text-transform: uppercase;
}
#platform-layout-container:not(:has(main)) button.group.h-\[24px\] > span.text-\[14px\].text-textPrimary { display: inline-flex; align-items: center; }
#platform-layout-container:not(:has(main)) button.group.h-\[24px\] > span.text-\[14px\].text-textPrimary::before {
  content: ""; width: 8px; height: 7px; margin-right: 8px; background: rgb(var(--primary-color)); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
/* the time range (1d 7d 30d Max) in mono capitals */
#platform-layout-container:not(:has(main)) button.h-\[32px\].text-nowrap.px-\[8px\] > span.text-\[14px\] {
  font-family: var(--font-geist-mono); font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase;
}
/* panel heads (Portfolio's Balance / Realized PNL / Performance): the spectral-crystal top line, the title in mono capitals */
#platform-layout-container:not(:has(main)) div.flex-col > div.h-\[44px\].min-h-\[44px\]:first-child { position: relative; }
#platform-layout-container:not(:has(main)) div.flex-col > div.h-\[44px\].min-h-\[44px\]:first-child::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: var(--px-spectrum) 0 0 / 96px 1px no-repeat, linear-gradient(90deg, rgba(var(--px-crystal), .55) 0, rgba(var(--px-crystal), .5) 96px, rgba(var(--px-crystal), .12) 60%, rgba(var(--px-crystal), 0) 100%);
}
#platform-layout-container:not(:has(main)) div.flex-col > div.h-\[44px\].min-h-\[44px\]:first-child span.text-\[14px\] {
  font-family: var(--font-geist-mono); font-size: 11.5px !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
/* Trackers' panels: the same top line */
#platform-layout-container:not(:has(main)) div.bg-elevation1.min-h-0.flex-col.overflow-hidden { position: relative; }
#platform-layout-container:not(:has(main)) div.bg-elevation1.min-h-0.flex-col.overflow-hidden::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 5; pointer-events: none;
  background: var(--px-spectrum) 0 0 / 96px 1px no-repeat, linear-gradient(90deg, rgba(var(--px-crystal), .55) 0, rgba(var(--px-crystal), .5) 96px, rgba(var(--px-crystal), .12) 60%, rgba(var(--px-crystal), 0) 100%);
}
/* table heads (Discover's Pair Info / Market Cap …, the wallet list's Name / Balance …, Portfolio's Token / Bought …): mono capitals */
#platform-layout-container:not(:has(main)) div.sticky.z-20.h-\[32px\] span.text-\[12px\],
#platform-layout-container:not(:has(main)) button.group > div > span.font-regular.text-\[12px\],
#platform-layout-container:not(:has(main)) div.h-\[28px\].min-h-\[28px\] span.text-\[12px\].text-textTertiary {
  font-family: var(--font-geist-mono); font-size: 10.5px !important; letter-spacing: .12em; text-transform: uppercase;
}
#platform-layout-container:not(:has(main)) button.group > div > span.font-regular.text-\[12px\] { font-size: 10px !important; letter-spacing: .06em; margin-right: 6px; }
/* Discover's table: the head carries the top line, a row under the pointer a crystal edge */
#platform-layout-container:not(:has(main)) div.sticky.z-20.h-\[32px\]::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: var(--px-spectrum) 0 0 / 96px 1px no-repeat, linear-gradient(90deg, rgba(var(--px-crystal), .55) 0, rgba(var(--px-crystal), .5) 96px, rgba(var(--px-crystal), .12) 60%, rgba(var(--px-crystal), 0) 100%);
}
#platform-layout-container:not(:has(main)) div.group\/pulseRow:hover { background: rgba(var(--px-crystal), .04) !important; box-shadow: inset 2px 0 0 rgb(var(--primary-color)); }
/* the other chains' pills on these pages too */
div.rounded-full.h-\[32px\]:has(img[src*="bnb"]), div.rounded-full.h-\[32px\]:has(img[src*="robinhood"]) { display: none !important; }

/* ---- SIFT: no Perpetuals anywhere (the phone's bottom bar kept Axiom's link) ---- */
a[href^="/perpetuals"] { display: none !important; }

/* ======================================================================================================================
   THE COIN PAGE IN SIFT'S OWN LOOK (11-03, owner: "make the chart view look our own. SIFT is our own shit"). Layout and every
   function untouched; the look is Sift's: mono capital labels (Fira Mono, as on the website) after the crystal triangle, the
   spectrum hairline, crystal for what is selected, Sift's green / coral (tools/recolour.mjs) for buy / sell. The chart itself
   (inside TradingView's frame) is client/chart.css; the watermark + the TradingView credit are client/oscope.js (chartMarks).
   ====================================================================================================================== */
@font-face { font-family: 'Sift Mono'; src: url('/web/fonts/firamono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Sift Mono'; src: url('/web/fonts/firamono-500.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }
:root { --px-mono: 'Sift Mono', var(--font-geist-mono), ui-monospace, monospace; }

/* Axiom's communities button (left of the coin's picture): Axiom's own service, gone */
button[aria-label="Show communities"] { display: none !important; }

/* the coin's header strip: a spectrum hairline under it; every stat label in mono capitals after a small crystal triangle; the
   numbers in mono */
div.relative.flex.border-b.border-primaryStroke[class*="min-h-[calc(64px+var(--pair-summary-translation-line"] { position: relative; }
div.relative.flex.border-b.border-primaryStroke[class*="min-h-[calc(64px+var(--pair-summary-translation-line"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; z-index: 2;
  background: var(--px-spectrum) 0 0 / 120px 1px no-repeat, linear-gradient(90deg, rgba(var(--px-crystal), .5) 0, rgba(var(--px-crystal), .45) 120px, rgba(var(--px-crystal), .1) 55%, rgba(var(--px-crystal), 0) 100%);
}
div[class*="min-h-[calc(64px+var(--pair-summary-translation-line"]  div.text-nowrap.px-\[4px\].py-\[2px\] > span:first-child {
  font-family: var(--px-mono) !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: .12em; text-transform: uppercase;
  color: rgb(var(--text-tertiary)) !important; display: inline-flex; align-items: center;
}
div[class*="min-h-[calc(64px+var(--pair-summary-translation-line"]  div.text-nowrap.px-\[4px\].py-\[2px\] > span:first-child::before {
  content: ""; width: 6px; height: 5px; margin-right: 6px; background: rgba(var(--px-crystal), .75); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
div[class*="min-h-[calc(64px+var(--pair-summary-translation-line"]  div.text-nowrap.px-\[4px\].py-\[2px\] > *:not(:first-child),
div[class*="min-h-[calc(64px+var(--pair-summary-translation-line"]  div.text-nowrap.px-\[4px\].py-\[2px\] > *:not(:first-child) * {
  font-family: var(--px-mono) !important; letter-spacing: -.01em;
}
/* the market cap next to the name: mono, crystal-white */
div[class*="min-h-[calc(64px+var(--pair-summary-translation-line"] span.text-\[20px\], div[class*="min-h-[calc(64px+var(--pair-summary-translation-line"] span.text-\[18px\] { font-family: var(--px-mono) !important; letter-spacing: -.02em; }

/* THE RIGHT PANEL (Buy / Sell, presets, the 5m / 1h box, Token Info, CA / DA) */
div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col span.text-textTertiary.text-\[12px\],
div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col span.text-\[12px\].text-textTertiary,
div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col span.text-nowrap.text-\[12px\].font-medium.text-textSecondary {
  font-family: var(--px-mono) !important; font-size: 10px !important; letter-spacing: .1em; text-transform: uppercase;
}
div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col span.text-increase, div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col span.text-decrease { font-family: var(--px-mono) !important; }
/* the 5m / 1h / 6h / 24h tabs: the open one in a crystal wash with a crystal edge on top */
div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col button[class*="bg-[#2F3038]/[0.45]"] { background: rgba(var(--px-crystal), .07) !important; box-shadow: inset 0 2px 0 rgb(var(--primary-color)); }
div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col button[class*="border-b-[1px]"] span.text-\[12px\] { font-family: var(--px-mono) !important; letter-spacing: .06em; }
/* Buy / Sell switch: squared, the chosen side filled in Sift's green or coral */
div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col div.max-h-\[40px\].rounded-\[8px\] { border-radius: 6px !important; }
div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col div.max-h-\[40px\].rounded-\[8px\] > button { border-radius: 4px !important; }
div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col div.max-h-\[40px\].rounded-\[8px\] > button span,
div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col button.max-h-\[36px\] span {
  font-family: var(--px-mono) !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .12em; text-transform: uppercase;
}
div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col button.max-h-\[36px\].rounded-full { border-radius: 6px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 8px 22px -14px currentColor; background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%); }
/* Market / Limit / Adv.: mono capitals, the open one underlined in crystal */
div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col div.border-b-\[2px\].border-textPrimary { border-color: rgb(var(--primary-color)) !important; }
div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col button.group.h-\[24px\] span.text-\[12px\].font-medium { font-family: var(--px-mono) !important; font-size: 11px !important; letter-spacing: .1em; text-transform: uppercase; }
/* Token Info tiles: a crystal hairline on top, numbers in mono */
div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col div.h-\[55px\].rounded-\[4px\].border { border-radius: 6px !important; position: relative; overflow: hidden; background: rgba(255, 255, 255, .012); }
div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col div.h-\[55px\].rounded-\[4px\].border::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(var(--px-crystal), .5), rgba(var(--px-crystal), 0)); }
div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col div.h-\[55px\].rounded-\[4px\].border span:not(.text-textTertiary) { font-family: var(--px-mono) !important; }
/* CA / DA rows: addresses in mono */
div.w-\[320px\].min-w-\[320px\].max-w-\[320px\].flex-col div.duration-125.h-\[32px\] span.text-\[14px\] { font-family: var(--px-mono) !important; font-size: 12.5px !important; }

/* THE INSTANT-TRADE WIDGET: Sift's panel, a spectrum hairline on top, mono figures */
.snap-animation-container button span, .snap-animation-container .buy-click-container span { font-family: var(--px-mono) !important; }

/* the chart's Sift watermark (client/oscope.js puts it over the pane: mark + wordmark, faint, never in the way) */
.px-wm { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 18px; z-index: 2;
  pointer-events: none; opacity: .055; color: #fff; font: 600 64px/1 "Geist Variable", Geist, system-ui, sans-serif; letter-spacing: -.03em; user-select: none; }
.px-wm svg { width: 78px; height: 78px; }
.px-tvcredit { font: 500 10.5px var(--px-mono); letter-spacing: .06em; color: rgb(var(--text-tertiary)); text-decoration: none; }
.px-tvcredit:hover { color: rgb(var(--text-secondary)); }

/* ---- SIFT (11-03): Axiom's settings windows (Display, Quick Bar, presets …) in Sift's language: squarer corners, tabs in mono
   capitals with the open one in crystal ---- */
.z-modal .pointer-events-auto > div[class*="rounded-"], .z-modal .pointer-events-auto > div > div[class*="rounded-[24px]"] { border-radius: 12px !important; }
.z-modal button.isolate.rounded-full span.text-\[14px\] { font-family: var(--px-mono) !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: .1em; text-transform: uppercase; }
.z-modal button.isolate.rounded-full span.text-textPrimary { color: rgb(var(--primary-color)) !important; }
.z-modal button.isolate.rounded-full > div[class*="absolute"], .z-modal button.isolate.rounded-full > span[class*="absolute"] { border-radius: 6px !important; background: rgba(var(--px-crystal), .08) !important; box-shadow: inset 0 0 0 1px rgba(var(--px-crystal), .25); }
@media (max-width: 639.98px) { .px-wm { font-size: 30px; gap: 9px; opacity: .05; } .px-wm svg { width: 36px; height: 36px; } }

/* THE TRENCHES ROW CHART (11-05; owner: "put that mini-chart there on the trenches ... exactly like it works on my pulse page",
   "MAKE IT LOOK LIKE MY REAL ONE / BIGGER CHART", "why does it load first like this -> then change it").
   ALL OF THE ROW'S LAYOUT IS HERE, on Axiom's own classes, in <head> before the app draws its first row: nothing moves after
   the first paint. The host = Axiom's row body (div.cursor-pointer.relative.z-[1], its own stacking layer). In it:
   ::after = the panel (termscope's .row-chart: the row's full height 8 px in, 38 % of the row, 150-264 px) at z 18;
   client/rowchart.js puts only a canvas (+ the step chip) into it at z 19; Axiom's own V / MC (live) sit in the panel's head,
   its F / TX line is hidden; Axiom's quick buy (z 20) is stretched see-through over the panel with the amount as a tag bottom
   left = termscope's .qb (its click is Axiom's own quick buy). Phones keep Axiom's row. */
@media (min-width: 768px) {
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative::after { content: ""; position: absolute; right: 8px; top: 8px; bottom: 8px; width: clamp(150px, 38%, 264px); z-index: 18; box-sizing: border-box;
    background: #0E1015; border: 1px solid #262A34; border-radius: 4px; pointer-events: none; }
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative > .px-rc { position: absolute; right: 8px; top: 8px; bottom: 8px; width: clamp(150px, 38%, 264px); z-index: 19; pointer-events: none;
    border-radius: 4px; overflow: hidden; }
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative > .px-rc canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative > .px-rc .px-rc-step { position: absolute; left: 8px; top: 5px; font: 500 9.5px/12px "Sift Mono", "Fira Mono", ui-monospace, monospace;
    color: rgba(126, 132, 150, .9); letter-spacing: .02em; }
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative > .px-rc .px-rc-ping { position: absolute; left: -20px; top: -20px; width: 8px; height: 8px; border-radius: 50%; opacity: 0;
    transform: translate(-50%, -50%); pointer-events: none; }
  /* Axiom's V / MC corner -> the panel's head (top right, 22 px line), mono like termscope's ch-v / ch-mc; F / TX hidden */
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative div.pointer-events-none.absolute.right-\[16px\].top-\[16px\] { right: 15px !important; top: 9px !important; }
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative div.pointer-events-none.absolute.right-\[16px\].top-\[16px\] .gap-\[6px\] > :nth-child(n+2) { display: none !important; }
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative div.pointer-events-none.absolute.right-\[16px\].top-\[16px\] .bg-backgroundSecondary,
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative div.pointer-events-none.absolute.right-\[16px\].top-\[16px\] .absolute.inset-0 { display: none !important; }
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative div.pointer-events-none.absolute.right-\[16px\].top-\[16px\] span.text-textTertiary { font: 600 9px/18px "Sift Mono", "Fira Mono", ui-monospace, monospace !important;
    letter-spacing: .08em; padding-bottom: 0 !important; }
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative div.pointer-events-none.absolute.right-\[16px\].top-\[16px\] span.text-\[16px\] { font: 500 14px/18px "Sift Mono", "Fira Mono", ui-monospace, monospace !important; }
  /* the quick buy = the whole panel, see-through; the amount as a tag bottom left */
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative div.absolute.z-20.bottom-\[16px\] { left: auto !important; right: 8px !important; top: 8px !important; bottom: 8px !important;
    width: clamp(150px, 38%, 264px) !important; opacity: 1 !important; }
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative div.absolute.z-20.bottom-\[16px\] > div, main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative div.absolute.z-20.bottom-\[16px\] > div > div { width: 100% !important; height: 100% !important; opacity: 1 !important; }
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative div.absolute.z-20.bottom-\[16px\] button { width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 0 0 5px 6px !important;
    border-radius: 4px !important; gap: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important;
    align-items: flex-end !important; justify-content: flex-start !important; }
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative div.absolute.z-20.bottom-\[16px\] button::before, main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative div.absolute.z-20.bottom-\[16px\] button::after { display: none !important; }
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative div.absolute.z-20.bottom-\[16px\] button:hover { background: rgba(52, 196, 138, .10) !important; box-shadow: inset 0 0 0 1px rgba(52, 196, 138, .55) !important; }
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative div.absolute.z-20.bottom-\[16px\] button i, main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative div.absolute.z-20.bottom-\[16px\] button span { height: 18px; display: inline-flex !important; align-items: center;
    background: #12241F; color: #34C48A !important; border: 1px solid rgba(52, 196, 138, .5); }
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative div.absolute.z-20.bottom-\[16px\] button i { font-size: 11px !important; padding: 0 3px 0 6px; border-right: 0; border-radius: 3px 0 0 3px; }
  main section.bg-backgroundSecondary .border-primaryStroke\/50.border-b-\[1px\].cursor-pointer > div.cursor-pointer.relative div.absolute.z-20.bottom-\[16px\] button span { font: 700 10.5px/1 "Sift Mono", "Fira Mono", ui-monospace, monospace !important; padding: 0 7px 0 0;
    border-left: 0; border-radius: 0 3px 3px 0; }
}