/* ═══════════════════════════════════ MY TRADES (S8) ═══════════════════════════════════ */
#s8{background:#04060e;max-width:100vw;overflow-x:hidden;box-sizing:border-box}
#s8 *{box-sizing:border-box}

.mt-body{display:flex;flex-direction:column;flex:1;overflow:hidden;position:relative;max-width:100%}
/* ── HERO ── */
.mt-hero{position:relative;padding:16px 32px 14px;overflow:hidden;flex-shrink:0}
.mt-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 80%,rgba(79,255,170,0.04),transparent 55%),radial-gradient(ellipse at 25% 30%,rgba(109,232,225,0.025),transparent 50%),radial-gradient(ellipse at 75% 20%,rgba(157,127,234,0.02),transparent 45%);pointer-events:none}
.mt-hero::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");pointer-events:none;opacity:0.13}
.mt-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(109,232,225,0.015) 1px,transparent 1px),linear-gradient(90deg,rgba(109,232,225,0.015) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0;mask-image:radial-gradient(ellipse at center,black 20%,transparent 70%)}
.mt-hero-particles{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.mt-hero-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;position:relative;z-index:2}
.mt-hero-tag{font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:3px;color:rgba(109,232,225,0.4)}
.mt-hero-filter{display:flex;gap:0;margin-left:auto;border:1px solid rgba(109,232,225,0.06)}
.mt-hf{font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:1.5px;padding:4px 10px;cursor:pointer;color:rgba(255,255,255,0.3);background:transparent;border:none;border-right:1px solid rgba(109,232,225,0.06);transition:all 0.25s}
.mt-hf:last-child{border-right:none}
.mt-hf:hover{color:rgba(255,255,255,0.3)}
.mt-hf.on{color:rgba(79,255,170,0.85);background:rgba(79,255,170,0.04)}
.mt-hero-cluster{display:flex;align-items:center;justify-content:center;gap:0;position:relative;z-index:2;min-height:90px;padding:0 20px;margin:0 auto;max-width:100%}
.mt-hero-cluster::after{content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(79,255,170,0.08) 30%,rgba(109,232,225,0.06) 70%,transparent);pointer-events:none}
.mt-hero-main{text-align:center;flex:1.2;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mt-pnl-label{font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:3px;color:rgba(79,255,170,0.3);margin-bottom:2px}
.mt-pnl-big{font-family:'Orbitron',sans-serif;font-size:36px;font-weight:900;letter-spacing:-0.5px;line-height:1;margin-bottom:4px;display:inline-block}
.mt-pnl-big.green{color:rgba(79,255,170,0.95);text-shadow:0 0 40px rgba(79,255,170,0.2),0 0 80px rgba(79,255,170,0.08);animation:mtPnlGlow 4s ease-in-out infinite}
.mt-pnl-big.red{color:rgba(229,80,80,0.95);text-shadow:0 0 40px rgba(229,80,80,0.2)}
@keyframes mtPnlGlow{0%,100%{text-shadow:0 0 40px rgba(79,255,170,0.2),0 0 80px rgba(79,255,170,0.08)}50%{text-shadow:0 0 55px rgba(79,255,170,0.3),0 0 100px rgba(79,255,170,0.12)}}
.mt-pnl-sub{font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(79,255,170,0.35)}
.mt-hero-divider{width:1px;height:65px;background:linear-gradient(transparent 5%,rgba(79,255,170,0.15) 30%,rgba(109,232,225,0.1) 70%,transparent 95%);margin:0 24px;flex-shrink:0;position:relative}
.mt-hero-divider::after{content:'';position:absolute;top:50%;left:50%;width:3px;height:3px;transform:translate(-50%,-50%);background:rgba(79,255,170,0.4);border-radius:50%;box-shadow:0 0 6px rgba(79,255,170,0.3)}
.mt-hero-side{flex:1;display:flex;flex-direction:column;gap:6px;justify-content:center}
.mt-hero-stat{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0}
.mt-hero-stat-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1px;color:rgba(255,255,255,0.3)}
.mt-hero-stat-val{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:800;letter-spacing:0.3px}
.mt-hero-stat-val.green{color:rgba(79,255,170,0.8)}
.mt-hero-stat-val.cyan{color:rgba(109,232,225,0.8)}
.mt-hero-stat-val.white{color:rgba(255,255,255,0.7)}
.mt-hero-stat-val.gold{color:rgba(255,215,0,0.7)}
.mt-brag-row{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 0 0;position:relative;z-index:2}
.mt-brag-btn{font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:2.5px;padding:8px 22px;border:1px solid rgba(255,215,0,0.06);color:rgba(255,215,0,0.4);background:rgba(255,215,0,0.02);cursor:pointer;transition:all 0.3s;position:relative;overflow:visible}
.mt-brag-btn:hover{border-color:rgba(255,215,0,0.35);color:rgba(255,215,0,0.9);background:rgba(255,215,0,0.05);box-shadow:0 0 24px rgba(255,215,0,0.06);letter-spacing:3px}
.mt-brag-btn::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,215,0,0.06),transparent);transition:left 0.5s}
.mt-brag-btn:hover::before{left:120%}
.mt-brag-btn .dw-corner{position:absolute;width:10px;height:10px;border-style:solid;border-width:0;border-color:rgba(255,215,0,0.25);pointer-events:none;z-index:5;transition:all 0.3s}
.mt-brag-btn .dw-tl{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.mt-brag-btn .dw-tr{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}
.mt-brag-btn .dw-bl{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}
.mt-brag-btn .dw-br{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.mt-brag-btn:hover .dw-corner{border-color:rgba(255,215,0,0.6);width:14px;height:14px}
/* ── STATS STRIP ── */
.mt-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid rgba(109,232,225,0.06);border-bottom:1px solid rgba(109,232,225,0.06);flex-shrink:0;position:relative;z-index:1}
.mt-stat{padding:10px 12px;border-right:1px solid rgba(109,232,225,0.04);text-align:center;transition:background 0.2s;cursor:default}
.mt-stat:last-child{border-right:none}
.mt-stat:hover{background:rgba(109,232,225,0.01)}
.mt-stat-val{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:800;color:rgba(255,255,255,0.75)}
.mt-stat-val.green{color:rgba(79,255,170,0.85)}
.mt-stat-val.red{color:rgba(229,80,80,0.85)}
.mt-stat-val.cyan{color:rgba(109,232,225,0.85)}
.mt-stat-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:rgba(255,255,255,0.3);margin-top:2px}
/* ── SPLIT LAYOUT ── */
.mt-split{display:grid;grid-template-columns:1fr 340px;flex:1;min-height:0;overflow:hidden}
/* ── LEFT: TRADE LIST ── */
.mt-left{display:flex;flex-direction:column;border-right:1px solid rgba(109,232,225,0.05);min-height:0}
.mt-filters{display:flex;align-items:center;gap:6px;padding:8px 14px;flex-shrink:0;border-bottom:1px solid rgba(109,232,225,0.04)}
.mt-filter-group{display:flex;gap:0;border:1px solid rgba(109,232,225,0.06)}
.mt-fb{font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:1.5px;padding:7px 10px;cursor:pointer;color:rgba(255,255,255,0.3);background:transparent;border:none;border-right:1px solid rgba(109,232,225,0.06);transition:all 0.2s;position:relative}
.mt-fb:last-child{border-right:none}
.mt-fb:hover{color:rgba(255,255,255,0.3)}
.mt-fb.on{color:rgba(109,232,225,0.8);background:rgba(109,232,225,0.04)}
.mt-fb.on::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:1px;background:rgba(109,232,225,0.4)}
.mt-fb-count{font-family:'IBM Plex Mono',monospace;font-size:7px;margin-left:3px;padding:1px 3px;background:rgba(109,232,225,0.06);color:rgba(109,232,225,0.35)}
.mt-list{flex:1;overflow-y:auto;padding:6px 10px 60px;display:flex;flex-direction:column;gap:4px;scrollbar-width:none}
.mt-list::-webkit-scrollbar{display:none}
/* ── TRADE CARDS (compact) ── */
.mt-card{
  background: linear-gradient(160deg, rgba(18,26,46,0.97) 0%, rgba(12,18,34,0.98) 100%);
  border: 1px solid rgba(109,232,225,0.1);
  position:relative; overflow:hidden;
  transition:all 0.2s cubic-bezier(.16,1,.3,1);
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 6px rgba(0,0,0,0.4);
}
.mt-card:hover{
  border-color:rgba(109,232,225,0.22);
  background: linear-gradient(160deg, rgba(22,32,56,0.98) 0%, rgba(16,24,44,0.99) 100%);
  box-shadow: inset 0 1px 0 rgba(109,232,225,0.08), 0 4px 18px rgba(0,0,0,0.5);
}
.mt-card.selected{
  border-color:rgba(109,232,225,0.3);
  background: linear-gradient(160deg, rgba(20,30,52,0.99) 0%, rgba(14,22,42,0.99) 100%);
  box-shadow: inset 0 1px 0 rgba(109,232,225,0.1), 0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(109,232,225,0.06);
}
.mt-card.selected::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 5%,var(--card-accent,rgba(109,232,225,0.35)) 50%,transparent 95%)}
.mt-card.selected::after{content:'';position:absolute;top:0;left:0;bottom:0;width:2px;background:var(--card-accent,rgba(109,232,225,0.3))}
.mt-card.perp{--card-accent:rgba(109,232,225,0.35)}
.mt-card.spot{--card-accent:rgba(109,232,225,0.35)}
.mt-type-badge{font-family:'Orbitron',sans-serif;font-size:7px;font-weight:800;letter-spacing:2px;padding:2px 5px;flex-shrink:0}
.mt-type-badge.spot{background:rgba(109,232,225,0.05);border:1px solid rgba(109,232,225,0.1);color:rgba(109,232,225,0.55)}
.mt-type-badge.perp{background:rgba(109,232,225,0.05);border:1px solid rgba(109,232,225,0.15);color:rgba(109,232,225,0.65)}
.mt-status{font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:1.5px;padding:2px 5px;flex-shrink:0}
.mt-status.live{background:rgba(79,255,170,0.07);border:1px solid rgba(79,255,170,0.35);color:rgba(79,255,170,0.9);animation:mtPulse 3s ease-in-out infinite}
.mt-status.monitoring{background:rgba(109,232,225,0.04);border:1px solid rgba(109,232,225,0.15);color:rgba(109,232,225,0.7)}
.mt-status.completed{background:rgba(79,255,170,0.03);border:1px solid rgba(79,255,170,0.1);color:rgba(79,255,170,0.55)}
.mt-status.cancelled{background:rgba(255,255,255,0.01);border:1px solid rgba(255,255,255,0.04);color:rgba(255,255,255,0.3)}
.mt-status.liquidated{background:rgba(229,80,80,0.04);border:1px solid rgba(229,80,80,0.1);color:rgba(229,80,80,0.55)}
@keyframes mtPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 8px rgba(109,232,225,0.05)}}
/* ── RIGHT: DETAIL PANEL ── */
.mt-right{display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none;background:linear-gradient(180deg,rgba(6,10,18,0.4),transparent)}
.mt-right::-webkit-scrollbar{display:none}
.mt-detail-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:30px}
.mt-de-text{font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:2px;color:rgba(255,255,255,0.1)}
.mt-de-sub{font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(255,255,255,0.06)}
.mt-dp{display:none;flex-direction:column}
.mt-dp.vis{display:flex}
.mt-dp-head{padding:16px 18px 12px;border-bottom:1px solid rgba(109,232,225,0.05);display:flex;align-items:center;gap:10px}
.mt-dp-badges{display:flex;gap:4px;flex-shrink:0}
.mt-dp-pair{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:800;color:rgba(255,255,255,0.85);letter-spacing:0.5px}
.mt-dp-sub{font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(255,255,255,0.3);margin-top:1px}
.mt-dp-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.mt-dp-item{padding:9px 18px;border-bottom:1px solid rgba(255,255,255,0.015);border-right:1px solid rgba(255,255,255,0.015)}
.mt-dp-item:nth-child(2n){border-right:none}
.mt-dp-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1.5px;color:rgba(255,255,255,0.08);margin-bottom:2px}
.mt-dp-val{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;color:rgba(255,255,255,0.55)}
.mt-dp-val.green{color:rgba(79,255,170,0.75)}
.mt-dp-val.red{color:rgba(229,80,80,0.75)}
.mt-dp-section{padding:12px 18px;border-bottom:1px solid rgba(109,232,225,0.03)}
.mt-dp-sec-title{font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:2.5px;color:rgba(109,232,225,0.4);margin-bottom:8px}
.mt-dp-cond{display:flex;align-items:center;gap:8px;padding:7px 10px;margin-bottom:3px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);border-left:2px solid rgba(109,232,225,0.08);border-radius:0;transition:background 0.2s}
.mt-dp-cond.met{border-left-color:rgba(79,255,170,0.5);background:rgba(79,255,170,0.025);border-color:rgba(79,255,170,0.08)}
.mt-dp-cond-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.mt-dp-cond-dot.met{background:rgba(79,255,170,0.7);box-shadow:0 0 5px rgba(79,255,170,0.3)}
.mt-dp-cond-dot.watching{background:rgba(245,185,66,0.6);animation:mtCW 2s ease-in-out infinite}
.mt-dp-cond-dot.unmet{background:rgba(255,255,255,0.08)}
@keyframes mtCW{0%,100%{opacity:0.6}50%{opacity:1}}
.mt-dp-cond-text{font-family:'IBM Plex Mono',monospace;font-size:8px;color:rgba(255,255,255,0.3);flex:1}
.mt-dp-cond-badge{font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:1.5px;font-weight:700;padding:1px 5px}
.mt-dp-cond-badge.met{color:rgba(79,255,170,0.6);background:rgba(79,255,170,0.04);border:1px solid rgba(79,255,170,0.08)}
.mt-dp-cond-badge.watching{color:rgba(245,185,66,0.5);background:rgba(245,185,66,0.03);border:1px solid rgba(245,185,66,0.08)}
.mt-dp-actions{padding:14px 18px;display:flex;gap:6px}
.mt-dp-btn{flex:1;font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:2px;padding:10px;border:1px solid;cursor:pointer;text-align:center;transition:all 0.2s;background:transparent}
.mt-dp-btn.primary{border-color:rgba(109,232,225,0.12);color:rgba(109,232,225,0.5)}
.mt-dp-btn.primary:hover{border-color:rgba(109,232,225,0.3);color:rgba(109,232,225,0.9);background:rgba(109,232,225,0.03)}
.mt-dp-btn.danger{border-color:rgba(229,80,80,0.1);color:rgba(229,80,80,0.35)}
.mt-dp-btn.danger:hover{border-color:rgba(229,80,80,0.25);color:rgba(229,80,80,0.8);background:rgba(229,80,80,0.03)}
/* ── S8 FOOTER ── (s8-foot removed — element does not exist) */
.dex-wallet.connected .dw-dot{width:7px !important;opacity:1 !important;box-shadow:0 0 6px rgba(109,232,225,.7) !important}



/* ══ S8 MY TRADES STYLES (scoped) ══ */


*{margin:0;padding:0;box-sizing:border-box}

:root{--green:rgba(79,255,170,1);--cyan:rgba(109,232,225,1);--purple:rgba(157,127,234,1);--red:rgba(229,80,80,1);--gold:rgba(255,215,0,1);--bg:#04060e;--card-bg:rgba(6,10,20,0.98)}

html,body{width:100%;height:100%;background:var(--bg);overflow:hidden;color:#fff}

/* ════ DEX BAR ════ */








#s8 .dex-sp{flex:1}



@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 6px rgba(79,255,170,0.6)}50%{opacity:0.5;box-shadow:0 0 14px rgba(79,255,170,0.9)}}








/* ════ SCREEN ════ */

#s8{display:flex;flex-direction:column;background:var(--bg);width:100%;height:100vh;overflow:hidden;position:relative;min-height:0}

#s8 .amb-orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0}

#s8 .amb-1{width:600px;height:600px;top:-100px;left:-150px;background:radial-gradient(ellipse,rgba(109,232,225,0.025) 0%,transparent 65%);animation:orbFloat1 18s ease-in-out infinite}

#s8 .amb-2{width:500px;height:500px;bottom:-100px;right:-100px;background:radial-gradient(ellipse,rgba(157,127,234,0.02) 0%,transparent 65%);animation:orbFloat2 22s ease-in-out infinite}
@keyframes orbFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.08)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-40px) scale(1.06)}}

#s8 .scanlines{position:fixed;inset:0;pointer-events:none;z-index:1;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.015) 2px,rgba(0,0,0,0.015) 4px)}

/* ════ HERO ════ */

#s8 .mt-body{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;position:relative;z-index:2}

#s8 .mt-hero{position:relative;padding:20px 32px 16px;flex-shrink:0;overflow:hidden;border-bottom:1px solid rgba(109,232,225,0.04);transition:max-height 0.45s cubic-bezier(.22,1,.36,1),padding 0.45s cubic-bezier(.22,1,.36,1);max-height:500px}
/* Collapsed state */
#s8 .mt-hero.collapsed{max-height:62px;padding:0}
#s8 .mt-hero.collapsed .mt-hero-top,
#s8 .mt-hero.collapsed .mt-hero-cluster,
#s8 .mt-hero.collapsed .mt-badges-row,
#s8 .mt-hero.collapsed .mt-brag-row,
#s8 .mt-hero.collapsed .mt-nb,
#s8 .mt-hero.collapsed .mt-hero-grid,
#s8 .mt-hero.collapsed .mt-hero-scan,
#s8 .mt-hero.collapsed #mt-equity-canvas,
#s8 .mt-hero.collapsed #mt-hero-canvas{display:none !important}
/* Mobile mini-bar: drop the pills so the headline + Expand fit one clean row */
@media (max-width:600px){
  #s8 .mt-hero-mini{padding:0 14px !important;gap:10px !important}
  #s8 .mt-hm-pills{display:none !important}
  #s8 .mt-hero-mini-pnl{font-size:19px !important}
  #s8 .mt-hm-tag{font-size:7px !important;letter-spacing:1.4px !important}
}
#s8 .mt-hero.collapsed .mt-hero-mini{display:flex !important}
/* ── Mini bar (collapsed hero) ── */
#s8 .mt-hero-mini{display:none;align-items:center;justify-content:space-between;gap:16px;padding:0 28px;height:100%;position:relative;z-index:3;background:linear-gradient(180deg,rgba(109,232,225,0.05),rgba(79,255,170,0.012) 65%,transparent)}
#s8 .mt-hm-lead{display:flex;align-items:baseline;gap:11px;min-width:0}
#s8 .mt-hm-tag{font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:500;letter-spacing:2.5px;color:rgba(109,232,225,0.5);text-transform:uppercase;flex-shrink:0}
#s8 .mt-hm-tag::before{content:'◈ ';opacity:0.5}
#s8 .mt-hero-mini-pnl{font-family:'Orbitron',sans-serif;font-size:22px;font-weight:900;letter-spacing:-0.5px;color:rgba(255,255,255,0.85)}
#s8 .mt-hero-mini-pnl.green{color:rgba(79,255,170,1);text-shadow:0 0 22px rgba(79,255,170,0.3)}
#s8 .mt-hero-mini-pnl.red{color:rgba(229,80,80,1);text-shadow:0 0 22px rgba(229,80,80,0.3)}
#s8 .mt-hero-mini-pct{font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(79,255,170,0.6)}
#s8 .mt-hm-pills{display:flex;align-items:stretch;gap:8px;margin-left:auto;flex-shrink:0}
#s8 .mt-hm-pill{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:5px 15px;border:1px solid rgba(109,232,225,0.09);background:rgba(109,232,225,0.02);min-width:58px}
#s8 .mt-hm-pv{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:800;color:rgba(255,255,255,0.9)}
#s8 .mt-hm-pl{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1.5px;color:rgba(180,195,220,0.5);text-transform:uppercase}
#s8 .mt-hm-expand{display:flex;align-items:center;gap:6px;background:rgba(109,232,225,0.06);border:1px solid rgba(109,232,225,0.14);color:rgba(109,232,225,0.75);padding:8px 13px;cursor:pointer;transition:all 0.18s;flex-shrink:0;border-radius:4px}
#s8 .mt-hm-expand:hover{background:rgba(109,232,225,0.12);border-color:rgba(109,232,225,0.32);color:var(--cyan);box-shadow:0 0 12px rgba(109,232,225,0.12)}
#s8 .mt-hm-expand-lbl{font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:2px}
/* ── Collapse/expand button ── */
#s8 .mt-hero-collapse-btn{background:rgba(109,232,225,0.06);border:1px solid rgba(109,232,225,0.12);border-radius:4px;cursor:pointer;color:rgba(109,232,225,0.4);padding:4px 6px;display:flex;align-items:center;justify-content:center;transition:all 0.18s;flex-shrink:0;margin-left:auto}
#s8 .mt-hero-collapse-btn:hover{color:var(--cyan);border-color:rgba(109,232,225,0.3);background:rgba(109,232,225,0.1);box-shadow:0 0 8px rgba(109,232,225,0.1)}
/* Canvas sits as bg */

#s8 #mt-hero-canvas{position:absolute;top:0;left:0;right:0;height:65%;z-index:0;pointer-events:none;width:100%;mask-image:linear-gradient(to bottom,black 50%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 50%,transparent 100%)}
/* Nebula divs for r7 style */

#s8 .mt-nb{position:absolute;pointer-events:none;border-radius:50%;z-index:0}

#s8 .mt-nb1{width:420px;height:220px;left:5%;top:10%;background:radial-gradient(ellipse,rgba(255,215,0,0.04),transparent 65%);animation:nbDrift1 18s ease-in-out infinite alternate}

#s8 .mt-nb2{width:380px;height:200px;right:5%;top:0%;background:radial-gradient(ellipse,rgba(109,232,225,0.035),transparent 65%);animation:nbDrift2 22s ease-in-out infinite alternate}

#s8 .mt-nb3{width:280px;height:150px;left:35%;bottom:0;background:radial-gradient(ellipse,rgba(157,127,234,0.025),transparent 60%);animation:nbDrift1 14s ease-in-out 3s infinite alternate}
@keyframes nbDrift1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(20px,-12px) scale(1.08)}}
@keyframes nbDrift2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-18px,10px) scale(1.06)}}

#s8 .mt-hero-scan{position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none;z-index:1;background:linear-gradient(180deg,transparent 0%,rgba(109,232,225,0.012) 50%,transparent 100%);background-size:100% 60px;animation:heroScan 9s linear infinite;opacity:0.2}
@keyframes heroScan{0%{background-position:0 -60px}100%{background-position:0 100%}}

#s8 .mt-hero-grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(109,232,225,0.016) 1px,transparent 1px),linear-gradient(90deg,rgba(109,232,225,0.016) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at center,rgba(0,0,0,0.3) 0%,transparent 70%)}

/* Hero content */

#s8 .mt-hero-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;position:relative;z-index:3}

#s8 .mt-hero-tag{font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:500;letter-spacing:3.5px;color:rgba(109,232,225,0.4);text-transform:uppercase}

#s8 .mt-hero-tag::before{content:'◈ ';opacity:0.5}

#s8 .mt-hero-filter{display:flex;margin-left:auto;border:1px solid rgba(109,232,225,0.08)}

#s8 .mt-hf{font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:1.5px;padding:5px 12px;cursor:pointer;color:rgba(255,255,255,0.3);background:transparent;border:none;border-right:1px solid rgba(109,232,225,0.06);transition:all 0.25s;position:relative}

#s8 .mt-hf:last-child{border-right:none}
#s8 .mt-hf:hover{color:rgba(255,255,255,0.4);background:rgba(109,232,225,0.02)}

#s8 .mt-hf.on{color:rgba(79,255,170,0.95);background:rgba(79,255,170,0.05)}

#s8 .mt-hf.on::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:rgba(79,255,170,0.6)}

/* Hero cluster */

#s8 .mt-hero-cluster{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;position:relative;z-index:3;min-height:80px}

#s8 .mt-hero-side{display:flex;flex-direction:column;gap:0}

#s8 .mt-hero-stat{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.02)}

#s8 .mt-hero-stat:last-child{border-bottom:none}

#s8 .mt-hero-stat-lbl{font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:400;letter-spacing:1.5px;color:rgba(255,255,255,0.55);text-transform:uppercase}

#s8 .mt-hero-stat-val{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:800;letter-spacing:0.3px}

#s8 .mt-hero-stat-val.green{color:rgba(79,255,170,0.95);text-shadow:0 0 12px rgba(79,255,170,0.3)}

#s8 .mt-hero-stat-val.cyan{color:rgba(109,232,225,0.95);text-shadow:0 0 12px rgba(109,232,225,0.3)}

#s8 .mt-hero-stat-val.white{color:rgba(255,255,255,0.9)}

#s8 .mt-hero-stat-val.gold{color:rgba(255,215,0,0.95);text-shadow:0 0 12px rgba(255,215,0,0.3)}

#s8 .mt-hero-divider{width:1px;height:72px;margin:0 28px;background:linear-gradient(transparent 5%,rgba(109,232,225,0.2) 30%,rgba(109,232,225,0.35) 50%,rgba(109,232,225,0.2) 70%,transparent 95%);position:relative;flex-shrink:0}

#s8 .mt-hero-divider::after{content:'';position:absolute;top:50%;left:50%;width:4px;height:4px;transform:translate(-50%,-50%);background:rgba(109,232,225,0.7);border-radius:50%;box-shadow:0 0 8px rgba(109,232,225,0.5);animation:divDot 3s ease-in-out infinite}
@keyframes divDot{0%,100%{opacity:0.6;box-shadow:0 0 6px rgba(109,232,225,0.4)}50%{opacity:1;box-shadow:0 0 14px rgba(109,232,225,0.7)}}

#s8 .mt-hero-main{text-align:center;padding:0 20px}

#s8 .mt-pnl-label{font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:700;letter-spacing:4px;color:rgba(79,255,170,0.4);margin-bottom:4px;text-transform:uppercase}

#s8 .mt-pnl-big{font-family:'Orbitron',sans-serif;font-size:40px;font-weight:900;letter-spacing:-1px;line-height:1;display:block;margin-bottom:6px}

#s8 .mt-pnl-big.green{background:linear-gradient(100deg,rgba(79,255,170,1) 0%,rgba(140,255,200,1) 30%,rgba(109,232,225,0.95) 55%,rgba(79,255,170,1) 80%,rgba(110,255,185,1) 100%);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 18px rgba(79,255,170,0.25));animation:pnlShimmer 5s linear infinite,pnlGlow 4s ease-in-out infinite}
@keyframes pnlBreath{0%,100%{filter:drop-shadow(0 0 8px rgba(79,255,170,0.15)) drop-shadow(0 0 20px rgba(79,255,170,0.06))}50%{filter:drop-shadow(0 0 16px rgba(79,255,170,0.3)) drop-shadow(0 0 40px rgba(79,255,170,0.12))}}
@keyframes pnlShimmer{0%{background-position:0% center}100%{background-position:300% center}}
@keyframes pnlGlow{0%,100%{filter:drop-shadow(0 0 14px rgba(79,255,170,0.2))}50%{filter:drop-shadow(0 0 28px rgba(79,255,170,0.4))}}

#s8 .mt-pnl-big.red{color:rgba(229,80,80,0.95);text-shadow:0 0 30px rgba(229,80,80,0.25)}

#s8 .mt-pnl-sub{font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(79,255,170,0.4);letter-spacing:0.5px}

/* Brag btn — corner brackets live here */

#s8 .mt-brag-row{display:flex;align-items:center;justify-content:center;padding:12px 0 2px;position:relative;z-index:3}

#s8 .mt-brag-btn{display:flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:1.5px;color:rgba(255,215,0,0.55);background:rgba(255,215,0,0.03);border:1px solid rgba(255,215,0,0.12);padding:10px 24px;cursor:pointer;transition:all 0.3s;position:relative;overflow:hidden}

#s8 .mt-brag-btn::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,215,0,0.1),transparent);animation:bragSweep 3.5s ease-in-out infinite;pointer-events:none}
@keyframes bragSweep{0%{left:-100%}60%{left:150%}100%{left:150%}}

#s8 .mt-brag-btn:hover{border-color:rgba(255,215,0,0.4);color:rgba(255,215,0,1);box-shadow:0 0 40px rgba(255,215,0,0.08),inset 0 0 20px rgba(255,215,0,0.03);letter-spacing:2px}

#s8 .mt-brag-btn:hover .mt-brag-btn:hover .mt-brag-btn:hover .mt-brag-btn-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,215,0,0.7);box-shadow:0 0 8px rgba(255,215,0,0.5);animation:livePulse 2s ease-in-out infinite;flex-shrink:0}

/* ════ STATS STRIP ════ */

#s8 .mt-stats{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(109,232,225,0.05);border-bottom:1px solid rgba(109,232,225,0.05);background:linear-gradient(180deg,rgba(109,232,225,0.02),transparent);flex-shrink:0;position:relative;z-index:2}

#s8 .mt-stat{padding:9px 12px;border-right:1px solid rgba(109,232,225,0.04);text-align:center;cursor:default;position:relative;transition:background 0.25s;overflow:hidden}

#s8 .mt-stat:last-child{border-right:none}
#s8 .mt-stat:hover{background:rgba(109,232,225,0.015)}

#s8 .mt-stat-val{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:900;letter-spacing:0.2px}

#s8 .mt-stat-val.green{color:rgba(79,255,170,0.9);text-shadow:0 0 14px rgba(79,255,170,0.25)}
#s8 .mt-stat-val.red{color:rgba(229,80,80,0.9);text-shadow:0 0 14px rgba(229,80,80,0.2)}

#s8 .mt-stat-val.cyan{color:rgba(109,232,225,0.9);text-shadow:0 0 14px rgba(109,232,225,0.25)}

#s8 .mt-stat-val.white{color:rgba(255,255,255,0.8)}

#s8 .mt-stat-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2.5px;color:rgba(180,195,220,0.5);margin-top:2px;text-transform:uppercase}

/* ════ SPLIT ════ */

#s8 .mt-split{display:grid;grid-template-columns:1fr 400px;flex:1;min-height:0;overflow:hidden;position:relative;z-index:2;height:100%}

/* ════ LEFT — LIST ════ */

#s8 .mt-left{display:flex;flex-direction:column;min-height:0;overflow:hidden;flex:1;position:relative}

#s8 .mt-filters{display:flex;flex-direction:column;flex-shrink:0;background:rgba(4,6,14,0.6);border-bottom:1px solid rgba(109,232,225,0.06)}
#s8 .mt-filter-row{display:flex;align-items:center;gap:0;padding:0;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(255,255,255,0.03)}
#s8 .mt-filter-row:last-child{border-bottom:none}
#s8 .mt-filter-row-2{padding:4px 8px;gap:8px}
/* Status filter colours */
#s8 .mt-fb-live.on{color:rgba(79,255,170,0.9)!important;background:rgba(79,255,170,0.06)!important}
#s8 .mt-fb-live.on::after{background:rgba(79,255,170,0.5)!important}
#s8 .mt-fb-monitoring.on{color:rgba(109,232,225,0.9)!important;background:rgba(109,232,225,0.06)!important}
#s8 .mt-fb-monitoring.on::after{background:rgba(109,232,225,0.5)!important}
#s8 .mt-fb-completed.on{color:rgba(79,255,170,0.6)!important;background:rgba(79,255,170,0.04)!important}
#s8 .mt-fb-completed.on::after{background:rgba(79,255,170,0.3)!important}
#s8 .mt-fb-cancelled.on{color:rgba(200,210,225,0.5)!important;background:rgba(255,255,255,0.02)!important}
#s8 .mt-fb-cancelled.on::after{background:rgba(200,210,225,0.25)!important}
#s8 .mt-fb-liquidated.on{color:rgba(229,80,80,0.9)!important;background:rgba(229,80,80,0.06)!important}
#s8 .mt-fb-liquidated.on::after{background:rgba(229,80,80,0.5)!important}
/* Sort button */
#s8 .mt-sort-wrap{margin-left:auto}
#s8 .mt-sort-btn{display:flex;align-items:center;gap:5px;font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1.5px;color:rgba(255,215,0,0.5);background:rgba(255,215,0,0.04);border:1px solid rgba(255,215,0,0.12);padding:4px 10px;cursor:pointer;transition:all 0.2s}
#s8 .mt-sort-btn:hover{color:rgba(255,215,0,0.9);border-color:rgba(255,215,0,0.3);background:rgba(255,215,0,0.07)}
#s8 .mt-sort-arrow{font-size:9px;line-height:1}

#s8 .mt-filter-group{display:flex;gap:0;border:1px solid rgba(109,232,225,0.07)}

#s8 .mt-fb{font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:1.5px;padding:5px 10px;cursor:pointer;color:rgba(255,255,255,0.3);background:transparent;border:none;border-right:1px solid rgba(109,232,225,0.06);transition:all 0.2s;position:relative;white-space:nowrap}

#s8 .mt-fb:last-child{border-right:none}
#s8 .mt-fb:hover{color:rgba(255,255,255,0.4);background:rgba(109,232,225,0.02)}

#s8 .mt-fb.on{color:rgba(109,232,225,0.9);background:rgba(109,232,225,0.05)}

#s8 .mt-fb.on::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:rgba(109,232,225,0.5)}

#s8 .mt-fb-count{font-family:'IBM Plex Mono',monospace;font-size:7px;margin-left:4px;padding:1px 4px;background:rgba(109,232,225,0.07);color:rgba(109,232,225,0.45);vertical-align:middle}



#s8 .mt-list{overflow-y:auto;overflow-x:hidden;padding:8px 20px 12px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:rgba(109,232,225,0.15) transparent;flex:1;min-height:0;box-sizing:border-box}

#s8 .mt-list::-webkit-scrollbar{width:3px}
#s8 .mt-list::-webkit-scrollbar-thumb{background:rgba(109,232,225,0.08)}

/* ── TRADE CARDS ── */

#s8 .mt-card{background:linear-gradient(160deg,rgba(22,34,62,0.99),rgba(14,22,44,0.99));border:1px solid rgba(255,255,255,0.07);position:relative;overflow:hidden;isolation:isolate;transition:all 0.28s cubic-bezier(.16,1,.3,1);cursor:pointer;animation:cardIn 0.4s cubic-bezier(.16,1,.3,1) both;box-shadow:0 2px 12px rgba(0,0,0,0.35);width:100%;max-width:100%;box-sizing:border-box}
/* Subtle top edge glow on every card */

#s8 .mt-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(109,232,225,0.06),rgba(255,255,255,0.04),rgba(109,232,225,0.06),transparent);pointer-events:none;z-index:1}
/* Ambient inner scan — very subtle */

@keyframes cardIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

#s8 .mt-card:nth-child(1){animation-delay:.05s}
#s8 .mt-card:nth-child(2){animation-delay:.1s}
#s8 .mt-card:nth-child(3){animation-delay:.15s}

#s8 .mt-card:nth-child(4){animation-delay:.2s}
#s8 .mt-card:nth-child(5){animation-delay:.25s}
#s8 .mt-card:nth-child(6){animation-delay:.3s}

#s8 .mt-card:nth-child(7){animation-delay:.35s}
#s8 .mt-card:nth-child(8){animation-delay:.4s}
#s8 .mt-card:nth-child(9){animation-delay:.45s}

#s8 .mt-card:hover::after{left:120%}

#s8 .mt-card:hover{box-shadow:0 6px 32px rgba(0,0,0,0.5);background:linear-gradient(160deg,rgba(12,20,40,0.98) 0%,rgba(8,14,28,0.99) 100%)}

#s8 .mt-card.selected{border-color:rgba(var(--c1,109,232,225),0.3);background:linear-gradient(160deg,rgba(12,20,40,0.98) 0%,rgba(8,14,28,0.99) 100%);box-shadow:-3px 0 0 0 rgba(var(--c1,109,232,225),0.9),0 0 0 1px rgba(var(--c1,109,232,225),0.08),0 6px 40px rgba(0,0,0,0.55),0 0 24px rgba(var(--c1,109,232,225),0.08)}

#s8 .mt-card.selected::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(var(--c1,109,232,225),0.8) 50%,transparent 95%);z-index:2}

/* perp selected handled in glass block */

/* pipeline selected handled in glass block */

#s8 .mt-card.pnl-red.selected{box-shadow:0 0 0 1px rgba(229,80,80,0.08),0 6px 40px rgba(0,0,0,0.55),0 0 24px rgba(229,80,80,0.06)}
/* ═══ GLASS HOLO CARDS — type-differentiated ═══ */

