#s2.on{display:flex;flex-direction:column;background:#04060e;position:relative;height:100%}
#s4.on,#s5.on,#s6.on{display:flex;flex-direction:column;background:#04060e}
/* S6 perps — dex-bar inherits global clean style */
/* Right panel animated left border */
#s6 .pp-right-col { background:linear-gradient(165deg, rgba(10,16,32,0.99) 0%, rgba(5,9,20,0.99) 100%); border-left:none; position:relative; overflow-y:auto; }
#s6 .pp-right-col::before { content:''; display:block; height:1.5px; background:linear-gradient(90deg, transparent, rgba(109,232,225,0.4) 20%, rgba(255,255,255,0.18) 50%, rgba(109,232,225,0.4) 80%, transparent); flex-shrink:0; }
#s6 .pp-right-col::after { content:''; position:absolute; top:0; bottom:0; left:0; width:1px; background:linear-gradient(180deg, rgba(109,232,225,0.35) 0%, rgba(109,232,225,0.08) 40%, rgba(109,232,225,0.03) 70%, rgba(79,255,170,0.08) 100%); pointer-events:none; z-index:2; }
/* ═══ PREMIUM UPLIFT — match S2 swap card polish ═══ */
/* Collateral box: S2-style token box treatment */
#s6 .perp-col-box { position:relative; overflow:hidden; border-color:rgba(109,232,225,0.08); box-shadow:inset 0 1px 0 rgba(109,232,225,0.08), inset 0 0 40px rgba(109,232,225,0.03), 0 2px 8px rgba(0,0,0,0.3); transition:border-color 0.2s, box-shadow 0.2s; }
#s6 .perp-col-box:hover { border-color:rgba(109,232,225,0.15); }
#s6 .perp-col-box::after { content:''; position:absolute; top:0; left:0; width:60%; height:100%; background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.0) 30%, rgba(255,255,255,0.04) 50%, rgba(109,232,225,0.06) 55%, rgba(255,255,255,0.0) 70%, transparent 100%); transform:translateX(-220%) skewX(-15deg); transition:none; pointer-events:none; will-change:transform; }
#s6 .perp-col-box:hover::after { animation:tokShimmer 0.55s ease-out forwards; }
/* Leverage section: enhanced */
#s6 .lev-track, #s6 [style*="height:4px"][style*="background:rgba(255"] { box-shadow:inset 0 1px 2px rgba(0,0,0,0.3); }
/* TP/SL fields: S2-style inset glow */
#s6 .ptb-field.green { box-shadow:inset 0 1px 0 rgba(79,255,170,0.06), inset 0 0 30px rgba(79,255,170,0.02); transition:border-color 0.2s; }
#s6 .ptb-field.green:hover { border-color:rgba(79,255,170,0.2); }
#s6 .ptb-field.red { box-shadow:inset 0 1px 0 rgba(255,90,90,0.06), inset 0 0 30px rgba(255,90,90,0.02); transition:border-color 0.2s; }
#s6 .ptb-field.red:hover { border-color:rgba(255,90,90,0.2); }
/* Protection row: S2-style expandable panels */
#s6 .prot-row { border:1px solid rgba(109,232,225,0.06); margin:0 14px 4px; background:rgba(0,0,0,0.15); position:relative; overflow:hidden; transition:border-color 0.2s; border-radius:0; }
#s6 .prot-row:hover { border-color:rgba(109,232,225,0.12); }
#s6 .prot-row::before { content:''; position:absolute; top:0; left:15%; right:15%; height:1px; background:linear-gradient(90deg, transparent, rgba(109,232,225,0.12), transparent); }
/* Perps stats: S2-style receipt look */
#s6 .perp-stats { border-radius:0; box-shadow:inset 0 1px 0 rgba(109,232,225,0.04); }
/* Collateral box zero radius */
#s6 .perp-col-box { border-radius:0; }
/* Condition section: S2-style condition stack aesthetic */
#s6 .pp-cond-section::after { content:''; position:absolute; bottom:0; left:15%; right:15%; height:1px; background:linear-gradient(90deg, transparent, rgba(109,232,225,0.1), transparent); }
/* Input focus glow — match S2 */
#s6 .pcb-amount:focus { text-shadow:0 0 12px rgba(109,232,225,0.2); }
#s6 .pp-limit-inp:focus { box-shadow:0 0 0 1px rgba(109,232,225,0.15); }
/* Order type buttons: S2 swap-type treatment */
#s6 .pp-ot { position:relative; overflow:hidden; }
#s6 .pp-ot.on::after { content:''; position:absolute; bottom:0; left:20%; right:20%; height:1px; background:linear-gradient(90deg, transparent, rgba(109,232,225,0.4), transparent); }
/* Protection group label */
#s6 .protection-group-label { font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:2.5px; color:rgba(109,232,225,0.2); padding:0 0 6px; }
/* TP/SL active state glow — match S2 */
#s6 #pp-tp-toggle-row.tp-on { border-color:rgba(79,255,170,0.15); box-shadow:inset 0 0 20px rgba(79,255,170,0.02); }
#s6 #pp-tp-toggle-row.tp-on .prot-label { color:rgba(79,255,170,0.9); }
#s6 #pp-tp-toggle-row.tp-on .prot-caret { color:rgba(79,255,170,0.6); transform:rotate(45deg); }
#s6 #pp-sl-toggle-row.sl-on { border-color:rgba(255,90,90,0.15); box-shadow:inset 0 0 20px rgba(255,90,90,0.02); }
#s6 #pp-sl-toggle-row.sl-on .prot-label { color:rgba(255,90,90,0.9); }
#s6 #pp-sl-toggle-row.sl-on .prot-caret { color:rgba(255,90,90,0.6); transform:rotate(45deg); }

/* Side buttons — match S2 swap types */
#s6 .pp-side-btns { display:flex; gap:0; margin:0; border-bottom:1px solid rgba(109,232,225,0.06); }
#s6 .pp-side-btn { flex:1; padding:10px; font-family:'Orbitron',sans-serif; font-size:9px; font-weight:700; letter-spacing:1.5px; border:none; background:rgba(255,255,255,0.02); color:rgba(255,255,255,0.3); cursor:pointer; transition:all 0.2s; border-bottom:2px solid transparent; }
#s6 .pp-side-btn.on.long { background:rgba(79,255,170,0.04); color:rgba(79,255,170,0.9); border-bottom-color:rgba(79,255,170,0.6); box-shadow:inset 0 -8px 20px rgba(79,255,170,0.03); }
#s6 .pp-side-btn.on.short { background:rgba(255,90,90,0.04); color:rgba(255,90,90,0.9); border-bottom-color:rgba(255,90,90,0.6); box-shadow:inset 0 -8px 20px rgba(255,90,90,0.03); }
#s6 .pp-side-btn:hover:not(.on) { background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.5); }
/* Leverage section */
#s6 .pp-lev-preset2 { border-radius:0 !important; }
/* Condition section — card-like with Tenon border */
#s6 .pp-cond-section { border:1px solid rgba(109,232,225,0.08); background:rgba(109,232,225,0.015); margin:10px 12px; padding:12px; position:relative; overflow:hidden; }
#s6 .pp-cond-section::before { content:''; position:absolute; top:0; left:15%; right:15%; height:1px; background:linear-gradient(90deg, transparent, rgba(109,232,225,0.2), transparent); }
/* Condition header — flex row with close button */
#s6 .pp-cond-hd { display:flex; align-items:center; justify-content:space-between; }
/* Close button */
#s6 .pp-cond-close { background:none; border:none; color:rgba(255,255,255,0.2); font-size:14px; cursor:pointer; padding:2px 4px; line-height:1; transition:color 0.12s; }
#s6 .pp-cond-close:hover { color:rgba(255,255,255,0.6); }
/* Collapsed state — show summary pill, hide body */
#s6 .pp-cond-section.collapsed > *:not(.pp-cond-hd):not(.pp-cond-collapsed-pill) { display:none !important; }
#s6 .pp-cond-section.collapsed { padding:8px 12px; cursor:pointer; }
#s6 .pp-cond-collapsed-pill { display:none; font-family:'IBM Plex Mono',monospace; font-size:8px; color:rgba(109,232,225,0.5); letter-spacing:1px; margin-top:4px; }
#s6 .pp-cond-section.collapsed .pp-cond-collapsed-pill { display:block; }
#s6 .pp-add-cond { border:1px solid rgba(109,232,225,0.15) !important; background:rgba(109,232,225,0.02) !important; color:rgba(109,232,225,0.6) !important; font-family:'IBM Plex Mono',monospace !important; letter-spacing:2px !important; transition:all 0.15s !important; }
#s6 .pp-add-cond:hover { border-color:rgba(109,232,225,0.35) !important; color:rgba(109,232,225,0.9) !important; background:rgba(109,232,225,0.05) !important; }
/* Summary — receipt-style with holographic top */
#s6 .pp-summary { border:1px solid rgba(109,232,225,0.08); background:rgba(0,0,0,0.2); margin:10px 12px; padding:10px 12px; position:relative; overflow:hidden; border-radius:0; }
#s6 .pp-summary::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg, transparent, rgba(109,232,225,0.25), transparent); }
#s6 .pp-sum-row { font-size:9px !important; padding:3px 0 !important; }
/* TP/SL fields — match Tenon card aesthetic */
#s6 .pp-tpsl-section { padding:8px 12px; }
/* Execute bracket button — match S2 Tenon style */
#s6 .pp-exec-outer { margin:8px 12px 4px !important; position:relative; display:block; overflow:visible; }
#s6 .pp-exec-outer .dw-corner { position:absolute; width:14px; height:14px; border-style:solid; border-width:0; border-color:var(--cyan); pointer-events:none; z-index:5; transition:width 0.32s cubic-bezier(.22,1,.36,1),height 0.32s cubic-bezier(.22,1,.36,1),border-color 0.25s,opacity 0.25s; animation:execCornerBreathe 2.8s ease-in-out infinite !important; }
#s6 .pp-exec-outer .dw-tl { top:-2px; left:-2px; border-top-width:2px; border-left-width:2px; }
#s6 .pp-exec-outer .dw-tr { top:-2px; right:-2px; border-top-width:2px; border-right-width:2px; }
#s6 .pp-exec-outer .dw-bl { bottom:-2px; left:-2px; border-bottom-width:2px; border-left-width:2px; }
#s6 .pp-exec-outer .dw-br { bottom:-2px; right:-2px; border-bottom-width:2px; border-right-width:2px; }
#s6 .pp-exec-outer:hover .dw-corner { width:calc(50% + 3px); height:calc(50% + 3px); border-color:var(--green); opacity:1; animation:none; }
#s6 .pp-exec-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; font-size:11px; 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; animation:execIdle 3.5s ease-in-out 2s infinite !important; text-shadow:none !important; }
#s6 .pp-exec-btn::before { content:''; position:absolute; top:0; left:0; width:50%; height:100%; background:linear-gradient(90deg,transparent 0%,rgba(109,232,225,0.08) 50%,transparent 100%) !important; animation:execSweep 8s ease-in-out 2s infinite; pointer-events:none; will-change:transform; }
#s6 .pp-exec-btn:hover::before { transform:translateX(100%) !important; }
#s6 .pp-exec-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; animation:none; border-color:rgba(109,232,225,0.55) !important; font-size:13px !important; }
#s6 .pp-exec-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; }
#s6 .pp-exec-btn.short { border-color:rgba(255,90,90,0.35) !important; background:linear-gradient(160deg,rgba(255,90,90,0.14) 0%,rgba(255,90,90,0.05) 100%) !important; color:#ffffff !important; box-shadow:0 0 20px rgba(255,90,90,0.08),inset 0 1px 0 rgba(255,90,90,0.15) !important; }
#s6 .pp-exec-btn.short::before { background:linear-gradient(90deg,transparent 0%,rgba(255,90,90,0.08) 50%,transparent 100%) !important; }
#s6 .pp-exec-btn.short:hover { background:linear-gradient(160deg,rgba(255,90,90,0.2) 0%,rgba(255,90,90,0.08) 100%) !important; border-color:rgba(255,90,90,0.55) !important; box-shadow:0 0 30px rgba(255,90,90,0.15),inset 0 1px 0 rgba(255,90,90,0.2) !important; }
#s6 .pp-exec-outer.short .dw-corner { border-color:rgba(255,90,90,0.6); }
#s6 .pp-exec-outer.short:hover .dw-corner { border-color:rgba(255,90,90,0.9); }
/* Exec note */
#s6 .pp-exec-note { font-family:'IBM Plex Mono',monospace; font-size:7px; color:rgba(109,232,225,0.2); text-align:center; letter-spacing:1.5px; padding:8px 12px 10px; }
/* Advanced CEX section */
/* Card scan line effect on right panel */
#s6 .pp-right-col .pp-card-scan { position:absolute; top:0; left:0; right:0; height:100%; pointer-events:none; z-index:1; overflow:hidden; }
#s6 .pp-right-col .pp-card-scan::after { content:''; position:absolute; left:0; right:0; height:1px; top:-100%; background:linear-gradient(90deg, transparent 10%, rgba(109,232,225,0.06) 40%, rgba(109,232,225,0.03) 60%, transparent 90%); animation:ppCardScan 6s linear infinite; }
@keyframes ppCardScan { 0%{top:-1%} 100%{top:101%} }
/* Stats bar premium */
#s6 .pp-top-bar { background:rgba(5,8,18,0.99); border-bottom:1px solid rgba(109,232,225,0.05); }
#s6 .pp-tf-bar { background:rgba(5,8,18,0.98); border-bottom:1px solid rgba(109,232,225,0.04); display:flex; align-items:center; padding:4px 10px; gap:6px; }
/* Timeframe dropdown */
.pp-tf-select-wrap { position:relative; flex-shrink:0; }
.pp-tf-trigger { display:flex; align-items:center; gap:2px; background:rgba(109,232,225,0.06); border:1px solid rgba(109,232,225,0.12); color:rgba(109,232,225,0.9); font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600; letter-spacing:1px; padding:5px 10px; cursor:pointer; transition:all 0.15s; border-radius:0; }
.pp-tf-trigger:hover { background:rgba(109,232,225,0.1); border-color:rgba(109,232,225,0.25); }
.pp-tf-dropdown { display:none; position:absolute; top:calc(100% + 4px); left:0; min-width:160px; background:rgba(6,8,18,0.98); border:1px solid rgba(109,232,225,0.12); z-index:100; max-height:320px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(109,232,225,0.15) transparent; padding:4px 0; }
.pp-tf-dropdown.open { display:block; }
.pp-tf-dropdown::-webkit-scrollbar { width:4px; }
.pp-tf-dropdown::-webkit-scrollbar-thumb { background:rgba(109,232,225,0.15); }
.pp-tf-group-label { font-family:'IBM Plex Mono',monospace; font-size:7px; letter-spacing:2px; color:rgba(255,255,255,0.2); padding:8px 12px 3px; }
.pp-tf-opt { display:block; width:100%; text-align:left; background:none; border:none; color:rgba(255,255,255,0.5); font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.5px; padding:6px 12px; cursor:pointer; transition:all 0.1s; }
.pp-tf-opt:hover { background:rgba(109,232,225,0.06); color:rgba(255,255,255,0.8); }
.pp-tf-opt.on { color:rgba(109,232,225,0.95); background:rgba(109,232,225,0.08); }
/* Max leverage badge in pair dropdown */
.pp-dd-lev { font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:600; letter-spacing:0.5px; color:rgba(79,255,170,0.7); background:rgba(79,255,170,0.06); border:1px solid rgba(79,255,170,0.1); padding:1px 5px; flex-shrink:0; }
/* Slippage row in S6 */
/* Risk meter positioning */
#s6 .pp-risk-meter { padding:8px 12px; border-bottom:1px solid rgba(109,232,225,0.04); }
/* Dropdown items stagger animation */
.pp-dd-item { opacity:0; animation:ppDdIn 0.2s ease forwards; }
.pp-dd-item:nth-child(1){animation-delay:.01s}.pp-dd-item:nth-child(2){animation-delay:.03s}.pp-dd-item:nth-child(3){animation-delay:.05s}.pp-dd-item:nth-child(4){animation-delay:.07s}.pp-dd-item:nth-child(5){animation-delay:.09s}.pp-dd-item:nth-child(6){animation-delay:.11s}.pp-dd-item:nth-child(7){animation-delay:.13s}.pp-dd-item:nth-child(8){animation-delay:.15s}.pp-dd-item:nth-child(9){animation-delay:.17s}.pp-dd-item:nth-child(10){animation-delay:.19s}.pp-dd-item:nth-child(11){animation-delay:.21s}.pp-dd-item:nth-child(12){animation-delay:.23s}.pp-dd-item:nth-child(13){animation-delay:.25s}.pp-dd-item:nth-child(14){animation-delay:.27s}.pp-dd-item:nth-child(15){animation-delay:.29s}.pp-dd-item:nth-child(16){animation-delay:.31s}.pp-dd-item:nth-child(17){animation-delay:.33s}.pp-dd-item:nth-child(18){animation-delay:.35s}.pp-dd-item:nth-child(19){animation-delay:.37s}
@keyframes ppDdIn { 0%{opacity:0;transform:translateY(-3px)} 100%{opacity:1;transform:none} }
/* Side buttons premium — handled by #s6 overrides */

