:root{
  --bg:#07090d; --bg2:#0b0e14; --card:#0f131b; --card2:#141926;
  --line:#1c2231; --line2:#2a3245;
  --txt:#e8ecf5; --dim:#8792a8; --dim2:#5b6479;
  --up:#00e08a; --down:#ff4d6a; --acc:#00d4ff; --acc2:#7c5cff;
  --warn:#ffb020; --crit:#ff3860;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--txt);font-family:var(--sans);
  font-size:13px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit;color:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#3a4459}
.mono{font-family:var(--mono)}
.up{color:var(--up)} .down{color:var(--down)} .dim{color:var(--dim)}

/* ---------- top bar ---------- */
.top{
  position:sticky;top:0;z-index:50;height:52px;display:flex;align-items:center;
  gap:14px;padding:0 14px;background:rgba(9,11,17,.92);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;letter-spacing:-.4px}
.brand .dot{
  width:9px;height:9px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 12px var(--acc);animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.chains{display:flex;gap:3px;background:var(--card);padding:3px;border-radius:9px;border:1px solid var(--line)}
.chip{
  padding:5px 11px;border-radius:7px;font-size:12px;font-weight:600;color:var(--dim);
  transition:.15s;white-space:nowrap;
}
.chip:hover{color:var(--txt);background:var(--card2)}
.chip.on{background:var(--acc);color:#04121a;box-shadow:0 0 16px rgba(0,212,255,.3)}
.searchwrap{position:relative;flex:1;max-width:420px}
.search{
  width:100%;height:34px;padding:0 12px 0 32px;border-radius:9px;
  background:var(--card);border:1px solid var(--line);font-size:12.5px;outline:none;transition:.15s;
}
.search:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(0,212,255,.1)}
.searchwrap .ico{position:absolute;left:11px;top:9px;color:var(--dim2);pointer-events:none}
.results{
  position:absolute;top:40px;left:0;right:0;max-height:60vh;overflow:auto;z-index:60;
  background:var(--card);border:1px solid var(--line2);border-radius:11px;
  box-shadow:0 20px 60px rgba(0,0,0,.7);display:none;
}
.results.on{display:block}
.rrow{display:flex;align-items:center;gap:9px;padding:9px 11px;border-bottom:1px solid var(--line);cursor:pointer}
.rrow:hover{background:var(--card2)}
.rrow:last-child{border-bottom:none}
.spacer{flex:1}
.btn{
  height:34px;padding:0 14px;border-radius:9px;background:var(--card);
  border:1px solid var(--line);font-size:12.5px;font-weight:600;transition:.15s;
  display:inline-flex;align-items:center;gap:7px;
}
.btn:hover{border-color:var(--line2);background:var(--card2)}
.btn.primary{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#04121a;border:none;font-weight:700}
.btn.primary:hover{filter:brightness(1.1)}
.btn.buy{background:var(--up);color:#03170f;border:none;font-weight:700}
.btn.sell{background:var(--down);color:#1a0308;border:none;font-weight:700}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- layout ----------
   Three columns like a real terminal: market list (fixed), chart (flexible
   hero), trade rail (fixed). The chart gets the leftover width because it is
   the primary surface — an earlier 2-column split left it 232px wide. */
.wrap{display:flex;height:calc(100vh - 52px)}
.main{width:600px;flex-shrink:0;overflow:auto;min-width:0;border-right:1px solid var(--line)}
.center{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.side{
  width:320px;flex-shrink:0;border-left:1px solid var(--line);
  background:var(--bg2);overflow:auto;
}
@media(min-width:1700px){ .main{width:720px} }
@media(max-width:1300px){ .main{width:470px} .side{width:290px} }

/* ---------- toolbar ---------- */
.bar{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg);z-index:20;
  overflow-x:auto;scrollbar-width:none;
}
.bar::-webkit-scrollbar{display:none}
.bar>*{flex-shrink:0}
.tabs{display:flex;gap:2px;background:var(--card);padding:3px;border-radius:9px;border:1px solid var(--line)}
.filt{
  height:30px;padding:0 9px;border-radius:8px;background:var(--card);
  border:1px solid var(--line);font-size:11.5px;outline:none;
}
.filt:focus{border-color:var(--acc)}
.lbl{font-size:10.5px;color:var(--dim2);text-transform:uppercase;letter-spacing:.6px;font-weight:700}

/* ---------- token table ---------- */
table{width:100%;border-collapse:collapse}
thead th{
  position:sticky;top:0;background:var(--bg2);z-index:10;
  font-size:10.5px;color:var(--dim2);text-transform:uppercase;letter-spacing:.6px;
  font-weight:700;text-align:right;padding:8px 8px;border-bottom:1px solid var(--line);
  cursor:pointer;user-select:none;white-space:nowrap;
}
thead th:first-child{text-align:left}
thead th:hover{color:var(--acc)}
thead th.sorted{color:var(--acc)}
tbody tr{border-bottom:1px solid rgba(28,34,49,.5);cursor:pointer;transition:background .1s}
tbody tr:hover{background:var(--card)}
tbody tr.sel{background:rgba(0,212,255,.07);box-shadow:inset 2px 0 0 var(--acc)}
tbody td{padding:9px 8px;text-align:right;white-space:nowrap;font-size:12.5px}
tbody td:first-child{text-align:left}
.tok{display:flex;align-items:center;gap:9px;min-width:0}
.av{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;background:var(--card2);
  object-fit:cover;border:1px solid var(--line);
}
.avf{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#04121a;border:1px solid var(--line);
}
.tname{font-weight:700;font-size:12.5px;line-height:1.25}
.tsub{font-size:10.5px;color:var(--dim2);line-height:1.25}
.badge{
  display:inline-block;padding:1.5px 5px;border-radius:5px;font-size:9.5px;
  font-weight:800;letter-spacing:.3px;text-transform:uppercase;
}
.b-new{background:rgba(0,224,138,.15);color:var(--up)}
.b-warn{background:rgba(255,176,32,.15);color:var(--warn)}
.b-crit{background:rgba(255,56,96,.15);color:var(--crit)}
.b-ok{background:rgba(0,212,255,.13);color:var(--acc)}
.spark{width:64px;height:22px;vertical-align:middle}
/* Column priority for the fixed-width market list: Pair, Price, 24h and the
   Buy button always survive; the rest drop as the column narrows. Clipping the
   table (the previous behaviour) hid Liquidity/Volume entirely with no cue. */
@media(max-width:1699px){
  .main table .c-fdv{display:none}
}
@media(max-width:1500px){
  .main table .c-txns{display:none}
}
@media(max-width:1300px){
  .main table .c-vol{display:none}
}
.qbuy{
  padding:4px 10px;border-radius:7px;background:rgba(0,224,138,.13);
  color:var(--up);font-weight:800;font-size:11px;border:1px solid rgba(0,224,138,.25);
}
.qbuy:hover{background:var(--up);color:#03170f}

/* ---------- chart panel ---------- */
.chartwrap{display:flex;flex-direction:column;height:100%}
.chead{
  display:flex;align-items:center;gap:12px;padding:11px 14px;
  border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.price{font-size:22px;font-weight:800;letter-spacing:-.5px;font-family:var(--mono)}
.tfs{display:flex;gap:2px;background:var(--card);padding:3px;border-radius:8px;border:1px solid var(--line)}
.tf{padding:4px 9px;border-radius:6px;font-size:11px;font-weight:700;color:var(--dim)}
.tf.on{background:var(--acc);color:#04121a}
#chart{flex:1;min-height:340px;position:relative}
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:1px;background:var(--line);border-top:1px solid var(--line);
}
.stat{background:var(--bg);padding:9px 12px}
.stat .k{font-size:10px;color:var(--dim2);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.stat .v{font-size:14px;font-weight:700;font-family:var(--mono);margin-top:2px}

/* ---------- side panel ---------- */
.sec{padding:12px 14px;border-bottom:1px solid var(--line)}
.sech{
  display:flex;align-items:center;justify-content:space-between;
  font-size:10.5px;color:var(--dim2);text-transform:uppercase;
  letter-spacing:.7px;font-weight:800;margin-bottom:9px;
}
.amts{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px}
.amt{
  padding:7px 0;border-radius:8px;background:var(--card);border:1px solid var(--line);
  font-size:11.5px;font-weight:700;text-align:center;transition:.12s;
}
.amt:hover{border-color:var(--acc);color:var(--acc)}
.amt.on{background:var(--acc);color:#04121a;border-color:var(--acc)}
.inp{
  width:100%;height:38px;padding:0 12px;border-radius:9px;background:var(--card);
  border:1px solid var(--line);font-size:14px;font-weight:700;font-family:var(--mono);outline:none;
}
.inp:focus{border-color:var(--acc)}
.sideby{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.kv{display:flex;justify-content:space-between;padding:4px 0;font-size:11.5px}
.kv .k{color:var(--dim)}
.kv .v{font-family:var(--mono);font-weight:600}
.risk{display:flex;gap:7px;align-items:flex-start;padding:5px 0;font-size:11.5px;line-height:1.4}
.risk .d{width:6px;height:6px;border-radius:50%;margin-top:5px;flex-shrink:0}
.gauge{height:5px;border-radius:3px;background:var(--card2);overflow:hidden;margin:7px 0}
.gauge i{display:block;height:100%;border-radius:3px;transition:width .4s}
.hold{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(28,34,49,.6)}
.hold:last-child{border-bottom:none}
.empty{padding:22px 14px;text-align:center;color:var(--dim2);font-size:12px}

/* ---------- toasts + modal ---------- */
#toasts{position:fixed;bottom:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{
  min-width:260px;max-width:380px;padding:11px 13px;border-radius:11px;
  background:var(--card);border:1px solid var(--line2);font-size:12.5px;
  box-shadow:0 12px 40px rgba(0,0,0,.6);animation:slidein .25s ease;
  display:flex;gap:9px;align-items:flex-start;
}
.toast.ok{border-color:rgba(0,224,138,.4)}
.toast.err{border-color:rgba(255,77,106,.4)}
@keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.backdrop{
  position:fixed;inset:0;z-index:150;background:rgba(4,6,10,.75);
  backdrop-filter:blur(6px);display:grid;place-items:center;padding:18px;
}
.modal{
  width:100%;max-width:430px;background:var(--card);border:1px solid var(--line2);
  border-radius:16px;padding:20px;box-shadow:0 30px 90px rgba(0,0,0,.8);
  animation:popin .2s cubic-bezier(.2,1.2,.4,1);max-height:88vh;overflow:auto;
}
@keyframes popin{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.mtitle{font-size:16px;font-weight:800;margin-bottom:6px}
.mtxt{font-size:12.5px;color:var(--dim);line-height:1.55;margin-bottom:14px}
.warnbox{
  padding:10px 12px;border-radius:9px;background:rgba(255,176,32,.08);
  border:1px solid rgba(255,176,32,.25);font-size:11.5px;line-height:1.5;color:#ffd58a;margin:10px 0;
}
.wallets{display:grid;gap:7px;margin:12px 0}
.wrow{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;
  background:var(--card2);border:1px solid var(--line);transition:.14s;
}
.wrow:hover{border-color:var(--acc);transform:translateY(-1px)}
.wico{width:26px;height:26px;border-radius:7px;object-fit:contain}
.seed{
  font-family:var(--mono);font-size:11.5px;line-height:1.7;padding:12px;
  border-radius:9px;background:var(--bg);border:1px solid var(--line2);
  word-break:break-all;user-select:all;
}
.spin{
  width:15px;height:15px;border:2px solid var(--line2);border-top-color:var(--acc);
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,var(--card) 25%,var(--card2) 50%,var(--card) 75%);
  background-size:200% 100%;animation:sk 1.2s infinite;border-radius:5px}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- mobile ---------- */
.mobnav{display:none}
@media(max-width:940px){
  .wrap{flex-direction:column;height:auto}
  .main{width:100%;border-right:none}
  .center{overflow:visible}
  .side{width:100%;border-left:none;border-top:1px solid var(--line)}
  .searchwrap{max-width:none}
  .top{flex-wrap:wrap;height:auto;padding:8px 10px;gap:8px}
  .chains{order:3;width:100%;overflow-x:auto}
  tbody td:nth-child(n+6),thead th:nth-child(n+6){display:none}
  .mobnav{
    display:flex;position:sticky;bottom:0;z-index:40;border-top:1px solid var(--line);
    background:var(--bg2);
  }
  .mobnav button{flex:1;padding:11px 0;font-size:11.5px;font-weight:700;color:var(--dim)}
  .mobnav button.on{color:var(--acc);box-shadow:inset 0 2px 0 var(--acc)}
  .main.hide,.side.hide,.center.hide{display:none}
}

/* Cross-link to the Memescope launch wall. */
.scopelink{
  font-weight:800;font-size:12px;white-space:nowrap;
  border-color:rgba(240,185,11,.35)!important;color:#f0b90b!important;
  background:rgba(240,185,11,.08)!important;
}
.scopelink:hover{background:rgba(240,185,11,.18)!important;border-color:#f0b90b!important}
a.brand{text-decoration:none;color:inherit}
.filt{
  background:var(--card2);border:1px solid var(--line);color:var(--fg);
  border-radius:7px;padding:5px 8px;font-size:11.5px;font-family:var(--mono);
}
.filt:focus{outline:none;border-color:var(--acc)}
@media(max-width:600px){ .scopelink{font-size:11px;padding:4px 7px} }