:root {
  --bg:#080B14;--surface:#0D1121;--card:#111827;--card2:#141C2E;
  --i6:#4f46e5;--i5:#6366f1;--i4:#818cf8;--i3:#a5b4fc;
  --g:#10b981;--gd:#064e3b;--r:#ef4444;--rd:#450a0a;--y:#f59e0b;--yd:#451a03;
  --t1:#e2e8f0;--t2:#94a3b8;--tm:#475569;
  --b:rgba(99,102,241,0.15);--bb:rgba(99,102,241,0.4);
  --glow:0 0 20px rgba(99,102,241,0.25);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--t1);font-family:'Syne',sans-serif;min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(99,102,241,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,0.03) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0}

/* BANNER */
.banner{background:linear-gradient(90deg,rgba(99,102,241,0.12),rgba(99,102,241,0.06),rgba(99,102,241,0.12));border-bottom:1px solid rgba(99,102,241,0.25);padding:6px 24px;display:flex;align-items:center;justify-content:space-between;font-family:'Space Mono',monospace;font-size:10px;position:sticky;top:0;z-index:200;backdrop-filter:blur(12px)}
.banner-left{display:flex;align-items:center;gap:8px;color:var(--i4);font-weight:700;letter-spacing:0.1em}
.banner-center{font-size:9px;color:rgba(99,102,241,0.6)}
.banner-right{font-size:9px;color:var(--tm)}
.banner-right span{color:var(--i4)}

/* WSS DOT */
.wss-dot{width:7px;height:7px;border-radius:50%;background:var(--r);transition:background 0.3s;flex-shrink:0}
.wss-dot.connected{background:var(--g);animation:ldot 1.2s infinite}
.wss-dot.connecting{background:var(--y);animation:ldot 0.6s infinite}
@keyframes ldot{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.5)}50%{box-shadow:0 0 0 5px rgba(16,185,129,0)}}

/* TOPBAR */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:52px;background:rgba(13,17,33,0.95);border-bottom:1px solid var(--b);position:sticky;top:32px;z-index:100;backdrop-filter:blur(12px)}
.logo{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;letter-spacing:0.15em;text-transform:uppercase}
.logo-icon{width:26px;height:26px;background:linear-gradient(135deg,var(--i6),var(--i4));border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;box-shadow:var(--glow)}
.logo-accent{color:var(--i4)}
.live-tag{font-size:9px;padding:2px 8px;border-radius:99px;background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.4);color:var(--r);letter-spacing:0.08em;animation:tagPulse 2s infinite}
@keyframes tagPulse{0%,100%{border-color:rgba(239,68,68,0.4)}50%{border-color:rgba(239,68,68,0.9);box-shadow:0 0 8px rgba(239,68,68,0.3)}}
.top-mid{display:flex;align-items:center;gap:10px}
.top-actions{display:flex;gap:8px;align-items:center}
.cpill{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--b);border-radius:8px;padding:5px 12px;font-family:'Space Mono',monospace;font-size:10px;color:var(--tm)}
.cpill span{color:var(--i4);font-weight:700}

/* BUTTONS */
.btn-sm{padding:5px 12px;border-radius:7px;border:1px solid var(--b);background:transparent;color:var(--t2);font-family:'Space Mono',monospace;font-size:10px;cursor:pointer;transition:all 0.2s}
.btn-sm:hover{border-color:var(--bb);color:var(--i4)}
.btn-primary{padding:7px 18px;border-radius:8px;border:none;background:linear-gradient(135deg,var(--i6),var(--i5));color:white;font-family:'Syne',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.2s;box-shadow:0 0 12px rgba(99,102,241,0.3);letter-spacing:0.05em}
.btn-primary:hover{box-shadow:0 0 24px rgba(99,102,241,0.5);transform:translateY(-1px)}
.btn-warn{padding:7px 18px;border-radius:8px;border:1px solid rgba(239,68,68,0.4);background:rgba(239,68,68,0.1);color:var(--r);font-family:'Syne',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.2s;letter-spacing:0.05em}
.btn-warn:hover{background:rgba(239,68,68,0.2)}