/* ═══ RESIZE HANDLE — draggable divider between chart and right panel ═══ */
.pp-resize-handle { width:6px; flex-shrink:0; cursor:col-resize; position:relative; background:rgba(109,232,225,0.03); border-left:1px solid rgba(109,232,225,0.06); border-right:1px solid rgba(109,232,225,0.06); transition:background 0.15s; z-index:10; display:flex; align-items:center; justify-content:center; }
.pp-resize-handle:hover, .pp-resize-handle.active { background:rgba(109,232,225,0.08); border-color:rgba(109,232,225,0.2); }
.pp-resize-handle:hover .pp-resize-grip, .pp-resize-handle.active .pp-resize-grip { opacity:0.6; }
.pp-resize-grip { width:2px; height:32px; display:flex; flex-direction:column; gap:3px; opacity:0.2; transition:opacity 0.15s; }
.pp-resize-grip::before, .pp-resize-grip::after { content:''; display:block; width:2px; height:2px; background:rgba(109,232,225,0.8); border-radius:50%; flex-shrink:0; }
.pp-resize-grip::before { box-shadow:0 6px 0 rgba(109,232,225,0.8), 0 12px 0 rgba(109,232,225,0.8); }
.pp-resize-grip::after { margin-top:15px; box-shadow:0 6px 0 rgba(109,232,225,0.8); }
/* Glow line when dragging */
.pp-resize-handle.active::after { content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; transform:translateX(-50%); background:linear-gradient(180deg, transparent, rgba(109,232,225,0.4) 20%, rgba(109,232,225,0.4) 80%, transparent); }

