/* =====================================================================================================================================
   AETHEL v2 — full redesign (owner 2026-10-18: "redesign everything, not just the colors ... box types, layouts, how wallet looks, how side
   bars look ... change logo, ill give colors later"). Loaded after style.css and wins over it.
   ALL COLOURS ARE THE TOKENS BELOW: to recolour the site, change only this block.
   ===================================================================================================================================== */
:root{
  /* "Calm Trench" palette (owner 2026-10-18) */
  --navh:64px; --tickh:34px; --tabh:64px;
  --bg:#050608;          /* Main background: near black (Platinum, 2026-10-24) */
  --card:#0f131a;        /* Card / surface background (rich navy charcoal) */
  --card2:#161b24;       /* fields, rows on hover, segmented controls (a step lighter navy) */
  --card3:#1d232e;       /* the selected segment, pressed */
  --line:rgba(71,85,105,.32);   /* borders: muted deep ocean slate #475569, as thin lines */
  --line2:rgba(71,85,105,.6);
  --t1:#f1f5f9;          /* Primary text (crisp ice white) */
  --t2:#94a3b8;          /* secondary text (slate, between ice white and the muted slate) */
  --t3:#64748b;          /* labels, hints: one step lighter than #475569 so small text stays readable */
  --muted:#475569;       /* Muted text / borders (deep ocean slate) */
  --acc:#f1f5f9;         /* Primary accent: platinum white (like Aethel Wallet): main buttons, links, highlights */
  --acc2:#94a3b8;        /* Secondary accent: silver */
  --accink:#050608;      /* text on the accent */
  --accsoft:rgba(226,232,240,.12);
  --up:#2fc690; --dn:#f25c6c; --am:#f5a524;   /* gains / losses / warnings stay green / red / amber */
  --r1:24px; --r2:18px; --r3:12px; --r4:9px;
  --shadow:0 24px 64px -12px rgba(0,0,0,.6);
  --font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* the old names used all over style.css follow the tokens */
  /* (plain values, not var(): js/tvchart.js reads them as colours) — keep equal to the tokens above */
  --pn:#0f131a; --bd:rgba(71,85,105,.6); --tx:#94a3b8; --mu:#64748b; --bl:#f1f5f9; --ac:#f1f5f9;
}
html{background:var(--bg)!important;background-image:none!important}
body{background:var(--bg);color:var(--t2);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body #menu,body #app{background:var(--bg)!important;background-image:none!important}
/* no glows, no dotted pattern: flat, calm surfaces */
body #bgfx,body #menu::before,body #menu::after,body #orbs,body .hgrid{display:none!important}
h1,h2,h3{font-family:var(--font);letter-spacing:-.02em;color:var(--t1)}
::selection{background:var(--accsoft);color:var(--t1)}

/* ============================== top bar (every page) ============================== */
body #topbar{position:fixed;top:0!important;left:0!important;right:0;height:var(--navh);z-index:60;display:flex;align-items:center;gap:6px;padding:0 20px;
  background:var(--bg)!important;border-bottom:1px solid var(--line)!important;pointer-events:auto;justify-content:flex-start;box-shadow:none!important}
body #topbar>*{pointer-events:auto}
body #topbar .tleft{display:flex!important;flex-direction:row;align-items:center;gap:8px;margin:0;width:auto!important;flex:none}
body #topbar .homelogo{display:flex;align-items:center;gap:10px;width:auto!important;min-width:0;height:40px;flex:none;padding:0 10px 0 4px;border-radius:var(--r3);text-decoration:none;color:var(--t1)}
body #topbar .homelogo img{width:28px;height:28px;display:block}
body #topbar .tword{font:700 18px/1 var(--font);letter-spacing:-.03em;color:var(--t1)}
body #topbar #hbtn{display:none}
body #tnav{display:flex;align-items:center;gap:2px;margin-left:14px}
body #tnav button{height:38px;padding:0 14px;border:0;border-radius:var(--r3);background:transparent;color:var(--t3);font:500 14.5px var(--font);cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:color .15s,background .15s}
body #tnav button:hover{color:var(--t1);background:var(--card)}
body #tnav button.on{color:var(--t1);background:var(--card2)}
body #tnav .tnchev{opacity:.7;transition:transform .2s}
body #tnav button.on .tnchev{transform:rotate(180deg)}
body #topbar #srbtn{margin-left:auto;width:min(300px,26vw);height:40px;display:flex;align-items:center;gap:10px;padding:0 10px 0 14px;border:1px solid var(--line);border-radius:var(--r3);background:var(--card);color:var(--t3);font:500 14px var(--font);cursor:text;transition:border-color .15s}
body #topbar #srbtn:hover{border-color:var(--line2);color:var(--t2)}
body #topbar #srbtn .srtx{flex:1;text-align:left}
body #topbar #srbtn kbd{font:600 11px var(--font);color:var(--t3);background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:3px 6px}
body #topbar #dlbtn{display:inline-grid!important;place-items:center;width:40px;height:40px;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r3);background:var(--card);color:var(--t2);opacity:1!important;visibility:visible!important;transform:none!important}
body #topbar #dlbtn:hover{color:var(--t1);border-color:var(--line2)}
body #topbar #dlbtn svg{width:19px;height:19px}
/* wallet button: Connect = the accent; connected = balance + address in one slim pill (no corner card any more) */
body #topbar #wbtn{margin:0!important;height:40px;min-width:0!important;width:auto!important;padding:0 18px;border:0;border-radius:var(--r3);background:var(--acc);color:var(--accink);font:600 14.5px var(--font);letter-spacing:0;text-transform:none;box-shadow:none;cursor:pointer;-webkit-backdrop-filter:none;backdrop-filter:none}
body #topbar #wbtn:hover{filter:brightness(1.06)}
body #topbar #wbtn.wcon{display:inline-flex!important;align-items:center;gap:10px;padding:0 6px 0 14px!important;background:var(--card)!important;border:1px solid var(--line)!important;color:var(--t1);border-radius:var(--r3)!important}
body #topbar #wbtn.wcon:hover{border-color:var(--line2)!important;filter:none}
body #topbar #wbtn.wcon .wtx{display:flex!important;flex-direction:row!important;align-items:center;gap:10px}
body #topbar #wbtn.wcon .wnw{order:1;font:700 15px var(--font)!important;color:var(--t1);letter-spacing:-.01em}
body #topbar #wbtn.wcon .wnw small{font-size:.8em;color:var(--t3)}
body #topbar #wbtn.wcon .wchgl{order:2;display:flex!important;gap:6px}
body #topbar #wbtn.wcon .wchg{font:600 12.5px var(--font)!important;display:inline!important}
body #topbar #wbtn.wcon .wchg.wchgd{display:none!important}
body #topbar #wbtn.wcon .wadr{order:3;display:inline-block!important;font:600 12.5px var(--font)!important;color:var(--t2);background:var(--card2);border-radius:var(--r4);padding:6px 9px;letter-spacing:0}
body #topbar #wbtn.wcon .wspk,body #topbar #wbtn.wcon .wdot{display:none!important}

/* the coin page had its own copies of these buttons: the top bar now has them on every page */
body #app #hbtn2,body #app #wbtn2,body #app #dlbtn2,body #app #srbtn2{display:none!important}

/* ============================== page offsets ============================== */
body #menu{padding-top:0}
body #menu>.wrap:not(.sect),body #rlpg.rlpg,body #pfpg.pfpg,body #chpg.chpg,body #uwpg.uwpg,body #swappg.swappg,body #predict.predict{padding-top:calc(var(--navh) + 28px)!important}
body #app{padding-top:calc(var(--navh) + 18px)!important}
body.dock #menu,body.dock #app{margin-left:0!important}
body #markets,body #news,body #events,body .ruled{scroll-margin-top:calc(var(--navh) + 20px)}

/* ============================== price ticker (front page only), right under the top bar ============================== */
body .ticker{position:fixed;top:var(--navh)!important;left:0;right:0;height:var(--tickh);z-index:55;display:flex;align-items:center;border:0;border-bottom:1px solid var(--line);background:var(--bg)}
body .ticker .tk{background:transparent!important;font:500 12.5px var(--font);color:var(--t2)}

