@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&family=JetBrains+Mono:wght@300;400;500&display=swap');
:root{
  --bg:#0a0a0b;--surface:#131315;--card:#18181b;--card2:#1e1e21;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.12);
  --text:#f2f7fc;--muted:#99a3b8;--muted2:#b8c1d3;--label:#dfe4f0;
  --teal:#00c2b2;--teal2:#00d9c7;--teal-bg:rgba(0,194,178,.12);
  --red:#ff4d6a;--red-bg:rgba(255,77,106,.1);
  --orange:#f7931a;--green:#2ea043;
  --blue:#3b82f6;--accent:#4f93f8;
  --sidebar:#131315;--btn:#00c2b2;--btn-hover:#00d9c7;--link:#00c2b2;
  --mono:'JetBrains Mono',monospace;--font:'Inter',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
.qf-wrap{font-family:var(--font);background:var(--bg);color:var(--text)!important;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal;font-synthesis:none;letter-spacing:.1px;overflow-x:hidden;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);overscroll-behavior-x:contain;}
.qf-wrap,.qf-wrap *{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* ── TOUCH ERGONOMICS (all viewports, matters most on mobile) ──
   - touch-action:manipulation kills the ~300ms double-tap-to-zoom delay on
     buttons/links, so a fast tap fires immediately instead of waiting to see
     if a second tap is coming. That delay is exactly the kind of thing that
     costs you price movement when closing a position quickly.
   - Sliders get touch-action:none instead — a plain "manipulation" value
     still lets the browser treat a slider drag as an ambiguous pan, which on
     phones with edge-swipe-to-go-back gestures enabled can hijack a drag
     started near the screen edge and exit the page. :none tells the browser
     this element handles 100% of its own touch input, so neither page
     scroll nor the OS back-gesture ever takes over mid-drag.
   - -webkit-tap-highlight-color removes the default gray/blue flash Android/
     iOS paint on tap, which looks cheap on a dark trading UI.
   - :active states give instant visual feedback that the app registered the
     tap, standing in for the removed confirm() dialogs. */
.qf-wrap button,.qf-wrap a{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  outline:none;
}
.qf-wrap a{color:var(--link);}
/* Kill the browser's default blue focus ring on tap/click (ugly, low
   contrast against dark UI) but keep a clean teal ring for keyboard
   navigation via :focus-visible, so accessibility isn't lost. */
.qf-wrap button:focus,.qf-wrap a:focus{outline:none;}
.qf-wrap button:focus-visible,.qf-wrap a:focus-visible{outline:2px solid var(--teal)!important;outline-offset:1px;}
.qf-wrap input[type="range"]{
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.qf-wrap button:not(:disabled):active{filter:brightness(.92);transform:scale(.98);}

/* Fallback for the brief instant before JS (nms2FullBleed) runs and hoists
   .qf-wrap out of any clipping ancestor container. Desktop only — the 8px
   breathing margin looks good on PC, but the same margin on narrow mobile
   screens showed up as visible white bars on both edges. */
@media(min-width:769px){
  .qf-wrap{width:calc(100vw - 16px);margin-left:calc(50% - 50vw + 8px);margin-right:calc(50% - 50vw + 8px);}
}
.qf-alert{padding:16px 20px;color:var(--muted2)!important;font-size:13px;}
.qf-alert a{color:var(--teal)!important;}
.qf-notice{margin:10px 12px;padding:10px 12px;background:var(--teal-bg);border-left:3px solid var(--teal);font-size:11px;color:var(--muted2)!important;}
.qf-notice strong{color:var(--teal)!important;}
.qf-empty{padding:16px;text-align:center;color:var(--muted)!important;font-size:12px;}

/* ── TOPBAR ── */
.qf-topbar{display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:48px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;overflow:hidden;}
.qf-topbar-left{display:flex;align-items:center;gap:24px;}
.qf-logo{display:inline-flex!important;align-items:center;gap:6px;font-size:15px;font-weight:300;color:var(--text)!important;}
.qf-logo img{display:inline-block!important;vertical-align:middle!important;margin:0!important;max-width:none!important;}
.qf-logo span{color:var(--teal)!important;}
.qf-nav{display:flex;}
.qf-nav a{padding:0 12px;height:42px;display:flex;align-items:center;font-size:13px;font-weight:300;color:var(--label)!important;text-decoration:none;border-bottom:2px solid transparent;cursor:pointer;transition:color .15s;white-space:nowrap;flex-shrink:0;}
.qf-nav a.active,.qf-nav a:hover{color:var(--teal)!important;border-bottom-color:var(--teal);}
.qf-bottom-nav{display:none;}
.qf-topbar-right{display:flex;align-items:center;gap:16px;padding-right:2px;}
.qf-gp{display:flex;align-items:center;gap:6px;}
.qf-gp-label{font-size:11px;font-weight:300;color:var(--muted2)!important;}
.qf-gp-val{font-size:13px;font-weight:300;font-family:var(--mono);}
.qf-gp-val.pos{color:var(--teal)!important;}
.qf-gp-val.neg{color:var(--red)!important;}
.qf-top-tabs{display:flex;border:1px solid var(--border2);border-radius:4px;overflow:hidden;}
.qf-top-tab{padding:4px 12px;background:none;border:none;font-size:11px;font-weight:300;color:var(--muted2)!important;cursor:pointer;font-family:var(--font);transition:all .15s;}
.qf-top-tab.active{background:var(--teal);color:#fff!important;}
.qf-top-stats{display:flex;gap:16px;}
.qf-top-stat{display:flex;flex-direction:row;align-items:center;gap:6px;}
.qf-ts-label{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)!important;font-weight:300;}
.qf-ts-label-short{display:none;}
.qf-ts-val{font-size:12px;font-weight:300;font-family:var(--mono);color:var(--text)!important;}
.qf-user-pill{font-size:11px;font-weight:300;color:var(--muted2)!important;padding:4px 10px;border:1px solid var(--border2);border-radius:20px;}

/* ── LANGUAGE SWITCHER (topbar / admin header) ── */
.qf-lang-switch{display:inline-flex;align-items:center;border:1px solid var(--border2,rgba(255,255,255,.1));border-radius:20px;overflow:hidden;flex-shrink:0;}
.qf-lang-btn{background:none;border:none;padding:4px 10px;font-size:10px;font-weight:300;letter-spacing:.4px;color:var(--muted2,#8a94ab)!important;cursor:pointer;font-family:var(--font,inherit);transition:all .15s;}
.qf-lang-btn.active{background:var(--teal,#00c2b2);color:#fff!important;}
.qf-lang-btn:not(.active):hover{color:var(--text,#f2f7fc)!important;}

/* ── ICON BUTTONS (theme switch, panel layout) ── */
.qf-icon-btn{background:none;border:none;color:var(--muted2)!important;cursor:pointer;padding:6px;line-height:1;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;transition:color .15s,background .15s;}
.qf-icon-btn:hover,.qf-icon-btn.active{color:var(--teal)!important;background:var(--card2);}
.qf-btn-icon{width:17px;height:17px;display:block;}

/* ── THEME SWITCHER (topbar) ── */
.qf-theme-switch{position:relative;}
.qf-theme-panel{position:fixed;width:220px;background:var(--card2);border:1px solid var(--border2);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:9000;padding:8px;}
.qf-theme-panel-title{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)!important;padding:4px 8px 8px;}
.qf-theme-opt{display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px;cursor:pointer;transition:background .15s;}
.qf-theme-opt:hover{background:var(--card);}
.qf-theme-opt.selected{background:var(--card);}
.qf-theme-opt-swatch{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--border2);position:relative;overflow:hidden;}
.qf-theme-opt-swatch span{position:absolute;width:12px;height:12px;border-radius:50%;}
.qf-theme-opt-swatch span:nth-child(1){top:2px;left:2px;}
.qf-theme-opt-swatch span:nth-child(2){bottom:2px;left:2px;}
.qf-theme-opt-swatch span:nth-child(3){bottom:2px;right:2px;}
.qf-theme-opt-name{font-size:12px;font-weight:300;color:var(--text)!important;flex:1;}
.qf-theme-opt-check{font-size:12px;color:var(--teal)!important;visibility:hidden;}
.qf-theme-opt.selected .qf-theme-opt-check{visibility:visible;}

/* ── MAIN ── */
.qf-main{
  display:grid;
  grid-template-columns:320px 240px minmax(0,1fr);
  grid-template-rows:auto 1fr;
  grid-template-areas:"left book wlbar" "left book chart";
  flex:1;overflow:hidden;min-height:0;
}
.qf-watchlist-bar{grid-area:wlbar;min-width:0;}

/* Panel position toggle (desktop only) — swaps the order/trade panel from
   the default left side to the right side. Purely a layout preference,
   saved client-side, mirrors the ThemeManager pattern. The order book
   always stays directly next to the trade panel on whichever side it's on,
   same as it does on every real exchange. */
.qf-wrap.qf-panel-right .qf-main{grid-template-columns:minmax(0,1fr) 240px 320px;grid-template-areas:"wlbar book left" "chart book left";}
.qf-wrap.qf-panel-right .qf-left{border-right:none;border-left:1px solid var(--border);}
.qf-wrap.qf-panel-right .qf-book{border-right:none;border-left:1px solid var(--border);}

/* Book hidden (toggled off via the chart toolbar button, or auto-hidden on
   narrower desktop widths where three columns + chart would get cramped). */
.qf-main.qf-book-hidden{grid-template-columns:320px minmax(0,1fr)!important;grid-template-areas:"left wlbar" "left chart"!important;}
.qf-wrap.qf-panel-right .qf-main.qf-book-hidden{grid-template-columns:minmax(0,1fr) 320px!important;grid-template-areas:"wlbar left" "chart left"!important;}
.qf-main.qf-book-hidden .qf-book{display:none;}

/* ── LEFT PANEL ── */
.qf-left{grid-area:left;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;background:var(--surface);}
.qf-left::-webkit-scrollbar{width:3px;}
.qf-left::-webkit-scrollbar-thumb{background:var(--border2);}

/* ── ORDER BOOK ── */
.qf-book{grid-area:book;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:var(--surface);min-width:0;}
.qf-book-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px;flex-shrink:0;}
.qf-book-title{font-size:11px;font-weight:500;color:var(--label)!important;text-transform:uppercase;letter-spacing:.4px;}
.qf-book-precision select{background:var(--card2);border:1px solid var(--border2);border-radius:4px;color:var(--muted2)!important;font-size:10px;font-family:var(--mono);padding:2px 5px;outline:none;cursor:pointer;}
.qf-book-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:0 14px 6px;font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)!important;flex-shrink:0;}
.qf-book-cols span:nth-child(2),.qf-book-cols span:nth-child(3){text-align:right;}
.qf-book-asks,.qf-book-bids{display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;}
.qf-book-asks{justify-content:flex-end;}
.qf-book-row{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:1.5px 14px;font-size:11px;font-family:var(--mono);cursor:default;}
.qf-book-row-depth{position:absolute;top:0;bottom:0;right:0;z-index:0;pointer-events:none;}
.qf-book-row.ask .qf-book-row-depth{background:var(--red-bg);}
.qf-book-row.bid .qf-book-row-depth{background:var(--teal-bg);}
.qf-book-row span{position:relative;z-index:1;}
.qf-book-row .qf-book-price{text-align:left;}
.qf-book-row.ask .qf-book-price{color:var(--red)!important;}
.qf-book-row.bid .qf-book-price{color:var(--teal)!important;}
.qf-book-row .qf-book-amt,.qf-book-row .qf-book-total{text-align:right;color:var(--muted2)!important;}
.qf-book-row:hover{background:var(--card2);}
.qf-book-mid{display:flex;align-items:baseline;gap:8px;padding:8px 14px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);flex-shrink:0;background:var(--card);}
.qf-book-mid-price{font-size:16px;font-weight:500;font-family:var(--mono);color:var(--text)!important;}
.qf-book-mid-usd{font-size:11px;color:var(--muted)!important;}
.qf-book-mid.up .qf-book-mid-price{color:var(--teal)!important;}
.qf-book-mid.down .qf-book-mid-price{color:var(--red)!important;}
.qf-book-asks,.qf-book-bids{flex:0 0 auto;overflow:hidden;}
.qf-ct-btn.qf-book-toggle{opacity:.5;}
.qf-ct-btn.qf-book-toggle.active{opacity:1;color:var(--teal)!important;}

/* Buy/sell pressure bar — proportional split of total bid vs. ask size
   currently visible in the book, same idea as the OKX "B / S" strip. */
.qf-book-ratio{display:flex;flex-shrink:0;height:26px;margin:0 14px 12px;border-radius:4px;overflow:hidden;font-size:10px;font-weight:600;font-family:var(--mono);}
.qf-book-ratio-b{background:var(--teal);color:#04211e!important;display:flex;align-items:center;justify-content:flex-start;padding-left:8px;white-space:nowrap;transition:width .3s ease;}
.qf-book-ratio-s{background:var(--red);color:#2b0810!important;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;white-space:nowrap;transition:width .3s ease;}
.qf-book{overflow-y:auto;}
.qf-book::-webkit-scrollbar{width:3px;}
.qf-book::-webkit-scrollbar-thumb{background:var(--border2);}

/* Asset head — centered, clean, Quantfury-style */
.qf-asset-head{padding:22px 24px 18px;border-bottom:1px solid var(--border);text-align:center;}
.qf-asset-title-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px;position:relative;}
.qf-asset-title-center{display:flex;align-items:center;gap:8px;min-width:0;}
.qf-alert-bell{background:none;border:none;color:var(--muted2)!important;cursor:pointer;font-size:13px;padding:2px;position:relative;line-height:1;transition:color .15s;}
.qf-alert-bell:hover,.qf-alert-bell.active{color:var(--teal)!important;}
.qf-alert-bell-dot{position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;background:var(--teal);border:1.5px solid var(--surface);}
.qf-alert-panel{margin-top:16px;padding:14px;border:1px solid var(--border2);border-radius:8px;text-align:left;}
.qf-alert-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.qf-alert-label{font-size:11px;color:var(--muted2)!important;}
.qf-alert-dir{background:var(--card2)!important;border:1px solid var(--border2);border-radius:4px;color:var(--text)!important;font-size:11px;font-family:var(--font);padding:4px 6px;outline:none;}
.qf-alert-price-input{border:1px solid var(--border2)!important;border-radius:6px;padding:8px 10px!important;text-align:left!important;width:100%;}
.qf-alert-list{margin-top:12px;display:flex;flex-direction:column;gap:6px;max-height:140px;overflow-y:auto;}
.qf-alert-item{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:var(--card2);border-radius:0;font-size:11px;color:var(--text)!important;}
.qf-alert-item-remove{background:none;border:none;color:var(--muted)!important;cursor:pointer;font-size:11px;padding:0 4px;}
.qf-alert-item-remove:hover{color:var(--red)!important;}
.qf-asset-name{font-size:14px;font-weight:300;color:var(--text)!important;letter-spacing:.2px;}
.qf-binance-badge{font-size:9px;color:var(--teal)!important;font-weight:300;letter-spacing:.4px;}
.qf-asset-price-row{display:flex;justify-content:center;}
/* Hides the big "Last Price" block only when the order book is actually
   on screen right next to it (desktop width AND book turned on) — toggled
   by JS (nms2UpdatePriceRowVisibility) rather than a plain media query, so
   there's never a state where NEITHER the book nor this price is visible
   (book manually hidden, admin-disabled, or a mid-size desktop where the
   book auto-hides below 1400px all keep this price shown as the fallback). */
.qf-wrap.nms2-price-in-book .qf-asset-price-row{display:none;}
.qf-wrap.nms2-price-in-book .qf-market-row{margin-top:14px;}
.qf-last-label{font-size:10px;color:var(--muted2)!important;display:block;margin-bottom:4px;letter-spacing:.2px;}
/* ── PRICE FLASH — destello verde/rojo al tickear un precio.
   Nota técnica: casi todos los elementos de precio en este plugin tienen
   `color:var(--text)!important` (defensa contra estilos del tema de
   WordPress), y una animación NUNCA puede ganarle a un !important. Por eso
   el destello no anima el color del texto — anima background-color +
   box-shadow (inset, no afecta el layout) + un halo con text-shadow, que sí
   son visibles encima de cualquier !important. Esto es lo que lo hace
   notorio tanto en escritorio como en móvil. */
@keyframes qfFlashUp{
  0%{background-color:rgba(0,194,178,.28);box-shadow:inset 0 0 0 1px rgba(0,194,178,.32);text-shadow:0 0 5px rgba(0,194,178,.55);}
  100%{background-color:rgba(0,194,178,0);box-shadow:inset 0 0 0 1px rgba(0,194,178,0);text-shadow:0 0 5px rgba(0,194,178,0);}
}
@keyframes qfFlashDown{
  0%{background-color:rgba(255,77,106,.26);box-shadow:inset 0 0 0 1px rgba(255,77,106,.3);text-shadow:0 0 5px rgba(255,77,106,.55);}
  100%{background-color:rgba(255,77,106,0);box-shadow:inset 0 0 0 1px rgba(255,77,106,0);text-shadow:0 0 5px rgba(255,77,106,0);}
}
.qf-flash-up{animation:qfFlashUp .4s ease-out;border-radius:4px;}
.qf-flash-down{animation:qfFlashDown .4s ease-out;border-radius:4px;}

.qf-price{font-size:28px;font-weight:300;font-family:var(--mono);letter-spacing:-.3px;color:var(--text)!important;display:block;line-height:1;}
.qf-market-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;}
.qf-market-badge{font-size:9px;font-weight:300;letter-spacing:.4px;color:var(--teal)!important;background:var(--teal-bg);padding:2px 7px;border-radius:2px;}
.qf-chg{font-size:12px;font-weight:300;font-family:var(--mono);}
.qf-chg.pos{color:var(--teal)!important;}
.qf-chg.neg{color:var(--red)!important;}

/* Position summary */
.qf-pos-summary{padding:16px 24px;border-bottom:1px solid var(--border);}
.qf-pos-sum-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;}
.qf-pos-sum-title{font-size:12px;font-weight:300;color:var(--muted2)!important;}
.qf-pos-sum-rows{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;}
.qf-pos-sum-row{display:flex;flex-direction:column;}
.qf-pos-sum-val{font-size:15px;font-weight:300;font-family:var(--mono);color:var(--text)!important;line-height:1.2;}
.qf-pos-sum-val.teal{color:var(--teal)!important;}
.qf-pos-sum-val.neg{color:var(--red)!important;}
.qf-pos-sum-label{font-size:10px;color:var(--muted2)!important;margin-top:2px;}

/* Action buttons */
.qf-action-btns{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);padding:16px 24px;border-bottom:1px solid var(--border);}
.qf-ab-wrap{position:relative;display:flex;min-width:0;}
.qf-ab-wrap .qf-sell-btn,.qf-ab-wrap .qf-buy-btn{flex:1;width:100%;}
.qf-op-badge-limit{font-size:9px;font-weight:500;letter-spacing:.4px;color:var(--bg)!important;background:var(--teal);border-radius:3px;padding:3px 6px;flex-shrink:0;}
.qf-op-limit-price{padding:14px 24px;border-bottom:1px solid var(--border);}
.qf-op-limit-hint{font-size:10px;color:var(--muted)!important;margin-top:6px;line-height:1.4;}