/* ═══ TRADE RECEIPT (collapsible detail panel) ═══ */
.pp-trade-receipt{margin:8px 14px 4px;border:1px solid rgba(109,232,225,0.1);background:linear-gradient(170deg,rgba(109,232,225,0.03) 0%,rgba(255,255,255,0.01) 100%)}
.pp-tr-header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;cursor:pointer;transition:background 0.15s}
.pp-tr-header:hover{background:rgba(109,232,225,0.04)}
.pp-tr-left{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
.pp-tr-badge{font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:700;letter-spacing:1.5px;color:rgba(109,232,225,0.7);background:rgba(109,232,225,0.07);border:1px solid rgba(109,232,225,0.15);padding:2px 6px;flex-shrink:0}
.pp-tr-logic{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1px;color:rgba(79,255,170,0.6);background:rgba(79,255,170,0.06);border:1px solid rgba(79,255,170,0.12);padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-tr-chev{color:rgba(255,255,255,0.2);transition:transform 0.2s;flex-shrink:0}
.pp-tr-chev.open{transform:rotate(180deg)}
.pp-tr-body{padding:10px;border-top:1px solid rgba(109,232,225,0.06)}
.pp-tr-action{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;color:#fff;text-align:center;margin-bottom:2px}
.pp-tr-sub{font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(109,232,225,0.4);text-align:center;letter-spacing:0.5px;margin-bottom:8px}
.pp-tr-divider{height:1px;background:rgba(109,232,225,0.06);margin:8px 0}
.pp-tr-section-label{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:rgba(109,232,225,0.4);margin-bottom:6px}
.pp-tr-section-label span{color:rgba(255,255,255,0.3)}
.pp-tr-conditions{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}
.pp-tr-cond-empty{font-family:'IBM Plex Mono',monospace;font-size:8px;color:rgba(255,255,255,0.15);font-style:italic}
.pp-tr-cond-item{display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.pp-tr-cond-num{color:rgba(109,232,225,0.4);min-width:12px}
.pp-tr-cond-name{color:rgba(255,255,255,0.5);flex-shrink:0}
.pp-tr-cond-val{color:rgba(255,255,255,0.3);margin-left:auto;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-tr-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0}
.pp-tr-k{font-family:'IBM Plex Mono',monospace;font-size:8px;color:rgba(255,255,255,0.2);letter-spacing:0.3px}
.pp-tr-v{font-family:'IBM Plex Mono',monospace;font-size:8px;color:rgba(255,255,255,0.5);text-align:right}
.pp-tr-live{display:flex;align-items:center;gap:4px;color:rgba(79,255,170,0.7)}
.pp-tr-live-dot{width:4px;height:4px;border-radius:50%;background:rgba(79,255,170,0.9);box-shadow:0 0 4px rgba(79,255,170,0.5)}

/* ═══ PROGRESSIVE DISCLOSURE STAGES ═══ */

/* ═══ POSITIONS TRAY ═══ */
.pp-pos-tray { border-top:1px solid rgba(109,232,225,0.06); background:rgba(4,8,18,0.95); flex-shrink:0; }
.pp-pos-head { display:flex; align-items:center; gap:8px; padding:6px 12px; cursor:pointer; }
.pp-pos-head-title { font-family:'IBM Plex Mono',monospace; font-size:7px; letter-spacing:2px; color:rgba(109,232,225,0.35); }
.pp-pos-head-count { font-family:'IBM Plex Mono',monospace; font-size:8px; color:rgba(79,255,170,0.65); margin-left:auto; }
.pp-pos-body { max-height:0; overflow:hidden; transition:max-height 0.3s; }
.pp-pos-tray.open .pp-pos-body { max-height:200px; overflow-y:auto; }
.pp-pos-row { display:flex; align-items:center; gap:8px; padding:7px 12px; border-top:1px solid rgba(255,255,255,0.02); font-family:'IBM Plex Mono',monospace; font-size:8px; }
.pp-pos-side { font-size:7px; font-weight:700; letter-spacing:1px; padding:1px 5px; border-radius:0; }
.pp-pos-side.long { background:rgba(79,255,170,0.1); color:rgba(79,255,170,0.8); }
.pp-pos-side.short { background:rgba(255,90,90,0.1); color:rgba(255,90,90,0.8); }
.pp-pos-pair { color:rgba(255,255,255,0.6); flex:1; }
/* The same number on the other screen, in the same face — a P&L that reads
   one way on My Trades and another on Perps is the same value wearing two
   identities. Tabular figures because this one ticks too. */
.pp-pos-pnl { font-weight:600; font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
.pp-pos-pnl.green { color:rgba(79,255,170,0.85); }
.pp-pos-pnl.red { color:rgba(255,90,90,0.85); }
.pp-pos-close { font-size:7px; padding:2px 6px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); color:rgba(255,255,255,0.3); cursor:pointer; border-radius:0; transition:all .12s; }
.pp-pos-close:hover { border-color:rgba(255,90,90,0.3); color:rgba(255,90,90,0.7); }

/* ═══ RISK METER ═══ */
.pp-risk-meter { display:flex; align-items:center; gap:8px; padding:6px 14px; }
.pp-risk-arc { fill:none; stroke-width:3; stroke-linecap:round; }
.pp-risk-label { font-family:'IBM Plex Mono',monospace; font-size:7px; letter-spacing:1px; }

/* ═══ PAIR DROPDOWN SPARKLINES ═══ */
.pp-dd-venue { font-size:7px !important; padding:1px 4px !important; border-radius:0 !important; }
.pp-dd-venue.v-full { background:rgba(79,255,170,0.08); color:rgba(79,255,170,0.7); border:1px solid rgba(79,255,170,0.15); }
.pp-dd-venue.v-partial { background:rgba(245,185,66,0.08); color:rgba(245,185,66,0.7); border:1px solid rgba(245,185,66,0.15); }
.pp-dd-venue.v-none { background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.25); border:1px solid rgba(255,255,255,0.06); }
/* Perps trade confirmation overlay */
.pp-confirm-overlay { position:fixed; inset:0; background:rgba(2,4,10,0.85); backdrop-filter:blur(8px); z-index:99999; display:none; align-items:center; justify-content:center; }
.pp-confirm-overlay.open { display:flex; }
.pp-confirm-card { width:380px; max-width:90vw; background:linear-gradient(168deg, rgba(8,14,28,0.99), rgba(4,8,18,0.99)); border:1px solid rgba(109,232,225,0.12); border-radius:0; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.7), 0 0 60px rgba(109,232,225,0.03); animation:ppConfirmIn 0.35s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes ppConfirmIn { 0%{opacity:0;transform:translateY(20px) scale(0.96)} 100%{opacity:1;transform:none} }
.pp-confirm-card::before { content:''; display:block; height:1.5px; background:linear-gradient(90deg, transparent, rgba(109,232,225,0.4), rgba(255,255,255,0.12), rgba(109,232,225,0.4), transparent); }
.pp-confirm-head { padding:14px 16px 10px; display:flex; align-items:center; justify-content:space-between; }
.pp-confirm-title { font-family:'Orbitron',sans-serif; font-size:10px; font-weight:900; color:rgba(255,255,255,0.85); letter-spacing:1.5px; }
.pp-confirm-close { background:none; border:none; color:rgba(255,255,255,0.3); font-size:16px; cursor:pointer; transition:color .15s; }
.pp-confirm-close:hover { color:rgba(255,255,255,0.7); }
.pp-confirm-body { padding:0 16px 14px; }
.pp-confirm-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; font-family:'IBM Plex Mono',monospace; font-size:9px; }
.pp-confirm-row span:first-child { color:rgba(255,255,255,0.3); letter-spacing:0.5px; }
.pp-confirm-row span:last-child { color:rgba(255,255,255,0.75); }

/* On-chain exit reassurance. Sharp corners per the design language; the cyan
   rail reads as "protocol-level", distinct from the amber warning rows. */
.pp-confirm-onchain {
  display:flex; align-items:flex-start; gap:7px;
  margin-top:8px; padding:8px 9px;
  border:1px solid rgba(109,232,225,0.18);
  border-left:2px solid rgba(109,232,225,0.55);
  background:linear-gradient(135deg, rgba(109,232,225,0.07), rgba(109,232,225,0.02) 60%, transparent);
  border-radius:0;
}
.pp-co-icon { color:rgba(109,232,225,0.85); font-size:11px; line-height:1.35; flex-shrink:0; }
.pp-co-text {
  font-family:'IBM Plex Mono',monospace; font-size:8.5px; line-height:1.5;
  color:rgba(255,255,255,0.5); letter-spacing:0.2px;
}
.pp-co-text strong { color:rgba(109,232,225,0.9); font-weight:600; }
@media (max-width:480px){ .pp-co-text { font-size:8px; } }
.pp-confirm-sep { height:1px; background:rgba(109,232,225,0.06); margin:6px 0; }
.pp-confirm-btns { display:flex; gap:8px; padding:12px 16px; border-top:1px solid rgba(109,232,225,0.06); }
.pp-confirm-cancel { flex:1; padding:10px; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1.5px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.4); cursor:pointer; transition:all .15s; border-radius:0; }
.pp-confirm-cancel:hover { border-color:rgba(255,255,255,0.2); color:rgba(255,255,255,0.7); }
.pp-confirm-go { flex:2; padding:10px; font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700; letter-spacing:2px; cursor:pointer; transition:all .15s; border-radius:0;
  /* BRAND DEFAULT — never the native button face. The close modal's button
     carried this class with no .long/.short variant, and a button with no
     background painted renders as a plain white system button (seen live). */
  background:rgba(109,232,225,0.08); color:rgba(109,232,225,0.95); border:1px solid rgba(109,232,225,0.25); }
.pp-confirm-go:hover { background:rgba(109,232,225,0.14); border-color:rgba(109,232,225,0.4); }
.pp-confirm-go.long { background:rgba(109,232,225,0.08); color:rgba(109,232,225,0.95); border:1px solid rgba(109,232,225,0.25); }
.pp-confirm-go.long:hover { background:rgba(109,232,225,0.14); border-color:rgba(109,232,225,0.4); }
.pp-confirm-go.short { background:rgba(255,90,90,0.08); color:rgba(255,90,90,0.95); border:1px solid rgba(255,90,90,0.25); }
.pp-confirm-go.short:hover { background:rgba(255,90,90,0.14); border-color:rgba(255,90,90,0.4); }
/* Perps success toast */
.pp-success-banner { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:999999; padding:20px 32px; background:rgba(4,8,18,0.98); border:1px solid rgba(109,232,225,0.25); border-radius:0; box-shadow:0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(109,232,225,0.06); display:none; flex-direction:column; align-items:center; gap:8px; animation:ppSuccessIn 0.4s cubic-bezier(.16,1,.3,1) forwards; }
.pp-success-banner::before { content:''; position:absolute; top:0; left:15%; right:15%; height:1.5px; background:linear-gradient(90deg, transparent, rgba(109,232,225,0.5), transparent); }
@keyframes ppSuccessIn { 0%{opacity:0;transform:translate(-50%,-50%) scale(0.9)} 100%{opacity:1;transform:translate(-50%,-50%) scale(1)} }


/* === Extracted from components.css === */
.lp-row{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.lp-lbl{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--txt3);letter-spacing:1.5px;flex:1}
.lp-val{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:700;color:var(--gold);text-shadow:0 0 12px var(--gold-d)}
#s6{background:transparent}
.lev-body{flex:1;display:flex;overflow:hidden}
.lev-left{flex:1;overflow-y:auto;padding:20px;scrollbar-width:thin;scrollbar-color:rgba(95,191,184,0.14) transparent}
.lev-left::-webkit-scrollbar{width:3px}
.lev-left::-webkit-scrollbar-thumb{background:rgba(95,191,184,0.18)}
.lev-right{width:320px;flex-shrink:0;border-left:1px solid rgba(109,232,225,0.07);background:rgba(6,8,18,0.92);backdrop-filter:blur(20px);overflow-y:auto;scrollbar-width:none}
.lev-right::-webkit-scrollbar{display:none}
.venue-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-bottom:20px}
.venue-card::before{content:'';position:absolute;top:0;left:0;width:65%;height:100%;background:linear-gradient(90deg,transparent,rgba(95,191,184,0.06),transparent);animation:sweep 4s ease-in-out infinite;pointer-events:none;will-change:transform}
.venue-card.on{border-color:var(--cyan);background:rgba(95,191,184,0.06);box-shadow:0 0 20px rgba(95,191,184,0.07)}
.venue-card.cex{border-color:rgba(220,160,60,0.22);background:rgba(220,160,60,0.04)}
.venue-card.cex.on{border-color:rgba(220,160,60,0.55);box-shadow:0 0 20px rgba(220,160,60,0.1)}
.vc-type{font-family:'IBM Plex Mono',monospace;font-size:8px;color:var(--txt3);letter-spacing:1px;margin-bottom:6px}
.chain-sol{background:rgba(95,191,184,0.1);color:var(--cyan);border:1px solid rgba(95,191,184,0.22)}
.chain-evm{background:rgba(95,191,184,0.08);color:var(--txt2);border:1px solid var(--border)}
.vc-connected{position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.perp-order-types{display:flex;gap:0;border:1px solid rgba(255,255,255,0.07);border-radius:7px;overflow:hidden;margin-bottom:14px;width:fit-content}
.pot{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:500;padding:5px 16px;background:transparent;border:none;color:rgba(255,255,255,0.35);cursor:pointer;transition:all 0.15s}
.pot.on{background:rgba(109,232,225,0.08);color:var(--cyan)}
.perp-limit-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.plr-label{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:1.5px;color:rgba(255,165,0,0.6);flex-shrink:0}
.plr-input-wrap{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,0.3);border:1px solid rgba(255,165,0,0.2);border-radius:7px;padding:7px 10px;flex:1}
.plr-currency{font-family:'Orbitron',sans-serif;font-size:13px;color:rgba(255,165,0,0.4)}
.plr-input{flex:1;font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#fff;background:transparent;border:none;outline:none;-moz-appearance:textfield}
.plr-input::-webkit-inner-spin-button,.plr-input::-webkit-outer-spin-button{-webkit-appearance:none}
.perp-col-box{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.07);border-radius:0;padding:12px 14px;margin-bottom:14px}
.pcb-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pcb-label{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:1.5px;color:rgba(255,255,255,0.3)}
.pcb-bal{font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(109,232,225,0.5);cursor:pointer}
.pcb-input-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pcb-token{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:7px;padding:6px 10px;cursor:pointer}
.pcb-tok-icon{font-size:14px;color:var(--cyan)}
.pcb-tok-name{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;color:#fff}
.pcb-amount{flex:1;font-family:'Orbitron',sans-serif;font-size:20px;font-weight:700;color:#fff;background:transparent;border:none;outline:none;text-align:right;-moz-appearance:textfield}
.pcb-amount::-webkit-inner-spin-button,.pcb-amount::-webkit-outer-spin-button{-webkit-appearance:none}
.pcb-quick-row{display:flex;gap:5px}
.pcb-quick{flex:1;font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:5px;padding:4px 0;cursor:pointer;transition:all 0.15s}
.pcb-quick:hover{color:var(--cyan);border-color:rgba(109,232,225,0.3)}
.pcb-quick.on{color:var(--cyan);border-color:rgba(109,232,225,0.4);background:rgba(109,232,225,0.07)}
.ph-change{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;margin-left:auto}
.ph-change.pos{color:var(--green)}
.ph-change.neg{color:var(--red)}
.perp-tpsl-row{margin-bottom:10px;display:flex;align-items:center}
.perp-tpsl-toggle{display:flex;align-items:center;gap:8px;cursor:pointer}
.perp-tpsl-toggle input[type=checkbox]{width:14px;height:14px;accent-color:var(--cyan);cursor:pointer}
.perp-tpsl-label{font-family:'Space Grotesk',sans-serif;font-size:12px;color:rgba(255,255,255,0.45)}
.perp-tpsl-body{margin-bottom:14px}
.ptb-row{display:flex;gap:8px}
.ptb-field{flex:1;background:rgba(0,0,0,0.2);border-radius:0;padding:10px;border:1px solid rgba(255,255,255,0.06)}
.ptb-field.green{border-color:rgba(79,255,170,0.1)}
.ptb-field.red{border-color:rgba(229,80,80,0.1)}
.ptb-label{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:1.5px;display:block;margin-bottom:6px}
.ptb-field.green .ptb-label{color:rgba(79,255,170,0.5)}
.ptb-field.red .ptb-label{color:rgba(229,80,80,0.5)}
.ptb-input-wrap{display:flex;align-items:center;gap:4px;margin-bottom:7px}
.ptb-cur{font-family:'Orbitron',sans-serif;font-size:11px;color:rgba(255,255,255,0.3)}
.ptb-input{flex:1;font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#fff;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,0.1);outline:none;padding:2px 0;-moz-appearance:textfield;width:100%}
.ptb-input::-webkit-inner-spin-button,.ptb-input::-webkit-outer-spin-button{-webkit-appearance:none}
.ptb-pcts{display:flex;gap:3px}
.ptb-pct{flex:1;font-family:'IBM Plex Mono',monospace;font-size:8px;color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:4px;padding:3px 0;cursor:pointer;transition:all 0.12s}
.ptb-field.green .ptb-pct:hover{color:#4FFFAA;border-color:rgba(79,255,170,0.3)}
.ptb-field.red .ptb-pct:hover{color:#ff7070;border-color:rgba(229,80,80,0.3)}
.perp-stats{background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.05);border-radius:0;padding:10px 12px;margin-bottom:14px;display:flex;flex-direction:column;gap:5px}
.ps-row{display:flex;justify-content:space-between;align-items:center}
.ps-k{font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(255,255,255,0.3)}
.ps-v{font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(255,255,255,0.7);font-weight:500}
.ps-v.red{color:var(--red)}
.ps-v.pos{color:var(--green)}
.perp-top-glow{position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(95,191,184,0.2),transparent)}
.perp-inner{padding:16px;position:relative;z-index:1}
.perp-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ph-pair{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:800;letter-spacing:1.5px}
.ph-perp-badge{font-family:'IBM Plex Mono',monospace;font-size:9px;padding:3px 8px;border:1px solid rgba(95,191,184,0.25);border-radius:3px;color:var(--cyan)}
.ph-mark{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--txt2);margin-left:auto}
.ph-mark-val{color:var(--green)}
.side-sel{display:flex;gap:0;margin-bottom:14px;border:1px solid var(--border);border-radius:var(--r6);overflow:hidden}
.ss-btn{flex:1;padding:9px;font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:2px;cursor:pointer;transition:all 0.2s;background:transparent;border:none;color:var(--txt3)}
.ss-btn.long.on{background:rgba(80,200,120,0.12);color:var(--green);text-shadow:0 0 10px rgba(80,200,120,0.5)}
.ss-btn.short.on{background:rgba(229,80,80,0.12);color:var(--red);text-shadow:0 0 10px rgba(229,80,80,0.5)}
.ss-btn:hover:not(.on){background:rgba(255,255,255,0.03);color:var(--txt2)}
.lev-ctrl{margin-bottom:14px}
.lev-lbl-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--txt3)}
.lev-val{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:700;color:var(--cyan)}
.lev-track{position:relative;height:4px;background:rgba(90,100,120,0.3);border-radius:2px;margin-bottom:7px}
.lev-fill{position:absolute;top:0;left:0;height:100%;background:var(--cyan);border-radius:2px;transition:width 0.2s;box-shadow:0 0 8px rgba(95,191,184,0.4)}
.lev-input{width:100%;appearance:none;-webkit-appearance:none;height:4px;border-radius:2px;background:transparent;outline:none;cursor:pointer;margin:0;position:absolute;top:0;left:0}
.lev-input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--cyan);cursor:pointer;box-shadow:0 0 8px rgba(95,191,184,0.5);border:2px solid var(--base)}
.lev-presets{display:flex;gap:5px}
.lp{font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:1px;padding:4px 10px;border:1px solid var(--border);border-radius:3px;cursor:pointer;color:var(--txt3);background:transparent;transition:all 0.18s}
.lp:hover{border-color:var(--cyan);color:var(--cyan)}
.lp.on{border-color:var(--cyan);color:var(--cyan);background:rgba(95,191,184,0.08)}
.api-import{border:1px solid rgba(220,160,60,0.28);border-radius:var(--r12);background:rgba(220,160,60,0.03);overflow:hidden;margin-bottom:14px;position:relative}
.api-import::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(220,160,60,0.3),transparent)}
.api-exchanges{display:flex;gap:8px;padding:10px 16px;flex-wrap:wrap}
.api-ex{display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r6);cursor:pointer;transition:all 0.22s;background:transparent}
.api-ex:hover{border-color:rgba(220,160,60,0.4);background:rgba(220,160,60,0.05)}
.api-ex.connected{border-color:rgba(80,200,120,0.35);background:rgba(80,200,120,0.05)}
.api-ex-name{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.5px;font-weight:700}
.api-ex-status{font-family:'IBM Plex Mono',monospace;font-size:8px;color:var(--txt3)}
.api-ex.connected .api-ex-status{color:var(--green)}
.api-connect-btn{margin:0 16px 14px}
.pos-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(95,191,184,0.1),transparent)}
.pos-pair{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;width:80px;flex-shrink:0;letter-spacing:0.5px}
.pos-lev{font-family:'Orbitron',sans-serif;font-size:9px;color:var(--amber);padding:2px 6px;border:1px solid rgba(220,160,60,0.25);border-radius:3px;letter-spacing:1px;flex-shrink:0}
.pos-side{font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:1px;padding:2px 7px;border-radius:3px;flex-shrink:0}
.pos-size{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--txt2);flex:1}
.pos-pnl{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;flex-shrink:0}
.pos-liq{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--txt3)}
.lev-rp-sec{padding:14px 16px;border-bottom:1px solid var(--border)}
.lev-rp-title{font-family:'Orbitron',sans-serif;font-size:8px;color:var(--txt3);letter-spacing:2.5px;margin-bottom:10px;display:flex;align-items:center;gap:5px}
.lev-rp-title::before{content:'';width:3px;height:3px;background:var(--cyan);border-radius:50%;box-shadow:0 0 4px var(--cyan);animation:dotBlink 2.2s ease-in-out infinite}
@keyframes marquee{from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
.usp-item{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--txt3);letter-spacing:1.5px;padding:0 32px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.usp-item::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 5px var(--cyan);flex-shrink:0}
.usp-item.hi{color:var(--cyan)}
.usp-item.hi::before{background:var(--green);box-shadow:0 0 5px var(--green)}
.venue-card{padding:12px 13px;border:1px solid rgba(255,255,255,0.08) !important;border-radius:0;background:linear-gradient(160deg,rgba(14,19,36,0.98) 0%,rgba(8,12,22,0.99) 100%) !important;cursor:pointer;transition:all 0.22s;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(109,232,225,0.08),0 4px 20px rgba(0,0,0,0.4) !important}
.venue-card:hover{border-color:rgba(109,232,225,0.2) !important;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(109,232,225,0.1),0 8px 32px rgba(0,0,0,0.5),0 0 0 1px rgba(109,232,225,0.06) !important}
.perp-card{border:1px solid rgba(255,255,255,0.07) !important;border-radius:0;background:linear-gradient(160deg,rgba(13,18,34,0.98) 0%,rgba(7,10,20,0.99) 100%) !important;overflow:hidden;margin-bottom:14px;position:relative;box-shadow:inset 0 1px 0 rgba(109,232,225,0.07),0 4px 20px rgba(0,0,0,0.4) !important}
.pos-card{display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid rgba(255,255,255,0.06) !important;border-radius:0;background:linear-gradient(135deg,rgba(255,255,255,0.025) 0%,rgba(0,0,0,0.2) 100%) !important;margin-bottom:7px;cursor:pointer;transition:all 0.16s ease !important;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,0.04) !important}
.pos-card:hover{border-color:rgba(109,232,225,0.15) !important;transform:translateX(2px)}
.lev-tab{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:500;color:rgba(255,255,255,0.35);background:transparent;border:none;border-bottom:2px solid transparent;padding:10px 18px;cursor:pointer;transition:all 0.2s;margin-bottom:-1px}
.lev-tab:hover{color:rgba(255,255,255,0.7)}
.lev-tab.on{color:var(--cyan);border-bottom-color:var(--cyan)}
.lev-view{width:100%;flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.pp-pair-sel{flex-shrink:0;margin-right:20px}
.pp-stat{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.pp-main{display:flex;flex:1;gap:0;min-height:0;overflow:hidden}
.pp-ss{flex:1;padding:9px;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;cursor:pointer;background:transparent;border:none;color:rgba(255,255,255,0.35);transition:all 0.2s}
.pp-ss.on.long{background:rgba(80,200,120,0.12);color:var(--green)}
.pp-ss.on.short{background:rgba(229,80,80,0.12);color:var(--red)}
.pp-lev-val{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:var(--cyan)}
.pp-lev-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,rgba(109,232,225,0.6),#4FFFAA);border-radius:2px;pointer-events:none}
.pp-lev-presets{display:flex;gap:4px}
.pp-lev-preset{flex:1;font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:0;padding:4px 0;cursor:pointer;transition:all 0.13s}
.pp-lev-preset:hover{color:var(--cyan);border-color:rgba(109,232,225,0.3)}
.pp-lev-preset.on{color:var(--cyan);border-color:rgba(109,232,225,0.4);background:rgba(109,232,225,0.07)}
.pp-tpsl-body{margin-bottom:12px}
.pp-tpsl-fields{display:flex;gap:6px}
.pp-tpsl-field{flex:1;background:rgba(0,0,0,0.2);border-radius:0;padding:8px;border:1px solid rgba(255,255,255,0.05)}
.pp-tpsl-field.tp{border-color:rgba(79,255,170,0.1)}
.pp-tpsl-field.sl{border-color:rgba(229,80,80,0.1)}
.pp-tpsl-field.tp .pp-tpsl-lbl{color:rgba(79,255,170,0.5)}
.pp-tpsl-field.sl .pp-tpsl-lbl{color:rgba(229,80,80,0.5)}
.pp-exec-btn.long{color:rgba(79,255,170,0.95)}
.pp-exec-btn.long:hover{text-shadow:0 0 12px rgba(79,255,170,0.4)}
.pp-exec-btn.short{background:linear-gradient(135deg,rgba(255,80,80,0.15),rgba(200,40,40,0.08));color:rgba(255,90,90,0.95)}
.pp-exec-btn.short:hover{text-shadow:0 0 12px rgba(255,90,90,0.4)}
.conn-type-tabs{display:flex;gap:4px;margin-bottom:12px}
.conn-tab{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:500;padding:6px 14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:7px;cursor:pointer;color:rgba(255,255,255,0.35);transition:all 0.18s}
.conn-tab:hover{color:#fff;border-color:rgba(255,255,255,0.18)}
.conn-tab.on{color:var(--cyan);border-color:rgba(109,232,225,0.35);background:rgba(109,232,225,0.06)}
.conn-note{font-family:'Space Grotesk',sans-serif;font-size:11px;color:rgba(255,255,255,0.35);background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:8px 12px;margin-bottom:12px;line-height:1.5}
.vc-auth-badge{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1px;color:rgba(79,255,170,0.6);border:1px solid rgba(79,255,170,0.2);border-radius:3px;padding:2px 5px;margin-top:4px;display:inline-block}
.evm-connect-prompt{border:1px solid rgba(109,232,225,0.15);border-radius:10px;padding:14px;background:rgba(109,232,225,0.03);margin-top:12px}
.ecp-title{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:1.5px;color:#fff;margin-bottom:6px}
.ecp-desc{font-family:'Space Grotesk',sans-serif;font-size:11px;color:rgba(255,255,255,0.35);margin-bottom:12px;line-height:1.5}
.ecp-steps{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.ecp-step{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-size:11px;color:rgba(255,255,255,0.5)}
.ecp-num{width:20px;height:20px;border-radius:50%;background:rgba(109,232,225,0.12);border:1px solid rgba(109,232,225,0.25);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--cyan);flex-shrink:0}
.ecp-btn{width:100%;padding:9px;font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;background:rgba(109,232,225,0.08);border:1px solid rgba(109,232,225,0.3);border-radius:8px;color:var(--cyan);cursor:pointer;transition:all 0.18s}
.ecp-btn:hover{background:rgba(109,232,225,0.14);box-shadow:0 0 14px rgba(109,232,225,0.15)}
.pp-side-btn.on.long{background:rgba(80,200,120,0.13);color:var(--green)}
.pp-side-btn.on.short{background:rgba(229,80,80,0.13);color:var(--red)}
.pp-lev-num{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:var(--cyan)}
.pp-lev-presets2{display:flex;gap:4px}
.pp-lev-presets2 button{flex:1;font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:0;padding:4px 0;cursor:pointer;transition:all 0.12s}
.pp-lev-presets2 button.on,.pp-lev-presets2 button:hover{color:var(--cyan);border-color:rgba(109,232,225,0.3);background:rgba(109,232,225,0.06)}
button.pp-lev-preset2{flex:1;min-width:0;font-family:'IBM Plex Mono',monospace;font-size:8px;color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:0;padding:4px 0;cursor:pointer;transition:all 0.12s}
button.pp-lev-preset2.on,button.pp-lev-preset2:hover{color:var(--cyan);border-color:rgba(109,232,225,0.3);background:rgba(109,232,225,0.06)}
#pp-lev-range2::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:rgba(109,232,225,0.9);cursor:pointer;box-shadow:0 0 8px rgba(109,232,225,0.5);border:2px solid #030610}
#pp-lev-range2::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:rgba(109,232,225,0.9);cursor:pointer;box-shadow:0 0 8px rgba(109,232,225,0.5);border:2px solid #030610}
/* Margin presets */
button.pp-margin-preset{flex:1;min-width:0;font-family:'IBM Plex Mono',monospace;font-size:8px;color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:0;padding:4px 0;cursor:pointer;transition:all 0.12s}
button.pp-margin-preset.on,button.pp-margin-preset:hover{color:var(--cyan);border-color:rgba(109,232,225,0.3);background:rgba(109,232,225,0.06)}
#pp-margin-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:rgba(109,232,225,0.9);cursor:pointer;box-shadow:0 0 6px rgba(109,232,225,0.4);border:2px solid #030610}
#pp-margin-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:rgba(109,232,225,0.9);cursor:pointer;box-shadow:0 0 6px rgba(109,232,225,0.4);border:2px solid #030610}
#pp-margin-input:focus{border-color:rgba(109,232,225,0.35)}
.pp-tpsl-toggle label{display:flex;align-items:center;gap:7px;font-family:'Space Grotesk',sans-serif;font-size:11px;color:rgba(255,255,255,0.4);cursor:pointer}
.pp-tpsl-f.tp{border:1px solid rgba(79,255,170,0.1)}
.pp-tpsl-f.sl{border:1px solid rgba(229,80,80,0.1)}

/* ═══ ORDER TYPES (Market / Limit / Scale In) ═══ */
.pp-order-types{display:flex;gap:0;padding:0 14px;margin-top:10px;margin-bottom:2px}
.pp-ot{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:600;letter-spacing:1px;padding:8px 0;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);color:rgba(255,255,255,0.3);cursor:pointer;transition:all 0.15s}
.pp-ot:hover{color:rgba(255,255,255,0.5);border-color:rgba(255,255,255,0.12)}
.pp-ot.on{color:rgba(109,232,225,0.9);border-color:rgba(109,232,225,0.25);background:rgba(109,232,225,0.05)}
.pp-ot svg{opacity:0.5;flex-shrink:0}
.pp-ot.on svg{opacity:0.8}
.pp-limit-price{padding:6px 14px}
.pp-limit-row{display:flex;align-items:center;gap:8px}
.pp-limit-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1.5px;color:rgba(255,255,255,0.2);width:70px;flex-shrink:0}
.pp-limit-input-wrap{flex:1;display:flex;align-items:center;gap:4px;background:rgba(0,0,0,0.3);border:1px solid rgba(109,232,225,0.1);padding:6px 8px}
.pp-limit-cur{font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(255,255,255,0.25)}
.pp-limit-inp{flex:1;background:none;border:none;outline:none;font-family:'IBM Plex Mono',monospace;font-size:14px;color:rgba(109,232,225,0.9)}
.pp-limit-note{font-family:'Space Grotesk',sans-serif;font-size:8px;color:rgba(255,255,255,0.15);margin-top:4px}
.pp-scalein-config{padding:6px 14px;display:flex;flex-direction:column;gap:6px}
.pp-scalein-row{display:flex;align-items:center;gap:8px}
.pp-scalein-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1.5px;color:rgba(255,255,255,0.2);width:70px;flex-shrink:0}
.pp-scalein-input-wrap{flex:1;display:flex;align-items:center;gap:4px;background:rgba(0,0,0,0.3);border:1px solid rgba(109,232,225,0.1);padding:4px 6px}
.pp-scalein-cur{font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(255,255,255,0.25)}
.pp-scalein-inp{flex:1;background:none;border:none;outline:none;font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(109,232,225,0.9);width:0;min-width:0}
.pp-si-tranche{flex:1;font-family:'IBM Plex Mono',monospace;font-size:8px;padding:4px 0;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);color:rgba(255,255,255,0.3);cursor:pointer;transition:all 0.12s;text-align:center}
.pp-si-tranche:hover{color:rgba(255,255,255,0.6);border-color:rgba(255,255,255,0.15)}
.pp-si-tranche.on{color:rgba(109,232,225,0.8);border-color:rgba(109,232,225,0.3);background:rgba(109,232,225,0.06)}
.pp-scalein-note{font-family:'Space Grotesk',sans-serif;font-size:8px;color:rgba(255,255,255,0.15)}

