/* ═══════════════════════════════════
   S2 PRO MODE — CHART + SWAP LAYOUT
═══════════════════════════════════ */

/* Pro toggle pill button — left side of footer */
/* Pro toggle — skeuomorphic hardware switch */
@keyframes ptKnobSlideOn  { 0%{transform:translateX(0)}  60%{transform:translateX(30px)} 80%{transform:translateX(26px)} 100%{transform:translateX(27px)} }
@keyframes ptKnobSlideOff { 0%{transform:translateX(27px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(2px)} 100%{transform:translateX(0)} }
@keyframes ptRipple       { 0%{transform:scale(0.5);opacity:0.6} 100%{transform:scale(3);opacity:0} }

/* Outer housing — embossed steel panel */
#pro-toggle-wrap {
  position:absolute; left:8px; bottom:calc(100% + 8px);
  padding:0;
  border-radius:12px;
  background:transparent;
  border:none;
  box-shadow:none;
  isolation:isolate;
}

/* Slim pill track */
#pro-toggle {
  display:flex; align-items:center;
  width:46px; height:20px;
  border-radius:10px; position:relative; overflow:hidden; cursor:pointer;
  background:rgba(6,8,16,0.95);
  border:1px solid rgba(109,232,225,0.12);
  box-shadow:0 2px 6px rgba(0,0,0,0.7) inset;
  font-family:'IBM Plex Mono',monospace; font-size:7px; letter-spacing:1.5px;
  transition:border-color 0.3s, box-shadow 0.3s;
}
/* Illuminated blue outline when PRO */
#pro-toggle.pro-on {
  border-color:rgba(109,232,225,0.7);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.7) inset,
    0 0 8px rgba(109,232,225,0.35),
    0 0 16px rgba(109,232,225,0.15);
}

/* Track flood colour (cyan when PRO) */
#pt-track-fill {
  position:absolute; inset:0; border-radius:10px;
  background:linear-gradient(90deg, rgba(109,232,225,0.14) 0%, rgba(79,200,190,0.07) 100%);
  opacity:0; transition:opacity 0.25s ease;
  pointer-events:none;
}
#pro-toggle.pro-on #pt-track-fill { opacity:1; }

/* Track label */
#pt-label {
  position:absolute; right:5px; left:auto; text-align:right;
  font-family:'IBM Plex Mono',monospace; font-size:7px; letter-spacing:1px;
  color:rgba(180,190,210,0.4); text-transform:uppercase;
  transition:color 0.25s, text-shadow 0.25s, left 0.25s, right 0.25s, text-align 0.25s;
  user-select:none; pointer-events:none; z-index:1;
}
#pro-toggle.pro-on #pt-label {
  right:auto; left:5px; text-align:left;
  color:rgba(109,232,225,0.9);
  text-shadow:0 0 6px rgba(109,232,225,0.6);
}

/* Slim knob */
#pt-knob {
  position:absolute; left:2px; top:2px;
  width:15px; height:15px; border-radius:50%;
  z-index:2; flex-shrink:0;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.5) 0%, transparent 45%),
    conic-gradient(
      rgba(180,185,200,1) 0deg,
      rgba(120,125,140,1) 90deg,
      rgba(200,205,215,1) 180deg,
      rgba(130,135,148,1) 270deg,
      rgba(180,185,200,1) 360deg
    );
  border:1px solid rgba(50,55,70,0.9);
  box-shadow:
    0 1px 4px rgba(0,0,0,0.8),
    0 0 0 1px rgba(255,255,255,0.1) inset;
  transition:box-shadow 0.15s;
}
#pt-knob::before {
  content:''; position:absolute; top:50%; left:50%;
  width:3px; height:3px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(40,43,55,1);
  border:1px solid rgba(0,0,0,0.5);
}
#pt-knob::after {
  content:''; position:absolute; top:3px; left:3px; right:3px; bottom:3px;
  border-radius:50%; border:1px solid rgba(0,0,0,0.25);
  pointer-events:none;
}
#pt-knob.pressed { transform:scale(0.92); }
#pt-knob.slide-on  { animation:ptKnobSlideOn  0.28s cubic-bezier(0.34,1.4,0.64,1) forwards; }
#pt-knob.slide-off { animation:ptKnobSlideOff 0.28s cubic-bezier(0.34,1.4,0.64,1) forwards; }

/* LED — hidden */
#pt-led { display:none; }
#pt-led.on { display:none; }

/* Ripple */
#pt-ripple-wrap { position:absolute; inset:0; pointer-events:none; overflow:visible; z-index:0; }
.pt-ripple {
  position:absolute; top:50%; left:50%;
  width:22px; height:22px; margin:-11px 0 0 -11px;
  border-radius:50%; border:1px solid rgba(109,232,225,0.5);
  animation:ptRipple 0.5s ease-out forwards; pointer-events:none;
}

/* Pro mode layout override */
#s2.pro-mode .dex-main { display:none !important; }
#s2.pro-mode .ticker-bar { display:none !important; }
#s2 .pro-layout { display:none; }
#s2.pro-mode .pro-layout {
  display:flex !important; flex:1; min-height:0;
  gap:0; overflow:hidden; padding-bottom:40px;
}
/* Kill the dex-bar glow in pro mode — inherits global clean style */