/* Orden límite: fila propia e independiente de comprar/vender, sigue
   visible aunque ya haya una posición abierta en el par. */
.qf-limit-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;border-bottom:1px solid var(--border);}
.qf-limit-row-label{font-size:11px;font-weight:500;color:var(--muted2)!important;text-transform:uppercase;letter-spacing:.4px;flex-shrink:0;}
.qf-limit-row-btns{display:flex;gap:8px;}
.qf-limit-icon-btn{
  display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:8px;cursor:pointer;
  font-family:var(--font);font-size:11px;font-weight:500;letter-spacing:.3px;
  border:1px solid transparent;background:var(--card2);color:var(--muted2)!important;
  transition:border-color .15s,color .15s,background .15s,transform .1s;
}
.qf-limit-icon-btn:active{transform:scale(.96);}
.qf-limit-icon-btn.sell{color:var(--red)!important;background:var(--red-bg);border-color:rgba(255,77,106,.22);}
.qf-limit-icon-btn.buy{color:var(--teal)!important;background:var(--teal-bg);border-color:rgba(0,194,178,.22);}
.qf-limit-icon-btn.sell:hover{background:rgba(255,77,106,.16);border-color:var(--red);}
.qf-limit-icon-btn.buy:hover{background:rgba(0,194,178,.16);border-color:var(--teal);}
.qf-limit-icon{flex-shrink:0;display:block;}
.qf-limit-icon-lbl{line-height:1;}
.qf-pending-orders{padding:16px 24px;border-bottom:1px solid var(--border);}
.qf-po-title{font-size:11px;font-weight:500;color:var(--muted2)!important;text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px;}
.qf-po-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--card2);border:1px solid var(--border2);border-radius:0;margin-bottom:6px;}
.qf-po-item:last-child{margin-bottom:0;}
.qf-po-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.qf-po-pair{font-size:12px;color:var(--text)!important;font-weight:500;}
.qf-po-detail{font-size:10px;color:var(--muted)!important;font-family:var(--mono);}
.qf-po-actions{display:flex;gap:6px;flex-shrink:0;}
.qf-po-cancel,.qf-po-edit{
  flex-shrink:0;box-sizing:border-box;background:none;border:1px solid var(--border2);color:var(--muted2)!important;
  border-radius:5px;width:26px;height:26px;padding:0;margin:0;cursor:pointer;font-size:12px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s;
}
.qf-po-cancel:hover{border-color:var(--red);color:var(--red)!important;}
.qf-po-edit:hover{border-color:var(--teal);color:var(--teal)!important;}
.qf-sell-btn,.qf-buy-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 8px;border:none;border-radius:0;cursor:pointer;font-family:var(--font);transition:filter .15s,opacity .15s;gap:3px;height:54px;}
.qf-sell-btn{background:linear-gradient(180deg,#ff3b5c 0%,#e01e42 100%);}
.qf-buy-btn{background:linear-gradient(180deg,#00d9ac 0%,#00a884 100%);}
.qf-sell-btn:hover,.qf-buy-btn:hover{filter:brightness(1.08);}
.qf-sell-btn:active,.qf-buy-btn:active{opacity:.85;}
.qf-ab-label{font-size:11px;font-weight:500;letter-spacing:1.4px;color:#fff!important;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.25);}
.qf-ab-price{font-size:13px;font-weight:500;font-family:var(--mono);color:#fff!important;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.25);margin-right:22px;}
.qf-ab-sub{font-size:9px;font-weight:500;letter-spacing:.2px;color:rgba(255,255,255,.85)!important;}

.qf-sltp-links{display:flex;justify-content:space-between;padding:10px 24px;border-bottom:1px solid var(--border);}

/* Inline SL/TP editor — bordered fields, matching the confirm/cancel pattern */
.qf-sltp-edit{padding:16px 24px;border-bottom:1px solid var(--border);}
.qf-sltp-edit-header{margin-bottom:14px;}
.qf-sltp-edit-title{font-size:13px;font-weight:300;color:var(--text)!important;}
.qf-sltp-field{position:relative;border:1px solid var(--border2);border-radius:6px;padding:12px 14px;margin-bottom:12px;transition:border-color .15s;}
.qf-sltp-field:focus-within{border-color:var(--teal);}
.qf-sltp-field-static{display:flex;align-items:center;justify-content:space-between;}
.qf-sltp-field-row-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px;}
.qf-sltp-field-label{font-size:13px;color:var(--muted2)!important;}
.qf-sltp-field-val{font-size:14px;font-family:var(--mono);color:var(--text)!important;}
.qf-sltp-field-unit{font-size:11px;color:var(--muted)!important;font-family:var(--font);margin-left:4px;}
.qf-sltp-field-input{width:100%!important;background:transparent!important;background-color:transparent!important;border:none!important;outline:none!important;color:var(--text)!important;font-family:var(--mono)!important;font-size:14px!important;text-align:right;padding:0!important;box-shadow:none!important;-webkit-appearance:none;appearance:none;-moz-appearance:textfield;}
.qf-sltp-field-input::-webkit-outer-spin-button,.qf-sltp-field-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.qf-sltp-field-input::placeholder{color:var(--muted2)!important;font-family:var(--font);opacity:1;}
.qf-sltp-size-field{padding-bottom:8px;}
.qf-sltp-size-field .qf-mini-slider-wrap{padding:8px 0 6px;}
.qf-sltp-crypto-val{font-size:11px;color:var(--muted2)!important;font-family:var(--mono);text-align:right;}
.qf-sltp-edit-est{font-size:11px;color:var(--muted2)!important;text-align:right;margin-bottom:14px;}
.qf-sltp-edit-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.qf-sltp-cancel-btn,.qf-sltp-confirm-btn{height:38px;border-radius:6px;font-size:12px;font-weight:300;letter-spacing:.4px;cursor:pointer;font-family:var(--font);transition:filter .15s,opacity .15s;}
.qf-sltp-cancel-btn{background:transparent;border:1px solid var(--border2);color:var(--text)!important;}
.qf-sltp-cancel-btn:hover{border-color:var(--muted2);}
.qf-sltp-confirm-btn{background:var(--btn);border:none;color:#0a0a0b!important;}
.qf-sltp-confirm-btn:hover{background:var(--btn-hover);}
.qf-sltp-confirm-btn:hover{filter:brightness(1.08);}
.qf-sltp-confirm-btn:disabled{opacity:.5;cursor:not-allowed;}
.qf-sltp-remove-link{display:block;width:100%;background:none;border:none;color:var(--red)!important;font-size:11px;font-weight:300;cursor:pointer;font-family:var(--font);text-align:center;margin-top:12px;padding:4px;}
.qf-sltp-remove-link:hover{text-decoration:underline;}
.qf-sltp-link{font-size:12px;font-weight:300;color:var(--teal)!important;cursor:pointer;text-decoration:none;background:none;border:none;font-family:var(--font);}
.qf-sltp-link:hover{text-decoration:underline;}

/* ── CLOSE CONFIRMATION MODAL ──
   A custom modal matching the platform's own dark card styling, in place of
   the browser's native confirm() popup. Fade + slight scale-up transition,
   backdrop blur so the chart/positions behind it stay legible but out of focus. */
.qf-confirm-overlay{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .18s ease;padding:20px;
}
.qf-confirm-overlay.show{opacity:1;pointer-events:auto;}
.qf-confirm-backdrop{position:absolute;inset:0;background:rgba(6,6,7,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.qf-confirm-modal{
  position:relative;width:100%;max-width:340px;background:var(--card);
  border:1px solid var(--border2);border-radius:12px;padding:28px 24px 20px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);text-align:center;font-family:var(--font);
  transform:translateY(8px) scale(.97);transition:transform .18s ease;
}
.qf-confirm-overlay.show .qf-confirm-modal{transform:translateY(0) scale(1);}
.qf-confirm-icon{width:40px;height:40px;margin:0 auto 14px;border-radius:50%;background:var(--red-bg);color:var(--red)!important;display:flex;align-items:center;justify-content:center;font-size:16px;}
.qf-confirm-title{font-size:16px;font-weight:500;color:var(--text)!important;margin-bottom:4px;}
.qf-confirm-pair{font-size:12px;color:var(--muted2)!important;font-family:var(--mono);margin-bottom:18px;}
.qf-confirm-rows{background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:20px;}
.qf-confirm-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted2)!important;padding:5px 0;}
#qfCloseConfirmPrice{font-family:var(--mono);color:var(--text)!important;font-size:13px;}
.qf-confirm-pnl{font-family:var(--mono);font-size:13px;}
.qf-confirm-pnl.pos{color:var(--teal)!important;}
.qf-confirm-pnl.neg{color:var(--red)!important;}
.qf-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.qf-confirm-cancel,.qf-confirm-ok{height:42px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font);border:none;transition:filter .15s;}
.qf-confirm-cancel{background:var(--card2);border:1px solid var(--border2);color:var(--muted2)!important;}
.qf-confirm-cancel:hover{color:var(--text)!important;border-color:var(--muted);}
.qf-confirm-ok{background:var(--red);color:#fff!important;}
.qf-confirm-ok:hover{filter:brightness(1.08);}

/* ORDER PANEL */
.qf-order-panel{display:flex;flex-direction:column;border-bottom:1px solid var(--border);}
.qf-op-header{display:flex;align-items:center;gap:8px;padding:12px 24px;border-bottom:1px solid var(--border);}
.qf-op-close{background:none;border:1px solid var(--border2);color:var(--muted2)!important;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.qf-op-title{font-size:12px;font-weight:300;color:var(--text)!important;flex:1;}
.qf-op-price{font-size:13px;font-weight:300;font-family:var(--mono);color:var(--text)!important;}
.qf-op-amount{padding:16px 24px;border-bottom:1px solid var(--border);}
.qf-op-amount-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.qf-op-amount-label{font-size:11px;color:var(--muted2)!important;font-weight:300;}
.qf-op-amount-unit{font-size:11px;color:var(--muted)!important;font-weight:300;}
.qf-op-amount-input-wrap{display:flex;align-items:center;gap:6px;background:var(--surface)!important;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:10px 14px;margin-bottom:14px;transition:border-color .15s;}
.qf-op-amount-input-wrap:focus-within{border-color:var(--teal);}
.qf-op-amount-currency{font-size:19px;font-weight:300;color:var(--muted2)!important;font-family:var(--mono);flex-shrink:0;}
.qf-op-amount-input{flex:1;min-width:0;background:transparent!important;border:none!important;outline:none!important;box-shadow:none!important;-webkit-appearance:none;appearance:none;color:var(--text)!important;font-size:21px;font-weight:300;font-family:var(--mono);padding:0;}
.qf-op-amount-input::placeholder{color:var(--muted)!important;opacity:1;}

/* Custom slider — thin, refined */
.qf-op-slider-wrap{position:relative;margin-bottom:8px;padding:11px 0;}
.qf-op-slider-bar{height:2px;background:var(--card2);border-radius:2px;position:relative;margin:0 10px;}
.qf-op-slider-fill{position:absolute;left:0;top:0;height:100%;background:var(--teal);border-radius:2px;pointer-events:none;}
.qf-op-slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;background:var(--teal);border:2px solid #0a0a0b;border-radius:5px;pointer-events:none;box-shadow:0 0 0 1px rgba(0,194,178,.5);}
.qf-op-slider-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;}
.qf-op-crypto-val{font-size:11px;color:var(--muted2)!important;font-family:var(--mono);margin-top:2px;}

.qf-op-lev{padding:14px 24px;border-bottom:1px solid var(--border);}
.qf-op-lev-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:11px;color:var(--muted2)!important;}
.qf-op-lev-row strong{color:var(--text)!important;font-family:var(--mono);font-size:12px;}
.qf-op-lev-marks{display:flex;justify-content:space-between;font-size:9px;color:var(--muted)!important;font-family:var(--mono);margin-top:8px;}

.qf-op-summary{padding:10px 24px;border-bottom:1px solid var(--border);}
.qf-op-sum-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:11px;color:var(--muted2)!important;}
.qf-op-sum-row span:last-child{font-family:var(--mono);font-weight:300;color:var(--text)!important;}
.neg{color:var(--red)!important;}
.pos{color:var(--teal)!important;}

.qf-op-sltp{padding:10px 24px;border-bottom:1px solid var(--border);}
.qf-op-sltp-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:12px;color:var(--muted2)!important;border-bottom:1px solid var(--border);}
.qf-op-sltp-row:last-child{border-bottom:none;}
.qf-op-sltp-input{background:transparent!important;background-color:transparent!important;border:none!important;color:var(--text)!important;font-family:var(--mono);font-size:12px;font-weight:300;text-align:right;outline:none!important;width:120px;box-shadow:none!important;-webkit-appearance:none;appearance:none;-moz-appearance:textfield;}
.qf-op-sltp-input::-webkit-outer-spin-button,.qf-op-sltp-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.qf-op-sltp-input::placeholder{color:var(--muted)!important;}
.qf-op-rr-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0 2px;font-size:12px;color:var(--muted2)!important;}
.qf-op-rr-val{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.2px;}
.qf-op-rr-val.rr-good{color:var(--teal2)!important;}
.qf-op-rr-val.rr-mid{color:var(--orange)!important;}
.qf-op-rr-val.rr-bad{color:var(--red)!important;}

.qf-op-footer{display:grid;grid-template-columns:44px 1fr;gap:0;border-top:1px solid var(--border);}
.qf-op-cancel{height:44px;background:var(--card);border:none;border-right:1px solid var(--border);color:var(--muted2)!important;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.qf-op-cancel:hover{background:var(--red-bg);color:var(--red)!important;}
.qf-op-confirm{height:44px;background:var(--btn);border:none;color:#fff!important;font-size:13px;font-weight:300;letter-spacing:.4px;cursor:pointer;font-family:var(--font);transition:filter .15s,background .15s;}
.qf-op-confirm:hover{background:var(--btn-hover);}
.qf-op-confirm:hover{filter:brightness(1.08);}
.qf-op-confirm.sell{background:var(--teal);}
.qf-op-confirm:disabled{opacity:.6;cursor:not-allowed;}

/* Power */
.qf-power{padding:16px 24px;border-bottom:1px solid var(--border);}
.qf-power-title{font-size:9px;font-weight:300;letter-spacing:.6px;text-transform:uppercase;color:var(--label)!important;margin-bottom:10px;}
.qf-power-grid{display:grid;grid-template-columns:1fr 1fr;}
.qf-power-val{font-size:14px;font-weight:300;font-family:var(--mono);display:block;}
.qf-power-label{font-size:9px;color:var(--muted)!important;display:block;margin-top:3px;}

/* Stats + equity curve — flat, no card boxes */
.qf-stats{padding:16px 24px;border-bottom:1px solid var(--border);}
.qf-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
.qf-stat-box{padding:0;}
.qf-stat-val{font-size:15px;font-weight:300;font-family:var(--mono);display:block;color:var(--text)!important;}
.qf-stat-val.pos{color:var(--teal)!important;}
.qf-stat-val.neg{color:var(--red)!important;}
.qf-stat-label{font-size:9px;color:var(--label)!important;display:block;margin-top:3px;text-transform:uppercase;letter-spacing:.4px;}
.qf-equity-wrap{margin-top:4px;}
.qf-equity-title{font-size:9px;font-weight:300;letter-spacing:.6px;text-transform:uppercase;color:var(--label)!important;margin-bottom:10px;}
.qf-equity-wrap canvas{width:100%!important;max-height:100px;}

/* Positions */
.qf-positions{padding:16px 24px;border-bottom:1px solid var(--border);}
.qf-pos-title{font-size:9px;font-weight:300;letter-spacing:.6px;text-transform:uppercase;color:var(--label)!important;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.qf-pos-count{background:var(--teal);color:#fff!important;font-size:9px;font-weight:300;padding:1px 6px;border-radius:10px;}

.qf-pos-item{padding:10px 0;border-bottom:1px solid var(--border);}
.qf-pos-item:last-child{border-bottom:none;}
.qf-pos-hdr{display:flex;align-items:center;gap:5px;margin-bottom:8px;flex-wrap:nowrap;}
.qf-pos-pair{font-size:12px;font-weight:300;}
.qf-pos-badge{font-size:8px;font-weight:300;padding:2px 5px;border-radius:2px;}
.qf-pos-badge.long{background:var(--teal-bg);color:var(--teal2)!important;}
.qf-pos-badge.short{background:var(--teal-bg);color:var(--teal2)!important;}
.qf-pos-lev{font-size:10px;color:var(--teal)!important;font-weight:300;font-family:var(--mono);}
.qf-pos-close-btn{margin-left:auto;flex-shrink:0;background:none;border:1px solid var(--border2);color:var(--muted2)!important;font-size:10px;font-weight:300;padding:2px 8px;cursor:pointer;font-family:var(--font);border-radius:2px;transition:all .15s;height:22px;display:flex;align-items:center;}
.qf-pos-close-btn:hover{background:var(--red-bg);color:var(--red)!important;border-color:var(--red);}
.qf-pos-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;font-size:9px;color:var(--muted2)!important;margin-bottom:8px;}
.qf-pos-val{font-size:11px;font-weight:300;font-family:var(--mono);color:var(--text)!important;margin-top:1px;display:block;}
.qf-pos-val.pos{color:var(--teal)!important;}
.qf-pos-val.neg{color:var(--red)!important;}

.qf-pos-actions{display:flex;flex-direction:column;gap:14px;}
.qf-pa-group{display:flex;flex-direction:column;gap:6px;}
.qf-pa-label{font-size:8px;color:var(--muted)!important;letter-spacing:.5px;text-transform:uppercase;font-weight:300;}
.qf-pa-row-top{display:flex;justify-content:space-between;align-items:center;}
.qf-pa-margin-val,.qf-pa-pct-val{font-size:11px;font-weight:300;font-family:var(--mono);color:var(--text)!important;}
.qf-pa-btn{height:26px;background:var(--card2);border:1px solid var(--border2);color:var(--muted2)!important;font-size:10px;font-weight:300;cursor:pointer;font-family:var(--font);border-radius:2px;padding:0 8px;transition:all .15s;white-space:nowrap;display:flex;align-items:center;justify-content:center;}
.qf-pa-btn:hover{background:var(--teal-bg);color:var(--teal)!important;border-color:var(--teal);}
.qf-pa-btn:disabled{opacity:.4;cursor:not-allowed;}
.qf-pa-btn:disabled:hover{background:var(--card2);color:var(--muted2)!important;border-color:var(--border2);}

/* Mini slider (partial close + add margin) — same delicate style as the main order slider, compact */
.qf-mini-slider-wrap{position:relative;padding:10px 0;}
.qf-mini-slider-bar{height:2px;background:var(--card2);border-radius:2px;position:relative;margin:0 9px;}
.qf-mini-slider-fill{position:absolute;left:0;top:0;height:100%;background:var(--teal);border-radius:2px;pointer-events:none;}
.qf-mini-slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;background:var(--teal);border:2px solid #0a0a0b;border-radius:5px;pointer-events:none;box-shadow:0 0 0 1px rgba(0,194,178,.5);}
.qf-mini-slider-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;}

/* ── CENTER ── */
.qf-center{grid-area:chart;display:flex;flex-direction:column;min-width:0;overflow:hidden;}

/* Watchlist bar */
.qf-watchlist-bar{border-bottom:1px solid var(--border);background:var(--sidebar);flex-shrink:0;width:100%;}
.qf-wl-tabs{display:flex;align-items:center;padding:0 24px;border-bottom:1px solid var(--border);gap:4px;}
.qf-wl-search-wrap{position:relative;margin-left:auto;}
.qf-wl-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--muted)!important;pointer-events:none;transition:color .15s;}
.qf-wrap .qf-wl-search{width:220px;height:26px;background:var(--surface)!important;background-color:var(--surface)!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:none!important;border-radius:5px;color:var(--label)!important;font-size:12px;font-weight:300;font-family:var(--font);letter-spacing:.15px;padding:0 12px 0 30px;outline:none!important;transition:border-color .15s,width .15s;-webkit-appearance:none;appearance:none;}
.qf-wrap .qf-wl-search:focus{border-color:var(--teal)!important;background:var(--surface)!important;background-color:var(--surface)!important;color:var(--label)!important;width:250px;}
.qf-wl-search-wrap:focus-within .qf-wl-search-icon{color:var(--teal)!important;}
.qf-wrap .qf-wl-search::placeholder{color:var(--muted)!important;opacity:1;}
.qf-wl-search-results{position:fixed;width:320px;max-height:min(440px,60vh);overflow-y:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;overscroll-behavior:contain;background:var(--card2);border:1px solid var(--border2);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:9000;}
.qf-wl-sr-heading{padding:9px 12px 5px;font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)!important;background:var(--card2);position:sticky;top:0;z-index:1;}
.qf-wl-sr-item{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 6px;cursor:pointer;transition:background .1s;border-bottom:1px solid var(--border);scroll-margin:4px;}
.qf-wl-sr-item:last-child{border-bottom:none;}
.qf-wl-sr-item:hover,.qf-wl-sr-item.active{background:var(--teal-bg);}
.qf-wl-sr-item.current{background:rgba(255,255,255,.03);}
.qf-star{flex-shrink:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;font-size:15px;line-height:1;color:var(--muted)!important;border-radius:5px;transition:color .1s,transform .1s;padding:0;}
.qf-star:hover{color:var(--muted2)!important;transform:scale(1.12);}
.qf-star.is-fav{color:#f0b429!important;}
.qf-wl-sr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.qf-wl-sr-sym{font-size:12px;font-weight:500;color:var(--text)!important;white-space:nowrap;display:flex;align-items:center;gap:5px;}
.qf-wl-sr-name{font-size:10px;color:var(--muted2)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.qf-wl-sr-current{font-size:8px;text-transform:uppercase;letter-spacing:.4px;color:var(--teal)!important;border:1px solid var(--teal);border-radius:3px;padding:1px 5px;flex-shrink:0;}
.qf-wl-sr-market{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-family:var(--mono);}
.qf-wl-sr-price{font-size:11px;color:var(--text)!important;white-space:nowrap;}
.qf-wl-sr-pct{font-size:10px;white-space:nowrap;}
.qf-wl-sr-pct.up{color:var(--teal)!important;}
.qf-wl-sr-pct.down{color:var(--red)!important;}
.qf-wl-sr-pct.flat{color:var(--muted)!important;}
.qf-wl-sr-empty{padding:18px 12px;font-size:11px;color:var(--muted)!important;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;}
.qf-empty-ico{font-size:18px;opacity:.6;}
.qf-wl-sr-more{padding:8px 12px;font-size:10px;font-style:italic;}
.qf-wl-sr-loading,.qf-wl-sr-reconnect{flex-direction:row;justify-content:center;padding:14px 12px;}
.qf-wl-sr-reconnect{color:var(--orange)!important;border-bottom:1px solid var(--border);background:rgba(247,147,26,.08);}
.qf-spinner{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.15);border-top-color:var(--teal);animation:qfSpin .7s linear infinite;flex-shrink:0;}
@keyframes qfSpin{to{transform:rotate(360deg);}}
.qf-ac-hl{background:none;color:var(--teal)!important;font-weight:500;}
.qf-wrap .qf-wl-search:focus-visible{outline:2px solid var(--teal)!important;outline-offset:1px;}
.qf-star:focus-visible{outline:2px solid var(--teal)!important;outline-offset:1px;}
.qf-wl-tab{padding:10px 12px;background:none;border:none;border-bottom:2px solid transparent;font-size:12px;font-weight:300;color:var(--muted2)!important;cursor:pointer;font-family:var(--font);transition:all .15s;white-space:nowrap;}
.qf-wl-tab.active{color:var(--teal)!important;border-bottom-color:var(--teal);}

/* Slim, single-line Quantfury-style chips */
.qf-wl-list{display:flex;align-items:center;overflow-x:auto;padding:12px 24px;gap:8px;min-height:52px;cursor:grab;scrollbar-width:thin;scrollbar-color:var(--border2) transparent;}
.qf-wl-list:active{cursor:grabbing;}
.qf-wl-list::-webkit-scrollbar{height:5px;}
.qf-wl-list::-webkit-scrollbar-track{background:transparent;}
.qf-wl-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;}
.qf-wl-list::-webkit-scrollbar-thumb:hover{background:var(--muted);}
.qf-wl-hint{font-size:11px;color:var(--muted)!important;white-space:nowrap;padding:6px 0;display:flex;align-items:center;gap:6px;}
.qf-wl-hint-ic{width:16px;height:16px;flex:0 0 auto;opacity:.55;}
.qf-wl-item{flex-shrink:0;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border2);border-radius:0;padding:6px 10px;height:32px;cursor:pointer;transition:all .15s;}
.qf-wl-item:hover{border-color:var(--teal);}
.qf-wl-item.active{border-color:var(--teal);background:var(--teal-bg);}
.qf-wl-item.qf-dragging{box-shadow:0 6px 18px rgba(0,0,0,.35);position:relative;z-index:50;cursor:grabbing;}
.qf-wl-pair{font-size:11px;font-weight:300;color:var(--text)!important;white-space:nowrap;}
.qf-wl-dot{color:var(--teal)!important;font-size:7px;}
.qf-wl-pnl{font-size:10px;font-weight:300;font-family:var(--mono);white-space:nowrap;}
.qf-wl-price{font-size:11px;font-weight:300;font-family:var(--mono);color:var(--text)!important;white-space:nowrap;}
.qf-wl-close{font-size:9px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff!important;cursor:pointer;flex-shrink:0;transition:background .15s;}
.qf-wl-close:hover{background:var(--red);}
.qf-wl-portfolio-item{flex-shrink:0;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border2);border-radius:0;padding:6px 10px;height:32px;cursor:pointer;transition:all .15s;}
.qf-wl-portfolio-item:hover{border-color:var(--teal);}
.qf-wl-portfolio-item.active{border-color:var(--teal);background:var(--teal-bg);}
/* Swipe-to-close reveal button: hidden on desktop (chip list doesn't swipe).
   .qf-swipe-content is transparent to layout here so the chip's children
   (text/pnl/close) sit exactly as they did before this was added. */