/* STATS */
.stats-row{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;padding:14px 24px}
.stat-card{background:var(--card);border:1px solid var(--b);border-radius:12px;padding:14px 16px;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--i6),transparent)}
.stat-green::before{background:linear-gradient(90deg,transparent,var(--g),transparent)}
.slabel{font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--tm);margin-bottom:6px}
.sval{font-family:'Space Mono',monospace;font-size:18px;font-weight:700;color:var(--t1)}
.sval.g{color:var(--g)}.sval.r{color:var(--r)}.sval.i{color:var(--i4)}.sval.y{color:var(--y)}
.ssub{font-family:'Space Mono',monospace;font-size:9px;color:var(--tm);margin-top:3px}

/* MAIN LAYOUT */
.main{display:grid;grid-template-columns:1fr 360px;gap:12px;padding:0 24px 24px}
.left{display:flex;flex-direction:column;gap:12px}
.right{display:flex;flex-direction:column;gap:12px}

/* PANEL */
.panel{background:var(--card);border:1px solid var(--b);border-radius:14px;overflow:hidden}
.ph{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--b);background:var(--card2)}
.pt{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--i3);display:flex;align-items:center;gap:7px}
.ph-right{font-family:'Space Mono',monospace;font-size:9px;color:var(--tm)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--i5);box-shadow:0 0 5px var(--i5)}
.dot.g{background:var(--g);box-shadow:0 0 5px var(--g)}.dot.y{background:var(--y);box-shadow:0 0 5px var(--y)}.dot.r{background:var(--r);box-shadow:0 0 5px var(--r)}
.i-dot{background:var(--i4);box-shadow:0 0 5px var(--i4)}
.badge{font-family:'Space Mono',monospace;font-size:9px;padding:2px 7px;border-radius:99px;background:rgba(99,102,241,0.12);border:1px solid var(--bb);color:var(--i4)}
.badge.g{background:rgba(16,185,129,0.1);border-color:rgba(16,185,129,0.3);color:var(--g)}
.g{color:var(--g)}.r{color:var(--r)}.i{color:var(--i4)}

/* DEX GRID */
.dex-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:12px 18px}
.dex-card{background:var(--surface);border:1px solid var(--b);border-radius:10px;padding:10px 12px;text-align:center;transition:all 0.3s}
.dex-card.active{border-color:var(--bb);box-shadow:var(--glow)}
.dex-card.firing{animation:dexFire 0.8s ease-out}
@keyframes dexFire{0%{border-color:var(--i4);box-shadow:0 0 20px rgba(99,102,241,0.5)}100%{border-color:var(--b);box-shadow:none}}
.dex-name{font-size:9px;font-weight:700;color:var(--t2);margin-bottom:4px}
.dex-count{font-family:'Space Mono',monospace;font-size:15px;font-weight:700;color:var(--i4)}
.dex-events{font-family:'Space Mono',monospace;font-size:8px;color:var(--tm);margin-top:2px}
.dex-dot{width:5px;height:5px;border-radius:50%;margin:4px auto 0;background:var(--tm)}
.dex-dot.on{background:var(--g);box-shadow:0 0 4px var(--g)}

/* TABLE */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:11px}
thead th{padding:8px 14px;text-align:left;font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--tm);background:var(--card2);border-bottom:1px solid var(--b);white-space:nowrap}
tbody tr{border-bottom:1px solid rgba(99,102,241,0.05);transition:background 0.15s}
tbody tr:hover{background:rgba(99,102,241,0.04)}
tbody tr:last-child{border-bottom:none}
tbody td{padding:9px 14px;font-family:'Space Mono',monospace;font-size:10px;white-space:nowrap;color:var(--t2)}
.tc{display:flex;align-items:center;gap:8px}
.tav{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;border:1px solid rgba(255,255,255,0.07)}
.tn{color:var(--t1);font-weight:700;font-size:11px}.td{color:var(--tm);font-size:9px;margin-top:1px}
.pb{display:inline-flex;align-items:center;padding:2px 6px;border-radius:5px;font-size:10px;font-weight:700}
.pb.p{background:var(--gd);color:var(--g)}.pb.n{background:var(--rd);color:var(--r)}
.sb{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:5px;font-size:9px}
.sb.hold{background:rgba(99,102,241,0.12);color:var(--i4);border:1px solid rgba(99,102,241,0.25)}
.sb.tp{background:var(--gd);color:var(--g)}.sb.sl{background:var(--rd);color:var(--r)}.sb.trail{background:var(--yd);color:var(--y)}
.exit-btn{padding:3px 8px;border-radius:5px;border:1px solid rgba(239,68,68,0.3);background:transparent;color:var(--r);font-family:'Space Mono',monospace;font-size:9px;cursor:pointer;transition:all 0.2s}
.exit-btn:hover{background:var(--rd)}
.empty-cell{text-align:center;padding:22px;color:var(--tm);font-size:11px}

