:root{
  --bg:#07090c; --panel:#0d1116; --panel2:#11161d; --line:#1c232d;
  --text:#e7edf5; --dim:#8b97a8; --faint:#5a6675;
  --up:#00d68f; --down:#ff4d5e; --accent:#00d68f; --accent2:#5ee7c1;
  --mono:'SF Mono',ui-monospace,'JetBrains Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); min-height:100vh;
  font:14px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
.num{text-align:right}
code{font-family:var(--mono)}

/* topbar */
.topbar{
  display:flex; align-items:center; gap:24px; padding:12px 20px;
  border-bottom:1px solid var(--line); background:var(--panel);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:10px}
.mark{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--accent),#0b8f63);box-shadow:0 0 16px rgba(0,214,143,.35)}
.brand-name{font-weight:700; letter-spacing:.14em; font-size:13px}
.brand-sub{font-size:10px; color:var(--faint); letter-spacing:.08em}

.chainstat{display:flex; gap:22px; margin-left:auto}
.stat{display:flex; flex-direction:column; gap:2px}
.stat label{font-size:9px; letter-spacing:.12em; color:var(--faint); text-transform:uppercase}
.stat span{font-family:var(--mono); font-size:12px}
.phase{color:var(--accent)}
.phase.err{color:var(--down)}

.wallet{display:flex; align-items:center; gap:10px}
.netpill{font-size:10px; padding:4px 8px; border-radius:999px; border:1px solid var(--line); color:var(--dim); font-family:var(--mono)}
.netpill.bad{border-color:var(--down); color:var(--down)}

/* buttons */
.btn{
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  padding:8px 14px; border-radius:8px; cursor:pointer; font-size:12px; font-weight:600;
  transition:.12s; font-family:inherit;
}
.btn:hover{border-color:#2b3644; background:#161d26}
.btn.primary{background:var(--accent); color:#04140e; border-color:transparent}
.btn.primary:hover{background:var(--accent2)}
.btn.primary:disabled{background:#1a2129; color:var(--faint); cursor:not-allowed}
.btn.ghost{background:transparent}
.btn.tiny{padding:3px 8px; font-size:10px; border-radius:6px; text-decoration:none; display:inline-block}
.btn.wide{width:100%; padding:13px; font-size:13px; margin-top:12px}

main{padding:20px; max-width:1600px; margin:0 auto}

/* toolbar */
.toolbar{display:flex; gap:12px; margin-bottom:14px; flex-wrap:wrap}
#search{
  flex:1; min-width:260px; background:var(--panel); border:1px solid var(--line);
  border-radius:9px; padding:11px 14px; color:var(--text); font-size:13px; font-family:inherit;
}
#search:focus{outline:none; border-color:var(--accent)}
.filters{display:flex; gap:10px; align-items:center}
select{
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  border-radius:9px; padding:10px; font-size:12px; font-family:inherit; cursor:pointer;
}
.chk{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); cursor:pointer; white-space:nowrap}

/* table */
.tablewrap{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel)}
table{width:100%; border-collapse:collapse}
thead th{
  text-align:left; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); padding:11px 14px; border-bottom:1px solid var(--line); background:var(--panel2);
  font-weight:600;
}
thead th.num{text-align:right}
tbody tr{border-bottom:1px solid #12171e; cursor:pointer; transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:#121821}
tbody td{padding:11px 14px; font-size:13px}
tbody td.num{text-align:right; font-family:var(--mono); font-size:12px}
tr.empty td{text-align:center; color:var(--faint); padding:36px; cursor:default}
tr.empty:hover{background:none}

.tokcell{display:flex; align-items:center; gap:10px}
.tokicon{width:24px;height:24px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);object-fit:cover;flex-shrink:0}
.toksym{font-weight:600}
.tokname{font-size:11px; color:var(--faint)}
.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--faint)}
.badge{font-size:9px; padding:2px 6px; border-radius:5px; border:1px solid var(--line); color:var(--dim); font-family:var(--mono)}
.badge.rh{border-color:var(--accent); color:var(--accent)}
.foot{padding:10px 4px; font-size:11px; color:var(--faint)}