/* ============================== "More" menu (drop-down on wide screens, slide-in panel on phones) ============================== */
body .hmenu{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);padding:10px;top:0;width:min(300px,86vw)}
body .hmenu.hmdrop{top:calc(var(--navh) - 4px)!important;bottom:auto;width:260px;max-height:calc(100vh - var(--navh) - 20px);overflow:auto;border-radius:var(--r2);animation:v2drop .16s ease-out both}
body .hmenu.hmdrop .hmhead,body .hmenu.hmdrop .hmsearch{display:none}
body .hmenu .hmcat{font:600 11px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding:12px 10px 6px}
body .hmenu .hmi{height:40px;border-radius:var(--r4);padding:0 10px;gap:12px;color:var(--t2);font:500 14px var(--font);background:transparent;border:0}
body .hmenu .hmi:hover{background:var(--card2);color:var(--t1)}
body .hmenu .hmi.on{background:var(--accsoft);color:var(--acc)}
body .hmenu .hmico{width:18px;height:18px;opacity:.85}
@media (min-width:900px){body .hscrim{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
@keyframes v2drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============================== shared building blocks ============================== */
/* boxes: one flat card style everywhere */
body .qswap,body .hside,body .pn,body .mtable,body .pmcard,body .pmmcard,body #wpanel,body .cmenu,body .cgp,body .pnlbox,body .rlbox,body .rlchart,body .tkx,body #scard,body .fvpn,body #side{
  background:var(--card)!important;border:1px solid var(--line)!important;border-radius:var(--r2)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body .qsh b,body .pn>h2,body .hside .qsh b{font:600 15px var(--font);color:var(--t1);letter-spacing:-.01em}
/* section titles: big and plain, no rule line */
body h2.ruled{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;font:700 26px/1.2 var(--font);letter-spacing:-.025em;color:var(--t1);text-align:left}
body h2.ruled::before,body h2.ruled::after{display:none!important}
body h2.ruled span{background:none;padding:0}
/* buttons */
body .wb{height:46px;border-radius:var(--r3);border:1px solid var(--line);background:var(--card2);color:var(--t1);font:600 14.5px var(--font);box-shadow:none}
body .wb:hover{border-color:var(--line2);background:var(--card3)}
body .wb.pri{background:var(--acc)!important;border-color:transparent!important;color:var(--accink)!important}
body .wb.pri:hover{filter:brightness(1.06)}
body .wb:disabled,body .wb.pri:disabled{opacity:.45}
/* segmented controls (Swap / Limit / Recurring, Top / Gainers / Losers, time frames, networks, tabs) */
body .qstabs,body .msort,body #tfs,body .qsnet,body .mvtabs,body .tkxtabs,body .rlsides,body .rlwins{display:inline-flex;gap:2px;padding:3px;border:0!important;border-radius:var(--r3)!important;background:var(--card2)!important}
body .qstabs button,body .msort button,body #tfs button,body .qsnet button,body .mvtabs button,body .tkxtabs button,body .rlwins button{height:32px;padding:0 13px;border:0!important;border-radius:var(--r4)!important;background:transparent!important;color:var(--t3)!important;font:500 13.5px var(--font)!important;box-shadow:none!important}
body .qstabs button:hover,body .msort button:hover,body #tfs button:hover,body .qsnet button:hover,body .mvtabs button:hover,body .tkxtabs button:hover,body .rlwins button:hover{color:var(--t1)!important}
body .qstabs button.on,body .msort button.on,body #tfs button.on,body .qsnet button.on,body .mvtabs button.on,body .tkxtabs button.on,body .rlwins button.on{background:var(--card3)!important;color:var(--t1)!important}
body .qsnet{display:flex;width:100%}
body .qsnet button{flex:1}
/* fields */
body #msearch,body #qsq{height:40px;border-radius:var(--r3);border:1px solid var(--line);background:var(--card2);color:var(--t1);font:500 14px var(--font);padding:0 14px}
body #msearch:focus,body #qsq:focus{outline:none;border-color:color-mix(in srgb,var(--acc) 45%,transparent)}

/* ============================== front page ============================== */
/* top: Predictions | Swap | PnL, centred under the ticker */
body #hero{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,480px) minmax(0,1fr);column-gap:24px;row-gap:16px;align-items:start;
  max-width:1320px!important;min-height:0!important;margin:0 auto!important;padding:calc(var(--navh) + var(--tickh) + 44px) 24px 40px!important;overflow:visible}
body #hero .hright,body #hero .hleft,body #hero .hrow{display:contents!important}
body #hero #qswap{grid-column:2!important;grid-row:1 / span 3!important;width:auto!important;max-width:none!important;margin:0!important;padding:18px!important;border-radius:var(--r1)!important;position:relative!important;inset:auto!important}
body #hero #teasePredict{grid-column:1!important;grid-row:1!important;justify-self:end!important;width:min(340px,100%)!important;max-width:none!important;margin:0!important;position:relative!important;inset:auto!important;top:auto!important;left:auto!important}
body #hero #pnlc{grid-column:3!important;grid-row:1!important;justify-self:start!important;width:min(340px,100%)!important;max-width:none!important;margin:0!important;padding:16px 18px!important}
body #hero .hside{padding:16px 18px!important;text-align:left}
/* the Swap box */
body #qswap .qsbox{background:var(--card2)!important;border:1px solid transparent!important;border-radius:var(--r2)!important;padding:14px 16px!important}
body #qswap .qsbox:focus-within{border-color:var(--line2)!important}
body #qswap #qsamt,body #qswap #qsout{font:600 30px var(--font)!important;letter-spacing:-.02em;color:var(--t1)}
body #qswap .qstok{height:38px;border-radius:999px;border:1px solid var(--line);background:var(--card3);color:var(--t1);font:600 14px var(--font);padding:0 12px 0 6px}
body #qswap .qsflip{width:38px;height:38px;border-radius:var(--r3);border:4px solid var(--card)!important;background:var(--card3)!important;color:var(--t1);margin:-14px auto!important;position:relative;z-index:2}
body #qswap #qsgo{height:54px;border-radius:var(--r2);font:650 16px var(--font);margin-top:12px}
body #qswap .qsslip{border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--t3);font:500 12.5px var(--font);height:30px;padding:0 12px}
body #qswap .unit,body #qswap .maxb{border-radius:999px;border:1px solid var(--line);background:var(--card3);color:var(--t2);font:600 11.5px var(--font)}
/* Predictions mini card + PnL */
body #teasePredict .pmmlive{color:var(--t3)}
body #pnlc .pnlb{gap:0}
/* sections */
body #menu .sect{max-width:1320px;margin:0 auto;padding:56px 24px 0!important}
body .mchains{display:flex;align-items:center;gap:8px;margin:0 0 14px}
body .mchains a{height:34px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--t2);font:500 13.5px var(--font);text-decoration:none}
body .mchains a:hover{color:var(--t1);border-color:var(--line2)}
body .mtools{display:flex;align-items:center;gap:12px;margin:0 0 14px}
body .mtools #msearch{margin-left:auto;width:min(280px,100%)}
/* markets: one clean table */
body .mtable{overflow:hidden;border-radius:var(--r1)!important}
body .mhead{font:600 11.5px var(--font)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)!important;padding-top:14px!important;padding-bottom:12px!important;border-bottom:1px solid var(--line)!important;background:transparent!important}
body #markets .acw{border-bottom:1px solid var(--line)!important}
body #markets .acard{min-height:64px;background:transparent!important;border:0!important;border-radius:0!important;transition:background .12s}
body #markets .acard:hover{background:var(--card2)!important}
body .moreRow .more,body .nmore .more{height:42px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--t1);font:600 14px var(--font)}
body .moreRow .more:hover,body .nmore .more:hover{border-color:var(--line2)}
/* news + events */
body .pn{padding:20px 22px!important;border-radius:var(--r1)!important}
body .pn>h2{margin:0 0 14px!important;font:650 17px var(--font)!important}
body .mpanels{gap:18px}
/* footer */
body .ffoot{max-width:1320px;margin:72px auto 0!important;padding:36px 24px 26px!important;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(200px,1fr) 3fr;gap:28px;background:transparent}
body .ffoot .fbrand{display:flex;align-items:center;gap:10px;align-self:start}
body .ffoot .fbrand b{font:700 18px var(--font);color:var(--t1);letter-spacing:-.03em}
body .ffoot .fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
body .ffoot .fcols b{display:block;font:600 12px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin:0 0 10px}
body .ffoot .fcols button,body .ffoot .fcols a{display:block;padding:5px 0;border:0;background:none;color:var(--t2);font:500 14px var(--font);text-decoration:none;cursor:pointer;text-align:left}
body .ffoot .fcols button:hover,body .ffoot .fcols a:hover{color:var(--t1)}
body #menu .disc,body #menu .copy{max-width:1320px;margin:0 auto!important;padding:0 24px;text-align:left;color:var(--t3);font-size:12.5px}
body #menu .copy{padding-bottom:40px;padding-top:8px}