/* FEED */
.feed{max-height:340px;overflow-y:auto}
.empty-feed{text-align:center;padding:32px;color:var(--tm);font-family:'Space Mono',monospace;font-size:11px}
.hint{font-size:9px;color:var(--i4);margin-top:6px;display:block}
.fi{display:flex;align-items:center;gap:10px;padding:9px 18px;border-bottom:1px solid rgba(99,102,241,0.05);cursor:pointer;transition:background 0.15s}
.fi:hover{background:rgba(99,102,241,0.04)}
.fi.new{animation:sIn 0.5s ease-out}
@keyframes sIn{from{opacity:0;transform:translateX(-10px);background:rgba(99,102,241,0.2)}to{opacity:1;transform:none;background:transparent}}
.fav{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;border:1px solid rgba(255,255,255,0.06)}
.fi-info{flex:1;min-width:0}
.fi-name{font-size:12px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.fi-meta{font-family:'Space Mono',monospace;font-size:9px;color:var(--tm);margin-top:2px}
.age-bar{width:100%;height:2px;background:var(--surface);border-radius:99px;margin-top:3px;overflow:hidden}
.af{height:100%;border-radius:99px;transition:width 0.5s}
.af.safe{background:var(--g)}.af.warn{background:var(--y)}.af.late{background:var(--r)}
.dex-tag{font-size:9px;padding:2px 6px;border-radius:4px;background:rgba(99,102,241,0.08);border:1px solid rgba(99,102,241,0.2);color:var(--i4);font-weight:700;flex-shrink:0}
.fr{text-align:right;flex-shrink:0}
.fr-liq{font-family:'Space Mono',monospace;font-size:11px;color:var(--i4);font-weight:700}
.fr-age{font-family:'Space Mono',monospace;font-size:9px;margin-top:2px}
.snipe-btn{padding:4px 9px;border-radius:6px;border:1px solid var(--bb);background:rgba(99,102,241,0.08);color:var(--i4);font-family:'Space Mono',monospace;font-size:9px;cursor:pointer;transition:all 0.2s;flex-shrink:0}
.snipe-btn:hover,.snipe-btn.auto{background:var(--i6);color:white;box-shadow:var(--glow)}
.snipe-btn.inpos{opacity:0.4;cursor:not-allowed;pointer-events:none}

/* TABS */
.tab-bar{display:flex;border-bottom:1px solid var(--b)}
.tab{padding:9px 16px;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--tm);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.2s}
.tab:hover{color:var(--i4)}.tab.active{color:var(--i3);border-bottom-color:var(--i5)}
.tab-c{display:none}.tab-c.active{display:block}