/* ═══ TP/SL EXIT CONDITIONS ═══ */
.pp-prot-cond-toggle{display:flex;align-items:center;gap:5px;margin-top:6px;padding:4px 0;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:0.5px;color:rgba(255,255,255,0.25);transition:color 0.15s}
.pp-prot-cond-toggle:hover{color:rgba(109,232,225,0.6)}
.pp-prot-cond-toggle svg{color:rgba(109,232,225,0.35);flex-shrink:0}
.pp-prot-cond-panel{margin-top:6px;padding:6px;background:rgba(0,0,0,0.2);border:1px solid rgba(109,232,225,0.08)}
.pp-prot-cond-note{font-family:'Space Grotesk',sans-serif;font-size:9px;color:rgba(255,255,255,0.25);line-height:1.4;margin-bottom:6px}
.pp-prot-cond-note em{color:rgba(109,232,225,0.6);font-style:normal;font-weight:600}
.pp-prot-cond-stack{display:flex;flex-direction:column;gap:3px}
.pp-prot-cond-item{display:flex;align-items:center;gap:6px;padding:4px 6px;background:rgba(109,232,225,0.02);border-left:2px solid rgba(109,232,225,0.2);font-family:'IBM Plex Mono',monospace;font-size:8px}
.pp-prot-cond-item .pp-pci-name{color:rgba(255,255,255,0.5);flex:1}
.pp-prot-cond-item .pp-pci-val{color:rgba(109,232,225,0.6);font-size:7px}
.pp-prot-cond-item .pp-pci-del{background:none;border:none;color:rgba(255,255,255,0.2);cursor:pointer;font-size:10px;padding:0 2px;transition:color 0.12s}
.pp-prot-cond-item .pp-pci-del:hover{color:rgba(255,90,90,0.7)}
.pp-prot-cond-add{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1.5px;color:rgba(109,232,225,0.4);padding:5px 0;cursor:pointer;text-align:center;border:1px dashed rgba(109,232,225,0.12);margin-top:4px;transition:all 0.12s}
.pp-prot-cond-add:hover{color:rgba(109,232,225,0.7);border-color:rgba(109,232,225,0.3);background:rgba(109,232,225,0.03)}