/* token view */
.back{margin-bottom:14px}
.tokenhead{display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.ticon{width:48px;height:48px;border-radius:50%;background:var(--panel2);border:1px solid var(--line)}
.tmeta h1{font-size:22px; display:flex; align-items:baseline; gap:10px}
.tmeta h1 small{font-size:13px; color:var(--faint); font-weight:400}
.taddr{display:flex; align-items:center; gap:8px; margin-top:5px}
.taddr code{font-size:11px; color:var(--dim)}
.tprice{margin-left:auto; text-align:right}
.tprice .big{font-size:28px; font-family:var(--mono); font-weight:600}
.tprice .sub{font-size:12px; color:var(--faint); font-family:var(--mono); margin-top:3px}
.chg.up{color:var(--up)} .chg.down{color:var(--down)}

.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:13px 15px}
.card label{display:block; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:5px}
.card span{font-family:var(--mono); font-size:17px}

.split{display:grid; grid-template-columns:1fr 360px; gap:18px; align-items:start}
.chartpane{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px}
.chartbar{display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap}
.intervals{display:flex; gap:4px}
.intervals button{
  background:transparent; border:1px solid var(--line); color:var(--dim);
  padding:5px 10px; border-radius:6px; font-size:11px; cursor:pointer; font-family:var(--mono);
}
.intervals button.on{background:var(--accent); color:#04140e; border-color:transparent; font-weight:700}
.chartnote{font-size:10px; color:var(--faint); margin-left:auto; font-family:var(--mono)}
#chart{width:100%; display:block; border-radius:8px}
.chart-empty{padding:60px 20px; text-align:center; color:var(--faint); font-size:13px}

.section{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:20px 0 10px}
.tradeswrap{border:1px solid var(--line); border-radius:10px; overflow:hidden; max-height:300px; overflow-y:auto}
#trades tbody tr{cursor:default}
#trades tbody tr:hover{background:#121821}
.side-buy{color:var(--up); font-weight:600}
.side-sell{color:var(--down); font-weight:600}
#trades a{color:var(--dim); font-family:var(--mono); font-size:11px}

/* swap */
.swappane{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; position:sticky; top:78px}
.swaphead{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.swaphead h3{font-size:14px}
.noncustodial{font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); padding:3px 7px; border-radius:5px; cursor:help}
.swapbox{background:var(--panel2); border:1px solid var(--line); border-radius:11px; padding:12px}
.swapbox label{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.swaprow{display:flex; align-items:center; gap:8px; margin-top:7px}
.swaprow input{
  flex:1; background:transparent; border:none; color:var(--text);
  font-size:22px; font-family:var(--mono); width:100%; min-width:0;
}
.swaprow input:focus{outline:none}
.tokensel{
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  padding:7px 12px; border-radius:999px; font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap;
}
.tokensel:hover{border-color:var(--accent)}
.bal{font-size:10px; color:var(--faint); margin-top:6px; font-family:var(--mono); min-height:13px}
.flip{
  display:block; margin:-9px auto; position:relative; z-index:2;
  width:32px; height:32px; border-radius:9px; background:var(--panel2);
  border:1px solid var(--line); color:var(--dim); cursor:pointer; font-size:14px;
}
.flip:hover{border-color:var(--accent); color:var(--accent)}
.quotemeta{margin-top:12px; font-size:11px; font-family:var(--mono); color:var(--dim); min-height:16px}
.quotemeta div{display:flex; justify-content:space-between; padding:3px 0}
.quotemeta .warn{color:var(--down)}
.slippage{margin-top:12px}
.slippage label{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.slipbtns{display:flex; gap:5px; margin-top:6px}
.slipbtns button{
  flex:1; background:var(--panel2); border:1px solid var(--line); color:var(--dim);
  padding:6px; border-radius:7px; font-size:11px; cursor:pointer; font-family:var(--mono);
}
.slipbtns button.on{background:var(--accent); color:#04140e; border-color:transparent; font-weight:700}
.swapmsg{margin-top:9px; font-size:11px; min-height:15px; word-break:break-all}
.swapmsg.err{color:var(--down)}
.swapmsg.ok{color:var(--up)}
.swapmsg a{color:var(--accent)}
.disclaimer{margin-top:14px; font-size:10px; color:var(--faint); line-height:1.5; border-top:1px solid var(--line); padding-top:10px}

/* token picker modal */
.picker{position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:50}
.picker-inner{background:var(--panel); border:1px solid var(--line); border-radius:14px; width:min(440px,92vw); max-height:70vh; display:flex; flex-direction:column; overflow:hidden}
.picker-inner header{padding:14px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center}
.picker-inner input{width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:10px 12px; color:var(--text); margin:12px 16px; width:calc(100% - 32px); font-family:inherit}
.picker-list{overflow-y:auto; padding:0 8px 10px}
.picker-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; cursor:pointer}
.picker-item:hover{background:var(--panel2)}
.picker-item .r{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--faint)}

.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:11px 18px; font-size:12px; z-index:100; box-shadow:0 10px 40px rgba(0,0,0,.5);
}

@media(max-width:1080px){
  .split{grid-template-columns:1fr}
  .swappane{position:static}
  .cards{grid-template-columns:repeat(2,1fr)}
  .chainstat{display:none}
}

/* ---------------- nav ---------------- */
.mainnav { display:flex; gap:4px; margin-left:24px; }
.navbtn {
  background:transparent; border:1px solid transparent; color:#7b8896;
  padding:7px 14px; border-radius:7px; cursor:pointer; font-size:13px; font-weight:600;
}
.navbtn:hover { color:#e7edf5; background:#111820; }
.navbtn.on { color:#e7edf5; background:#131b24; border-color:#1f2833; }

/* ---------------- panels ---------------- */
.panelwrap { display:flex; justify-content:center; gap:20px; padding:8px 0 40px; }
.panelwrap.wide { align-items:flex-start; }
.panel {
  background:#0b1015; border:1px solid #1a222c; border-radius:12px;
  padding:22px; width:460px; max-width:100%;
}
.panel h2 { margin:0 0 14px; font-size:17px; }
.panel label {
  display:block; margin:14px 0 5px; font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; color:#6c7887; font-weight:600;
}
.panel input[type=text], .panel input[type=number], .panel textarea, .panel input[type=file] {
  width:100%; box-sizing:border-box; background:#070b0f; border:1px solid #1e2731;
  border-radius:8px; padding:11px 12px; color:#e7edf5; font-size:14px; font-family:inherit;
}
.panel input:focus, .panel textarea:focus { outline:none; border-color:#2f6d55; }
.row2 { display:flex; gap:12px; }
.row2 > div { flex:1; }
.checkline {
  display:flex !important; align-items:flex-start; gap:9px; margin-top:16px;
  text-transform:none !important; letter-spacing:0 !important; color:#aab4c0 !important;
  font-size:12.5px !important; font-weight:400 !important; line-height:1.45;
}
.checkline input { margin-top:2px; }
.btn.big { width:100%; margin-top:18px; padding:13px; font-size:14px; }

.notice {
  background:#0d141b; border:1px solid #1c2530; border-left:3px solid #2f6d55;
  border-radius:6px; padding:10px 12px; font-size:12.5px; color:#9fb0c0; line-height:1.5;
  margin-bottom:6px;
}
.notice.err { border-left-color:#c9603f; color:#e0b3a3; }
.notice code { background:#060a0d; padding:1px 5px; border-radius:4px; color:#cfe3d8; }
.warntext { color:#e3a06a; font-size:12px; margin-top:8px; line-height:1.45; }
.fineprint { color:#5f6b79; font-size:11.5px; line-height:1.55; margin-top:18px; }

/* ---------------- nft ---------------- */
.nftlist { display:flex; flex-direction:column; gap:8px; }
.nftcard {
  display:flex; align-items:center; gap:11px; padding:9px; border-radius:9px;
  border:1px solid #161d26; cursor:pointer;
}
.nftcard:hover { background:#111820; border-color:#25303c; }
.nftcard img { width:46px; height:46px; border-radius:7px; object-fit:cover; background:#0e141a; }

.mintpanel { text-align:center; }
.mintart {
  width:100%; max-width:340px; border-radius:12px; margin:0 auto 16px;
  display:block; background:#0e141a;
}
.mintpanel label { text-align:left; }
.progress { height:5px; background:#131b23; border-radius:3px; overflow:hidden; margin:10px 0 4px; }
.progress > div { height:100%; background:#00d68f; width:0%; transition:width .3s; }

/* ── BRIDGE ──────────────────────────────────────────────────────────────────
   Lives in styles.css, not inline in index.html — the terminal loads all of its
   styling from here. Uses this file's palette (--panel/--dim/--text), NOT the mint
   page's (--card/--muted/--fg); an unresolved var() silently collapses to nothing,
   which is how a panel ends up invisible. */
.bridge{max-width:520px;margin:26px auto;padding:18px;border:1px solid var(--line);
  border-radius:14px;background:var(--panel);text-align:left}
.bridge-head b{display:block;font-size:14px;color:var(--text)}
.bridge-sub{display:block;font-size:11.5px;color:var(--dim);margin-top:3px}

.bridge-notice{padding:11px 13px;border-radius:9px;margin:14px 0;font-size:11.5px;line-height:1.5}
.bridge-notice b{display:block;margin-bottom:4px}
.bridge-notice p{margin:0;color:var(--dim)}
.bridge-warn{border:1px solid #6b4a10;background:#1d1608}
.bridge-warn b{color:#f5b942}

.bridge-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bridge-row label{width:92px;font-size:11.5px;color:var(--dim);flex:none}
.bridge-row select,.bridge-row input{flex:1;padding:9px 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:13px}

.bridge-quote{margin:12px 0;padding:11px 13px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel2);font-size:12px}
.bridge-quote div{display:flex;justify-content:space-between;padding:3px 0}
.bridge-quote span{color:var(--dim)}
.bridge-quote b{color:var(--text)}

.bridge-btn{width:100%;padding:11px;border-radius:10px;border:1px solid var(--accent);
  background:transparent;color:var(--accent);font-weight:700;cursor:pointer;font-size:13px}
.bridge-btn:disabled{opacity:.45;cursor:default}

.bridge-msg{font-size:11.5px;margin:9px 0 0;min-height:15px;color:var(--dim)}
.bridge-msg.err{color:var(--down)}
.bridge-msg.ok{color:var(--up)}
.bridge-foot{margin-top:11px;font-size:10.5px;color:var(--dim);line-height:1.5}

/* ── ARCHER ──────────────────────────────────────────────────────────────────
   Live new-pair feed. Flags render NEXT TO the score, never behind a tooltip —
   a bare number on a brand-new token reads as a recommendation, and most new
   pairs on any chain go to zero. The reasons stay visible. */
.archhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin:18px 0 14px;flex-wrap:wrap}
.archhead h2{font-size:16px;letter-spacing:1px;color:var(--text)}
.archhead p{font-size:12px;color:var(--dim);margin-top:3px}
#arch-window{padding:8px 11px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);font-size:12.5px}

.archwrap{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow-x:auto}
.archtable{width:100%;border-collapse:collapse;font-size:12.5px;min-width:900px}
.archtable th{text-align:left;padding:11px 12px;font-size:10px;letter-spacing:.8px;
  color:var(--faint);border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap}
.archtable td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.archtable tr:last-child td{border-bottom:none}
.archtable tbody tr:hover{background:var(--panel2)}

/* A row seen for the first time gets a brief highlight — the whole point is catching
   what just appeared, so it should be visible without reading timestamps. */
@keyframes archflash{from{background:rgba(0,214,143,.13)}to{background:transparent}}
.arch-new{animation:archflash 2.6s ease-out}

.arch-tok{display:flex;align-items:center;gap:9px}
.arch-tok img,.arch-tok .noicon{width:26px;height:26px;border-radius:50%;flex:none;
  object-fit:cover;border:1px solid var(--line);background:var(--panel2)}
.arch-tok b{display:block;color:var(--text)}
.arch-tok span{display:block;font-size:10.5px;color:var(--dim);max-width:150px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.archtable .dim{color:var(--faint)}

.sc{display:inline-block;min-width:34px;text-align:center;padding:3px 7px;border-radius:7px;
  font-weight:700;font-variant-numeric:tabular-nums;border:1px solid}
.sc-hi{color:var(--up);border-color:#1c4a38;background:rgba(0,214,143,.08)}
.sc-mid{color:#f5b942;border-color:#4a3a10;background:rgba(245,185,66,.07)}
.sc-lo{color:var(--down);border-color:#4a1c22;background:rgba(255,77,94,.07)}

.arch-flags{max-width:260px}
.fl{display:inline-block;font-size:10px;padding:2px 6px;border-radius:5px;margin:1px 2px 1px 0;
  border:1px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.fl-bad{color:var(--down);border-color:#4a1c22;background:rgba(255,77,94,.06)}
.fl-good{color:var(--up);border-color:#1c4a38;background:rgba(0,214,143,.06)}

.arch-act{white-space:nowrap;text-align:right}
.ab{padding:5px 9px;margin-left:4px;border-radius:7px;border:1px solid var(--line);
  background:transparent;color:var(--dim);font-size:11px;cursor:pointer;font-weight:600}
.ab:hover{color:var(--text);border-color:var(--faint)}
.ab-buy{color:var(--accent);border-color:#1c4a38}
.ab-copy{font-family:var(--mono);min-width:34px}

.arch-empty{text-align:center;padding:34px 12px;color:var(--dim)}
.archnote{margin:11px 2px;font-size:10.5px;color:var(--faint);line-height:1.5}