/* ============================== wallet: a drawer on the right ============================== */
body #wpanel{position:fixed;top:calc(var(--navh) + 10px)!important;right:12px!important;bottom:12px;left:auto;width:min(400px,calc(100vw - 24px))!important;max-height:none!important;overflow:auto;
  padding:20px!important;border-radius:var(--r1)!important;box-shadow:var(--shadow)!important;z-index:80;animation:v2slide .22s cubic-bezier(.2,.8,.2,1) both}
@keyframes v2slide{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
body #wpanel .whead{display:flex;align-items:center;gap:12px;margin:0 0 18px}
body #wpanel .whead .wttl b{font:650 16px var(--font);color:var(--t1)}
body #wpanel .wic{width:36px;height:36px;border-radius:var(--r3);border:1px solid var(--line);background:var(--card2);color:var(--t2)}
body #wpanel .wic:hover{color:var(--t1);border-color:var(--line2)}
body #wpanel .wvhero{text-align:left;padding:18px;border-radius:var(--r2);background:var(--card2);margin:0 0 14px}
body #wpanel .wvlbl{font:500 13px var(--font);color:var(--t3)}
body #wpanel .wbal{font:700 38px/1.1 var(--font)!important;letter-spacing:-.03em;color:var(--t1);margin:6px 0 4px}
body #wpanel .waddr{justify-content:flex-start;margin-top:12px}
body #wpanel .wvchip{border-radius:999px;background:var(--card3);border:0;color:var(--t2);height:30px;padding:0 12px}
body #wpanel .wvacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px}
body #wpanel .wva{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border-radius:var(--r2);border:1px solid var(--line);background:var(--card);color:var(--t2);font:600 13px var(--font)}
body #wpanel .wva:hover{background:var(--card2);color:var(--t1)}
body #wpanel .wva i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--accsoft);color:var(--acc)}
body #wpanel .wlbl{font:600 12px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin:0 0 8px}
body #wpanel .wb.wwal{justify-content:flex-start;gap:12px;padding:0 14px;margin:0 0 8px;width:100%}
body #wpanel .wpromo{border-radius:var(--r2);border:1px dashed var(--line2);background:transparent}

/* ============================== coin page header ============================== */
body #app header .top{gap:10px;align-items:center}
body #app .bk{height:36px;border-radius:var(--r3);border:1px solid var(--line);background:var(--card);color:var(--t2)}
body #app .px{font:700 26px var(--font)!important;letter-spacing:-.02em;color:var(--t1)}
body #app .cgbtn,body #app .cbtn{height:36px;border-radius:var(--r3)!important;border:1px solid var(--line)!important;background:var(--card)!important;color:var(--t2)!important;font:500 13.5px var(--font)!important}
body #app .cgbtn:hover,body #app .cbtn:hover{color:var(--t1)!important;border-color:var(--line2)!important}
body #app .info{border-radius:var(--r2)}

/* ============================== phones and narrow windows ============================== */
body #btab{display:none}
@media (max-width:1099px){
  body #hero{grid-template-columns:minmax(0,520px);justify-content:center;padding-top:calc(var(--navh) + var(--tickh) + 24px)!important}
  body #hero #qswap,body #hero #teasePredict,body #hero #pnlc{grid-column:1!important;grid-row:auto!important;justify-self:stretch!important;width:auto!important}
  body #hero #qswap{order:1}body #hero #teasePredict{order:2}body #hero #pnlc{order:3}
}
@media (max-width:899px){
  :root{--navh:58px}
  body #topbar{padding:0 12px;gap:6px}
  body #tnav,body #topbar .tword,body #topbar #dlbtn{display:none!important}
  body #topbar #hbtn{display:inline-flex;order:5;width:40px;height:40px;border-radius:var(--r3);border:1px solid var(--line);background:var(--card)}
  body #topbar #srbtn{width:40px;padding:0;justify-content:center;margin-left:auto}
  body #topbar #srbtn .srtx,body #topbar #srbtn kbd{display:none}
  body #topbar #wbtn{padding:0 14px}
  body #topbar #wbtn.wcon .wchgl,body #topbar #wbtn.wcon .wadr{display:none!important}
  body #btab{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:60;height:calc(var(--tabh) + env(safe-area-inset-bottom,0px));padding:6px 4px env(safe-area-inset-bottom,0px);
    background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  body #btab button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;background:none;color:var(--t3);font:500 11px var(--font);border-radius:var(--r3)}
  body #btab button svg{width:21px;height:21px}
  body #btab button.on{color:var(--acc)}
  body{padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px))}
  body #wpanel{top:auto!important;bottom:0!important;right:0!important;left:0!important;width:100%!important;max-height:88vh!important;border-radius:var(--r1) var(--r1) 0 0!important;animation-name:v2up}
  body #menu .sect{padding:40px 14px 0!important}
  body #hero{padding-left:14px!important;padding-right:14px!important}
  body .ffoot{grid-template-columns:1fr}
  body .ffoot .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  body .mtools{flex-wrap:wrap}
  body .mtools #msearch{width:100%;margin-left:0}
}
@keyframes v2up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* ---- fixes after the first look ---- */
body #topbar{z-index:62!important}
body .ticker{z-index:50!important}
html.js .reveal{transform:translateY(14px);filter:none!important;transition:opacity .5s ease,transform .5s ease}
html.js .reveal.in{transform:none}
body .pn h2,body #app #pgrid .pn h2,body #app .scol>.pn h2{text-transform:none!important;letter-spacing:-.01em!important;font:650 16px var(--font)!important;color:var(--t1)!important}
body .ffoot .fbrand{flex-direction:row!important;align-items:center!important}
/* page widths: every page centred with the same side margins */
body #rlpg.rlpg,body #pfpg.pfpg,body #chpg.chpg,body #uwpg.uwpg,body #predict.predict,body #swappg.swappg{max-width:1440px;margin-left:auto;margin-right:auto;padding-left:24px!important;padding-right:24px!important;box-sizing:border-box}
@media (max-width:899px){body #rlpg.rlpg,body #pfpg.pfpg,body #chpg.chpg,body #uwpg.uwpg,body #predict.predict,body #swappg.swappg{padding-left:14px!important;padding-right:14px!important}}
/* Degen Long / Short: full width; Swap header wraps on phones */
body .rlsides{display:flex!important;width:100%}
body .rlsides button{flex:1;height:38px;border:0!important;border-radius:var(--r4)!important;font:600 14px var(--font)!important;background:transparent!important;color:var(--t3)!important}
body .rlsides button.up.on{background:color-mix(in srgb,var(--up) 18%,transparent)!important;color:var(--up)!important}
body .rlsides button.dn.on{background:color-mix(in srgb,var(--dn) 18%,transparent)!important;color:var(--dn)!important}
body #qswap .qsh{flex-wrap:wrap;gap:8px}
body #topbar #wbtn,body #topbar #wbtn.wcon,body #topbar #wbtn.wcon:not(.wsm){height:40px!important;min-height:0!important;align-self:center}
body #topbar #wbtn.wcon .wtx{flex-wrap:nowrap;white-space:nowrap}
body #topbar{align-items:center!important}
body #topbar>#dlbtn,body #topbar>#wbtn,body #topbar>#srbtn{align-self:center!important;margin-top:0!important;margin-bottom:0!important}
/* Activity panel: a drawer like the wallet, under the top bar */
body #actp{top:calc(var(--navh) + 10px)!important;right:12px!important;bottom:12px!important;height:auto!important;width:min(400px,calc(100vw - 24px))!important;border-radius:var(--r1)!important;background:var(--card)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow)!important}
body #actscrim{background:transparent!important}
@media (max-width:899px){body #actp{top:auto!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;max-height:88vh;border-radius:var(--r1) var(--r1) 0 0!important}}
/* the old scroll state (#topbar.tbg{background:transparent!important}) is more specific: beat it */
body #topbar,body #topbar.tbg,html body #topbar.tbg{background:var(--bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ===================================================================================================================================
   v2.1 POLISH (owner 2026-10-18: "this is what im talking about. Improve it still more ... full lock in")
   =================================================================================================================================== */
/* -- feel: thin dark scrollbars, keyboard focus ring, press feedback, steady numbers -- */
html{scrollbar-color:var(--card3) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--card3);border-radius:10px;border:3px solid var(--bg)}::-webkit-scrollbar-track{background:transparent}
/* keyboard ring only on buttons / links; clicking into a field shows no ring (owner 2026-10-18: "a weird green box around it") */
html.kbd button:focus-visible,html.kbd a:focus-visible,html.kbd [tabindex]:focus-visible{outline:2px solid color-mix(in srgb,var(--acc) 70%,transparent)!important;outline-offset:2px}
body input:focus,body input:focus-visible,body textarea:focus,body output:focus{outline:none!important;box-shadow:none!important}
body button:not(:disabled):active,body .wb:not(:disabled):active{transform:scale(.98)}
body .ap,body .avm,body .acap,body .wval,body .wbal,body .pnlv,body .pmmp b,body #qsamt,body #qsout,body .px{font-variant-numeric:tabular-nums}
body a{transition:color .15s}

/* -- ticker: soft edges, airy items -- */
body .ticker{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
body .ticker .tk{padding:0 18px!important;border:0!important;gap:7px}
body .ticker .tk b,body .ticker .tk .tn{color:var(--t1);font-weight:600}

/* -- card headers: title left, meta right, one line -- */
body .hside .qsh,body #qswap>.qsh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
body #teasePredict{cursor:pointer;transition:border-color .15s,transform .15s}
body #teasePredict:hover{border-color:var(--line2)!important;transform:translateY(-1px)}
body #teasePredict .pmmlive{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;background:var(--card2);font:600 12px var(--font);color:var(--t2)}
body #teasePredict .pmm{display:grid!important;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
body #teasePredict .pmm:first-child{border-top:0}
body #teasePredict .pmmc{display:flex;align-items:center;gap:8px}
body #teasePredict .pmmc b{color:var(--t1);font:600 13.5px var(--font)}
body #teasePredict .pmmc img{width:22px;height:22px;border-radius:50%}
body #teasePredict .pmmp{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
body #teasePredict .pmmp b{font:650 14px var(--font)}
body #teasePredict .pmmp .mu{font-size:11.5px}
body #pnlc .pnlr{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line)}
body #pnlc .pnlr:first-child{border-top:0}
body #pnlc .pnlr>.mu{font:500 13.5px var(--font);color:var(--t2)}
body #pnlc .pnlv b{font:650 15px var(--font)}
body #pnlc .pnleye{width:30px;height:30px;border-radius:var(--r4);border:0;background:var(--card2);color:var(--t3)}

/* -- Swap box: calmer labels, bigger numbers, a flip button that turns -- */
body #qswap .qsl{font:500 13px var(--font);color:var(--t3)}
body #qswap .qsl b,body #qswap #qsfbal,body #qswap #qstbal{color:var(--t3);font-weight:500}
body #qswap .qsrow{margin:6px 0 4px;gap:12px}
body #qswap #qsamt,body #qswap #qsout{font:600 34px/1.15 var(--font)!important}
body #qswap #qsamt::placeholder{color:var(--t3);opacity:.6}
body #qswap .qstok{transition:background .15s,border-color .15s}
body #qswap .qstok:hover{background:var(--card2);border-color:var(--line2)}
body #qswap .qstok img{width:24px;height:24px;border-radius:50%}
body #qswap .qsflip{transition:transform .25s cubic-bezier(.3,1.4,.5,1),background .15s}
body #qswap .qsflip:hover{transform:rotate(180deg);background:var(--card2)!important}
body #qswap .qsnet{margin:0 0 12px}
body #qswap .qsnet button.on{background:var(--card3)!important}
body #qswap .qswarn:empty,body #qswap .qsmsg:empty{display:none}
body #qswap .qsx{border-radius:var(--r3);background:var(--card2);padding:10px 12px;margin-top:10px}

/* -- Markets: one toolbar row (chains left, sorting + search right), a calmer table -- */
@media (min-width:900px){
  body #markets{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
  body #markets>h2.ruled{grid-column:1 / -1}
  body #markets>.mchains{grid-column:1;margin:0 0 14px}
  body #markets>.mtools{grid-column:2;justify-content:flex-end;margin:0 0 14px}
  body #markets>.mtools #msearch{margin-left:0}
  body #markets>.mtable,body #markets>.moreRow{grid-column:1 / -1}
}
body .mchains>.mu{font:500 13px var(--font);color:var(--t3);margin-right:2px}
body .mchains a.on,body .mchains a[aria-current]{background:var(--card2);color:var(--t1)}
body #mcount{font:500 12.5px var(--font);color:var(--t3)}
body #markets .afav{color:var(--t3);font-size:15px;opacity:.55;transition:opacity .15s,color .15s}
body #markets .acard:hover .afav{opacity:1}
body #markets .afav[aria-pressed="true"]{color:var(--am);opacity:1}
body #markets .arank{color:var(--t3);font:500 13px var(--font)}
body #markets .ah img{width:32px;height:32px;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
body #markets .an{color:var(--t1);font:600 14.5px var(--font)}
body #markets .at{color:var(--t3);font:500 12.5px var(--font)}
body #markets .ap{color:var(--t1);font:600 14.5px var(--font)}
body #markets .ac span{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:var(--r4);font:600 13px var(--font)}
body #markets .ac .up{background:color-mix(in srgb,var(--up) 13%,transparent);color:var(--up)}
body #markets .ac .dn{background:color-mix(in srgb,var(--dn) 13%,transparent);color:var(--dn)}
body #markets .avm,body #markets .acap{color:var(--t2);font:500 14px var(--font)}
body #markets .ago{background:var(--acc)!important;color:var(--accink)!important;border-radius:var(--r4)!important;font:650 12.5px var(--font)!important;padding:7px 14px!important}
body #markets .acard:hover .ago,body #markets .acard:focus-visible .ago{opacity:1}

/* -- News: no box around the box; cards that lift on hover; a tidy list -- */
body #news .newspn{background:transparent!important;border:0!important;padding:0!important}
body #news .newspn>h2{display:none!important}
body #news .ncard{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:var(--r2)!important;padding:18px 20px!important;transition:border-color .15s,transform .15s,background .15s;text-decoration:none}
body #news .ncard:hover{border-color:var(--line2)!important;background:var(--card2)!important;transform:translateY(-2px)}
body #news .ncard .nt{color:var(--t1);letter-spacing:-.01em}
body #news .nlead .nt{font:700 26px/1.25 var(--font)!important;letter-spacing:-.02em}
body #news .nmid .nt{font:600 15px/1.35 var(--font)!important}
body #news .nsum{color:var(--t2);font:400 14px/1.6 var(--font)}
body #news .nmeta{font:500 12.5px var(--font);color:var(--t3);gap:8px}
body #news .nmeta b{color:var(--t2);font-weight:600}
body #news .tg{border-radius:999px!important;border:1px solid var(--line)!important;background:var(--card2)!important;color:var(--t2)!important;font:500 11.5px var(--font)!important;padding:3px 10px!important}
body #news .nlist{margin-top:18px;border-top:0;column-gap:28px}
body #news .nrow{padding:14px 4px!important;border-bottom:1px solid var(--line)!important;text-decoration:none;border-radius:0}
body #news .nrow:hover .nt{color:var(--acc)}
body #news .nrow .nt{color:var(--t1);font:550 14.5px/1.4 var(--font)}

/* -- Events: date chip + title rows -- */
body #events .pn{padding:20px 22px!important}
body #events .nr{display:grid!important;grid-template-columns:150px minmax(0,1fr);column-gap:18px;row-gap:3px;padding:14px 0;border-top:1px solid var(--line)}
body #events .nr:first-child{border-top:0}
body #events .nr .nd{grid-row:1 / span 3;align-self:start;display:inline-block;padding:7px 10px;border-radius:var(--r3);background:var(--card2);color:var(--t2);font:600 12.5px/1.35 var(--font)}
body #events .nr .nt{color:var(--t1);font:600 15px var(--font)}
body #events .nr .ns{color:var(--t3);font:400 13.5px var(--font)}

/* -- wallet drawer: token rows -- */
body #wpanel .wtoks{display:flex;flex-direction:column;gap:2px}
body #wpanel .wtok{display:flex;align-items:center;gap:12px;width:100%;padding:10px 10px;border:0;border-radius:var(--r3);background:transparent;color:var(--t1);text-align:left;cursor:pointer}
body #wpanel .wtok:hover{background:var(--card2)}
body #wpanel .wtok img{width:36px;height:36px;border-radius:50%;flex:none}
body #wpanel .wtok .wnm{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
body #wpanel .wtok .wsym{font:600 14.5px var(--font);color:var(--t1)}
body #wpanel .wtok .wamt{font:500 12.5px var(--font);color:var(--t3)}
body #wpanel .wtok .wval{font:650 14.5px var(--font);color:var(--t1)}
body #wpanel .wchg2{font:600 13px var(--font)}

/* -- skeletons: soft shimmer in the new surfaces -- */
body .skel{background:linear-gradient(90deg,var(--card2) 0%,var(--card3) 50%,var(--card2) 100%)!important;background-size:200% 100%!important;border-radius:6px!important;animation:v2shim 1.4s linear infinite}
@keyframes v2shim{from{background-position:200% 0}to{background-position:-200% 0}}

/* -- page titles -- */
body #predict h1,body #swappg h1,body #pfpg h1,body #uwpg h1,body #chpg h1{font:700 40px/1.1 var(--font)!important;letter-spacing:-.035em!important;color:var(--t1)!important}
body .ptag{border-radius:999px;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);color:var(--acc);background:var(--accsoft);font:600 11.5px var(--font);letter-spacing:.08em}
/* the side cards keep their own height (an old rule stretched them to the Swap box's rows) */
body #hero #teasePredict,body #hero #pnlc{align-self:start!important;height:auto!important}
body #pnlc>.qsh{margin:0 0 6px!important}
/* -- depth: a very soft light at the top of the front page (the "slight green / blue" feel) -- */
body #hero{background:transparent!important}
body #menu:not(.pmode):not(.smode):not(.pfmode):not(.chmode):not(.umode):not(.rlmode){background:radial-gradient(ellipse min(900px,70vw) 560px at 50% 0,color-mix(in srgb,var(--acc) 6%,transparent),transparent 100%),radial-gradient(ellipse min(700px,50vw) 480px at 18% 0,rgba(148,163,184,.07),transparent 100%),var(--bg)!important}
/* -- empty states: an icon, one line, one button, centred -- */
body .pfconnect{display:flex!important;flex-direction:column;align-items:center;gap:16px;max-width:420px;margin:24px auto 0;padding:44px 28px!important;text-align:center;background:var(--card)!important;border:1px solid var(--line)!important;border-radius:var(--r1)!important}
body .pfconnect::before{content:"";width:56px;height:56px;border-radius:18px;background:var(--accsoft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7f284' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9v9z'/%3E%3Cpath d='M15 3.5A9 9 0 0 1 20.5 9H15z'/%3E%3C/svg%3E") center/26px no-repeat}
body .pfconnect b{font:650 17px var(--font);color:var(--t1)}
body .pfconnect .wb{width:100%;max-width:260px}
body .rltempty{text-align:center;padding:26px 0;color:var(--t3)}
/* -- Swap header hierarchy: networks = underline tabs, order types = pills -- */
body #qswap .qsnet{background:transparent!important;padding:0!important;border-radius:0!important;border-bottom:1px solid var(--line)!important;gap:18px!important;margin:-4px 0 14px!important;justify-content:flex-start}
body #qswap .qsnet button{flex:none!important;height:36px!important;padding:0 2px!important;border-radius:0!important;background:transparent!important;color:var(--t3)!important;font:600 14px var(--font)!important;position:relative}
body #qswap .qsnet button:hover{color:var(--t1)!important}
body #qswap .qsnet button.on{background:transparent!important;color:var(--t1)!important}
body #qswap .qsnet button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--acc)}
@media (max-width:899px){
  body .mchains{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-14px;padding-right:14px}
  body .mchains::-webkit-scrollbar{display:none}
  body .mchains>.mu{display:none}
  body .mchains a{flex:none}
  body #markets .afav{display:none!important}
  body #markets .acard{padding-left:14px!important}
  body #qswap .qsh{flex-wrap:nowrap}
  body #qswap .qsslip{flex:none}
}
@media (max-width:899px){
  body #qswap .qstabs button{padding:0 9px!important;font-size:13px!important}
  body #qswap .qsslip{padding:0 9px;font-size:12px}
  body #qswap .qsh{gap:6px}
}
@media (max-width:899px){
  body #app header .top{gap:8px}
  body #app #tfs{display:flex!important;width:100%}
  body #app #tfs button{flex:1}
  body #app .cgwrap{margin-left:0!important;gap:8px}
  body #app .cgbtn,body #app .cbtn{height:34px;padding:0 11px!important;font-size:12.5px!important}
}
/* -- token picker: solid, roomy rows -- */
body #qswap .qspick{background:var(--card)!important;border-radius:var(--r1)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:16px!important}
body #qswap .qspick .qsh b{font:650 16px var(--font);color:var(--t1)}
body #qswap .qspick #qsq{margin:0 0 10px}
body .qsres .qprow{border-radius:var(--r3)!important;padding:9px 10px!important;border:0!important;background:transparent!important;transition:background .12s}
body .qsres .qprow:hover,body .qsres .qprow.on{background:var(--card2)!important}
body .qsres .qprow img{width:32px;height:32px;border-radius:50%}
body .qsres .qprow b{color:var(--t1);font:600 14px var(--font)}

/* ===================================================================================================================================
   v2.2 (owner 2026-10-18): watchlist row, smaller ticker, 25 % / 50 % / MAX as small grey text, coin page with only Buy / Sell on the right,
   and far fewer boxes ("i dont like so many different bubble boxes ... mostly just no boxes"; the Swap box and the front-page cards stay boxes)
   =================================================================================================================================== */
:root{--wlh:24px;--tickh:28px}
/* -- watchlist: a tiny row right under the top bar -- */
body .wlbar{position:fixed;top:var(--navh);left:0;right:0;height:var(--wlh);z-index:51;display:flex;align-items:center;gap:4px;padding:0 16px;overflow-x:auto;scrollbar-width:none;background:var(--bg);border-bottom:1px solid var(--line);font:500 11px/1 var(--font);color:var(--t3)}
body .wlbar::-webkit-scrollbar{display:none}
body .wlbar .wlh{color:var(--am);font-size:11px;margin-right:4px}
body .wlbar .wli{flex:none;display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 7px;border:0;border-radius:6px;background:transparent;color:var(--t2);font:500 11px/1 var(--font);cursor:pointer}
body .wlbar .wli:hover{background:var(--card2);color:var(--t1)}
body .wlbar .wli b{color:var(--t1);font-weight:600}
body .wlbar .wli img,body .wlbar .wli .lg{width:14px!important;height:14px!important;border-radius:50%;font-size:7px}
body .wlbar .wli .up{color:var(--up)}body .wlbar .wli .dn{color:var(--dn)}
body .wlbar .wladd{flex:none;display:inline-flex;align-items:center;gap:6px;height:18px;padding:0 6px;border:0;border-radius:6px;background:transparent;color:var(--t3);font:500 11px/1 var(--font);cursor:pointer}
body .wlbar .wladd:hover{color:var(--t1);background:var(--card2)}
body .wlbar .wladd i{font-style:normal;display:inline-grid;place-items:center;width:14px;height:14px;border-radius:4px;background:var(--card2);color:var(--t2);font:600 11px/1 var(--font)}
body .wlbar .wlplus{padding:0 4px}
/* -- ticker: smaller, under the watchlist -- */
body .ticker{top:calc(var(--navh) + var(--wlh))!important;height:var(--tickh)!important}
body .ticker .tk{font:500 11.5px var(--font)!important;padding:0 14px!important;gap:6px}
body .ticker .tk img,body .ticker .tk .lg{width:15px!important;height:15px!important}
body #hero{padding-top:calc(var(--navh) + var(--wlh) + var(--tickh) + 40px)!important}
@media (max-width:1099px){body #hero{padding-top:calc(var(--navh) + var(--wlh) + var(--tickh) + 22px)!important}}
body #menu.pmode .wlbar,body #menu.smode .wlbar,body #menu.pfmode .wlbar,body #menu.chmode .wlbar,body #menu.umode .wlbar,body #menu.rlmode .wlbar{display:none!important}

/* -- 25 % / 50 % / MAX: small grey text, no pill -- */
body .qspct,body .tpct{display:inline-flex;align-items:center;gap:10px}
body .qspb,body .tpb,body .maxb,body #qswap .maxb,body .qsmax,body .tmax{height:auto!important;min-width:0!important;padding:2px 0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--t3)!important;font:600 11.5px/1 var(--font)!important;letter-spacing:.02em!important;cursor:pointer;text-transform:none}
body .qspb:hover,body .tpb:hover,body .maxb:hover{color:var(--t1)!important}

/* -- coin page: only Buy / Sell on the right, bigger, like the Swap box -- */
body #app #scard,body #app .fvpn{display:none!important}
body #app .scol{flex:0 0 400px!important;height:auto!important;overflow:visible!important;padding:0!important}
body #app #side{padding:20px!important;border-radius:var(--r1)!important}
body #app #side .whead{margin:0 0 14px}
body #app #side .whead b{font:650 18px var(--font);color:var(--t1);letter-spacing:-.01em}
body #app #side .tseg{display:flex;gap:2px;padding:3px;border:0;border-radius:var(--r3);background:var(--card2);margin:0 0 14px}
body #app #side .tseg button{flex:1;height:40px;border:0!important;border-radius:var(--r4)!important;background:transparent!important;color:var(--t3)!important;font:600 14.5px var(--font)!important;box-shadow:none!important}
body #app #side .tseg button.on.buy{background:color-mix(in srgb,var(--up) 18%,transparent)!important;color:var(--up)!important}
body #app #side .tseg button.on.sell{background:color-mix(in srgb,var(--dn) 18%,transparent)!important;color:var(--dn)!important}
body #app #side .tbox{background:var(--card2)!important;border:1px solid transparent!important;border-radius:var(--r2)!important;padding:14px 16px!important;margin:0 0 8px}
body #app #side .tbox:focus-within{border-color:var(--line2)!important}
body #app #side .tbh{display:flex;justify-content:space-between;font:500 13px var(--font);color:var(--t3)}
body #app #side .tlab{color:var(--t3);font:500 13px var(--font)}
body #app #side #tamt{font:600 34px/1.15 var(--font)!important;color:var(--t1);background:transparent;border:0}
body #app #side .tbf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;font-size:12.5px}
body #app #side .unit{border-radius:999px;border:1px solid var(--line);background:var(--card3);color:var(--t2);font:600 11.5px var(--font)}
body #app #side .tslip{display:flex;align-items:center;gap:6px;margin:12px 0 0}
body #app #side .tslip button{height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--t3);font:500 12px var(--font)}
body #app #side .tslip button.on{background:var(--card3);color:var(--t1);border-color:transparent}
body #app #side #tgo,body #app #side .wb.pri{height:54px;border-radius:var(--r2);font:650 16px var(--font);margin-top:14px;width:100%}
body #app #side>p.mu,body #app #side .mu{color:var(--t3)}
@media (max-width:899px){body #app .scol{flex:1 1 auto!important;width:100%}}

/* -- fewer boxes -- */
/* coin page stats: one plain row, label over value, no tiles */
body #app .info,body #app #info{background:transparent!important;border:0!important;border-radius:0!important;padding:4px 2px 14px!important;gap:0!important;box-shadow:none!important}
body #app #info .st{background:transparent!important;border:0!important;border-radius:0!important;padding:0 26px 0 0!important;margin:0!important;box-shadow:none!important}
body #app #info .st+.st{border-left:0!important}
body #app #info .sl{font:500 12px var(--font)!important;color:var(--t3)!important;text-transform:none!important;letter-spacing:0!important}
body #app #info .sv{font:600 15px var(--font)!important;color:var(--t1)!important}
body #app #info .ss{display:none!important}
/* coin page activity table: no box */
body #app .tkx{background:transparent!important;border:0!important;border-radius:0!important;padding:8px 0 0!important}
/* chain pages: the four stats as plain text */
body .chstats{gap:0!important}
body .chst{background:transparent!important;border:0!important;border-radius:0!important;padding:0 32px 0 0!important;box-shadow:none!important}
body .chst>span:first-child{font:500 12px var(--font);color:var(--t3)}
body .chst>b{font:650 20px var(--font);color:var(--t1)}
/* lists without the outer box: markets, chain lists, unwrap */
body .mtable{background:transparent!important;border:0!important;border-radius:0!important}
body .mhead{padding-left:0!important;padding-right:0!important}
body #markets .acard{border-radius:var(--r3)!important}
body .uwrow{background:transparent!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;padding:14px 6px!important}
body .uwrow:hover{background:var(--card)!important;border-radius:var(--r3)!important}
/* news and events: text on the page, a hover tint instead of boxes */
body #news .ncard{background:transparent!important;border:0!important;border-radius:var(--r2)!important;padding:14px 16px!important}
body #news .ncard:hover{background:var(--card)!important;transform:none}
body #news .nlead{padding-left:0!important}
body #news .nside{border-left:1px solid var(--line);padding-left:12px}
body #events .pn{background:transparent!important;border:0!important;padding:0!important}
/* wallet drawer: no boxes inside the drawer */
body #wpanel .wvhero{background:transparent!important;padding:4px 2px 16px!important;border-bottom:1px solid var(--line);border-radius:0!important;margin-bottom:16px}
body #wpanel .wva{border:0!important;background:transparent!important}
body #wpanel .wva:hover{background:var(--card2)!important}
body .chbody{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
body .chrow{border-radius:var(--r3)!important}
body .chrow:hover{background:var(--card)!important}
/* Portfolio / Degen tables and Predictions detail keep their light framing; the Degen + Swap order boxes stay boxes */

/* ===================================================================================================================================
   v2.3 COIN PAGE as one connected terminal (owner 2026-10-18: "cubic is fine and connected to each other is better than leaving empty gaps
   ... make the chart go to the edge of the screen and not stay in a smooth cornered box"): header, stats, chart | Buy / Sell and the
   activity table sit edge to edge, divided by thin lines; only Buy / Sell is a box
   =================================================================================================================================== */
:root{--chartbg:#0e1116}  /* a touch greyer than the near-black page (owner 2026-10-24: "keep chart view slightly more gray, not that black"); plain hex: js/tvchart.js reads it */
body #app{padding-left:0!important;padding-right:0!important;max-width:none!important}
body #app header{padding:0 20px;margin:0}
body #app header .top{margin:0 0 10px!important}
body #app #info{padding:6px 20px 14px!important;margin:0!important;border-bottom:1px solid var(--line)!important;display:flex!important;flex-wrap:wrap;row-gap:10px}
body #app #crow{display:flex!important;gap:0!important;margin:0!important;padding:0!important;border-bottom:1px solid var(--line);align-items:stretch}
body #app #cvw{flex:1 1 auto;min-width:0;margin:0!important;border:0!important;border-radius:0!important;background:var(--chartbg)!important;box-shadow:none!important}
body #app #cvw canvas,body #app #cvw .tvc{border-radius:0!important}
body #app .scol{flex:0 0 400px!important;border-left:1px solid var(--line);padding:16px!important;gap:0!important;background:var(--bg)}
body #app #side{border-radius:var(--r2)!important;margin:0!important}
body #app .tkx{margin:0!important;padding:0!important;border-top:0!important}
body #app .tkxh{padding:12px 20px 10px!important;margin:0!important;border-bottom:1px solid var(--line)}
body #app .tkxtabs{background:transparent!important;padding:0!important;gap:18px!important}
body #app .tkxtabs button{padding:0 2px!important;height:32px!important;border-radius:0!important;background:transparent!important;position:relative}
body #app .tkxtabs button.on{background:transparent!important;color:var(--t1)!important}
body #app .tkxtabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:2px;border-radius:2px;background:var(--acc)}
body #app .tkxnote:empty{display:none}
body #app #pgrid{padding:24px 20px 0!important;margin:0!important}
body #app #pgrid .pn{background:transparent!important;border:0!important;padding:0!important}
body #app .afoot{padding:0 20px}
body #cg[hidden]{display:none!important}
@media (max-width:899px){
  body #app header{padding:0 14px}
  body #app #info{padding:6px 14px 12px!important}
  body #app #crow{flex-direction:column}
  body #app .scol{flex:1 1 auto!important;width:auto;border-left:0;border-top:1px solid var(--line);padding:14px!important}
  body #app .tkxh{padding:12px 14px 10px!important}
}
@media (max-width:899px){body #app #info{gap:12px 16px!important}body #app #info .st{padding:0!important}}

/* ---- v2.4 (owner 2026-10-18): the coin page fully square ("make them all just cubic, on the bottom too"); centred icons ---- */
/* (owner 2026-10-18, later: "too much square now"): only the layout blocks and the activity table at the bottom are square; the buttons, time frames,
   Concepts / Alerts / congresses and everything in Buy / Sell keep their rounded corners */
body #app :is(.tkx,.tkxtabs,.tkxtabs button,.tkxbody,.tkxbody *,.info,.st,#cvw,.scol,#crow){border-radius:0!important}
/* Buy / Sell without its own box: the column between the chart and the screen edge (lines on both sides) is the box */
body #app #side{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
body #app .scol{padding:20px!important}
/* stars and eyes: centred in their buttons */
body .afav,body #favbtn,body .pnleye,body .weye,body #wpanel .wic{display:inline-grid!important;place-items:center!important;padding:0!important;line-height:0!important;text-align:center}
body .afav svg,body #favbtn svg,body .pnleye svg,body .weye svg{display:block;margin:0}
body #favbtn{width:32px!important;height:32px!important;color:var(--t3)}
body #favbtn.on,body .afav.on{color:var(--am)!important}
body .afav{width:22px;height:22px}

/* ---- v2.5 fixes (owner 2026-10-18) ---- */
/* Concepts switches: knob centred in the track */
body #app input.csw{border:0!important;box-sizing:border-box;width:34px;height:20px;padding:0}
body #app input.csw::after{top:50%!important;left:3px;transform:translateY(-50%)!important}
body #app input.csw:checked::after{transform:translate(14px,-50%)!important;background:var(--accink)}
/* coin page footer: the "Updated", disclaimer and copyright lines no longer overlap (an old -14 px margin) */
body #app .disc.afoot,body #app .copy.afoot,body #app #newsst{display:block;margin:0!important;padding:0 20px!important;line-height:1.5}
body #app #newsst{margin-top:10px!important}
body #app .disc.afoot{margin-top:28px!important}
body #app .copy.afoot{margin-top:4px!important;padding-bottom:32px!important}
/* wallet drawer: only as tall as its content (scrolls when the funds need more room); no box around the balance + address */
body #wpanel{bottom:auto!important;height:auto!important;max-height:calc(100vh - var(--navh) - 22px)!important}
body #wpanel .wvhero{border:0!important;outline:0!important;box-shadow:none!important;padding:2px 2px 14px!important;margin:0 0 6px!important}
body #wpanel .wvacts{margin-bottom:12px}
body #wpanel .wtoks:empty,body #wpanel .werr:empty,body #wpanel .wok:empty{display:none}
@media (max-width:899px){body #wpanel{max-height:88vh!important}}
/* markets: the star has its own room left of the rank number (owner 2026-10-18: "the star is too close to the number"); "#" lines up with the numbers */
@media (min-width:900px){
  body #markets .acard{padding-left:40px!important}
  body #markets .afav{left:10px!important;top:50%!important;transform:translateY(-50%)}
  body #markets .mhead{padding-left:40px!important}
}
/* Buy / Sell in dollars (owner 2026-10-18: the "$" sat on top of "0.00"): the $ is a normal character before the number, same size */
body #app #side .tamt{display:flex!important;align-items:baseline;gap:2px;position:static}
body #app #side .tamt .tcur{position:static!important;transform:none!important;left:auto;top:auto;flex:none;font:600 34px/1.15 var(--font)!important;color:var(--t3)!important;pointer-events:none}
body #app #side .tamt.usd input,body #app #side #tamt{padding:0!important}
/* Ethereum / BNB Chain Buy / Sell (owner 2026-10-18: "sell is quite buggy"): the Solana / Ethereum switch as one calm segmented row,
   MAX with 25 % / 50 % under the amount like the Solana panel */
body #app #side .tnet{display:flex;gap:2px;padding:3px;margin:0 0 14px;border:0!important;border-radius:var(--r3);background:var(--card2)!important}
body #app #side .tnet button{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 6px;border:0!important;border-radius:var(--r4)!important;background:transparent!important;color:var(--t3)!important;font:600 13.5px var(--font)!important}
body #app #side .tnet button small{font:500 11px var(--font);color:var(--t3)}
body #app #side .tnet button.on{background:var(--card3)!important;color:var(--t1)!important}
body #app #side .whead{display:flex;align-items:baseline;gap:10px}
body #app #side .tnetl{font:500 12.5px var(--font);color:var(--t3)}
body #app #side .tbr{display:flex;align-items:center;justify-content:space-between;gap:10px}
body #app #side .tbr .tamt{flex:1;min-width:0}
/* "Try out Degen" card: left column under Predictions */
body #hero #degad{grid-column:1!important;grid-row:2!important;justify-self:end!important;align-self:start!important;width:min(340px,100%)!important;margin:0!important;padding:0!important;position:relative;overflow:hidden}
body #hero #degad[hidden]{display:none!important}
body .degad .dgbody{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;border-radius:inherit;transition:background .15s}
body .degad .dgbody:hover{background:var(--card2)}
body .degad .dgart{flex:none;display:block;width:96px;height:52px}
body .degad .dgart svg{width:100%;height:100%;display:block}
body .degad .dgtx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
body .degad .dgtx b{font:650 15px var(--font);color:var(--t1)}
body .degad .dgtx span{font:500 12.5px var(--font);color:var(--t3)}
body .degad .dgarr{color:var(--acc);font:600 16px var(--font);transition:transform .15s}
body .degad .dgbody:hover .dgarr{transform:translateX(3px)}
body .degad .dgx,body .newad .dgx{position:absolute;top:6px;right:6px;z-index:2;width:24px;height:24px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r4);background:transparent;color:var(--t3);font:500 16px/1 var(--font);cursor:pointer}
body .degad .dgx:hover,body .newad .dgx:hover{background:var(--card3);color:var(--t1)}
@media (max-width:1099px){body #hero #degad{grid-column:1!important;grid-row:auto!important;justify-self:stretch!important;width:auto!important;order:4}}
body #hero #qswap{align-self:start!important}
/* Degen card (owner 2026-10-18, final): the first small card again, left column under Predictions; no arrow, no dot in the picture */
/* Degen on phones (owner 2026-10-18: "make closing a position easier on phone"): the positions sit right under the chart (before the order
   box), each position is a stacked row (market + PnL on top, the numbers in a 3-column grid) with a full-width Close button */
@media (max-width:899px){
  body #rlpg #rlbody{display:flex;flex-direction:column}
  body #rlpg .rlstage{display:contents!important}
  body #rlpg .rlhead{order:0}
  body #rlpg .rlstage .rlchart{order:1}
  body #rlpg .rltabs{order:2;width:auto!important;margin-top:12px}
  body #rlpg .rlstage .rlbox{order:3}
  body #rlpg #rlhist{order:4}
  body #rlpg .rltscroll{overflow:visible}
  body #rlpg .rlt,body #rlpg .rlt tbody{display:block;width:100%!important}
  body #rlpg .rlt thead{display:none}
  body #rlpg .rlt tr[data-rltr]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;padding:14px 0;border-bottom:1px solid var(--line)}
  body #rlpg .rlt tr[data-rltr] td{display:block;padding:0!important;border:0!important;white-space:normal;text-align:left!important}
  body #rlpg .rlt tr[data-rltr] td[data-l]::before{content:attr(data-l);display:block;font:500 11.5px var(--font);color:var(--t3);margin-bottom:2px}
  body #rlpg .rlt tr[data-rltr] td.rltmk{grid-column:1 / 3;align-self:center;font-size:15px}
  body #rlpg .rlt tr[data-rltr] td.rltp{grid-column:3;text-align:right!important;font-size:15px}
  body #rlpg .rlt tr[data-rltr] td.rltcl{grid-column:1 / -1}
  body #rlpg .rlt .rltclose{display:block;width:100%;height:44px;border-radius:var(--r3)!important;background:var(--card2)!important;border:1px solid var(--line)!important;color:var(--t1)!important;font:650 15px var(--font)!important;text-decoration:none!important}
  body #rlpg .rlt .rltclose:active{background:var(--card3)!important}
}
/* Ethereum / BNB Chain coins in the wallet's Assets list: same 36-px round icon as the Solana rows */
body #wpanel .wevico{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:var(--card2)}
body #wpanel .wevico img,body #wpanel .wevico .lg{width:36px!important;height:36px!important;border-radius:50%}
/* token picker logos: a fallback (market logo / letter) under the picture, so a token never shows an empty circle (owner 2026-10-18) */
body .qsres .qpic{position:relative;flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--card3)}
body .qsres .qpic>img{position:absolute;inset:0;width:32px!important;height:32px!important;border-radius:50%;object-fit:cover;background:var(--card3)}
body .qsres .qpic>.lg,body .qsres .qpic>img.lg{width:32px!important;height:32px!important}
body .qsres .qplt{font:700 14px var(--font);color:var(--t1)}

/* ---- 2026-10-18: search Esc button, watchlist mode, "New on Aethel" card, "Need help?" note ---- */
body .wlbar{padding-left:6px!important}
body .srin .sresc{flex:none;display:inline-grid;place-items:center;padding:0;border:0;background:transparent;cursor:pointer;border-radius:6px}
body .srin .sresc:hover kbd{color:var(--t1);border-color:var(--line2);background:var(--card3)}
@media (max-width:640px){body .srin .sresc kbd{display:inline-block}}
body .srch.wlmode .srrow{grid-template-columns:26px 28px minmax(0,1fr) auto}
body .srrow .srstar{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:2px;color:var(--t3);border-radius:8px}
body .srrow:hover .srstar{color:var(--t2)}
body .srrow .srstar.on{color:var(--am)}
body #hero #newad{grid-column:1!important;grid-row:3!important;justify-self:end!important;align-self:start!important;width:min(340px,100%)!important;margin:0!important;padding:0!important;position:relative;overflow:hidden}
body #hero #degad[hidden]~#newad{grid-row:2!important}
body #hero #newad[hidden]{display:none!important}
body .newad .nwbody{display:flex;align-items:center;gap:14px;width:100%;padding:14px 40px 22px 16px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;border-radius:inherit;transition:background .15s}
body .newad .nwbody:hover{background:var(--card2)}
body .newad .nwtag{flex:none;display:inline-grid;place-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--acc2,#94a3b8);color:var(--accink);font:700 11px/1 var(--font);letter-spacing:.02em}
body .newad .nwtx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
body .newad .nwtx b{font:650 15px var(--font);color:var(--t1)}
body .newad .nwtx span{font:500 12.5px var(--font);color:var(--t3)}
body .newad.nwin .nwtx{animation:nwin .35s ease-out}
@keyframes nwin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
body .newad .nwdots{position:absolute;left:16px;bottom:9px;display:flex;gap:4px;pointer-events:none}
body .newad .nwdots i{width:5px;height:5px;border-radius:50%;background:var(--line2)}
body .newad .nwdots i.on{background:var(--acc)}
@media (prefers-reduced-motion:reduce){body .newad.nwin .nwtx{animation:none}}
@media (max-width:1099px){body #hero #newad{grid-column:1!important;grid-row:auto!important;justify-self:stretch!important;width:auto!important;order:5}}
body .helpnote{position:fixed;left:20px;bottom:20px;z-index:70;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 40px);padding:12px 10px 12px 16px;border:1px solid var(--line2);border-radius:14px;background:var(--card);color:var(--t2);font:500 14px/1.45 var(--font);box-shadow:0 10px 30px rgba(0,0,0,.4);animation:nwin .3s ease-out}
body .helpnote a{color:var(--acc);font-weight:600}
body .helpnote .hnx{flex:none;width:26px;height:26px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:transparent;color:var(--t3);font:500 17px/1 var(--font);cursor:pointer}
body .helpnote .hnx:hover{background:var(--card3);color:var(--t1)}
@media (max-width:899px){body .helpnote{left:12px;right:12px;bottom:calc(var(--tabh,64px) + 12px + env(safe-area-inset-bottom,0px))}}

/* ---- moving markets bar removed (owner 2026-10-23: "remove the moving bar with markets on top of the screen"); markup + renderTicker stay so the scripts / tests keep working ---- */
:root{--tickh:0px!important}
body #ticker,body .ticker{display:none!important}

/* ---- 2026-10-24 (owner): unwrap arrows, 25 % / 50 % / MAX row, the dollars / token switch ---- */
/* unwrap rows: a proper arrow in a small round chip, all chips in one column (the target coin's text is left-aligned beside it) */
body .uwrow{grid-template-columns:30px minmax(0,1fr) 190px minmax(90px,auto)!important}
body .uwto{display:grid!important;grid-template-columns:30px minmax(0,1fr)!important;column-gap:12px!important;justify-content:start!important;text-align:left!important}
body .uwto .uwarr{grid-row:1 / span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--card2);border:1px solid var(--line);color:var(--t2);font-size:0!important;transition:background .15s,color .15s,transform .15s}
body .uwrow:hover .uwto .uwarr,body .uwrow.on .uwto .uwarr{background:var(--card3);color:var(--t1);transform:translateX(2px)}
body .uwto .uwarr svg{display:block}
body .uwto b,body .uwto .mu{grid-column:2}
@media (max-width:640px){body .uwrow{grid-template-columns:26px minmax(0,1fr) 122px!important}body .uwto{grid-template-columns:26px minmax(0,1fr)!important;column-gap:8px!important}body .uwto .uwarr{width:26px;height:26px}}
/* 25 % / 50 % / MAX: small pills with room above (they sat right under the token button), they light up on hover like buttons */
body .qspct,body .tpct{display:inline-flex;align-items:center;gap:4px;margin-top:8px}
body .qspb,body .tpb,body .maxb,body #qswap .maxb,body .qsmax,body .tmax,body #qswap .qspb,body #app .tpb,body #app .tmax{height:22px!important;padding:0 9px!important;border-radius:999px!important;color:var(--t3)!important;background:transparent!important;cursor:pointer;transition:background .15s,color .15s}
body .qspb:hover,body .tpb:hover,body .maxb:hover,body #qswap .maxb:hover,body #qswap .qspb:hover,body .qsmax:hover,body .tmax:hover,body #app .tpb:hover,body #app .tmax:hover{color:var(--t1)!important;background:var(--card3)!important}
body .qspb:active,body .tpb:active,body .maxb:active,body #qswap .maxb:active{transform:scale(.96)}
/* the dollars / token switch: icon + one word, no box; brighter on hover */
body .unit,body #qswap .unit,body #app #side .unit{display:inline-flex!important;align-items:center;gap:5px;height:22px;margin-left:8px;padding:0 8px!important;border:0!important;border-radius:999px!important;background:transparent!important;color:var(--t3)!important;font:600 11.5px/1 var(--font)!important;letter-spacing:0;cursor:pointer;transition:background .15s,color .15s}
body .unit:hover,body #qswap .unit:hover,body #app #side .unit:hover{background:var(--card3)!important;color:var(--t1)!important}
body .unit .unitico{flex:none;display:block}

/* watchlist row stayed under the Markets rows on scroll (owner 2026-10-24 screenshot): #wlbar is fixed but lives inside #hero, whose
   z-index 1 is the same as the sections after it (they paint later = on top); #hero one layer higher fixes it */
body #hero{z-index:2!important}
/* ---------- 2026-10-25 (owner: "just an arrow swap icon, a circle"; "the main page a circle swap") ---------- */
body .unit,body #qswap .unit,body #app #side .unit,body .evswap .unit{display:inline-grid!important;place-items:center;width:26px;height:26px;margin-left:8px;padding:0!important;border:1px solid var(--line)!important;border-radius:50%!important;background:var(--card2)!important;color:var(--t2)!important;transition:transform .25s cubic-bezier(.3,1.4,.5,1),background .15s,color .15s}
body .unit:hover,body #qswap .unit:hover,body #app #side .unit:hover,body .evswap .unit:hover{background:var(--card3)!important;color:var(--t1)!important;transform:rotate(180deg)}
body .unit .uvh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body #qswap .qsflip,body .evswap .qsflip{border-radius:50%!important}