/* Left — chart panel */
.pro-chart-panel {
  flex:1; min-width:0; display:flex; flex-direction:column;
  background:#030610; position:relative; overflow:hidden;
}

/* Chart search bar */
.pro-search-bar {
  display:flex; align-items:center; gap:8px;
  padding:5px 12px; border-bottom:1px solid rgba(109,232,225,0.04);
  background:rgba(5,8,18,0.98); flex-shrink:0; position:relative; z-index:3;
}
.pro-search-input-wrap {
  display:flex; align-items:center; gap:8px; flex:1;
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
  border-radius:4px; padding:0 10px; height:26px;
  transition:border-color .15s;
}
.pro-search-input-wrap:focus-within {
  border-color:rgba(109,232,225,0.25);
}
.pro-search-input-wrap svg { flex-shrink:0; color:rgba(255,255,255,0.18); width:12px; height:12px; }
#pro-search-input {
  flex:1; background:transparent; border:none; outline:none;
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  color:rgba(255,255,255,0.88); letter-spacing:0.5px;
}
#pro-search-input::placeholder { color:rgba(255,255,255,0.35); }
.pro-search-results {
  position:absolute; top:calc(100% + 4px); left:16px; right:16px;
  background:rgba(4,8,20,0.98); border:1px solid rgba(109,232,225,0.18);
  border-radius:0; overflow:hidden; z-index:999;
  box-shadow:0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(109,232,225,0.05);
  display:none; max-height:260px; overflow-y:auto;
}
.pro-search-results.open { display:block; }
.pro-search-result {
  display:flex; align-items:center; gap:12px; padding:8px 14px;
  cursor:pointer; transition:background .15s;
  border-bottom:1px solid rgba(109,232,225,0.04);
  font-family:'IBM Plex Mono',monospace;
}
.pro-search-result:last-child { border-bottom:none; }
.pro-search-result:hover { background:rgba(109,232,225,0.06); }
.pro-sr-sym { font-size:11px; font-weight:700; color:rgba(109,232,225,0.9); letter-spacing:1px; width:70px; }
.pro-sr-name { font-size:10px; color:rgba(255,255,255,0.35); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pro-sr-chain { font-size:8px; color:rgba(109,232,225,0.4); letter-spacing:1px; }
/* Live price column + the real token mark — parity with the Lite picker. */
.pro-sr-price { font-size:10px; color:rgba(255,255,255,0.7); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pro-search-result img, .pro-search-result .tok-ico-dynamic { width:22px; height:22px; border-radius:50%; flex-shrink:0 }

/* Chart toolbar row — coin info + timeframes + indicators in one line */
.pro-toolbar {
  display:flex; align-items:center; gap:0;
  padding:0; border-bottom:1px solid rgba(109,232,225,0.04);
  background:rgba(5,8,18,0.98); flex-shrink:0; height:30px;
}
.pro-toolbar-section { display:flex; align-items:center; gap:2px; padding:0 12px; height:100%; }
.pro-toolbar-sep { width:1px; height:18px; background:rgba(109,232,225,0.08); flex-shrink:0; }
.pro-tb-pair { font-family:'Orbitron',sans-serif; font-size:11px; font-weight:900; color:rgba(255,255,255,0.9); letter-spacing:0.5px; margin-right:8px; }
.pro-tb-price { font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:rgba(109,232,225,0.9); letter-spacing:0.3px; margin-right:6px; }
.pro-tb-chg { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.5px; padding:2px 6px; border-radius:3px; }
.pro-tb-chg.up { color:rgba(79,255,170,0.9); background:rgba(79,255,170,0.1); }
.pro-tb-chg.dn { color:rgba(255,90,90,0.9); background:rgba(255,90,90,0.1); }

/* Timeframe tabs */
.pro-chart-tab {
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1px;
  color:rgba(255,255,255,0.38); padding:3px 7px; border-radius:3px;
  cursor:pointer; transition:all .15s; text-transform:uppercase; user-select:none;
}
.pro-chart-tab:hover { color:rgba(255,255,255,0.5); background:rgba(255,255,255,0.03); }
.pro-chart-tab.active { color:rgba(109,232,225,0.9); background:rgba(109,232,225,0.1); }
.pro-chart-tab-sep { width:1px; height:12px; background:rgba(109,232,225,0.07); margin:0 2px; }

/* Indicator toolbar - just a + button to open search */
.pro-ind-add { font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:1.5px; color:rgba(109,232,225,0.5); padding:3px 10px; cursor:pointer; transition:all .2s; border:1px dashed rgba(109,232,225,0.2); background:none; text-transform:uppercase; border-radius:3px; }
.pro-ind-add:hover { color:rgba(109,232,225,0.9); border-color:rgba(109,232,225,0.4); background:rgba(109,232,225,0.05); }
/* Active indicator pills */
.pro-ind-active { display:flex; align-items:center; gap:3px; }
.pro-ind-pill { font-family:'IBM Plex Mono',monospace; font-size:7px; letter-spacing:1px; color:rgba(109,232,225,0.8); background:rgba(109,232,225,0.06); border:1px solid rgba(109,232,225,0.18); padding:2px 7px; display:flex; align-items:center; gap:5px; border-radius:2px; }
.pro-ind-pill-x { cursor:pointer; color:rgba(255,255,255,0.3); font-size:9px; transition:color .15s; }
.pro-ind-pill-x:hover { color:rgba(255,90,90,0.9); }

/* Indicator search overlay */
.pro-ind-overlay { position:absolute; inset:0; z-index:50; background:rgba(2,4,12,0.85); backdrop-filter:blur(10px); display:none; flex-direction:column; align-items:center; padding-top:60px; }
.pro-ind-overlay.open { display:flex; }
.pro-ind-search-box { width:380px; max-width:calc(100% - 40px); background:rgba(10,14,28,0.98); border:1px solid rgba(109,232,225,0.25); border-radius:0; overflow:hidden; box-shadow:0 24px 64px rgba(0,0,0,0.7), 0 0 40px rgba(109,232,225,0.05); }
.pro-ind-search-box::before { content:''; display:block; height:1.5px; background:linear-gradient(90deg,transparent,rgba(109,232,225,0.5),rgba(255,255,255,0.15),rgba(109,232,225,0.5),transparent); }
.pro-ind-search-head { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid rgba(109,232,225,0.08); }
.pro-ind-search-head input { flex:1; background:none; border:none; outline:none; font-family:'IBM Plex Mono',monospace; font-size:13px; color:rgba(255,255,255,0.9); letter-spacing:0.3px; }
.pro-ind-search-head input::placeholder { color:rgba(255,255,255,0.35); }
.pro-ind-search-head kbd { font-family:'IBM Plex Mono',monospace; font-size:7px; color:rgba(255,255,255,0.3); border:1px solid rgba(255,255,255,0.08); padding:1px 5px; border-radius:2px; }
.pro-ind-list { max-height:280px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(109,232,225,0.1) transparent; }
.pro-ind-item { display:flex; align-items:center; gap:14px; padding:10px 16px; cursor:pointer; transition:background .15s; border-bottom:1px solid rgba(255,255,255,0.02); }
.pro-ind-item:hover { background:rgba(109,232,225,0.06); }
.pro-ind-item-name { font-family:'Space Grotesk',sans-serif; font-size:13px; color:rgba(255,255,255,0.75); flex:1; }
.pro-ind-item-short { font-family:'IBM Plex Mono',monospace; font-size:9px; color:rgba(109,232,225,0.6); letter-spacing:1px; min-width:50px; }
.pro-ind-item.active { background:rgba(79,255,170,0.06); }
.pro-ind-item.active .pro-ind-item-short { color:rgba(79,255,170,0.9); }
.pro-ind-item.active::after { content:'✓'; color:rgba(79,255,170,0.6); font-size:11px; flex-shrink:0; }
.pro-ind-cat-hdr { font-family:'IBM Plex Mono',monospace; font-size:7px; letter-spacing:2px; color:rgba(109,232,225,0.3); padding:8px 14px 4px; text-transform:uppercase; background:rgba(109,232,225,0.015); border-bottom:1px solid rgba(109,232,225,0.03); position:sticky; top:0; z-index:1; }

/* Chart canvas container */
.pro-chart-wrap { flex:1; min-height:0; position:relative; overflow:hidden; background:#030610; }
.pro-chart-wrap canvas { display:block; width:100%; height:100%; }
/* Ambient glow — very subtle light source at bottom-centre */
.pro-chart-wrap::after { content:''; position:absolute; bottom:-40px; left:50%; width:600px; height:200px; transform:translateX(-50%); background:radial-gradient(ellipse, rgba(109,232,225,0.025) 0%, rgba(109,232,225,0.008) 40%, transparent 70%); pointer-events:none; z-index:1; animation:proAmbientPulse 8s ease-in-out infinite; }
@keyframes proAmbientPulse { 0%,100%{opacity:0.6;transform:translateX(-50%) scale(1)} 50%{opacity:1;transform:translateX(-50%) scale(1.05)} }
/* Drag cursor when hovering a price line */
.pro-chart-wrap.drag-active { cursor:ns-resize !important; }
.pro-chart-wrap.drag-hover { cursor:grab; }

/* ═══ CINEMATIC PRO TRANSITION ═══ */
@keyframes proChartExpand { 0%{opacity:0;transform:translateX(-30px);filter:blur(6px)} 60%{opacity:1;filter:blur(1px)} 100%{transform:translateX(0);filter:none} }
@keyframes proSwapSlide { 0%{opacity:0;transform:translateX(40px)} 60%{opacity:1} 100%{transform:translateX(0)} }
@keyframes proScanFlash { 0%{top:-2px;opacity:0} 10%{opacity:1} 100%{top:100%;opacity:0} }
@keyframes proToolbarReveal { 0%{opacity:0;transform:translateY(-8px)} 100%{opacity:1;transform:translateY(0)} }
#s2.pro-mode.pro-entering .pro-chart-panel { animation:proChartExpand 0.55s cubic-bezier(.16,1,.3,1) forwards; }
#s2.pro-mode.pro-entering .pro-swap-panel { animation:proSwapSlide 0.5s cubic-bezier(.16,1,.3,1) 0.08s both; }
#s2.pro-mode.pro-entering .pro-toolbar { animation:proToolbarReveal 0.4s cubic-bezier(.16,1,.3,1) 0.12s both; }
#s2.pro-mode.pro-entering .pro-search-bar { animation:proToolbarReveal 0.4s cubic-bezier(.16,1,.3,1) 0.06s both; }
/* Scan flash line during transition */
.pro-scan-flash { position:absolute; left:0; right:0; height:2px; top:-2px; background:linear-gradient(90deg, transparent 5%, rgba(109,232,225,0.6) 30%, rgba(255,255,255,0.9) 50%, rgba(109,232,225,0.6) 70%, transparent 95%); pointer-events:none; z-index:100; opacity:0; animation:proScanFlash 0.6s ease-out forwards; box-shadow:0 0 20px rgba(109,232,225,0.5), 0 0 60px rgba(109,232,225,0.2); }

/* Condition lines legend (floating) */
.pro-cond-lines { position:absolute; top:8px; right:70px; z-index:5; display:flex; flex-direction:column; gap:3px; pointer-events:none; }
.pro-cond-line-tag { font-family:'IBM Plex Mono',monospace; font-size:7px; letter-spacing:1px; color:rgba(109,232,225,0.7); background:rgba(4,6,14,0.85); border:1px solid rgba(109,232,225,0.2); padding:2px 8px; backdrop-filter:blur(4px); display:flex; align-items:center; gap:6px; }
.pro-cond-line-dot { width:4px; height:4px; border-radius:50%; background:rgba(109,232,225,0.8); box-shadow:0 0 6px rgba(109,232,225,0.5); }

/* Right — swap panel in pro mode */
.pro-swap-panel {
  width:340px; max-width:340px; flex-shrink:0; display:flex; flex-direction:column;
  background:rgba(8,12,24,0.98); overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:rgba(109,232,225,0.06) transparent;
  position:relative; border-left:1px solid rgba(109,232,225,0.08);
  box-sizing:border-box; padding:6px 10px 80px 8px;
}
.pro-swap-panel::-webkit-scrollbar { width:2px; }
.pro-swap-panel::-webkit-scrollbar-thumb { background:rgba(109,232,225,0.1); }
.pro-swap-panel * { box-sizing:border-box; max-width:100%; }
.pro-swap-inner {
  display:flex; flex-direction:column; padding:0;
}
/* Hide chart price link in pro — irrelevant when charting different tokens */
.pro-swap-panel .pro-price-link { display:none !important; }
/* Swap card: strip all decoration, fit in panel */
.pro-swap-panel .swap-card {
  width:100% !important; max-width:100% !important;
  border-radius:0 !important; height:auto !important; max-height:none !important;
  animation:none !important; border:none !important; box-shadow:none !important;
  background:transparent !important; overflow:hidden !important;
}
.pro-swap-panel .swap-card::before, .pro-swap-panel .swap-card::after { display:none !important; }
.pro-swap-panel .swap-card .sc-inner { max-height:none !important; overflow:visible !important; padding:0 4px !important; gap:3px !important; }
.pro-swap-panel .swap-types { margin:0 0 4px !important; }
.pro-swap-panel .swap-types .st { padding:5px 6px !important; }
.pro-swap-panel .swap-types .st-label { font-size:8px !important; }
.pro-swap-panel .swap-types .st-sub { font-size:7px !important; }
.pro-swap-panel .exec-wrap { position:relative !important; padding:0 4px 6px !important; }
.pro-swap-panel .tok-box { padding:6px 6px !important; }
.pro-swap-panel .tb-label { font-size:8px !important; }
.pro-swap-panel .tb-main { gap:4px !important; }
.pro-swap-panel .tok-sel { padding:4px 6px !important; gap:4px !important; }
.pro-swap-panel .tok-name { font-size:13px !important; }
.pro-swap-panel .tok-ico-dynamic { width:20px !important; height:20px !important; }
.pro-swap-panel .tok-ico-dynamic img { width:20px !important; height:20px !important; }
.pro-swap-panel .amt-input { font-size:18px !important; min-width:0 !important; width:100% !important; }
/* Wallet strips: force single line */
.pro-swap-panel .wallet-strip { padding:3px 6px !important; gap:4px !important; flex-wrap:nowrap !important; }
.pro-swap-panel .ws-label { font-size:7px !important; letter-spacing:1.5px !important; flex-shrink:0 !important; }
.pro-swap-panel .ws-options { display:flex !important; flex-wrap:nowrap !important; align-items:center !important; gap:4px !important; }
.pro-swap-panel .ws-btn { font-size:7px !important; padding:3px 6px !important; white-space:nowrap !important; }
.pro-swap-panel .ws-or { font-size:7px !important; }
/* Hide sparklines and decorative elements */
.pro-swap-panel .swap-sparkline, .pro-swap-panel .spark-label { display:none !important; }
.pro-swap-panel .swap-card-glow-top, .pro-swap-panel .card-scan-line { display:none !important; }
.pro-swap-panel .scroll-nudge { display:none !important; }
.pro-swap-panel .cond-panel { display:none !important; }
/* Tighter exec area */
.pro-swap-panel .exec-preview { padding:4px 6px !important; }
.pro-swap-panel .ep-item { padding:0 4px !important; }
.pro-swap-panel .ep-lbl { font-size:7px !important; }
.pro-swap-panel .ep-val { font-size:9px !important; }
.pro-swap-panel #exec-btn { padding:10px !important; font-size:10px !important; letter-spacing:2px !important; }
.pro-swap-panel .exec-sub { font-size:7px !important; }
/* Fix overlap: protection, exit leg, receipt — force proper block layout */
.pro-swap-panel .protection-group { margin:2px 0 !important; padding:0 !important; border-top:1px solid rgba(255,255,255,0.03) !important; }
.pro-swap-panel .protection-group-label { font-size:7px !important; padding:4px 6px 2px !important; }
.pro-swap-panel .prot-row { padding:3px 6px !important; margin:0 !important; display:block !important; clear:both !important; border-bottom:1px solid rgba(255,255,255,0.02) !important; }
.pro-swap-panel .prot-header { padding:2px 0 !important; }
.pro-swap-panel .prot-label { font-size:8px !important; }
.pro-swap-panel .prot-hint { font-size:7px !important; }
.pro-swap-panel .prot-panel { padding:4px 0 !important; }
.pro-swap-panel .prot-price-input { font-size:12px !important; padding:4px 6px !important; }
.pro-swap-panel .prot-pct { font-size:7px !important; padding:2px 5px !important; }
.pro-swap-panel .prot-cond-toggle { font-size:7px !important; }
.pro-swap-panel .prot-cond-add { font-size:7px !important; padding:3px 6px !important; }
.pro-swap-panel .leg2-trigger { margin:2px 0 !important; padding:0 !important; display:block !important; clear:both !important; border-top:1px solid rgba(255,255,255,0.03) !important; }
.pro-swap-panel .leg2-trigger-btn { padding:6px 8px !important; }
.pro-swap-panel .leg2-trigger-main { font-size:9px !important; }
.pro-swap-panel .leg2-trigger-sub { font-size:7px !important; }
.pro-swap-panel .leg2-trigger-badge { font-size:7px !important; padding:3px 8px !important; }
.pro-swap-panel .receipt-strip { margin:2px 0 !important; border-top:1px solid rgba(255,255,255,0.03) !important; }
.pro-swap-panel .receipt-header { padding:4px 6px !important; flex-wrap:wrap !important; }
.pro-swap-panel .receipt-protocol-badge { font-size:7px !important; }
.pro-swap-panel .receipt-route { font-size:7px !important; display:block !important; width:100% !important; margin-top:2px !important; }
.pro-swap-panel .receipt-impact { font-size:7px !important; }
.pro-swap-panel .receipt-row { font-size:7px !important; padding:2px 0 !important; }
.pro-swap-panel .venue-row { padding:4px 0 !important; }
.pro-swap-panel .vc { font-size:7px !important; padding:2px 4px !important; }
.pro-swap-panel .trade-receipt { margin:2px 4px !important; font-size:8px !important; }
.pro-swap-panel .trade-receipt .tr-header { padding:4px 8px !important; }
.pro-swap-panel .trade-receipt .tr-title { font-size:7px !important; }
.pro-swap-panel .trade-receipt .tr-action { font-size:9px !important; }
.pro-swap-panel .trade-receipt .tr-market { font-size:7px !important; }
.pro-swap-panel .trade-receipt .tr-conditions-label { font-size:7px !important; }
.pro-swap-panel .trade-receipt .tr-footer-row { font-size:7px !important; }
.pro-swap-panel .swap-mode-badge { display:none !important; }
.pro-swap-panel .exec-wrap { position:relative !important; padding:4px 4px 6px !important; margin-top:2px !important; border-top:1px solid rgba(109,232,225,0.06) !important; }
/* Token boxes subtle styling */
.pro-swap-panel .tok-box { border:1px solid rgba(255,255,255,0.025) !important; background:rgba(255,255,255,0.008) !important; margin:1px 0 !important; }
/* Condition toggle smaller */
.pro-swap-panel .cond-toggle-btn { padding:5px 8px !important; margin:2px 0 !important; border-radius:4px !important; }
.pro-swap-panel .ctb-main { font-size:9px !important; }
.pro-swap-panel .ctb-sub { font-size:7px !important; }
.pro-swap-panel .ctb-badge { font-size:7px !important; padding:3px 7px !important; }
/* Slippage compact */
.pro-swap-panel .slip-btn { font-size:7px !important; padding:2px 5px !important; }
/* Condition modal — position over chart area in pro mode */
#s2.pro-mode .cond-modal-overlay { align-items:flex-start !important; justify-content:flex-start !important; padding:40px 0 0 40px !important; }
#s2.pro-mode .cond-modal { max-width:440px !important; max-height:calc(100vh - 160px) !important; }
#s2.pro-mode .ca-overlay { align-items:flex-start !important; justify-content:flex-start !important; padding:40px 0 0 40px !important; }

/* Pro condition summary - hidden, conditions now handled inline in card */
.pro-swap-panel .pro-cond-summary { display:none !important; }
/* Slippage expand panel - ensure it works in pro mode */
.pro-swap-panel .slip-panel { margin:3px 0 !important; padding:0 !important; border-radius:4px !important; }
.pro-swap-panel .slip-panel-inner { padding:6px 8px !important; gap:5px !important; }
.pro-swap-panel .slip-opt { font-size:8px !important; padding:3px 8px !important; }
.pro-swap-panel .slip-custom-wrap-new { font-size:8px !important; }
.pro-swap-panel .slip-custom-input { font-size:9px !important; padding:2px 4px !important; width:40px !important; }
.pro-swap-panel .slip-desc { font-size:7px !important; }

/* Pro mode logic toggle row */
.pro-logic-row { display:flex; align-items:center; gap:6px; padding:4px 0 6px; flex-wrap:wrap; }
.pro-logic-label { font-family:'IBM Plex Mono',monospace; font-size:6px; letter-spacing:1.5px; color:rgba(255,255,255,0.18); flex-shrink:0; }
.pro-logic-btns { display:flex; gap:3px; flex-wrap:wrap; }
.pro-logic-btn { font-family:'IBM Plex Mono',monospace; font-size:7px; font-weight:600; letter-spacing:0.8px; padding:3px 8px; border:1px solid rgba(109,232,225,0.12); background:transparent; color:rgba(255,255,255,0.3); cursor:pointer; transition:all 0.15s; border-radius:3px; }
.pro-logic-btn:hover { border-color:rgba(109,232,225,0.25); color:rgba(255,255,255,0.5); }
.pro-logic-btn.on { background:rgba(109,232,225,0.08); border-color:rgba(109,232,225,0.35); color:rgba(109,232,225,0.9); text-shadow:0 0 8px rgba(109,232,225,0.3); }
/* Weighted / N-of-N threshold rows */
.pro-weighted-row, .pro-nofn-row { display:flex; align-items:center; gap:5px; padding:3px 0 6px; }
.pro-thresh-label { font-family:'IBM Plex Mono',monospace; font-size:7px; color:rgba(255,255,255,0.25); letter-spacing:0.3px; }
.pro-thresh-input { width:34px; background:rgba(109,232,225,0.06); border:1px solid rgba(109,232,225,0.2); color:rgba(109,232,225,0.9); font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; text-align:center; padding:2px; outline:none; border-radius:2px; }
.pro-thresh-input:focus { border-color:rgba(109,232,225,0.5); box-shadow:0 0 8px rgba(109,232,225,0.15); }
/* Weight badge on condition rows */
.pro-cond-weight-badge { font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:600; color:rgba(109,232,225,0.85); background:rgba(109,232,225,0.08); border:1px solid rgba(109,232,225,0.2); padding:1px 6px; border-radius:3px; cursor:pointer; flex-shrink:0; transition:all 0.15s; letter-spacing:0.3px; text-shadow:0 0 6px rgba(109,232,225,0.3); }
.pro-cond-weight-badge:hover { background:rgba(109,232,225,0.14); border-color:rgba(109,232,225,0.35); }
/* Inline weight edit input */
.pro-cond-weight-input { width:36px; background:rgba(109,232,225,0.08); border:1px solid rgba(109,232,225,0.4); color:rgba(109,232,225,0.95); font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700; text-align:center; padding:2px; outline:none; border-radius:2px; flex-shrink:0; }

/* Pro inline condition picker (inserted after cond-toggle-btn via JS) */
.pro-cond-inline { display:none; padding:4px 0; }
.pro-cond-inline.open { display:block; }
.pro-cond-inline-grid { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin-top:4px; }
.pro-cond-inline-item { padding:6px 7px; background:rgba(109,232,225,0.015); border:1px solid rgba(109,232,225,0.06); cursor:pointer; transition:all .12s; }
.pro-cond-inline-item:hover { background:rgba(109,232,225,0.04); border-color:rgba(109,232,225,0.18); }.pro-cond-inline-name { font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:600; color:rgba(255,255,255,0.55); letter-spacing:0.3px; }
.pro-cond-inline-desc { font-family:'IBM Plex Mono',monospace; font-size:7px; color:rgba(255,255,255,0.18); margin-top:1px; }
.pro-cond-active-list { display:flex; flex-direction:column; gap:3px; margin:4px 0; }
.pro-cond-active-row { display:flex; align-items:center; gap:6px; padding:4px 8px; background:rgba(79,255,170,0.03); border:1px solid rgba(79,255,170,0.1); font-family:'IBM Plex Mono',monospace; font-size:8px; }
.pro-cond-active-dot { width:4px; height:4px; border-radius:50%; background:rgba(79,255,170,0.7); box-shadow:0 0 4px rgba(79,255,170,0.3); flex-shrink:0; }
.pro-cond-active-name { color:rgba(255,255,255,0.45); letter-spacing:0.5px; flex:1; }
.pro-cond-active-val { color:rgba(79,255,170,0.75); }
.pro-cond-active-rm { cursor:pointer; color:rgba(255,255,255,0.3); font-size:10px; transition:color .12s; }
.pro-cond-active-rm:hover { color:rgba(255,90,90,0.8); }
.pro-cond-badge { position:sticky; top:0; z-index:10; display:none; padding:5px 12px; background:rgba(4,6,14,0.95); border-bottom:1px solid rgba(109,232,225,0.1); backdrop-filter:blur(8px); font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:2px; color:rgba(109,232,225,0.6); text-align:center; }
.pro-cond-badge.vis { display:block; }

/* ═══ PRO SWAP PANEL MICRO-ANIMATIONS ═══ */
.pro-swap-panel #exec-btn { animation:proExecBreathe 3s ease-in-out infinite !important; transition:all 0.2s !important; }
@keyframes proExecBreathe { 0%,100%{box-shadow:0 0 12px rgba(109,232,225,0.06),inset 0 1px 0 rgba(109,232,225,0.1)} 50%{box-shadow:0 0 20px rgba(109,232,225,0.12),inset 0 1px 0 rgba(109,232,225,0.15),0 0 40px rgba(109,232,225,0.04)} }
.pro-cond-active-dot { animation:proCondDotPulse 2s ease-in-out infinite; }
@keyframes proCondDotPulse { 0%,100%{box-shadow:0 0 4px rgba(79,255,170,0.3);transform:scale(1)} 50%{box-shadow:0 0 8px rgba(79,255,170,0.6);transform:scale(1.2)} }
.pro-cond-inline.open .pro-cond-inline-item { opacity:0; animation:proCondItemIn 0.3s ease forwards; }
.pro-cond-inline.open .pro-cond-inline-item:nth-child(1){animation-delay:.02s}.pro-cond-inline.open .pro-cond-inline-item:nth-child(2){animation-delay:.04s}.pro-cond-inline.open .pro-cond-inline-item:nth-child(3){animation-delay:.06s}.pro-cond-inline.open .pro-cond-inline-item:nth-child(4){animation-delay:.08s}.pro-cond-inline.open .pro-cond-inline-item:nth-child(5){animation-delay:.10s}.pro-cond-inline.open .pro-cond-inline-item:nth-child(6){animation-delay:.12s}.pro-cond-inline.open .pro-cond-inline-item:nth-child(7){animation-delay:.14s}.pro-cond-inline.open .pro-cond-inline-item:nth-child(8){animation-delay:.16s}.pro-cond-inline.open .pro-cond-inline-item:nth-child(9){animation-delay:.18s}.pro-cond-inline.open .pro-cond-inline-item:nth-child(10){animation-delay:.20s}.pro-cond-inline.open .pro-cond-inline-item:nth-child(11){animation-delay:.22s}
@keyframes proCondItemIn { 0%{opacity:0;transform:scale(0.92)} 100%{opacity:1;transform:scale(1)} }
.pro-cond-active-row { animation:proCondRowIn 0.35s cubic-bezier(.16,1,.3,1) both; }
@keyframes proCondRowIn { 0%{opacity:0;transform:translateX(-8px) scaleY(0.4)} 100%{opacity:1;transform:none} }
.pro-swap-panel .prot-panel { transition:max-height 0.3s cubic-bezier(.16,1,.3,1), opacity 0.2s !important; }

/* Live price connector */
.pro-price-link {
  display:flex; align-items:center; gap:6px;
  padding:4px 8px; margin:2px 6px 4px;
  background:rgba(255,255,255,0.015); border:1px solid rgba(255,255,255,0.035);
  font-family:'IBM Plex Mono',monospace; font-size:8px;
  color:rgba(109,232,225,0.4); letter-spacing:0.3px; flex-shrink:0;
}
.pro-price-link-dot {
  width:3px; height:3px; border-radius:50%;
  background:rgba(79,255,170,0.8); box-shadow:0 0 4px rgba(79,255,170,0.4);
  flex-shrink:0;
}
.pro-price-val { color:rgba(255,255,255,0.65); font-size:9px; margin-left:auto; }

/* ── Tablet landscape / small laptop (1024px) ── */
@media(max-width:1024px){
  .pro-swap-panel { max-width:320px !important; min-width:280px !important; }
  .pro-chart-panel { flex:1 !important; }
  .pro-toolbar { gap:3px; }
  .pro-tb-pair { font-size:10px; }
}

@media(max-width:900px){
  #s2.pro-mode .pro-layout {
    flex-direction:column; padding-bottom:0 !important;
    /* Fill space between dex-bar and dex-foot on mobile */
    position:absolute; top:68px; bottom:40px; left:0; right:0;
  }
  /* Chart: fixed height, won't shrink */
  .pro-chart-panel { flex:0 0 auto !important; max-height:35vh; }
  .pro-chart-wrap { min-height:180px; max-height:30vh; }
  /* Swap panel: fills remaining space, scrolls internally */
  .pro-swap-panel {
    width:100% !important; max-width:100% !important;
    border-top:1px solid rgba(109,232,225,0.08); border-left:none !important;
    flex:1 1 0% !important; min-height:0 !important;
    overflow-y:auto !important; -webkit-overflow-scrolling:touch;
    padding:8px 12px 16px !important;
  }
  /* Neutralise card-animator transform so sticky exec-wrap works */
  .pro-swap-panel .card-animator { transform:none !important; will-change:auto !important; }
  .pro-swap-panel .pro-swap-inner { overflow:visible !important; }
  .pro-swap-panel .swap-wrap { overflow:visible !important; }
  .pro-swap-panel .swap-card { overflow:visible !important; height:auto !important; }
  .pro-swap-panel .sc-inner { overflow:visible !important; max-height:none !important; }
  .pro-toolbar { flex-wrap:wrap; gap:4px; padding:4px 8px !important; }
  .pro-search-bar { padding:6px 8px !important; }
  /* Execute button: sticky at bottom of swap scroll */
  .pro-swap-panel .exec-wrap {
    position:sticky !important; bottom:0 !important; z-index:100 !important;
    background:linear-gradient(180deg, rgba(8,12,24,0) 0%, rgba(8,12,24,0.85) 40%, rgba(8,12,24,0.95) 100%) !important;
    padding:8px 4px max(8px, env(safe-area-inset-bottom)) !important;
    margin-top:4px !important;
  }
}

/* ── Tablet (768px) ── */
@media(max-width:768px){
  .pro-layout { flex-direction:column !important; }
  .pro-chart-panel { max-height:35vh !important; }
  .pro-chart-wrap { min-height:200px !important; }
  .pro-swap-panel { width:100% !important; max-width:none !important; border-left:none !important; border-top:1px solid rgba(109,232,225,0.07) !important; }
  .pro-toolbar { flex-wrap:wrap; gap:4px; }
  .pro-ind-search-box { max-width:none !important; width:calc(100% - 32px) !important; }
}

@media(max-width:480px){
  .pro-chart-panel { max-height:30vh !important; }
  .pro-chart-wrap { min-height:140px !important; max-height:26vh !important; }
  .pro-toolbar { padding:4px 6px !important; }
  .pro-toolbar-sep { display:none; }
  .pro-swap-panel { padding:6px 8px 12px !important; }
  /* Hide search bar on mobile to save vertical space — chart is compact */
  .pro-search-bar { display:none !important; }
}
/* ── iPhone 14 Pro refinements (393px–428px) ── */
@media(max-width:428px){
  /* Pro mode on narrow screens: tighter layout */
  .pro-chart-panel { max-height:28vh !important; }
  .pro-chart-wrap { min-height:120px !important; max-height:24vh !important; }
  .pro-toolbar { padding:3px 4px !important; height:auto !important; min-height:28px !important; }
  .pro-chart-tab { padding:4px 6px !important; font-size:8px !important; min-height:28px !important; }
  .pro-tb-pair { font-size:10px !important; margin-right:4px !important; }
  .pro-tb-price { font-size:10px !important; }
  .pro-tb-chg { font-size:8px !important; }
  .pro-ind-search-head input { font-size:16px !important; } /* iOS zoom prevention */
  .pro-swap-panel { padding:4px 6px 12px !important; }
  .pro-swap-panel .amt-input { font-size:16px !important; } /* iOS zoom prevention */
  .pro-swap-panel .prot-price-input { font-size:16px !important; } /* iOS zoom prevention */
  .pro-swap-panel .tok-sel { min-height:40px !important; }
  .pro-swap-panel #exec-btn { min-height:44px !important; padding:12px !important; }
  .pro-ind-add { min-height:28px !important; padding:4px 8px !important; }
  /* Indicator overlay: full-width on narrow */
  .pro-ind-search-box { width:calc(100% - 24px) !important; max-width:none !important; }
  /* Condition modal: fullscreen on narrow */
  #s2.pro-mode .cond-modal { max-width:calc(100vw - 24px) !important; }
}

/* ── MORE-timeframes dropdown: a tab that opens into the long tail ── */
.pro-tf-more{background:rgba(6,8,18,0.9);border:1px solid rgba(109,232,225,0.15);border-radius:2px;color:rgba(255,255,255,0.55);font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.5px;padding:3px 6px;cursor:pointer;appearance:auto}
.pro-tf-more:hover{border-color:rgba(109,232,225,0.35);color:rgba(255,255,255,0.8)}
.pro-tf-more.active{border-color:var(--cyan);color:var(--cyan)}
.pro-tf-more option{background:#0a0e1c;color:rgba(255,255,255,0.85)}
/* ── Timeframe dropdown — same design language as the tools picker. ── */
.tenon-tf-host{position:relative;display:inline-flex;align-items:center;height:100%}
.tenon-tf-open{min-width:52px;justify-content:center}
.tenon-tf-menu{min-width:110px;max-height:260px;overflow-y:auto}
.tenon-tf-item{padding:5px 12px}
.tenon-tf-item .tenon-tool-item-name{font-size:10px;letter-spacing:1px}