.qf-swipe-content{display:contents;}
.qf-swipe-close-reveal{display:none;}

/* ── MOBILE HOME LIST elements ──
   .qf-mh-icon/.qf-mh-sub/.qf-mh-heading only exist to support the phone
   "app-style" home screen (avatar / subtitle / section headings) — hidden
   on desktop by default, the mobile media query below turns them on.
   .qf-mh-text (name) and .qf-mh-val (price) are the actual chip content and
   must stay visible on desktop too — they render here as a compact inline
   row; the mobile media query below restyles them into a big vertical row
   instead. */
.qf-mh-icon,.qf-mh-sub,.qf-mh-heading{display:none;}
.qf-mh-text{display:flex;align-items:baseline;gap:6px;min-width:0;}
.qf-mh-val{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.qf-mobile-back{display:none;background:none;border:none;color:var(--muted2)!important;font-size:20px;cursor:pointer;line-height:1;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}



/* Chart area — fixed compact height (not stretched to fill the column) */
.qf-chart-area{display:flex;flex-direction:column;flex:0 0 auto;}
.qf-chart-topbar{display:flex;align-items:center;gap:14px;padding:10px 24px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;}
.qf-chart-label{font-size:12px;font-weight:300;color:var(--label)!important;}
.qf-chart-ivs{display:flex;gap:1px;}
.qf-iv-btn{padding:3px 8px;border:none;background:transparent;color:var(--muted)!important;font-size:11px;font-weight:300;cursor:pointer;font-family:var(--font);border-radius:2px;transition:all .15s;}
.qf-iv-btn:hover{background:var(--card);color:var(--text)!important;}
.qf-iv-btn.active{color:var(--teal)!important;border-bottom:2px solid var(--teal);}
.qf-chart-tools{margin-left:auto;display:flex;gap:6px;}
.qf-ct-btn{padding:4px 10px;background:var(--card);border:1px solid var(--border2);color:var(--muted2)!important;font-size:11px;font-weight:300;cursor:pointer;font-family:var(--font);border-radius:2px;transition:all .15s;}
.qf-ct-btn:hover{color:var(--text)!important;}
.qf-chart-wrap{flex:none!important;height:min(525px,45vh)!important;background:var(--bg);position:relative;overflow:hidden;}
.qf-chart-wrap>div{height:100%!important;width:100%!important;}
.qf-chart-footer{display:flex;align-items:center;justify-content:flex-end;padding:10px 24px;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0;}
.qf-date-btn{background:none;border:none;color:var(--label)!important;font-size:11px;font-weight:300;cursor:pointer;font-family:var(--font);}
.qf-chart-time{font-size:10px;color:var(--muted)!important;font-family:var(--mono);}

/* History panel — now fills the remaining vertical space below the compact chart */
.qf-history-panel{border-top:1px solid var(--border);flex:1;min-height:180px;max-height:none;display:flex;flex-direction:column;}

/* ── Bottom panel tabs (Posiciones / Historial) — replaces the old fixed
   "Historial de operaciones" title with a real switcher, so the open
   positions table lives right below the chart by default. ── */
.qf-bp-tabs{display:flex;flex-shrink:0;border-bottom:1px solid var(--border);background:var(--surface);}
.qf-bp-tab{background:none;border:none;padding:12px 20px;font-size:11px;font-weight:300;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)!important;cursor:pointer;font-family:var(--font);border-bottom:2px solid transparent;transition:color .15s;-webkit-tap-highlight-color:transparent;outline:none;}
.qf-bp-tab.active{color:var(--teal)!important;border-bottom-color:var(--teal);}
.qf-bp-tab:hover:not(.active){color:var(--label)!important;}
.qf-bp-count{color:inherit;}
.qf-bp-body{flex:1;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;}

