/* MagicSwap · the Paint skin, site-wide (branch paint-mode, first pass).
   Every rule is gated on html.paint, set by the head snippet from
   localStorage.mwView ("paint" | "pro") or ?ui=paint / ?ui=pro. Pro mode
   never sees a rule from this file. Loaded by pro.html, leaders.html and
   the shell on every proxied Nexus route. Variables first: the three
   stylesheets (pro, leaders, theme.css) each read their palette through
   custom properties, so one block re-colours most of a page. */
@font-face{font-family:"MIM Classic";src:url(/simple/mim-classic.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Comic MS";src:url(/simple/comic-regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Comic MS";src:url(/simple/comic-bold.ttf) format("truetype");font-weight:700;font-display:swap}

html.paint{
  --paint-font:"MIM Classic","Comic MS","Comic Sans MS",cursive;
  --bg:#ffffff; --surface:#1F2227; --surface2:#0E1014; --edge:#000000;
  --ink:#ffffff; --ink-soft:#e4e7ec; --ink-mute:#cfd4dc;
  --cyan:#2A85FF; --violet:#2F54FA; --magenta:#ff4ddb; --mint:#35e86b;
  --cta1:#2F54FA; --cta2:#2A85FF; --cta-ink:#ffffff;
  --jupiter-plugin-primary:47, 84, 250;
  --solana:#a66bff; --neon-cyan:#2A85FF; --neon-amber:#f7931a;
  --mono:var(--paint-font); --sans:var(--paint-font); --disp:var(--paint-font);
  --fs-label:14px; --fs-meta:15px; --fs-body:16px;
  /* theme.css (the proxied Nexus pages) */
  --mw-bg:#ffffff; --mw-surface:#1F2227; --mw-surface2:#0E1014; --mw-edge:#000000;
  --mw-cyan:#2A85FF; --mw-violet:#2F54FA; --mw-magenta:#ff4ddb;
  --mw-cta1:#2F54FA; --mw-cta2:#2A85FF; --mw-cta-ink:#ffffff;
  --mw-mono:var(--paint-font); --mw-disp:var(--paint-font);
}
html.paint, html.paint *, html.paint *::before, html.paint *::after{
  font-family:var(--paint-font) !important; font-weight:400 !important;
  letter-spacing:0 !important; text-transform:none !important;
  cursor:url(/simple/cursor.png) 12 12, auto !important;
}
html.paint body{
  background:#fff url(/simple/doodle.jpg) center 96px / cover no-repeat fixed !important;
  color:#000;
}
@media (max-width:640px){ html.paint body{ background-image:url(/simple/doodle-mobile.jpg) !important; background-attachment:scroll !important } }

/* ---- pro.html + leaders.html chrome ---- */
html.paint .topbar{ background:#fff !important; backdrop-filter:none !important; border-bottom:3px solid #000 !important; color:#000 }
html.paint .topbar a, html.paint .topbar summary, html.paint .topbar span, html.paint .topbar b{ color:#000 }
html.paint .tnav{ color:#000 !important; font-size:15px !important; padding:5px 12px; border-radius:999px }
html.paint .tnav.on{ color:#fff !important; background:#000 }
html.paint .idrow{ background:rgba(255,255,255,.9); border:3px solid #000; border-radius:16px; padding:8px 16px !important; margin:10px 0 6px !important; width:fit-content; max-width:100% }
html.paint .idrow, html.paint .idrow *{ color:#000 !important; opacity:1 !important }
html.paint .pgh-sub, html.paint .feeloop, html.paint .lede{ color:#000 !important; background:rgba(255,255,255,.88); display:inline-block; padding:5px 12px; border-radius:12px; border:2px solid #000 }
html.paint .feeloop svg{ stroke:#000 }
html.paint .btn{ border:2px solid #000 !important; border-radius:999px !important; background:#fff !important; color:#000 !important; font-size:14px !important }
html.paint .btn.primary{ background:#2F54FA !important; color:#fff !important }
html.paint .apps summary{ border:2px solid #000; border-radius:999px; background:#fff; color:#000; padding:5px 12px }
html.paint .apps-menu{ background:#fff !important; border:3px solid #000 !important; border-radius:18px !important; box-shadow:4px 4px 0 #000 !important }
html.paint .apps-menu a{ color:#000 !important }
html.paint .chainsw{ border:2px solid #000 !important; border-radius:999px !important; background:#fff !important }
html.paint .card{ clip-path:none !important; border:3px solid #000 !important; border-radius:22px !important;
  background:#1F2227 !important; box-shadow:5px 5px 0 #000 }
html.paint .card::before{ display:none !important }
html.paint .card h2{ font-size:16px !important; color:#fff !important }
html.paint th{ color:#cfd4dc !important; font-size:14px !important }
html.paint td{ font-size:16px !important }
/* the hand-drawn glyphs need a size up wherever the Pro scale went small */
html.paint .tile .k, html.paint .card h2 .sub, html.paint .idrow small{ font-size:15px !important; color:#e4e7ec !important }
/* Phone ticker: Pro paints the band navy under 768px; on paper ink that hid the labels. */
@media (max-width:768px){ html.paint #ticker{ background:var(--paper) !important; border-bottom:2px solid #000 !important; color:var(--ink-soft) !important } html.paint #ticker b{ color:var(--ink) !important } }
html.paint .tile .v{ font-size:28px !important }
html.paint .tile .runes, html.paint .note, html.paint .feeloop, html.paint .pgh-sub{ font-size:15px !important; line-height:1.6 !important }
html.paint .tile .runes{ color:#e4e7ec !important }
html.paint .tnav{ font-size:16px !important }
html.paint .ms, html.paint .sub, html.paint small, html.paint .meta{ font-size:14px !important }
html.paint footer{ color:#000 !important; background:rgba(255,255,255,.82); border:3px solid #000; border-radius:18px; padding:14px 18px; margin-top:26px }
html.paint footer a{ color:#2F54FA !important }
html.paint .uitg{ border:2px solid #000 !important; border-radius:999px !important; background:#fff !important; overflow:hidden }
html.paint .uitg a{ color:#000 !important; font-size:13px !important; padding:6px 12px !important }
html.paint .uitg a.paint{ background:#2F54FA !important; color:#fff !important }
html.paint .uitg a.pro{ background:transparent !important }
/* the family rail (fam.js, desktop) and tab bar (phones) */
html.paint #mw-rail{ background:#fff !important; border-right:3px solid #000 !important }
html.paint #mw-rail a, html.paint #mw-rail-socials a{ color:#000 !important; font-size:9px !important }
html.paint #mw-rail a.on{ color:#2F54FA !important }
html.paint #mw-rail a.on::before{ background:#2F54FA !important; box-shadow:none !important; width:4px !important }
html.paint #mw-rail .mw-rail-coin{ filter:none !important; box-shadow:0 0 0 2px #000; }
html.paint #mw-rail-socials .sic-img{ filter:none !important; opacity:1 !important }
html.paint #mw-tabbar{ background:#fff !important; border-top:3px solid #000 !important; backdrop-filter:none !important }
html.paint #mw-tabbar a{ color:#000 !important; font-size:11px !important }
html.paint #mw-tabbar a.on{ color:#2F54FA !important }

/* ---- the proxied Nexus pages (theme.css does the heavy lifting through
   the --mw-* variables above; these are the few hard-coded spots) ---- */
html.paint .MuiButton-contained.MuiButton-contained.MuiButton-contained{
  background:#2F54FA !important; background-image:none !important; color:#fff !important; border-radius:20px !important; box-shadow:none !important }
html.paint .MuiButton-contained.MuiButton-contained.MuiButton-contained:hover{ background:#2A85FF !important }
html.paint .MuiPaper-root.MuiPaper-root{ border-radius:20px }
html.paint main .MuiPaper-root.MuiPaper-root, html.paint main .MuiCard-root{ border:3px solid #000 !important; box-shadow:5px 5px 0 #000 !important }
/* the shell's own chrome on /pools, /account, /explore: fixed 48px bar
   (theirs, restyled by theme.css), the phone section row, the footer */
html.paint .MuiAppBar-root.MuiAppBar-root, html.paint header.MuiPaper-root{ background:#fff !important; border-bottom:3px solid #000 !important; box-shadow:none !important }
html.paint .mw-tb-brand b{ color:#000 !important; filter:none !important; font-size:17px !important }
html.paint .mw-tb-coin{ filter:none !important; box-shadow:0 0 0 2px #000 }
html.paint .mw-tb-nav{ color:#000 !important; font-size:15px !important; padding:5px 12px; border-radius:999px }
html.paint .mw-tb-nav.on{ color:#fff !important; background:#000 }
html.paint #mw-tb-connect{ background:#2F54FA !important; color:#fff !important; border:2px solid #000 !important; border-radius:999px !important }
html.paint .mw-topbar{ background:#fff !important; border-bottom:3px solid #000 !important; backdrop-filter:none !important }
html.paint .mw-secnav{ background:#fff !important; border-bottom:3px solid #000 !important; backdrop-filter:none !important }
html.paint .mw-secnav a{ color:#000 !important; font-size:15px !important }
html.paint .mw-secnav a.on{ color:#2F54FA !important }
html.paint .mw-foot{ color:#000 !important; background:rgba(255,255,255,.88); border:3px solid #000; border-radius:18px; padding:16px 18px !important; margin:24px 12px 90px !important; font-size:13px !important }
html.paint .mw-foot a, html.paint .mw-foot .foot-fam a{ color:#000 !important }
html.paint .mw-foot .foot-credit a{ color:#2F54FA !important }
/* their page body becomes a card: standalone app pages and the /pro panes */
html.paint body.mw-has-secnav main, html.paint.mw-inpane main, html.paint:not(.mw-embed) #__next > div > main{
  background:#1F2227 !important; border:3px solid #000; border-radius:22px; box-shadow:5px 5px 0 #000;
  margin:12px !important; padding:14px !important; min-height:0 !important }
html.paint.mw-embed main{ background:transparent !important; border:0 !important; box-shadow:none !important; margin:0 !important }
/* the swap embed on /pro: transparent so the card sits on the page card */
html.paint.mw-embed, html.paint.mw-embed body, html.paint.mw-embed #__next{ background:transparent !important }
html.paint.mw-embed main .MuiPaper-root.MuiPaper-root{ border:0 !important; box-shadow:none !important }

/* ==== audit pass (2026-09-22): contrast, type size, targets, focus ==== */
/* values that read black on the dark cards: gradient-clipped text in Pro */
html.paint .tile .v, html.paint .bigpx, html.paint .medal, html.paint .card .v{
  color:#fff !important; -webkit-text-fill-color:#fff !important; background:none !important }
/* the fees tile keeps the board's own colour: orange on Bitcoin, violet on Solana */
html.paint:not(.sol) .tile .v.sol{ color:#f7a53c !important; -webkit-text-fill-color:#f7a53c !important }
html.paint.sol .tile .v.sol{ color:#c9a6ff !important; -webkit-text-fill-color:#c9a6ff !important }
/* light ink that survived on the white bands */
html.paint .idrow, html.paint .idrow *{ color:#000 !important; -webkit-text-fill-color:#000 !important; opacity:1 !important; filter:none !important }
html.paint footer, html.paint footer *, html.paint .mw-foot, html.paint .mw-foot *{ color:#000 !important }
html.paint footer a, html.paint .mw-foot a, html.paint footer .foot-credit a, html.paint .mw-foot .foot-credit a{ color:#2F54FA !important }
html.paint footer .foot-beta, html.paint footer .foot-beta b, html.paint .mw-foot .foot-beta, html.paint .mw-foot .foot-beta b{ color:#0b7a3b !important; font-size:13px !important }
html.paint footer, html.paint footer *, html.paint .mw-foot, html.paint .mw-foot *{ font-size:14px !important; line-height:1.7 !important }
html.paint footer .socials a, html.paint .mw-foot .socials a{ padding:8px !important; margin:-8px 0 !important }
/* the muted labels inside their app (Add, Income rate, Pay, Receive) */
html.paint .MuiTypography-body2.MuiTypography-body2, html.paint main .mw-lbl.mw-lbl{ color:#cfd4dc !important; font-size:14px !important }
/* small type: rail labels, chain switch, badges */
html.paint #mw-rail a{ font-size:11px !important }
html.paint #mw-rail-socials a{ padding:8px !important }
html.paint .chainsw .cs-lbl{ font-size:13px !important }
html.paint .mw-nexus, html.paint .mw-nexus b{ font-size:13px !important; color:#000 !important; background:#fff !important; border:2px solid #000; border-radius:999px }
/* targets: every link in the bars stands at least 34px tall */
html.paint .tnav, html.paint .uitg a, html.paint .chainsw a{ min-height:34px !important; display:inline-flex !important; align-items:center !important; padding:6px 12px !important }
@media (min-width:641px){ html.paint .mw-tb-nav{ min-height:34px !important; display:inline-flex !important; align-items:center !important; padding:6px 12px !important } }
@media (max-width:640px){ html.paint #mw-tb-connect{ padding:6px 12px !important; font-size:13px !important; min-height:34px !important; white-space:nowrap } }
html.paint .btn{ min-height:36px !important }
/* keyboard focus in the brand blue, on every page */
html.paint :focus-visible{ outline:3px solid #2F54FA !important; outline-offset:2px !important; border-radius:6px }
/* text fields keep the text cursor; everything else keeps the pencil */
html.paint input, html.paint textarea, html.paint [contenteditable]{ cursor:text !important }
/* audit pass 2: their page titles inherited black on the dark card; their
   12px table text; the shell's Connect; the credit lines wherever they sit */
html.paint main h1, html.paint main h2, html.paint main h3, html.paint main h4, html.paint main h5, html.paint main h6,
html.paint main .MuiTypography-h1, html.paint main .MuiTypography-h2, html.paint main .MuiTypography-h3, html.paint main .MuiTypography-h4, html.paint main .MuiTypography-h5, html.paint main .MuiTypography-h6{
  color:#fff !important; -webkit-text-fill-color:#fff !important; background:none !important }
html.paint main .MuiTypography-caption, html.paint main td, html.paint main th, html.paint main .MuiTableCell-root{ font-size:13px !important }
html.paint #mw-tb-connect{ min-height:36px !important; padding:6px 16px !important }
html.paint .foot-credit, html.paint .foot-credit a, html.paint .foot-fam a{ font-size:14px !important; line-height:2 !important; padding:4px 0 !important; display:inline-block }
html.paint #mw-tb-connect{ font-size:14px !important }
html.paint main .MuiChip-label, html.paint main .MuiChip-root{ font-size:13px !important }
/* the proxied pages' wrappers around <main> are full-height and dark in their
   CSS: transparent under Paint so the doodle shows around the content card,
   and the card itself sizes to its content instead of the viewport */
html.paint #__next, html.paint #__next > div, html.paint #__next :has(> main){ background:transparent !important; background-image:none !important }
html.paint body.mw-has-secnav main, html.paint.mw-inpane main{ flex:0 0 auto !important; height:auto !important; min-height:0 !important; margin:12px auto 24px !important; max-width:1440px }
/* their "trading" backdrop layers (a near-black sheet, a gradient overlay and
   the violet blobs, positioned absolute behind the page): off under Paint,
   the doodle is the backdrop */
html.paint .ds-bg-trading-base, html.paint .ds-bg-trading-overlay, html.paint .ds-blob-primary, html.paint .ds-interactive-blob,
html.paint [class*="ds-bg-"], html.paint [class*="ds-blob"]{ display:none !important }

/* =====================================================================
   Paint v2 (2026-09-23): paper cards, two typefaces, one header, calmer
   backgrounds on data pages, Pro's accents purged. Everything below
   overrides the dark-card rules above; still gated on html.paint.
   ===================================================================== */
html.paint{
  --paper:#FFFDF7; --paper2:#F3F0E6; --paper3:#E9E4D6; --ink:#141414; --ink-soft:#2f2f2f; --ink-mute:#5f5f5f;
  --surface:var(--paper); --surface2:var(--paper2); --edge:#000;
  --mint:#2F54FA; --cyan:#2F54FA; --violet:#2F54FA; --magenta:#2F54FA; --solana:#6b3fd6;
  --up:#12703d; --dn:#c0281f; --cta1:#2F54FA; --cta2:#2A85FF; --cta-ink:#fff;
  --hand:"MIM Classic","Comic MS","Comic Sans MS",cursive;
  --text:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --data:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --mono:var(--data); --sans:var(--text); --disp:var(--hand);
  --fs-label:12.5px; --fs-meta:14px; --fs-body:15px;
}
/* Two faces: hand alphabet = display; Plex Sans = reading; Plex Mono = figures. */
html.paint, html.paint *, html.paint *::before, html.paint *::after{ font-family:var(--text) !important; font-weight:inherit; letter-spacing:0 !important; text-transform:none !important }
html.paint body{ font-weight:400 }
html.paint td, html.paint th, html.paint .ms, html.paint .waddr, html.paint .addr, html.paint .runeid, html.paint .tile .runes, html.paint .MuiTableCell-root,
html.paint .MuiInputBase-input, html.paint .MuiInputBase-root, html.paint .pxband, html.paint .px-row, html.paint .stats, html.paint .tk, html.paint .runes{
  font-family:var(--data) !important; font-variant-numeric:tabular-nums }
html.paint h1, html.paint h2, html.paint h3, html.paint .card h2, html.paint .tnav, html.paint .btn, html.paint .uitg a, html.paint .tile .v, html.paint .bigpx,
html.paint .MuiButton-root, html.paint .MuiTab-root, html.paint .mw-tb-nav, html.paint .mw-tb-brand b, html.paint #mw-rail a, html.paint #mw-tabbar a,
html.paint .sec a, html.paint .tog a, html.paint .apps summary, html.paint .menu-btn summary, html.paint .menu a, html.paint .pgh-sub, html.paint .feeloop,
html.paint .chainsw .cs-lbl, html.paint .mw-tokchip *, html.paint .mw-secnav a, html.paint .cardtg, html.paint .viewtg, html.paint .pg-dots *, html.paint .MuiChip-label,
html.paint .card h2 *, html.paint #mw-tb-connect, html.paint .tip, html.paint .pow, html.paint .idrow *, html.paint .k, html.paint .tile .k{
  font-family:var(--hand) !important; font-weight:400 !important }
html.paint .card h2 .sub{ font-family:var(--text) !important; font-size:13px !important; color:var(--ink-mute) !important; text-transform:none !important }
/* Paper cards. Exceptions: .chartcard + .swapcard stay dark (scoped inks below). */
html.paint .card, html.paint .tile{ background:var(--paper) !important; color:var(--ink); border:3px solid #000 !important; border-radius:22px !important; box-shadow:5px 5px 0 #000 !important }
html.paint .chartcard, html.paint .swapcard, html.paint .solpane{ --ink:#e6edf7; --ink-soft:#d6d9e0; --ink-mute:#aeb4c0; --surface:#1F2227; --surface2:#0E1014; --edge:#3a3f47; --mint:#8fb4ff; --up:#3ddc97; --dn:#ff6b81; background:#1F2227 !important; color:#e6edf7 }
html.paint .card h2{ color:var(--ink) !important; font-size:17px !important }
html.paint .tile .v, html.paint .bigpx, html.paint .medal, html.paint .card .v{ color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important }
html.paint:not(.sol) .tile .v.sol{ color:#b85c00 !important; -webkit-text-fill-color:#b85c00 !important }
html.paint.sol .tile .v.sol{ color:#6b3fd6 !important; -webkit-text-fill-color:#6b3fd6 !important }
html.paint .tile{ padding:14px 16px !important; border-radius:18px !important; box-shadow:4px 4px 0 #000 !important }
html.paint .tile .k, html.paint .card h2 .sub, html.paint .idrow small{ color:var(--ink-mute) !important; font-size:14px !important }
html.paint .tile .v{ font-size:30px !important; line-height:1.1 !important; margin-top:4px !important }
html.paint .tile .runes, html.paint .note, html.paint .feeloop, html.paint .pgh-sub{ color:var(--ink-soft) !important; font-size:14px !important }
html.paint .MuiTypography-body2.MuiTypography-body2, html.paint main .mw-lbl.mw-lbl{ color:#cfd4dc !important }
/* Tables (ours only): header band, zebra rows, tabular figures. */
html.paint table:not(.MuiTable-root) th{ background:var(--paper3) !important; color:#222 !important; font-size:12.5px !important; border-bottom:2px solid #000 !important; padding:9px 10px !important }
html.paint table:not(.MuiTable-root) td{ color:var(--ink) !important; font-size:14.5px !important; padding:9px 10px !important; border-bottom:1px solid #e5e0d2 !important }
html.paint table:not(.MuiTable-root) tbody tr:nth-child(even) td{ background:#F7F4EC }
html.paint table:not(.MuiTable-root) td a{ color:#2F54FA !important; border-bottom-color:#2F54FA !important }
html.paint .chartcard th, html.paint .swapcard th{ background:#2a2e35 !important; color:#cfd4dc !important }
html.paint .chartcard td, html.paint .swapcard td{ color:#e6edf7 !important; border-bottom-color:#2a2e35 !important }
html.paint .chartcard tbody tr:nth-child(even) td{ background:#24272d }
html.paint .chartcard td a{ color:#8fb4ff !important; border-bottom-color:#8fb4ff !important }
/* One header: .idrow hidden; the sticky bar shows .sn-home. */
html.paint .idrow{ display:none !important }
html.paint .topbar .sn-home{ display:flex !important }
html.paint .topbar{ margin-top:0 !important }
/* Doodle: hero on /simple only; data pages: faded, under the bar. */
html.paint:not(.paint-hero):not(.mw-embed):not(.mw-inpane) body{ background:#fff linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)), url(/simple/doodle.jpg) center 56px / cover no-repeat fixed !important; background-image:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)),url(/simple/doodle.jpg) !important }
@media (max-width:640px){ html.paint:not(.paint-hero):not(.mw-embed):not(.mw-inpane) body{ background-image:linear-gradient(rgba(255,255,255,.84),rgba(255,255,255,.84)),url(/simple/doodle-mobile.jpg) !important; background-attachment:scroll !important } }
/* Pro accents out (mint, violet, cyan). */
html.paint .MuiTabs-indicator{ background-color:#8fb4ff !important }
html.paint .MuiTab-root.Mui-selected{ color:#fff !important }
html.paint .MuiTab-root .MuiChip-root, html.paint .MuiTab-root .MuiBadge-badge{ display:none !important }
/* "Order" is wrapped in a span (with a "New" tag beside it) where Swap and Limit are bare text: the reading-font
   rule caught the span and the tab came out in Plex at full size next to two hand-drawn words */
html.paint .MuiTab-root *{ font-family:var(--hand) !important; font-size:inherit !important }
/* same family of trap, audited 2026-09-23: a button whose label sits in a child span (Nexus's header nav,
   the pool pager's page numbers), and the "Powered by" link on /simple */
html.paint .MuiButton-root *:not(svg):not(svg *){ font-family:var(--hand) !important }
html.paint .pow a{ font-family:var(--hand) !important }
html.paint .MuiTab-root .MuiStack-root > .MuiTypography-root:not(:first-child){ display:none !important }
html.paint .tnav.on, html.paint .mw-tb-nav.on{ background:#000 !important; color:#fff !important }
html.paint .btn.primary, html.paint #mw-tb-connect{ background:#2F54FA !important; color:#fff !important; border:2px solid #000 !important }
/* Pills everywhere; 2px strokes on controls. */
html.paint .btn, html.paint .uitg, html.paint .chainsw, html.paint .apps summary, html.paint .tnav.on, html.paint .mw-tb-nav.on, html.paint #mw-tb-connect{ border-radius:999px !important }
html.paint .chainsw{ border-width:2px !important }
html.paint .uitg{ border-width:2px !important }
html.paint footer{ background:var(--paper) !important }
html.paint .mw-foot{ background:var(--paper) !important }
/* Leaderboard chips. */
html.paint .fresh, html.paint .upd, html.paint #upd{ background:var(--paper) !important; color:var(--ink) !important; border:2px solid #000 !important; border-radius:999px !important }
/* v2 follow-ups */
html.paint.mw-embed, html.paint.mw-embed body, html.paint.mw-embed #__next, html.paint.mw-inpane, html.paint.mw-inpane body{ background:transparent !important; background-image:none !important }
/* /leaders tiles keep the default stretch: the treasury tile (Referral fees earned by MagicSwap) has a row of its own since 2026-09-30,
   so a row of equal boxes no longer means four short tiles padded to its height */
html.paint .tile{ min-width:0 }
html.paint .tile .runes, html.paint .tile small{ overflow-wrap:break-word }
@media (max-width:720px){ html.paint .tile:first-child{ flex:1 1 100% !important } }
@media (max-width:640px){ html.paint .topbar .sn-home{ display:none !important } }
html.paint .MuiTableCell-root{ font-size:14px !important }

/* Hand-drawn family icons on the rail and the phone tab bar (Paint only).
   fam.js keeps ::before for the active bar, so the icon rides ::after and
   the item is stacked in reverse so it still sits above its label. */
html.paint #mw-rail a[data-app] svg, html.paint #mw-tabbar a[data-app] svg{ display:none !important }
html.paint #mw-rail a[data-app], html.paint #mw-tabbar a[data-app]{ flex-direction:column-reverse !important }
html.paint #mw-rail a[data-app]::after, html.paint #mw-tabbar a[data-app]::after{ content:""; display:block; width:26px; height:26px; background:center / contain no-repeat }
html.paint #mw-tabbar a[data-app]::after{ width:24px; height:24px }
html.paint #mw-rail a[data-app="swap"]::after, html.paint #mw-tabbar a[data-app="swap"]::after{ background-image:url(/simple/icons/swap.svg) }
html.paint #mw-rail a[data-app="markets"]::after, html.paint #mw-tabbar a[data-app="markets"]::after{ background-image:url(/simple/icons/markets.svg) }
html.paint #mw-rail a[data-app="home"]::after, html.paint #mw-tabbar a[data-app="home"]::after{ background-image:url(/simple/icons/home.svg) }
html.paint #mw-rail a[data-app="supply"]::after, html.paint #mw-tabbar a[data-app="supply"]::after{ background-image:url(/simple/icons/supply.svg) }
html.paint #mw-rail a[data-app="collection"]::after, html.paint #mw-tabbar a[data-app="collection"]::after{ background-image:url(/simple/icons/collection.svg) }
html.paint #mw-rail a[data-app]:not(.on)::after, html.paint #mw-tabbar a[data-app]:not(.on)::after{ opacity:.82 }
html.paint #mw-rail a[data-app]:hover::after{ opacity:1; transform:rotate(-6deg) }
/* Portfolio empty state: the tipped hat above the shell's Connect button, one line under it */
html.paint #mw-acct-connect{ background:#2F54FA !important; color:#fff !important; border:2px solid #000 !important; border-radius:999px !important; font-family:var(--hand) !important; font-size:16px !important; padding:10px 22px !important; overflow:visible !important }
/* desktop: the shell's note under their Connect button carries the hat */
html.paint #mw-acct-note{ font:15px/1.5 var(--hand) !important; color:#e6edf7 !important }
/* desktop: their Connect sits mid-void; the hat is drawn on the sentence's own line, ABOVE the button (translated up past it) */
html.paint #mw-acct-note::before{ content:""; position:absolute; left:50%; bottom:calc(100% + 62px); transform:translateX(-50%); width:190px; height:142px; background:url(/simple/icons/empty-wizard.svg) center / contain no-repeat; pointer-events:none }
html.paint #mw-acct-note{ position:relative }
/* phones and panes: their own sentence, stamped by the shell */
html.paint .mw-acct-empty{ font:16px/1.5 var(--hand) !important; color:#e6edf7 !important; padding-top:170px !important; position:relative; text-align:center }
html.paint .mw-acct-empty::before{ content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:210px; height:158px; background:url(/simple/icons/empty-wizard.svg) center / contain no-repeat }
html.paint .mw-acct-empty::after{ content:" Your MIM, pools and swaps show up here."; }
html.paint .mw-acct-cta{ position:relative; padding-top:150px !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:0 !important }
html.paint .mw-acct-cta::before{ content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:190px; height:142px; background:url(/simple/icons/empty-wizard.svg) center / contain no-repeat; pointer-events:none }
html.paint .mw-acct-cta::after{ content:"Nothing here yet. Connect a wallet to see your MIM, pools and swaps."; display:block; margin-top:12px; max-width:340px; font:15px/1.5 var(--hand) !important; color:#e6edf7; text-align:center }
html.paint .mw-acct-empty ~ .mw-acct-cta::before, html.paint .mw-acct-empty ~ .mw-acct-cta::after{ display:none }
/* shorter Nexus cards: their empty Portfolio table is a fixed 460px box,
   sized to its content once it only holds the empty state; and the page
   cards drop their outer padding */
html.paint main .MuiTableContainer-root:has(.mw-acct-cta), html.paint main .MuiTableContainer-root:has(.mw-acct-empty),
html.paint main .MuiTableContainer-root:has(.mw-acct-cta) > *, html.paint main .MuiTableContainer-root:has(.mw-acct-empty) > *{ height:auto !important; min-height:0 !important; max-height:none !important }
html.paint .mw-acct-cta{ padding-top:128px !important; padding-bottom:22px !important }
html.paint .mw-acct-cta::before{ width:170px; height:126px }
html.paint .mw-acct-empty{ padding-top:150px !important; padding-bottom:16px !important }
html.paint body.mw-has-secnav main, html.paint.mw-inpane main{ padding:8px 12px 10px !important; margin:10px auto 18px !important }
html.paint main > .MuiStack-root, html.paint main .MuiContainer-root{ padding-top:0 !important; padding-bottom:0 !important }
/* Pools form (standalone page and the /pro pane, never the swap embed): the
   two Add boxes carry 148px for 77px of content; hug the content instead */
html.paint body.mw-has-secnav main .MuiStack-root:has(> .MuiTypography-root:first-child):has(.MuiInputBase-input),
html.paint.mw-inpane main .MuiStack-root:has(> .MuiTypography-root:first-child):has(.MuiInputBase-input){
  height:auto !important; min-height:0 !important; padding:12px 16px !important; justify-content:flex-start !important; gap:8px !important }
html.paint body.mw-has-secnav main .MuiStack-root:has(> .MuiTypography-root:first-child):has(.MuiInputBase-input) > *,
html.paint.mw-inpane main .MuiStack-root:has(> .MuiTypography-root:first-child):has(.MuiInputBase-input) > *{ margin-top:0 !important }

/* Review 3 (2026-09-23): the sticky bar. One order on every page (leaders.html has the pill first in its DOM),
   the redrawn wordmark where Pro shows the coin, and on phones two rows: the four section words on top,
   the two switches under them, so "Leaderboard" is never cut. */
html.paint .topbar-in > .sn-home{ order:0 } html.paint .topbar-in > .tnav-links{ order:1 } html.paint .topbar-in > .you-pill{ order:2 }
html.paint .topbar-in > .chainsw{ order:3 } html.paint .topbar-in > .tb-right, html.paint .topbar-in > .uitg{ order:4 }
html.paint .topbar-in > .uitg{ margin-left:0 }
html.paint .topbar .sn-home{ display:flex !important; width:106px; height:42px; flex:none; background:url(/simple/wordmark-paint.png) left center / contain no-repeat; margin-right:6px }
html.paint .topbar .sn-home img{ display:none !important }
/* tablets: the bar is tight, the mark alone stands for the brand */
@media (max-width:1023px){ html.paint .topbar .sn-home{ width:36px; height:36px; background-image:url(/simple/mark.png); margin-right:2px } }
@media (max-width:640px){
  html.paint .topbar .sn-home{ display:none !important }
  html.paint .topbar-in{ flex-wrap:wrap !important; row-gap:0 !important; column-gap:8px !important }
  html.paint .topbar-in > .tnav-links{ flex:1 1 100% !important; order:1; justify-content:space-between; padding-bottom:2px }
  html.paint .tnav{ font-size:15px !important; padding:5px 9px !important; min-height:36px !important }
  html.paint .topbar-in > .chainsw{ margin-left:0 !important; margin-bottom:8px }
  html.paint .topbar-in > .tb-right, html.paint .topbar-in > .uitg{ margin-left:auto !important; margin-bottom:8px }
}
/* the ticker exists at every width: Pro hides it between 769 and 1023px */
@media (min-width:769px) and (max-width:1023px){
  html.paint #ticker{ display:flex !important; margin:0 0 12px !important; padding:8px 14px !important; background:var(--paper) !important; border:2px solid #000 !important; border-radius:999px !important; color:var(--ink-soft) !important }
  html.paint #ticker b{ color:var(--ink) !important }
}
/* tablets: Nexus's table already scrolls sideways in the frame, but a header label sits in a 45px flex
   box with pre-wrap and "Volume" stacks one letter per line; header words stay on one line */
@media (min-width:641px) and (max-width:1023px){
  html.paint .MuiTableContainer-root{ overflow-x:auto !important }
  html.paint .MuiTableCell-head, html.paint .MuiTableCell-head *{ white-space:nowrap !important }
}
/* phones, inside the Portfolio pane: the shell veils Nexus's sentence, floats its own Connect at the top of that box
   and appends its note BELOW the frame, so the hat drawn on the note was never in view (blank on iOS, stray on Android).
   The hat rides the veiled sentence's own box instead, under the button: visibility on the pseudo-element beats the veil. */
@media (max-width:640px){
  html.paint.mw-inpane .mw-acct-empty::before{ visibility:visible !important; top:64px; width:190px; height:142px }
  html.paint.mw-inpane #mw-acct-note::before{ display:none !important }
}
/* /sol: the pools and portfolio cards are data cards, not the Jupiter pane; under Paint they are paper like every
   other table (their dark reading left white ink on the paper zebra rows) */
html.paint #sol-pools-card, html.paint #sol-port-card{ --ink:#141414; --ink-soft:#2f2f2f; --ink-mute:#5f5f5f; --surface:var(--paper); --surface2:var(--paper2); --edge:#000; --mint:#178a4c; --up:#178a4c; --dn:#c9302c; background:var(--paper) !important; color:var(--ink) !important }
html.paint #sol-pools-card h2, html.paint #sol-port-card h2{ color:var(--ink) !important }
html.paint #sol-pools-card .sub, html.paint #sol-port-card .sub{ color:var(--ink-mute) !important }

/* =====================================================================
   Paint v3 (2026-10-03): the magicswap.ink grammar on the doodle ground.
   One alphabet (MIM Classic for everything, figures included), hairlines
   instead of marker outlines and hard shadows, one action colour (Bitcoin
   orange), wizard blue only for "where you are", the MAGIC•SWAP logotype
   drawn as text on the existing home link, the price strip as a quiet
   band, the 2013 wizard beside the /simple card. Skin only: no element is
   added or moved, every rule is gated on html.paint, and everything below
   overrides v1/v2 above so their traps stay fixed. Pro never sees a line.
   ===================================================================== */
html.paint{
  --paper:#FFFDF7; --paper2:#F6F3EA; --paper3:#ECE7D9;
  --ink:#141414; --ink-soft:#3a3a3a; --ink-mute:#6b6b6b;
  --line:rgba(20,20,20,.14); --line-2:rgba(20,20,20,.26);
  --night:#12101c; --night-well:#0d0b16; --night-raise:#1a1727; --night-line:rgba(255,255,255,.09);
  --orange:#F7931A; --orange-2:#FFA733; --orange-ink:#1a0f00; --blue:#2F54FA; --blue-soft:#8fb4ff;
  --up:#12703d; --dn:#c0281f;
  --text:var(--hand); --data:var(--hand); --mono:var(--hand); --sans:var(--hand); --disp:var(--hand);
  --cta1:var(--orange); --cta2:var(--orange-2); --cta-ink:var(--orange-ink);
  --mw-cta1:var(--orange); --mw-cta2:var(--orange-2); --mw-cta-ink:var(--orange-ink);
  --mint:var(--blue); --cyan:var(--blue); --violet:var(--blue); --magenta:var(--blue);
  --mw-cyan:var(--blue-soft); --mw-violet:var(--blue-soft); --mw-magenta:var(--blue-soft);
  --edge:var(--line); --surface:var(--paper); --surface2:var(--paper2);
  --mw-surface:var(--night); --mw-surface2:var(--night-well); --mw-edge:var(--night-line);
  --jupiter-plugin-primary:247,147,26;
  --fs-label:14px; --fs-meta:15px; --fs-body:16px;
}
/* one alphabet, one weight: the hand face has no bold, so nothing may ask for one */
html.paint, html.paint *, html.paint *::before, html.paint *::after{ font-family:var(--hand) !important; font-weight:400 !important; letter-spacing:.02em !important; text-transform:none !important }
html.paint body{ font-size:16px; line-height:1.55 }
html.paint :focus-visible{ outline:2px solid var(--orange) !important; outline-offset:3px !important; border-radius:8px }

/* ---- the sticky bar: paper, one hairline, the rail as one pill group ---- */
html.paint .topbar{ background:rgba(255,253,247,.9) !important; backdrop-filter:blur(12px) !important; border-bottom:1px solid var(--line) !important }
html.paint .topbar-in{ gap:16px !important }
html.paint .tnav-links{ flex:0 0 auto !important; gap:2px !important; padding:4px !important; margin:0 auto; background:var(--paper2); border:1px solid var(--line); border-radius:13px; overflow:visible !important; -webkit-mask-image:none !important; mask-image:none !important }
html.paint .tnav{ font-size:17px !important; color:var(--ink-mute) !important; padding:6px 14px 6px 12px !important; border-radius:9px !important; min-height:34px !important; transition:background .15s,color .15s }
html.paint .tnav:hover{ color:var(--ink) !important; background:rgba(20,20,20,.04) !important }
html.paint .tnav.on{ color:var(--blue) !important; background:#fff !important; box-shadow:inset 0 0 0 1px var(--line) }
/* the logotype: MAGIC, the orange dot, SWAP, in the hand alphabet, on the link that already exists */
html.paint .topbar .sn-home{ display:inline-flex !important; align-items:center; width:auto !important; height:auto !important; background:none !important; margin-right:6px !important; color:var(--ink) !important; font-size:26px; line-height:1; letter-spacing:.04em !important; text-decoration:none; white-space:nowrap }
html.paint .topbar .sn-home::before{ content:"MAGIC" }
html.paint .topbar .sn-home::after{ content:"SWAP"; padding-left:.56em; background:radial-gradient(circle at .21em 54%, var(--orange) .13em, transparent calc(.13em + .6px)) no-repeat }
@media (max-width:1023px){ html.paint .topbar .sn-home{ font-size:22px; width:auto !important; height:auto !important; background:none !important } }
/* the two switches and the buttons: hairline pills, orange for the one action */
html.paint .uitg, html.paint .chainsw{ border:1px solid var(--line) !important; border-radius:11px !important; background:var(--paper2) !important; padding:3px !important; gap:2px; overflow:visible !important }
html.paint .uitg a, html.paint .chainsw a{ color:var(--ink-mute) !important; font-size:14px !important; padding:5px 11px !important; border-radius:8px !important; min-height:30px !important; border-left:0 !important }
html.paint .uitg a.paint{ background:#fff !important; color:var(--blue) !important; box-shadow:inset 0 0 0 1px var(--line) }
html.paint .uitg a.pro{ background:transparent !important }
html.paint .chainsw a:hover{ background:rgba(20,20,20,.04) !important }
html.paint .chainsw .cs-lbl{ font-size:14px !important }
html.paint .btn{ border:1px solid var(--line-2) !important; border-radius:10px !important; background:var(--paper) !important; color:var(--ink) !important; font-size:15px !important; min-height:36px !important; box-shadow:none !important }
html.paint .btn:hover{ border-color:var(--ink) !important; filter:none !important }
html.paint .btn.primary, html.paint #mw-tb-connect, html.paint #mw-acct-connect{ background:var(--orange) !important; color:var(--orange-ink) !important; border:0 !important; border-radius:10px !important; font-size:16px !important }
html.paint .btn.primary:hover, html.paint #mw-tb-connect:hover, html.paint #mw-acct-connect:hover{ background:var(--orange-2) !important; filter:none !important }
html.paint .apps summary{ border:1px solid var(--line) !important; border-radius:10px !important; background:var(--paper) !important; color:var(--ink) !important; padding:6px 12px !important; font-size:15px !important; box-shadow:none !important }
html.paint .apps[open] summary{ background:var(--ink) !important; color:#fff !important }
html.paint .apps-menu{ background:var(--paper) !important; border:1px solid var(--line-2) !important; border-radius:14px !important; box-shadow:0 18px 40px -16px rgba(20,20,20,.35) !important }
html.paint .apps-menu a{ color:var(--ink) !important; font-size:16px !important }
html.paint .apps-menu a i{ border:0 !important }
html.paint .you-pill{ border:1px solid var(--line) !important; border-radius:10px !important; background:var(--paper) !important; color:var(--ink) !important; box-shadow:none !important }

/* ---- surfaces: paper cards on a hairline with a soft shadow; the chart and the swap module stay night ---- */
html.paint .card, html.paint .tile{ background:var(--paper) !important; color:var(--ink); border:1px solid var(--line) !important; border-radius:16px !important; box-shadow:0 1px 2px rgba(20,20,20,.04), 0 16px 40px -22px rgba(20,20,20,.28) !important }
html.paint .tile{ border-radius:12px !important; padding:15px 18px 16px !important }
html.paint .card h2{ font-size:20px !important; color:var(--ink) !important; letter-spacing:.02em !important }
html.paint .card h2 .sub{ font-size:14px !important; color:var(--ink-mute) !important }
html.paint .tile .k, html.paint .idrow small{ font-size:14px !important; color:var(--ink-mute) !important }
html.paint .tile .v{ font-size:30px !important; line-height:1.2 !important }
html.paint .tile .runes, html.paint .note, html.paint .feeloop, html.paint .pgh-sub, html.paint .lede{ font-size:15px !important; color:var(--ink-soft) !important }
html.paint .pgh-sub, html.paint .feeloop, html.paint .lede{ background:transparent !important; border:0 !important; padding:0 !important }
html.paint .chartcard, html.paint .swapcard{ --ink:#f2f0fa; --ink-soft:#b9b5cc; --ink-mute:#9a96b0; --surface:var(--night); --surface2:var(--night-well); --edge:var(--night-line); --mint:#b9b5cc; --up:#5ccf8a; --dn:#f0627a; background:var(--night) !important; color:#f2f0fa; border:1px solid var(--night-line) !important; box-shadow:0 24px 48px -28px rgba(0,0,0,.6) !important }
html.paint .chartcard .ctl button, html.paint .pager button, html.paint .viewtg button, html.paint .cardtg{ border-radius:8px !important; box-shadow:none !important; font-size:14px !important }
html.paint .chartcard .ctl button.on, html.paint .pager button.on{ color:#f2f0fa !important; border-color:rgba(255,255,255,.3) !important; background:var(--night-raise) !important; box-shadow:none !important }
html.paint .ms{ font-size:14px !important; color:var(--ink-mute) !important }
html.paint .ms b{ font-size:16px !important }
html.paint .bigpx{ font-size:26px !important }
/* tables, ours: a ledger. Mute header on a hairline, hairline rows, hover, no band, no zebra. */
html.paint table:not(.MuiTable-root) th{ background:transparent !important; color:var(--ink-mute) !important; font-size:14px !important; border-bottom:1px solid var(--line) !important; padding:10px 8px !important }
html.paint table:not(.MuiTable-root) td{ color:var(--ink) !important; font-size:15px !important; padding:12px 8px !important; border-bottom:1px solid var(--line) !important }
html.paint table:not(.MuiTable-root) tbody tr:nth-child(even) td{ background:transparent !important }
html.paint table:not(.MuiTable-root) tbody tr:hover td{ background:rgba(20,20,20,.03) !important }
html.paint table:not(.MuiTable-root) td a{ color:var(--ink-soft) !important; border-bottom-color:var(--line-2) !important }
html.paint .chartcard th, html.paint .swapcard th{ background:transparent !important; color:#9a96b0 !important; border-bottom-color:var(--night-line) !important }
html.paint .chartcard td, html.paint .swapcard td{ color:#f2f0fa !important; border-bottom-color:var(--night-line) !important }
html.paint .chartcard tbody tr:nth-child(even) td{ background:transparent !important }
html.paint .chartcard tbody tr:hover td{ background:rgba(255,255,255,.03) !important }
html.paint .chartcard td a{ color:#b9b5cc !important; border-bottom-color:rgba(255,255,255,.3) !important }
/* the price strip: a quiet band, mute labels, ink figures, a ghost dot between coins */
html.paint #ticker{ display:flex !important; gap:0 !important; margin:0 0 12px !important; padding:0 2px 8px !important; background:transparent !important; border:0 !important; border-bottom:1px solid var(--line) !important; border-radius:0 !important; color:var(--ink-mute) !important; font-size:14px !important; white-space:nowrap }
html.paint #ticker .tk{ gap:7px !important; padding-right:14px }
html.paint #ticker .tk + .tk::before{ content:""; width:3px; height:3px; border-radius:50%; background:var(--line-2); margin-right:10px }
html.paint #ticker b{ color:var(--ink) !important }
html.paint #ticker img{ width:16px !important; height:16px !important }
@media (max-width:768px){ html.paint #ticker{ margin:0 0 12px !important; padding:8px 2px !important; background:transparent !important } }
/* the leaderboard chips and the freshness labels */
html.paint .fresh, html.paint .upd, html.paint #upd, html.paint .chip, html.paint .mw-nexus{ background:var(--paper) !important; color:var(--ink-mute) !important; border:1px solid var(--line) !important; border-radius:9px !important; font-size:13.5px !important; box-shadow:none !important }
html.paint .mw-nexus b{ color:var(--ink) !important; border:0 !important; background:none !important }
/* the footer: a hairline over mute words, no box */
html.paint footer, html.paint .mw-foot{ background:transparent !important; border:0 !important; border-top:1px solid var(--line) !important; border-radius:0 !important; padding:16px 0 22px !important; margin-top:26px !important; color:var(--ink-mute) !important }
html.paint .mw-foot{ margin:24px 12px 90px !important; padding:16px 6px 10px !important }
html.paint footer, html.paint footer *, html.paint .mw-foot, html.paint .mw-foot *{ color:var(--ink-mute) !important; font-size:14px !important; line-height:1.7 !important }
html.paint footer a, html.paint .mw-foot a, html.paint footer .foot-credit a, html.paint .mw-foot .foot-credit a, html.paint footer b{ color:var(--ink-soft) !important }
html.paint footer .foot-beta, html.paint footer .foot-beta b, html.paint .mw-foot .foot-beta, html.paint .mw-foot .foot-beta b{ color:var(--up) !important }
/* the family rail and the phone tab bar */
html.paint #mw-rail{ background:var(--paper) !important; border-right:1px solid var(--line) !important }
html.paint #mw-rail a, html.paint #mw-rail-socials a{ color:var(--ink-mute) !important }
html.paint #mw-rail a.on{ color:var(--blue) !important }
html.paint #mw-rail a.on::before{ background:var(--blue) !important; width:3px !important }
html.paint #mw-rail .mw-rail-coin{ box-shadow:none !important }
html.paint #mw-tabbar{ background:rgba(255,253,247,.96) !important; border-top:1px solid var(--line) !important }
html.paint #mw-tabbar a{ color:var(--ink-mute) !important }
html.paint #mw-tabbar a.on{ color:var(--blue) !important }

/* ---- the proxied Nexus pages and panes ---- */
html.paint .MuiAppBar-root.MuiAppBar-root, html.paint header.MuiPaper-root, html.paint .mw-topbar, html.paint .mw-secnav{ background:rgba(255,253,247,.92) !important; border-bottom:1px solid var(--line) !important; backdrop-filter:blur(12px) !important; box-shadow:none !important }
html.paint .mw-tb-brand b{ font-size:0 !important; display:inline-flex !important; align-items:center; color:var(--ink) !important; filter:none !important }
html.paint .mw-tb-brand b::before{ content:"MAGIC"; font-size:22px; line-height:1; letter-spacing:.04em !important }
html.paint .mw-tb-brand b::after{ content:"SWAP"; font-size:22px; line-height:1; letter-spacing:.04em !important; padding-left:.56em; background:radial-gradient(circle at .21em 54%, var(--orange) .13em, transparent calc(.13em + .6px)) no-repeat }
html.paint .mw-tb-coin{ box-shadow:none !important }
html.paint .mw-tb-nav{ color:var(--ink-mute) !important; font-size:16px !important; border-radius:9px !important }
html.paint .mw-tb-nav.on{ color:var(--blue) !important; background:#fff !important; box-shadow:inset 0 0 0 1px var(--line) }
html.paint .mw-secnav a{ color:var(--ink-mute) !important; font-size:16px !important }
html.paint .mw-secnav a.on{ color:var(--blue) !important }
html.paint body.mw-has-secnav main, html.paint.mw-inpane main, html.paint:not(.mw-embed) #__next > div > main{ background:var(--night) !important; border:1px solid var(--night-line) !important; border-radius:16px !important; box-shadow:0 24px 48px -28px rgba(0,0,0,.6) !important }
html.paint main .MuiPaper-root.MuiPaper-root, html.paint main .MuiCard-root{ border:1px solid var(--night-line) !important; box-shadow:none !important; border-radius:14px !important }
html.paint .MuiButton-contained.MuiButton-contained.MuiButton-contained.MuiButton-contained{ background:var(--orange, #F7931A) !important; background-image:none !important; color:#1a0f00 !important; border-radius:12px !important; box-shadow:none !important; font-size:17px !important; letter-spacing:.03em !important }
html.paint .MuiButton-contained.MuiButton-contained.MuiButton-contained.MuiButton-contained:hover{ background:#FFA733 !important }
html.paint .MuiButton-contained.MuiButton-contained.MuiButton-contained.MuiButton-contained.Mui-disabled{ background:#2a2016 !important; color:#8a7d6a !important }
html.paint .MuiTabs-indicator{ background-color:var(--blue-soft, #8fb4ff) !important }
html.paint .MuiTypography-body2.MuiTypography-body2, html.paint main .mw-lbl.mw-lbl{ color:#a9a5bf !important; font-size:14.5px !important }
html.paint main .MuiTypography-caption, html.paint main td, html.paint main th, html.paint main .MuiTableCell-root{ font-size:14px !important }
html.paint #mw-acct-note, html.paint .mw-acct-empty, html.paint .mw-acct-cta::after{ color:#b9b5cc !important }
/* the /simple embed: one night block inside the paper card */
html.paint.mw-embed.mw-embed.mw-embed main{ background:#12101c !important; border-radius:14px !important }

/* ---- /simple: the Paint swap home ---- */
html.paint.paint-hero .top{ position:sticky; top:0; z-index:6; background:rgba(255,253,247,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line) }
html.paint.paint-hero .brand{ gap:0 !important }
html.paint.paint-hero .brand img.word{ display:none !important }
html.paint.paint-hero .brand img.mark{ box-shadow:none !important; width:30px !important; height:30px !important; order:0; margin-right:10px }
html.paint.paint-hero .brand::before{ content:"MAGIC"; order:1; font-size:26px; line-height:1; letter-spacing:.04em !important; color:var(--ink) }
html.paint.paint-hero .brand::after{ content:"SWAP"; order:2; font-size:26px; line-height:1; letter-spacing:.04em !important; color:var(--ink); padding-left:.56em; background:radial-gradient(circle at .21em 54%, var(--orange) .13em, transparent calc(.13em + .6px)) no-repeat }
html.paint.paint-hero .sec{ background:var(--paper2) !important; border:1px solid var(--line) !important; border-radius:13px !important; padding:4px !important; gap:2px !important }
html.paint.paint-hero .sec a{ font-size:17px !important; color:var(--ink-mute) !important; padding:6px 14px 6px 12px !important; border-radius:9px !important; min-height:34px !important }
html.paint.paint-hero .sec a.on{ background:#fff !important; color:var(--blue) !important; box-shadow:inset 0 0 0 1px var(--line) }
html.paint.paint-hero .sec a:not(.on):hover{ background:rgba(20,20,20,.04) !important; color:var(--ink) !important }
html.paint.paint-hero .tog{ background:var(--paper2) !important; border:1px solid var(--line) !important; border-radius:11px !important; padding:3px !important; box-shadow:none !important; gap:2px !important }
html.paint.paint-hero .tog a{ color:var(--ink-mute) !important; font-size:14px !important; padding:5px 11px !important; border-radius:8px !important; min-height:30px !important }
html.paint.paint-hero .tog a.on{ background:#fff !important; color:var(--blue) !important; box-shadow:inset 0 0 0 1px var(--line) }
html.paint.paint-hero .tog a:not(.on):hover{ color:var(--ink) !important }
html.paint.paint-hero .apps summary, html.paint.paint-hero .menu-btn summary{ border:1px solid var(--line) !important; border-radius:10px !important; background:var(--paper) !important; color:var(--ink) !important; font-size:15px !important }
html.paint.paint-hero .apps[open] summary, html.paint.paint-hero .menu-btn[open] summary{ background:var(--ink) !important; color:#fff !important }
html.paint.paint-hero .menu{ background:var(--paper) !important; border:1px solid var(--line-2) !important; border-radius:14px !important; box-shadow:0 18px 40px -16px rgba(20,20,20,.35) !important }
html.paint.paint-hero .menu a{ font-size:16px !important; color:var(--ink) !important }
html.paint.paint-hero .menu a i{ border:0 !important }
html.paint.paint-hero .menu b{ color:var(--ink-mute) !important; font-size:13px !important }
html.paint.paint-hero .card{ background:var(--paper) !important; border:1px solid var(--line) !important; border-radius:18px !important; box-shadow:0 1px 2px rgba(20,20,20,.04), 0 28px 56px -26px rgba(20,20,20,.4) !important; position:relative }
html.paint.paint-hero .pow{ color:var(--ink-mute) !important; font-size:14px !important }
html.paint.paint-hero .pow a{ color:var(--ink-soft) !important }
html.paint.paint-hero .px, html.paint.paint-hero .tip{ background:var(--paper) !important; border:1px solid var(--line) !important; border-radius:12px !important; font-size:15px !important; color:var(--ink) !important; box-shadow:0 12px 32px -20px rgba(20,20,20,.3) }
html.paint.paint-hero .px a, html.paint.paint-hero .tip a{ color:var(--ink-soft) !important }
html.paint.paint-hero .px .up{ color:var(--up) !important } html.paint.paint-hero .px .dn{ color:var(--dn) !important }
/* no wizard beside the card: the doodle is the artwork here (Franky, 2026-10-03, "it clutters the doodle") */

/* ---- phones ---- */
@media (max-width:640px){
  /* the bar keeps two rows: the four section words on top, then the logotype left and the two switches right */
  html.paint .topbar-in > .tnav-links{ flex:1 1 100% !important; margin:0 0 8px !important; justify-content:space-between }
  html.paint .topbar .sn-home{ display:inline-flex !important; order:2; font-size:20px; margin:0 auto 8px 0 !important }
  html.paint .topbar-in > .chainsw{ margin-left:0 !important }
  html.paint .tnav{ font-size:15px !important; padding:6px 8px !important; min-height:34px !important }
  html.paint .uitg a, html.paint .chainsw a{ padding:5px 9px !important; font-size:13px !important }
  html.paint.paint-hero .brand::before, html.paint.paint-hero .brand::after{ font-size:22px }
  html.paint.paint-hero .tog a{ padding:5px 9px !important; font-size:13px !important }
}