html,body{margin:0;padding:0;background:#0b0e11}
body{--bg:#0b0e11;--panel:#15181d;--panel2:#101317;--border:#23272f;--text:#eef1f4;--muted:#8b939f;--accent:#97fce4;--ink:#0a2b23;--green:#4ade80;--red:#f8719d;--amber:#fbbf24;font-family:'IBM Plex Sans',sans-serif;font-size:14px;line-height:1.45;color:var(--text)}
body.light{--bg:#f3f4f6;--panel:#ffffff;--panel2:#e9ebee;--border:#d9dde2;--text:#171b20;--muted:#5a6472;--accent:#0f766e;--ink:#ffffff;--green:#059669;--red:#dc2626;--amber:#b45309;background:#f3f4f6}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.75}
@keyframes spin{to{transform:rotate(360deg)}}
/* thin scrollbars in the theme colours instead of the bright OS default */
/* (the page scrollbar belongs to <html>, above body where the theme vars live: hence the fallbacks) */
*{scrollbar-width:thin;scrollbar-color:var(--border,#2c313a) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border,#2c313a);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted,#8b939f);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}

/* ---- top bar (app.js): logo, page tabs (scroll sideways when they do not fit), network, latency, theme, account */
.evmc-nav>button:hover{color:var(--text)!important}
.evmc-acct>summary{list-style:none}
.evmc-acct>summary::-webkit-details-marker{display:none}

/* ---- small screens (phones): the page tabs take a row of their own under logo + controls, content uses the full width ----
   Page styles are inline, so these overrides need !important; classes are set in app.js and the pages. */
@media (max-width:820px){
  .evmc-top{flex-wrap:wrap;padding:8px 12px!important;gap:8px!important}
  .evmc-nav{order:3;flex:1 1 100%!important}
  .evmc-topctl{flex:1 1 0!important;min-width:0;justify-content:flex-end}
  .evmc-topctl select{flex:0 1 auto;min-width:0;max-width:160px}
  .evmc-content{padding:12px!important}
  .evmc-content input,.evmc-content select,.evmc-content textarea{max-width:100%}
  .evmc-stack{grid-template-columns:minmax(0,1fr)!important}
  .evmc-tabs{flex-wrap:nowrap!important;overflow-x:auto;max-width:100%}
  .evmc-tabs>button{white-space:nowrap;flex:none}
  /* market rows: token on the left over two lines, market cap above the pool / raised amount on the right */
  .evmc-mrow{grid-template-columns:minmax(0,1fr) auto!important;row-gap:2px!important;column-gap:10px!important}
  .evmc-mrow>:first-child{grid-row:span 2}
  .evmc-mhead{grid-template-columns:minmax(0,1fr) auto!important}
  .evmc-sm-hide{display:none!important}
  .evmc-listpanel{max-height:62vh!important}
  .evmc-trow{grid-template-columns:18px minmax(0,1fr) 72px 44px 18px!important;padding-left:12px!important;padding-right:12px!important;gap:6px!important}
}

/* ---- Trenches (#/agent?tab=trenches): three columns side by side; phones show one column at a time behind a switch */
.evmc-tr-switch{display:none!important}
@media (max-width:820px){
  .evmc-tr-switch{display:inline-flex!important}
  .evmc-tr-grid{grid-template-columns:minmax(0,1fr)!important}
  .evmc-tr-col:not(.evmc-on){display:none!important}
}

/* ---- Holding panel (#/agent): a full-width bottom sheet on phones */
@media (max-width:820px){
  .evmc-hold{left:0!important;right:0!important;bottom:0!important;width:auto!important;max-width:none!important;max-height:75vh!important;border-radius:14px 14px 0 0!important}
}

/* ---- Agent page (#/agent): the Trenches design's Geist fonts, and its palette in the dark theme only (light keeps body.light) */
.evmc-agent{--text2:var(--text);font-family:'Geist',system-ui,sans-serif;color:var(--text)}
body:not(.light) .evmc-agent{--bg:#0f1114;--panel:#16181c;--panel2:#1e2126;--border:#23272d;--text:#f1f2f4;--text2:#d0d3d8;--muted:#7f858d;--accent:#4cd3c2;--ink:#03201a;--green:#2ebd85;--red:#f0647a;--amber:#ffb347}
.evmc-agent input::placeholder{color:var(--muted)}
.evmc-ag-tab:hover,.evmc-tr-row:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--muted) 45%,transparent)}
.evmc-tr-ico{width:22px;height:22px;display:grid;place-items:center;border-radius:5px;color:var(--muted);font-size:12.5px}
.evmc-tr-ico:hover{background:var(--panel2);color:var(--text);text-decoration:none}
.evmc-tr-buy:hover{filter:brightness(1.25)}
.evmc-tr-ghost:hover{background:var(--panel2)}
/* Trenches rows: off-screen rows skip style/layout/paint; a new row flashes through an overlay whose opacity alone animates
   (compositor only: animating the row's own background / box-shadow repainted the main thread every frame) */
.evmc-tr-row{position:relative;content-visibility:auto;contain-intrinsic-size:auto 130px}
.evmc-tr-row.evmc-flash::after{content:'';position:absolute;inset:0;pointer-events:none;background:rgba(76,211,194,.16);box-shadow:inset 0 0 0 1px rgba(76,211,194,.7);animation:rowflash 1.7s ease-out forwards}
@keyframes rowflash{from{opacity:1}to{opacity:0}}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- Token page (tokendata.js): candle chart box (its 'Back to latest' pill) or the GMGN embed, and the trader drawer (right side; a bottom sheet on phones), under the toasts (70) */
.evmc-td-chart{position:relative;height:420px}
.evmc-td-frame{display:block;width:100%;height:520px;border:0;border-radius:9px;background:var(--panel2)}
.evmc-td-latest{position:absolute;z-index:3;right:80px;bottom:30px;font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid rgba(240,185,11,.5);background:rgba(240,185,11,.14);color:#f0b90b;cursor:pointer}
.evmc-td-back{position:fixed;inset:0;z-index:60;background:rgba(3,7,11,.5)}
.evmc-td-drawer{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(560px,100vw);box-sizing:border-box;display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--border);box-shadow:-12px 0 40px rgba(0,0,0,.35);color:var(--text);font-size:13px}
@media (max-width:820px){
  .evmc-td-chart{height:320px}
  .evmc-td-frame{height:420px}
  .evmc-td-drawer{top:auto;left:0;width:auto;max-height:85vh;border-left:none;border-top:1px solid var(--border);border-radius:14px 14px 0 0}
}

/* ---- Agent header search (searchmodal.js): the box shrinks on phones, the modal becomes a full-screen sheet */
.evmc-srch-row:hover{filter:brightness(1.12)}
.evmc-srch-x i{display:none}
@media (max-width:820px){
  .evmc-ag-find{flex:1 1 120px!important}
  .evmc-ag-find kbd{display:none}
  .evmc-srch-back{padding:0!important}
  .evmc-srch{width:100%!important;height:100%;max-height:none!important;border:0!important;border-radius:0!important}
  .evmc-srch-x{display:grid;place-items:center;width:32px;height:32px;padding:0!important;font-size:15px!important}
  .evmc-srch-x span{display:none}
  .evmc-srch-x i{display:inline-block}
  /* stats go under the name: as a nowrap column they squeezed the name to nothing */
  .evmc-srch-row{grid-template-columns:auto minmax(0,1fr) auto!important;column-gap:10px!important;row-gap:5px;padding:9px 12px!important}
  .evmc-srch-row>:first-child{grid-row:span 2}
  .evmc-srch-stats{grid-column:2/-1;grid-row:2;flex-direction:row!important;flex-wrap:wrap;align-items:baseline!important;gap:3px 10px!important}
}