/* BASE — neutral fallback */
#s8 .mt-card{
  background: linear-gradient(160deg, rgba(12,20,40,0.98) 0%, rgba(8,14,28,0.99) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* SPOT — dark blue, cyan accent */
#s8 .mt-card.spot{ --c1: 109,232,225; --c2: 79,220,210; --card-accent: rgba(109,232,225,0.7); }

/* PERPS — dark blue, cyan accent, badge differentiates */
#s8 .mt-card.perp{ --c1: 109,232,225; --c2: 79,220,210; --card-accent: rgba(109,232,225,0.7); }
#s8 .mt-type-badge.perp{
  background: rgba(109,232,225,0.07);
  border: 1px solid rgba(109,232,225,0.3);
  color: rgba(109,232,225,0.9);
}

/* PIPELINE — dark blue, purple left accent */
#s8 .mt-card.pipeline{ --c1: 157,127,234; --c2: 180,150,255; --card-accent: rgba(157,127,234,0.7); }

/* breathing animations */
@keyframes cardBreathPerp{0%,100%{box-shadow:0 2px 12px rgba(0,0,0,0.35),0 0 16px rgba(109,232,225,0.04)}50%{box-shadow:0 2px 18px rgba(0,0,0,0.4),0 0 28px rgba(109,232,225,0.1)}}

/* Card type glow — very subtle outer tint per type */

#s8 .mt-card.spot{box-shadow:0 2px 12px rgba(0,0,0,0.35),0 0 18px rgba(109,232,225,0.03)}

/* perp outer glow handled in glass block */

#s8 .mt-card.pipeline{box-shadow:0 2px 12px rgba(0,0,0,0.35),0 0 18px rgba(109,232,225,0.03)}
/* Active trade cards breathe gently */

#s8 .mt-card[data-status="active"]{animation:cardIn 0.4s cubic-bezier(.16,1,.3,1) both,cardBreath 3s ease-in-out 1s infinite}

#s8 .mt-card.perp[data-status="active"]{animation:cardIn 0.4s cubic-bezier(.16,1,.3,1) both,cardBreathPerp 5s ease-in-out 1s infinite}
/* cardBreathPerp updated in glass block */

#s8 .mt-card.pipeline[data-status="active"]{animation:cardIn 0.4s cubic-bezier(.16,1,.3,1) both,cardBreathPipe 5s ease-in-out 1.5s infinite}
@keyframes cardBreathPipe{0%,100%{box-shadow:0 2px 12px rgba(0,0,0,0.35),0 0 16px rgba(109,232,225,0.04)}50%{box-shadow:0 2px 18px rgba(0,0,0,0.4),0 0 28px rgba(109,232,225,0.1)}}



#s8 .mt-card.perp{--card-accent:rgba(109,232,225,0.7)}
#s8 .mt-card.spot{--card-accent:rgba(109,232,225,0.7)}
#s8 .mt-card.pnl-red{--card-accent:rgba(229,80,80,0.5)}

#s8 .mt-card.pipeline{--card-accent:rgba(109,232,225,0.7)}


#s8 .mt-type-badge{font-family:'Orbitron',sans-serif;font-size:7px;font-weight:800;letter-spacing:1.5px;padding:3px 8px;flex-shrink:0}

#s8 .mt-type-badge.spot{background:rgba(109,232,225,0.07);border:1px solid rgba(109,232,225,0.3);color:rgba(109,232,225,0.85)}

/* perp badge handled in glass block */

#s8 .mt-type-badge.pipeline{background:rgba(157,127,234,0.08);border:1px solid rgba(157,127,234,0.35);color:rgba(180,150,255,0.9)}





#s8 .mt-status.completed{background:rgba(79,255,170,0.04);border:1px solid rgba(79,255,170,0.12);color:rgba(79,255,170,0.65)}

#s8 .mt-status.cancelled{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);color:rgba(255,255,255,0.35)}

#s8 .mt-status.liquidated{background:rgba(229,80,80,0.05);border:1px solid rgba(229,80,80,0.15);color:rgba(229,80,80,0.7)}

#s8 .mt-status.pending{background:rgba(255,215,0,0.04);border:1px solid rgba(255,215,0,0.15);color:rgba(255,215,0,0.65);animation:goldPulse 2.5s ease-in-out infinite}
@keyframes goldPulse{0%,100%{box-shadow:none;border-color:rgba(255,215,0,0.12)}50%{box-shadow:0 0 10px rgba(255,215,0,0.08);border-color:rgba(255,215,0,0.3)}}







/* Pipeline mini-track on card */

#s8 .mt-card-pipe-row{display:flex;align-items:center;gap:6px;padding:0 12px 7px}

#s8 .mt-card-pipe-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(255,215,0,0.4);letter-spacing:0.5px;white-space:nowrap;flex-shrink:0}

#s8 .mt-card-pipe-steps{display:flex;align-items:center;gap:0;flex:1}

#s8 .mt-card-pipe-step{font-family:'Orbitron',sans-serif;font-size:7px;color:rgba(255,255,255,0.35);white-space:nowrap;flex-shrink:0}

#s8 .mt-card-pipe-step.done{color:rgba(79,255,170,0.7)}
#s8 .mt-card-pipe-step.active{color:rgba(255,215,0,0.8);animation:goldPulse 2s ease-in-out infinite}

#s8 .mt-card-pipe-arrow{font-size:7px;color:rgba(255,255,255,0.08);margin:0 4px}

#s8 .mt-card-pipe-arrow.done{color:rgba(79,255,170,0.3)}

/* Condition progress bar */












/* ════ RIGHT — DETAIL ════ */

#s8 .mt-right{
  display:flex;flex-direction:column;overflow:hidden;position:relative;min-height:0;
  background:
    linear-gradient(160deg, rgba(109,232,225,0.03) 0%, transparent 40%),
    linear-gradient(180deg, rgba(12,20,38,0.97) 0%, rgba(7,12,24,0.99) 100%);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 0 0 1px rgba(255,215,0,0.06),
    0 0 30px rgba(255,215,0,0.06),
    0 0 60px rgba(255,185,0,0.04),
    inset 0 1px 0 rgba(255,215,0,0.08),
    inset 1px 0 0 rgba(255,255,255,0.03),
    -8px 0 40px rgba(0,0,0,0.4);
  margin: 0;
}

#s8 .mt-right::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(109,232,225,0.008) 39px,rgba(109,232,225,0.008) 40px),repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(109,232,225,0.008) 39px,rgba(109,232,225,0.008) 40px);pointer-events:none;z-index:0}
#s8 .mt-right::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,185,0,0.5) 30%,rgba(255,240,120,0.7) 50%,rgba(255,185,0,0.5) 70%,transparent);pointer-events:none;z-index:2}

#s8 .mt-detail-empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:30px;position:relative;z-index:1}

#s8 .mt-de-ring{width:60px;height:60px;border-radius:50%;border:1px solid rgba(109,232,225,0.08);display:flex;align-items:center;justify-content:center;position:relative;animation:deRing 4s ease-in-out infinite}

#s8 .mt-de-ring::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(109,232,225,0.04);animation:deRing 4s ease-in-out infinite reverse}
@keyframes deRing{0%,100%{transform:scale(1);opacity:0.4}50%{transform:scale(1.06);opacity:0.8}}

#s8 .mt-de-ring svg{opacity:0.15}
#s8 .mt-de-text{font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:3px;color:rgba(255,255,255,0.3)}

#s8 .mt-de-sub{font-family:'IBM Plex Mono',monospace;font-size:8px;color:rgba(255,255,255,0.07);max-width:200px}

/* ──── DETAIL PANEL ──── */

#s8 .mt-dp{display:none;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative;z-index:1;scrollbar-width:thin;scrollbar-color:rgba(109,232,225,0.15) transparent;padding-bottom:60px}

#s8 .mt-dp::-webkit-scrollbar{width:3px}
#s8 .mt-dp::-webkit-scrollbar-track{background:transparent}
#s8 .mt-dp::-webkit-scrollbar-thumb{background:rgba(109,232,225,0.08);border-radius:2px}
#s8 .mt-dp.vis{display:flex}

/* ════════════════════════════════════════
   DETAIL PANEL — REDESIGNED v10
════════════════════════════════════════ */

/* Scrollable container */

#s8 .mt-dp{display:none;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative;z-index:1;scrollbar-width:thin;scrollbar-color:rgba(109,232,225,0.15) transparent}

#s8 .mt-dp::-webkit-scrollbar{width:3px}

#s8 .mt-dp::-webkit-scrollbar-thumb{background:rgba(109,232,225,0.3);border-radius:2px}

#s8 .mt-dp.vis{display:flex}

/* ── Sticky header ── */

/* ── Breadcrumb ── */
#s8 .mt-dp-breadcrumb{
  font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2.5px;
  color:rgba(255,255,255,0.35);text-transform:uppercase;
  display:flex;align-items:center;gap:6px;margin-bottom:10px;
}
#s8 .mt-dp-back{
  cursor:pointer;color:rgba(109,232,225,0.5);transition:color 0.2s;
  padding:4px 0;
}
#s8 .mt-dp-back:hover{color:rgba(109,232,225,0.9)}
#s8 .mt-dp-breadcrumb-sep{color:rgba(255,215,0,0.35);font-size:8px}
#s8 .mt-dp-breadcrumb-pair{color:rgba(255,215,0,0.55);letter-spacing:1px}

#s8 .mt-dp-header{
  padding:12px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  position:sticky;top:0;z-index:10;
  background:rgba(5,9,18,0.98);
  backdrop-filter:blur(12px);
  flex-shrink:0;
}

#s8 .mt-dp-header::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 5%,var(--dp-accent,rgba(109,232,225,0.5)) 50%,transparent 95%);
}

#s8 .mt-dp-badges{display:flex;gap:6px;align-items:center;margin-bottom:10px}

#s8 .mt-dp-pair{
  font-family:'Orbitron',sans-serif;font-size:20px;font-weight:900;
  letter-spacing:0.2px;line-height:1;margin-bottom:4px;
  background:linear-gradient(135deg,rgba(109,232,225,1) 0%,rgba(180,255,250,0.95) 40%,rgba(109,232,225,0.9) 70%,rgba(80,210,205,0.85) 100%);
  background-size:300% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:pnlShimmer 6s linear infinite;
}

#s8 .mt-dp-sub{font-family:'IBM Plex Mono',monospace;font-size:8px;color:rgba(255,255,255,0.3);letter-spacing:0.5px}

#s8 .mt-dp-chain{
  display:inline-flex;align-items:center;gap:4px;margin-top:8px;
  font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(109,232,225,0.4);
  border:1px solid rgba(109,232,225,0.08);padding:3px 8px;letter-spacing:1px;
}

#s8 .mt-dp-chain-dot{width:4px;height:4px;border-radius:50%;background:rgba(109,232,225,0.6);animation:livePulse 2s ease-in-out infinite}

/* ── Section wrapper ── */

#s8 .mt-dp-section{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,0.03)}

#s8 .mt-dp-sec-title{
  font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;
  letter-spacing:3px;color:rgba(109,232,225,0.45);
  margin-bottom:12px;display:flex;align-items:center;gap:8px;text-transform:uppercase;
}

#s8 .mt-dp-sec-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(109,232,225,0.12),transparent)}

/* ── Pipeline legs — stacked vertically, not side by side ── */




/* Each leg is a full-width card */















/* Connector arrow between legs */



/* ── Details grid ── */

#s8 .mt-dp-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}

#s8 .mt-dp-item{
  padding:12px 14px;border-bottom:1px solid rgba(109,232,225,0.05);
  border-right:1px solid rgba(109,232,225,0.05);transition:background 0.2s,box-shadow 0.2s;
  background: rgba(255,255,255,0.012);position:relative;
}

#s8 .mt-dp-item:nth-child(2n){border-right:none}

#s8 .mt-dp-item:hover{background:rgba(109,232,225,0.03)}

#s8 .mt-dp-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:rgba(180,200,230,0.45);margin-bottom:5px;text-transform:uppercase}

#s8 .mt-dp-val{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:800;color:rgba(220,232,252,0.9);letter-spacing:0.2px}

#s8 .mt-dp-val.green{color:rgba(79,255,170,0.92);text-shadow:0 0 10px rgba(79,255,170,0.2)}

#s8 .mt-dp-val.red{color:rgba(229,80,80,0.92);text-shadow:0 0 10px rgba(229,80,80,0.2)}

#s8 .mt-dp-val.cyan{color:rgba(109,232,225,0.92)}

#s8 .mt-dp-val.gold{color:rgba(255,215,0,0.92)}

/* ── Conditions ── */






#s8 .mt-dp-cond{
  display:flex;align-items:flex-start;gap:10px;padding:10px 12px;
  margin-bottom:6px;border-left:2px solid rgba(109,232,225,0.08);
  transition:all 0.2s;position:relative;
  background:rgba(255,255,255,0.015);
}

#s8 .mt-dp-cond:last-child{margin-bottom:0}

#s8 .mt-dp-cond.met{border-left-color:rgba(79,255,170,0.4);background:rgba(79,255,170,0.025)}

#s8 .mt-dp-cond.watching{border-left-color:rgba(245,185,66,0.4);background:rgba(245,185,66,0.015)}

#s8 .mt-dp-cond.unmet{border-left-color:rgba(255,255,255,0.06)}

#s8 .mt-dp-cond-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:2px}

#s8 .mt-dp-cond-dot.met{background:rgba(79,255,170,0.9);box-shadow:0 0 8px rgba(79,255,170,0.5)}

#s8 .mt-dp-cond-dot.watching{background:rgba(245,185,66,0.8);animation:watchPulse 2s ease-in-out infinite;box-shadow:0 0 8px rgba(245,185,66,0.4)}

#s8 .mt-dp-cond-dot.unmet{background:rgba(255,255,255,0.12)}

#s8 .mt-dp-cond-text{font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(255,255,255,0.5);flex:1;line-height:1.5}

#s8 .mt-dp-cond-text small{display:block;font-size:7px;color:rgba(255,255,255,0.4);margin-top:2px}

#s8 .mt-dp-cond-badge{font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:1.5px;font-weight:700;padding:3px 7px;flex-shrink:0}

#s8 .mt-dp-cond-badge.met{color:rgba(79,255,170,0.8);background:rgba(79,255,170,0.06);border:1px solid rgba(79,255,170,0.15)}

#s8 .mt-dp-cond-badge.watching{color:rgba(245,185,66,0.7);background:rgba(245,185,66,0.05);border:1px solid rgba(245,185,66,0.12)}

#s8 .mt-dp-cond-badge.unmet{color:rgba(255,255,255,0.22);background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06)}

#s8 .mt-dp-cond-bar{width:100%;height:2px;background:rgba(255,255,255,0.05);margin-top:7px;overflow:hidden}

#s8 .mt-dp-cond-bar-fill{height:100%;transition:width 1s cubic-bezier(.16,1,.3,1)}

#s8 .mt-dp-cond-bar-fill.green{background:linear-gradient(90deg,rgba(79,255,170,0.3),rgba(79,255,170,0.8))}

#s8 .mt-dp-cond-bar-fill.yellow{background:linear-gradient(90deg,rgba(245,185,66,0.3),rgba(245,185,66,0.8))}

#s8 .mt-dp-cond-bar-fill.red{background:linear-gradient(90deg,rgba(229,80,80,0.3),rgba(229,80,80,0.7))}

/* ── Condition weight + required badges (Phase 6) ── */
.mt-dp-cond-weight{font-family:'IBM Plex Mono',monospace;font-size:8px;color:var(--cyan);background:rgba(109,232,225,0.06);padding:1px 6px;border:1px solid rgba(109,232,225,0.12);border-radius:2px;flex-shrink:0;letter-spacing:0.3px}
.mt-dp-cond-req{font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:1.5px;font-weight:700;color:rgba(109,232,225,0.8);background:rgba(109,232,225,0.08);border:1px solid rgba(109,232,225,0.2);padding:1px 5px;flex-shrink:0}
.mt-dp-cond-required{border-left-color:rgba(109,232,225,0.5) !important;background:rgba(109,232,225,0.02) !important}
.mt-dp-cond-required .mt-dp-cond-dot.watching{box-shadow:0 0 8px rgba(109,232,225,0.3),0 0 4px rgba(245,185,66,0.3)}

/* ── Tenon Lock · Vesting Contract section ── */
.mt-dp-vesting{border:1px solid rgba(79,255,170,0.12) !important;background:linear-gradient(165deg,rgba(79,255,170,0.03) 0%,rgba(79,255,170,0.01) 100%) !important;position:relative;overflow:hidden}
.mt-dp-vesting::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(79,255,170,0.25) 30%,rgba(79,255,170,0.4) 50%,rgba(79,255,170,0.25) 70%,transparent 95%);pointer-events:none}
.mt-dp-vest-immutable{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:1.5px;color:rgba(245,185,66,0.6);background:rgba(245,185,66,0.06);border:1px solid rgba(245,185,66,0.15);padding:1px 6px;margin-left:8px;vertical-align:middle}
.mt-dp-vest-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-bottom:8px}
.mt-dp-vest-item{padding:4px 0}
.mt-dp-vest-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1.5px;color:rgba(255,255,255,0.4);font-weight:700;margin-bottom:2px}
.mt-dp-vest-val{font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(79,255,170,0.8);font-weight:500}
.mt-dp-vest-desc{font-family:'IBM Plex Mono',monospace;font-size:8px;color:rgba(79,255,170,0.45);line-height:1.5;padding:4px 0 8px;border-top:1px solid rgba(79,255,170,0.06);letter-spacing:0.2px}
.mt-dp-vest-progress{margin:4px 0 6px}
.mt-dp-vest-progress-bar{width:100%;height:3px;background:rgba(79,255,170,0.08);overflow:hidden}
.mt-dp-vest-progress-fill{height:100%;background:linear-gradient(90deg,rgba(79,255,170,0.4),rgba(79,255,170,0.9));transition:width 1s cubic-bezier(.16,1,.3,1);position:relative}
.mt-dp-vest-progress-fill::after{content:'';position:absolute;right:0;top:-1px;bottom:-1px;width:6px;background:rgba(79,255,170,0.9);box-shadow:0 0 8px rgba(79,255,170,0.6)}
.mt-dp-vest-progress-label{font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(79,255,170,0.4);margin-top:4px;letter-spacing:0.5px}
.mt-dp-vest-deployed{font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(255,255,255,0.3);letter-spacing:0.3px}

/* ── Edit button ── */



/* ── Actions ── */

#s8 .mt-dp-actions{padding:12px 18px 28px;display:flex;gap:8px;flex-wrap:wrap}

#s8 .mt-dp-btn{
  flex:1;min-width:80px;font-family:'Orbitron',sans-serif;font-size:7px;
  font-weight:700;letter-spacing:2px;padding:12px 8px;border:1px solid;
  cursor:pointer;text-align:center;transition:all 0.22s;background:transparent;
  position:relative;overflow:hidden;
}
/* Shimmer sweep */
#s8 .mt-dp-btn::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.04),transparent);transition:left 0.4s;pointer-events:none;z-index:1}
#s8 .mt-dp-btn:hover::before{left:120%}
/* Bracket corners */
#s8 .mt-dp-btn::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--btn-bracket,rgba(109,232,225,0.6)),var(--btn-bracket,rgba(109,232,225,0.6))) top left/8px 1.5px no-repeat,
    linear-gradient(var(--btn-bracket,rgba(109,232,225,0.6)),var(--btn-bracket,rgba(109,232,225,0.6))) top left/1.5px 8px no-repeat,
    linear-gradient(var(--btn-bracket,rgba(109,232,225,0.6)),var(--btn-bracket,rgba(109,232,225,0.6))) top right/8px 1.5px no-repeat,
    linear-gradient(var(--btn-bracket,rgba(109,232,225,0.6)),var(--btn-bracket,rgba(109,232,225,0.6))) top right/1.5px 8px no-repeat,
    linear-gradient(var(--btn-bracket,rgba(109,232,225,0.6)),var(--btn-bracket,rgba(109,232,225,0.6))) bottom left/8px 1.5px no-repeat,
    linear-gradient(var(--btn-bracket,rgba(109,232,225,0.6)),var(--btn-bracket,rgba(109,232,225,0.6))) bottom left/1.5px 8px no-repeat,
    linear-gradient(var(--btn-bracket,rgba(109,232,225,0.6)),var(--btn-bracket,rgba(109,232,225,0.6))) bottom right/8px 1.5px no-repeat,
    linear-gradient(var(--btn-bracket,rgba(109,232,225,0.6)),var(--btn-bracket,rgba(109,232,225,0.6))) bottom right/1.5px 8px no-repeat;
  opacity:0;transition:opacity 0.22s;
}
#s8 .mt-dp-btn:hover::after{opacity:1}

#s8 .mt-dp-btn.primary{border-color:rgba(109,232,225,0.15);color:rgba(109,232,225,0.6);--btn-bracket:rgba(109,232,225,0.7)}

#s8 .mt-dp-btn.primary:hover{border-color:rgba(109,232,225,0.45);color:rgba(109,232,225,1);background:rgba(109,232,225,0.04);box-shadow:0 0 20px rgba(109,232,225,0.06)}

#s8 .mt-dp-btn.danger{border-color:rgba(229,80,80,0.12);color:rgba(229,80,80,0.45);--btn-bracket:rgba(229,80,80,0.7)}

#s8 .mt-dp-btn.danger:hover{border-color:rgba(229,80,80,0.4);color:rgba(229,80,80,0.95);background:rgba(229,80,80,0.04)}

#s8 .mt-dp-btn.gold-btn{border-color:rgba(255,215,0,0.15);color:rgba(255,215,0,0.55);--btn-bracket:rgba(255,215,0,0.7)}

#s8 .mt-dp-btn.gold-btn:hover{border-color:rgba(255,215,0,0.4);color:rgba(255,215,0,1);background:rgba(255,215,0,0.03)}

/* cond edit row */

#s8 .mt-dp-cond-edit-row{display:none;padding:8px 12px 10px;background:rgba(4,6,14,0.8);border-left:2px solid rgba(109,232,225,0.12);margin-bottom:6px}

#s8 .mt-dp-cond-edit-row.open{display:block}

#s8 .mt-dp-cond-edit-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(255,255,255,0.4);letter-spacing:1.5px;margin-bottom:6px;text-transform:uppercase}

#s8 .mt-dp-cond-edit-input{width:100%;background:rgba(109,232,225,0.03);border:1px solid rgba(109,232,225,0.12);color:rgba(255,255,255,0.8);font-family:'IBM Plex Mono',monospace;font-size:9px;padding:6px 10px;outline:none;margin-bottom:7px}

#s8 .mt-dp-cond-edit-input:focus{border-color:rgba(109,232,225,0.3)}

#s8 .mt-dp-cond-edit-actions{display:flex;gap:6px}

#s8 .mt-dp-cond-save{flex:1;font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:1.5px;padding:6px;background:rgba(79,255,170,0.05);border:1px solid rgba(79,255,170,0.2);color:rgba(79,255,170,0.7);cursor:pointer;transition:all 0.2s}

#s8 .mt-dp-cond-save:hover{background:rgba(79,255,170,0.1);border-color:rgba(79,255,170,0.4);color:rgba(79,255,170,1)}

#s8 .mt-dp-cond-discard{flex:1;font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:1.5px;padding:6px;background:transparent;border:1px solid rgba(255,255,255,0.07);color:rgba(255,255,255,0.4);cursor:pointer;transition:all 0.2s}

#s8 .mt-dp-cond-discard:hover{border-color:rgba(255,255,255,0.2);color:rgba(255,255,255,0.6)}

#s8 .mt-dp-cond-edit-btn{background:transparent;border:none;color:rgba(109,232,225,0.4);cursor:pointer;font-size:10px;padding:0 2px;transition:color 0.2s;flex-shrink:0}

#s8 .mt-dp-cond-edit-btn:hover{color:rgba(109,232,225,0.8)}

/* ════ TRADE MANAGEMENT UX ════ */

/* List header with select-all + delete-all */

#s8 .mt-list-header{display:flex;align-items:center;gap:8px;padding:6px 14px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,0.02);background:rgba(4,6,14,0.3)}

#s8 .mt-list-hdr-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:rgba(255,255,255,0.18);flex:1;text-transform:uppercase}

#s8 .mt-list-hdr-lbl span{color:rgba(109,232,225,0.35);font-size:7px}

#s8 .mt-sel-all-btn{font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:1.5px;padding:3px 8px;background:transparent;border:1px solid rgba(109,232,225,0.07);color:rgba(109,232,225,0.4);cursor:pointer;transition:all 0.2s}

#s8 .mt-sel-all-btn:hover{border-color:rgba(109,232,225,0.25);color:rgba(109,232,225,0.7)}

#s8 .mt-sel-all-btn.active{border-color:rgba(109,232,225,0.35);color:rgba(109,232,225,0.85);background:rgba(109,232,225,0.04)}

#s8 .mt-del-all-btn{font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:1.5px;padding:3px 8px;background:transparent;border:1px solid rgba(229,80,80,0.2);color:rgba(229,80,80,0.55);cursor:pointer;transition:all 0.2s}
/* Keyboard focus ring for S8 controls (a11y) */
#s8 .mt-fb:focus-visible,#s8 .mt-hf:focus-visible,#s8 .mt-sort-btn:focus-visible,#s8 .mt-sel-all-btn:focus-visible,#s8 .mt-del-all-btn:focus-visible,#s8 .mt-dp-btn:focus-visible,#s8 .mt-ms-clear:focus-visible{outline:2px solid rgba(109,232,225,0.7);outline-offset:2px}

#s8 .mt-del-all-btn:hover{border-color:rgba(229,80,80,0.3);color:rgba(229,80,80,0.7);background:rgba(229,80,80,0.03)}

/* Card checkbox + delete button */


/* ════ BULK SELECT BAR ════ */
#s8 .mt-multisel-bar{
  position:absolute;bottom:0;left:0;right:0;z-index:50;
  background:linear-gradient(160deg,rgba(6,10,22,0.99),rgba(4,7,16,0.99));
  border-top:1px solid rgba(109,232,225,0.15);
  padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  transform:translateY(100%);opacity:0;pointer-events:none;
  transition:all 0.28s cubic-bezier(.16,1,.3,1);
  box-shadow:0 -8px 40px rgba(0,0,0,0.6),0 -1px 0 rgba(109,232,225,0.08);
}
#s8 .mt-multisel-bar::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(109,232,225,0.25),transparent);
}
#s8 .mt-multisel-bar.show{ transform:translateY(0);opacity:1;pointer-events:all; }
#s8 .mt-ms-left{ display:flex;align-items:center;gap:10px; }
#s8 .mt-ms-clear{
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.4);cursor:pointer;transition:all 0.2s;flex-shrink:0;
}
#s8 .mt-ms-clear:hover{ border-color:rgba(255,255,255,0.25);color:rgba(255,255,255,0.8); }
#s8 .mt-ms-count{
  font-family:'Orbitron',sans-serif;font-size:8px;font-weight:800;
  letter-spacing:1.5px;color:rgba(109,232,225,0.8);
}
#s8 .mt-ms-count #mt-ms-num{ color:rgba(109,232,225,1); }
#s8 .mt-ms-actions{ display:flex;gap:8px;align-items:center; }
#s8 .mt-ms-action{
  font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;
  letter-spacing:1.5px;padding:8px 16px;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.35);transition:all 0.2s;
}
#s8 .mt-ms-action:hover{
  border-color:rgba(255,255,255,0.25);color:rgba(255,255,255,0.7);
}
#s8 .mt-ms-action.danger{
  border-color:rgba(229,80,80,0.25);color:rgba(229,80,80,0.6);
  background:rgba(229,80,80,0.04);
}
#s8 .mt-ms-action.danger:hover{
  border-color:rgba(229,80,80,0.5);color:rgba(255,100,100,0.9);
  background:rgba(229,80,80,0.08);
}


#s8 .mt-card-cb{ opacity:0; }
#s8 .mt-card:hover .mt-card-cb{ opacity:1; }
#s8 .mt-card.multi-sel .mt-card-cb{ opacity:1; }
#s8 .mt-card.multi-sel{ padding-left:32px !important; }
#s8 .mt-card-cb{position:absolute;top:50%;left:8px;transform:translateY(-50%);z-index:10;display:flex;align-items:center;gap:5px;opacity:0;transition:opacity 0.18s}

#s8 .mt-card:hover .mt-card-cb,#s8 .mt-card.multi-sel .mt-card-cb{opacity:1}

#s8 .mt-card-checkbox{width:15px;height:15px;border:1.5px solid rgba(109,232,225,0.3);background:rgba(0,0,0,0.4);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;flex-shrink:0;border-radius:2px}

#s8 .mt-card-checkbox:hover{border-color:rgba(109,232,225,0.5);background:rgba(109,232,225,0.04)}

#s8 .mt-card.multi-sel .mt-card-checkbox{border-color:rgba(109,232,225,0.7);background:rgba(109,232,225,0.12)}

#s8 .mt-card-checkbox::after{content:'✓';font-size:7px;color:rgba(109,232,225,0.9);opacity:0;line-height:1}

#s8 .mt-card.multi-sel .mt-card-checkbox::after{opacity:1}

#s8 .mt-card-del-btn{width:16px;height:16px;background:transparent;border:1px solid rgba(229,80,80,0.12);cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(229,80,80,0.3);font-size:9px;line-height:1;transition:all 0.15s;flex-shrink:0}

#s8 .mt-card-del-btn:hover{border-color:rgba(229,80,80,0.5);color:rgba(229,80,80,0.9);background:rgba(229,80,80,0.06)}

/* Inline delete confirm overlay on card */

#s8 .mt-card-del-confirm{position:absolute;inset:0;background:rgba(4,6,14,0.97);z-index:20;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(229,80,80,0.2);animation:delConfirmIn 0.18s ease-out}
@keyframes delConfirmIn{from{opacity:0;transform:scale(0.97)}to{opacity:1;transform:none}}

#s8 .mt-card-del-confirm.show{display:flex}

#s8 .mt-card-del-confirm-text{font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:2px;color:rgba(229,80,80,0.8);text-align:center}

#s8 .mt-card-del-confirm-text small{display:block;font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(255,255,255,0.35);letter-spacing:0.5px;margin-top:3px}

#s8 .mt-card-del-btns{display:flex;gap:6px}

#s8 .mt-card-del-yes{font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:1.5px;padding:6px 14px;background:rgba(229,80,80,0.1);border:1px solid rgba(229,80,80,0.3);color:rgba(229,80,80,0.9);cursor:pointer;transition:all 0.15s}

#s8 .mt-card-del-yes:hover{background:rgba(229,80,80,0.2);box-shadow:0 0 16px rgba(229,80,80,0.1)}

#s8 .mt-card-del-no{font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:1.5px;padding:6px 14px;background:transparent;border:1px solid rgba(255,255,255,0.06);color:rgba(255,255,255,0.3);cursor:pointer;transition:all 0.15s}

#s8 .mt-card-del-no:hover{border-color:rgba(255,255,255,0.2);color:rgba(255,255,255,0.7)}

/* Multi-select floating action bar */

#s8 .mt-multisel-bar{position:absolute;bottom:0;left:0;right:0;z-index:50;background:linear-gradient(160deg,rgba(8,14,26,0.99),rgba(5,9,18,0.99));border-top:1px solid rgba(109,232,225,0.12);padding:10px 16px;display:flex;align-items:center;gap:10px;transform:translateY(100%);opacity:0;pointer-events:none;transition:all 0.28s cubic-bezier(.16,1,.3,1);box-shadow:0 -8px 40px rgba(0,0,0,0.5)}

#s8 .mt-multisel-bar::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(109,232,225,0.2),transparent)}

#s8 .mt-multisel-bar.show{transform:translateY(0);opacity:1;pointer-events:all}

#s8 .mt-ms-count{font-family:'Orbitron',sans-serif;font-size:8px;font-weight:700;letter-spacing:1.5px;color:rgba(109,232,225,0.8);flex:1}

#s8 .mt-ms-count span{color:rgba(255,255,255,0.3);font-size:7px;margin-left:4px;font-family:'IBM Plex Mono',monospace;letter-spacing:0.5px}





/* Delete all confirm bar */

#s8 .mt-delall-confirm{position:absolute;bottom:0;left:0;right:0;z-index:51;background:linear-gradient(160deg,rgba(14,4,8,0.99),rgba(10,3,6,0.99));border-top:1px solid rgba(229,80,80,0.2);padding:10px 16px;display:flex;align-items:center;gap:10px;transform:translateY(100%);opacity:0;pointer-events:none;transition:all 0.28s cubic-bezier(.16,1,.3,1)}

#s8 .mt-delall-confirm.show{transform:translateY(0);opacity:1;pointer-events:all}

#s8 .mt-delall-confirm::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(229,80,80,0.2),transparent)}

#s8 .mt-delall-confirm-text{font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:1.5px;color:rgba(229,80,80,0.8);flex:1}

#s8 .mt-delall-confirm-text small{display:block;font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(255,255,255,0.35);letter-spacing:0.5px;margin-top:2px}

/* DP Condition sections split by leg */







/* Editable condition inline */

#s8 .mt-dp-cond-edit-btn{width:18px;height:18px;background:transparent;border:1px solid rgba(255,255,255,0.05);cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.3);transition:all 0.15s;flex-shrink:0;opacity:0;font-size:8px;margin-left:4px}

#s8 .mt-dp-cond:hover .mt-dp-cond-edit-btn{opacity:1}

#s8 .mt-dp-cond-edit-btn:hover{border-color:rgba(109,232,225,0.35);color:rgba(109,232,225,0.8);background:rgba(109,232,225,0.04)}

/* Inline edit row */

#s8 .mt-dp-cond-edit-row{display:none;padding:8px 12px 10px;margin-bottom:6px;background:rgba(109,232,225,0.02);border:1px solid rgba(109,232,225,0.1);border-left:2px solid rgba(109,232,225,0.4)}

#s8 .mt-dp-cond-edit-row.open{display:flex;flex-direction:column;gap:7px;animation:delConfirmIn 0.2s ease-out}

#s8 .mt-dp-cond-edit-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(255,255,255,0.3);letter-spacing:1px;text-transform:uppercase}

#s8 .mt-dp-cond-edit-input{background:rgba(4,8,18,0.9);border:1px solid rgba(109,232,225,0.15);color:rgba(255,255,255,0.8);font-family:'IBM Plex Mono',monospace;font-size:9px;padding:7px 10px;outline:none;width:100%;transition:border-color 0.2s;letter-spacing:0.3px}

#s8 .mt-dp-cond-edit-input:focus{border-color:rgba(109,232,225,0.45);box-shadow:0 0 14px rgba(109,232,225,0.05)}

#s8 .mt-dp-cond-edit-actions{display:flex;gap:5px}

#s8 .mt-dp-cond-save{font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:1.5px;padding:5px 12px;background:rgba(79,255,170,0.06);border:1px solid rgba(79,255,170,0.2);color:rgba(79,255,170,0.8);cursor:pointer;transition:all 0.15s}

#s8 .mt-dp-cond-save:hover{background:rgba(79,255,170,0.12);color:rgba(79,255,170,1);border-color:rgba(79,255,170,0.4)}

#s8 .mt-dp-cond-discard{font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:1.5px;padding:5px 10px;background:transparent;border:1px solid rgba(255,255,255,0.06);color:rgba(255,255,255,0.4);cursor:pointer;transition:all 0.15s}

#s8 .mt-dp-cond-discard:hover{border-color:rgba(255,255,255,0.2);color:rgba(255,255,255,0.6)}

/* ════ FOOTER ════ */

#s8 .fi{color:rgba(255,255,255,0.22);font-size:8px;font-family:'IBM Plex Mono',monospace;letter-spacing:0.5px;display:flex;align-items:center;gap:5px}

#s8 .fd{width:4px;height:4px;border-radius:50%;flex-shrink:0}

#s8 .fd.g{background:rgba(79,255,170,1);box-shadow:0 0 6px rgba(79,255,170,0.7)}
#s8 .fd.c{background:rgba(109,232,225,1);box-shadow:0 0 6px rgba(109,232,225,0.7)}


/* ════ HERO COLLAPSE ════ */

/* ════ TOAST ════ */

#s8 .toast-wrap{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);z-index:9999;pointer-events:none}