/* ── Posiciones abiertas: tabla estilo exchange (todos los pares a la vez) ──
   El scroll horizontal de la tabla se voltea con rotateX(180deg) para que la
   barra deslizadora aparezca ARRIBA del panel (pegada a los encabezados) en
   vez de hasta abajo, donde queda fuera de la vista si hay varias posiciones.
   El scroll vertical vive por separado en .qf-bp-body (sin voltear), así que
   ambos ejes se comportan de forma normal e independiente. */
.qf-postbl-wrap{overflow-x:auto;overflow-y:hidden;transform:rotateX(180deg);scrollbar-width:thin;scrollbar-color:var(--border2) transparent;}
.qf-postbl-wrap::-webkit-scrollbar{height:6px;}
.qf-postbl-wrap::-webkit-scrollbar-track{background:transparent;}
.qf-postbl-wrap::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;}
.qf-postbl-wrap::-webkit-scrollbar-thumb:hover{background:var(--teal);}
.qf-postbl,.qf-postbl th,.qf-postbl td{border:none!important;}
.qf-postbl{width:100%;border-collapse:collapse;font-family:var(--mono);white-space:nowrap;transform:rotateX(180deg);}
.qf-postbl thead th{background:var(--surface);text-align:left;font-family:var(--font);font-size:9px;font-weight:300;text-transform:uppercase;letter-spacing:.4px;color:var(--label)!important;padding:8px 16px;}
.qf-postbl tbody td{padding:12px 16px;font-size:12px;font-weight:300;color:var(--muted2)!important;vertical-align:middle;}
.qf-postbl tbody tr:hover td{background:var(--card);}
.qf-postbl-emptyrow td{font-family:var(--font);color:var(--muted)!important;text-align:center;padding:28px 16px;}
.qf-postbl-sym-name{font-family:var(--font);font-size:13px;font-weight:500;color:var(--text)!important;}
.qf-postbl-badges{display:flex;gap:5px;margin-top:4px;}
.qf-postbl-badge{font-family:var(--font);font-size:9px;font-weight:500;padding:2px 6px;border-radius:2px;background:var(--card2);color:var(--muted2)!important;}
.qf-postbl-badge.pos{background:var(--teal-bg);color:var(--teal)!important;}
.qf-postbl-badge.neg{background:var(--red-bg);color:var(--red)!important;}
.qf-postbl-mark{color:var(--text)!important;}
.qf-postbl-marginlbl{font-family:var(--font);font-size:9px;color:var(--muted)!important;margin-top:2px;}
.qf-postbl-pnl{font-weight:500;}
.qf-postbl-roi{font-family:var(--font);font-size:10px;font-weight:300;opacity:.85;margin-top:2px;}
.qf-postbl-close{background:none;border:1px solid var(--border2);color:var(--muted2)!important;font-size:10px;font-weight:300;padding:5px 12px;cursor:pointer;font-family:var(--font);border-radius:2px;transition:all .15s;}
.qf-postbl-close:hover{background:var(--red-bg);color:var(--red)!important;border-color:var(--red);}