/* WSS LOG */
.wss-log{max-height:180px;overflow-y:auto;padding:6px 0;font-family:'Space Mono',monospace}
.wl{display:flex;align-items:flex-start;gap:8px;padding:5px 16px;border-bottom:1px solid rgba(99,102,241,0.04);font-size:9px}
.wl-time{color:var(--tm);flex-shrink:0;width:55px}
.wl-dex{flex-shrink:0;width:60px;font-weight:700}
.wl-sig{color:var(--tm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.wl-type{flex-shrink:0;padding:1px 5px;border-radius:3px;font-size:8px;font-weight:700}
.wl-type.init{background:rgba(99,102,241,0.15);color:var(--i4)}
.wl-type.other{background:rgba(71,85,105,0.15);color:var(--tm)}

/* EVENT LOG */
.elog{max-height:280px;overflow-y:auto;padding:6px 0}
.eli{display:flex;align-items:flex-start;gap:8px;padding:7px 18px;border-bottom:1px solid rgba(99,102,241,0.05)}
.eli:last-child{border-bottom:none}
.eli-icon{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;margin-top:1px}
.eli-icon.tp{background:var(--gd)}.eli-icon.entry{background:rgba(99,102,241,0.15)}.eli-icon.warn{background:var(--yd)}.eli-icon.sl{background:var(--rd)}.eli-icon.info{background:rgba(71,85,105,0.15)}.eli-icon.wss{background:rgba(99,102,241,0.2)}
.eli-text{font-size:10px;color:var(--t2);line-height:1.5}
.eli-time{font-family:'Space Mono',monospace;font-size:9px;color:var(--tm);margin-top:1px}

/* SETTINGS */
.sb-body{padding:14px 18px;display:flex;flex-direction:column;gap:14px}
.sg{display:flex;flex-direction:column;gap:8px}
.sg-lbl{font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--tm);padding-bottom:3px;border-bottom:1px solid var(--b)}
.sr{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sl{font-size:11px;color:var(--t2)}
.si{background:var(--surface);border:1px solid var(--b);border-radius:7px;padding:5px 10px;font-family:'Space Mono',monospace;font-size:11px;color:var(--i3);width:80px;text-align:right;outline:none;transition:border-color 0.2s}
.si:focus{border-color:var(--i6)}
.si-unit{font-size:10px;color:var(--tm)}
.tgl{width:34px;height:18px;border-radius:99px;position:relative;cursor:pointer;transition:background 0.2s;flex-shrink:0}
.tgl.on{background:var(--i6)}.tgl.off{background:var(--surface);border:1px solid var(--b)}
.tgl-t{position:absolute;top:2px;width:14px;height:14px;border-radius:50%;background:white;transition:left 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.3)}
.tgl.on .tgl-t{left:18px}.tgl.off .tgl-t{left:2px}
.abp{background:linear-gradient(135deg,rgba(99,102,241,0.1),rgba(99,102,241,0.04));border:1px solid var(--bb);border-radius:10px;padding:12px;transition:all 0.3s}
.abp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.abp-title{font-size:12px;font-weight:700;color:var(--t1)}
.cond{display:flex;flex-direction:column;gap:4px}
.cr{display:flex;align-items:center;gap:6px;font-family:'Space Mono',monospace;font-size:9px;color:var(--tm)}
.cr .ok{color:var(--g)}

/* SCROLLBAR */
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--i6);border-radius:99px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
.blink{animation:blink 1.5s infinite}

/* ═══════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media(max-width:768px){
  .banner{padding:5px 12px;flex-wrap:wrap;gap:4px}
  .banner-center{display:none}
  .banner-right{font-size:8px}
  .topbar{height:auto;padding:8px 12px;flex-wrap:wrap;gap:6px;top:0;position:relative}
  .top-mid{display:none}
  .logo{font-size:12px}
  .live-tag{font-size:8px;padding:2px 6px}
  .btn-primary,.btn-warn{padding:6px 14px;font-size:11px}
  .stats-row{grid-template-columns:repeat(2,1fr);padding:10px;gap:8px}
  .sval{font-size:15px}
  .main{grid-template-columns:1fr;padding:0 10px 16px;gap:10px}
  .right{order:-1}
  .dex-grid{grid-template-columns:repeat(2,1fr)}
  .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:520px}
  .panel{border-radius:10px}
  .ph{padding:10px 14px}
  .sb-body{padding:12px}
  .fi{padding:10px 12px}
  .fi-name{font-size:12px}
  .wss-log{max-height:150px}
  .elog{max-height:200px}
  td,th{font-size:10px;padding:6px 8px}
  .exit-btn,.snipe-btn{padding:4px 8px;font-size:9px}
}
@media(max-width:420px){
  .stats-row{grid-template-columns:repeat(2,1fr);gap:6px;padding:8px}
  .sval{font-size:13px}
  .slabel{font-size:8px}
  .dex-grid{grid-template-columns:repeat(2,1fr);gap:6px;padding:8px}
}