#s8 .toast{background:rgba(8,14,28,0.96);border:1px solid rgba(109,232,225,0.18);padding:8px 20px;font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:2px;color:rgba(109,232,225,0.8);opacity:0;transform:translateY(12px) scale(0.97);transition:all 0.28s cubic-bezier(.16,1,.3,1);backdrop-filter:blur(16px)}

#s8 .toast.show{opacity:1;transform:translateY(0) scale(1)}
#s8 .toast.red{border-color:rgba(229,80,80,0.25);color:rgba(229,80,80,0.8)}
#s8 .toast.green{border-color:rgba(79,255,170,0.25);color:rgba(79,255,170,0.8)}
#s8 .toast.gold{border-color:rgba(255,215,0,0.25);color:rgba(255,215,0,0.8)}

/* ════════════════════════════════════════
   BRAG CARD OVERLAY — cloned from S7 referral card
════════════════════════════════════════ */

#s8 .mt-brag-overlay{position:fixed;inset:0;background:rgba(2,3,8,0.92);z-index:9998;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.4s}

#s8 .mt-brag-overlay.show{opacity:1;pointer-events:all}

#s8 .mt-brag-canvas{position:absolute;inset:0;z-index:0}

#s8 .mt-brag-card{width:480px;background:linear-gradient(170deg,rgba(8,11,22,0.99),rgba(4,6,14,1),rgba(6,8,18,1));border:1px solid rgba(255,215,0,0.12);position:relative;overflow:visible;z-index:2;transform:scale(0.85) translateY(20px);transition:transform 0.5s cubic-bezier(.16,1,.3,1);box-shadow:0 0 80px rgba(255,185,0,0.08),0 0 140px rgba(255,215,0,0.04),0 20px 60px rgba(0,0,0,0.5),0 0 200px rgba(255,185,0,0.03)}

#s8 .mt-brag-overlay.show .mt-brag-card{transform:scale(1) translateY(0)}

#s8 .mt-brag-outer-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:500px;pointer-events:none;z-index:-1}

#s8 .mt-brag-outer-glow::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(255,200,0,0.045),rgba(255,160,0,0.02) 35%,transparent 65%);filter:blur(50px);animation:bragOuter 4s ease-in-out infinite}

#s8 .mt-brag-outer-glow::after{content:'';position:absolute;inset:20px;background:radial-gradient(ellipse at 50% 55%,rgba(255,185,0,0.03),transparent 55%);filter:blur(60px);animation:bragOuter 5s ease-in-out 1s infinite}
@keyframes bragOuter{0%,100%{opacity:0.7;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}

#s8 .mt-brag-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 5%,rgba(255,185,0,0.4) 15%,rgba(255,215,0,0.65) 35%,rgba(255,240,160,0.85) 50%,rgba(255,215,0,0.65) 65%,rgba(255,185,0,0.4) 85%,transparent 95%);z-index:5;box-shadow:0 0 12px rgba(255,215,0,0.15)}

#s8 .mt-brag-card::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 19px,rgba(255,215,0,0.008) 19px,rgba(255,215,0,0.008) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(255,215,0,0.008) 19px,rgba(255,215,0,0.008) 20px),radial-gradient(ellipse at 50% 25%,rgba(255,215,0,0.04),transparent 55%),radial-gradient(ellipse at 50% 75%,rgba(255,185,0,0.015),transparent 50%);pointer-events:none;z-index:1;overflow:hidden}

#s8 .mt-brag-border{position:absolute;inset:-1px;background:linear-gradient(135deg,rgba(255,215,0,0.3),rgba(255,185,0,0.15),rgba(255,240,160,0.2),rgba(255,185,0,0.1),rgba(255,215,0,0.25));background-size:400% 400%;animation:bragBorder 5s ease infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;pointer-events:none;z-index:4}
@keyframes bragBorder{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

#s8 .mt-brag-flash{position:absolute;inset:0;z-index:10;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(255,215,0,0.35),rgba(255,185,0,0.15) 40%,transparent 70%);opacity:0}

#s8 .mt-brag-overlay.show .mt-brag-flash{animation:bragFlash 0.7s ease-out forwards}
@keyframes bragFlash{0%{opacity:1;transform:scale(0.7)}100%{opacity:0;transform:scale(2.5)}}

#s8 .mt-brag-bottom-bar{position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 8%,rgba(255,185,0,0.25) 35%,rgba(255,215,0,0.4) 50%,rgba(255,185,0,0.25) 65%,transparent 92%);z-index:5}

#s8 .mt-brag-close{position:absolute;top:14px;right:18px;font-family:'IBM Plex Mono',monospace;font-size:14px;color:rgba(255,255,255,0.3);cursor:pointer;z-index:6;background:none;border:none;padding:4px 8px;transition:color 0.2s}

#s8 .mt-brag-close:hover{color:rgba(255,255,255,0.5)}

#s8 .mt-brag-inner{position:relative;z-index:3;padding:28px 36px 28px}

#s8 .mt-brag-inner>*{opacity:0;transform:translateY(8px);transition:opacity 0.35s,transform 0.35s}

#s8 .mt-brag-overlay.show .mt-brag-inner>*{opacity:1;transform:translateY(0)}

#s8 .mt-brag-inner>*:nth-child(1){transition-delay:0.1s}
#s8 .mt-brag-inner>*:nth-child(2){transition-delay:0.18s}

#s8 .mt-brag-inner>*:nth-child(3){transition-delay:0.26s}
#s8 .mt-brag-inner>*:nth-child(4){transition-delay:0.34s}
#s8 .mt-brag-inner>*:nth-child(5){transition-delay:0.42s}

/* Brag header */

#s8 .mt-brag-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}

#s8 .mt-brag-logo{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:7px;font-weight:900;display:flex;align-items:center;gap:10px}

#s8 .mt-brag-logo-text{background:linear-gradient(100deg,rgba(210,220,230,0.95) 0%,rgba(255,255,255,1) 30%,rgba(175,230,225,0.92) 65%,rgba(109,232,225,0.88) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 12px rgba(109,232,225,0.15))}

#s8 .mt-brag-logo span{background:inherit;-webkit-background-clip:text;-webkit-text-fill-color:transparent}

#s8 .mt-brag-tag{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:rgba(255,215,0,0.4);background:rgba(255,215,0,0.04);border:1px solid rgba(255,215,0,0.12);padding:3px 10px}

/* Brag earn block */

#s8 .mt-brag-earn{text-align:center;margin-bottom:24px;padding:18px 0;position:relative}

#s8 .mt-brag-earn::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:220px;height:80px;background:radial-gradient(ellipse,rgba(79,255,170,0.04),transparent 70%);filter:blur(20px)}

#s8 .mt-brag-earn-label{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px;color:rgba(255,255,255,0.35);margin-bottom:12px}

#s8 .mt-brag-earn-val{font-family:'Orbitron',sans-serif;font-size:48px;font-weight:900;background:linear-gradient(135deg,rgba(79,255,170,1),rgba(140,255,200,1),rgba(60,240,160,0.95));background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-1px;animation:pnlShimmer 3s linear infinite;filter:drop-shadow(0 0 20px rgba(79,255,170,0.15)) drop-shadow(0 2px 4px rgba(0,0,0,0.9)) drop-shadow(0 0 1px rgba(0,0,0,1))}

#s8 .mt-brag-earn-sub{font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(79,255,170,0.4);margin-top:6px;letter-spacing:1px}

/* Brag stats row */

#s8 .mt-brag-stats{display:flex;gap:0;margin-bottom:24px;border:1px solid rgba(255,215,0,0.1);background:rgba(0,0,0,0.45);position:relative}

#s8 .mt-brag-stats::before{content:'';position:absolute;top:-1px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,215,0,0.18),transparent)}

#s8 .mt-brag-stat{flex:1;padding:18px 12px;text-align:center;border-right:1px solid rgba(255,215,0,0.04);position:relative;overflow:hidden}

#s8 .mt-brag-stat:last-child{border-right:none}

#s8 .mt-brag-stat::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60px;height:40px;border-radius:50%;filter:blur(15px);opacity:0.4}

#s8 .mt-brag-stat:nth-child(1)::before{background:rgba(255,215,0,0.15)}
#s8 .mt-brag-stat:nth-child(2)::before{background:rgba(255,185,0,0.12)}

#s8 .mt-brag-stat:nth-child(3)::before{background:rgba(255,200,0,0.1)}
#s8 .mt-brag-stat:nth-child(4)::before{background:rgba(255,160,0,0.1)}

#s8 .mt-brag-stat-val{font-family:'Orbitron',sans-serif;font-size:20px;font-weight:800;color:rgba(255,255,255,0.95);display:block;margin-bottom:6px;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.9))}

#s8 .mt-brag-stat-val.green{color:rgba(79,255,170,1);text-shadow:0 0 12px rgba(79,255,170,0.3),0 1px 4px rgba(0,0,0,0.95)}
#s8 .mt-brag-stat-val.cyan{color:rgba(109,232,225,1);text-shadow:0 0 12px rgba(109,232,225,0.3),0 1px 4px rgba(0,0,0,0.95)}

#s8 .mt-brag-stat-val.gold{color:rgba(255,215,0,1);text-shadow:0 0 12px rgba(255,215,0,0.3),0 1px 4px rgba(0,0,0,0.95)}
#s8 .mt-brag-stat-val.purple{color:rgba(177,147,255,1);text-shadow:0 0 12px rgba(157,127,234,0.3),0 1px 4px rgba(0,0,0,0.95)}

#s8 .mt-brag-stat-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2.5px;color:rgba(255,255,255,0.42)}

/* Brag footer */

#s8 .mt-brag-footer{display:flex;align-items:center;justify-content:space-between;padding-top:20px;border-top:1px solid rgba(255,255,255,0.03);position:relative}

#s8 .mt-brag-footer::before{content:'';position:absolute;top:-1px;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,215,0,0.12),transparent)}

#s8 .mt-brag-link{font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(109,232,225,0.35);letter-spacing:0.5px}

#s8 .mt-brag-date{font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(255,255,255,0.3);letter-spacing:1px}

#s8 .mt-brag-actions{display:flex;gap:8px;margin-top:20px}

#s8 .mt-brag-action{flex:1;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:1.5px;padding:12px;text-align:center;cursor:pointer;transition:all 0.25s;border:1px solid rgba(109,232,225,0.06);background:rgba(109,232,225,0.02);color:rgba(109,232,225,0.35)}

#s8 .mt-brag-action:hover{background:rgba(109,232,225,0.08);color:rgba(109,232,225,0.9);border-color:rgba(109,232,225,0.2)}

#s8 .mt-brag-action.primary{border-color:rgba(255,215,0,0.2);background:linear-gradient(135deg,rgba(255,215,0,0.08),rgba(255,185,0,0.04));color:rgba(255,215,0,0.7)}

#s8 .mt-brag-action.primary:hover{background:linear-gradient(135deg,rgba(255,215,0,0.16),rgba(255,185,0,0.1));color:rgba(255,215,0,1);border-color:rgba(255,215,0,0.45);box-shadow:0 0 30px rgba(255,215,0,0.12)}

/* ════════════════════════════════
   TRADE EDIT DRAWER
════════════════════════════════ */

#s8 .mt-edit-overlay{position:fixed;inset:0;background:rgba(2,4,10,0.7);z-index:5000;opacity:0;pointer-events:none;transition:opacity 0.35s;backdrop-filter:blur(4px)}

#s8 .mt-edit-overlay.show{opacity:1;pointer-events:all}

#s8 .mt-edit-drawer{position:fixed;top:0;right:0;bottom:0;width:520px;z-index:5001;background:linear-gradient(180deg,rgba(7,12,24,0.99) 0%,rgba(4,8,18,1) 100%);border-left:1px solid rgba(109,232,225,0.1);transform:translateX(100%);transition:transform 0.45s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;overflow:hidden;box-shadow:-20px 0 80px rgba(0,0,0,0.7)}

#s8 .mt-edit-overlay.show .mt-edit-drawer{transform:translateX(0)}

#s8 .mt-edit-drawer::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(109,232,225,0.4) 40%,rgba(255,215,0,0.3) 60%,transparent);z-index:2}

#s8 .mt-edit-drawer-header{padding:20px 24px 16px;border-bottom:1px solid rgba(109,232,225,0.07);flex-shrink:0;position:relative;background:linear-gradient(160deg,rgba(8,14,26,0.98),rgba(5,9,18,0.99))}

#s8 .mt-edit-drawer-header::after{content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(109,232,225,0.15),transparent)}

#s8 .mt-edit-close{position:absolute;top:18px;right:18px;background:transparent;border:1px solid rgba(255,255,255,0.07);color:rgba(255,255,255,0.4);cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all 0.2s}

#s8 .mt-edit-close:hover{border-color:rgba(229,80,80,0.35);color:rgba(229,80,80,0.8);background:rgba(229,80,80,0.05)}

#s8 .mt-edit-drawer-title{font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:3px;color:rgba(255,255,255,0.85);margin-bottom:4px}

#s8 .mt-edit-drawer-sub{font-family:'IBM Plex Mono',monospace;font-size:8px;color:rgba(109,232,225,0.35);letter-spacing:1px}

#s8 .mt-edit-drawer-body{flex:1;overflow-y:auto;padding:0 0 30px;scrollbar-width:thin;scrollbar-color:rgba(109,232,225,0.06) transparent}

#s8 .mt-edit-drawer-body::-webkit-scrollbar{width:3px}

/* Section groups */

#s8 .mt-edit-section{border-bottom:1px solid rgba(255,255,255,0.03)}

#s8 .mt-edit-section-hdr{display:flex;align-items:center;gap:8px;padding:14px 24px 10px;cursor:pointer;user-select:none;transition:background 0.15s}

#s8 .mt-edit-section-hdr:hover{background:rgba(109,232,225,0.015)}

#s8 .mt-edit-section-title{font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:3px;color:rgba(109,232,225,0.4);flex:1;text-transform:uppercase}

#s8 .mt-edit-section-title::before{margin-right:6px;opacity:0.6}

#s8 .mt-edit-section-badge{font-family:'IBM Plex Mono',monospace;font-size:7px;padding:2px 7px;border:1px solid rgba(109,232,225,0.1);color:rgba(109,232,225,0.3);letter-spacing:1px}

#s8 .mt-edit-section-chevron{font-size:9px;color:rgba(255,255,255,0.35);transition:transform 0.25s}

#s8 .mt-edit-section.open .mt-edit-section-chevron{transform:rotate(180deg)}

#s8 .mt-edit-section-body{display:none;padding:0 24px 16px}

#s8 .mt-edit-section.open .mt-edit-section-body{display:block}

/* Leg tabs */

#s8 .mt-edit-leg-tabs{display:flex;gap:0;margin-bottom:14px;border:1px solid rgba(255,215,0,0.1)}

#s8 .mt-edit-leg-tab{flex:1;font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:2px;padding:8px 12px;text-align:center;cursor:pointer;color:rgba(255,255,255,0.35);background:transparent;border:none;border-right:1px solid rgba(255,215,0,0.08);transition:all 0.2s;position:relative}

#s8 .mt-edit-leg-tab:last-child{border-right:none}

#s8 .mt-edit-leg-tab:hover{color:rgba(255,215,0,0.5);background:rgba(255,215,0,0.02)}

#s8 .mt-edit-leg-tab.on{color:rgba(255,215,0,0.9);background:rgba(255,215,0,0.05)}

#s8 .mt-edit-leg-tab.on::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:rgba(255,215,0,0.5)}

#s8 .mt-edit-leg-tab.done-tab{color:rgba(79,255,170,0.5)}

#s8 .mt-edit-leg-tab.done-tab.on{color:rgba(79,255,170,0.9);background:rgba(79,255,170,0.05)}

#s8 .mt-edit-leg-tab.done-tab.on::after{background:rgba(79,255,170,0.5)}

#s8 .mt-edit-leg-panel{display:none}

#s8 .mt-edit-leg-panel.on{display:block}

/* Field rows */

#s8 .mt-edit-field{margin-bottom:14px}

#s8 .mt-edit-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}

#s8 .mt-edit-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1.5px;color:rgba(255,255,255,0.35);margin-bottom:5px;text-transform:uppercase;display:flex;align-items:center;gap:5px}

#s8 .mt-edit-lbl .lbl-badge{font-size:7px;padding:1px 5px;background:rgba(255,215,0,0.05);border:1px solid rgba(255,215,0,0.12);color:rgba(255,215,0,0.45);letter-spacing:1px}

#s8 .mt-edit-input{width:100%;background:rgba(3,6,14,0.9);border:1px solid rgba(109,232,225,0.1);color:rgba(255,255,255,0.82);font-family:'IBM Plex Mono',monospace;font-size:10px;padding:9px 12px;outline:none;transition:all 0.2s;letter-spacing:0.3px}

#s8 .mt-edit-input:focus{border-color:rgba(109,232,225,0.4);box-shadow:0 0 20px rgba(109,232,225,0.05),inset 0 0 12px rgba(109,232,225,0.02)}

#s8 .mt-edit-input.gold-input:focus{border-color:rgba(255,215,0,0.35);box-shadow:0 0 20px rgba(255,215,0,0.04)}

#s8 .mt-edit-input.danger-input{border-color:rgba(229,80,80,0.12)}

#s8 .mt-edit-input.danger-input:focus{border-color:rgba(229,80,80,0.4);box-shadow:0 0 16px rgba(229,80,80,0.05)}

/* Token selector pill */

#s8 .mt-edit-token-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}

#s8 .mt-edit-token{flex:1;display:flex;align-items:center;gap:8px;background:rgba(3,6,14,0.9);border:1px solid rgba(109,232,225,0.1);padding:9px 12px;cursor:pointer;transition:all 0.2s;position:relative}

#s8 .mt-edit-token:hover{border-color:rgba(109,232,225,0.35);background:rgba(109,232,225,0.03)}

#s8 .mt-edit-token-icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Orbitron',sans-serif;font-size:7px;font-weight:800;flex-shrink:0}

#s8 .mt-edit-token-icon.sol{background:linear-gradient(135deg,rgba(157,127,234,0.3),rgba(109,232,225,0.2));color:rgba(109,232,225,0.9);border:1px solid rgba(109,232,225,0.2)}

#s8 .mt-edit-token-icon.btc{background:linear-gradient(135deg,rgba(255,185,0,0.3),rgba(255,215,0,0.15));color:rgba(255,200,0,0.9);border:1px solid rgba(255,185,0,0.2)}

#s8 .mt-edit-token-icon.eth{background:linear-gradient(135deg,rgba(157,127,234,0.3),rgba(180,150,255,0.15));color:rgba(180,150,255,0.9);border:1px solid rgba(157,127,234,0.2)}

#s8 .mt-edit-token-icon.usdc{background:linear-gradient(135deg,rgba(39,117,202,0.3),rgba(60,140,220,0.15));color:rgba(100,170,255,0.9);border:1px solid rgba(60,140,220,0.2)}


#s8 .mt-edit-token-sub{font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(255,255,255,0.4);margin-top:1px}

#s8 .mt-edit-token-caret{margin-left:auto;color:rgba(255,255,255,0.35);font-size:8px}

#s8 .mt-edit-swap-arrow{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(109,232,225,0.04);border:1px solid rgba(109,232,225,0.1);color:rgba(109,232,225,0.4);cursor:pointer;font-size:13px;flex-shrink:0;transition:all 0.2s}

#s8 .mt-edit-swap-arrow:hover{background:rgba(109,232,225,0.08);border-color:rgba(109,232,225,0.3);color:rgba(109,232,225,0.9)}

/* Toggle direction */

#s8 .mt-edit-dir-row{display:flex;gap:0;margin-bottom:14px;border:1px solid rgba(109,232,225,0.08)}

#s8 .mt-edit-dir-btn{flex:1;font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:2px;padding:8px;text-align:center;cursor:pointer;background:transparent;border:none;border-right:1px solid rgba(109,232,225,0.06);transition:all 0.2s;color:rgba(255,255,255,0.35)}

#s8 .mt-edit-dir-btn:last-child{border-right:none}

#s8 .mt-edit-dir-btn:hover{color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.02)}

#s8 .mt-edit-dir-btn.on.long{color:rgba(79,255,170,0.9);background:rgba(79,255,170,0.06);border-color:rgba(79,255,170,0.1)}

#s8 .mt-edit-dir-btn.on.short{color:rgba(229,80,80,0.9);background:rgba(229,80,80,0.06)}

/* Slider */


#s8 .mt-edit-slider{-webkit-appearance:none;width:100%;height:3px;background:rgba(255,255,255,0.05);outline:none;cursor:pointer;margin:8px 0}

#s8 .mt-edit-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:0;background:rgba(109,232,225,0.8);cursor:pointer;border:1px solid rgba(109,232,225,0.5);box-shadow:0 0 10px rgba(109,232,225,0.3)}


/* Condition editor */




#s8 .mt-edit-cond-input{flex:1;background:transparent;border:none;color:rgba(255,255,255,0.7);font-family:'IBM Plex Mono',monospace;font-size:9px;outline:none;padding:0;letter-spacing:0.3px}

#s8 .mt-edit-cond-input:focus{color:rgba(255,255,255,0.95)}





#s8 .mt-edit-add-cond{font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:2px;padding:7px 12px;background:transparent;border:1px solid rgba(109,232,225,0.07);color:rgba(109,232,225,0.4);cursor:pointer;transition:all 0.2s;width:100%;text-align:left;margin-top:4px}

#s8 .mt-edit-add-cond:hover{border-color:rgba(109,232,225,0.25);color:rgba(109,232,225,0.7);background:rgba(109,232,225,0.02)}

/* Cond logic toggle */

#s8 .mt-edit-logic-row{display:flex;gap:6px;margin-bottom:14px}

#s8 .mt-edit-logic-btn{font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:1.5px;padding:5px 12px;background:transparent;border:1px solid rgba(255,255,255,0.07);color:rgba(255,255,255,0.35);cursor:pointer;transition:all 0.2s}

#s8 .mt-edit-logic-btn:hover{color:rgba(255,255,255,0.5);border-color:rgba(255,255,255,0.2)}

#s8 .mt-edit-logic-btn.on{color:rgba(109,232,225,0.9);background:rgba(109,232,225,0.06);border-color:rgba(109,232,225,0.25)}

/* Save bar */

#s8 .mt-edit-save-bar{padding:16px 24px;border-top:1px solid rgba(109,232,225,0.07);flex-shrink:0;display:flex;gap:8px;background:rgba(4,8,16,0.98);position:relative}

#s8 .mt-edit-save-bar::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(109,232,225,0.12),transparent)}

#s8 .mt-edit-save-btn{flex:2;font-family:'Orbitron',sans-serif;font-size:8px;font-weight:700;letter-spacing:2.5px;padding:13px;background:linear-gradient(135deg,rgba(79,255,170,0.08),rgba(109,232,225,0.05));border:1px solid rgba(79,255,170,0.2);color:rgba(79,255,170,0.8);cursor:pointer;transition:all 0.25s;position:relative;overflow:hidden}

#s8 .mt-edit-save-btn::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(79,255,170,0.08),transparent);transition:left 0.5s ease}

#s8 .mt-edit-save-btn:hover::before{left:120%}

#s8 .mt-edit-save-btn:hover{background:linear-gradient(135deg,rgba(79,255,170,0.15),rgba(109,232,225,0.1));border-color:rgba(79,255,170,0.45);color:rgba(79,255,170,1);box-shadow:0 0 30px rgba(79,255,170,0.08)}

#s8 .mt-edit-discard-btn{flex:1;font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:2px;padding:13px;background:transparent;border:1px solid rgba(255,255,255,0.06);color:rgba(255,255,255,0.4);cursor:pointer;transition:all 0.2s}

#s8 .mt-edit-discard-btn:hover{border-color:rgba(255,255,255,0.2);color:rgba(255,255,255,0.6)}

/* DP edit button — replace old manage legs */





/* ════ WIN STREAK BADGE ════ */

#s8 .mt-streak-badge{display:none;align-items:center;gap:6px;padding:5px 12px 5px 8px;border:1px solid rgba(255,215,0,0.2);background:rgba(255,215,0,0.04);position:relative;overflow:hidden;cursor:default}

#s8 .mt-streak-badge::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,215,0,0.04),transparent);animation:bragSweep 3s ease-in-out infinite}

#s8 .mt-streak-badge.hot{border-color:rgba(255,100,0,0.35);background:rgba(255,100,0,0.05);animation:cardBreathPipe 2s ease-in-out infinite}

#s8 .mt-streak-badge.hot::before{background:linear-gradient(90deg,transparent,rgba(255,120,0,0.06),transparent)}

#s8 .streak-icon{font-size:13px;line-height:1}

#s8 .streak-num{font-family:'Orbitron',sans-serif;font-size:16px;font-weight:900;color:rgba(255,215,0,0.95);text-shadow:0 0 16px rgba(255,215,0,0.4);line-height:1}

#s8 .mt-streak-badge.hot .streak-num{color:rgba(255,140,0,1);text-shadow:0 0 20px rgba(255,100,0,0.5)}

#s8 .streak-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:rgba(255,215,0,0.4);text-transform:uppercase;align-self:flex-end;margin-bottom:1px}

#s8 .mt-streak-badge.hot .streak-lbl{color:rgba(255,140,0,0.5)}

/* ════ CARD CLICK BLOOM ════ */

#s8 .mt-card-bloom{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:0;border-radius:inherit;transition:opacity 0.5s ease-out}

#s8 .mt-card-bloom.win.active{background:radial-gradient(ellipse at 50% 50%,rgba(79,255,170,0.12) 0%,rgba(79,255,170,0.04) 40%,transparent 70%);opacity:1}

#s8 .mt-card-bloom.loss.active{background:radial-gradient(ellipse at 50% 50%,rgba(229,80,80,0.1) 0%,rgba(229,80,80,0.03) 40%,transparent 70%);opacity:1}

/* ════ TODAY CHIP ════ */

#s8 .mt-today-chip{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;margin-top:6px;padding:4px 10px;border:1px solid rgba(109,232,225,0.08);background:rgba(109,232,225,0.03)}
#s8 .mt-today-chip .mt-chip-lbl{display:flex;align-items:center;gap:4px;justify-content:center}
#s8 .mt-chip-val{text-align:center}
#s8 .mt-chip-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;animation:livePulse 2s ease-in-out infinite}

#s8 .mt-chip-dot.green{background:rgba(79,255,170,0.9);box-shadow:0 0 8px rgba(79,255,170,0.5)}

#s8 .mt-chip-dot.red{background:rgba(229,80,80,0.9);box-shadow:0 0 8px rgba(229,80,80,0.5)}

#s8 .mt-chip-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:rgba(255,255,255,0.4);text-transform:uppercase}

#s8 .mt-chip-val{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:800;letter-spacing:0.3px}

#s8 .mt-chip-val.green{color:rgba(79,255,170,0.95);text-shadow:0 0 10px rgba(79,255,170,0.3)}

#s8 .mt-chip-val.red{color:rgba(229,80,80,0.95);text-shadow:0 0 10px rgba(229,80,80,0.3)}

/* ════ EQUITY CURVE ════ */

#s8 #mt-equity-canvas{position:absolute;top:0;left:0;height:65%;width:66%;z-index:0;pointer-events:none;opacity:0.5;overflow:hidden;mask-image:linear-gradient(to bottom,black 50%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 50%,transparent 100%)}

/* ════ BG COMET CANVAS (list panel) ════ */

#s8 .mt-list-bg-canvas{display:none}


/* ════════════════════════════════
   CARD POLISH — richer visual density
════════════════════════════════ */

/* Stronger left bar — 3px with gradient + outer glow */

#s8 .mt-card-left-bar{position:absolute;top:0;left:0;bottom:0;width:3px;background:linear-gradient(180deg,transparent 5%,var(--card-accent,rgba(109,232,225,0.5)) 30%,var(--card-accent,rgba(109,232,225,0.7)) 60%,transparent 95%);opacity:0;transition:opacity 0.2s;box-shadow:2px 0 14px var(--card-accent,rgba(109,232,225,0.25)),4px 0 28px rgba(0,0,0,0.1)}

#s8 .mt-card.selected .mt-card-left-bar,#s8 .mt-card:hover .mt-card-left-bar{opacity:1}

/* Card micro-texture — faint grid lines */

#s8 .mt-card::after{display:none}

/* Pair font — bigger, more dominant */



/* Status badge bigger */

/* PnL — stronger */

/* Pipeline route display — more vivid */

#s8 .mt-card-pipe-step.done{color:rgba(79,255,170,0.85);text-shadow:0 0 8px rgba(79,255,170,0.3)}

#s8 .mt-card-pipe-step.active{color:rgba(255,215,0,0.9);text-shadow:0 0 8px rgba(255,215,0,0.3)}

/* ════════════════════════════════
   DETAIL PANEL — RICH SECTION STYLING
════════════════════════════════ */

/* Right panel ambient bg — shifts with trade type */

#s8 .mt-dp{display:none;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative;z-index:1;scrollbar-width:thin;scrollbar-color:rgba(109,232,225,0.15) transparent}

#s8 .mt-dp::before{content:'';position:absolute;top:0;right:0;width:300px;height:300px;pointer-events:none;background:radial-gradient(ellipse at 80% 20%,var(--dp-accent,rgba(109,232,225,0.03)),transparent 65%);z-index:0;transition:background 0.6s}

/* Sections — alternating subtle bg */

#s8 .mt-dp-section{padding:14px 20px;border-bottom:1px solid rgba(255,255,255,0.03);flex-shrink:0;position:relative}

#s8 .mt-dp-section:nth-child(even){background:rgba(255,255,255,0.008)}

/* Section title — stronger */

#s8 .mt-dp-sec-title{font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:3px;color:rgba(109,232,225,0.5);margin-bottom:12px;display:flex;align-items:center;gap:6px;text-transform:uppercase;position:relative}

#s8 .mt-dp-sec-title::before{content:'';width:3px;height:10px;background:rgba(109,232,225,0.5);flex-shrink:0;box-shadow:0 0 6px rgba(109,232,225,0.3)}

#s8 .mt-dp-sec-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(109,232,225,0.12),transparent)}

/* Grid items — richer */

#s8 .mt-dp-item{padding:12px 20px;border-bottom:1px solid rgba(255,255,255,0.03);border-right:1px solid rgba(255,255,255,0.03);position:relative;transition:background 0.2s;overflow:hidden}

#s8 .mt-dp-item::before{content:'';position:absolute;top:0;left:0;bottom:0;width:2px;background:var(--dp-accent,rgba(109,232,225,0.1));opacity:0;transition:opacity 0.2s}

#s8 .mt-dp-item:hover::before{opacity:1}

#s8 .mt-dp-item:hover{background:rgba(109,232,225,0.02)}

#s8 .mt-dp-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1.5px;color:rgba(255,255,255,0.32);margin-bottom:5px;text-transform:uppercase}

#s8 .mt-dp-val{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:800;color:rgba(255,255,255,0.82)}



















/* ════ CONDITIONS UPGRADE ════ */

#s8 .mt-dp-cond{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;margin-bottom:4px;border-left:2px solid rgba(109,232,225,0.06);transition:all 0.2s;background:rgba(255,255,255,0.012);position:relative}

#s8 .mt-dp-cond:hover{background:rgba(109,232,225,0.025);border-left-color:rgba(109,232,225,0.25)}

#s8 .mt-dp-cond.met{border-left-color:rgba(79,255,170,0.3);background:linear-gradient(90deg,rgba(79,255,170,0.025),transparent 60%)}

#s8 .mt-dp-cond.watching{border-left-color:rgba(255,215,0,0.25);background:linear-gradient(90deg,rgba(255,215,0,0.015),transparent 60%)}

#s8 .mt-dp-cond.unmet{border-left-color:rgba(229,80,80,0.15);background:linear-gradient(90deg,rgba(229,80,80,0.01),transparent 60%)}

#s8 .mt-dp-cond-text{font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(255,255,255,0.45);flex:1;line-height:1.5}

#s8 .mt-dp-cond-text small{display:block;font-size:7px;color:rgba(255,255,255,0.22);margin-top:2px}

#s8 .mt-dp-cond-badge{font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:1.5px;font-weight:700;padding:2px 7px}

#s8 .mt-dp-cond-badge.met{color:rgba(79,255,170,0.8);background:rgba(79,255,170,0.06);border:1px solid rgba(79,255,170,0.2)}

#s8 .mt-dp-cond-badge.watching{color:rgba(255,215,0,0.8);background:rgba(255,215,0,0.05);border:1px solid rgba(255,215,0,0.2)}

#s8 .mt-dp-cond-badge.unmet{color:rgba(229,80,80,0.6);background:rgba(229,80,80,0.04);border:1px solid rgba(229,80,80,0.15)}

#s8 .mt-dp-cond-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:4px}

#s8 .mt-dp-cond-dot.met{background:rgba(79,255,170,0.8);box-shadow:0 0 8px rgba(79,255,170,0.4)}

#s8 .mt-dp-cond-dot.watching{background:rgba(255,215,0,0.8);box-shadow:0 0 8px rgba(255,215,0,0.4);animation:goldPulse 2s ease-in-out infinite}

#s8 .mt-dp-cond-dot.unmet{background:rgba(229,80,80,0.4)}

#s8 .mt-dp-cond-bar{height:2px;background:rgba(255,255,255,0.04);margin-top:5px;border-radius:1px;overflow:hidden}

#s8 .mt-dp-cond-bar-fill{height:100%;border-radius:1px;transition:width 0.8s cubic-bezier(.16,1,.3,1)}

#s8 .mt-dp-cond-bar-fill.green{background:linear-gradient(90deg,rgba(79,255,170,0.3),rgba(79,255,170,0.9))}

#s8 .mt-dp-cond-bar-fill.yellow{background:linear-gradient(90deg,rgba(255,215,0,0.3),rgba(255,215,0,0.9))}

#s8 .mt-dp-cond-bar-fill.red{background:linear-gradient(90deg,rgba(229,80,80,0.3),rgba(229,80,80,0.7))}

/* ════ ACTIONS ROW UPGRADE ════ */

#s8 .mt-dp-actions{padding:14px 20px 16px;display:flex;gap:8px;flex-shrink:0;background:linear-gradient(0deg,rgba(4,8,18,0.5),transparent)}

#s8 .mt-dp-btn{flex:1;font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:2.5px;padding:12px;border:1px solid;cursor:pointer;text-align:center;transition:all 0.25s;background:transparent;position:relative;overflow:hidden}

#s8 .mt-dp-btn::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.05),transparent);transition:left 0.5s}

#s8 .mt-dp-btn:hover::before{left:120%}

#s8 .mt-dp-btn.primary{border-color:rgba(109,232,225,0.2);color:rgba(109,232,225,0.7)}

#s8 .mt-dp-btn.primary:hover{border-color:rgba(109,232,225,0.5);color:rgba(109,232,225,1);background:rgba(109,232,225,0.05);box-shadow:0 0 24px rgba(109,232,225,0.08)}

#s8 .mt-dp-btn.danger{border-color:rgba(229,80,80,0.2);color:rgba(229,80,80,0.6)}

#s8 .mt-dp-btn.danger:hover{border-color:rgba(229,80,80,0.45);color:rgba(229,80,80,1);background:rgba(229,80,80,0.06);box-shadow:0 0 24px rgba(229,80,80,0.08)}

/* ════ EMPTY STATE UPGRADE ════ */

#s8 .mt-de{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:transparent;position:relative;overflow:hidden}

#s8 .mt-de::before{content:'';position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(109,232,225,0.012) 39px,rgba(109,232,225,0.012) 40px),
  repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(109,232,225,0.012) 39px,rgba(109,232,225,0.012) 40px);
  mask-image:radial-gradient(ellipse at center,rgba(0,0,0,0.6) 20%,transparent 80%);pointer-events:none}

#s8 .mt-de-ring{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}

#s8 .mt-de-ring::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(109,232,225,0.06);animation:deRing 4s ease-in-out infinite}

#s8 .mt-de-ring::after{content:'';position:absolute;inset:-20px;border-radius:50%;border:1px solid rgba(109,232,225,0.03);animation:deRing 4s ease-in-out infinite reverse}








/* Separator between main and meta row */

/* Ensure old row still works but we'll replace via JS */










/* Hairline between main + meta */


/* Meta / timestamp strip */









/* Pair name */


#s8 .mt-card.selected .mt-card-left-bar,#s8 .mt-card:hover .mt-card-left-bar{opacity:1}