.qf-hist-title{padding:12px 24px;font-size:10px;font-weight:300;text-transform:uppercase;letter-spacing:.5px;color:var(--label)!important;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;}
.qf-quickstats-bar{display:flex;align-items:center;padding:10px 24px;gap:14px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;flex-wrap:wrap;}
.qf-qs-item{display:flex;flex-direction:column;gap:2px;min-width:64px;}
.qf-qs-label{font-size:9px;font-weight:300;text-transform:uppercase;letter-spacing:.4px;color:var(--label)!important;}
.qf-qs-value{font-size:14px;font-weight:500;font-family:var(--mono);color:var(--text)!important;}
.qf-qs-value.pos{color:var(--teal)!important;}
.qf-qs-value.neg{color:var(--red)!important;}
.qf-qs-sep{width:1px;align-self:stretch;background:var(--border);}
@media (max-width:640px){
  .qf-quickstats-bar{padding:8px 18px;gap:10px;}
  .qf-qs-item{min-width:52px;}
  .qf-qs-value{font-size:12px;}
}
.qf-hist-header{display:grid;grid-template-columns:1fr .6fr .4fr 1fr 1fr 1fr 1fr .3fr;gap:10px;padding:8px 24px;font-size:9px;font-weight:300;text-transform:uppercase;letter-spacing:.4px;color:var(--label)!important;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;}
#qfHistList{overflow-y:auto;flex:1;}
.qf-hist-load-more{display:block;width:calc(100% - 48px);margin:12px 24px;height:36px;background:transparent;border:1px solid var(--border2);border-radius:6px;color:var(--muted2)!important;font-size:12px;font-weight:300;cursor:pointer;font-family:var(--font);transition:all .15s;}
.qf-hist-load-more:hover{border-color:var(--teal);color:var(--teal)!important;}
.qf-hist-load-more:disabled{opacity:.6;cursor:not-allowed;}
.qf-hist-row{display:grid;grid-template-columns:1fr .6fr .4fr 1fr 1fr 1fr 1fr .3fr;gap:10px;padding:9px 24px;font-size:11px;border-bottom:1px solid var(--border);align-items:center;transition:background .1s;}
.qf-hist-row:hover{background:var(--card);}
.qf-hist-row span{font-family:var(--mono);font-weight:300;color:var(--muted2)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qf-hist-row .hp{color:var(--text)!important;font-weight:300;}
.qf-hist-badge{font-size:8px;font-weight:300;padding:1px 5px;border-radius:2px;}
.qf-hist-badge.long{background:var(--teal-bg);color:var(--teal2)!important;}
.qf-hist-badge.short{background:var(--teal-bg);color:var(--teal2)!important;}
.qf-hist-badge.liq{background:var(--red-bg);color:var(--red)!important;}
.qf-hist-share-btn{background:none;border:none;padding:0;cursor:pointer;color:var(--muted)!important;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;transition:all .15s;}
.qf-hist-share-btn:hover{color:var(--teal)!important;background:var(--teal-bg);}
.qf-hist-share-btn svg{width:13px;height:13px;display:block;}

/* Share result modal — canvas position card */
.qf-share-overlay{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;}
.qf-share-overlay.show{display:flex;}
.qf-share-modal{position:relative;z-index:1;width:min(360px,88vw);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:14px;}
.qf-share-close{position:absolute;top:-38px;right:0;background:none;border:none;color:var(--text)!important;font-size:16px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;opacity:.7;}
.qf-share-close:hover{opacity:1;}
.qf-share-canvas-wrap{width:100%;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);line-height:0;}
.qf-share-canvas-wrap canvas{width:100%;height:auto;display:block;}
.qf-share-actions{display:flex;gap:10px;width:100%;}
.qf-share-btn{flex:1;height:42px;border-radius:8px;border:none;font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font);transition:all .15s;}
.qf-share-btn-copy{background:var(--card2);color:var(--text)!important;border:1px solid var(--border2);}
.qf-share-btn-copy:hover{border-color:var(--teal);color:var(--teal)!important;}
.qf-share-btn-dl{background:var(--teal);color:#04211d!important;}
.qf-share-btn-dl:hover{background:var(--teal2);}
.qf-share-btn-native{background:var(--card2);color:var(--text)!important;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;gap:8px;}
.qf-share-btn-native:hover{border-color:var(--teal);color:var(--teal)!important;}
.qf-share-native-ic{width:16px;height:16px;flex-shrink:0;}
.qf-share-btn-native[hidden]{display:none;}
.qf-share-socials{display:flex;gap:10px;width:100%;justify-content:center;}
.qf-share-social{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card2);border:1px solid var(--border2);color:var(--muted)!important;transition:all .15s;flex-shrink:0;}
.qf-share-social svg{width:19px;height:19px;}
.qf-share-social:hover{transform:translateY(-2px);}
.qf-share-social-wa:hover{background:#25d366;border-color:#25d366;color:#04140a!important;}
.qf-share-social-tg:hover{background:#26a5e4;border-color:#26a5e4;color:#031a26!important;}
.qf-share-social-x:hover{background:#000;border-color:#333;color:#fff!important;}
.qf-share-social-fb:hover{background:#1877f2;border-color:#1877f2;color:#04122b!important;}
.qf-share-social-line:hover{background:#06c755;border-color:#06c755;color:#04220f!important;}

/* Floating "share result" chip shown right after closing a trade */
.qf-share-chip{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(20px);z-index:9999;display:flex;align-items:center;gap:12px;background:var(--card2);border:1px solid var(--border2);border-radius:30px;padding:9px 10px 9px 18px;box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:all .25s ease;}
.qf-share-chip.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.qf-share-chip span{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--text)!important;white-space:nowrap;}
.qf-share-chip.pos span{color:var(--teal2)!important;}
.qf-share-chip.neg span{color:var(--red)!important;}
.qf-share-chip button{background:var(--teal);color:#04211d!important;border:none;border-radius:20px;padding:7px 16px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);white-space:nowrap;}
.qf-share-chip button:hover{background:var(--teal2);}
@media (max-width:768px){.qf-share-chip{bottom:130px;}}

/* Ranking */
.qf-ranking-wrap{padding:28px 32px;}
.qf-ranking-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:16px;font-weight:300;}
.qf-rank-table{width:100%;border-collapse:collapse;font-size:12px;}
.qf-rank-table th{padding:9px 12px;text-align:left;font-size:9px;font-weight:300;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)!important;border-bottom:1px solid var(--border);background:var(--surface);}
.qf-rank-table td{padding:11px 12px;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:12px;}
.qf-rank-name{font-size:13px;font-weight:300;font-family:var(--font);color:var(--text)!important;}
.qf-rank-pos-teal{color:var(--teal)!important;font-weight:300;}
.qf-rank-pos-red{color:var(--red)!important;font-weight:300;}

/* Toast */
/* ── SKELETON LOADERS ── applied to price fields that start empty until the
   first Binance tick lands (primeInitialPrices()/WS handshake), so the very
   first paint shows a shimmering placeholder instead of a bare "—" that can
   read as broken. Purely visual: the underlying "—" text stays in the DOM
   (screen readers still get something) and normal text simply replaces it
   once JS removes this class — no markup or logic depends on it. */
.nms2-skel{
  color:transparent!important;display:inline-block;min-width:64px;border-radius:4px;
  background:linear-gradient(90deg,var(--border,#333) 25%,var(--border2,#484848) 37%,var(--border,#333) 63%);
  background-size:400% 100%;animation:nms2skel 1.4s ease infinite;
}
@keyframes nms2skel{0%{background-position:100% 50%}100%{background-position:0 50%}}

.nms-t-stack{position:fixed;bottom:16px;right:16px;z-index:9999;display:flex;flex-direction:column-reverse;gap:8px;max-width:320px;pointer-events:none;}
.nms-t-toast{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--border2);padding:10px 14px;font-size:12px;font-weight:300;color:var(--text)!important;box-shadow:0 8px 24px rgba(0,0,0,.5);transform:translateX(24px);opacity:0;transition:transform .25s ease,opacity .25s ease;pointer-events:auto;border-radius:6px;cursor:pointer;}
.nms-t-toast.show{transform:translateX(0);opacity:1;}
.nms-t-toast.leaving{opacity:0;transform:translateX(24px) scale(.96);}
.nms-t-toast .nms-t-ic{flex:0 0 auto;width:16px;height:16px;display:flex;}
.nms-t-toast .nms-t-ic svg{width:16px;height:16px;}
.nms-t-toast .nms-t-msg{line-height:1.4;}
.nms-t-toast.success{border-left:3px solid var(--teal);}
.nms-t-toast.success .nms-t-ic{color:var(--teal);}
.nms-t-toast.error{border-left:3px solid var(--red);}
.nms-t-toast.error .nms-t-ic{color:var(--red);}
.nms-t-toast.win{border-left:3px solid var(--teal);background:var(--teal-bg);}
.nms-t-toast.win .nms-t-ic{color:var(--teal);}
.nms-t-loader{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flash-up{0%{background:rgba(0,194,178,.15)}100%{background:transparent}}
@keyframes flash-dn{0%{background:rgba(255,77,106,.12)}100%{background:transparent}}
.nms-pnl-up{animation:flash-up .5s ease-out;}
.nms-pnl-down{animation:flash-dn .5s ease-out;}

/* RESPONSIVE */
/* Order book needs real estate to not feel cramped next to the chart and
   trade panel — below this width it auto-hides (same effect as the manual
   toggle) rather than squeezing everything. The manual toggle still works
   above this point to let people turn it off if they just don't want it. */
@media(max-width:1400px){
  .qf-main{grid-template-columns:320px minmax(0,1fr)!important;grid-template-areas:"left wlbar" "left chart"!important;}
  .qf-wrap.qf-panel-right .qf-main{grid-template-columns:minmax(0,1fr) 320px!important;grid-template-areas:"wlbar left" "chart left"!important;}
  .qf-book{display:none;}
  .qf-book-toggle{display:none;}
}
@media(max-width:1100px){
  .qf-main{grid-template-columns:260px minmax(0,1fr);}
  .qf-wrap.qf-panel-right .qf-main{grid-template-columns:minmax(0,1fr) 260px;}
}
@media(max-width:768px){
  /* Only reserve bottom space when the admin actually configured a link —
     sites that never touch Ajustes → Enlaces get zero layout change. */
  .qf-wrap.nms-has-bottom-nav{padding-bottom:calc(62px + env(safe-area-inset-bottom));}

  /* ── BOTTOM NAV: fixed strip pinned to the bottom of the screen with the
     configurable external link(s) as icon-only "luxury" buttons — a slim
     hairline top border, generous tap targets, and the app's own
     teal-green accent so it reads as part of the same premium UI instead
     of a bolted-on nav bar. Rendered by PHP only when at least one link
     is configured in the admin (Ajustes → Enlaces), so it stays invisible
     by default. */
  .qf-bottom-nav{
    display:flex;align-items:center;justify-content:space-evenly;
    position:fixed;left:0;right:0;bottom:0;z-index:900;
    height:58px;padding:0 10px;padding-bottom:env(safe-area-inset-bottom);
    background:var(--surface);border-top:1px solid var(--border);
  }
  .qf-bn-link{
    display:flex;align-items:center;justify-content:center;
    width:46px;height:46px;color:var(--teal)!important;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
    transition:opacity .15s,transform .15s;
  }
  .qf-bn-link:active{opacity:.6;transform:scale(.92);}
  .qf-bn-icon{width:23px;height:23px;}

  .qf-wrap.nms-has-bottom-nav .nms-t-stack{bottom:calc(58px + env(safe-area-inset-bottom) + 12px);}
  .nms-t-stack{right:12px;left:12px;max-width:none;}

  .qf-main{display:flex;flex-direction:column;overflow:visible;}
  .qf-watchlist-bar{order:1;}
  .qf-left{order:2;width:100%;min-width:0;border-right:none;border-bottom:1px solid var(--border);}
  .qf-center{order:3;min-height:0;}

  /* ── HOME (list) vs DETAIL (investment area) screens ──
     .qf-wrap carries one of these two state classes (toggled in JS on row
     tap / back button). Only rearranges what's shown — none of the
     underlying markup or desktop CSS grid is touched. */
  .qf-wrap.nms-mobile-home .qf-left,
  .qf-wrap.nms-mobile-home .qf-center{display:none;}
  .qf-wrap.nms-mobile-detail .qf-watchlist-bar{display:none;}
  .qf-asset-title-row{justify-content:space-between;}
  .qf-asset-title-row::after{content:'';width:44px;flex-shrink:0;} /* balances the back button so the centered group stays centered */
  .qf-mobile-back{display:flex;align-items:center;justify-content:center;position:static;width:44px;height:44px;flex-shrink:0;transform:none;z-index:2;}
  .qf-mobile-back:active{opacity:.5;}
  .qf-asset-title-center{flex:1;justify-content:center;min-width:0;}

  /* ── Home list: Portafolio + Lista de Seguimiento stacked, big rows ── */
  .qf-wl-tabs .qf-wl-tab{display:none;}
  .qf-wl-list{display:flex;flex-direction:column;overflow-x:visible;padding:6px 0 10px;gap:0;cursor:default;min-height:0;}
  .qf-wl-list .qf-wl-hint{width:100%;box-sizing:border-box;flex-direction:column;justify-content:center;text-align:center;white-space:normal;padding:22px 24px;gap:8px;}
  .qf-wl-list .qf-wl-hint-ic{width:30px;height:30px;}
  .qf-mh-heading{display:block;width:100%;box-sizing:border-box;padding:14px 18px 6px;font-size:12px;color:var(--muted2)!important;text-transform:uppercase;letter-spacing:.4px;}
  .qf-wl-item,.qf-wl-portfolio-item{
    flex-shrink:0;width:100%;height:auto;min-height:60px;border:none;border-bottom:1px solid var(--border);
    border-radius:0;background:transparent;gap:12px;
  }
  .qf-wl-item{padding:10px 18px;}
  .qf-wl-portfolio-item.active{background:transparent;border-color:var(--border);}
  .qf-wl-item.active{background:transparent;border-color:var(--border);}

  /* ── Swipe-to-close (bank-app style): drag a Portafolio row left to
     reveal a "Cerrar" button behind it. .qf-wl-portfolio-item becomes the
     clipping/positioning frame; .qf-swipe-content holds the actual row
     content and is what physically slides via transform; the reveal button
     sits absolutely behind it, flush to the right edge. The row's own
     small "X" close icon is hidden here since the swipe reveal replaces it
     as the closing action on mobile — desktop's chip keeps its X. ── */
  .qf-wl-portfolio-item{padding:0;position:relative;overflow:hidden;touch-action:pan-y;}
  .qf-wl-portfolio-item .qf-wl-close{display:none;}
  .qf-swipe-content{display:flex;align-items:center;width:100%;gap:12px;padding:10px 18px;background:var(--bg);position:relative;z-index:2;transition:transform .25s cubic-bezier(.2,.8,.2,1);will-change:transform;}
  .qf-wl-portfolio-item.qf-swiping .qf-swipe-content{transition:none;}
  .qf-swipe-close-reveal{display:flex;align-items:center;justify-content:center;position:absolute;top:0;right:0;bottom:0;width:84px;background:var(--red);color:#fff!important;font-size:13px;font-weight:500;z-index:1;-webkit-tap-highlight-color:transparent;}
  .qf-swipe-close-reveal:active{filter:brightness(.9);}
  /* Watchlist rows intentionally do NOT keep a highlighted state after tap —
     selecting one just opens it; the row itself should look identical to
     the others afterwards. */
  .qf-wl-item{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:none;}
  .qf-wl-item.qf-dragging{background:var(--card2);box-shadow:0 6px 18px rgba(0,0,0,.45);position:relative;z-index:50;border-radius:0;}
  .qf-mh-text{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px;}
  .qf-mh-sub{display:block;font-size:12px;color:var(--muted)!important;font-weight:300;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .qf-wl-item .qf-wl-pair,.qf-wl-portfolio-item .qf-wl-pair{font-size:15px!important;}
  .qf-mh-val{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;}
  .qf-mh-val .qf-wl-price,.qf-mh-val .qf-wl-pnl{margin-left:0;font-size:15px!important;}
  .qf-wl-item .qf-wl-pnl:empty{display:none;}
  .qf-wl-item .qf-wl-close,.qf-wl-portfolio-item .qf-wl-close{flex-shrink:0;}
  .qf-chart-wrap{height:180px!important;}
  /* ── TOP BAR ──
     Previously "Operar" was centered via absolute positioning so its gap to
     the logo stayed even regardless of platform-name length — but that put
     it at a fixed screen position independent of the right-hand cluster's
     actual width, so a long balance (e.g. $10,000.00) could still run into
     it. Left in normal flow instead: logo+tab pinned left, balance+buttons
     pinned right via the existing qf-topbar space-between — the two groups
     can never overlap, only crowd the middle gap, and with the label gone
     below there's plenty of room for that anyway. */
  .qf-topbar{padding:0 10px 0 14px;}
  .qf-nav a:not(.active){display:none;}
  .qf-logo{font-size:13px;}
  .qf-topbar-left{gap:14px;}
  /* Balance matters more than the G&P % at a glance on mobile, so it takes
     the G&P slot in the top bar; G&P itself is still one tap away in the
     history/portfolio views, nothing is removed, just reprioritized here.
     The "Saldo" label is dropped too — on a narrow phone the bare $ value
     reads fine on its own and keeps this cluster compact. */
  .qf-topbar-right{gap:12px;}
  .qf-topbar-right .qf-gp{display:none;}
  /* Ancla de estabilidad entre navegadores: en vez de confiar en que Chrome
     y Firefox calculen el mismo ancho disponible para esta fila (fuentes
     con métricas distintas, redondeo de flexbox distinto — de ahí que se
     viera bien en uno y cortado en el otro), el saldo es el único elemento
     que se permite encoger/truncar con "…" si hace falta espacio. El
     selector de idioma y el botón de tema quedan con tamaño fijo
     garantizado (flex-shrink:0): nunca se cortan, pase lo que pase con el
     cálculo exacto de píxeles de cada motor de renderizado. */
  .qf-top-stats{min-width:0;flex:1 1 auto;overflow:hidden;}
  .qf-top-stat{min-width:0;overflow:hidden;}
  .qf-ts-val{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
  .qf-theme-switch,.qf-lang-switch{flex-shrink:0;}
  .qf-topbar-right .qf-top-stats{display:flex;}
  .qf-ts-label-full,.qf-ts-label-short{display:none;}
  .qf-top-tabs,.qf-user-pill{display:none;}
  /* Panel-position toggle only makes sense once there's a left/right split
     to move — on mobile the panel already stacks full-width, so hide it. */
  .qf-layout-btn{display:none;}
  /* Extra breathing room between the balance and the theme button so the
     two don't read as glued together now that the balance cluster is
     narrower. */
  .qf-theme-switch{margin-left:8px;}
  .qf-price{font-size:26px;}
  .qf-history-panel{flex:1;min-height:220px;}
  .qf-bp-tabs{display:none;}
  #qfBpPositionsPanel{display:none!important;}
  #qfBpHistoryPanel{display:flex!important;}
  .qf-wl-tabs{flex-wrap:wrap;padding:10px 18px 0;gap:6px;row-gap:8px;}
  .qf-wl-tab{padding:8px 2px;font-size:13px;}
  .qf-wl-search-wrap{width:94%;max-width:none;margin:0 auto;order:3;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
  .qf-wl-search-icon{left:calc(16px + env(safe-area-inset-left));width:16px;height:16px;}
  .qf-wrap .qf-wl-search{width:100%;height:46px;font-size:16px;padding:0 16px 0 42px;border-radius:10px;}
  .qf-wrap .qf-wl-search:focus{width:100%;}
  .qf-wl-search-results{position:fixed;left:3% !important;width:94% !important;max-height:min(70vh,480px);border-radius:12px;padding-bottom:env(safe-area-inset-bottom);overscroll-behavior:contain;}
  .qf-wl-sr-heading{padding:10px 14px 6px;font-size:10px;}
  .qf-wl-sr-item{padding:12px 12px 12px 6px;gap:10px;}
  .qf-star{width:34px;height:34px;font-size:18px;}
  .qf-wl-sr-sym{font-size:14px;}
  .qf-wl-sr-name{font-size:12px;}
  .qf-wl-sr-price{font-size:13px;}
  .qf-wl-sr-pct{font-size:11px;}
  .qf-asset-head{padding:20px 18px 16px;}
  .qf-power,.qf-positions,.qf-stats,.qf-pos-summary{padding:14px 18px;}
  .qf-op-header,.qf-op-amount,.qf-op-lev,.qf-op-summary,.qf-op-sltp,.qf-sltp-links,.qf-sltp-edit{padding-left:18px;padding-right:18px;}
  .qf-action-btns{padding:14px 18px;}
  .qf-limit-corner{width:28px;height:28px;font-size:11px;}
  .qf-chart-topbar,.qf-chart-footer{padding-left:18px;padding-right:18px;}
  .qf-hist-title,.qf-hist-header,.qf-hist-row{padding-left:18px;padding-right:18px;}
  .qf-hist-load-more{width:calc(100% - 36px);margin:12px 18px;}

  /* Small text is hard to read on phones — bump these up noticeably on mobile only */
  .qf-pos-sum-label,.qf-pos-val,.qf-pa-label,.qf-pa-margin-val,.qf-pa-pct-val,
  .qf-stat-label,.qf-power-label,.qf-wl-pnl,.qf-wl-price,.qf-wl-sr-name,
  .qf-hist-header,.qf-hist-row span,.qf-op-amount-label,.qf-op-amount-unit,
  .qf-op-lev-row,.qf-op-lev-marks,.qf-op-sum-row,.qf-sltp-field-label,
  .qf-sltp-field-unit,.qf-sltp-edit-est,.qf-ts-label,
  .qf-chg,.qf-market-badge,.qf-binance-badge,.qf-last-label,.qf-gp-label,
  .qf-wl-tab,.qf-iv-btn,.qf-ct-btn,.qf-pa-btn,
  .qf-hist-badge,.qf-pos-badge,.qf-pos-lev,.qf-wl-search,.qf-wl-search::placeholder,
  .qf-chart-time,.qf-hist-row .qf-hist-badge,.qf-rank-table th{font-size:13px!important;}
  .qf-pos-sum-title,.qf-pos-sum-val,.qf-stat-val,.qf-power-val,.qf-wl-pair,
  .qf-wl-sr-sym,.qf-hist-row .hp,.qf-op-sum-row span:last-child,
  .qf-sltp-field-val,.qf-ts-val,.qf-sltp-link,.qf-op-title,.qf-op-price,
  .qf-op-lev-row strong,.qf-asset-name{font-size:15px!important;}
  .qf-ab-label{font-size:12px!important;}
  .qf-ab-price{font-size:14px!important;}
  .qf-ab-sub{font-size:11px!important;}

  /* ── BIGGER TOUCH TARGETS ──
     Anything under ~40px is genuinely hard to hit accurately with a thumb,
     and a missed tap costs a retry — exactly the kind of delay that matters
     when the price is moving. These only apply on mobile; desktop keeps its
     original compact sizing. */
  .qf-pos-close-btn{height:36px;padding:0 14px;font-size:12px;}
  .qf-wl-close{width:26px;height:26px;font-size:11px;}
  .qf-pa-btn{height:40px;font-size:12px;}
  .qf-alert-bell{min-width:40px;min-height:40px;}
  .qf-sltp-link{padding:6px 0;display:inline-block;}
  .qf-iv-btn,.qf-ct-btn{min-height:32px;}
  .qf-theme-btn{min-width:40px;min-height:40px;}
}
@media(max-width:480px){
  .qf-top-tabs{display:none;}
  .qf-price{font-size:22px;}
}

/* ── DEFENSIVE OVERRIDE ──
   Some theme/page-builder stylesheets load after ours and target generic
   selectors (nav a, uppercase labels, etc.) with higher specificity, which
   silently darkens our text even though our own rule is technically correct.
   This block re-asserts the intended colors with maximum specificity so
   nothing else in the page can win the cascade. */
.qf-wrap .qf-nav a{color:var(--label)!important;}
.qf-wrap .qf-nav a.active,.qf-wrap .qf-nav a:hover{color:var(--teal)!important;}
.qf-wrap .qf-sltp-link{color:var(--teal)!important;}
.qf-wrap .qf-power-title,
.qf-wrap .qf-stat-label,
.qf-wrap .qf-equity-title,
.qf-wrap .qf-pos-title,
.qf-wrap .qf-hist-title,
.qf-wrap .qf-hist-header,
.qf-wrap .qf-chart-label,
.qf-wrap .qf-date-btn{color:var(--label)!important;}
.qf-wrap .qf-price,
.qf-wrap .qf-asset-name,
.qf-wrap .qf-pos-sum-val,
.qf-wrap .qf-op-amount-val,
.qf-wrap .qf-stat-val,
.qf-wrap .qf-power-val{color:var(--text)!important;}
/* La regla de arriba (mismo peso de especificidad que .qf-pos-sum-val.teal/.neg
   más arriba en este archivo) gana por venir después en el orden de cascada,
   dejando el retorno y las ganancias no realizadas siempre en el color neutro
   sin importar si están en ganancia o pérdida. Estas dos líneas reafirman el
   color correcto con especificidad estrictamente mayor. */
.qf-wrap .qf-pos-sum-val.teal{color:var(--teal)!important;}
.qf-wrap .qf-pos-sum-val.neg{color:var(--red)!important;}

/* ── PULSO SUTIL EN VALORES QUE VIVEN ACTUALIZÁNDOSE ──
   Retorno de la inversión y ganancias no realizadas cambian con cada tick de
   precio; este pulso leve (solo opacidad, sin movimiento) comunica "esto está
   vivo" sin ser una animación llamativa. */
@keyframes qfPulseLive{0%,100%{opacity:1;}50%{opacity:.72;}}
.qf-ret-live,.qf-pnl-live{animation:qfPulseLive 1.8s ease-in-out infinite;}

/* ── KILL THEME'S BLUE FOCUS/ACTIVE STATE ──
   The WordPress theme's global button/link focus style (blue background +
   box-shadow ring) loads after this file and wins on specificity for plain
   button/a elements, so it was showing on tab and chip taps and sticking
   until the element lost focus. Reset every focus/active state to nothing,
   then restore each element's own intended .active look on top. */
.qf-wrap button:focus,.qf-wrap button:active,
.qf-wrap a:focus,.qf-wrap a:active{
  background-image:none!important;box-shadow:none!important;outline:none!important;
}
.qf-wrap .qf-wl-tab:focus,.qf-wrap .qf-wl-tab:active,
.qf-wrap .qf-top-tab:focus,.qf-wrap .qf-top-tab:active,
.qf-wrap .qf-bp-tab:focus,.qf-wrap .qf-bp-tab:active,
.qf-wrap .qf-nav a:focus,.qf-wrap .qf-nav a:active{
  background:none!important;background-color:transparent!important;border-color:transparent!important;
}
.qf-wrap .qf-bp-tab.active:focus,.qf-wrap .qf-bp-tab.active:active{border-bottom-color:var(--teal)!important;}
.qf-wrap .qf-top-tab.active:focus,.qf-wrap .qf-top-tab.active:active{background:var(--teal)!important;}
.qf-wrap .qf-wl-item:focus,.qf-wrap .qf-wl-item:active,
.qf-wrap .qf-wl-portfolio-item:focus,.qf-wrap .qf-wl-portfolio-item:active{
  background:var(--card)!important;border-color:var(--border2)!important;
}
.qf-wrap .qf-wl-item.active:focus,.qf-wrap .qf-wl-item.active:active,
.qf-wrap .qf-wl-portfolio-item.active:focus,.qf-wrap .qf-wl-portfolio-item.active:active{
  background:var(--teal-bg)!important;border-color:var(--teal)!important;
}