/* ═══ EXIT LEG (LEG 2) ═══ */
/* ═══ LEG 2 ACTIVE STATE — make it unmistakable ═══ */
.pp-leg2-active-banner { display:none; }
.pp-right-col.leg2-active .pp-leg2-active-banner { display:flex; align-items:center; gap:8px; padding:8px 14px; background:linear-gradient(90deg, rgba(157,127,234,0.08), rgba(157,127,234,0.02)); border-bottom:1px solid rgba(157,127,234,0.15); animation:leg2BannerIn 0.35s cubic-bezier(.16,1,.3,1); }
.pp-leg2-banner-dot { width:6px; height:6px; border-radius:50%; background:rgba(157,127,234,0.7); box-shadow:0 0 8px rgba(157,127,234,0.4); animation:leg2DotPulse 2s ease-in-out infinite; }
.pp-leg2-banner-text { font-family:'Orbitron',sans-serif; font-size:8px; font-weight:700; letter-spacing:2px; color:rgba(157,127,234,0.8); }
.pp-leg2-banner-hint { font-family:'IBM Plex Mono',monospace; font-size:7px; color:rgba(157,127,234,0.35); margin-left:auto; }
@keyframes leg2BannerIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
@keyframes leg2DotPulse { 0%,100%{opacity:0.6;box-shadow:0 0 4px rgba(157,127,234,0.2)} 50%{opacity:1;box-shadow:0 0 10px rgba(157,127,234,0.5)} }
/* Right col purple tint when leg2 active */
.pp-right-col.leg2-active { border-left-color:rgba(157,127,234,0.15) !important; }
#s6 .pp-right-col.leg2-active::after { background:linear-gradient(180deg, rgba(157,127,234,0.35) 0%, rgba(157,127,234,0.08) 40%, rgba(157,127,234,0.03) 100%) !important; }
#s6 .pp-right-col.leg2-active::before { background:linear-gradient(90deg, transparent, rgba(157,127,234,0.4) 20%, rgba(255,255,255,0.12) 50%, rgba(157,127,234,0.4) 80%, transparent) !important; }
/* Leg2 panel highlight when active */
.pp-leg2-trigger.active .pp-leg2-trigger-btn { border-color:rgba(157,127,234,0.25); background:rgba(157,127,234,0.04); }
.pp-leg2-trigger.active .pp-leg2-badge { background:rgba(157,127,234,0.12); border-color:rgba(157,127,234,0.35); color:rgba(157,127,234,0.9); }
.pp-leg2-panel.active { border-color:rgba(157,127,234,0.2) !important; border-left:2px solid rgba(157,127,234,0.4) !important; }

/* ═══ PROTECTION CONDITION GRID — inline picker matching main conditions ═══ */
.prot-cond-grid { margin:6px 0; }
.prot-grid-item { padding:5px 6px; background:rgba(109,232,225,0.015); border:1px solid rgba(109,232,225,0.06); cursor:pointer; transition:border-color 0.12s; }
.prot-grid-item:hover { border-color:rgba(109,232,225,0.2); }
.pgi-title { font-family:'IBM Plex Mono',monospace; font-size:7px; font-weight:600; color:rgba(255,255,255,0.55); }
.pgi-sub { font-family:'IBM Plex Mono',monospace; font-size:8px; color:rgba(255,255,255,0.15); }

.pp-leg2-trigger{padding:6px 14px}
.pp-leg2-trigger-btn{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border:1px solid rgba(109,232,225,0.1);background:rgba(109,232,225,0.02);cursor:pointer;transition:all 0.18s}
.pp-leg2-trigger-btn:hover{border-color:rgba(109,232,225,0.25);background:rgba(109,232,225,0.04)}
.pp-leg2-trigger-left{display:flex;align-items:center;gap:8px;color:rgba(109,232,225,0.4)}
.pp-leg2-trigger-left svg{flex-shrink:0}
.pp-leg2-main{font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:700;letter-spacing:2px;color:rgba(255,255,255,0.5)}
.pp-leg2-sub{font-family:'Space Grotesk',sans-serif;font-size:8px;color:rgba(255,255,255,0.2);margin-top:1px}
.pp-leg2-badge{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1.5px;padding:3px 8px;border:1px solid rgba(109,232,225,0.2);color:rgba(109,232,225,0.5);transition:all 0.15s;flex-shrink:0}
.pp-leg2-trigger-btn:hover .pp-leg2-badge{border-color:rgba(109,232,225,0.4);color:rgba(109,232,225,0.8);background:rgba(109,232,225,0.06)}
.pp-leg2-trigger.active .pp-leg2-badge{background:rgba(109,232,225,0.1);border-color:rgba(109,232,225,0.4);color:rgba(109,232,225,0.9)}
.pp-leg2-panel{margin:0 14px 6px;border:1px solid rgba(109,232,225,0.12);background:rgba(6,10,20,0.8)}
.pp-leg2-header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid rgba(109,232,225,0.08)}
.pp-leg2-title{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:rgba(109,232,225,0.5)}
.pp-leg2-close{background:none;border:none;color:rgba(255,255,255,0.25);cursor:pointer;font-size:12px;padding:2px 4px;transition:color 0.12s}
.pp-leg2-close:hover{color:rgba(255,90,90,0.7)}
.pp-leg2-body{padding:8px 10px;display:flex;flex-direction:column;gap:8px}
.pp-leg2-row{display:flex;align-items:center;gap:8px}
.pp-leg2-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1px;color:rgba(255,255,255,0.25);width:60px;flex-shrink:0}
.pp-leg2-actions{display:flex;gap:3px;flex:1}
.pp-leg2-action,.pp-leg2-tok,.pp-leg2-pct{font-family:'IBM Plex Mono',monospace;font-size:7px;padding:4px 8px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);color:rgba(255,255,255,0.3);cursor:pointer;transition:all 0.12s;flex:1;text-align:center}
.pp-leg2-action:hover,.pp-leg2-tok:hover,.pp-leg2-pct:hover{color:rgba(255,255,255,0.6);border-color:rgba(255,255,255,0.15)}
.pp-leg2-action.on,.pp-leg2-tok.on,.pp-leg2-pct.on{color:rgba(109,232,225,0.8);border-color:rgba(109,232,225,0.3);background:rgba(109,232,225,0.06)}
.pp-leg2-summary{font-family:'Space Grotesk',sans-serif;font-size:9px;color:rgba(109,232,225,0.4);padding:4px 0;border-top:1px solid rgba(109,232,225,0.06)}