/* Progress shown on selected card */





/* ═══════════════════════════════════════════
   CARD ROWS — SINGLE DEFINITIVE v10-FINAL
═══════════════════════════════════════════ */



















#s8 .mt-status{font-family:'Orbitron',sans-serif;font-size:7px;font-weight:800;letter-spacing:1.5px;padding:4px 9px;flex-shrink:0}

#s8 .mt-status.live{background:rgba(79,255,170,0.08);border:1px solid rgba(79,255,170,0.4);color:rgba(79,255,170,1);animation:mtPulse 2s ease-in-out infinite}
#s8 .mt-status.monitoring{background:rgba(109,232,225,0.06);border:1px solid rgba(109,232,225,0.25);color:rgba(109,232,225,0.85)}

#s8 .mt-status.completed{background:rgba(79,255,170,0.04);border:1px solid rgba(79,255,170,0.15);color:rgba(79,255,170,0.45)}

#s8 .mt-status.liquidated{background:rgba(229,80,80,0.1);border:1px solid rgba(229,80,80,0.4);color:rgba(255,100,100,1);font-weight:900}

#s8 .mt-status.cancelled{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);color:rgba(255,255,255,0.35)}

#s8 .mt-status.pending{background:rgba(255,215,0,0.05);border:1px solid rgba(255,215,0,0.25);color:rgba(255,215,0,0.8)}

#s8 .mt-card-left-bar{position:absolute;top:0;left:0;bottom:0;width:3px;background:linear-gradient(180deg,transparent 5%,var(--card-accent,rgba(109,232,225,0.7)) 30%,var(--card-accent,rgba(109,232,225,0.9)) 60%,transparent 95%);opacity:0;transition:opacity 0.2s;box-shadow:3px 0 16px var(--card-accent,rgba(109,232,225,0.3));z-index:3}

#s8 .mt-card.selected .mt-card-left-bar,#s8 .mt-card:hover .mt-card-left-bar{opacity:1}




/* ════ BRAG BUTTON GOLD CORNERS — CSS only, no span elements ════ */

#s8 .mt-brag-btn{position:relative}

#s8 .mt-brag-btn::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,210,0,0.9),rgba(255,210,0,0.9)) top left / 10px 1.5px no-repeat,
    linear-gradient(rgba(255,210,0,0.9),rgba(255,210,0,0.9)) top left / 1.5px 10px no-repeat,
    linear-gradient(rgba(255,210,0,0.9),rgba(255,210,0,0.9)) top right / 10px 1.5px no-repeat,
    linear-gradient(rgba(255,210,0,0.9),rgba(255,210,0,0.9)) top right / 1.5px 10px no-repeat,
    linear-gradient(rgba(255,210,0,0.9),rgba(255,210,0,0.9)) bottom left / 10px 1.5px no-repeat,
    linear-gradient(rgba(255,210,0,0.9),rgba(255,210,0,0.9)) bottom left / 1.5px 10px no-repeat,
    linear-gradient(rgba(255,210,0,0.9),rgba(255,210,0,0.9)) bottom right / 10px 1.5px no-repeat,
    linear-gradient(rgba(255,210,0,0.9),rgba(255,210,0,0.9)) bottom right / 1.5px 10px no-repeat;
  animation:bragCornerBreathe 2.8s ease-in-out infinite;
  filter:drop-shadow(0 0 4px rgba(255,210,0,0.6));
}

#s8 .mt-brag-btn:hover::after{
  background: none;
  border: 1.5px solid rgba(255,230,0,0.85);
  box-shadow: 0 0 12px rgba(255,215,0,0.15), inset 0 0 12px rgba(255,215,0,0.04);
}
@keyframes bragCornerBreathe{
  0%,100%{opacity:0.65;filter:drop-shadow(0 0 3px rgba(255,200,0,0.4))}
  50%{opacity:1;filter:drop-shadow(0 0 8px rgba(255,220,0,0.7))}
}

/* ══ EARN PAGE — Connect Wallet button (Share Trade Card style) ══ */
#earn-connect-btn::before{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,215,0,0.1),transparent);
  animation:bragSweep 3.5s ease-in-out infinite;pointer-events:none
}
#earn-connect-btn::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,210,0,0.9),rgba(255,210,0,0.9)) top    left  / 10px 1.5px no-repeat,
    linear-gradient(rgba(255,210,0,0.9),rgba(255,210,0,0.9)) top    left  / 1.5px 10px no-repeat,
    linear-gradient(rgba(255,210,0,0.9),rgba(255,210,0,0.9)) top    right / 10px 1.5px no-repeat,
    linear-gradient(rgba(255,210,0,0.9),rgba(255,210,0,0.9)) top    right / 1.5px 10px no-repeat,
    linear-gradient(rgba(255,210,0,0.9),rgba(255,210,0,0.9)) bottom left  / 10px 1.5px no-repeat,
    linear-gradient(rgba(255,210,0,0.9),rgba(255,210,0,0.9)) bottom left  / 1.5px 10px no-repeat,
    linear-gradient(rgba(255,210,0,0.9),rgba(255,210,0,0.9)) bottom right / 10px 1.5px no-repeat,
    linear-gradient(rgba(255,210,0,0.9),rgba(255,210,0,0.9)) bottom right / 1.5px 10px no-repeat;
  animation:bragCornerBreathe 2.8s ease-in-out infinite;
  filter:drop-shadow(0 0 4px rgba(255,210,0,0.6))
}
#earn-connect-btn:hover{
  border-color:rgba(255,215,0,0.4);color:rgba(255,215,0,1);letter-spacing:2.5px;
  box-shadow:0 0 40px rgba(255,215,0,0.08),inset 0 0 20px rgba(255,215,0,0.03)
}
#earn-connect-btn:hover::after{
  background:none;border:1.5px solid rgba(255,230,0,0.85);
  box-shadow:0 0 12px rgba(255,215,0,0.15),inset 0 0 12px rgba(255,215,0,0.04)
}



/* Today chip — inline in strip, not fixed */





/* ── Footer right cluster ── */



/* ── Icon buttons (gift, bell) ── */






/* ── Chevron inside wallet ── */



/* ════ FOOTER ════ */


#s8 .foot-trust{display:flex;align-items:center;gap:10px;flex:1;overflow:hidden}


#s8 .fi{color:rgba(255,255,255,0.28);font-size:8px;font-family:'IBM Plex Mono',monospace;letter-spacing:0.3px;display:flex;align-items:center;gap:5px;white-space:nowrap}

#s8 .fd{width:4px;height:4px;border-radius:50%;flex-shrink:0}

#s8 .fd.g{background:rgba(79,255,170,0.8)}
#s8 .fd.c{background:rgba(109,232,225,0.8)}

/* Nav dots — inherit from layout.css base (5px dots), no S8 overrides needed */


/* ── Floating sound/settings above footer ── */




#s8 .foot-float-btns{position:fixed;right:12px;bottom:46px;z-index:500;display:flex;flex-direction:row;gap:6px}

#s8 .foot-float-btn{width:26px;height:26px;border-radius:4px;background:transparent;border:1px solid rgba(109,232,225,0.06);color:rgba(255,255,255,0.3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}

#s8 .foot-float-btn:hover{border-color:rgba(109,232,225,0.2);color:rgba(109,232,225,0.6)}

#s8 .foot-float-btn svg{width:11px;height:11px}



/* ════ PIPELINE CARD — FLOW REDESIGN ════ */

/* Pipe block wrapper */





/* ── FLOW DIAGRAM ── */


/* Token node */










/* Connector arrow between nodes */












/* Leg detail cards — horizontal */



















/* ════════════════════════════════════════
   SWAP CARD OVERLAY — ported from S2 v384
════════════════════════════════════════ */

:root{--cyan:rgba(109,232,225,1);--green:rgba(79,255,170,1);--border:rgba(109,232,225,0.1)}

#s8 .sc-overlay{position:fixed;inset:0;z-index:6000;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.35s}

#s8 .sc-overlay.show{opacity:1;pointer-events:all}

#s8 .sc-overlay-bg{position:absolute;inset:0;background:rgba(2,4,12,0.82);backdrop-filter:blur(12px)}

#s8 .sc-panel{position:relative;width:460px;max-height:calc(100vh - 120px);display:flex;flex-direction:column;background:transparent;transform:scale(0.96) translateY(12px);transition:transform 0.42s cubic-bezier(0.16,1,0.3,1),opacity 0.42s;opacity:0}

#s8 .sc-overlay.show .sc-panel{transform:scale(1) translateY(0);opacity:1}

/* Header bar */

#s8 .sc-panel-hd{height:52px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid rgba(109,232,225,0.08);background:rgba(4,6,14,0.97);backdrop-filter:blur(20px);flex-shrink:0;gap:10px}

#s8 .sc-panel-title{font-family:'Orbitron',sans-serif;font-size:8px;font-weight:700;letter-spacing:2.5px;color:rgba(255,255,255,0.6)}

#s8 .sc-panel-sub{font-family:'IBM Plex Mono',monospace;font-size:8px;color:rgba(109,232,225,0.5);flex:1}

#s8 .sc-panel-close{width:28px;height:28px;background:transparent;border:1px solid rgba(109,232,225,0.08);cursor:pointer;color:rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;font-size:12px;transition:all 0.2s;flex-shrink:0}

#s8 .sc-panel-close:hover{border-color:rgba(109,232,225,0.3);color:rgba(109,232,225,0.8)}

/* Scroll body */

#s8 .sc-panel-body{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;background:rgba(4,6,14,0.97);max-height:calc(100vh - 220px)}

#s8 .sc-panel-body::-webkit-scrollbar{display:none}

/* Swap card itself — ported from S2 */

#s8 .swap-card{background:linear-gradient(165deg,rgba(16,22,42,0.99) 0%,rgba(10,14,28,0.99) 45%,rgba(8,11,22,1) 100%);border:1px solid rgba(109,232,225,0.18);box-shadow:inset 0 1px 0 rgba(109,232,225,0.08),0 24px 64px rgba(0,0,0,0.8);position:relative;overflow:visible;display:flex;flex-direction:column;margin:12px;animation:cardBreath 7s ease-in-out infinite}
@keyframes cardBreath{0%,100%{box-shadow:inset 0 1px 0 rgba(109,232,225,0.08),0 24px 64px rgba(0,0,0,0.8),0 0 25px rgba(109,232,225,0.06)}50%{box-shadow:inset 0 1px 0 rgba(109,232,225,0.12),0 24px 64px rgba(0,0,0,0.8),0 0 40px rgba(109,232,225,0.1)}}

#s8 .swap-card::after{content:'';position:absolute;inset:0;background:transparent;box-shadow:0 0 0 1px rgba(109,232,225,0.08),0 32px 80px rgba(0,0,0,0.8);pointer-events:none;z-index:0}

#s8 .card-scan-line{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(109,232,225,0.4) 40%,rgba(160,245,240,0.7) 50%,rgba(109,232,225,0.4) 60%,transparent 100%);animation:scanMove 8s ease-in-out infinite;pointer-events:none;z-index:2}
@keyframes scanMove{0%,100%{transform:translateY(0);opacity:0.6}50%{transform:translateY(200px);opacity:0.2}}

/* Swap type tabs */

#s8 .swap-types{display:flex;background:rgba(0,0,0,0.45);border-radius:10px;padding:3px;border:1px solid rgba(255,255,255,0.05);margin:14px 14px 0;box-shadow:inset 0 1px 3px rgba(0,0,0,0.5)}

#s8 .st{flex:1;text-align:center;padding:8px 6px 7px;border-radius:4px;font-family:'IBM Plex Mono',monospace;color:rgba(255,255,255,0.3);cursor:pointer;transition:all 0.22s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;align-items:center;gap:2px}

#s8 .st-icon{font-size:13px;line-height:1}

#s8 .st-label{font-size:9px;font-weight:500;letter-spacing:2px;line-height:1}

#s8 .st-sub{font-size:7px;letter-spacing:0.5px;opacity:0.6;white-space:nowrap;color:rgba(255,255,255,0.4)}

#s8 .st.on{background:linear-gradient(135deg,rgba(109,232,225,0.14) 0%,rgba(79,255,170,0.08) 100%);box-shadow:0 1px 4px rgba(0,0,0,0.4),0 0 0 1px rgba(109,232,225,0.2),inset 0 1px 0 rgba(109,232,225,0.15)}

#s8 .st.on .st-label{color:rgba(109,232,225,0.9)}

#s8 .st.on .st-sub{opacity:1}

/* Leg label */



/* Token boxes */

#s8 .sc-inner{padding:8px 14px;display:flex;flex-direction:column;gap:6px;position:relative;z-index:1}

#s8 .tok-box{background:rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:9px 14px 11px;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(109,232,225,0.08);position:relative;overflow:hidden}

#s8 .tok-box::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px}

#s8 .sell-box::before{background:linear-gradient(180deg,rgba(245,185,66,0.8),rgba(245,185,66,0.1))}

#s8 .buy-box::before{background:linear-gradient(180deg,rgba(109,232,225,0.8),rgba(109,232,225,0.1))}

#s8 .tb-label{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:2px;color:rgba(255,255,255,0.28);margin-bottom:5px;display:flex;justify-content:space-between;align-items:center}

#s8 .sell-box .tb-label>span:first-child{color:rgba(245,185,66,0.65)}

#s8 .buy-box .tb-label>span:first-child{color:rgba(109,232,225,0.65)}

#s8 .tb-main{display:flex;align-items:center;gap:10px;padding:2px 0 4px}

#s8 .tok-sel{display:flex;align-items:center;gap:7px;padding:5px 8px 5px 5px;border-radius:50px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.09);cursor:pointer;transition:all 0.18s;flex-shrink:0}

#s8 .tok-sel:hover{background:rgba(109,232,225,0.06);border-color:rgba(109,232,225,0.35)}

#s8 .tok-name{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:#fff}

#s8 .tok-chev{color:rgba(255,255,255,0.4);font-size:10px;margin-left:1px}


#s8 .amt-input{flex:1;font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:300;color:rgba(255,255,255,0.95);background:transparent;border:none;outline:none;text-align:right;min-width:0;letter-spacing:-1px;line-height:1;padding:0}

#s8 .tb-usd{font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(255,255,255,0.4);margin-top:4px}

/* Flip button */

#s8 .flip-wrap{display:flex;justify-content:center;position:relative;z-index:2;height:0;margin:-1px 0}

#s8 .flip-btn{width:32px;height:32px;border-radius:50%;background:rgba(8,14,28,0.95);border:1px solid rgba(109,232,225,0.2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(109,232,225,0.6);font-size:14px;transition:all 0.2s;transform:translateY(-50%)}

#s8 .flip-btn:hover{border-color:rgba(109,232,225,0.5);color:rgba(109,232,225,1);transform:translateY(-50%) rotate(180deg)}

/* Condition toggle */

#s8 .cond-toggle-btn{padding:7px 12px;border:1px solid rgba(109,232,225,0.18);border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(109,232,225,0.04) 0%,rgba(109,232,225,0.01) 100%);margin-top:4px}

#s8 .ctb-left{display:flex;align-items:center;gap:10px;flex:1}

#s8 .ctb-icon{color:rgba(109,232,225,0.5);display:flex}

#s8 .ctb-text{display:flex;flex-direction:column}

#s8 .ctb-main{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:1px;color:rgba(255,255,255,0.55)}

#s8 .ctb-sub{font-family:'IBM Plex Mono',monospace;font-size:8px;color:rgba(255,255,255,0.4);margin-top:2px}

#s8 .ctb-badge{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:1.5px;padding:4px 10px;border-radius:4px;border:1px solid rgba(109,232,225,0.35);background:rgba(109,232,225,0.06);color:rgba(109,232,225,0.7);flex-shrink:0}

#s8 .ctb-badge.active{border-color:rgba(79,255,170,0.5);background:rgba(79,255,170,0.08);color:rgba(79,255,170,0.9)}

/* Pre-filled conditions list */












/* Leg 2 connector */




/* Section divider */


/* Execute button */

#s8 .sc-exec-wrap{padding:14px;flex-shrink:0;background:rgba(4,6,14,0.97)}

#s8 #sc-exec-btn{width:100%;padding:14px;border:1px solid rgba(109,232,225,0.35);background:linear-gradient(160deg,rgba(109,232,225,0.14) 0%,rgba(109,232,225,0.05) 100%);color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;cursor:pointer;position:relative;overflow:hidden;transition:all 0.2s;border-top-color:rgba(109,232,225,0.5)}

#s8 #sc-exec-btn:hover{background:linear-gradient(160deg,rgba(109,232,225,0.2) 0%,rgba(109,232,225,0.08) 100%);letter-spacing:4px;border-color:rgba(109,232,225,0.55)}

#s8 #sc-exec-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(109,232,225,0.06),transparent);transform:translateX(-100%);transition:transform 0.5s ease}

#s8 #sc-exec-btn:hover::before{transform:translateX(100%)}




/* ══ UNIFORM CARD HEIGHT — all types identical ══ */

#s8 .mt-card{ height: auto; }


#s8 .mt-card-del-confirm{ display: none; }

#s8 .mt-card-del-confirm.show{ display: flex; }



/* ════════════════════════════════════
   TRADE CARD — SINGLE ROW, DEFINITIVE
════════════════════════════════════ */









#s8 .mt-card-del-confirm{ display: none !important; }

#s8 .mt-card-del-confirm.show{ display: flex !important; }
/* Suppress all other rows unconditionally */





#s8 .mt-card .mt-card-pipe-row{ display: none !important; }

/* mt-card-cb now shown via renderCards */


/* ═══════════════════════════════════════════════
   PIPELINE DETAIL PANEL — CLEAN REWRITE
═══════════════════════════════════════════════ */


/* Header */





/* SVG wrap */



/* Leg cards side by side */



/* Top accent line per state */








/* Status chip top-right */





/* Leg number */








/* (dotBlink removed — defined in animations.css) */

/* Pair name */





/* Data rows */









/* ══ TIMELINE — was missing entirely ══ */

#s8 .mt-dp-timeline-wrap{
  padding: 0 20px 16px;
  flex-shrink: 0;
}

#s8 .mt-dp-tl-title{
  font-family: 'Orbitron', sans-serif;
  font-size: 6px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(109,232,225,0.45);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}

#s8 .mt-dp-tl-title::before{
  content: ''; width: 3px; height: 10px; flex-shrink: 0;
  background: rgba(109,232,225,0.5);
  box-shadow: 0 0 6px rgba(109,232,225,0.3);
}

#s8 .mt-dp-tl-title::after{
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(109,232,225,0.12), transparent);
}

#s8 .mt-dp-tl-track{
  position: relative; height: 2px;
  background: rgba(255,255,255,0.05);
  margin: 0 10px 6px;
}

#s8 .mt-dp-tl-track-done{
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, rgba(79,255,170,0.4), rgba(109,232,225,0.6));
  transition: width 0.6s ease;
}

#s8 .mt-dp-tl-track-river{
  position: absolute; top: 0; left: 0; height: 100%;
  width: var(--river-end, 50%);
  background: linear-gradient(90deg, transparent 80%, rgba(109,232,225,0.9));
  animation: riverFlow 2s ease-in-out infinite;
}
@keyframes riverFlow { 0%,100%{opacity:0.5} 50%{opacity:1} }

#s8 .mt-dp-tl-dots{
  display: flex; justify-content: space-between;
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
}

#s8 .mt-dp-tl-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  margin-top: -3px;
  flex-shrink: 0;
}

#s8 .mt-dp-tl-dot.done{
  background: rgba(79,255,170,0.7);
  border-color: rgba(79,255,170,0.5);
  box-shadow: 0 0 6px rgba(79,255,170,0.4);
}

#s8 .mt-dp-tl-dot.active{
  background: rgba(109,232,225,0.9);
  border-color: rgba(109,232,225,0.7);
  box-shadow: 0 0 8px rgba(109,232,225,0.6);
  animation: dotPulse 1.5s ease-in-out infinite;
}
@keyframes dotPulse { 0%,100%{box-shadow:0 0 6px rgba(109,232,225,0.5)} 50%{box-shadow:0 0 14px rgba(109,232,225,0.9)} }

#s8 .mt-dp-tl-labels{
  display: grid; margin: 10px 0 0; gap: 0;
}

#s8 .mt-dp-tl-lbl{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px; letter-spacing: 0.3px;
  color: rgba(255,255,255,0.35);
  text-align: center; line-height: 1.3;
}

#s8 .mt-dp-tl-lbl.done{ color: rgba(79,255,170,0.5); }

#s8 .mt-dp-tl-lbl.active{ color: rgba(109,232,225,0.75); font-weight: 600; }

/* ══ POSITION DETAILS section ══ */


#s8 .mt-dp-sec-title{
  font-family: 'Orbitron', sans-serif !important;
  font-size: 6px !important; font-weight: 700 !important;
  letter-spacing: 3px !important; text-transform: uppercase !important;
  color: rgba(109,232,225,0.45) !important;
}

/* ══ Detail grid items ══ */



/* ══ Action buttons ══ */

#s8 .mt-dp-btn{
  font-family: 'Orbitron', sans-serif !important;
  font-size: 7px !important; font-weight: 700 !important;
  letter-spacing: 2px !important; text-transform: uppercase !important;
}


/* ══ RICH CONDITION EDITOR ══════════════════════════════════ */

/* Cond type categories */





/* Individual condition card */

#s8 .mt-cond-card{
  margin-bottom:8px;
  border:1px solid rgba(255,255,255,0.05);
  background:rgba(3,6,14,0.6);
  transition:border-color 0.2s;
}

#s8 .mt-cond-card:hover{border-color:rgba(109,232,225,0.1)}

#s8 .mt-cond-card.met{border-left:2px solid rgba(79,255,170,0.5)}

#s8 .mt-cond-card.watching{border-left:2px solid rgba(255,215,0,0.5)}

#s8 .mt-cond-card.unmet{border-left:2px solid rgba(229,80,80,0.2)}

/* Cond card header bar */

#s8 .mt-cond-card-hdr{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
  cursor:pointer;
  border-bottom:1px solid transparent;
  transition:background 0.15s;
}

#s8 .mt-cond-card-hdr:hover{background:rgba(109,232,225,0.02)}

#s8 .mt-cond-card.open .mt-cond-card-hdr{border-bottom-color:rgba(255,255,255,0.04)}


#s8 .mt-cond-card-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
}

#s8 .mt-cond-card-dot.met{background:rgba(79,255,170,0.8);box-shadow:0 0 6px rgba(79,255,170,0.4)}

#s8 .mt-cond-card-dot.watching{background:rgba(255,215,0,0.7);box-shadow:0 0 6px rgba(255,215,0,0.3)}

#s8 .mt-cond-card-dot.unmet{background:rgba(229,80,80,0.4)}


#s8 .mt-cond-card-summary{
  flex:1;font-family:'IBM Plex Mono',monospace;font-size:8px;
  color:rgba(255,255,255,0.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

#s8 .mt-cond-card-live{
  font-family:'IBM Plex Mono',monospace;font-size:7px;
  color:rgba(255,255,255,0.38);white-space:nowrap;margin-left:4px;
}

#s8 .mt-cond-card-live.met{color:rgba(79,255,170,0.5)}

#s8 .mt-cond-card-live.watching{color:rgba(255,215,0,0.4)}


#s8 .mt-cond-card-badge{
  font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:1px;
  padding:2px 6px;border:1px solid;flex-shrink:0;
}

#s8 .mt-cond-card-badge.met{color:rgba(79,255,170,0.7);border-color:rgba(79,255,170,0.2);background:rgba(79,255,170,0.04)}

#s8 .mt-cond-card-badge.watching{color:rgba(255,215,0,0.6);border-color:rgba(255,215,0,0.15)}

#s8 .mt-cond-card-badge.unmet{color:rgba(229,80,80,0.5);border-color:rgba(229,80,80,0.15)}


#s8 .mt-cond-card-del{
  width:18px;height:18px;background:transparent;border:none;
  color:rgba(255,255,255,0.3);cursor:pointer;font-size:9px;
  display:flex;align-items:center;justify-content:center;
  transition:color 0.15s;flex-shrink:0;
}

#s8 .mt-cond-card-del:hover{color:rgba(229,80,80,0.7)}

/* Cond editor body (collapsible) */

#s8 .mt-cond-card-body{display:none;padding:10px 12px 12px}

#s8 .mt-cond-card.open .mt-cond-card-body{display:block}

/* Condition type row */

#s8 .mt-cond-type-row{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}

#s8 .mt-cond-type-btn{
  font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:0.5px;
  padding:3px 8px;border:1px solid rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.35);cursor:pointer;background:transparent;transition:all 0.15s;
}

#s8 .mt-cond-type-btn:hover{border-color:rgba(109,232,225,0.2);color:rgba(109,232,225,0.4)}

#s8 .mt-cond-type-btn.on{border-color:rgba(109,232,225,0.4);color:rgba(109,232,225,0.9);background:rgba(109,232,225,0.06)}

/* Token + Operator + Value row */

#s8 .mt-cond-param-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:6px;align-items:center;margin-bottom:8px}


#s8 .mt-cond-tok{
  font-family:'Orbitron',sans-serif;font-size:8px;font-weight:700;
  padding:5px 9px;border:1px solid rgba(109,232,225,0.1);
  background:rgba(109,232,225,0.03);color:rgba(255,255,255,0.7);
  cursor:pointer;transition:all 0.15s;white-space:nowrap;
}

#s8 .mt-cond-tok:hover{border-color:rgba(109,232,225,0.3);color:rgba(109,232,225,0.8)}


#s8 .mt-cond-op{
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;
  padding:4px 8px;border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);color:rgba(255,255,255,0.5);
  cursor:pointer;transition:all 0.15s;min-width:32px;text-align:center;
}

#s8 .mt-cond-op:hover{border-color:rgba(109,232,225,0.25);color:rgba(109,232,225,0.7)}


#s8 .mt-cond-val{
  font-family:'IBM Plex Mono',monospace;font-size:11px;
  background:rgba(3,6,14,0.9);border:1px solid rgba(109,232,225,0.1);
  color:rgba(255,255,255,0.85);padding:5px 10px;
  width:100%;outline:none;transition:border-color 0.18s;
}

#s8 .mt-cond-val:focus{border-color:rgba(109,232,225,0.4);box-shadow:0 0 16px rgba(109,232,225,0.05)}

/* Timeframe selector */

#s8 .mt-cond-tf-row{display:flex;gap:0;margin-bottom:10px;border:1px solid rgba(255,255,255,0.05)}

#s8 .mt-cond-tf{
  flex:1;font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1px;
  padding:4px 2px;text-align:center;border-right:1px solid rgba(255,255,255,0.05);
  color:rgba(255,255,255,0.35);cursor:pointer;background:transparent;transition:all 0.15s;
}

#s8 .mt-cond-tf:last-child{border-right:none}

#s8 .mt-cond-tf:hover{color:rgba(255,255,255,0.45)}

#s8 .mt-cond-tf.on{color:rgba(109,232,225,0.85);background:rgba(109,232,225,0.05)}

/* Live status bar at bottom of card */

#s8 .mt-cond-live-bar{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;
  background:rgba(255,255,255,0.015);
  border-top:1px solid rgba(255,255,255,0.03);
  margin-top:6px;
}

#s8 .mt-cond-live-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(255,255,255,0.35);letter-spacing:1px}

#s8 .mt-cond-live-val{font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;color:rgba(255,255,255,0.6);flex:1}

#s8 .mt-cond-live-val.met{color:rgba(79,255,170,0.8)}

#s8 .mt-cond-live-val.watching{color:rgba(255,215,0,0.7)}

#s8 .mt-cond-live-pct{font-family:'IBM Plex Mono',monospace;font-size:7px}

#s8 .mt-cond-live-pct.met{color:rgba(79,255,170,0.4)}

#s8 .mt-cond-live-pct.watching{color:rgba(255,215,0,0.3)}

/* Progress bar under live */

#s8 .mt-cond-prog{height:2px;background:rgba(255,255,255,0.04);margin-top:5px;position:relative}

#s8 .mt-cond-prog-fill{height:100%;transition:width 0.4s ease}

#s8 .mt-cond-prog-fill.met{background:linear-gradient(90deg,rgba(79,255,170,0.4),rgba(79,255,170,0.8))}

#s8 .mt-cond-prog-fill.watching{background:linear-gradient(90deg,rgba(255,215,0,0.3),rgba(255,215,0,0.7))}

#s8 .mt-cond-prog-fill.unmet{background:rgba(229,80,80,0.3)}

/* Add condition panel */

#s8 .mt-cond-add-panel{
  margin-top:12px;border:1px dashed rgba(109,232,225,0.1);
  padding:10px 12px;display:none;
}

#s8 .mt-cond-add-panel.open{display:block}

#s8 .mt-cond-add-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}

#s8 .mt-cond-add-item{
  padding:9px 8px;border:1px solid rgba(255,255,255,0.06);
  text-align:center;cursor:pointer;transition:all 0.18s;
  background:rgba(3,6,14,0.5);
}

#s8 .mt-cond-add-item:hover{border-color:rgba(109,232,225,0.3);background:rgba(109,232,225,0.04)}

#s8 .mt-cond-add-item-icon{font-size:14px;margin-bottom:4px}

#s8 .mt-cond-add-item-name{font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:1.5px;color:rgba(255,255,255,0.55)}

#s8 .mt-cond-add-item-sub{font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(255,255,255,0.35);margin-top:2px}


/* ══════════════════════════════════════════════════════
   PREMIUM TRADE CARDS v2 — depth, warmth, readability
══════════════════════════════════════════════════════ */

/* ── CSS variables per type ── */

#s8 .mt-card.spot{ --c1: 109,232,225; --c2: 79,220,210; }

#s8 .mt-card.perp{ --c1: 109,232,225; --c2: 79,220,210; }

#s8 .mt-card.pipeline{ --c1: 109,232,225; --c2: 79,220,210; }

#s8 .mt-card.pnl-red{ --c1: 229,80,80;   --c2: 255,100,100;}

/* ── Base card ── */

#s8 .mt-card{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.07);
  padding-left: 10px;
  padding-bottom: 4px;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,       /* top glass edge */
    0 -1px 0 rgba(0,0,0,0.4) inset,             /* bottom depth */
    0 4px 16px rgba(0,0,0,0.35),                /* drop shadow */
    0 1px 3px rgba(0,0,0,0.5);

  transition:
    border-color 0.22s,
    box-shadow 0.22s,
    transform 0.2s cubic-bezier(.16,1,.3,1),
    background 0.22s;

  animation: mcCardIn 0.4s cubic-bezier(.16,1,.3,1) both;
}

@keyframes mcCardIn {
  from { opacity:0; transform:translateX(-12px) scale(0.99); }
  to   { opacity:1; transform:none; }
}

/* ── Glass top-edge shimmer line ── */

#s8 .mt-card::after{
  content: '';
  position: absolute; top: 0; left: 3px; right: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(var(--c1,109,232,225), 0.8) 0%,
    rgba(255,255,255,0.2) 30%,
    rgba(255,255,255,0.06) 70%,
    transparent 100%);
  pointer-events: none; z-index: 3;
  border-radius: 0;
}

/* ── Noise texture for depth ── */

#s8 .mt-card::before{
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  background-size: 180px 80px;
  pointer-events: none; z-index: 0; border-radius: inherit;
}

/* ── Hover ── */

#s8 .mt-card:hover{
  transform: translateX(3px) translateY(-1px);
  border-color: rgba(var(--c1,109,232,225), 0.25);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 -1px 0 rgba(0,0,0,0.4) inset,
    -4px 0 20px rgba(var(--c1,109,232,225), 0.07),
    0 8px 32px rgba(0,0,0,0.5),
    0 2px 6px rgba(0,0,0,0.4);
}

/* ── Selected ── */

#s8 .mt-card.selected{
  border-color: rgba(var(--c1,109,232,225), 0.4) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 40%),
    linear-gradient(135deg, rgba(14,24,48,0.99), rgba(9,16,34,0.99));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.1) inset,
    0 -1px 0 rgba(0,0,0,0.5) inset,
    -6px 0 28px rgba(var(--c1,109,232,225), 0.12),
    0 0 0 1px rgba(var(--c1,109,232,225), 0.1),
    0 10px 40px rgba(0,0,0,0.6);
}

/* ── Active breathing ── */

#s8 .mt-card[data-status="active"]{
  animation: mcCardIn 0.4s cubic-bezier(.16,1,.3,1) both, mcBreath 4s ease-in-out 1s infinite;
}
@keyframes mcBreath {
  0%,100% { box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 16px rgba(0,0,0,0.35), -2px 0 12px rgba(var(--c1,109,232,225),0.04); }
  50%     { box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 20px rgba(0,0,0,0.4),  -4px 0 24px rgba(var(--c1,109,232,225),0.12); }
}

/* ── Scan sweep on hover ── */

#s8 .mc-scan{
  position: absolute; top: 0; left: 0; right: 0; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--c1,109,232,225),0.04), transparent);
  transform: translateX(-100%);
  pointer-events: none; z-index: 2;
}

#s8 .mt-card:hover .mc-scan{ animation: mcScan 0.7s ease-out forwards; }
@keyframes mcScan { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* ═══ ROW 1 ═══ */

#s8 .mc-row1{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 8px 18px;
  position: relative; z-index: 2;
  min-width: 0;
  overflow: hidden;
}

/* ── Type badge ── */

#s8 .mt-type-badge{
  font-family: 'Orbitron', sans-serif;
  font-size: 6px; font-weight: 900; letter-spacing: 2px;
  padding: 4px 9px;
  flex-shrink: 0;
  border-radius: 4px;
}

#s8 .mt-type-badge.spot{
  background: rgba(109,232,225,0.1);
  border: 1px solid rgba(109,232,225,0.35);
  color: rgba(109,232,225,0.95);
  box-shadow: 0 0 12px rgba(109,232,225,0.08), inset 0 1px 0 rgba(109,232,225,0.15);
}

#s8 .mt-type-badge.perp{
  background: rgba(109,232,225,0.08);
  border: 1px solid rgba(109,232,225,0.35);
  color: rgba(109,232,225,0.95);
  box-shadow: 0 0 12px rgba(109,232,225,0.08), inset 0 1px 0 rgba(109,232,225,0.15);
}

#s8 .mt-type-badge.pipeline{
  background: rgba(157,127,234,0.1);
  border: 1px solid rgba(157,127,234,0.4);
  color: rgba(180,150,255,0.95);
  box-shadow: 0 0 12px rgba(157,127,234,0.08), inset 0 1px 0 rgba(157,127,234,0.15);
}

/* ── Pair name ── */

#s8 .mc-pair-wrap{ flex: 1; min-width: 0; overflow: hidden; }

#s8 .mc-pair{
  font-family: 'Orbitron', sans-serif;
  font-size: 16px; font-weight: 900;
  letter-spacing: 0.2px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Warm white — not cold grey */
  color: rgba(235,242,255,0.96);
  text-shadow: 0 0 20px rgba(255,255,255,0.08);
}

#s8 .mc-pair-dir{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7.5px; color: rgba(180,195,220,0.45);
  letter-spacing: 1px; margin-top: 3px;
}

/* ── Pipeline inline flow ── */

#s8 .mc-pipe-flow{ display:flex; align-items:center; gap:3px; margin-top:3px; }

#s8 .pf-tok{ font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:600; }

#s8 .pf-arr{ font-size:7px; opacity:0.35; margin:0 2px; }

#s8 .pf-done{ color: rgba(79,255,170,0.75); }

#s8 .pf-active{ color: rgba(255,215,0,0.9); }

#s8 .pf-pending{ color: rgba(255,255,255,0.22); }

/* ── PnL ── */

#s8 .mc-spacer{ flex: 1; }

#s8 .mc-pnl-wrap{ display:flex; align-items:baseline; gap:3px; flex-shrink:0; }

#s8 .mc-pnl-arrow{ font-size:9px; flex-shrink:0; }

#s8 .mc-pnl-arrow.green{ color: rgba(79,255,170,0.7); }

#s8 .mc-pnl-arrow.red{ color: rgba(229,80,80,0.6); }

/* P&L IS DATA, NOT A HEADING. This was the only value on the trade card set
   in Orbitron — its siblings are body or IBM Plex Mono — and Orbitron is the
   headings face in this design language. It is also the one figure on the
   card that TICKS, and a proportional display face makes a live number jitter
   as its digits change width. Plex Mono is both the brand rule for data and
   the functional answer; tabular-nums pins the column so the value updates in
   place. The glow and colour treatment are unchanged — those are the design
   language, the typeface was the mistake. */
#s8 .mc-pnl{
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 700; letter-spacing: -0.2px;
}

#s8 .mc-pnl.green{
  color: rgba(79,255,170,1);
  text-shadow: 0 0 16px rgba(79,255,170,0.4);
  -webkit-text-fill-color: rgba(79,255,170,1);
  background: none;
  filter: none;
}

#s8 .mc-pnl.red{ color: rgba(255,100,100,1); text-shadow: 0 0 16px rgba(229,80,80,0.4); }

/* Neutral "—" must be clearly visible — not invisible against dark card */
#s8 .mc-pnl.neutral{
  color: rgba(180,200,230,0.55);
  font-size: 13px;
  -webkit-text-fill-color: rgba(180,200,230,0.55);
  background: none;
  filter: none;
}

/* ── Status badge ── */

#s8 .mt-status{
  font-family: 'Orbitron', sans-serif;
  font-size: 6px; font-weight: 800; letter-spacing: 1.8px;
  padding: 5px 11px; flex-shrink: 0;
  border-radius: 4px;
}

#s8 .mt-status.live{
  background: rgba(79,255,170,0.08);
  border: 1px solid rgba(79,255,170,0.35);
  color: rgba(79,255,170,1);
  box-shadow: 0 0 14px rgba(79,255,170,0.1), inset 0 1px 0 rgba(79,255,170,0.15);
  animation: statusPulse 2.5s ease-in-out infinite;
}
#s8 .mt-status.monitoring{
  background: rgba(109,232,225,0.06);
  border: 1px solid rgba(109,232,225,0.25);
  color: rgba(109,232,225,0.85);
  box-shadow: 0 0 8px rgba(109,232,225,0.06);
}
@keyframes statusPulse {
  0%,100% { box-shadow: 0 0 8px rgba(79,255,170,0.06), inset 0 1px 0 rgba(79,255,170,0.1); }
  50%     { box-shadow: 0 0 20px rgba(79,255,170,0.18), inset 0 1px 0 rgba(79,255,170,0.2); }
}

#s8 .mt-status.completed{ background:rgba(79,255,170,0.04); border:1px solid rgba(79,255,170,0.15); color:rgba(79,255,170,0.45); }

#s8 .mt-status.liquidated{ background:rgba(229,80,80,0.1); border:1px solid rgba(229,80,80,0.4); color:rgba(255,100,100,1); font-weight:900; }

#s8 .mt-status.cancelled{ background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.08); color:rgba(200,210,225,0.3); }

#s8 .mt-status.pending{ background:rgba(255,215,0,0.06); border:1px solid rgba(255,215,0,0.28); color:rgba(255,215,0,0.85); animation:goldPulse 2.5s ease-in-out infinite; }

/* ── Delete btn ── */

#s8 .mt-card-del-btn{
  width:18px; height:18px; background:transparent; border:none;
  color:rgba(255,255,255,0.3); cursor:pointer; font-size:10px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.15s, color 0.15s; flex-shrink:0;
}

#s8 .mt-card:hover .mt-card-del-btn{ opacity:1; }

#s8 .mt-card-del-btn:hover{ color:rgba(229,80,80,0.9); }

/* ═══ ROW 2: CONDITIONS ═══ */

#s8 .mc-row2{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px 8px 18px;
  position: relative; z-index: 2;
}

#s8 .mc-dots{ display:flex; align-items:center; gap:3px; flex-shrink:0; }

#s8 .mc-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }

#s8 .mc-dot-more{ font-family:'IBM Plex Mono',monospace; font-size:7px; color:rgba(180,195,220,0.3); margin-left:2px; }

#s8 .mc-cond-info{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; overflow:hidden; }

#s8 .mc-cond-preview{
  font-family:'IBM Plex Mono',monospace;
  font-size:8px; color:rgba(200,215,240,0.7);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

#s8 .mc-cond-preview.all-met{ color:rgba(79,255,170,0.5); font-size:7px; letter-spacing:0.5px; }

#s8 .mc-cond-val{ font-family:'IBM Plex Mono',monospace; font-size:8px; white-space:nowrap; flex-shrink:0; }

#s8 .mc-cond-val.watching{ color:rgba(255,215,0,0.6); }

#s8 .mc-cond-val.unmet{ color:rgba(229,80,80,0.5); }

#s8 .mc-cond-val.met{ color:rgba(79,255,170,0.5); }

/* Progress */

#s8 .mc-prog-wrap{ display:flex; align-items:center; gap:5px; flex-shrink:0; }

#s8 .mc-prog-track{ width:56px; height:2px; background:rgba(255,255,255,0.05); position:relative; overflow:hidden; }

#s8 .mc-prog-fill{ height:100%; transition:width 0.6s ease; }

#s8 .mc-prog-fill.green{ background:linear-gradient(90deg,rgba(79,255,170,0.3),rgba(79,255,170,0.85)); }

#s8 .mc-prog-fill.cyan{ background:linear-gradient(90deg,rgba(109,232,225,0.3),rgba(109,232,225,0.85)); }

#s8 .mc-prog-fill.gold{ background:linear-gradient(90deg,rgba(255,215,0,0.3),rgba(255,215,0,0.85)); }

#s8 .mc-prog-fill.red{ background:linear-gradient(90deg,rgba(229,80,80,0.2),rgba(229,80,80,0.65)); }

#s8 .mc-prog-fill.purple{ background:linear-gradient(90deg,rgba(157,127,234,0.3),rgba(157,127,234,0.85)); }
#s8 .mc-prog-fill.amber{ background:linear-gradient(90deg,rgba(210,180,70,0.3),rgba(210,180,70,0.85)); }

#s8 .mc-prog-pct{
  font-family:'Orbitron',sans-serif; font-size:8px; font-weight:700;
  color:rgba(180,200,230,0.5); min-width:26px; text-align:right;
}

#s8 .mc-sparkline{
  position:absolute; bottom:8px; right:52px;
  opacity:0.7; pointer-events:none;
  border-radius:2px;
}
#s8 .mt-card:hover .mc-sparkline{ opacity:1; }
#s8 .mc-row3{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 7px 18px 14px 18px;
  border-top: 1px solid rgba(109,232,225,0.07);
  position: relative; z-index: 2;
  background: linear-gradient(0deg, rgba(109,232,225,0.02), transparent);
  min-width: 0;
}

#s8 .mc-meta-item{ display:flex; align-items:center; gap:3px; }

#s8 .mc-meta-lbl{
  font-family:'IBM Plex Mono',monospace;
  font-size:7px; letter-spacing:1.5px;
  color:rgba(180,200,230,0.5);
  text-transform:uppercase;
}

#s8 .mc-meta-val{
  font-family:'IBM Plex Mono',monospace;
  font-size:8px; font-weight:600;
  color:rgba(210,225,250,0.82);
}

#s8 .mc-sep{ color:rgba(109,232,225,0.15); font-size:8px; margin:0 7px; }

#s8 .mc-cond-count{
  font-family:'Orbitron',sans-serif;
  font-size:7px; font-weight:700; letter-spacing:1px;
  color:rgba(79,255,170,0.55);
}

/* ── Stagger delays ── */

#s8 .mt-card:nth-child(1){animation-delay:.04s}

#s8 .mt-card:nth-child(2){animation-delay:.08s}

#s8 .mt-card:nth-child(3){animation-delay:.12s}

#s8 .mt-card:nth-child(4){animation-delay:.16s}

#s8 .mt-card:nth-child(5){animation-delay:.2s}

#s8 .mt-card:nth-child(6){animation-delay:.24s}

#s8 .mt-card:nth-child(7){animation-delay:.28s}

#s8 .mt-card:nth-child(8){animation-delay:.32s}

#s8 .mt-card:nth-child(9){animation-delay:.36s}

#s8 .mt-card:nth-child(10){animation-delay:.40s}

/* ── Hide old card layers ── */


#s8 .mc-row1,#s8 .mc-row2,#s8 .mc-row3{ display:flex !important; }

/* ── CONDITION CONTRAST BOOST ── */











/* ── PIPE-LEG text boost ── */




/* ══ BRACKET BUTTONS — S2 design language ══════════════════ */

/* ── Edit Trade btn ── */





/* Corner brackets pseudo-elements */


/* ── Action buttons (CANCEL / VIEW ON CHAIN / CLOSE) ── */

#s8 .mt-dp-actions{
  padding: 12px 18px 20px;
  display: flex; gap: 8px; flex-wrap: wrap;
  flex-shrink: 0;
}


#s8 .mt-dp-btn{
  flex: 1; min-width: 80px;
  font-family: 'Orbitron', sans-serif;
  font-size: 7px; font-weight: 800; letter-spacing: 2.5px;
  padding: 13px 12px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: all 0.22s;
  background: transparent;

  /* Corner bracket effect via box-shadow trick */
  border: none;
  outline: none;

  /* Default (neutral) */
  color: rgba(255,255,255,0.45);

  /* Corner brackets */
  --bk-color: rgba(255,255,255,0.15);
  box-shadow:
    /* TL */
    -1px 0 0 0 var(--bk-color),  0 -1px 0 0 var(--bk-color),
    -8px 0 0 0 var(--bk-color),  0 -8px 0 0 var(--bk-color),
    /* TR */
    inset -1px 0 0 0 var(--bk-color), inset 0 -1px 0 0 transparent,
    /* actual simple border */
    inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* Simpler, cleaner bracket approach using clip-path + border */

#s8 .mt-dp-btn{
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: none;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}


#s8 .mt-dp-btn::before{
  content: '['; position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 300;
  color: rgba(255,255,255,0.12); transition: color 0.2s;
}

#s8 .mt-dp-btn::after{
  content: ']'; position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 300;
  color: rgba(255,255,255,0.12); transition: color 0.2s;
}


#s8 .mt-dp-btn:hover{ background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.7); }

#s8 .mt-dp-btn:hover::before,#s8 .mt-dp-btn:hover::after{ color: rgba(255,255,255,0.35); }

/* DANGER variant (CANCEL) */

#s8 .mt-dp-btn.danger{
  color: rgba(229,80,80,0.65);
  border-color: rgba(229,80,80,0.18);
  --bk-clr: rgba(229,80,80,0.25);
}

#s8 .mt-dp-btn.danger::before,#s8 .mt-dp-btn.danger::after{ color: rgba(229,80,80,0.2); }

#s8 .mt-dp-btn.danger:hover{
  color: rgba(229,80,80,1); background: rgba(229,80,80,0.06); border-color: rgba(229,80,80,0.4);
}

#s8 .mt-dp-btn.danger:hover::before,#s8 .mt-dp-btn.danger:hover::after{ color: rgba(229,80,80,0.5); }

/* PRIMARY variant (CLOSE / VIEW ON CHAIN) */

#s8 .mt-dp-btn.primary{
  color: rgba(109,232,225,0.65);
  border-color: rgba(109,232,225,0.15);
}

#s8 .mt-dp-btn.primary::before,#s8 .mt-dp-btn.primary::after{ color: rgba(109,232,225,0.2); }

#s8 .mt-dp-btn.primary:hover{
  color: rgba(109,232,225,1); background: rgba(109,232,225,0.05); border-color: rgba(109,232,225,0.35);
}

#s8 .mt-dp-btn.primary:hover::before,#s8 .mt-dp-btn.primary:hover::after{ color: rgba(109,232,225,0.45); }

/* Edit drawer save/discard also get bracket style */

#s8 .mt-edit-save-btn{
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
}

#s8 .mt-edit-discard-btn{
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)) !important;
}


/* ══ BRACKET BUTTONS — exact SHARE TRADE CARD corner style ══ */

/* ── Remove old pseudo bracket chars ── */

#s8 .mt-dp-btn::before{ content: none !important; }

#s8 .mt-dp-btn::after{ content: '' !important; left: auto !important; right: auto !important;
  top: auto !important; bottom: auto !important; transform: none !important;
  font-family: inherit !important; font-size: inherit !important; }

/* ── Base button reset ── */

#s8 .mt-dp-btn{
  flex: 1; min-width: 80px;
  font-family: 'Orbitron', sans-serif;
  font-size: 7px; font-weight: 800; letter-spacing: 2.5px;
  padding: 13px 20px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: all 0.25s;
  clip-path: none !important;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.4);
}

/* ── Neutral ::after corner brackets ── */

#s8 .mt-dp-btn::after{
    content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.2)) top    left  / 10px 1.5px  no-repeat,
    linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.2)) top    left  / 1.5px  10px no-repeat,
    linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.2)) top    right / 10px 1.5px  no-repeat,
    linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.2)) top    right / 1.5px  10px no-repeat,
    linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.2)) bottom left  / 10px 1.5px  no-repeat,
    linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.2)) bottom left  / 1.5px  10px no-repeat,
    linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.2)) bottom right / 10px 1.5px  no-repeat,
    linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.2)) bottom right / 1.5px  10px no-repeat;
}

#s8 .mt-dp-btn:hover{
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
}

#s8 .mt-dp-btn:hover::after{
    background:
    linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)) top    left  / 14px 2px  no-repeat,
    linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)) top    left  / 2px  14px no-repeat,
    linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)) top    right / 14px 2px  no-repeat,
    linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)) top    right / 2px  14px no-repeat,
    linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)) bottom left  / 14px 2px  no-repeat,
    linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)) bottom left  / 2px  14px no-repeat,
    linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)) bottom right / 14px 2px  no-repeat,
    linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)) bottom right / 2px  14px no-repeat;
}

/* ── DANGER (CANCEL) ── */

#s8 .mt-dp-btn.danger{
  color: rgba(229,80,80,0.65);
  border: 1px solid rgba(229,80,80,0.12);
  background: rgba(229,80,80,0.02);
}

#s8 .mt-dp-btn.danger::after{
    content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(229,80,80,0.5),rgba(229,80,80,0.5)) top    left  / 10px 1.5px  no-repeat,
    linear-gradient(rgba(229,80,80,0.5),rgba(229,80,80,0.5)) top    left  / 1.5px  10px no-repeat,
    linear-gradient(rgba(229,80,80,0.5),rgba(229,80,80,0.5)) top    right / 10px 1.5px  no-repeat,
    linear-gradient(rgba(229,80,80,0.5),rgba(229,80,80,0.5)) top    right / 1.5px  10px no-repeat,
    linear-gradient(rgba(229,80,80,0.5),rgba(229,80,80,0.5)) bottom left  / 10px 1.5px  no-repeat,
    linear-gradient(rgba(229,80,80,0.5),rgba(229,80,80,0.5)) bottom left  / 1.5px  10px no-repeat,
    linear-gradient(rgba(229,80,80,0.5),rgba(229,80,80,0.5)) bottom right / 10px 1.5px  no-repeat,
    linear-gradient(rgba(229,80,80,0.5),rgba(229,80,80,0.5)) bottom right / 1.5px  10px no-repeat;
}

#s8 .mt-dp-btn.danger:hover{
  color: rgba(229,80,80,1);
  background: rgba(229,80,80,0.05);
  border-color: rgba(229,80,80,0.25);
}

#s8 .mt-dp-btn.danger:hover::after{
    background:
    linear-gradient(rgba(229,80,80,0.95),rgba(229,80,80,0.95)) top    left  / 14px 2px  no-repeat,
    linear-gradient(rgba(229,80,80,0.95),rgba(229,80,80,0.95)) top    left  / 2px  14px no-repeat,
    linear-gradient(rgba(229,80,80,0.95),rgba(229,80,80,0.95)) top    right / 14px 2px  no-repeat,
    linear-gradient(rgba(229,80,80,0.95),rgba(229,80,80,0.95)) top    right / 2px  14px no-repeat,
    linear-gradient(rgba(229,80,80,0.95),rgba(229,80,80,0.95)) bottom left  / 14px 2px  no-repeat,
    linear-gradient(rgba(229,80,80,0.95),rgba(229,80,80,0.95)) bottom left  / 2px  14px no-repeat,
    linear-gradient(rgba(229,80,80,0.95),rgba(229,80,80,0.95)) bottom right / 14px 2px  no-repeat,
    linear-gradient(rgba(229,80,80,0.95),rgba(229,80,80,0.95)) bottom right / 2px  14px no-repeat;
}

/* ── PRIMARY (VIEW ON CHAIN / CLOSE) ── */

#s8 .mt-dp-btn.primary{
  color: rgba(109,232,225,0.65);
  border: 1px solid rgba(109,232,225,0.1);
  background: rgba(109,232,225,0.02);
}

#s8 .mt-dp-btn.primary::after{
    content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(109,232,225,0.4),rgba(109,232,225,0.4)) top    left  / 10px 1.5px  no-repeat,
    linear-gradient(rgba(109,232,225,0.4),rgba(109,232,225,0.4)) top    left  / 1.5px  10px no-repeat,
    linear-gradient(rgba(109,232,225,0.4),rgba(109,232,225,0.4)) top    right / 10px 1.5px  no-repeat,
    linear-gradient(rgba(109,232,225,0.4),rgba(109,232,225,0.4)) top    right / 1.5px  10px no-repeat,
    linear-gradient(rgba(109,232,225,0.4),rgba(109,232,225,0.4)) bottom left  / 10px 1.5px  no-repeat,
    linear-gradient(rgba(109,232,225,0.4),rgba(109,232,225,0.4)) bottom left  / 1.5px  10px no-repeat,
    linear-gradient(rgba(109,232,225,0.4),rgba(109,232,225,0.4)) bottom right / 10px 1.5px  no-repeat,
    linear-gradient(rgba(109,232,225,0.4),rgba(109,232,225,0.4)) bottom right / 1.5px  10px no-repeat;
}

#s8 .mt-dp-btn.primary:hover{
  color: rgba(109,232,225,1);
  background: rgba(109,232,225,0.05);
  border-color: rgba(109,232,225,0.2);
}

#s8 .mt-dp-btn.primary:hover::after{
    background:
    linear-gradient(rgba(109,232,225,0.95),rgba(109,232,225,0.95)) top    left  / 14px 2px  no-repeat,
    linear-gradient(rgba(109,232,225,0.95),rgba(109,232,225,0.95)) top    left  / 2px  14px no-repeat,
    linear-gradient(rgba(109,232,225,0.95),rgba(109,232,225,0.95)) top    right / 14px 2px  no-repeat,
    linear-gradient(rgba(109,232,225,0.95),rgba(109,232,225,0.95)) top    right / 2px  14px no-repeat,
    linear-gradient(rgba(109,232,225,0.95),rgba(109,232,225,0.95)) bottom left  / 14px 2px  no-repeat,
    linear-gradient(rgba(109,232,225,0.95),rgba(109,232,225,0.95)) bottom left  / 2px  14px no-repeat,
    linear-gradient(rgba(109,232,225,0.95),rgba(109,232,225,0.95)) bottom right / 14px 2px  no-repeat,
    linear-gradient(rgba(109,232,225,0.95),rgba(109,232,225,0.95)) bottom right / 2px  14px no-repeat;
}

/* ── EDIT TRADE button corner brackets ── */







/* ── Edit drawer save button ── */

#s8 .mt-edit-save-btn{
  clip-path: none !important;
  position: relative;
}

#s8 .mt-edit-save-btn::after{
  content: '';
  position: absolute; inset: 0; pointer-events: none;
    
  
  
  
  background:
    linear-gradient(rgba(79,255,170,0.55),rgba(79,255,170,0.55)) top    left  / 10px 1.5px  no-repeat,
    linear-gradient(rgba(79,255,170,0.55),rgba(79,255,170,0.55)) top    left  / 1.5px  10px no-repeat,
    linear-gradient(rgba(79,255,170,0.55),rgba(79,255,170,0.55)) top    right / 10px 1.5px  no-repeat,
    linear-gradient(rgba(79,255,170,0.55),rgba(79,255,170,0.55)) top    right / 1.5px  10px no-repeat,
    linear-gradient(rgba(79,255,170,0.55),rgba(79,255,170,0.55)) bottom left  / 10px 1.5px  no-repeat,
    linear-gradient(rgba(79,255,170,0.55),rgba(79,255,170,0.55)) bottom left  / 1.5px  10px no-repeat,
    linear-gradient(rgba(79,255,170,0.55),rgba(79,255,170,0.55)) bottom right / 10px 1.5px  no-repeat,
    linear-gradient(rgba(79,255,170,0.55),rgba(79,255,170,0.55)) bottom right / 1.5px  10px no-repeat;
}

#s8 .mt-edit-discard-btn{
  clip-path: none !important;
  position: relative;
}

#s8 .mt-edit-discard-btn::after{
  content: '';
  position: absolute; inset: 0; pointer-events: none;
    
  
  
  
  background:
    linear-gradient(rgba(255,255,255,0.15),rgba(255,255,255,0.15)) top    left  / 10px 1.5px  no-repeat,
    linear-gradient(rgba(255,255,255,0.15),rgba(255,255,255,0.15)) top    left  / 1.5px  10px no-repeat,
    linear-gradient(rgba(255,255,255,0.15),rgba(255,255,255,0.15)) top    right / 10px 1.5px  no-repeat,
    linear-gradient(rgba(255,255,255,0.15),rgba(255,255,255,0.15)) top    right / 1.5px  10px no-repeat,
    linear-gradient(rgba(255,255,255,0.15),rgba(255,255,255,0.15)) bottom left  / 10px 1.5px  no-repeat,
    linear-gradient(rgba(255,255,255,0.15),rgba(255,255,255,0.15)) bottom left  / 1.5px  10px no-repeat,
    linear-gradient(rgba(255,255,255,0.15),rgba(255,255,255,0.15)) bottom right / 10px 1.5px  no-repeat,
    linear-gradient(rgba(255,255,255,0.15),rgba(255,255,255,0.15)) bottom right / 1.5px  10px no-repeat;
}


/* ══ FINAL BUTTON TREATMENT ══════════════════════════════════ */

/* ── EDIT TRADE — primary gold CTA, NO bracket corners ── */

/* shimmer sweep */

/* top + bottom full-width accent lines — NOT corner brackets */




/* ── CANCEL — red corner brackets ── */

#s8 .mt-dp-btn.danger{
  flex:1;min-width:80px;
  font-family:'Orbitron',sans-serif;
  font-size:7px;font-weight:800;letter-spacing:2.5px;
  padding:13px 20px;
  cursor:pointer;position:relative;overflow:hidden;
  transition:all 0.25s;
  background:transparent;
  border:1px solid rgba(229,80,80,0.1);
  color:rgba(229,80,80,0.65);
  clip-path:none !important;
}

#s8 .mt-dp-btn.danger::before{ content:none !important; }

#s8 .mt-dp-btn.danger::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(229,80,80,0.45),rgba(229,80,80,0.45)) top left/10px 1.5px no-repeat,linear-gradient(rgba(229,80,80,0.45),rgba(229,80,80,0.45)) top left/1.5px 10px no-repeat,linear-gradient(rgba(229,80,80,0.45),rgba(229,80,80,0.45)) top right/10px 1.5px no-repeat,linear-gradient(rgba(229,80,80,0.45),rgba(229,80,80,0.45)) top right/1.5px 10px no-repeat,linear-gradient(rgba(229,80,80,0.45),rgba(229,80,80,0.45)) bottom left/10px 1.5px no-repeat,linear-gradient(rgba(229,80,80,0.45),rgba(229,80,80,0.45)) bottom left/1.5px 10px no-repeat,linear-gradient(rgba(229,80,80,0.45),rgba(229,80,80,0.45)) bottom right/10px 1.5px no-repeat,linear-gradient(rgba(229,80,80,0.45),rgba(229,80,80,0.45)) bottom right/1.5px 10px no-repeat;
}

#s8 .mt-dp-btn.danger:hover{
  color:rgba(229,80,80,1);
  background:rgba(229,80,80,0.04);
  border-color:rgba(229,80,80,0.2);
}

#s8 .mt-dp-btn.danger:hover::after{
  background:linear-gradient(rgba(229,80,80,0.9),rgba(229,80,80,0.9)) top left/14px 2px no-repeat,linear-gradient(rgba(229,80,80,0.9),rgba(229,80,80,0.9)) top left/2px 14px no-repeat,linear-gradient(rgba(229,80,80,0.9),rgba(229,80,80,0.9)) top right/14px 2px no-repeat,linear-gradient(rgba(229,80,80,0.9),rgba(229,80,80,0.9)) top right/2px 14px no-repeat,linear-gradient(rgba(229,80,80,0.9),rgba(229,80,80,0.9)) bottom left/14px 2px no-repeat,linear-gradient(rgba(229,80,80,0.9),rgba(229,80,80,0.9)) bottom left/2px 14px no-repeat,linear-gradient(rgba(229,80,80,0.9),rgba(229,80,80,0.9)) bottom right/14px 2px no-repeat,linear-gradient(rgba(229,80,80,0.9),rgba(229,80,80,0.9)) bottom right/2px 14px no-repeat;
}

/* ── VIEW ON CHAIN / PRIMARY — cyan corner brackets ── */

#s8 .mt-dp-btn.primary{
  flex:1;min-width:80px;
  font-family:'Orbitron',sans-serif;
  font-size:7px;font-weight:800;letter-spacing:2.5px;
  padding:13px 20px;
  cursor:pointer;position:relative;overflow:hidden;
  transition:all 0.25s;
  background:transparent;
  border:1px solid rgba(109,232,225,0.08);
  color:rgba(109,232,225,0.6);
  clip-path:none !important;
}

#s8 .mt-dp-btn.primary::before{ content:none !important; }

#s8 .mt-dp-btn.primary::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(109,232,225,0.35),rgba(109,232,225,0.35)) top left/10px 1.5px no-repeat,linear-gradient(rgba(109,232,225,0.35),rgba(109,232,225,0.35)) top left/1.5px 10px no-repeat,linear-gradient(rgba(109,232,225,0.35),rgba(109,232,225,0.35)) top right/10px 1.5px no-repeat,linear-gradient(rgba(109,232,225,0.35),rgba(109,232,225,0.35)) top right/1.5px 10px no-repeat,linear-gradient(rgba(109,232,225,0.35),rgba(109,232,225,0.35)) bottom left/10px 1.5px no-repeat,linear-gradient(rgba(109,232,225,0.35),rgba(109,232,225,0.35)) bottom left/1.5px 10px no-repeat,linear-gradient(rgba(109,232,225,0.35),rgba(109,232,225,0.35)) bottom right/10px 1.5px no-repeat,linear-gradient(rgba(109,232,225,0.35),rgba(109,232,225,0.35)) bottom right/1.5px 10px no-repeat;
}

#s8 .mt-dp-btn.primary:hover{
  color:rgba(109,232,225,1);
  background:rgba(109,232,225,0.04);
  border-color:rgba(109,232,225,0.18);
}

#s8 .mt-dp-btn.primary:hover::after{
  background:linear-gradient(rgba(109,232,225,0.85),rgba(109,232,225,0.85)) top left/14px 2px no-repeat,linear-gradient(rgba(109,232,225,0.85),rgba(109,232,225,0.85)) top left/2px 14px no-repeat,linear-gradient(rgba(109,232,225,0.85),rgba(109,232,225,0.85)) top right/14px 2px no-repeat,linear-gradient(rgba(109,232,225,0.85),rgba(109,232,225,0.85)) top right/2px 14px no-repeat,linear-gradient(rgba(109,232,225,0.85),rgba(109,232,225,0.85)) bottom left/14px 2px no-repeat,linear-gradient(rgba(109,232,225,0.85),rgba(109,232,225,0.85)) bottom left/2px 14px no-repeat,linear-gradient(rgba(109,232,225,0.85),rgba(109,232,225,0.85)) bottom right/14px 2px no-repeat,linear-gradient(rgba(109,232,225,0.85),rgba(109,232,225,0.85)) bottom right/2px 14px no-repeat;
}


/* ══ EDIT TRADE BTN — FINAL OVERRIDE (no brackets) ══ */


/* ::after = full-width top/bottom lines ONLY — zero corner brackets */





/* ══ CONDITION TEXT — BRIGHTER ══ */
/* Name text */


#s8 .mt-list{
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px 8px 40px !important; /* consistent 8px inset on all sides */
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  /* Premium scrollbar */
  scrollbar-width: thin !important;
  scrollbar-color: rgba(109,232,225,0.12) transparent !important;
}

#s8 .mt-list::-webkit-scrollbar{ width: 3px !important; }

#s8 .mt-list::-webkit-scrollbar-track{ background: transparent !important; }

#s8 .mt-list::-webkit-scrollbar-thumb{ 
  background: rgba(109,232,225,0.12) !important; 
  border-radius: 0 !important;
}

#s8 .mt-list::-webkit-scrollbar-thumb:hover{ background: rgba(109,232,225,0.25) !important; }

/* Cards: auto height, never crushed */

#s8 .mt-card{
  height: auto !important;
  min-height: unset !important;
  flex-shrink: 0 !important; /* critical — cards don't compress in flex container */
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Hide ALL old card inner layout — only mc-rows show */


/* mc-rows always visible */

#s8 .mc-row1,#s8 .mc-row2,#s8 .mc-row3{ display: flex !important; }

/* Delete confirm overlay */

#s8 .mt-card-del-confirm{ display: none !important; }

#s8 .mt-card-del-confirm.show{ display: flex !important; }


/* ══ EDIT TRADE BTN — definitive ══ */







/* ══ TRADE ID on card ══ */

#s8 .mc-pair-top{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

#s8 .mc-tid{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 6.5px;
  letter-spacing: 1.5px;
  color: rgba(255,215,0,0.5);
  background: rgba(255,215,0,0.04);
  border: 1px solid rgba(255,215,0,0.18);
  padding: 2px 6px;
  border-radius: 2px;
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

#s8 .mt-card:hover .mc-tid{
  color: rgba(255,215,0,0.8);
  border-color: rgba(255,215,0,0.35);
}

/* ── On-chain tx link on the card header. Without this rule it rendered as a
   browser-default hyperlink (purple, underlined) beside the design-language
   chips. Same chip grammar as .mc-tid, in the cyan data hue. ── */
#s8 .mc-tx-link{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 6.5px;
  letter-spacing: 1.5px;
  color: rgba(109,232,225,0.45);
  background: rgba(109,232,225,0.04);
  border: 1px solid rgba(109,232,225,0.16);
  padding: 2px 6px;
  border-radius: 2px;
  flex-shrink: 0;
  white-space: nowrap;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
#s8 .mc-tx-link:hover{
  color: rgba(109,232,225,0.95);
  border-color: rgba(109,232,225,0.4);
  background: rgba(109,232,225,0.08);
}
#s8 .mt-card:hover .mc-tx-link{
  color: rgba(109,232,225,0.7);
  border-color: rgba(109,232,225,0.3);
}

/* ══ TRADE ID in detail panel ══ */






/* ══ PREVIEW MODE (no wallet connected) ══ */

/* Allow scrolling so all content is reachable */
#s8 .mt-body.s8-preview-mode{
  overflow-y:auto;
  overflow-x:hidden;
}

#s8 .mt-body.s8-preview-mode .mt-hero{
  pointer-events:none;
  user-select:none;
  position:relative;
}

/* Gradient fade overlay on hero — creates the "preview" feel */
#s8 .mt-body.s8-preview-mode .mt-hero::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:32%;
  background:linear-gradient(180deg,transparent 0%,rgba(4,6,14,0.26) 100%);
  pointer-events:none;
  z-index:4;
}

/* Slight dim on stats strip in preview */
#s8 .mt-body.s8-preview-mode .mt-stats{
  pointer-events:none;
  user-select:none;
  opacity:0.92;
}

/* SAMPLE DATA label on hero */
#s8 .mt-body.s8-preview-mode .mt-hero-tag::after{
  content:'SAMPLE DATA';
  font-family:'IBM Plex Mono',monospace;
  font-size:7px;
  letter-spacing:2px;
  color:rgba(109,232,225,0.35);
  margin-left:12px;
  border:1px solid rgba(109,232,225,0.15);
  padding:2px 8px;
}

/* Hide collapse button and time filters in preview */
#s8 .mt-body.s8-preview-mode .mt-hero-collapse-btn{display:none}
#s8 .mt-body.s8-preview-mode .mt-hero-filter{opacity:0.3;pointer-events:none}

/* Compact the no-wallet-state in preview — hero is the visual hook, reduce padding */
#s8 .mt-body.s8-preview-mode #mt-no-wallet-state{
  padding:24px 24px 36px;
  justify-content:flex-start;
}
#s8 .mt-body.s8-preview-mode .mt-nw-icon{
  width:52px;height:52px;margin-bottom:16px;
}
#s8 .mt-body.s8-preview-mode .mt-nw-icon svg{width:52px;height:52px}
#s8 .mt-body.s8-preview-mode .mt-nw-title{margin-bottom:8px}
#s8 .mt-body.s8-preview-mode .mt-nw-sub{margin-bottom:20px}
#s8 .mt-body.s8-preview-mode .mt-nw-connect-btn{margin-bottom:20px}
#s8 .mt-body.s8-preview-mode .mt-nw-divider{margin-bottom:18px}

/* ══ NO-WALLET STATE ══ */

#s8 .mt-nw-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  width: 100%;
  padding: 20px 0;
}

#s8 .mt-nw-icon{
  margin-bottom: 28px;
  opacity: 0.7;
  animation: nwPulse 4s ease-in-out infinite;
}
@keyframes nwPulse {
  0%,100% { opacity: 0.5; transform: scale(1); }
  50%     { opacity: 0.8; transform: scale(1.04); }
}

#s8 .mt-nw-title{
  font-family: 'Orbitron', sans-serif;
  font-size: 13px; font-weight: 900; letter-spacing: 5px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 14px;
}

#s8 .mt-nw-sub{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; color: rgba(255,255,255,0.3);
  text-align: center; line-height: 1.9;
  margin-bottom: 36px;
}

#s8 .mt-nw-connect-btn{
  font-family: 'Orbitron', sans-serif;
  font-size: 8.5px; font-weight: 800; letter-spacing: 3px;
  padding: 16px 32px;
  color: rgba(109,232,225,0.9);
  background: rgba(109,232,225,0.07);
  border: 1px solid rgba(109,232,225,0.25);
  cursor: pointer; position: relative; overflow: hidden;
  transition: all 0.25s; width: 100%; margin-bottom: 32px;
}

#s8 .mt-nw-connect-btn::after{
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(109,232,225,0.4),rgba(109,232,225,0.4)) top left/10px 1.5px no-repeat,
    linear-gradient(rgba(109,232,225,0.4),rgba(109,232,225,0.4)) top left/1.5px 10px no-repeat,
    linear-gradient(rgba(109,232,225,0.4),rgba(109,232,225,0.4)) top right/10px 1.5px no-repeat,
    linear-gradient(rgba(109,232,225,0.4),rgba(109,232,225,0.4)) top right/1.5px 10px no-repeat,
    linear-gradient(rgba(109,232,225,0.4),rgba(109,232,225,0.4)) bottom left/10px 1.5px no-repeat,
    linear-gradient(rgba(109,232,225,0.4),rgba(109,232,225,0.4)) bottom left/1.5px 10px no-repeat,
    linear-gradient(rgba(109,232,225,0.4),rgba(109,232,225,0.4)) bottom right/10px 1.5px no-repeat,
    linear-gradient(rgba(109,232,225,0.4),rgba(109,232,225,0.4)) bottom right/1.5px 10px no-repeat;
}

#s8 .mt-nw-connect-btn:hover{ color:rgba(109,232,225,1); background:rgba(109,232,225,0.1); border-color:rgba(109,232,225,0.45); }


#s8 .mt-nw-divider{
  width: 100%; display: flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
}

#s8 .mt-nw-divider::before,#s8 .mt-nw-divider::after{
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.06);
}

#s8 .mt-nw-divider span{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px; letter-spacing: 1.8px;
  color: rgba(255,255,255,0.35); white-space: nowrap;
}

/* Code entry */

#s8 .mt-nw-code-wrap{ width: 100%; }

#s8 .mt-nw-code-lbl{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 6.5px; letter-spacing: 2px;
  color: rgba(255,255,255,0.38); margin-bottom: 10px;
}

#s8 .mt-nw-code-row{
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid rgba(109,232,225,0.15);
  margin-bottom: 8px; overflow: hidden;
}

#s8 .mt-nw-code-prefix{
  background: rgba(109,232,225,0.06);
  border-right: 1px solid rgba(109,232,225,0.1);
  display: flex; align-items: center;
}