/* ═══ CHART INDICATORS ═══ */
.pp-indicators-bar{display:flex;align-items:center;gap:6px;padding:4px 8px;border-bottom:1px solid rgba(109,232,225,0.06)}
.pp-ind-btn{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1px;padding:3px 8px;background:rgba(109,232,225,0.04);border:1px solid rgba(109,232,225,0.12);color:rgba(109,232,225,0.5);cursor:pointer;transition:all 0.12s;display:flex;align-items:center;gap:4px}
.pp-ind-btn:hover{border-color:rgba(109,232,225,0.3);color:rgba(109,232,225,0.8);background:rgba(109,232,225,0.08)}
.pp-ind-btn svg{width:10px;height:10px}
.pp-ind-active{display:flex;flex-wrap:wrap;gap:3px;flex:1;min-width:0}
.pp-ind-pill{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.5px;padding:2px 6px;background:rgba(109,232,225,0.06);border:1px solid rgba(109,232,225,0.15);color:rgba(109,232,225,0.6);display:flex;align-items:center;gap:4px;cursor:default}
.pp-ind-pill .pp-ind-x{cursor:pointer;color:rgba(255,255,255,0.2);font-size:8px;transition:color 0.12s;padding:0 1px}
.pp-ind-pill .pp-ind-x:hover{color:rgba(255,90,90,0.7)}
.pp-ind-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;background:rgba(2,4,10,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);align-items:center;justify-content:center}
.pp-ind-modal.vis{display:flex}
.pp-ind-card{width:520px;max-width:calc(100vw - 32px);max-height:70vh;background:linear-gradient(165deg,rgba(16,22,42,0.99) 0%,rgba(8,11,22,1) 100%);border:1px solid rgba(109,232,225,0.15);display:flex;flex-direction:column;overflow:hidden}
.pp-ind-card-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(109,232,225,0.08)}
.pp-ind-card-title{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2px;color:rgba(255,255,255,0.8)}
.pp-ind-card-close{background:none;border:none;color:rgba(255,255,255,0.3);cursor:pointer;font-size:16px;padding:2px 6px;transition:color 0.12s}
.pp-ind-card-close:hover{color:rgba(255,90,90,0.7)}
.pp-ind-search{padding:8px 14px}
.pp-ind-search input{width:100%;background:rgba(0,0,0,0.3);border:1px solid rgba(109,232,225,0.12);padding:8px 10px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(255,255,255,0.8);outline:none;transition:border-color 0.15s}
.pp-ind-search input::placeholder{color:rgba(255,255,255,0.2)}
.pp-ind-search input:focus{border-color:rgba(109,232,225,0.35)}
.pp-ind-cats{display:flex;gap:4px;padding:0 14px 10px}
.pp-ind-cat{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:1px;padding:6px 12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.4);cursor:pointer;transition:all 0.12s;white-space:nowrap}
.pp-ind-cat:hover{color:rgba(255,255,255,0.6);border-color:rgba(255,255,255,0.2);background:rgba(255,255,255,0.05)}
.pp-ind-cat.on{color:rgba(109,232,225,0.9);border-color:rgba(109,232,225,0.35);background:rgba(109,232,225,0.08)}
.pp-ind-list{flex:1;overflow-y:auto;padding:0 14px 14px;display:flex;flex-direction:column;gap:2px;scrollbar-width:none}
.pp-ind-list::-webkit-scrollbar{display:none}
.pp-ind-item{display:flex;align-items:center;justify-content:space-between;padding:7px 8px;border:1px solid transparent;cursor:pointer;transition:all 0.12s}
.pp-ind-item:hover{background:rgba(109,232,225,0.03);border-color:rgba(109,232,225,0.08)}
.pp-ind-item.active{background:rgba(109,232,225,0.05);border-color:rgba(109,232,225,0.15)}
.pp-ind-item-left{display:flex;flex-direction:column;gap:1px}
.pp-ind-item-name{font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(255,255,255,0.7);font-weight:600}
.pp-ind-item-desc{font-family:'Space Grotesk',sans-serif;font-size:8px;color:rgba(255,255,255,0.2)}
.pp-ind-item-tag{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.5px;padding:2px 5px;border:1px solid rgba(109,232,225,0.15);color:rgba(109,232,225,0.4)}
.pp-exec{width:100%;padding:12px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;letter-spacing:2px;border:none;border-radius:0;cursor:pointer;transition:all 0.2s;background:rgba(109,232,225,0.06);color:rgba(109,232,225,0.9);margin-bottom:5px}
.pp-exec:hover{box-shadow:0 6px 28px rgba(79,255,170,0.32);transform:translateY(-1px)}
.pp-exec.short-mode{background:linear-gradient(135deg,#6b1a1a,#9b0f0f);box-shadow:0 4px 20px rgba(229,80,80,0.18)}

/* ═══ PERPS INLINE CONDITIONS ═══ */
.pp-cond-item{display:flex;align-items:center;gap:6px;padding:6px 8px;margin-bottom:3px;background:rgba(109,232,225,0.02);border-left:2px solid rgba(109,232,225,0.2);font-family:'IBM Plex Mono',monospace;font-size:8px}
.pp-ci-dot{width:4px;height:4px;border-radius:50%;background:rgba(109,232,225,0.5);box-shadow:0 0 4px rgba(109,232,225,0.3);flex-shrink:0}
.pp-ci-name{color:rgba(255,255,255,0.6);white-space:nowrap}
.pp-ci-val{color:rgba(109,232,225,0.7);margin-left:auto;white-space:nowrap;font-size:7px}
.pp-ci-edit{background:none;border:none;color:rgba(109,232,225,0.35);font-size:9px;cursor:pointer;padding:2px 4px;transition:color .12s;flex-shrink:0}
.pp-ci-edit:hover{color:rgba(109,232,225,0.8)}
.pp-ci-del{background:none;border:none;color:rgba(255,255,255,0.15);font-size:11px;cursor:pointer;padding:2px 4px;transition:color .12s;flex-shrink:0}
.pp-ci-del:hover{color:rgba(255,90,90,0.7)}
.pp-ci-weight{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;flex-shrink:0;cursor:pointer;transition:all 0.15s;letter-spacing:0.3px;text-shadow:0 0 6px rgba(109,232,225,0.3)}
.pp-ci-weight:hover{background:rgba(109,232,225,0.14);border-color:rgba(109,232,225,0.35)}

/* ═══════════════════════════════════════════════════
   TABLET LAYOUT — 768px
   ═══════════════════════════════════════════════════ */
/* ── Desktop: enforce side-by-side chart + panel layout ── */
@media(min-width:769px){
  .pp-main-layout{display:flex !important;flex-direction:row !important;flex:1;min-height:0}
  .pp-chart-col{flex:1 !important;min-width:0 !important;display:flex !important;flex-direction:column !important}
  .pp-right-col{width:280px !important;flex-shrink:0 !important;display:flex !important;flex-direction:column !important}
}
/* ── Tablet landscape (1024px) ── */
@media(max-width:1024px){
.pp-right-col{max-width:280px !important;min-width:240px !important}
  .pp-chart-col{flex:1 !important}
  .pp-market-stats{gap:8px}
  .pp-sb-s{padding:0 6px}
  .venue-grid{grid-template-columns:1fr 1fr !important}
}

/* ── Tablet + large phone (768px) ── */
@media(max-width:768px){
  .pp-main-layout{flex-direction:column !important}
  .pp-chart-col{height:38vh !important;min-height:220px !important;max-height:340px !important}
  .pp-right-col{width:100% !important;max-width:none !important;border-left:none !important;border-top:1px solid rgba(109,232,225,0.07) !important}
  .pp-pos-tray{width:100% !important}
  .pp-top-bar{flex-wrap:wrap;gap:6px}
  .pp-market-stats{flex-wrap:wrap;gap:6px}
}

/* ═══════════════════════════════════════════════════
   MOBILE LAYOUT — 480px and below
   Stack: chart top → order card → positions bottom
   ═══════════════════════════════════════════════════ */
@media(max-width:480px){

  /* ─── Dashboard view: single column ─── */
  #lev-view-dash .lev-body{
    flex-direction:column !important;
  }
  #lev-view-dash .lev-left{
    padding:12px !important;
  }
  #lev-view-dash .lev-right{
    width:100% !important;
    border-left:none !important;
    border-top:1px solid rgba(109,232,225,0.07) !important;
  }
  .venue-grid{
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
  }

  /* Hide resize handle on mobile — layout is stacked */
  .pp-resize-handle{display:none !important}

  /* ─── Perps trading view: vertical stack ─── */
  .pp-main-layout{
    flex-direction:column !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-bottom:env(safe-area-inset-bottom, 0px) !important;
  }

  /* ─── Top bar: pair + stats compact, scrollable ─── */
  .pp-top-bar{
    height:auto !important;
    min-height:40px !important;
    padding:0 10px !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
  }
  .pp-pair-selector{
    flex-shrink:0 !important;
  }
  .pp-stats-bar{
    overflow-x:auto !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch;
    flex-shrink:1 !important;
    min-width:0 !important;
    gap:0 !important;
  }
  .pp-stats-bar::-webkit-scrollbar{display:none}
  .pp-sb-s{
    flex-shrink:0 !important;
    white-space:nowrap !important;
    padding:0 8px !important;
  }
  .pp-sb-v{
    font-size:9px !important;
  }
  .pp-sb-sep{
    height:18px !important;
  }

  /* ─── Chart: full-width, 40vh height ─── */
  .pp-chart-col{
    flex:none !important;
    height:40vh !important;
    min-height:220px !important;
    max-height:340px !important;
  }
  .pp-chart-wrap{
    flex:1 !important;
    min-height:0 !important;
  }

  /* Timeframe dropdown: bigger tap target on mobile */
  .pp-tf-bar{
    padding:6px 10px !important;
  }
  .pp-tf-trigger{
    min-height:36px !important;
    padding:6px 14px !important;
    font-size:11px !important;
  }
  .pp-tf-dropdown{
    min-width:140px !important;
  }
  .pp-tf-opt{
    min-height:36px !important;
    display:flex !important;
    align-items:center !important;
    padding:8px 14px !important;
    font-size:11px !important;
  }
  /* OHLC row: smaller on mobile */
  .pp-ohlc-row{
    font-size:7px !important;
    gap:4px !important;
    margin-left:auto !important;
    flex-shrink:0 !important;
  }

  /* ─── Positions tray: stays below chart ─── */
  .pp-pos-tray{
    flex-shrink:0 !important;
  }
  .pp-pos-head{
    min-height:40px !important;
    padding:8px 12px !important;
  }
  .pp-pos-row{
    padding:8px 12px !important;
    font-size:9px !important;
  }
  .pp-pos-close{
    min-height:28px !important;
    padding:4px 10px !important;
    font-size:8px !important;
  }

  /* ─── Right panel → full-width order card below chart ─── */
  .pp-right-col{
    width:100% !important;
    border-left:none !important;
    overflow:visible !important;
  }
  #s6 .pp-right-col::after{
    display:none !important;
  }
  #s6 .pp-right-col::before{
    display:block !important;
  }

  /* Side buttons: chunky tap targets */
  #s6 .pp-side-btn{
    padding:14px 10px !important;
    font-size:10px !important;
    min-height:44px !important;
  }

  /* Leverage presets: bigger */
  .pp-lev-preset2,
  button.pp-lev-preset2{
    min-height:36px !important;
    padding:8px 0 !important;
    font-size:9px !important;
  }

  /* Condition section */
  #s6 .pp-cond-section{
    margin:8px 10px !important;
    padding:10px !important;
  }
  .pp-fl{
    min-height:32px !important;
    padding:6px 10px !important;
  }
  #s6 .pp-add-cond{
    min-height:40px !important;
    padding:10px !important;
    font-size:9px !important;
  }

  /* TP/SL percent buttons — override inline styles for proper tap targets */
  .pp-tpsl-section button,
  .pp-tpsl-fields button{
    min-height:36px !important;
    padding:8px 4px !important;
    font-size:9px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .pp-tpsl-section input{
    min-height:36px !important;
  }

  /* Slippage buttons */
  .pp-slip-btn{
    min-height:28px !important;
    padding:4px 10px !important;
    font-size:8px !important;
  }

  /* Summary receipt */
  #s6 .pp-summary{
    margin:8px 10px !important;
  }

  /* Execute button */
  #s6.on .pp-exec-outer{
    margin:8px 10px 4px !important;
  }
  #s6 .pp-exec-btn{
    padding:16px !important;
    font-size:11px !important;
    letter-spacing:3px !important;
    min-height:48px !important;
  }
  #s6.on .pp-exec-note{
    font-size:8px !important;
    padding:6px 10px 12px !important;
  }

  /* Condition picker grid: still 2-col but bigger items */
  #pp-cond-picker > div{
    grid-template-columns:1fr 1fr !important;
    gap:4px !important;
  }
  #pp-cond-picker > div > div{
    padding:8px !important;
    min-height:40px !important;
  }

  /* Confirmation modal: full-width */
  .pp-confirm-card{
    width:100% !important;
    max-width:calc(100vw - 24px) !important;
  }

  /* Quick % buttons in collateral */
  .pcb-quick{
    min-height:36px !important;
    padding:8px 0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* Leverage presets in dashboard view */
  .lp{
    min-height:36px !important;
    padding:8px 10px !important;
    display:inline-flex !important;
    align-items:center !important;
  }

  /* Tap feedback */
  #s6 .pp-side-btn:active{transform:scale(0.97)}
  .pp-lev-preset2:active,button.pp-lev-preset2:active{transform:scale(0.95)}
  .pp-tf-trigger:active{transform:scale(0.97)}
  .pp-tf-opt:active{transform:scale(0.97)}
  .pp-fl:active{transform:scale(0.95)}
  .pp-slip-btn:active{transform:scale(0.95)}
  .pcb-quick:active{transform:scale(0.95)}
  .pp-pos-close:active{transform:scale(0.95)}

  /* Pair dropdown: full-width on mobile */
  .pp-search-dropdown{
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    width:auto !important;
    top:auto !important;
    max-height:60vh !important;
    z-index:99999 !important;
  }
  /* Pair selector trigger: bigger tap target */
  .pp-active-pair{
    min-height:40px !important;
    padding:8px 10px !important;
  }
  .pp-ap-change{
    font-size:8px !important;
  }
  /* Dropdown items: bigger tap targets + readable text */
  .pp-dd-item{
    min-height:44px !important;
    padding:12px 10px !important;
  }
  .pp-dd-search-input{
    font-size:16px !important;
    padding:10px 12px !important;
    min-height:40px !important;
  }
  .pp-dd-venue{
    font-size:7px !important;
    max-width:50px !important;
  }

  /* Leverage slider thumb: easier to grab on touch */
  #pp-lev-range2::-webkit-slider-thumb{
    width:20px !important;
    height:20px !important;
  }
  #pp-lev-range2::-moz-range-thumb{
    width:20px !important;
    height:20px !important;
  }

  /* Position rows: allow wrapping on narrow screens */
  .pp-pos-row{
    flex-wrap:wrap !important;
  }
  .pp-pos-close{
    color:rgba(255,255,255,0.45) !important;
  }

  /* Risk meter: full-width */
  #s6 .pp-risk-meter{
    padding:6px 10px !important;
  }

  /* ─── Order types: full-width, bigger tap targets ─── */
  .pp-order-types{padding:0 10px !important}
  .pp-ot{padding:10px 0 !important;font-size:9px !important;min-height:40px !important}
  .pp-limit-price{padding:6px 10px !important}
  .pp-limit-inp{font-size:16px !important}
  .pp-scalein-config{padding:6px 10px !important}
  .pp-scalein-row{flex-wrap:wrap !important}
  .pp-scalein-lbl{width:100% !important;margin-bottom:2px !important}
  .pp-si-tranche{min-height:36px !important}

  /* ─── Inline conditions: bigger tap targets ─── */
  .pp-cond-item{
    padding:8px 10px !important;
    font-size:9px !important;
    min-height:36px !important;
  }
  .pp-ci-edit,.pp-ci-del{
    min-height:28px !important;
    min-width:28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .pp-ci-edit:active,.pp-ci-del:active{transform:scale(0.9)}

  /* ─── Sticky execute bar on mobile ─── */
  #s6.on .pp-exec-outer{
    position:sticky !important;
    bottom:0 !important;
    margin:8px 0 0 !important;
    padding:8px 12px !important;
    background:rgba(4,8,18,0.95) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    border-top:1px solid rgba(109,232,225,0.08) !important;
    z-index:90 !important;
  }
  #s6.on .pp-exec-note{
    display:none !important;
  }
  /* Adjust bracket corners to sit on the button edges (accounting for container padding 8px 12px) */
  #s6.on .pp-exec-outer .dw-tl{top:6px !important;left:10px !important}
  #s6.on .pp-exec-outer .dw-tr{top:6px !important;right:10px !important}
  #s6.on .pp-exec-outer .dw-bl{bottom:6px !important;left:10px !important}
  #s6.on .pp-exec-outer .dw-br{bottom:6px !important;right:10px !important}

  /* ─── S6 footer: match S2 mobile treatment ─── */
  #s6-foot{
    position:static !important;
    flex-shrink:0 !important;
    height:40px !important;
    display:flex !important;
    align-items:center !important;
    padding:0 12px !important;
    gap:0 !important;
  }
  #s6-foot::before{display:none !important}
  #s6-foot .foot-dots{
    margin-left:auto !important;
    flex-shrink:0 !important;
    gap:4px !important;
  }
  #s6-foot .foot-dots .foot-nd{width:4px !important;height:4px !important}
  #s6-foot .foot-dots .foot-nd.on{width:16px !important;height:4px !important}
  /* Micro controls: inline in footer to match S2 mobile */
  #s6-foot .foot-micro-controls{
    position:static !important;
    bottom:auto !important;
    right:auto !important;
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
    flex-shrink:0 !important;
    z-index:auto !important;
  }
  #s6-foot .foot-micro-btn{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    background:rgba(255,255,255,0.04) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-color:rgba(255,255,255,0.08) !important;
  }
  #s6-foot .dex-foot-trust{
    position:relative !important;
    min-width:0 !important;
    height:20px !important;
    flex:1 !important;
  }
  #s6-foot .fi-sep{
    display:none !important;
  }
  #s6-foot .fi.df-fi{
    position:absolute !important;
    left:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    opacity:0 !important;
    transition:opacity 0.6s ease !important;
    pointer-events:none !important;
    padding:0 !important;
    white-space:nowrap !important;
    font-family:'IBM Plex Mono',monospace !important;
    font-size:8px !important;
    color:rgba(255,255,255,0.35) !important;
    gap:4px !important;
  }
  #s6-foot .fi.df-fi.trust-active{
    opacity:1 !important;
    pointer-events:auto !important;
  }

  /* ─── Exit conditions: bigger tap targets ─── */
  .pp-prot-cond-toggle{padding:6px 0 !important;font-size:8px !important}
  .pp-prot-cond-add{padding:8px 0 !important;font-size:8px !important;min-height:36px !important;display:flex !important;align-items:center !important;justify-content:center !important}
  .pp-prot-cond-item{padding:6px 8px !important;min-height:32px !important}
  .pp-prot-cond-item .pp-pci-del{min-width:28px !important;min-height:28px !important;font-size:14px !important}

  /* ─── Protection condition grid: bigger tap targets on mobile ─── */
  .prot-grid-item{padding:8px !important;min-height:40px !important}
  .prot-cond-add{min-height:40px !important;display:flex !important;align-items:center !important;justify-content:center !important}

  /* ─── Leg 2 banner: more prominent on mobile ─── */
  .pp-right-col.leg2-active .pp-leg2-active-banner{padding:10px 14px !important}
  .pp-leg2-banner-text{font-size:9px !important}

  /* ─── Exit leg: mobile layout ─── */
  .pp-leg2-trigger{padding:6px 10px !important}
  .pp-leg2-trigger-btn{padding:10px !important}
  .pp-leg2-panel{margin:0 10px 6px !important}
  .pp-leg2-row{flex-wrap:wrap !important;gap:4px !important}
  .pp-leg2-lbl{width:100% !important;margin-bottom:2px !important}
  .pp-leg2-action,.pp-leg2-tok,.pp-leg2-pct{min-height:36px !important;display:flex !important;align-items:center !important;justify-content:center !important}

  /* ─── Indicators bar: scrollable on mobile ─── */
  .pp-indicators-bar{overflow-x:auto !important;flex-wrap:nowrap !important;scrollbar-width:none !important}
  .pp-indicators-bar::-webkit-scrollbar{display:none}
  .pp-ind-btn{white-space:nowrap !important;min-height:32px !important}

  /* ─── Indicator modal: full-screen on mobile ─── */
  .pp-ind-card{width:100% !important;max-width:100% !important;max-height:100vh !important;height:100vh !important;border:none !important}
  .pp-ind-item{min-height:40px !important}
  .pp-ind-search input{min-height:40px !important;font-size:14px !important}
  #s6-foot .fi.df-fi.trust-active{
    opacity:1 !important;
    pointer-events:auto !important;
  }
}