#s8 .mt-nw-prefix-sel{
  font-family: 'Orbitron', sans-serif;
  font-size: 7px; font-weight: 800; letter-spacing: 1px;
  color: rgba(109,232,225,0.7);
  background: transparent; border: none; outline: none;
  padding: 10px 10px; cursor: pointer;
}

#s8 .mt-nw-dash{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; color: rgba(109,232,225,0.2);
  display: flex; align-items: center; padding: 0 4px;
  background: rgba(0,0,0,0.2);
}

#s8 .mt-nw-code-input{
  flex: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px; font-weight: 600; letter-spacing: 3px;
  color: rgba(109,232,225,0.9);
  background: rgba(3,6,14,0.8);
  border: none; outline: none;
  padding: 12px 14px;
}

#s8 .mt-nw-code-input::placeholder{ color: rgba(109,232,225,0.15); letter-spacing: 2px; }

#s8 .mt-nw-code-input.shake{ animation: nwShake 0.4s ease; }
@keyframes nwShake {
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}

#s8 .mt-nw-code-btn{
  font-family: 'Orbitron', sans-serif;
  font-size: 7px; font-weight: 800; letter-spacing: 2px;
  padding: 12px 18px;
  background: rgba(109,232,225,0.1);
  border: none; border-left: 1px solid rgba(109,232,225,0.15);
  color: rgba(109,232,225,0.8); cursor: pointer;
  transition: all 0.2s;
}

#s8 .mt-nw-code-btn:hover{ background: rgba(109,232,225,0.18); color: rgba(109,232,225,1); }

#s8 .mt-nw-code-hint{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 6.5px; color: rgba(255,255,255,0.15);
  letter-spacing: 0.5px;
  padding-bottom: 24px;
}

#s8 .mt-nw-recent{ width:100%; margin-top:4px; }
#s8 .mt-nw-recent-lbl{ font-family:'IBM Plex Mono',monospace; font-size:7px; letter-spacing:2px; color:rgba(255,255,255,0.35); margin-bottom:8px; }
#s8 .mt-nw-recent-item{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:2px; color:rgba(109,232,225,0.6); padding:7px 12px; border:1px solid rgba(109,232,225,0.1); background:rgba(109,232,225,0.03); margin-bottom:4px; transition:all 0.15s; }
#s8 .mt-nw-recent-item:hover{ color:rgba(109,232,225,0.9); border-color:rgba(109,232,225,0.25); background:rgba(109,232,225,0.07); }



#s8 .mt-dp-receipt{display:flex;align-items:center;gap:10px;margin:10px 18px 0;padding:11px 14px;background:rgba(255,215,0,0.04);border:1px solid rgba(255,215,0,0.18)}


#s8 .mt-dp-receipt-icon{font-size:14px;color:rgba(255,215,0,0.5);flex-shrink:0;line-height:1}

#s8 .mt-dp-receipt-body{flex:1;min-width:0}

#s8 .mt-dp-receipt-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:rgba(255,215,0,0.35);margin-bottom:4px}

#s8 .mt-dp-receipt-id{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:700;letter-spacing:3px;color:rgba(255,215,0,0.9);text-shadow:0 0 20px rgba(255,215,0,0.2)}

#s8 .mt-dp-receipt-copy{font-family:'Orbitron',sans-serif;font-size:7px;font-weight:800;letter-spacing:1.5px;padding:5px 10px;background:rgba(255,215,0,0.06);border:1px solid rgba(255,215,0,0.2);color:rgba(255,215,0,0.7);cursor:pointer;flex-shrink:0;transition:all 0.18s}

#s8 .mt-dp-receipt-copy:hover{background:rgba(255,215,0,0.12);color:rgba(255,215,0,1);border-color:rgba(255,215,0,0.45)}

/* ══ TX Hash Solscan link ══ */
#s8 .mt-dp-txhash{display:flex;align-items:center;gap:8px;padding:8px 14px;margin:0 16px 6px;background:linear-gradient(135deg,rgba(109,232,225,0.04) 0%,rgba(109,232,225,0.01) 100%);border:1px solid rgba(109,232,225,0.1);border-top-color:rgba(109,232,225,0.18)}
#s8 .mt-dp-txhash-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1.8px;color:rgba(255,255,255,0.3);font-weight:700;flex-shrink:0}
#s8 .mt-dp-txhash-link{display:flex;align-items:center;gap:5px;color:var(--cyan);text-decoration:none;flex:1;min-width:0;transition:color 0.15s}
#s8 .mt-dp-txhash-link:hover{color:#fff;text-shadow:0 0 8px rgba(109,232,225,0.5)}
#s8 .mt-dp-txhash-link svg{flex-shrink:0;opacity:0.5;transition:opacity 0.15s}
#s8 .mt-dp-txhash-link:hover svg{opacity:1}
#s8 .mt-dp-txhash-val{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#s8 .mt-dp-txhash-copy{font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:700;letter-spacing:1.2px;padding:4px 8px;background:rgba(109,232,225,0.06);border:1px solid rgba(109,232,225,0.15);color:rgba(109,232,225,0.6);cursor:pointer;flex-shrink:0;transition:all 0.18s}
#s8 .mt-dp-txhash-copy:hover{background:rgba(109,232,225,0.12);color:var(--cyan);border-color:rgba(109,232,225,0.35)}

/* ══ EDIT TRADE BTN — matches SHARE TRADE CARD ══ */

/* sweep shimmer — same as brag btn */

/* corner brackets — exact same as brag btn */




/* ══ PnL GOLD — hero figures only ══ */

#s8 .mc-pnl.green{
  color: rgba(79,255,170,1);
  text-shadow: 0 0 10px rgba(79,255,170,0.35);
}

#s8 .mc-pnl-arrow.green{ color: rgba(79,255,170,0.7); }


/* Detail panel hero PnL */

/* ══ HERO PnL FIGURES — gold ══ */

#s8 .mt-pnl-big.green{
  color: rgba(79,255,170,1);
  text-shadow: 0 0 30px rgba(79,255,170,0.3), 0 0 60px rgba(79,255,170,0.1);
  -webkit-text-fill-color: unset;
  background: none;
  filter: none;
  animation: none;
}

/* gold overrides for .green removed — green means green */

/* ══ STAT STRIP CHIP VALUES ══ */

/* ══ PAIR NAMES — cyan ══ */

#s8 .mc-pair{
  color: rgba(109,232,225,0.92) !important;
  text-shadow: 0 0 20px rgba(109,232,225,0.12);
}

#s8 .mt-dp-pair{
  color: rgba(109,232,225,0.95) !important;
  text-shadow: 0 0 24px rgba(109,232,225,0.15);
}
/* pair titles always cyan */

/* pair titles always cyan — type shown via badge/card colour */

/* ══ COMPREHENSIVE GOLD FIX ══ */

/* 1. Detail panel hero PnL — gradient + glow keyframe */

/* 4. NET AFTER FEES — white class needs gold too */
#s8 .mt-chip-val.white,#s8 .mt-chip-val:not(.red):not(.green){
  color: rgba(255,255,255,0.7);
}

/* duplicate gold chip-val.green removed */

/* 5. Volume stat — white, that is correct, leave it */
/* 6. Hero stat val neutral items stay white */

#s8 .mt-hero-stat-val.white{ color: rgba(255,255,255,0.75); }

/* 7. Detail panel item values green -> gold */





/* ── Pipeline leg row values — state coloured ── */



/* ── Brag stat val green → gold (it's a PnL figure) ── */

#s8 .mt-brag-stat-val.green{
  color: rgba(79,255,170,1) !important;
  text-shadow: 0 0 12px rgba(79,255,170,0.35), 0 1px 4px rgba(0,0,0,0.95) !important;
}

/* ── Detail panel item values (size, entry etc) — warm grey, not stark white ── */


/* ── Condition names in detail panel — warm grey ── */


/* ── Nav/header items stay as-is (white is correct chrome) ── */

/* ── Hero stat labels — slightly warmer ── */

#s8 .mt-hero-stat-lbl{
  color: rgba(180,195,220,0.5) !important;
}

/* ── Card meta values — warm grey, clearly readable ── */

#s8 .mc-meta-val{
  color: rgba(200,215,240,0.75) !important;
}

/* ── Card meta labels ── */
#s8 .mc-meta-lbl {
  color: rgba(160,185,220,0.35) !important;
}

/* ── Meta value hierarchy ── */
#s8 .mc-meta-val { color: rgba(210,225,250,0.78) !important; }
/* The exits carry the same green/red they do on the perps row and in the
   detail panel — one position, one colour language. These need !important
   only because the blanket rule above has it; matching its weight is the
   honest way to make the variant real rather than silently inert. */
#s8 .mc-meta-val.green { color: rgba(79,255,170,0.85) !important; }
#s8 .mc-meta-val.red   { color: rgba(255,120,120,0.85) !important; }

/* ── Time string — semantic colours ── */
#s8 .mc-time-default    { color: rgba(180,200,230,0.35) !important; }
#s8 .mc-time-completed  { color: rgba(79,255,170,0.55)  !important; }
#s8 .mc-time-liquidated { color: rgba(229,80,80,0.7)    !important; }
#s8 .mc-time-cancelled  { color: rgba(255,255,255,0.25) !important; }

/* ── Meta row separators — slightly warmer/visible ── */
#s8 .mc-sep {
  color: rgba(109,232,225,0.18) !important;
}

/* ── Edit drawer title — cyan accent ── */

#s8 .mt-edit-drawer-title{
  color: rgba(109,232,225,0.85) !important;
}

/* ── Pair name on card — already cyan but bump slightly ── */

#s8 .mc-pair{
  text-shadow: 0 0 24px rgba(109,232,225,0.15) !important;
}



  /* ══════════════════════════════════════════════════════
     S8 DETAIL PANEL — PREMIUM UPGRADE
     ══════════════════════════════════════════════════════ */

  /* ── HEADER ── */
  #s8 .mt-dp-header {
    position: relative;
    padding: 18px 20px 16px;
    background: linear-gradient(180deg, rgba(6,10,22,0.98) 0%, rgba(4,8,18,0.95) 100%);
    border-bottom: 1px solid rgba(109,232,225,0.1);
    overflow: hidden;
  }
  #s8 .mt-dp-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(109,232,225,0.6) 40%, rgba(109,232,225,0.6) 60%, transparent 100%);
  }
  #s8 .mt-dp-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 20px; right: 20px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(109,232,225,0.12), transparent);
  }
  #s8 .mt-dp-pair {
    font-size: 24px !important;
    letter-spacing: -0.5px !important;
    color: rgba(109,232,225,0.98) !important;
    text-shadow: 0 0 30px rgba(109,232,225,0.2), 0 0 60px rgba(109,232,225,0.06) !important;
    line-height: 1.1 !important;
    margin-bottom: 5px !important;
  }

  /* ── RECEIPT CODE ── */
  #s8 .mt-dp-receipt {
    margin: 14px 18px 0 !important;
    padding: 13px 16px !important;
    background: linear-gradient(135deg, rgba(255,215,0,0.05) 0%, rgba(255,215,0,0.02) 100%) !important;
    border: 1px solid rgba(255,215,0,0.22) !important;
    border-radius: 0 !important;
    position: relative;
    overflow: hidden;
  }
  #s8 .mt-dp-receipt::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.6) 30%, rgba(255,215,0,0.6) 70%, transparent);
  }
  /* outer receipt box — no corner brackets, clean border only */
  #s8 .mt-dp-receipt-icon {
    font-size: 18px !important;
    color: rgba(255,215,0,0.6) !important;
    text-shadow: 0 0 12px rgba(255,215,0,0.4);
    filter: drop-shadow(0 0 6px rgba(255,215,0,0.3));
  }
  #s8 .mt-dp-receipt-lbl {
    font-size: 6px !important;
    letter-spacing: 3px !important;
    color: rgba(255,215,0,0.4) !important;
    margin-bottom: 5px !important;
    text-transform: uppercase;
  }
  #s8 .mt-dp-receipt-id {
    font-size: 15px !important;
    letter-spacing: 4px !important;
    color: rgba(255,215,0,0.95) !important;
    text-shadow: 0 0 20px rgba(255,215,0,0.35), 0 0 40px rgba(255,215,0,0.1) !important;
    font-weight: 700 !important;
  }
  #s8 .mt-dp-receipt-copy {
    font-size: 6.5px !important;
    letter-spacing: 2px !important;
    padding: 7px 14px !important;
    border: 1px solid rgba(255,215,0,0.3) !important;
    background: rgba(255,215,0,0.06) !important;
    color: rgba(255,215,0,0.85) !important;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
  }
  #s8 .mt-dp-receipt-copy::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
      linear-gradient(rgba(255,215,0,0.6), rgba(255,215,0,0.6)) top left  / 6px 1px no-repeat,
      linear-gradient(rgba(255,215,0,0.6), rgba(255,215,0,0.6)) top right / 6px 1px no-repeat,
      linear-gradient(rgba(255,215,0,0.6), rgba(255,215,0,0.6)) bottom left  / 6px 1px no-repeat,
      linear-gradient(rgba(255,215,0,0.6), rgba(255,215,0,0.6)) bottom right / 6px 1px no-repeat,
      linear-gradient(rgba(255,215,0,0.6), rgba(255,215,0,0.6)) top left  / 1px 6px no-repeat,
      linear-gradient(rgba(255,215,0,0.6), rgba(255,215,0,0.6)) top right / 1px 6px no-repeat,
      linear-gradient(rgba(255,215,0,0.6), rgba(255,215,0,0.6)) bottom left  / 1px 6px no-repeat,
      linear-gradient(rgba(255,215,0,0.6), rgba(255,215,0,0.6)) bottom right / 1px 6px no-repeat;
    pointer-events: none;
  }
  #s8 .mt-dp-receipt-copy:hover {
    background: rgba(255,215,0,0.12) !important;
    color: rgba(255,215,0,1) !important;
    border-color: rgba(255,215,0,0.55) !important;
    box-shadow: 0 0 20px rgba(255,215,0,0.12), inset 0 0 12px rgba(255,215,0,0.04);
  }

  /* ── PnL BOX ── */
  /* Scan line sweep across PnL box */

  /* ── PIPELINE LEG CARDS ── */
.pipe2-progress-fill {
  height: 100%; border-radius:2px;
  background: linear-gradient(90deg,rgba(79,255,170,0.5),rgba(79,255,170,0.85));
  transition: width 0.8s cubic-bezier(.16,1,.3,1);
}
.pipe2-progress-label {
  font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:1px;
  color: rgba(79,255,170,0.45); margin-top:4px;
  padding: 6px 20px 10px;
}

/* Leg breakdown */
.pipe2-leg {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative;
}
.pipe2-leg.leg1 { border-left: 2px solid rgba(109,232,225,0.35); }
.pipe2-leg.leg2 { border-left: 2px solid rgba(157,127,234,0.35); }
.pipe2-leg.done { opacity: 0.7; }
.pipe2-leg-hdr {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.pipe2-leg-hdr .pipe2-leg-pair { flex: 1; }
.pipe2-leg-num {
  font-family:'Orbitron',sans-serif; font-size:7px; letter-spacing:2px;
  font-weight:700; padding: 3px 8px; border-radius:2px;
}
.pipe2-leg.leg1 .pipe2-leg-num { background:rgba(109,232,225,0.08); color:rgba(109,232,225,0.8); border:1px solid rgba(109,232,225,0.2); }
.pipe2-leg.leg2 .pipe2-leg-num { background:rgba(157,127,234,0.08); color:rgba(157,127,234,0.8); border:1px solid rgba(157,127,234,0.2); }
.pipe2-leg-pair { font-family:'Orbitron',sans-serif; font-size:12px; font-weight:700;
  color:rgba(109,232,225,0.9); letter-spacing:0.5px; text-shadow:0 0 12px rgba(109,232,225,0.15); }
.pipe2-leg-status {
  font-family:'IBM Plex Mono',monospace; font-size:8px;
  letter-spacing:1.5px; padding:3px 8px; border-radius:2px;
}
.pipe2-leg-status.done    { background:rgba(79,255,170,0.08); color:rgba(79,255,170,0.7); border:1px solid rgba(79,255,170,0.15);}
.pipe2-leg-status.active  { background:rgba(79,255,170,0.08); color:rgba(79,255,170,0.9); border:1px solid rgba(79,255,170,0.25); animation: pulse2 2s ease-in-out infinite;}
.pipe2-leg-status.pending { background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.4); border:1px solid rgba(255,255,255,0.06);}
@keyframes pulse2 { 0%,100%{opacity:1} 50%{opacity:0.55} }

.pipe2-metrics { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px; }
.pipe2-metric { background:rgba(255,255,255,0.025); border-radius:4px; padding:7px 10px; }
.pipe2-metric-lbl { font-family:'IBM Plex Mono',monospace; font-size:7px; letter-spacing:1px;
  color:rgba(255,255,255,0.3); margin-bottom:3px; }
.pipe2-metric-val { font-family:'IBM Plex Mono',monospace; font-size:11px; color:rgba(255,255,255,0.8); }
.pipe2-metric-val.green { color:rgba(79,255,170,0.9); }
.pipe2-metric-val.cyan  { color:rgba(109,232,225,0.9); }
.pipe2-metric-val.red   { color:rgba(229,80,80,0.9); }
.pipe2-metric-val.gold  { color:rgba(255,215,0,0.85); }

.pipe2-conds { margin-bottom:10px; }
.pipe2-conds-title { font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:1.5px;
  color:rgba(255,255,255,0.38); margin-bottom:6px; text-transform:uppercase; }
.pipe2-cond-row {
  display:flex; align-items:center; gap:8px; padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.pipe2-cond-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.pipe2-cond-dot.met      { background:rgba(79,255,170,0.8); box-shadow:0 0 4px rgba(79,255,170,0.4); }
.pipe2-cond-dot.watching { background:rgba(255,215,0,0.7); box-shadow:0 0 4px rgba(255,215,0,0.3); }
.pipe2-cond-dot.unmet    { background:rgba(255,255,255,0.15); }
.pipe2-cond-name { font-family:'IBM Plex Mono',monospace; font-size:9px; color:rgba(255,255,255,0.65); flex:1; }
.pipe2-cond-val  { font-family:'IBM Plex Mono',monospace; font-size:8px; color:rgba(255,255,255,0.3); }
.pipe2-cond-badge { font-family:'IBM Plex Mono',monospace; font-size:7px; letter-spacing:1px;
  padding:2px 6px; border-radius:2px; flex-shrink:0; }
.pipe2-cond-badge.met      { color:rgba(79,255,170,0.8); background:rgba(79,255,170,0.07); }
.pipe2-cond-badge.watching { color:rgba(255,215,0,0.7); background:rgba(255,215,0,0.07); }
.pipe2-cond-badge.unmet    { color:rgba(255,255,255,0.35); background:rgba(255,255,255,0.04); }

.pipe2-edit-btn {
  display:flex; align-items:center; gap:5px;
  padding:4px 10px; margin-left:auto;
  font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:1.5px;
  text-transform:uppercase; cursor:pointer; border-radius:2px;
  transition: all 0.2s; flex-shrink:0; background:none; border:1px solid;
}
.pipe2-leg.leg1 .pipe2-edit-btn {
  color:rgba(109,232,225,0.7); background:rgba(109,232,225,0.04);
  border:1px solid rgba(109,232,225,0.18);
}
.pipe2-leg.leg1 .pipe2-edit-btn:hover {
  color:rgba(109,232,225,1); background:rgba(109,232,225,0.08);
  border-color:rgba(109,232,225,0.4); box-shadow:0 0 20px rgba(109,232,225,0.08);
}
.pipe2-leg.leg2 .pipe2-edit-btn {
  color:rgba(109,232,225,0.7); background:rgba(109,232,225,0.04);
  border:1px solid rgba(109,232,225,0.18);
}
.pipe2-leg.leg2 .pipe2-edit-btn:hover {
  color:rgba(109,232,225,1); background:rgba(109,232,225,0.08);
  border-color:rgba(109,232,225,0.4); box-shadow:0 0 20px rgba(109,232,225,0.08);
}
.pipe2-edit-btn.leg-saved {
  animation: legSaved 0.4s ease-out;
  pointer-events:none;
}
@keyframes legSaved { 0%{transform:scale(1)} 50%{transform:scale(1.015)} 100%{transform:scale(1)} }
.pipe2-connector {
  display:flex; align-items:center; gap:0; padding:0 20px;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.pipe2-conn-line { flex:1; height:1px; background:linear-gradient(90deg,rgba(157,127,234,0.25),rgba(255,215,0,0.25)); }
.pipe2-conn-label { font-family:'IBM Plex Mono',monospace; font-size:7px; letter-spacing:2px;
  color:rgba(255,255,255,0.35); padding:8px 12px; }

/* ═══════════════════════════════════════════════════
   S8 EDIT SUB-SCREEN (full takeover within S8)
═══════════════════════════════════════════════════ */




/* Breadcrumb bar */










/* Swap card wrapper inside edit panel */






/* Leg accent line at top of card */




/* Card header */






/* Sections within card */










/* Fields */







/* Token pair display */





/* Condition cards in edit panel */













/* Save bar */










/* ══ S8 SCROLL FIX — single source of truth ══ */
#s8-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
/* Switch mt-split from grid to flex — flex properly constrains children for scroll */
#s8 .mt-split {
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
  flex: 1 !important;
  min-height: 0 !important;
  max-width: 100% !important;
}
#s8 .mt-left {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0 !important;
  min-width: 0 !important;
  flex: 1 !important;
}
#s8 .mt-right {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0 !important;
  width: 400px !important;
  flex-shrink: 0 !important;
}

/* ── My Trades drawer + card affordance (redesign) ── */
#s8 .mt-card{cursor:pointer}
#s8 .mt-card:focus-visible{outline:2px solid rgba(109,232,225,0.6);outline-offset:-2px}
@media(min-width:769px){
  /* Desktop: list is full-width until a trade's detail is open, then the rail
     appears — keyed off #mt-dp.vis (the signal every open/close/delete path
     already maintains), so it stays correct without new state to sync. */
  #s8 .mt-split:not(:has(#mt-dp.vis)) .mt-right{display:none !important}
}

#s8 .mt-list {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
/* ── No-wallet state: ensure content is scrollable and visible on desktop ── */
#mt-no-wallet-state {
  overflow-y: auto !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
  padding-top: 32px !important;
}
/* Center the wrap visually when there IS enough room, via auto margins */
#mt-no-wallet-state .mt-nw-wrap {
  margin-top: auto;
  margin-bottom: auto;
}
#s8 .mt-dp.vis {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(109,232,225,0.2) transparent !important;
}
#s8 .mt-dp.vis::-webkit-scrollbar { width: 3px !important; }
#s8 .mt-dp.vis::-webkit-scrollbar-thumb { background: rgba(109,232,225,0.2) !important; border-radius:2px !important; }

/* ══ PNL BOX ══ */
.mt-dp-pnl-box {
  padding: 32px 24px 28px;
  position: relative;
  overflow: hidden;
  background: transparent;
  flex-shrink: 0;
  min-height: 140px;
  /* Faint separator lines — dissolve not box */
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}


/* Flow diagram header */
#s8 .dp-flow-header{
  display:flex;align-items:center;gap:6px;
  padding:16px 18px 0;
}
#s8 .dp-flow-title{
  font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;
  letter-spacing:2.5px;color:rgba(109,232,225,0.4);
}
/* ════ PIPELINE FLOW DIAGRAM ════ */
#s8 .dp-flow{
  display:flex;align-items:center;padding:20px 18px 8px;
  gap:0;position:relative;
}
#s8 .dp-flow-line{
  flex:1;height:1px;background:rgba(255,255,255,0.08);position:relative;
  transition:background 0.3s;
}
#s8 .dp-flow-line.done{
  background:linear-gradient(90deg,rgba(79,255,170,0.5),rgba(79,255,170,0.3));
}
#s8 .dp-flow-line.done::after{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:6px;height:6px;background:rgba(79,255,170,0.6);border-radius:50%;
  box-shadow:0 0 6px rgba(79,255,170,0.4);
}
#s8 .dp-flow-node{
  display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;
  min-width:64px;
}
#s8 .dp-flow-node-dot{
  width:10px;height:10px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.05);
  transition:all 0.3s;
}
#s8 .dp-flow-node-dot.done{
  background:rgba(79,255,170,0.8);border-color:rgba(79,255,170,0.9);
  box-shadow:0 0 8px rgba(79,255,170,0.5),0 0 16px rgba(79,255,170,0.2);
}
#s8 .dp-flow-node-dot.active{
  background:rgba(255,215,0,0.8);border-color:rgba(255,215,0,0.9);
  box-shadow:0 0 8px rgba(255,215,0,0.5);
  animation:dpDotPulse 1.5s ease-in-out infinite;
}
#s8 .dp-flow-node-dot.entry{
  background:rgba(109,232,225,0.7);border-color:rgba(109,232,225,0.9);
  box-shadow:0 0 8px rgba(109,232,225,0.4);
}
@keyframes dpDotPulse{
  0%,100%{box-shadow:0 0 6px rgba(255,215,0,0.4)}
  50%{box-shadow:0 0 14px rgba(255,215,0,0.7),0 0 24px rgba(255,215,0,0.2)}
}
#s8 .dp-flow-node-tag{
  font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;
  color:rgba(255,255,255,0.35);text-transform:uppercase;
}
#s8 .dp-flow-node-pair{
  font-family:'Orbitron',sans-serif;font-size:8px;font-weight:700;
  color:rgba(255,255,255,0.7);letter-spacing:0.3px;text-align:center;
}
#s8 .dp-flow-node.done .dp-flow-node-pair{ color:rgba(79,255,170,0.85); }
#s8 .dp-flow-node.active .dp-flow-node-pair{ color:rgba(255,215,0,0.9); }
#s8 .dp-flow-node-status{
  font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1.5px;
  color:rgba(255,255,255,0.35);
}
#s8 .dp-flow-node.done .dp-flow-node-status{ color:rgba(79,255,170,0.5); }
#s8 .dp-flow-node.active .dp-flow-node-status{ color:rgba(255,215,0,0.6); }
#s8 .dp-flow-node-lbl{
  font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;
  color:rgba(255,255,255,0.35);
}
#s8 .dp-flow-exit.done .dp-flow-node-lbl{ color:rgba(79,255,170,0.6); }

/* ════ CANCEL CONFIRM DIALOG ════ */
#s8 .mt-dp-cancel-confirm{
  display:none;flex-direction:column;gap:10px;
  margin:0 18px 14px;padding:14px 16px;
  background:rgba(229,80,80,0.06);
  border:1px solid rgba(229,80,80,0.2);
  border-radius:4px;
  animation:cancelConfirmIn 0.2s cubic-bezier(.16,1,.3,1);
}
@keyframes cancelConfirmIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
#s8 .mt-dp-cancel-msg{
  font-family:'IBM Plex Mono',monospace;font-size:9px;
  color:rgba(255,200,200,0.7);line-height:1.5;
}
#s8 .mt-dp-cancel-msg b{ color:rgba(255,200,200,0.95); }
#s8 .mt-dp-cancel-warn{
  color:rgba(255,180,50,0.9);margin-right:6px;font-size:11px;
}
#s8 .mt-dp-cancel-btns{
  display:flex;gap:8px;
}
#s8 .mt-dp-cancel-yes{
  font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;
  letter-spacing:1.5px;padding:8px 16px;cursor:pointer;
  background:rgba(229,80,80,0.12);border:1px solid rgba(229,80,80,0.4);
  color:rgba(255,100,100,0.9);transition:all 0.2s;flex:1;
}
#s8 .mt-dp-cancel-yes:hover{
  background:rgba(229,80,80,0.2);border-color:rgba(229,80,80,0.7);color:#fff;
}
#s8 .mt-dp-cancel-no{
  font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;
  letter-spacing:1.5px;padding:8px 16px;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.3);transition:all 0.2s;flex:1;
}
#s8 .mt-dp-cancel-no:hover{
  border-color:rgba(255,255,255,0.2);color:rgba(255,255,255,0.6);
}


/* ════ ONBOARDING TOOLTIPS ════ */
#s8 .tn-tip{
  display:inline-flex;align-items:center;justify-content:center;
  width:12px;height:12px;border-radius:50%;
  font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:700;
  color:rgba(109,232,225,0.5);border:1px solid rgba(109,232,225,0.2);
  background:rgba(109,232,225,0.04);cursor:help;
  position:relative;vertical-align:middle;margin-left:5px;
  flex-shrink:0;transition:all 0.2s;line-height:1;
}
#s8 .tn-tip:hover{
  color:rgba(109,232,225,0.95);border-color:rgba(109,232,225,0.5);
  background:rgba(109,232,225,0.08);
  box-shadow:0 0 8px rgba(109,232,225,0.15);
}
#s8 .tn-tip-bubble{
  display:none;position:fixed;
  width:210px;padding:10px 12px;
  background:rgba(3,6,16,1);
  border:1px solid rgba(109,232,225,0.18);
  border-radius:4px;
  font-family:'IBM Plex Mono',monospace;font-size:8px;
  color:rgba(200,220,240,0.82);line-height:1.65;
  letter-spacing:0.3px;
  box-shadow:0 12px 40px rgba(0,0,0,0.9),0 0 0 1px rgba(0,0,0,0.5),0 0 24px rgba(109,232,225,0.05);
  z-index:99999;pointer-events:none;
  white-space:normal;text-align:left;
  /* positioned entirely by JS — do NOT use CSS hover display */
}
#s8 .tn-tip-bubble::after{ content:none; }
#s8 .tn-tip-bubble::before{ content:none; }
/* Tooltip display handled entirely by JS positionTip */
/* Badge inline tip — position below on cards */
#s8 .mt-type-badge .tn-tip .tn-tip-bubble{
  bottom:auto;top:calc(100% + 8px);
}
#s8 .mt-type-badge .tn-tip .tn-tip-bubble::after{
  top:auto;bottom:100%;border-top-color:transparent;
  border-bottom-color:rgba(109,232,225,0.15);
}
#s8 .mt-type-badge .tn-tip .tn-tip-bubble::before{
  top:auto;bottom:100%;border-top-color:transparent;
  border-bottom-color:rgba(4,8,20,0.97);margin-top:0;margin-bottom:-1px;
}
/* First-run pulse — draws attention once */
#s8 .tn-tip.new{
  animation:tipPulse 2s ease-in-out 3;
}
@keyframes tipPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(109,232,225,0)}
  50%{box-shadow:0 0 0 4px rgba(109,232,225,0.15)}
}
/* ════ TOP % TRADER BADGE ════ */
#s8 .mt-top-pct-badge{
  display:flex;align-items:center;gap:5px;
  padding:4px 6px;
  border:none;background:none;
  position:relative;cursor:default;
}
#s8 .mt-top-pct-badge::before{ content:none; }
#s8 .mt-top-pct-badge.elite{ border:none;background:none;box-shadow:none; }
#s8 .mt-top-pct-badge.great{ border:none;background:none; }
#s8 .mt-top-pct-badge.great::before{ content:none; }
@keyframes topPctBreath{
  0%,100%{opacity:0.85} 50%{opacity:1}
}
#s8 .mt-top-pct-crown{
  color:rgba(255,215,0,0.7);font-size:9px;line-height:1;
}
#s8 .mt-top-pct-badge.great .mt-top-pct-crown{ color:rgba(109,232,225,0.7); }
#s8 .mt-top-pct-val{
  font-family:'Orbitron',sans-serif;font-size:10px;font-weight:900;
  color:rgba(255,215,0,0.95);letter-spacing:1px;
  text-shadow:0 0 16px rgba(255,215,0,0.5),0 0 32px rgba(255,215,0,0.2);
  animation:topPctBreath 3s ease-in-out infinite;
}
#s8 .mt-top-pct-badge.great .mt-top-pct-val{
  color:rgba(109,232,225,0.95);
  text-shadow:0 0 16px rgba(109,232,225,0.4),0 0 32px rgba(109,232,225,0.15);
}
#s8 .mt-top-pct-lbl{
  font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;
  color:rgba(255,215,0,0.45);text-transform:uppercase;align-self:flex-end;margin-bottom:1px;
}
#s8 .mt-top-pct-badge.great .mt-top-pct-lbl{ color:rgba(109,232,225,0.45); }

/* ════ TYPOGRAPHY SCALE CLEANUP ════ */
/* Establish 5 clear sizes — remove arbitrary 5px/6px chaos */
/* XS: 6px labels/meta  S: 8px body  M: 10-11px stats  L: 16-18px sub-heads  XL: 22px+ hero */

/* Unify all tiny letter-spacing labels to same treatment */
/* Unify hero stat labels */
#s8 .mt-hero-stat-lbl{
  font-size:8px !important;
  letter-spacing:1.5px !important;
  color:rgba(198,214,240,0.6) !important;
}
/* Unify card meta labels */
#s8 .mc-meta-lbl{
  font-size:7px !important;
  letter-spacing:1.5px !important;
}
/* Unify stat values in hero */
#s8 .mt-hero-stat-val{
  font-size:12px !important;
}
/* Stats strip values */
#s8 .mt-stat-val{
  font-size:14px !important;
  font-weight:800 !important;
}
/* Stats strip labels */
#s8 .mt-stat-lbl{
  font-size:7px !important;
  letter-spacing:2px !important;
}
/* Section titles consistent */
#s8 .mt-dp-sec-title{
  color:rgba(109,232,225,0.4) !important;
}
#s8 .mt-dp-pnl-box { flex-shrink: 0 !important; min-height: 160px !important; background: transparent !important; }
/* Sparkline in P&L box */
.mt-dp-sparkline { position:absolute; top:0; left:0; width:100%; height:40px; opacity:0.15; pointer-events:none; z-index:0; }
.mt-dp-pnl-box.win .mt-dp-sparkline { opacity:0.2; }
.mt-dp-pnl-box.loss .mt-dp-sparkline { opacity:0.15; }
/* Chart toggle button */
.mt-dp-chart-toggle { position:relative; z-index:2; text-align:center; padding:8px 0 4px; cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:2px; color:rgba(109,232,225,0.45); transition:color 0.15s; border-top:1px solid rgba(109,232,225,0.06); margin-top:8px; }
.mt-dp-chart-toggle:hover { color:rgba(109,232,225,0.9); }
/* Chart drawer */
.mt-dp-chart-drawer { border:1px solid rgba(109,232,225,0.06); background:rgba(3,6,14,0.8); margin:0 16px 12px; overflow:hidden; min-height:200px; }
/* Chart token label (header inside the drawer) */
#s8 .mt-dp-chart-label{display:flex;align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid rgba(109,232,225,0.06);background:rgba(6,10,22,0.6)}
#s8 .mt-dp-chart-sym{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;letter-spacing:1px;color:var(--cyan)}
#s8 .mt-dp-chart-name{font-family:'Space Grotesk',sans-serif;font-size:9px;font-weight:400;letter-spacing:0.3px;color:rgba(180,200,230,0.45)}
#s8 .mt-dp-chart-tf{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:700;letter-spacing:2px;color:rgba(180,200,230,0.35)}

/* ── Live price readout (watched token) ── */
#s8 .mt-dp-liveprice{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:10px 16px 4px;padding:11px 14px;
  background:linear-gradient(135deg,rgba(109,232,225,0.05) 0%,rgba(109,232,225,0.01) 100%);
  border:1px solid rgba(109,232,225,0.1);border-top-color:rgba(109,232,225,0.2);
  box-shadow:inset 0 1px 0 rgba(109,232,225,0.05);
}
#s8 .mt-dp-lp-tok{display:flex;align-items:center;gap:9px;min-width:0}
#s8 .mt-dp-lp-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
#s8 .mt-dp-lp-sym{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;letter-spacing:1px;color:#eaf6f5}
#s8 .mt-dp-lp-name{font-family:'Space Grotesk',sans-serif;font-size:9px;letter-spacing:0.3px;color:rgba(180,200,230,0.45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#s8 .mt-dp-lp-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
#s8 .mt-dp-lp-lbl{display:inline-flex;align-items:center;gap:4px;font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:700;letter-spacing:1.8px;color:rgba(79,255,170,0.55)}
#s8 .mt-dp-lp-dot{width:4px;height:4px;border-radius:50%;background:var(--green);box-shadow:0 0 4px rgba(79,255,170,0.6);animation:livePulse 2s ease-in-out infinite}
#s8 .mt-dp-lp-val{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:700;letter-spacing:0.5px;color:#fff;transition:color 0.25s}
/* Scanline texture + glimmer sweep */
.mt-dp-pnl-box::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.008) 3px,
    rgba(255,255,255,0.008) 4px
  );
  pointer-events: none; z-index: 0;
}
.mt-dp-pnl-glimmer {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
}
.mt-dp-pnl-glimmer::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,0.03) 45%,
    rgba(255,255,255,0.07) 50%,
    rgba(255,255,255,0.03) 55%,
    transparent 70%
  );
  animation: pnlGlimmer 5s ease-in-out 1s infinite;
}
@keyframes pnlGlimmer {
  0%   { left: -100%; }
  40%  { left: 150%; }
  100% { left: 150%; }
}
/* Top accent line */
.mt-dp-pnl-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent 5%, rgba(109,232,225,0.25) 30%, rgba(109,232,225,0.4) 50%, rgba(109,232,225,0.25) 70%, transparent 95%);
}
.mt-dp-pnl-box.win  {
  background: radial-gradient(ellipse at 35% 50%, rgba(79,255,170,0.05) 0%, transparent 65%);
  border-top-color: rgba(79,255,170,0.08);
  border-bottom-color: rgba(79,255,170,0.08);
}
.mt-dp-pnl-box.win::before {
  background: linear-gradient(90deg, transparent 10%, rgba(79,255,170,0.15) 35%, rgba(140,255,200,0.35) 50%, rgba(79,255,170,0.15) 65%, transparent 90%);
  height: 1px;
}
.mt-dp-pnl-box.loss  {
  background: radial-gradient(ellipse at 35% 50%, rgba(229,80,80,0.05) 0%, transparent 65%);
  border-top-color: rgba(229,80,80,0.08);
  border-bottom-color: rgba(229,80,80,0.08);
}
.mt-dp-pnl-box.loss::before {
  background: linear-gradient(90deg, transparent 10%, rgba(229,80,80,0.15) 35%, rgba(255,120,120,0.3) 50%, rgba(229,80,80,0.15) 65%, transparent 90%);
  height: 1px;
}
.mt-dp-pnl-inner { display: flex; align-items: center; gap: 20px; position:relative; z-index:2; }
.mt-dp-pnl-main { flex: 1; text-align: center; }
.mt-dp-pnl-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px; letter-spacing: 4px;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.mt-dp-pnl-label::before,.mt-dp-pnl-label::after{
  content:''; flex:1; max-width:30px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15));
}
.mt-dp-pnl-label::after { transform: scaleX(-1); }
.mt-dp-pnl {
  font-family: 'Orbitron', sans-serif;
  font-size: 42px; font-weight: 900;
  line-height: 1; margin-bottom: 8px;
  letter-spacing: -1px;
}
.mt-dp-pnl.green {
  background: linear-gradient(135deg, rgba(79,255,170,1) 0%, rgba(140,255,200,1) 30%, rgba(60,240,160,0.95) 60%, rgba(79,255,170,1) 100%);
  background-size: 300% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: pnlShimmer 5s linear infinite, pnlBreath 4s ease-in-out infinite;
}
.mt-dp-pnl.red {
  color: rgba(255,90,90,1);
  text-shadow: 0 0 30px rgba(229,80,80,0.45), 0 0 60px rgba(229,80,80,0.15);
}
.mt-dp-pnl.neutral { color: rgba(200,215,240,0.4); font-size: 28px; }
.mt-dp-pnl-pct {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
}
.mt-dp-pnl-pct.green  { color: rgba(79,255,170,0.55); letter-spacing: 1px; }
.mt-dp-pnl-pct.red    { color: rgba(229,80,80,0.75); }
.mt-dp-pnl-pct.neutral{ color: rgba(200,215,240,0.3); }
.mt-dp-pnl-side {
  display: flex; flex-direction: column; gap: 12px;
  padding: 4px 0 4px 16px; flex-shrink: 0; text-align: right;
  border-left: 1px solid rgba(255,255,255,0.07);
}
.mt-dp-pnl-stat-lbl {
  font-family: 'IBM Plex Mono', monospace; font-size: 6.5px;
  letter-spacing: 2px; color: rgba(180,200,230,0.4); margin-bottom: 4px;
  text-transform: uppercase;
}
.mt-dp-pnl-stat-val {
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700;
  color: rgba(109,232,225,0.9); letter-spacing: 0.2px;
  text-shadow: 0 0 8px rgba(109,232,225,0.2);
}
/* stat wrapper spacing */
.mt-dp-pnl-stat { display: flex; flex-direction: column; }
/* neutral PnL — clearly readable, not invisible */
.mt-dp-pnl.neutral {
  color: rgba(180,200,230,0.5) !important;
  -webkit-text-fill-color: rgba(180,200,230,0.5) !important;
  background: none !important;
  filter: none !important;
  font-size: 28px !important;
}










/* ── Swap arrow (used in ep panel) ── */
/* ep token picker must be above the panel */


/* ════ S8 EDIT PANEL LAYOUT ════ */














/* Main 2-column layout — mirrors S2 dex-center + cond-panel */


/* Override swap-card sizing inside ep panel */

/* The cond-panel in ep context — always visible when toggled, same position as S2 */



/* Save/discard */




/* Leg2 accent overrides */





/* Condition panel inside ep — make it visible when open, same look as S2 */


/* s8ep-swap-wrap - matches S2 dex-center layout */

/* When cond panel open, nudge swap card left same as S2 */

/* Cond row inside ep */

/* Leg2 theming */




/* Token picker overlay */













/* ══════════════════════════════════════════════
   S8 LEG EDIT PANEL — v410
   Exact S2 structural clone
══════════════════════════════════════════════ */
#s8-leg-edit-panel {
  position: fixed; inset: 0; z-index: 900;
  background: #04060e;
  display: none; flex-direction: column; overflow: hidden;
}
#s8-leg-edit-panel.show { display: flex; }

.s8ep-topbar {
  height: 52px; box-sizing: border-box; flex-shrink: 0;
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: rgba(6,8,18,0.75);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(109,232,225,0.15);
  position: relative; z-index: 50; flex-shrink: 0;
}
.s8ep-topbar::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(109,232,225,0.18) 30%,
    rgba(109,232,225,0.32) 50%, rgba(109,232,225,0.18) 70%, transparent 95%);
  pointer-events: none;
}
.s8ep-back {
  display: flex; align-items: center; gap: 5px;
  font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: 2px;
  color: rgba(109,232,225,0.7); background: none;
  border: 1px solid rgba(109,232,225,0.15); padding: 5px 10px;
  border-radius: 3px; cursor: pointer; transition: all 0.15s; flex-shrink: 0;
}
.s8ep-back:hover { color: rgba(109,232,225,1); border-color: rgba(109,232,225,0.4); }
.s8ep-breadcrumb { display: flex; align-items: center; flex: 1; }

#s8ep-main {
  flex: 1; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; z-index: 1;
  height: 0; /* forces flex child to not overflow */
}
#s8ep-main::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(rgba(109,232,225,0.018) 1px, transparent 1px),
              linear-gradient(90deg, rgba(109,232,225,0.018) 1px, transparent 1px);
  background-size: 60px 60px; opacity: 0.5;
}
#s8ep-main::after {
  content: ''; pointer-events: none; z-index: 0;
  position: absolute; width: 700px; height: 700px;
  left: 50%; top: 50%; transform: translate(-50%, -55%); border-radius: 50%;
  background: radial-gradient(circle, rgba(109,232,225,0.05) 0%, rgba(79,255,170,0.025) 30%, transparent 70%);
}
#s8ep-dex-center {
  display: flex; align-items: flex-start; gap: 0; width: fit-content;
  position: relative; z-index: 3; margin: 0 auto;
  transition: gap 0.45s cubic-bezier(.16,1,.3,1);
  padding: 20px 0;
  height: calc(100% - 0px); /* fill main height */
  box-sizing: border-box;
}
#s8ep-dex-center.expanded { gap: 20px; align-items: stretch; }
#s8ep-dex-center.expanded #s8ep-swap-wrap {
  width: 380px !important;
  overflow: visible !important;
  height: 100% !important;
  max-height: none !important;
}
#s8ep-dex-center.expanded #ep-cond-panel.vis {
  height: 100% !important;
  max-height: none !important;
}

#s8ep-swap-wrap {
  width: 440px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0;
  position: relative; height: 100%; max-height: none; min-height: 0;
  overflow: visible; scrollbar-width: none;
  transition: width 0.45s cubic-bezier(.16,1,.3,1);
}
/* Force swap-card inside ep to be flex column */
#s8ep-card {
  display: flex !important; flex-direction: column !important;
  height: 100% !important; max-height: none !important; overflow: visible !important;
}
/* sc-inner inside ep: scrolls, never stretches */
#s8ep-card .sc-inner {
  flex: 1 1 0% !important; overflow-y: auto !important;
  overflow-x: hidden !important; scrollbar-width: none !important; min-height: 0 !important;
  max-height: none !important;
}
#s8ep-card .sc-inner::-webkit-scrollbar { display: none !important; }

/* ── EP card: mode overrides — keep height:100% so sc-inner can scroll ── */
#s8ep-card.mode-market,
#s8ep-card.mode-limit,
#s8ep-card.mode-dca {
  height: 100% !important;
  max-height: none !important;
}
#s8ep-card.mode-market .sc-inner,
#s8ep-card.mode-limit .sc-inner,
#s8ep-card.mode-dca .sc-inner {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  max-height: none !important;
}
/* exec-wrap inside ep: pinned */
#s8ep-card > .exec-wrap {
  flex-shrink: 0 !important;
  border-top: 1px solid rgba(109,232,225,0.07) !important;
  padding: 8px 14px 14px !important;
  background: rgba(4,6,14,0.95) !important;
  position: relative; z-index: 5;
}

/* ep cond-panel */
#ep-cond-panel {
  width: 0; flex-shrink: 0; opacity: 0; overflow: hidden; pointer-events: none;
  align-self: flex-start;
  display: flex; flex-direction: column; gap: 10px;
  transition: width 0.45s cubic-bezier(.16,1,.3,1), opacity 0.35s cubic-bezier(.16,1,.3,1) 0.05s;
}
#ep-cond-panel.vis {
  width: 300px !important; opacity: 1 !important; pointer-events: all !important; align-self: stretch !important; overflow: hidden !important; display: flex !important; flex-direction: column !important;
  padding: 12px !important; border-radius: 14px !important;
  border: 1px solid rgba(109,232,225,0.12) !important;
  background: linear-gradient(170deg, rgba(12,18,34,0.97) 0%, rgba(8,12,24,0.99) 100%) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(109,232,225,0.05) !important;
  overflow-y: auto !important; scrollbar-width: none !important;
  align-self: stretch !important;
  display: flex !important; flex-direction: column !important;
}
#ep-cond-panel.vis::-webkit-scrollbar { display: none; }
#s8ep-cond-row.open .ctb-badge {
  background: rgba(79,255,170,0.12) !important;
  color: rgba(79,255,170,1) !important;
  border-color: rgba(79,255,170,0.3) !important;
}

/* ── Save btn matches exec-btn exactly ── */
#s8ep-save-btn {
  width: 100%; padding: 14px; border-radius: 0;
  border: 1px solid rgba(109,232,225,0.35) !important;
  background: linear-gradient(160deg, rgba(109,232,225,0.14) 0%, rgba(109,232,225,0.05) 100%) !important;
  color: #ffffff !important;
  font-family: 'Orbitron', sans-serif !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 3px !important;
  cursor: pointer; position: relative; overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s,
              transform 0.15s, font-size 0.2s cubic-bezier(.22,1,.36,1),
              letter-spacing 0.2s !important;
  box-shadow: 0 0 20px rgba(109,232,225,0.08), inset 0 1px 0 rgba(109,232,225,0.15),
              inset 0 -1px 0 rgba(0,0,0,0.2) !important;
  border-top-color: rgba(109,232,225,0.5) !important;
  border-bottom-color: rgba(109,232,225,0.2) !important;
  text-shadow: none !important;
  animation: execIdle 3.5s ease-in-out 2s infinite !important;
}
#s8ep-save-btn:hover {
  background: linear-gradient(160deg, rgba(109,232,225,0.2) 0%, rgba(109,232,225,0.08) 100%) !important;
  box-shadow: 0 0 30px rgba(109,232,225,0.15), inset 0 1px 0 rgba(109,232,225,0.2) !important;
  letter-spacing: 4px !important; transform: translateY(-1px) !important;
  border-color: rgba(109,232,225,0.55) !important;
}
#s8ep-save-btn:active {
  transform: scale(0.97) translateY(1px) !important;
  box-shadow: 0 0 15px rgba(109,232,225,0.2), 0 0 0 1px rgba(109,232,225,0.15) inset;
}
#s8ep-card.leg2 { border-color: rgba(157,127,234,0.18) !important; }
#s8ep-card.leg2 #s8ep-save-btn {
  background: linear-gradient(160deg, rgba(157,127,234,0.14) 0%, rgba(157,127,234,0.05) 100%) !important;
  border-color: rgba(157,127,234,0.4) !important;
  border-top-color: rgba(157,127,234,0.6) !important;
  border-bottom-color: rgba(157,127,234,0.2) !important;
  color: rgba(210,195,255,0.95) !important;
  box-shadow: 0 0 20px rgba(157,127,234,0.1), inset 0 1px 0 rgba(157,127,234,0.15),
              inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.ep-tok-picker {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(4,6,14,0.92); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}
.ep-tok-picker-card {
  width: 340px; max-height: 70vh; background: rgba(6,12,24,0.99);
  border: 1px solid rgba(109,232,225,0.15); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
}
.ep-tok-picker-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ep-tok-picker-title { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:2px; color:rgba(255,255,255,0.5); }
.ep-tok-search {
  margin: 10px 12px; padding: 8px 12px; outline: none; display: block;
  width: calc(100% - 48px); background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 6px;
  font-family:'IBM Plex Mono',monospace; font-size:10px; color:rgba(255,255,255,0.8);
}
.ep-tok-list { flex:1; overflow-y:auto; padding:4px 12px 12px; }
.ep-tok-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:6px; cursor:pointer; transition:background 0.1s; }
.ep-tok-item:hover { background:rgba(109,232,225,0.06); }
.ep-tok-item-sym { font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:rgba(255,255,255,0.9); flex:1; }
.ep-tok-item-name { font-family:'IBM Plex Mono',monospace; font-size:8px; color:rgba(255,255,255,0.3); }
.ep-tok-item-price { font-family:'IBM Plex Mono',monospace; font-size:9px; color:rgba(109,232,225,0.7); }

/* Mobile detail close button — hidden on desktop */
#s8 .mt-dp-mob-close{display:none}
/* Desktop close button — pinned top-right of the (sticky) detail header */
#s8 .mt-dp-close{position:absolute;top:10px;right:12px;z-index:12;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(109,232,225,0.05);border:1px solid rgba(109,232,225,0.14);border-radius:4px;color:rgba(109,232,225,0.6);cursor:pointer;transition:all 0.18s}
#s8 .mt-dp-close:hover{background:rgba(229,80,80,0.12);border-color:rgba(229,80,80,0.4);color:rgba(255,150,150,0.95);box-shadow:0 0 12px rgba(229,80,80,0.15)}
@media (max-width:768px){#s8 .mt-dp-close{display:none}}
/* Edit action button — cyan/primary intent (add conditions to a live trade) */
#s8 .mt-dp-btn.edit{border-color:rgba(109,232,225,0.32);color:rgba(109,232,225,0.92);background:rgba(109,232,225,0.06)}
#s8 .mt-dp-btn.edit:hover{background:rgba(109,232,225,0.13);border-color:rgba(109,232,225,0.55);box-shadow:0 0 14px rgba(109,232,225,0.16)}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — S8 MY TRADES
   1440px+ : wide desktop (detail panel wider)
   1024px  : small desktop / tablet landscape (narrow detail)
   768px   : tablet portrait (stack split, detail overlay)
   480px   : mobile (compact everything)
   428px   : small phones (tighter)
   375px   : iPhone SE / small phones
═══════════════════════════════════════════════════════ */

/* ═══ WIDE DESKTOP: 1440px+ ═══ */
@media(min-width:1440px){
  #s8 .mt-split{grid-template-columns:1fr 480px !important}
  #s8 .mt-hero-cluster{gap:0;padding:0 40px}
  #s8 .mt-hero-divider{margin:0 36px}
  #s8 .mt-pnl-big{font-size:44px !important}
  #s8 .mt-hero-stat-val{font-size:14px !important}
  #s8 .mc-pair{font-size:17px !important}
  #s8 .mc-pnl{font-size:16px !important}
}

/* ═══ SMALL DESKTOP / TABLET LANDSCAPE: ≤1024px ═══ */
@media(max-width:1024px){
  /* Narrow the detail panel */
  #s8 .mt-split{grid-template-columns:1fr 320px !important}
  #s8 .mt-right{margin:6px 6px 6px 0}

  /* Compact hero */
  #s8 .mt-hero{padding:16px 20px 12px !important}
  #s8 .mt-hero-divider{margin:0 16px !important}
  #s8 .mt-pnl-big{font-size:32px !important}
  #s8 .mt-hero-stat-val{font-size:12px !important}

  /* Detail panel pair name smaller */
  #s8 .mt-dp-pair{font-size:16px !important}
  #s8 .mt-dp-val{font-size:11px !important}

  /* Cards: slightly smaller pair */
  #s8 .mc-pair{font-size:14px !important}
  #s8 .mc-pnl{font-size:13px !important}

  /* No-wallet state: constrain width */
  #s8 .mt-nw-wrap{max-width:380px}
}

/* ═══ TABLET PORTRAIT: ≤768px ═══ */
@media(max-width:768px){
  /* ── Container: prevent horizontal overflow ── */
  #s8{overflow-x:hidden !important;max-width:100vw !important}
  /* ── Full-page scroll: hero/stats/filters scroll naturally ── */
  #s8 .mt-body{overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch;max-width:100vw !important}
  #s8-content{overflow:visible !important;max-width:100% !important}

  /* ── Footer: fixed at bottom of screen on mobile ── */
  #s8 .dex-foot{
    position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;
    z-index:200 !important;
  }
  #s8 #mt-main-view{overflow:visible !important;flex:none !important;min-height:auto !important;position:relative !important}

  /* Stack the split: full-width list, detail is overlay */
  #s8 .mt-split{grid-template-columns:1fr !important;overflow:visible !important;flex:none !important;min-height:auto !important}
  #s8 .mt-left{overflow:visible !important;flex:none !important;min-height:auto !important}
  /* Trade list: no inner scroll, flows naturally in page */
  #s8 .mt-list{overflow:visible !important;flex:none !important;min-height:auto !important;padding-bottom:max(80px, env(safe-area-inset-bottom, 80px)) !important}

  #s8 .mt-right{
    display:none !important;border-radius:0;margin:0;border:none;
    box-shadow:none;width:auto !important;
  }
  #s8 .mt-right::before,#s8 .mt-right::after{display:none !important}
  /* Detail panel: fixed full-screen overlay */
  /* ═══ MOBILE DETAIL OVERLAY — PREMIUM FULL-SCREEN ═══ */
  #s8 .mt-right.mob-open{
    display:flex !important;position:fixed !important;
    top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
    width:100vw !important;height:100vh !important;height:100dvh !important;
    overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch;
    background:linear-gradient(180deg,#060a16 0%,#04060e 15%,#030510 100%) !important;
    border-radius:0 !important;margin:0 !important;
    border:none !important;box-shadow:none !important;z-index:9500 !important;
    flex-direction:column !important;
    padding:0 !important;
    transition:transform 0.3s cubic-bezier(.16,1,.3,1) !important;
    transform:translateX(0) !important;
    isolation:isolate !important;
  }
  /* Hide hero and background when detail is open */
  #s8 .mt-body.detail-open .mt-hero{display:none !important}
  #s8 .mt-body.detail-open .mt-stats{display:none !important}
  #s8 .mt-body.detail-open .mt-left{display:none !important}
  /* Detail panel: scrollable content area */
  #s8 .mt-right.mob-open .mt-dp{
    display:flex !important;flex-direction:column !important;
    flex:1 !important;min-height:0 !important;
    background:transparent !important;
    overflow-y:auto !important;overflow-x:hidden !important;
    padding:0 !important;
  }

  /* ── Close button: prominent, below navbar ── */
  #s8 .mt-right.mob-open .mt-dp-mob-close{
    position:fixed !important;top:68px !important;right:16px !important;
    z-index:9510 !important;width:40px !important;height:40px !important;
    background:linear-gradient(135deg,rgba(10,16,30,0.98),rgba(6,10,20,0.95)) !important;
    border:1px solid rgba(109,232,225,0.25) !important;
    border-top-color:rgba(109,232,225,0.4) !important;
    border-radius:0 !important;display:flex !important;align-items:center !important;
    justify-content:center !important;color:rgba(109,232,225,0.7) !important;
    cursor:pointer !important;backdrop-filter:blur(12px) !important;
    box-shadow:0 2px 12px rgba(0,0,0,0.5),inset 0 1px 0 rgba(109,232,225,0.08) !important;
    transition:all 0.2s !important;
  }
  #s8 .mt-right.mob-open .mt-dp-mob-close:active{
    background:rgba(109,232,225,0.1) !important;color:rgba(109,232,225,1) !important;
    border-color:rgba(109,232,225,0.5) !important;
    box-shadow:0 0 16px rgba(109,232,225,0.15),inset 0 1px 0 rgba(109,232,225,0.15) !important;
  }

  /* ── Header: premium gradient with accent line ── */
  #s8 .mt-right.mob-open .mt-dp-header{
    padding:68px 16px 16px !important;
    background:linear-gradient(180deg,rgba(8,16,32,1) 0%,rgba(6,12,24,0.99) 60%,rgba(4,8,16,0.98) 100%) !important;
    border-bottom:1px solid rgba(109,232,225,0.08) !important;
    position:relative !important;
    box-shadow:0 4px 24px rgba(0,0,0,0.4) !important;
  }
  /* Accent shimmer line under header */
  #s8 .mt-right.mob-open .mt-dp-header::after{
    content:'' !important;position:absolute !important;bottom:0 !important;left:0 !important;right:0 !important;height:1px !important;
    background:linear-gradient(90deg,transparent 5%,var(--dp-accent,rgba(109,232,225,0.5)) 50%,transparent 95%) !important;
  }
  #s8 .mt-right.mob-open .mt-dp-breadcrumb{font-size:7px !important;margin-bottom:12px !important}
  #s8 .mt-right.mob-open .mt-dp-badges{margin-bottom:8px !important;gap:6px !important;flex-wrap:wrap !important}
  #s8 .mt-right.mob-open .mt-dp-pair{font-size:24px !important;margin-bottom:3px !important;font-weight:900 !important}
  #s8 .mt-right.mob-open .mt-dp-sub{font-size:9px !important;color:rgba(255,255,255,0.35) !important}
  #s8 .mt-right.mob-open .mt-dp-chain{font-size:8px !important;margin-top:8px !important}

  /* ── Receipt code: premium card with depth ── */
  #s8 .mt-right.mob-open .mt-dp-receipt{
    margin:12px 16px 0 !important;padding:14px 16px !important;
    background:linear-gradient(165deg,rgba(14,22,40,0.95),rgba(8,14,28,0.98)) !important;
    border:1px solid rgba(109,232,225,0.1) !important;
    border-top-color:rgba(109,232,225,0.22) !important;
    box-shadow:0 2px 8px rgba(0,0,0,0.3),inset 0 1px 0 rgba(109,232,225,0.06) !important;
  }

  /* ── P&L box: premium with glow + depth ── */
  #s8 .mt-right.mob-open .mt-dp-pnl-box{
    margin:0 !important;padding:28px 16px 20px !important;
    position:relative !important;overflow:hidden !important;
    border-bottom:1px solid rgba(109,232,225,0.06) !important;
  }
  /* Preserve scanline texture */
  #s8 .mt-right.mob-open .mt-dp-pnl-box::after{z-index:0 !important}
  /* Preserve glimmer animation */
  #s8 .mt-right.mob-open .mt-dp-pnl-glimmer{position:absolute !important;inset:0 !important;pointer-events:none !important;z-index:1 !important;overflow:hidden !important}
  /* Win state: green ambient glow */
  #s8 .mt-right.mob-open .mt-dp-pnl-box.win{
    background:radial-gradient(ellipse at 50% 40%,rgba(79,255,170,0.06) 0%,transparent 70%) !important;
    box-shadow:inset 0 1px 0 rgba(79,255,170,0.1),0 0 40px rgba(79,255,170,0.03) !important;
  }
  /* Loss state: red ambient glow */
  #s8 .mt-right.mob-open .mt-dp-pnl-box.loss{
    background:radial-gradient(ellipse at 50% 40%,rgba(229,80,80,0.06) 0%,transparent 70%) !important;
    box-shadow:inset 0 1px 0 rgba(229,80,80,0.08),0 0 40px rgba(229,80,80,0.03) !important;
  }
  /* P&L layout: vertical centered */
  #s8 .mt-right.mob-open .mt-dp-pnl-inner{
    flex-direction:column !important;align-items:center !important;gap:14px !important;
    position:relative !important;z-index:2 !important;
  }
  #s8 .mt-right.mob-open .mt-dp-pnl-main{text-align:center !important}
  #s8 .mt-right.mob-open .mt-dp-pnl-label{font-size:7px !important;letter-spacing:3px !important;margin-bottom:8px !important;color:rgba(180,200,230,0.4) !important}
  #s8 .mt-right.mob-open .mt-dp-pnl{font-size:36px !important}
  #s8 .mt-right.mob-open .mt-dp-pnl-pct{font-size:13px !important;margin-top:4px !important}
  /* Entry/Size side stats: row layout centered */
  #s8 .mt-right.mob-open .mt-dp-pnl-side{
    display:flex !important;flex-direction:row !important;gap:24px !important;justify-content:center !important;
    border-left:none !important;padding:12px 0 0 !important;
    border-top:1px solid rgba(255,255,255,0.05) !important;
    width:100% !important;
  }
  #s8 .mt-right.mob-open .mt-dp-pnl-stat{text-align:center !important}
  #s8 .mt-right.mob-open .mt-dp-pnl-stat-lbl{font-size:7px !important;letter-spacing:2px !important}
  #s8 .mt-right.mob-open .mt-dp-pnl-stat-val{font-size:13px !important}

  /* Chart toggle */
  #s8 .mt-right.mob-open .mt-dp-chart-toggle{padding:10px 16px !important;border-top:1px solid rgba(109,232,225,0.04) !important}

  /* ── Sections: premium depth ── */
  #s8 .mt-right.mob-open .mt-dp-section{
    padding:16px !important;
    margin:8px 12px !important;
    background:linear-gradient(165deg,rgba(10,16,30,0.7),rgba(6,10,22,0.5)) !important;
    border:1px solid rgba(109,232,225,0.06) !important;
    border-top-color:rgba(109,232,225,0.12) !important;
    box-shadow:0 2px 12px rgba(0,0,0,0.25),inset 0 1px 0 rgba(109,232,225,0.04) !important;
    position:relative !important;
  }
  #s8 .mt-right.mob-open .mt-dp-sec-title{
    font-size:8px !important;letter-spacing:3px !important;
    color:rgba(109,232,225,0.6) !important;margin-bottom:12px !important;
  }

  /* ── Grid: premium bordered cells with hover ── */
  #s8 .mt-right.mob-open .mt-dp-grid{
    grid-template-columns:1fr 1fr !important;gap:0 !important;
    border:1px solid rgba(109,232,225,0.08) !important;
    background:rgba(0,0,0,0.15) !important;
  }
  #s8 .mt-right.mob-open .mt-dp-item{
    padding:14px 16px !important;
    border-bottom:1px solid rgba(109,232,225,0.06) !important;
    border-right:1px solid rgba(109,232,225,0.06) !important;
    background:linear-gradient(165deg,rgba(8,14,28,0.6),rgba(4,8,18,0.4)) !important;
    transition:background 0.2s !important;
  }
  #s8 .mt-right.mob-open .mt-dp-item:nth-child(even){border-right:none !important}
  #s8 .mt-right.mob-open .mt-dp-item:last-child,
  #s8 .mt-right.mob-open .mt-dp-item:nth-last-child(2):nth-child(odd){border-bottom:none !important}
  #s8 .mt-right.mob-open .mt-dp-lbl{font-size:7px !important;letter-spacing:2px !important;margin-bottom:5px !important;color:rgba(180,200,230,0.4) !important}
  #s8 .mt-right.mob-open .mt-dp-val{font-size:15px !important;font-weight:800 !important}

  /* ── Conditions: premium left-border cards ── */
  #s8 .mt-right.mob-open .mt-dp-cond{
    background:linear-gradient(165deg,rgba(255,255,255,0.025),rgba(255,255,255,0.01)) !important;
    margin-bottom:6px !important;padding:12px 14px !important;
  }

  /* ── Actions: premium bottom bar ── */
  #s8 .mt-right.mob-open .mt-dp-actions{
    padding:16px !important;
    padding-bottom:max(24px, env(safe-area-inset-bottom)) !important;
    background:linear-gradient(180deg,rgba(6,10,20,0.98),rgba(4,6,14,1)) !important;
    border-top:1px solid rgba(109,232,225,0.08) !important;
    margin-top:auto !important;
    gap:10px !important;
    box-shadow:0 -4px 20px rgba(0,0,0,0.4) !important;
  }
  #s8 .mt-right.mob-open .mt-dp-btn{
    min-height:48px !important;font-size:8px !important;letter-spacing:2px !important;
  }
  #s8 .mt-right.mob-open .mt-dp-btn.primary{
    background:linear-gradient(165deg,rgba(109,232,225,0.06),rgba(109,232,225,0.02)) !important;
    border-color:rgba(109,232,225,0.2) !important;
    box-shadow:0 0 12px rgba(109,232,225,0.05),inset 0 1px 0 rgba(109,232,225,0.08) !important;
  }

  /* ── Trade timeline section ── */
  #s8 .mt-right.mob-open .mt-dp-timeline{margin:0 12px !important}

  /* ── Vesting / Tenon Lock ── */
  #s8 .mt-right.mob-open .mt-dp-vesting{
    background:linear-gradient(165deg,rgba(109,232,225,0.04),rgba(6,10,22,0.5)) !important;
    border-color:rgba(109,232,225,0.1) !important;
  }

  /* Hide share trade card button in expanded detail */
  #s8 .mt-right.mob-open .mt-brag-btn{display:none !important}
  #s8 .mt-dp-mob-close{
    display:flex !important;align-items:center;justify-content:center;
    width:40px;height:40px;
    background:linear-gradient(135deg,rgba(10,16,30,0.98),rgba(6,10,20,0.95));
    border:1px solid rgba(109,232,225,0.25);border-top-color:rgba(109,232,225,0.4);border-radius:0;
    cursor:pointer;color:rgba(109,232,225,0.7);transition:all 0.2s;
    flex-shrink:0;position:fixed !important;top:68px;right:16px;z-index:9510;
    box-shadow:0 2px 12px rgba(0,0,0,0.5),inset 0 1px 0 rgba(109,232,225,0.08);
    backdrop-filter:blur(12px);
  }
  #s8 .mt-dp-mob-close:hover{
    border-color:rgba(109,232,225,0.5);color:rgba(109,232,225,1);
    background:rgba(109,232,225,0.1);
  }

  /* Hero: 2-row layout — PnL on top, stats below */
  #s8 .mt-hero{padding:16px 16px 12px !important;flex-shrink:0 !important}
  #s8 .mt-hero-cluster{
    grid-template-columns:1fr !important;
    display:flex !important;flex-direction:column;gap:12px;min-height:auto !important;
  }
  #s8 .mt-hero-main{padding:0 !important}
  #s8 .mt-hero-divider{width:100% !important;height:1px !important;margin:6px 0 !important}
  #s8 .mt-hero-side{
    display:grid !important;grid-template-columns:1fr 1fr;gap:4px 16px;
  }
  #s8 .mt-pnl-big{font-size:34px !important}

  /* Stats: 3 columns at tablet */
  #s8 .mt-stats{grid-template-columns:repeat(3,1fr) !important}
  #s8 .mt-stat:nth-child(4),#s8 .mt-stat:nth-child(5){border-top:1px solid rgba(109,232,225,0.04)}

  /* Filter rows: horizontal scroll */
  #s8 .mt-filter-row{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #s8 .mt-filter-row::-webkit-scrollbar{display:none}
  #s8 .mt-fb{white-space:nowrap}

  /* Cards: full-width on tablet with side padding */
  #s8 .mt-list{padding:6px 10px 60px !important}
  #s8 .mt-card{box-sizing:border-box !important;max-width:100% !important;overflow:hidden !important}
  #s8 .mc-row1{padding:12px 14px 6px 14px !important}
  #s8 .mc-row2{padding:0 14px 6px 14px !important}
  #s8 .mc-row3{padding:6px 14px 10px 14px !important}
  #s8 .mc-sparkline{right:40px !important}

  /* Badges row: wrap on tablet */
  #s8 .mt-badges-row{flex-wrap:wrap;gap:8px !important;justify-content:center}
  #s8 .mt-brag-row{padding:8px 12px 0 !important}

  /* Hero filter: scroll on narrow tablets */
  #s8 .mt-hero-filter{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-shrink:1;min-width:0}
  #s8 .mt-hero-filter::-webkit-scrollbar{display:none}
  #s8 .mt-hf{white-space:nowrap;flex-shrink:0}

  /* Brag card: fit screen */
  #s8 .mt-brag-card{width:calc(100vw - 32px) !important;max-width:480px}
  #s8 .mt-brag-inner{padding:24px 24px 24px !important}
  #s8 .mt-brag-earn-val{font-size:38px !important}
  #s8 .mt-brag-stat-val{font-size:16px !important}
  #s8 .mt-brag-stat{padding:14px 8px !important}

  /* No-wallet state */
  #s8 .mt-nw-wrap{max-width:340px;padding:0 16px}
  #s8 .mt-nw-code-row{flex-wrap:wrap;gap:6px}
}

/* ═══ LARGE PHONE / SMALL TABLET: ≤600px ═══ */
@media(max-width:600px){
  /* Stats: 2 columns before hiding at 480px */
  #s8 .mt-stats{grid-template-columns:repeat(2,1fr) !important}
  #s8 .mt-stat{padding:8px 10px !important}

  /* Hero: tighter padding, smaller P&L */
  #s8 .mt-hero{padding:14px 14px 10px !important}
  #s8 .mt-pnl-big{font-size:30px !important}
  #s8 .mt-hero-stat-val{font-size:10px !important}
  #s8 .mt-hero-stat-lbl{font-size:7px !important}

  /* Filters: wrap instead of scroll for better discoverability */
  #s8 .mt-filter-row{display:flex !important;flex-wrap:wrap !important;gap:4px !important;overflow:visible !important}
  #s8 .mt-fb{font-size:7px !important;padding:5px 8px !important;white-space:nowrap !important;flex-shrink:0 !important}
  #s8 .mt-sort-btn{font-size:7px !important;padding:5px 8px !important}

  /* Cards: reduce side padding for more content space */
  #s8 .mt-list{padding:4px 8px 70px 8px !important}
  #s8 .mc-row1{padding:10px 12px 5px 12px !important}
  #s8 .mc-row2{padding:0 12px 5px 12px !important}
  #s8 .mc-row3{padding:5px 12px 8px 12px !important}
  #s8 .mc-pair{font-size:13px !important}
  #s8 .mc-pnl{font-size:13px !important}
  /* Sparkline: shrink to avoid overlap with PnL */
  #s8 .mc-sparkline{right:30px !important;max-width:60px !important}

  /* Brag card: constrain width */
  #s8 .mt-brag-card{width:calc(100vw - 28px) !important;max-width:480px}
  #s8 .mt-brag-earn-val{font-size:34px !important}

  /* No-wallet state */
  #s8 .mt-nw-wrap{max-width:320px;padding:0 14px}
}