/* ═══ S6 Focus-visible states ═══ */
#s6 .pp-side-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
#s6 .pp-slip-btn:focus-visible,#s6 .pp-lev-preset2:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
#s6 #pp-tp2:focus,#s6 #pp-sl2:focus{box-shadow:0 0 0 2px rgba(109,232,225,0.25)}
#s6 #pp-lev-range2:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
#s6 #pp-exec:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}

/* ── iPhone 14 Pro refinements (393px–428px) ── */
@media(max-width:428px){
  /* Safe area insets */
  #s6.on{padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px)}

  /* iOS zoom prevention: bump all inputs from 14px to 16px */
  .plr-input,.ptb-input,.pp-slip-custom-input,.pp-ind-search input{font-size:16px !important}
  #pp-tp2,#pp-sl2{font-size:16px !important}
  .pp-amt2{font-size:16px !important}

  /* Chart: tighter for 393px viewport */
  .pp-chart-col{height:36vh !important;min-height:180px !important}

  /* Top bar: tighter */
  .pp-top-bar{padding:0 8px !important;gap:4px !important}
  .pp-pair-sel{font-size:11px !important}

  /* Order card buttons: ensure 44px tap targets */
  .pp-ot{min-height:44px !important}
  .pp-side-btn{min-height:44px !important}
  .pp-exec{min-height:48px !important}
  .pp-confirm-go{min-height:48px !important}
  .pp-confirm-cancel{min-height:44px !important}

  /* Leverage presets: tap targets */
  .pp-lev-preset,.pp-lev-preset2{min-height:40px !important;padding:6px 0 !important}

  /* Timeframe tabs: tap targets */
  .pp-tf-opt{min-height:40px !important}

  /* Slider thumb: larger for touch */
  #pp-lev-range2::-webkit-slider-thumb{width:28px !important;height:28px !important}
}