/* ═══ MOBILE: ≤480px ═══ */
@media(max-width:480px){
  /* Safe area insets + overflow containment */
  #s8{padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px);overflow-x:hidden !important;max-width:100vw !important;width:100vw !important}

  /* ── Layout: single column, detail as fixed overlay ── */
  #s8 .mt-split{grid-template-columns:1fr !important;max-width:100% !important;overflow:hidden !important}
  #s8 .mt-left{max-width:100% !important;overflow-x:hidden !important}
  #s8 .mt-body{max-width:100% !important;overflow-x:hidden !important}
  #s8 .mt-right{display:none !important;border-radius:0;margin:0;border:none;box-shadow:none;width:auto !important}
  #s8 .mt-edit-drawer{width:100vw !important;max-width:100vw !important}

  /* ── Hero: compact stacked, P&L first ── */
  #s8 .mt-hero{padding:14px 12px 10px !important;max-width:100% !important;box-sizing:border-box !important}
  /* Full-width equity canvas on mobile */
  #s8 #mt-equity-canvas{width:100% !important;opacity:0.5 !important}
  #s8 .mt-hero-cluster{
    display:flex !important;flex-direction:column;gap:8px;
    min-height:auto !important;padding:0 !important;
    grid-template-columns:1fr !important;
  }
  /* Reorder: P&L first, then stats — use flexbox order */
  #s8 .mt-hero-cluster .mt-hero-main{order:-1;text-align:center;padding:4px 0 2px !important}
  #s8 .mt-hero-cluster .mt-hero-divider:first-of-type{order:0;margin-top:0}
  #s8 .mt-hero-cluster .mt-hero-side:first-child{order:1}
  #s8 .mt-hero-cluster .mt-hero-divider:last-of-type{order:2;display:none !important}
  #s8 .mt-hero-cluster .mt-hero-side:last-child{order:3}
  /* Divider between P&L and stats: subtle line */
  #s8 .mt-hero-divider{width:100% !important;height:1px !important;margin:0 !important;background:rgba(109,232,225,0.06) !important}
  #s8 .mt-pnl-big{font-size:28px !important}
  /* Stats: 4-column grid — all 8 hero stats in 2 compact rows */
  #s8 .mt-hero-side{display:grid !important;grid-template-columns:1fr 1fr 1fr 1fr;gap:2px 12px}
  #s8 .mt-hero-stat{padding:4px 2px !important;text-align:center;overflow:hidden}
  #s8 .mt-hero-stat-val{font-size:10px !important;white-space:nowrap}
  #s8 .mt-hero-stat-lbl{font-size:7px !important;letter-spacing:1px !important;white-space:nowrap}

  /* Hero filter buttons: tap targets + scroll */
  #s8 .mt-hero-filter{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-shrink:1;min-width:0}
  #s8 .mt-hero-filter::-webkit-scrollbar{display:none}
  #s8 .mt-hf{min-height:36px !important;padding:6px 12px !important;font-size:7px !important;white-space:nowrap;flex-shrink:0}

  /* Badges: inline with P&L sub-line, not a separate row */
  #s8 .mt-badges-row{flex-wrap:wrap;gap:6px !important;padding:0 8px !important;justify-content:center}
  #s8 .mt-streak-badge{padding:3px 6px 3px 5px !important}
  #s8 .mt-top-pct-badge{padding:3px 6px !important}
  #s8 .mt-brag-row{padding:4px 12px 0 !important}

  /* Brag card: full-width on mobile */
  #s8 .mt-brag-card{width:calc(100vw - 24px) !important;max-width:480px}
  #s8 .mt-brag-inner{padding:20px 16px 20px !important}
  #s8 .mt-brag-earn-val{font-size:32px !important}
  #s8 .mt-brag-stat-val{font-size:14px !important}
  #s8 .mt-brag-stat{padding:12px 6px !important}
  #s8 .mt-brag-stat-lbl{font-size:7px !important;letter-spacing:1.5px !important}
  #s8 .mt-brag-close{top:10px;right:12px}
  #s8 .mt-brag-actions{flex-direction:column !important;gap:6px !important}
  #s8 .mt-brag-action{padding:14px !important;min-height:44px !important}
  #s8 .mt-brag-header{flex-wrap:wrap;gap:8px}

  /* ── Stats strip: hidden on mobile — key stats already in hero ── */
  #s8 .mt-stats{display:none !important}

  /* ── Hero mini-bar: proper fit on mobile ── */
  #s8 .mt-hero-mini{padding:8px 12px !important;gap:6px !important}
  #s8 .mt-hero-mini-left{flex-wrap:nowrap !important;overflow:hidden !important;min-width:0 !important}
  #s8 .mt-hero-mini-pnl{font-size:13px !important;flex-shrink:0 !important}
  #s8 .mt-hero-mini-pct{font-size:8px !important;flex-shrink:0 !important}
  #s8 .mt-hero-mini-stat{font-size:7px !important;white-space:nowrap !important}
  #s8 .mt-hero.collapsed{max-height:44px !important}
  #s8 .mt-hero-collapse-btn{padding:3px 5px !important}

  /* ── Filters: wrap to fit, no horizontal overflow ── */
  #s8 .mt-filters{position:sticky !important;top:0 !important;z-index:10 !important;background:rgba(4,6,14,0.95) !important;backdrop-filter:blur(8px) !important;-webkit-backdrop-filter:blur(8px) !important;padding:4px 6px !important;max-width:100% !important;box-sizing:border-box !important;overflow:hidden !important}
  #s8 .mt-filter-row{display:flex !important;flex-wrap:wrap !important;gap:4px !important;overflow:visible !important;padding:2px 0 !important}
  #s8 .mt-filter-row::-webkit-scrollbar{display:none}
  #s8 .mt-filter-group{flex-wrap:wrap !important;gap:4px !important}
  #s8 .mt-fb{min-height:30px !important;padding:5px 8px !important;white-space:nowrap !important;font-size:7px !important;letter-spacing:1px !important;flex-shrink:0 !important;border-right:none !important;border:1px solid rgba(109,232,225,0.08) !important}
  #s8 .mt-fb.on{border-color:rgba(109,232,225,0.25) !important}
  #s8 .mt-fb-count{font-size:7px !important;padding:1px 3px !important;margin-left:3px !important}
  #s8 .mt-sort-wrap{margin-left:0 !important}
  #s8 .mt-sort-btn{min-height:30px !important;padding:5px 8px !important;font-size:7px !important}
  #s8 .mt-filter-row-2{border-bottom:1px solid rgba(109,232,225,0.04) !important}

  /* ── List header ── */
  #s8 .mt-list-header{padding:6px 10px !important;max-width:100% !important;box-sizing:border-box !important;overflow:hidden !important;flex-wrap:wrap !important}
  #s8 .mt-sel-all-btn,#s8 .mt-del-all-btn{font-size:7px !important;padding:4px 6px !important;flex-shrink:0 !important}
  #s8 .mt-list-hdr-lbl{font-size:7px !important;min-width:0 !important}

  /* ── Trade cards: edge-to-edge, no overflow ── */
  #s8 .mt-body{overflow-x:hidden !important;max-width:100vw !important}
  #s8 .mt-list{padding:4px 6px 80px 6px !important;overflow-x:hidden !important;gap:6px !important;box-sizing:border-box !important;max-width:100% !important;width:100% !important}
  #s8 .mt-card{min-height:auto !important;border-radius:0 !important;box-sizing:border-box !important;max-width:100% !important;width:100% !important;overflow:hidden !important;border-left:none !important;border-right:none !important}

  /* ── Row 1: two-line grid — [badge ... status ✕] / [pair ... PnL] ── */
  #s8 .mc-row1{
    padding:8px 10px 4px 10px !important;
    display:grid !important;
    grid-template-columns:auto 1fr auto auto !important;
    grid-template-rows:auto auto !important;
    column-gap:6px !important;row-gap:4px !important;
    align-items:center !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  /* Type badge: top-left */
  #s8 .mt-type-badge{grid-row:1 !important;grid-column:1 !important;font-size:7px !important;padding:3px 7px !important;border-radius:4px !important}
  /* Status badge: top-right area — truncate long statuses */
  #s8 .mt-status{grid-row:1 !important;grid-column:3 !important;font-size:7px !important;padding:3px 6px !important;letter-spacing:1px !important;border-radius:4px !important;max-width:80px !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important}
  /* Delete button: top-far-right */
  #s8 .mt-card-del-btn{grid-row:1 !important;grid-column:4 !important;width:24px !important;height:24px !important;opacity:0.4 !important}
  /* Pair wrap: bottom-left, spans 2 cols */
  #s8 .mc-pair-wrap{grid-row:2 !important;grid-column:1 / 3 !important;min-width:0 !important;overflow:hidden !important}
  #s8 .mc-pair-top{flex-wrap:nowrap !important;min-width:0 !important;overflow:hidden !important}
  #s8 .mc-pair{font-size:13px !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;font-weight:900 !important}
  #s8 .mc-pair-dir{font-size:7px !important;margin-top:2px !important}
  /* Trade ID inside pair-wrap: subtle, truncated */
  #s8 .mc-tid{max-width:70px !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;font-size:7px !important;color:rgba(180,200,230,0.25) !important}
  /* PnL: bottom-right */
  #s8 .mc-pnl-wrap{grid-row:2 !important;grid-column:3 / 5 !important;flex-shrink:0 !important;justify-self:end !important;display:flex !important;align-items:baseline !important;gap:3px !important}
  #s8 .mc-pnl{font-size:13px !important;flex-shrink:0 !important;font-weight:900 !important}
  #s8 .mc-pnl-arrow{font-size:10px !important}
  /* Hide spacer on mobile */
  #s8 .mc-spacer{display:none !important}

  /* ── Row 2: conditions — compact single line ── */
  #s8 .mc-row2{padding:4px 10px 6px 10px !important;overflow:hidden !important;max-width:100% !important;box-sizing:border-box !important;gap:4px !important}
  #s8 .mc-dots{gap:2px !important}
  #s8 .mc-dot{width:5px !important;height:5px !important}
  #s8 .mc-cond-preview{font-size:8px !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;color:rgba(200,215,240,0.6) !important;min-width:0 !important;flex:1 !important}
  #s8 .mc-cond-val{font-size:8px !important;flex-shrink:0 !important}
  #s8 .mc-sparkline{display:none !important}
  /* Progress bar: thinner but visible */
  #s8 .mc-prog-track{width:36px !important}
  #s8 .mc-prog-pct{font-size:7px !important;min-width:20px !important}

  /* ── Row 3: meta — wrapping layout ── */
  #s8 .mc-row3{
    padding:5px 10px 8px 10px !important;
    display:flex !important;flex-wrap:wrap !important;
    gap:1px 0 !important;
    align-items:center !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  #s8 .mc-meta-item{display:inline-flex !important;align-items:center !important;gap:3px !important;max-width:100% !important;overflow:hidden !important}
  #s8 .mc-meta-lbl{font-size:7px !important;letter-spacing:1px !important;color:rgba(180,200,230,0.4) !important}
  #s8 .mc-meta-val{font-size:8px !important;color:rgba(210,225,250,0.7) !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important}
  #s8 .mc-sep{margin:0 4px !important;color:rgba(109,232,225,0.1) !important;font-size:8px !important}
  /* Condition count badge */
  #s8 .mc-cond-count{font-size:8px !important;color:rgba(79,255,170,0.6) !important}

  /* Pipeline flow: compact on mobile */
  #s8 .mc-pipe-flow{overflow:hidden !important;gap:2px !important}
  #s8 .pf-tok{font-size:7px !important}
  #s8 .pf-arr{font-size:7px !important}

  /* ── Vesting section in detail panel ── */
  #s8 .mt-dp-vest-grid{grid-template-columns:1fr 1fr !important;gap:4px 8px !important}
  #s8 .mt-dp-vest-val{font-size:9px !important}
  #s8 .mt-dp-vest-lbl{font-size:7px !important}

  /* ── Detail panel: P&L box stacks vertically on mobile ── */
  #s8 .mt-dp-pnl-box{padding:20px 16px 16px !important;min-height:auto !important}
  #s8 .mt-dp-pnl-inner{flex-direction:column !important;gap:12px !important;align-items:stretch !important}
  #s8 .mt-dp-pnl-main{text-align:center !important}
  #s8 .mt-dp-pnl{font-size:32px !important}
  #s8 .mt-dp-pnl-side{
    flex-direction:row !important;gap:16px !important;
    border-left:none !important;border-top:1px solid rgba(255,255,255,0.06) !important;
    padding:10px 0 0 !important;text-align:center !important;
    justify-content:center !important;
  }
  #s8 .mt-dp-pnl-stat{align-items:center !important}
  #s8 .mt-dp-receipt{margin:10px 12px 0 !important}

  /* ── Detail panel (overlay) ── */
  #s8 .mt-dp-mob-close{
    display:flex !important;align-items:center;justify-content:center;
    width:40px;height:40px;
    background:linear-gradient(135deg,rgba(10,16,30,0.98),rgba(6,10,20,0.95));
    border:1px solid rgba(109,232,225,0.25);border-top-color:rgba(109,232,225,0.4);border-radius:0;
    cursor:pointer;color:rgba(109,232,225,0.7);transition:all 0.2s;
    flex-shrink:0;position:fixed !important;top:68px;right:16px;z-index:9510;
    box-shadow:0 2px 12px rgba(0,0,0,0.5),inset 0 1px 0 rgba(109,232,225,0.08);
    backdrop-filter:blur(12px);
  }
  #s8 .mt-dp-mob-close:hover,#s8 .mt-dp-mob-close:active{
    border-color:rgba(109,232,225,0.5);color:rgba(109,232,225,1);
    background:rgba(109,232,225,0.1);
    box-shadow:0 0 16px rgba(109,232,225,0.15),inset 0 1px 0 rgba(109,232,225,0.15);
  }
  #s8 .mt-dp-header{padding:68px 14px 14px !important;position:relative !important;background:linear-gradient(180deg,rgba(8,16,32,1) 0%,rgba(4,6,14,0.99) 100%) !important;z-index:1 !important;box-shadow:0 4px 24px rgba(0,0,0,0.4) !important}
  #s8 .mt-dp-breadcrumb{margin-bottom:8px !important;font-size:8px !important}
  #s8 .mt-dp-pair{font-size:18px !important}
  #s8 .mt-dp-sub{font-size:9px !important;color:rgba(255,255,255,0.4) !important}
  #s8 .mt-dp-chain{font-size:8px !important;margin-top:6px !important}
  #s8 .mt-dp-grid{grid-template-columns:1fr 1fr !important}
  #s8 .mt-dp-item{padding:10px 14px !important}
  #s8 .mt-dp-lbl{font-size:8px !important;letter-spacing:1.5px !important;color:rgba(180,200,230,0.5) !important;margin-bottom:4px !important}
  #s8 .mt-dp-val{font-size:13px !important}
  #s8 .mt-dp-sec-title{font-size:8px !important;letter-spacing:2.5px !important}
  #s8 .mt-dp-actions{padding:14px 14px max(20px, env(safe-area-inset-bottom)) !important;flex-wrap:wrap !important;margin-top:auto !important}
  #s8 .mt-dp-btn{min-height:48px !important;padding:12px !important;flex:1 !important;min-width:0 !important;font-size:9px !important}
  /* Conditions: readable on mobile */
  #s8 .mt-dp-cond-text{font-size:10px !important}
  #s8 .mt-dp-cond-badge{font-size:7px !important;padding:3px 8px !important}
  #s8 .mt-dp-pnl-stat-lbl{font-size:7px !important}
  #s8 .mt-dp-pnl-stat-val{font-size:11px !important}

  /* ── Detail panel overlay: ensure content fills screen, footer at bottom ── */
  #s8 .mt-right.mob-open{
    display:flex !important;flex-direction:column !important;
    min-height:100% !important;z-index:9000 !important;
    width:100vw !important;height:100vh !important;height:100dvh !important;
  }
  #s8 .mt-right.mob-open .mt-dp{
    display:flex !important;flex-direction:column !important;
    flex:1 !important;min-height:0 !important;overflow-y:auto !important;overflow-x:hidden !important;
  }

  /* ── Hide "Share Trade Card" button in detail view on mobile ── */
  #s8 .mt-right.mob-open .mt-brag-btn{display:none !important}

  /* ── Pipeline flow diagram: prevent overflow on mobile ── */
  #s8 .dp-flow{flex-wrap:nowrap !important;overflow-x:auto !important;padding:16px 14px 8px !important}
  #s8 .dp-flow-node{flex-shrink:0 !important;min-width:0 !important}
  #s8 .dp-flow-node-pair{font-size:9px !important;white-space:nowrap !important}
  #s8 .pipe2-leg{overflow:hidden !important}
  #s8 .pipe2-leg-hdr{flex-wrap:wrap !important;gap:6px !important}
  #s8 .pipe2-leg-pair{font-size:11px !important;overflow:hidden !important;text-overflow:ellipsis !important}

  /* ── Detail sections: clean spacing to prevent overlaps ── */
  #s8 .mt-dp-section{padding:12px 14px !important}
  #s8 .mt-dp-timeline-wrap{padding:12px 14px !important}
  #s8 .mt-dp-receipt{margin:8px 14px 0 !important;flex-wrap:wrap !important;gap:8px !important}

  /* ── Bulk action buttons: tap targets ── */
  #s8 .mt-sel-all-btn,#s8 .mt-del-all-btn{min-height:36px !important;padding:6px 12px !important}
  #s8 .mt-multisel-bar{padding:8px 12px !important}
  #s8 .mt-ms-action{padding:8px 12px !important;min-height:36px !important}

  /* ── Card delete confirm: tap targets ── */
  #s8 .mt-card-del-yes,#s8 .mt-card-del-no{min-height:40px !important;padding:8px 16px !important}

  /* ── Brag/share button: tap target ── */
  #s8 .mt-brag-btn{min-height:40px !important;padding:8px 16px !important}

  /* ── iOS zoom prevention: inputs ≥16px ── */
  #s8 .mt-dp-cond-edit-input{font-size:16px !important;padding:8px 10px !important}
  #s8 .mt-edit-input{font-size:16px !important;padding:10px 12px !important}
  #s8 .mt-edit-cond-input{font-size:16px !important}
  #s8 .ep-tok-search{font-size:16px !important}

  /* ── Edit mode buttons: tap targets ── */
  #s8 .mt-edit-save-btn,#s8 .mt-edit-discard-btn{min-height:44px !important;padding:12px !important}
  #s8 .mt-edit-dir-btn{min-height:40px !important;padding:10px !important}

  /* ── Token picker: full-width ── */
  #s8 .ep-tok-picker{width:calc(100vw - 16px) !important;max-height:90vh !important}
  #s8 .ep-tok-item{min-height:44px !important;padding:10px !important}

  /* ── No-wallet state: full width, bigger presence ── */
  #s8 .mt-nw-wrap{max-width:100%;padding:0 16px}
  #s8 .mt-nw-icon{margin-bottom:24px !important}
  #s8 .mt-nw-icon svg{width:72px !important;height:72px !important}
  #s8 .mt-nw-title{font-size:12px !important;letter-spacing:4px !important;margin-bottom:12px !important}
  #s8 .mt-nw-sub{font-size:9px !important;margin-bottom:32px !important}
  #s8 .mt-nw-connect-btn{width:100%;min-height:48px !important;font-size:8px !important;letter-spacing:2.5px !important;padding:14px 24px !important}
  #s8 .mt-nw-code-row{flex-wrap:wrap;gap:6px}
  #s8 .mt-nw-code-input{flex:1;min-width:0;font-size:16px !important}
  #s8 .mt-nw-code-btn{min-height:44px !important}

  /* ── Hero mini-bar (collapsed) on mobile ── */
  #s8 .mt-hero-mini{padding:8px 12px !important}
  #s8 .mt-hero-mini-pnl{font-size:13px !important}
  #s8 .mt-hero-mini-pct{font-size:8px !important}
  #s8 .mt-hero-mini-stat{font-size:7px !important}
  #s8 .mt-hero.collapsed{max-height:42px !important}

  /* ── Vesting section in detail panel — mobile ── */
  #s8 .mt-dp-vest-grid{grid-template-columns:1fr 1fr !important;gap:4px 8px !important}
  #s8 .mt-dp-vest-val{font-size:9px !important}
  #s8 .mt-dp-vest-lbl{font-size:7px !important}
}

/* ═══ SMALL PHONE: ≤428px ═══ */
@media(max-width:428px){
  #s8 .mt-hero{padding:10px 10px 8px !important}
  #s8 .mt-pnl-big{font-size:24px !important}
  #s8 .mt-hero-stat{padding:3px 0 !important}
  #s8 .mt-hero-stat-val{font-size:9px !important}
  #s8 .mt-hero-stat-lbl{font-size:7px !important}
  #s8 .mt-hf{min-height:40px !important}
  #s8 .mt-fb{min-height:40px !important}
  #s8 .mt-sort-btn{min-height:40px !important}
  #s8 .mt-dp-btn{min-height:48px !important}
  #s8 .mt-card-del-yes,#s8 .mt-card-del-no{min-height:44px !important}

  /* Hero mini-bar: tighter at 428 */
  #s8 .mt-hero-mini{padding:6px 8px !important}
  #s8 .mt-hero-mini-pnl{font-size:12px !important}
  #s8 .mt-hero-mini-pct{font-size:7px !important}
  #s8 .mt-hero.collapsed{max-height:38px !important}

  /* Filters: smaller at 428 */
  #s8 .mt-fb{font-size:7px !important;padding:4px 6px !important;min-height:28px !important}
  #s8 .mt-sort-btn{font-size:7px !important;padding:4px 6px !important;min-height:28px !important}

  /* Cards: edge-to-edge, zero side padding */
  #s8 .mt-list{padding:4px 4px 80px 4px !important;gap:5px !important}

  /* Grid row1: tighter */
  #s8 .mc-row1{padding:8px 10px 4px 10px !important;column-gap:6px !important;row-gap:5px !important}
  #s8 .mc-pair{font-size:13px !important}
  #s8 .mc-pnl{font-size:13px !important}
  #s8 .mc-row2{padding:2px 10px 5px 10px !important}
  #s8 .mc-row3{padding:5px 10px 8px 10px !important}

  /* Badges row: tighter */
  #s8 .mt-badges-row{gap:4px !important;padding:0 6px !important}

  /* Brag card: tighter */
  #s8 .mt-brag-card{width:calc(100vw - 20px) !important}
  #s8 .mt-brag-inner{padding:18px 14px 18px !important}
  #s8 .mt-brag-earn-val{font-size:30px !important}

  /* Detail grid: single column on small phones */
  #s8 .mt-dp-grid{grid-template-columns:1fr !important}
  #s8 .mt-dp-item{border-right:none !important}
}

/* ═══ VERY SMALL PHONE: ≤375px (iPhone SE) ═══ */
@media(max-width:375px){
  #s8 .mt-list{padding:2px 2px 80px 2px !important;gap:4px !important}
  #s8 .mt-hero{padding:8px 8px 6px !important}
  #s8 .mt-pnl-big{font-size:22px !important}
  #s8 .mt-hero-top{gap:6px !important;margin-bottom:6px !important}
  #s8 .mt-hero-tag{font-size:7px !important;letter-spacing:2px !important}

  /* Hero stats: 4-col but tighter */
  #s8 .mt-hero-side{gap:1px 6px !important}
  #s8 .mt-hero-stat-val{font-size:8px !important;white-space:nowrap}
  #s8 .mt-hero-stat-lbl{font-size:7px !important;letter-spacing:0.8px !important;white-space:nowrap}

  /* Badges row: tightest */
  #s8 .mt-badges-row{gap:4px !important;padding:0 4px !important}
  #s8 .mt-streak-badge{padding:2px 5px 2px 4px !important}
  #s8 .streak-num{font-size:10px !important}
  #s8 .streak-lbl{font-size:7px !important}
  #s8 .mt-top-pct-badge{padding:2px 5px !important}

  /* Brag card: tightest */
  #s8 .mt-brag-card{width:calc(100vw - 16px) !important}
  #s8 .mt-brag-inner{padding:16px 12px 16px !important}
  #s8 .mt-brag-earn-val{font-size:28px !important}
  #s8 .mt-brag-stat-val{font-size:12px !important}
  #s8 .mt-brag-stat{padding:10px 4px !important}

  /* Card grid row1: tightest but readable */
  #s8 .mc-row1{padding:7px 8px 3px 8px !important;column-gap:5px !important;row-gap:4px !important}
  #s8 .mc-pair{font-size:12px !important}
  #s8 .mc-pnl{font-size:12px !important}
  #s8 .mc-row2{padding:2px 8px 4px 8px !important}
  #s8 .mc-cond-preview{font-size:8px !important}
  #s8 .mc-row3{padding:4px 8px 7px 8px !important}
  #s8 .mc-meta-lbl{font-size:7px !important}
  #s8 .mc-meta-val{font-size:8px !important}
  #s8 .mc-sep{margin:0 3px !important}
  #s8 .mt-type-badge{font-size:7px !important;padding:2px 5px !important;letter-spacing:1px !important}
  #s8 .mt-status{font-size:7px !important;padding:2px 5px !important}

  /* Hide progress bar on tiny screens to save space */
  #s8 .mc-prog-wrap{display:none !important}

  /* Detail panel: still readable on small phones */
  #s8 .mt-dp-header{padding:10px 12px 10px !important}
  #s8 .mt-dp-pair{font-size:16px !important}
  #s8 .mt-dp-val{font-size:12px !important}
  #s8 .mt-dp-lbl{font-size:7px !important}
  #s8 .mt-dp-section{padding:10px 12px !important}
  #s8 .mt-dp-actions{padding:10px 12px !important;gap:6px !important}
  #s8 .mt-dp-btn{min-height:44px !important;font-size:8px !important}

  /* Hero mini-bar: tightest */
  #s8 .mt-hero-mini{padding:5px 6px !important;gap:4px !important}
  #s8 .mt-hero-mini-pnl{font-size:11px !important}
  #s8 .mt-hero-mini-pct{font-size:7px !important}
  #s8 .mt-hero-mini-stat{display:none !important}
  #s8 .mt-hero-mini-sep{display:none !important}
  #s8 .mt-hero.collapsed{max-height:36px !important}
  /* Filters: smallest */
  #s8 .mt-fb{font-size:7px !important;padding:3px 5px !important;min-height:26px !important;letter-spacing:0.8px !important}
  #s8 .mt-sort-btn{font-size:7px !important;padding:3px 5px !important;min-height:26px !important}
  #s8 .mt-filter-row{gap:3px !important}
  /* Pair name: truncation on tiny screens */
  #s8 .mc-pair{font-size:11px !important;max-width:130px !important}
  #s8 .mc-pnl{font-size:11px !important}
  /* Meta: tighter */
  #s8 .mc-row3{gap:0 !important;padding:4px 8px 6px 8px !important}
  #s8 .mc-meta-lbl{font-size:7px !important}
  #s8 .mc-meta-val{font-size:7px !important}
  #s8 .mc-sep{margin:0 2px !important}

  /* No-wallet state */
  #s8 .mt-nw-icon svg{width:64px !important;height:64px !important}
  #s8 .mt-nw-title{font-size:11px !important;letter-spacing:3.5px !important}
  #s8 .mt-nw-sub{font-size:8px !important}
}

/* ══ Trade card info clarity (July 2026) ══ */

/* Approx USD value shown next to token size in the detail panel */
#s8 .mt-dp-size-usd{font-size:9px;color:rgba(180,200,230,0.45);font-weight:400;letter-spacing:0.3px}

/* The pair name must never truncate on desktop — it's the card's primary
   identity. The TID badge yields space instead (it's repeated in the detail). */
@media (min-width:769px){
  #s8 .mc-pair{flex-shrink:0;max-width:100%}
  #s8 .mc-tid{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ══ Trade card caption + live progress + execution celebration (Aug 2026) ══ */

/* One-sentence caption: "Sell 0.01 SOL → USDC when SOL > $1" */
#s8 .mc-caption{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:0.4px;line-height:1.5;color:rgba(180,200,230,0.6);padding:0 18px 7px;position:relative;z-index:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:768px){#s8 .mc-caption{padding:0 14px 6px;white-space:normal}}

/* Monitoring progress bar: smooth width changes + a subtle travelling sheen.
   min-width keeps a visible sliver of life even at 0 conditions met. */
#s8 .mc-prog-fill{transition:width 0.6s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
#s8 .mc-prog-fill.live{min-width:5px}
#s8 .mc-prog-fill.live::after{content:'';position:absolute;top:0;left:0;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);transform:translateX(-150%);animation:mcProgSheen 2.4s ease-in-out infinite}
@keyframes mcProgSheen{0%{transform:translateX(-150%)}100%{transform:translateX(320%)}}

/* Execution celebration: green burst + slight grow, then settle */
#s8 .mt-card.mc-celebrate{animation:mcCelebrate 1.9s cubic-bezier(.22,1,.36,1)}
#s8 .mt-card.mc-celebrate .mc-prog-fill{background:#4FFFAA !important;box-shadow:0 0 12px rgba(79,255,170,0.8)}
@keyframes mcCelebrate{
  0%{transform:scale(1);box-shadow:0 0 0 rgba(79,255,170,0)}
  12%{transform:scale(1.018);box-shadow:0 0 0 2px rgba(79,255,170,0.55),0 0 34px rgba(79,255,170,0.4),inset 0 0 22px rgba(79,255,170,0.12)}
  32%{transform:scale(1.005);box-shadow:0 0 0 1px rgba(79,255,170,0.4),0 0 24px rgba(79,255,170,0.3),inset 0 0 16px rgba(79,255,170,0.09)}
  58%{transform:scale(1.011);box-shadow:0 0 0 1px rgba(79,255,170,0.3),0 0 18px rgba(79,255,170,0.22),inset 0 0 12px rgba(79,255,170,0.06)}
  100%{transform:scale(1);box-shadow:0 0 0 rgba(79,255,170,0)}
}
@media (prefers-reduced-motion:reduce){
  #s8 .mt-card.mc-celebrate{animation:none}
  #s8 .mc-prog-fill.live::after{animation:none;content:none}
  #s8 .mc-prog-fill{transition:none}
}

/* ══ Delete-all confirm emphasis (Aug 2026) ══
   Dim the list behind the slide-up confirm bar so the "are you sure"
   warning is unmissable; the bar (z-index 51) stays above the dim. */
#s8 .mt-left.delall-confirming::after{content:'';position:absolute;inset:0;background:rgba(3,5,12,0.6);backdrop-filter:blur(1.5px);z-index:50;pointer-events:none;animation:delallDimIn 0.25s ease}
@keyframes delallDimIn{from{opacity:0}to{opacity:1}}
#s8 .mt-delall-confirm.show{box-shadow:0 -8px 32px rgba(229,80,80,0.18),0 0 0 1px rgba(229,80,80,0.12)}

/* ══ DELETE ALL confirm — centered fixed modal (Aug 2026) ══
   The element is relocated to <body> at show-time (it was invisible as an
   absolute bar at the bottom of the clipped list column). Unprefixed
   selectors on purpose: once on <body>, no #s8-prefixed rule matches it —
   including the legacy bar geometry, which this fully replaces. */
.mt-delall-confirm{position:fixed;left:50%;top:50%;right:auto;bottom:auto;z-index:100000;width:min(460px,calc(100vw - 40px));background:linear-gradient(160deg,rgba(14,4,8,0.99),rgba(10,3,6,0.99));border:1px solid rgba(229,80,80,0.35);border-top-color:rgba(229,80,80,0.55);border-radius:0;padding:16px 18px;display:flex;align-items:center;gap:12px;transform:translate(-50%,-46%) scale(0.97);opacity:0;pointer-events:none;transition:all 0.28s cubic-bezier(.16,1,.3,1)}
.mt-delall-confirm.show{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all;box-shadow:0 0 0 100vmax rgba(3,5,12,0.68),0 24px 80px rgba(0,0,0,0.85),0 0 40px rgba(229,80,80,0.15)}
.mt-delall-confirm::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(229,80,80,0.5),transparent)}
.mt-delall-confirm .mt-delall-confirm-text{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:1.6px;color:rgba(229,80,80,0.92);flex:1}
.mt-delall-confirm .mt-delall-confirm-text small{display:block;font-family:'IBM Plex Mono',monospace;font-size:8.5px;color:rgba(255,255,255,0.42);letter-spacing:0.5px;margin-top:4px;text-transform:none}
.mt-delall-confirm .mt-card-del-yes{font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:1.5px;padding:9px 16px;background:rgba(229,80,80,0.12);border:1px solid rgba(229,80,80,0.4);color:rgba(229,80,80,0.95);cursor:pointer;border-radius:4px;transition:all 0.15s;white-space:nowrap}
.mt-delall-confirm .mt-card-del-yes:hover{background:rgba(229,80,80,0.24);box-shadow:0 0 18px rgba(229,80,80,0.2)}
.mt-delall-confirm .mt-card-del-no{font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:1.5px;padding:9px 14px;background:transparent;border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.45);cursor:pointer;border-radius:4px;transition:all 0.15s;white-space:nowrap}
.mt-delall-confirm .mt-card-del-no:hover{border-color:rgba(255,255,255,0.25);color:rgba(255,255,255,0.75)}
@media (max-width:520px){.mt-delall-confirm{flex-direction:column;align-items:stretch;text-align:center}.mt-delall-confirm .mt-card-del-yes,.mt-delall-confirm .mt-card-del-no{min-height:44px}}

/* ══ Card timestamp chip (Aug 2026) — sits beside the TID for at-a-glance
   trade IDing; relative text live-updates, hover shows the absolute time ══ */
#s8 .mc-time-top{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.8px;color:rgba(180,200,230,0.5);white-space:nowrap;flex-shrink:0;padding:2px 6px;border:1px solid rgba(255,255,255,0.07);background:rgba(255,255,255,0.02)}
#s8 .mc-time-top .mc-tt-clock{color:rgba(109,232,225,0.65)}
#s8 .mc-time-top .mc-tt-sep{margin:0 4px;color:rgba(255,255,255,0.2)}

/* ══ AUTO / SIGN-ON-TRIGGER chip + failed status (Aug 2026) ══ */
#s8 .mc-arm{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:1.2px;padding:3px 7px;white-space:nowrap;flex-shrink:0;border-radius:4px}
#s8 .mc-arm.auto{color:rgba(79,255,170,0.9);background:rgba(79,255,170,0.06);border:1px solid rgba(79,255,170,0.3);text-shadow:0 0 8px rgba(79,255,170,0.4)}
#s8 .mc-arm.manual{color:rgba(255,215,0,0.75);background:rgba(255,215,0,0.04);border:1px solid rgba(255,215,0,0.22)}
#s8 .mt-status.failed{background:rgba(229,80,80,0.06);border:1px solid rgba(229,80,80,0.3);color:rgba(229,80,80,0.85)}
.mt-status.failed{background:rgba(229,80,80,0.06);border:1px solid rgba(229,80,80,0.3);color:rgba(229,80,80,0.85)}

/* ═══ S8 detail panel — clear the fixed footer (audit fix H3) ═══
   .dex-foot is position:fixed (32px at 375, 40px at 768) with z-index:200, and
   the detail panel's 60px bottom pad wasn't enough: measured at 375x812 it
   covered STATUS / "MONITORING · SIGN ON TRIGGER" / FEE / "on execution", and
   at 768 it covered the gas-balance warning. Live trade state must never sit
   under the footer. S2 already reserves space this way for its EXECUTE bar. */
@media(max-width:768px){
  #s8 .mt-dp{padding-bottom:104px}
}
@media(max-width:480px){
  #s8 .mt-dp{padding-bottom:96px}
}

/* ── The pull-tab: free-form resize for the performance header. ── */
.mt-pull-tab{display:flex;align-items:center;justify-content:center;height:14px;cursor:ns-resize;position:relative;z-index:4;flex-shrink:0;border-bottom:1px solid rgba(109,232,225,0.04);user-select:none;touch-action:none}
.mt-pull-grip{width:44px;height:3px;border-radius:2px;background:rgba(109,232,225,0.18);transition:background 0.15s,width 0.15s;pointer-events:none}
.mt-pull-tab:hover .mt-pull-grip,.mt-pull-tab.dragging .mt-pull-grip{background:rgba(109,232,225,0.55);width:64px}
/* While dragging, the hero must follow the pointer instantly — the collapse
   transition would smear every frame into the next. */
#s8 .mt-hero.mt-resizing{transition:none !important}

/* Sub-400 phones: the WINS · LOSSES hero value ("0W · 0L") ran 11px past its
   cell's clip edge. A font step alone only shaves a few px, so the cell also
   WRAPS: a value that cannot share the row drops to its own line, still
   right-aligned — contained at any width by construction. */
@media (max-width: 400px){
  #s8 .mt-hero-stat{flex-wrap:wrap}
  #s8 .mt-hero-stat-val{font-size:10px;margin-left:auto}
}