/* ═══ SOLANA-ONLY MVP — hide multi-chain UI ═══ */
/* EVM wallet tab + panel, CEX API tab + panel */
.conn-tab[onclick*="'evm'"],
.conn-tab[onclick*="'cex'"],
#conn-evm,#conn-cex,
.evm-connect-prompt,
/* EVM venue cards (Hyperliquid, GMX, dYdX…) and the CEX API cards offer
   connections Tenon has no integration for. The markup stays for a future
   multi-chain launch; showing it now is an offer we cannot honour. */
.evm-venue,.cex-venue,
#ecp-overlay,.exchange-connect-panel{display:none !important}
/* Non-Solana venue buttons in swap receipt */
#vc-paraswap,#vc-lifi,#vc-0x{display:none !important}

/* ═══════════════════════════════════════════════════
   ULTRA-SMALL MOBILE — 375px and below
   Tighter padding, compact controls, iOS zoom prevention
   ═══════════════════════════════════════════════════ */
@media(max-width:375px){

  /* Chart: reduced min-height for tiny screens */
  .pp-chart-col{
    height:34vh !important;
    min-height:160px !important;
    max-height:280px !important;
  }

  /* Top bar: compact pair selector */
  .pp-top-bar{
    padding:0 6px !important;
    gap:3px !important;
    min-height:36px !important;
  }
  .pp-pair-sel{
    font-size:10px !important;
    margin-right:8px !important;
  }
  .pp-sb-s{
    padding:0 4px !important;
  }
  .pp-sb-v{
    font-size:8px !important;
  }

  /* Right panel: tighter padding */
  .pp-right-col{
    padding:0 !important;
  }
  #s6 .pp-side-btn{
    padding:12px 8px !important;
    font-size:9px !important;
    min-height:44px !important;
  }

  /* Leverage slider labels smaller */
  .pp-lev-val{
    font-size:12px !important;
  }
  .pp-lev-preset2,
  button.pp-lev-preset2{
    min-height:36px !important;
    font-size:8px !important;
    padding:6px 0 !important;
  }

  /* Collateral / amount inputs: iOS zoom prevention (>=16px) */
  .plr-input,.ptb-input,.pp-amt2,#pp-tp2,#pp-sl2,
  .pp-slip-custom-input,.pp-ind-search input{
    font-size:16px !important;
  }
  .plr-label{
    font-size:7px !important;
    letter-spacing:1px !important;
  }

  /* Position cards: compact */
  .pp-pos-row{
    padding:6px 8px !important;
    font-size:8px !important;
  }
  .pp-pos-head{
    padding:6px 8px !important;
    min-height:36px !important;
  }
  .pp-pos-close{
    min-height:28px !important;
    padding:3px 8px !important;
    font-size:7px !important;
  }

  /* Condition section: tighter */
  #s6 .pp-cond-section{
    margin:6px 6px !important;
    padding:8px !important;
  }
  #s6 .pp-add-cond{
    min-height:40px !important;
    padding:8px !important;
    font-size:8px !important;
  }

  /* Execute button */
  #s6 .pp-exec-btn{
    padding:14px !important;
    font-size:10px !important;
    letter-spacing:2px !important;
    min-height:48px !important;
  }
  #s6.on .pp-exec-outer{
    margin:6px 6px 4px !important;
  }

  /* Confirmation modal: tighter */
  .pp-confirm-card{
    max-width:calc(100vw - 16px) !important;
    padding:14px !important;
  }

  /* Timeframe tabs: 44px tap targets */
  .pp-tf-opt{
    min-height:40px !important;
    padding:8px 12px !important;
    font-size:10px !important;
  }
  .pp-tf-trigger{
    min-height:36px !important;
    font-size:10px !important;
  }

  /* Venue grid: single column on ultra-small */
  .venue-grid{
    grid-template-columns:1fr !important;
    gap:4px !important;
  }
}

/* ═══════════════════════════════════════════════════
   WIDE DESKTOP — 1440px and above
   Wider layout, roomier trading panel and chart
   ═══════════════════════════════════════════════════ */
@media(min-width:1440px){

  /* Chart area: fill all available space */
  .pp-chart-col{
    flex:1 !important;
  }

  /* Market stats: roomier spacing */
  .pp-market-stats{
    gap:16px !important;
  }
  .pp-sb-s{
    padding:0 12px !important;
  }

  /* Position tray: roomier rows */
  .pp-pos-row{
    padding:12px 20px !important;
    font-size:11px !important;
  }
  .pp-pos-head{
    padding:12px 20px !important;
  }

  /* Order card: comfortable padding */
  #s6 .pp-side-btn{
    padding:16px 14px !important;
  }
  .pp-lev-preset2,
  button.pp-lev-preset2{
    padding:10px 0 !important;
  }

  /* Condition section: more room */
  #s6 .pp-cond-section{
    margin:12px 16px !important;
    padding:14px !important;
  }

  /* Execute button: wider margins */
  #s6.on .pp-exec-outer{
    margin:12px 16px 8px !important;
  }
}

/* ═══ PERPS COMING SOON banner (MVP gating) ═══ */
#s6 .perps-soon-banner{display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 14px;background:linear-gradient(180deg,rgba(255,215,0,0.06),rgba(255,215,0,0.015));border-top:1px solid rgba(255,215,0,0.25);border-bottom:1px solid rgba(255,215,0,0.25);font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:2px;color:rgba(255,215,0,0.85);text-transform:uppercase}
#s6 .perps-soon-banner .pss-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,215,0,0.8);box-shadow:0 0 6px rgba(255,215,0,0.6);flex-shrink:0}

/* Custody disclosure on the perps confirm modal. Perps are a margin product —
   collateral is deposited into the venue's program, unlike a spot swap where
   funds stay in the wallet. Saying so at the moment of consequence is the
   difference between an informed signature and a surprise. */
.pp-confirm-note{font-family:'IBM Plex Mono',monospace;font-size:9px;line-height:1.55;
  color:rgba(255,215,0,0.7);background:rgba(255,215,0,0.05);border:1px solid rgba(255,215,0,0.16);
  padding:7px 9px;margin:8px 0 2px;letter-spacing:0.2px}

/* Custody + funding banner on the perps form itself. The confirm modal already
   discloses this, but a user deciding whether to trade perps at all should not
   have to reach the signing step to learn that collateral leaves the wallet and
   that holding costs money. */
.pp-custody-banner{display:flex;gap:8px;align-items:flex-start;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;line-height:1.6;letter-spacing:0.2px;
  color:rgba(255,215,0,0.72);background:rgba(255,215,0,0.045);
  border:1px solid rgba(255,215,0,0.15);padding:8px 10px;margin:0 0 10px}
.pp-custody-banner b{color:rgba(255,215,0,0.95);font-weight:600}
.pp-cb-icon{flex-shrink:0;font-size:11px;line-height:1.4;opacity:.85}
.pp-help{display:inline-block;width:11px;height:11px;line-height:11px;text-align:center;
  border:1px solid rgba(255,255,255,.2);border-radius:50%;font-size:8px;
  color:rgba(255,255,255,.45);cursor:help;margin-left:3px;vertical-align:middle}
@media(max-width:480px){.pp-custody-banner{font-size:9px;padding:7px 8px}}
/* Standalone variant (outside the conditions box): follow the section's side margins */
#s6 .pp-custody-standalone{margin:10px 12px 0}
@media(max-width:768px){#s6 .pp-custody-standalone{margin:8px 10px 0}}

/* Empty state for the open-positions tray. Previously the tray shipped two
   fabricated positions; an honest "none" is the correct resting state. */
.pp-pos-empty{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:1px;
  color:rgba(255,255,255,0.28);padding:10px 12px;text-align:center}

/* The market stat bar scrolls horizontally on narrow screens (six cells never
   fit). It did so with no affordance, so the cut-off edge read as a layout bug
   rather than "there is more this way". A fade on the trailing edge is the
   cheapest honest hint. */
@media(max-width:768px){
  .pp-stats-bar{position:relative;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%)}
}

/* Pair-picker rows: the ticker and the pair name were touching, reading as one
   mangled word ("RENDERRENDER-PERP"). Give the ticker a fixed column and the
   name room to breathe. */
.pp-dd-sym{min-width:74px;flex-shrink:0;padding-right:12px}
.pp-dd-name{padding-left:2px;opacity:.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:480px){
  .pp-dd-sym{min-width:62px;padding-right:8px}
}

/* Fee small print under the position summary — derived from the backend's
   real knobs by ppRefreshPositionSummary, hidden until they arrive. */
.perp-fee-fineprint{
  font-family:'IBM Plex Mono',monospace;font-size:8px;line-height:1.5;
  color:rgba(255,255,255,0.28);margin-top:7px;padding-top:7px;
  border-top:1px solid rgba(255,255,255,0.04);letter-spacing:0.3px;
}

/* ═══ Open-positions tray — trader-grade rows (Hyperliquid-pattern) ═══ */
.pp-pos-row.rich{display:block;padding:10px 12px;cursor:pointer;border-bottom:1px solid rgba(109,232,225,0.08)}
.pp-pos-row.rich:hover{background:rgba(109,232,225,0.04)}
.pp-pos-l1{display:flex;align-items:center;gap:10px}
.pp-pos-l1 .pp-pos-pnl{margin-left:auto;font-weight:700}
.pp-pos-roe{font-size:10px;opacity:0.8;margin-left:4px}
.pp-pos-l2{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:10px;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;color:rgba(255,255,255,0.55)}
.pp-pos-l2 b{color:rgba(255,255,255,0.85);font-weight:600}
.pp-pos-l2 .liqcell b{color:rgba(255,120,120,0.9)}
.pp-pos-l3{display:flex;gap:8px;margin-top:8px}
.pp-pos-btn{background:rgba(109,232,225,0.08);border:1px solid rgba(109,232,225,0.25);color:var(--cyan);font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:0.06em;padding:4px 10px;border-radius:4px;cursor:pointer}
.pp-pos-btn:hover{background:rgba(109,232,225,0.16)}
.pp-pos-btn.danger{border-color:rgba(255,107,107,0.35);color:rgba(255,120,120,0.95);background:rgba(255,107,107,0.07)}
.pp-pos-btn.danger:hover{background:rgba(255,107,107,0.15)}
.pp-pos-tx{margin-left:auto;font-size:9.5px;color:rgba(255,255,255,0.4);text-decoration:none}
.pp-pos-tx:hover{color:var(--cyan)}

/* Close-confirm + TP/SL editor controls (reuse pp-confirm-* card) */
.ppx-pcts{display:flex;gap:6px}
.ppx-pct{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.7);font-family:'IBM Plex Mono',monospace;font-size:10px;padding:3px 8px;border-radius:4px;cursor:pointer}
.ppx-pct.on{border-color:var(--cyan);color:var(--cyan);background:rgba(109,232,225,0.1)}
.ppt-inwrap{display:flex;gap:6px;align-items:center}
.ppt-in{width:110px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.18);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:12px;padding:5px 8px;border-radius:2px}
.ppt-mark{background:none;border:1px solid rgba(109,232,225,0.3);color:var(--cyan);font-size:9px;padding:3px 7px;border-radius:4px;cursor:pointer;font-family:'IBM Plex Mono',monospace}

/* The P&L labels — a bare "-$0.02" was read as "what is this number?". */
.pp-pos-pnl-lbl{font-size:8px;letter-spacing:1px;opacity:0.55;font-weight:400;margin-right:2px}

/* Exit levels on the position row — shown where they are, editable from there. */
.pp-exit-cell{cursor:pointer;transition:color .12s}
.pp-exit-cell:hover{color:var(--cyan)}
.pp-exit-cell b.tp-set{color:var(--green)}
.pp-exit-cell b.sl-set{color:rgba(255,90,90,0.95)}