/* ═══════════════════════════════════════════════════════
   JEŻYK Chart Viewer v17 — chart_styles.css
   Redesign: nowe style UX, powody niskiej oceny,
   setup quality badge, ulepszone karty, płynniejsze
   animacje, polepszona czytelność, nowe progi kolorów.
═══════════════════════════════════════════════════════ */

/* ── CSS VARIABLES ── */
:root {
  --bg:    #080a0f;
  --bg2:   #0c0f17;
  --bg3:   #111622;
  --bg4:   #18202e;
  --bg5:   #1e2840;
  --brd:   #1c2436;
  --brd2:  #243048;
  --txt:   #6b80a0;
  --txt2:  #a8bcd4;
  --bright:#d8e8f8;
  --green: #00c896;
  --red:   #f03c55;
  --gold:  #e8a820;
  --acc:   #2e6fff;
  --acc2:  #1a50d0;
  --purple:#b06ef0;
  --mono:  'JetBrains Mono', monospace;
  --cond:  'Barlow Condensed', sans-serif;

  /* Glow colors */
  --glow-green: rgba(0,200,150,.18);
  --glow-red:   rgba(240,60,85,.18);
  --glow-blue:  rgba(46,111,255,.18);
  --glow-gold:  rgba(232,168,32,.18);
  --glow-purp:  rgba(176,110,240,.18);
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
body { font-family: var(--mono); font-size: 12px; color: var(--txt); display: flex; flex-direction: column; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--brd2); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #2e6fff55; }

/* ══════════════════════════════════════
   TOP BAR — v15 redesign
══════════════════════════════════════ */
#topbar {
  flex-shrink: 0; min-height: 42px; height: auto; background: var(--bg2);
  border-bottom: 1px solid var(--brd);
  display: flex; align-items: center; flex-wrap: wrap; padding: 4px 12px; gap: 8px; row-gap: 5px; overflow: visible;
  box-shadow: 0 1px 20px rgba(0,0,0,.4);
}
.logo {
  font-family: var(--cond); font-weight: 700; font-size: 18px;
  letter-spacing: 3px; color: var(--bright); margin-right: 2px; white-space: nowrap;
  text-shadow: 0 0 20px rgba(176,110,240,.3);
}
.logo em { color: var(--gold); font-style: normal; }
.logo-ver {
  font-size: 9px; color: var(--txt); letter-spacing: 0; font-weight: 400;
  background: var(--bg4); padding: 1px 5px; border-radius: 8px;
  border: 1px solid var(--brd2); margin-left: 4px; vertical-align: middle;
}
.sym-wrap {
  display: flex; align-items: center; background: var(--bg3);
  border: 1px solid var(--brd2); border-radius: 5px; padding: 0 10px; height: 28px; gap: 4px;
  transition: border-color .15s;
}
.sym-wrap:hover { border-color: var(--acc); }
.sym-wrap select {
  font-family: var(--mono); font-weight: 700; font-size: 12px; color: var(--gold);
  background: transparent; border: none; outline: none; cursor: pointer;
  appearance: none; padding-right: 8px;
}
.tf-group { display: flex; gap: 2px; background: var(--bg3); border: 1px solid var(--brd2); border-radius: 5px; padding: 2px; }
.tf-btn {
  font-family: var(--mono); font-size: 11px; background: transparent;
  border: 1px solid transparent; color: var(--txt);
  padding: 2px 8px; border-radius: 3px; cursor: pointer; transition: all .12s;
}
.tf-btn:hover { color: var(--txt2); background: var(--bg4); }
.tf-btn.active { background: var(--acc); border-color: transparent; color: #fff; box-shadow: 0 0 8px var(--glow-blue); }
.vdiv { width: 1px; height: 22px; background: var(--brd); flex-shrink: 0; margin: 0 2px; }
.ohlc-strip { display: flex; gap: 10px; align-items: baseline; font-size: 11px; }
.oi { display: flex; gap: 4px; align-items: baseline; }
.oi .k { color: var(--txt); font-size: 10px; }
.oi .v { color: var(--txt2); font-weight: 500; }
.oi .v.up { color: var(--green); }
.oi .v.dn { color: var(--red); }
.spacer { flex: 1; }
.live-wrap {
  display: flex; align-items: center; gap: 7px; background: var(--bg3);
  border: 1px solid var(--brd2); border-radius: 5px; padding: 3px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green); animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--green); } 50% { opacity: .3; box-shadow: 0 0 2px var(--green); } }
.live-price {
  font-family: var(--cond); font-weight: 700; font-size: 19px;
  color: var(--bright); min-width: 72px; text-align: right;
  letter-spacing: .5px;
}
.btn-sm {
  font-family: var(--mono); font-size: 10px; background: var(--bg3);
  border: 1px solid var(--brd2); color: var(--txt2); padding: 3px 9px;
  border-radius: 4px; cursor: pointer; transition: all .12s; white-space: nowrap;
}
.btn-sm:hover { border-color: var(--acc); color: var(--bright); background: var(--bg4); }
.btn-replay-toggle { color: #a070e0; border-color: rgba(176,110,240,.25); }
.btn-replay-toggle:hover { color: var(--purple); border-color: var(--purple); box-shadow: 0 0 8px var(--glow-purp); }
.btn-demo { color: var(--gold); border-color: rgba(232,168,32,.25); }
.btn-demo:hover { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 8px var(--glow-gold); }

/* ══════════════════════════════════════
   RANGE BAR
══════════════════════════════════════ */
#rangebar {
  flex-shrink: 0; height: 30px; background: var(--bg2);
  border-bottom: 1px solid var(--brd);
  display: flex; align-items: center; padding: 0 12px; gap: 6px; font-size: 11px;
  overflow: hidden;
}
.rl { color: var(--txt); font-size: 9px; text-transform: uppercase; letter-spacing: .8px; }
#rf, #rt {
  background: var(--bg3); border: 1px solid var(--brd2); color: var(--txt2);
  font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 4px; outline: none;
  transition: border-color .12s;
}
#rf:focus, #rt:focus { border-color: var(--acc); }
.btn-rng, .btn-quick {
  font-family: var(--mono); font-size: 11px; background: var(--bg3);
  border: 1px solid var(--brd2); color: var(--txt2); padding: 2px 9px;
  border-radius: 4px; cursor: pointer; transition: all .12s;
}
.btn-rng:hover, .btn-quick:hover { border-color: var(--acc); color: var(--bright); background: var(--bg4); }
#ccount { color: var(--txt); font-size: 10px; white-space: nowrap; }
#ccount b { color: var(--txt2); }
.refbar { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--txt); }
#next-ref { font-weight: 600; color: var(--txt2); }
.ref-prog { width: 50px; height: 2px; background: var(--brd2); border-radius: 2px; overflow: hidden; }
.ref-prog-bar { height: 100%; background: var(--acc); border-radius: 2px; transition: width .5s linear; }

/* ══════════════════════════════════════
   MAIN LAYOUT
══════════════════════════════════════ */
#main { flex: 1; display: flex; overflow: hidden; min-height: 0; }
#chart-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#canv-wrap { flex: 1; display: flex; min-height: 0; }
#chart-area { flex: 1; position: relative; overflow: hidden; cursor: crosshair; min-width: 0; }
canvas { position: absolute; top: 0; left: 0; display: block; }
#cv-main { z-index: 1; }
#cv-forecast { z-index: 2; pointer-events: none; }
#cv-over { z-index: 3; pointer-events: none; }
#price-ax {
  width: 72px; flex-shrink: 0; background: var(--bg2);
  border-left: 1px solid var(--brd); position: relative; cursor: ns-resize;
}
#time-ax {
  height: 26px; flex-shrink: 0; background: var(--bg2);
  border-top: 1px solid var(--brd); position: relative; overflow: hidden;
}

/* ══════════════════════════════════════
   LOADING / TOOLTIP
══════════════════════════════════════ */
#loading {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(8,10,15,.8); z-index: 40; backdrop-filter: blur(2px);
}
#loading.show { display: flex; }
.spin {
  width: 22px; height: 22px; border: 2px solid var(--brd2); border-top-color: var(--acc);
  border-radius: 50%; animation: sp .65s linear infinite; margin-right: 9px;
}
@keyframes sp { to { transform: rotate(360deg); } }
#chtip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: auto;
  top: auto;
  background: rgba(8, 12, 20, .42);
  border: 1px solid rgba(120, 145, 180, .18);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 9px;
  color: var(--txt2);
  pointer-events: none;
  display: none;
  z-index: 50;
  white-space: nowrap;
  box-shadow: none;
  backdrop-filter: blur(4px);
  opacity: .72;
}
#chtip.chart-ohlc-fixed {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 90px);
  overflow: hidden;
}
.cr { display: flex; gap: 8px; line-height: 1.7; }
.ck { color: var(--txt); }
.cv { color: var(--bright); }
.cv.up { color: var(--green); }
.cv.dn { color: var(--red); }

/* ══════════════════════════════════════
   REPLAY BAR
══════════════════════════════════════ */
.replay-bar {
  flex-shrink: 0; height: 32px; background: rgba(176,110,240,.07);
  border-top: 1px solid rgba(176,110,240,.2);
  display: none; align-items: center; padding: 0 12px; gap: 7px; font-size: 10px;
}
.replay-bar.active { display: flex; }
.replay-label { font-size: 9px; font-weight: 700; color: #a070e0; letter-spacing: 1px; }
.replay-btn { font-family: var(--mono); font-size: 10px; padding: 2px 10px; border-radius: 4px; cursor: pointer; border: 1px solid; transition: all .12s; }
.replay-btn:hover { opacity: .8; }
.marker-btn { background: rgba(176,110,240,.12); border-color: rgba(176,110,240,.4); color: #c090ff; }
.start-btn  { background: rgba(0,200,150,.1);   border-color: var(--green);  color: var(--green); }
.pause-btn  { background: rgba(232,168,32,.1);  border-color: var(--gold);   color: var(--gold); }
.stop-btn   { background: rgba(240,60,85,.1);   border-color: var(--red);    color: var(--red); }
.plain-btn  { background: var(--bg3);            border-color: var(--brd2);   color: var(--txt2); }
.replay-speed-sel {
  font-family: var(--mono); font-size: 10px; background: var(--bg3);
  border: 1px solid var(--brd2); color: var(--txt2); padding: 2px 6px;
  border-radius: 4px; outline: none; cursor: pointer;
}
.replay-status { font-size: 9px; color: #a070e0; min-width: 110px; }
/* ══════════════════════════════════════
   REPLAY STEP BUTTONS + ANIMACJA
══════════════════════════════════════ */
#btn-replay-step-fwd, #btn-replay-step-bwd {
  background: rgba(176,110,240,.1);
  border-color: rgba(176,110,240,.4) !important;
  color: #c090ff !important;
  font-weight: 700;
  letter-spacing: 0;
  transition: background .15s, box-shadow .15s;
}
#btn-replay-step-fwd:hover, #btn-replay-step-bwd:hover {
  background: rgba(176,110,240,.22);
  box-shadow: 0 0 8px rgba(176,110,240,.35);
}
#btn-replay-step-fwd:active, #btn-replay-step-bwd:active {
  background: rgba(176,110,240,.35);
  transform: scale(0.96);
}

/* ══════════════════════════════════════
   HTF JEŻYKI + BSL/SSL — Plugin Box
══════════════════════════════════════ */
.plg-box[style*="00c896"], .plg-box[style*="00e5ff"] {
  background: rgba(0,0,0,.15);
}
/* Badge HTF kontekstu w kartach pozycji */
.htf-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 8px; font-family: var(--mono); font-weight: 700;
  padding: 1px 5px; border-radius: 3px; letter-spacing: .3px;
}
.htf-badge.htf-bull { background: rgba(0,200,150,.15); color: #00c896; border: 1px solid rgba(0,200,150,.3); }
.htf-badge.htf-bear { background: rgba(240,60,85,.15);  color: #f03c55; border: 1px solid rgba(240,60,85,.3); }
.htf-badge.htf-bsl  { background: rgba(0,229,255,.12); color: #00e5ff; border: 1px solid rgba(0,229,255,.3); }
.htf-badge.htf-ssl  { background: rgba(255,23,68,.12);  color: #ff1744; border: 1px solid rgba(255,23,68,.3); }
.htf-badge.htf-4h   { background: rgba(80,180,255,.12); color: #50b4ff; border: 1px solid rgba(80,180,255,.3); }



/* ══════════════════════════════════════
   RSI PANEL
══════════════════════════════════════ */
#rsi-panel {
  flex-shrink: 0; height: 160px; min-height: 80px; max-height: 50vh;
  background: var(--bg2); border-top: 1px solid var(--brd);
  display: flex; flex-direction: column; position: relative; overflow: hidden;
}
#rsi-resize-handle {
  height: 5px; cursor: ns-resize; background: transparent; flex-shrink: 0;
  border-top: 2px solid var(--brd2); position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  transition: border-color .15s;
}
#rsi-resize-handle:hover { border-top-color: var(--purple); }
#rsi-content { flex: 1; display: flex; overflow: hidden; margin-top: 5px; }
#rsi-chart-area { flex: 1; position: relative; overflow: hidden; }
#cv-rsi { position: absolute; top: 27px; left: 0; width: 100%; height: calc(100% - 27px); }
#rsi-price-ax {
  width: 72px; flex-shrink: 0; background: var(--bg2);
  border-left: 1px solid var(--brd); position: relative;
}
#cv-rsi-ax { position: absolute; top: 27px; left: 0; width: 100%; height: calc(100% - 27px); }
#rsi-toolbar {
  position: absolute; top: 0; left: 0; right: 0; height: 27px;
  background: var(--bg3); border-bottom: 1px solid var(--brd);
  display: flex; align-items: center; padding: 0 8px; gap: 5px; font-size: 10px; z-index: 5;
}
.rsi-panel-title { font-family: var(--cond); font-weight: 700; font-size: 12px; color: var(--purple); letter-spacing: 1.5px; }
.rsi-sep { width: 1px; height: 14px; background: var(--brd); flex-shrink: 0; }
.rsi-tb-btn {
  font-family: var(--mono); font-size: 9px; background: transparent;
  border: 1px solid transparent; color: var(--txt);
  padding: 2px 6px; border-radius: 3px; cursor: pointer; transition: all .1s;
}
.rsi-tb-btn.active { background: rgba(176,110,240,.18); border-color: rgba(176,110,240,.35); color: #c090ff; }
.rsi-tb-btn:hover { border-color: var(--brd2); color: var(--txt2); }
.rsi-div-badge {
  font-size: 9px; padding: 1px 7px; border-radius: 8px; font-weight: 700;
}
.rsi-div-badge.bull { background: rgba(0,200,150,.15); border: 1px solid rgba(0,200,150,.3); color: var(--green); }
.rsi-div-badge.bear { background: rgba(240,60,85,.15);  border: 1px solid rgba(240,60,85,.3);  color: var(--red); }

/* MFI Panel */
#mfi-panel {
  flex-shrink: 0; height: 120px; min-height: 60px;
  background: var(--bg2); border-top: 1px solid var(--brd);
  flex-direction: column; position: relative; overflow: hidden;
}
#mfi-resize-handle {
  height: 5px; cursor: ns-resize; background: transparent; flex-shrink: 0;
  border-top: 2px solid var(--brd2); position: absolute; top: 0; left: 0; right: 0; z-index: 10;
}
#mfi-resize-handle:hover { border-top-color: var(--gold); }
#mfi-content { flex: 1; display: flex; overflow: hidden; margin-top: 5px; }
#mfi-chart-area { flex: 1; position: relative; overflow: hidden; }
#cv-mfi { position: absolute; top: 27px; left: 0; width: 100%; height: calc(100% - 27px); }
#mfi-price-ax { width: 72px; flex-shrink: 0; background: var(--bg2); border-left: 1px solid var(--brd); position: relative; }
#cv-mfi-ax { position: absolute; top: 27px; left: 0; width: 100%; height: calc(100% - 27px); }
#mfi-toolbar {
  position: absolute; top: 0; left: 0; right: 0; height: 27px;
  background: var(--bg3); border-bottom: 1px solid var(--brd);
  display: flex; align-items: center; padding: 0 8px; gap: 6px; font-size: 10px; z-index: 5;
}

/* PrądFlow panel */
#prad-flow-panel {
  display: none; flex-direction: column; min-height: 80px;
  background: var(--bg); border-top: 1px solid var(--brd);
  position: relative; flex-shrink: 0;
}
#prad-flow-resize-handle {
  position: absolute; top: 0; left: 0; right: 0; height: 4px; cursor: ns-resize; z-index: 10;
}
#prad-flow-resize-handle:hover { background: rgba(255,153,0,.3); }
#prad-flow-toolbar {
  display: flex; align-items: center; gap: 6px; padding: 0 8px;
  background: var(--bg3); border-bottom: 1px solid var(--brd); height: 22px; flex-shrink: 0;
}
#prad-flow-content { display: flex; flex: 1; overflow: hidden; }
#prad-flow-chart-area { flex: 1; position: relative; overflow: hidden; }
#prad-flow-ax { width: 56px; flex-shrink: 0; background: var(--bg2); border-left: 1px solid var(--brd); }

/* ══════════════════════════════════════
   SIDEBAR — v15 redesign
══════════════════════════════════════ */
#sidebar {
  width: 276px; flex-shrink: 0; background: var(--bg2);
  border-left: 1px solid var(--brd); display: flex; flex-direction: column; overflow: hidden;
}
.sb-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-bottom: 1px solid var(--brd); flex-shrink: 0; gap: 4px;
  background: var(--bg3);
}
.sb-title { font-family: var(--cond); font-weight: 700; font-size: 14px; letter-spacing: 1.5px; color: var(--bright); text-transform: uppercase; white-space: nowrap; }
.btn-add {
  font-family: var(--mono); font-size: 10px; background: var(--acc);
  border: none; color: #fff; padding: 4px 10px; border-radius: 4px; cursor: pointer;
  transition: all .12s; white-space: nowrap; font-weight: 600;
}
.btn-add:hover { background: var(--acc2); box-shadow: 0 0 12px var(--glow-blue); }

/* Aggregate score bar */
.agg-score-row {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; background: var(--bg4); border-bottom: 1px solid var(--brd);
  font-size: 10px;
}
.agg-lbl { font-size: 9px; color: var(--txt); white-space: nowrap; }
.agg-val { font-weight: 700; font-size: 12px; }
.agg-verdict { font-size: 9px; padding: 1px 7px; border-radius: 4px; }

/* Filter bar */
#filter-bar {
  flex-shrink: 0; padding: 5px 8px; border-bottom: 1px solid var(--brd);
  font-size: 10px; background: var(--bg3);
}
#filter-bar select, #filter-trader, #filter-result, #filter-score {
  font-family: var(--mono); font-size: 10px; background: var(--bg4);
  border: 1px solid var(--brd2); color: var(--txt2); padding: 2px 6px;
  border-radius: 3px; outline: none; cursor: pointer; transition: border-color .12s;
}
#filter-bar select:focus { border-color: var(--acc); }
#filter-bar label { font-size: 9px; color: var(--txt); }

#pos-list { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 5px; }

/* Section label */
.sec-lbl {
  font-family: var(--cond); font-size: 10px; font-weight: 700; color: var(--txt);
  text-transform: uppercase; letter-spacing: 1.2px; padding: 4px 3px 3px;
  border-bottom: 1px solid var(--brd); margin-bottom: 2px;
  display: flex; align-items: center; gap: 5px;
}
.sec-cnt { background: var(--bg5); color: var(--txt2); font-size: 9px; padding: 1px 6px; border-radius: 8px; }

/* ── Position card v15 ── */
.pc {
  background: var(--bg3); border: 1px solid var(--brd); border-left: 3px solid;
  border-radius: 6px; padding: 8px 10px 7px; position: relative; transition: all .15s;
}
.pc:hover { background: var(--bg4); border-color: var(--brd2); }
.pc:hover .pc-acts { opacity: 1; }
.pc.hist { opacity: .82; background: var(--bg4); }

/* ── Zamknięte pozycje — wyraźniejsze style ── */
/* TP historyczne — zielona ramka lewa */
.pc.hist .pc-st.tp {
  background: rgba(0,200,150,.18); color: #00e0a8;
  border: 1px solid rgba(0,200,150,.35); font-weight: 700;
}
/* SL historyczne — czerwona ramka lewa */
.pc.hist .pc-st.sl {
  background: rgba(240,60,85,.18); color: #ff6080;
  border: 1px solid rgba(240,60,85,.35); font-weight: 700;
}
/* Historia — lewa krawędź wg wyniku */
.pc.hist[data-phase="tp"] { border-left-color: var(--green) !important; border-left-width: 3px !important; }
.pc.hist[data-phase="sl"] { border-left-color: var(--red) !important; border-left-width: 3px !important; }

/* TP badge wynikowy — duży, czytelny */
.pc-result-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; font-family: var(--mono);
  padding: 2px 8px 2px 6px; border-radius: 4px; letter-spacing: .3px;
  margin-bottom: 4px;
}
.pc-result-badge.tp-badge {
  background: rgba(0,200,150,.18); color: #00e0a8;
  border: 1px solid rgba(0,200,150,.4);
  box-shadow: 0 0 8px rgba(0,200,150,.12);
}
.pc-result-badge.sl-badge {
  background: rgba(240,60,85,.18); color: #ff7080;
  border: 1px solid rgba(240,60,85,.4);
  box-shadow: 0 0 8px rgba(240,60,85,.12);
}
.pc-result-badge.cancelled-badge {
  background: rgba(126,144,170,.12); color: #7e90aa;
  border: 1px solid rgba(126,144,170,.25);
}
.pc-result-badge.expired-badge {
  background: rgba(232,168,32,.12); color: #e8a820;
  border: 1px solid rgba(232,168,32,.25);
}

/* DEMO historyczne — specjalny styl */
.demo-hist-badge {
  font-size: 8px; padding: 1px 5px; border-radius: 3px;
  background: rgba(61,204,240,.12); color: #3dccf0;
  border: 1px solid rgba(61,204,240,.25); font-weight: 700;
  margin-left: 3px;
}
.demo-hist-tp-badge {
  font-size: 8px; padding: 1px 5px; border-radius: 3px;
  background: rgba(0,200,150,.15); color: #00c896;
  border: 1px solid rgba(0,200,150,.3); font-weight: 700;
}
.demo-hist-sl-badge {
  font-size: 8px; padding: 1px 5px; border-radius: 3px;
  background: rgba(240,60,85,.15); color: #f03c55;
  border: 1px solid rgba(240,60,85,.3); font-weight: 700;
}

/* HTF badges — z poprzedniej wersji */
.htf-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 8px; font-family: var(--mono); font-weight: 700;
  padding: 1px 5px; border-radius: 3px; letter-spacing: .3px;
}
.htf-badge.htf-bull { background: rgba(0,200,150,.15); color: #00c896; border: 1px solid rgba(0,200,150,.3); }
.htf-badge.htf-bear { background: rgba(240,60,85,.15);  color: #f03c55; border: 1px solid rgba(240,60,85,.3); }
.htf-badge.htf-bsl  { background: rgba(0,229,255,.12);  color: #00e5ff; border: 1px solid rgba(0,229,255,.3); }
.htf-badge.htf-ssl  { background: rgba(255,23,68,.12);   color: #ff1744; border: 1px solid rgba(255,23,68,.3); }
.htf-badge.htf-4h   { background: rgba(80,180,255,.12);  color: #50b4ff; border: 1px solid rgba(80,180,255,.3); }
.pc-top { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.pc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px currentColor; }
.pc-name { font-family: var(--cond); font-weight: 700; font-size: 15px; color: var(--bright); flex: 1; letter-spacing: .5px; text-transform: uppercase; }
.pc-dir { font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.pc-dir.long  { background: rgba(0,200,150,.1);  color: var(--green); border: 1px solid rgba(0,200,150,.22); }
.pc-dir.short { background: rgba(240,60,85,.1);  color: var(--red);   border: 1px solid rgba(240,60,85,.22); }

/* Levels grid v15 — 3 col z pipsami */
.pc-lvls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; margin-bottom: 5px; }
.pl { text-align: center; background: var(--bg4); border-radius: 4px; padding: 4px 3px 3px; border: 1px solid var(--brd); }
.pl .pk { font-size: 8px; color: var(--txt); display: block; margin-bottom: 1px; text-transform: uppercase; letter-spacing: .5px; }
.pl .pv { font-size: 12px; font-weight: 700; display: block; }
.pl .ppips { font-size: 8px; display: block; margin-top: 1px; font-weight: 600; }
.pl-e .pv { color: var(--gold); }
.pl-e .ppips { color: var(--txt); }
.pl-t .pv { color: var(--green); }
.pl-t .ppips { color: #60d8a0; }
.pl-s .pv { color: var(--red); }
.pl-s .ppips { color: #ff8090; }
.pc-rr { font-size: 9px; color: var(--gold); background: rgba(232,168,32,.08); border: 1px solid rgba(232,168,32,.18); border-radius: 3px; padding: 1px 6px; display: inline-block; margin-bottom: 4px; }

.pc-st { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 4px; display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.pc-st.wait  { background: rgba(46,111,255,.08);  color: #6090ff; }
.pc-st.inpos { background: rgba(0,200,150,.07);   color: var(--green); }
.pc-st.tp    { background: rgba(0,200,150,.14);   color: #00e0a8; }
.pc-st.sl    { background: rgba(240,60,85,.14);   color: #ff6080; }
.pc-st.be    { background: rgba(232,168,32,.09);  color: var(--gold); }
.pc-meta { font-size: 9px; color: var(--txt); line-height: 1.6; }
.pc-acts { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.pab { font-size: 9px; background: var(--bg5); border: 1px solid var(--brd2); color: var(--txt); width: 18px; height: 18px; border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .1s; }
.pab:hover { color: var(--bright); border-color: var(--acc); }
.pab.del:hover { color: var(--red); border-color: var(--red); }
.pab.goto:hover { color: var(--gold); border-color: var(--gold); }
.pab.nf-btn:hover { color: var(--purple); border-color: var(--purple); }

/* Wait/correction badges */
.wait-orig-badge { font-size:7px;padding:1px 4px;border-radius:2px;background:rgba(232,168,32,.18);color:#e8a820;font-weight:700;margin-left:4px; }
.wait-copy-badge { font-size:7px;padding:1px 4px;border-radius:2px;background:rgba(61,204,240,.15);color:#3dccf0;font-weight:700;margin-left:4px; }
.pc.orig-waiting { border-left-style:dashed !important; opacity:.85; }
.pc.corr-dup { border-left-style:double !important; border-left-width:4px !important; }
.pab.corr-btn { color:#3dccf0 !important; border-color:rgba(61,204,240,.4) !important; }

/* ── NEURO·FLOW™ Score card ── */
.nf-score-card {
  background: linear-gradient(135deg, rgba(176,110,240,.06), rgba(46,111,255,.04));
  border: 1px solid rgba(176,110,240,.18); border-radius: 5px;
  padding: 5px 8px; margin-bottom: 4px; font-size: 10px;
}
.nf-quick-row { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; flex-wrap: wrap; }
.nf-deep-row  { display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding-top: 3px; border-top: 1px solid rgba(176,110,240,.12); margin-top: 3px; }
.nf-lbl { font-size: 8px; font-weight: 700; letter-spacing: .6px; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
.nf-lbl.quick { background: rgba(46,111,255,.18);  color: #7ab0ff; border: 1px solid rgba(46,111,255,.3); }
.nf-lbl.deep  { background: linear-gradient(90deg, rgba(176,110,240,.22), rgba(46,111,255,.18)); color: #c090ff; border: 1px solid rgba(176,110,240,.35); }
.nf-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(90deg, rgba(176,110,240,.15), rgba(46,111,255,.15)); border: 1px solid rgba(176,110,240,.4); border-radius: 3px; padding: 2px 8px; font-size: 9px; color: #c090ff; letter-spacing: .5px; }
.nf-prob  { font-weight: 700; font-size: 13px; }
.nf-stars { letter-spacing: 1px; font-size: 11px; }
.nf-verdict { font-size: 8px; padding: 1px 5px; border-radius: 3px; font-weight: 700; }
.nf-pending {
  display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--txt);
  background: rgba(30,37,51,.5); border: 1px solid var(--brd); border-radius: 4px;
  padding: 4px 8px; margin-bottom: 4px;
}
.nf-spin { width: 8px; height: 8px; border: 1.5px solid rgba(176,110,240,.3); border-top-color: var(--purple); border-radius: 50%; animation: sp .6s linear infinite; flex-shrink: 0; }

/* ══════════════════════════════════════
   STATUS BAR
══════════════════════════════════════ */
#statusbar {
  flex-shrink: 0; height: 22px; background: var(--bg2); border-top: 1px solid var(--brd);
  display: flex; align-items: center; padding: 0 12px; gap: 14px; font-size: 10px; color: var(--txt);
}
.sv { color: var(--txt2); }
.sok { color: var(--green); }
.serr { color: var(--red); }

/* ══════════════════════════════════════
   MODALS
══════════════════════════════════════ */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.78); display: none;
  align-items: center; justify-content: center; z-index: 200; backdrop-filter: blur(3px);
}
.overlay.open { display: flex; }
.modal-box {
  background: var(--bg2); border: 1px solid var(--brd2); border-radius: 10px;
  padding: 20px 24px; width: 370px; box-shadow: 0 12px 50px rgba(0,0,0,.8);
  max-height: 92vh; overflow-y: auto;
}
.modal-box.wide { width: 430px; }
.mtitle { font-family: var(--cond); font-weight: 700; font-size: 16px; color: var(--bright); letter-spacing: 1.5px; margin-bottom: 16px; text-transform: uppercase; }
.fr { margin-bottom: 10px; }
.fr > label { display: block; font-size: 9px; color: var(--txt); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.fr input, .fr select {
  width: 100%; background: var(--bg3); border: 1px solid var(--brd2); color: var(--bright);
  font-family: var(--mono); font-size: 12px; padding: 6px 10px; border-radius: 4px; outline: none; transition: border-color .12s;
}
.fr input:focus, .fr select:focus { border-color: var(--acc); box-shadow: 0 0 0 2px rgba(46,111,255,.1); }
.fr select option { background: var(--bg3); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mbtns { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }
.btn-cancel { font-family: var(--mono); font-size: 11px; background: transparent; border: 1px solid var(--brd2); color: var(--txt); padding: 6px 14px; border-radius: 4px; cursor: pointer; transition: all .12s; }
.btn-cancel:hover { color: var(--bright); border-color: var(--txt2); }
.btn-ok { font-family: var(--mono); font-size: 11px; background: var(--acc); border: 1px solid var(--acc); color: #fff; padding: 6px 14px; border-radius: 4px; cursor: pointer; transition: all .12s; }
.btn-ok:hover { background: var(--acc2); box-shadow: 0 0 12px var(--glow-blue); }
.merr { background: rgba(240,60,85,.1); border: 1px solid var(--red); border-radius: 4px; padding: 5px 10px; font-size: 10px; color: var(--red); margin-bottom: 8px; display: none; }
.now-badge { font-size: 9px; background: var(--acc); color: #fff; padding: 1px 7px; border-radius: 8px; letter-spacing: .4px; margin-left: 5px; }
.hint-l { font-size: 9px; margin-left: 3px; }
.ssect { font-family: var(--cond); font-size: 11px; font-weight: 700; color: var(--txt); text-transform: uppercase; letter-spacing: 1.2px; margin: 12px 0 6px; }
.srow { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--brd); }
.srow:last-child { border-bottom: none; }
.srow label { font-size: 11px; color: var(--txt2); }
.srow input[type=color] { width: 36px; height: 24px; padding: 1px 2px; cursor: pointer; border-radius: 3px; border: 1px solid var(--brd2); background: var(--bg3); }
.srow input[type=number], .srow select { background: var(--bg3); border: 1px solid var(--brd2); color: var(--bright); font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 3px; outline: none; width: 110px; }

/* Plugin modal */
.plugin-step { display: flex; gap: 8px; margin-bottom: 8px; font-size: 10px; }
.plugin-step-num { width: 18px; height: 18px; border-radius: 50%; background: rgba(0,200,150,.1); border: 1px solid rgba(0,200,150,.3); color: var(--green); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.plugin-step code { background: rgba(46,111,255,.1); color: #7ab0ff; padding: 0 3px; border-radius: 2px; font-size: 9px; }

.plg-section { font-size: 9px; font-weight: 700; letter-spacing: .8px; color: #7e90aa; margin: 10px 0 4px; padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.04); }
.plg-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.plg-row label { min-width: 140px; font-size: 10px; color: var(--txt); }
.plg-row input[type=number], .plg-row select { flex: 1; background: var(--bg4); border: 1px solid var(--brd2); color: var(--bright); font-size: 10px; padding: 3px 6px; border-radius: 3px; outline: none; }
.plg-enable-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; margin-bottom: 6px; }
.plg-enable-row strong { color: var(--bright); font-size: 12px; }
.plg-enable-row .plg-desc { font-size: 9px; color: var(--txt); flex: 1; }
.plg-box { background: rgba(255,255,255,.018); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--brd); }
.btn-plugins { background: linear-gradient(135deg,rgba(176,110,240,.12),rgba(46,107,255,.07)) !important; border-color: rgba(176,110,240,.35) !important; color: #c090ff !important; font-weight: 600; }

.demo-dialog-box { background: var(--bg2); border: 1px solid rgba(176,110,240,.3); border-radius: 10px; padding: 20px 22px; width: 320px; }
.demo-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 11px; color: var(--txt2); }
.demo-row input[type=number] { width: 60px; background: var(--bg4); border: 1px solid var(--brd2); color: var(--bright); font-size: 12px; padding: 4px 6px; border-radius: 3px; text-align: center; }
.demo-row-toggle { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--brd); }
/* Toggle switch */
.demo-toggle { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; flex-shrink: 0; }
.demo-toggle input { opacity: 0; width: 0; height: 0; }
.demo-toggle-track {
  position: absolute; inset: 0; background: var(--bg5); border: 1px solid var(--brd2);
  border-radius: 20px; transition: background .2s, border-color .2s;
}
.demo-toggle input:checked + .demo-toggle-track {
  background: rgba(176,110,240,.4); border-color: var(--purple);
}
.demo-toggle-thumb {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  background: var(--txt); border-radius: 50%; transition: transform .2s, background .2s;
}
.demo-toggle input:checked + .demo-toggle-track .demo-toggle-thumb {
  transform: translateX(16px); background: var(--purple);
}

/* ══════════════════════════════════════
   NEURO·FLOW™ MODAL
══════════════════════════════════════ */
.ai-modal-score { text-align: center; padding: 10px 0 8px; }
.ai-big-stars  { font-size: 24px; letter-spacing: 4px; margin-bottom: 5px; line-height: 1; }
.ai-big-prob   { font-family: var(--cond); font-size: 32px; font-weight: 700; margin-bottom: 3px; line-height: 1.1; }
.ai-big-verdict { font-family: var(--cond); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; padding: 3px 12px; border-radius: 4px; display: inline-block; margin-bottom: 8px; }
.ai-big-verdict.strong-buy { background: rgba(0,200,150,.15); color: var(--green); border: 1px solid rgba(0,200,150,.4); }
.ai-big-verdict.buy        { background: rgba(0,200,150,.08); color: #60d8b0;     border: 1px solid rgba(0,200,150,.2); }
.ai-big-verdict.neutral    { background: rgba(232,168,32,.1); color: var(--gold); border: 1px solid rgba(232,168,32,.3); }
.ai-big-verdict.skip       { background: rgba(126,144,170,.08); color: var(--txt2); border: 1px solid var(--brd2); }
.ai-big-verdict.avoid      { background: rgba(240,60,85,.12); color: var(--red);  border: 1px solid rgba(240,60,85,.3); }
.ai-vs-quick  { font-size: 9px; color: var(--txt); margin-top: 4px; }
.ai-vs-quick b { color: var(--gold); }
.ai-bars      { margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.ai-bar-row   { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.ai-bar-lbl   { width: 90px; color: var(--txt); text-align: right; flex-shrink: 0; font-size: 9px; }
.ai-bar-track { flex: 1; height: 4px; background: var(--bg5); border-radius: 3px; overflow: hidden; }
.ai-bar-fill  { height: 100%; border-radius: 3px; transition: width .7s cubic-bezier(.34,1.56,.64,1); }
.ai-bar-val   { width: 32px; text-align: right; font-weight: 600; font-size: 9px; flex-shrink: 0; }
.ai-tags-row  { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0; justify-content: center; }
.ai-chip      { font-size: 8px; padding: 2px 7px; border-radius: 8px; background: var(--bg4); border: 1px solid var(--brd2); color: var(--txt2); }
.ai-chip.active { background: rgba(46,111,255,.1); border-color: rgba(46,111,255,.35); color: #7ab0ff; }
.ai-chip.warn   { background: rgba(240,60,85,.07); border-color: rgba(240,60,85,.3);  color: #ff8090; }
.ai-chip.ok     { background: rgba(0,200,150,.07); border-color: rgba(0,200,150,.3);  color: #60d8b0; }
.ai-chip.gold   { background: rgba(232,168,32,.1); border-color: rgba(232,168,32,.3); color: var(--gold); }
.ai-divider   { height: 1px; background: var(--brd); margin: 8px 0; }
.ai-thinking-box {
  background: var(--bg3); border: 1px solid var(--brd); border-radius: 5px;
  padding: 8px 10px; margin-top: 6px; font-size: 9px; color: var(--txt);
  line-height: 1.7; max-height: 160px; overflow-y: auto; text-align: left;
}
.ai-thinking-hdr { font-size: 9px; color: var(--txt); font-style: italic; margin-bottom: 4px; display: flex; align-items: center; gap: 5px; }
.ai-blink { display: inline-block; width: 6px; height: 11px; background: var(--purple); border-radius: 1px; animation: blink .7s steps(1) infinite; vertical-align: text-bottom; margin-left: 1px; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.ai-conclusion { background: linear-gradient(135deg, rgba(176,110,240,.06), rgba(46,111,255,.04)); border: 1px solid rgba(176,110,240,.18); border-radius: 5px; padding: 8px 10px; font-size: 10px; color: var(--txt2); line-height: 1.7; margin-top: 6px; text-align: left; }
.ai-run-btn {
  width: 100%; font-family: var(--mono); font-size: 11px;
  background: linear-gradient(135deg, #4a18c8, #b06ef0, #2e6fff);
  border: none; color: #fff; padding: 9px 0; border-radius: 5px; cursor: pointer;
  font-weight: 600; letter-spacing: .5px; transition: opacity .15s; position: relative; overflow: hidden;
}
.ai-run-btn:hover { opacity: .88; }
.ai-run-btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-shimmer { position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); animation: shimmer 1.6s infinite; }
@keyframes shimmer { to { left: 200%; } }
#ai-quick-panel .nf-score-card { border-color: rgba(46,111,255,.28); }

/* ══════════════════════════════════════
   v16 ADDITIONS
══════════════════════════════════════ */

/* ── Główny badge sygnału (SZUKAJ LONG/SHORT) ── */
.main-signal-badge {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-weight: 700; font-size: 11px;
  padding: 4px 14px; border-radius: 20px; pointer-events: none;
  z-index: 30; letter-spacing: .8px; white-space: nowrap;
  border: 1px solid transparent; backdrop-filter: blur(4px);
  animation: badge-fade-in .25s ease;
}
.main-signal-badge.long  {
  background: rgba(0,200,150,.18); color: #00e8aa;
  border-color: rgba(0,200,150,.4); box-shadow: 0 0 14px rgba(0,200,150,.15);
}
.main-signal-badge.short {
  background: rgba(240,60,85,.18);  color: #ff7090;
  border-color: rgba(240,60,85,.4); box-shadow: 0 0 14px rgba(240,60,85,.15);
}
@keyframes badge-fade-in { from { opacity:0; transform:translateX(-50%) translateY(4px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

/* ── Badge luki danych ── */
.data-gap-badge {
  position: absolute; top: 38px; right: 50px;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  padding: 2px 8px; border-radius: 3px; pointer-events: none;
  z-index: 30; color: #ffa040; background: rgba(255,160,64,.12);
  border: 1px solid rgba(255,160,64,.3);
}

/* ── Jakość danych badge w rangebar ── */
#dq-badge {
  font-size: 9px; font-weight: 700; padding: 1px 7px;
  border-radius: 8px; background: var(--bg4);
  border: 1px solid var(--brd2); cursor: default;
}
#dq-detail { font-size: 9px; color: var(--gold); }

/* ── NEURO·FLOW™ karta v17 — styl warunkowy ── */
.nf-score-card {
  border-radius: 6px; padding: 6px 8px; margin-top: 5px;
  background: var(--bg3); border: 1px solid var(--brd);
  display: flex; flex-direction: column; gap: 3px;
}
.nf-score-card.strong {
  background: linear-gradient(135deg, rgba(0,200,150,.1), rgba(46,111,255,.05));
  border-color: rgba(0,200,150,.3);
  box-shadow: 0 0 12px rgba(0,200,150,.07);
}
.nf-score-card.warning {
  background: linear-gradient(135deg, rgba(232,168,32,.08), rgba(176,110,240,.04));
  border-color: rgba(232,168,32,.25);
}

/* ── Wiersz FINAL ── */
.nf-final-row {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding-top: 5px; border-top: 1px solid rgba(232,168,32,.2); margin-top: 4px;
}
.nf-lbl.final {
  background: linear-gradient(90deg, rgba(232,168,32,.25), rgba(176,110,240,.2));
  color: #e8c840; border: 1px solid rgba(232,168,32,.4); font-size: 8px; font-weight: 700;
  letter-spacing: .6px; padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
}

/* ── Badges ostrzeżeń NIEZGODNOŚĆ / SŁABE R:R / LUKA ── */
.nf-warnings { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 3px; }
.nf-warning-badge {
  font-size: 7px; font-weight: 700; padding: 1px 5px; border-radius: 2px;
  background: rgba(240,60,85,.1); border: 1px solid rgba(240,60,85,.3); color: #ff8090;
}

/* ── NOWE v17: powody niskiej oceny ── */
.nf-low-reasons {
  font-size: 9px; color: var(--txt); margin-top: 4px;
  padding: 3px 6px; background: rgba(240,60,85,.06);
  border-left: 2px solid rgba(240,60,85,.3); border-radius: 2px;
  line-height: 1.5;
}
.nf-low-item {
  display: inline-block; margin: 0 2px;
  color: #d87080; font-size: 8px;
  background: rgba(240,60,85,.08); border-radius: 2px; padding: 0 3px;
}

/* ── NOWE v17: setup quality badge ── */
.nf-setup-quality {
  font-size: 7px; font-weight: 700; padding: 1px 4px; border-radius: 2px;
  letter-spacing: .3px; margin-left: auto;
}
.sq-mocny  { background: rgba(0,200,150,.15); color: #00c896; border: 1px solid rgba(0,200,150,.3); }
.sq-średni { background: rgba(46,111,255,.12); color: #88aaff; border: 1px solid rgba(46,111,255,.25); }
.sq-słaby  { background: rgba(126,144,170,.1); color: #7e90aa; border: 1px solid rgba(126,144,170,.2); }

/* ── Karta pozycji strong/warning ── */
.pc.pc-strong {
  box-shadow: 0 0 0 1px rgba(0,200,150,.15), 0 2px 12px rgba(0,200,150,.05);
}
.pc.pc-warning { box-shadow: 0 0 0 1px rgba(232,168,32,.12); }

/* ── Replay badge w karcie ── */
.pc-replay-badge {
  font-size: 7px; padding: 1px 4px; border-radius: 2px;
  background: rgba(176,110,240,.15); color: #c090ff; border: 1px solid rgba(176,110,240,.3);
  margin-left: 4px;
}

/* ── Edit levels button ── */
.pab.edit-levels-btn { color: var(--gold) !important; }
.pab.edit-levels-btn:hover { border-color: var(--gold) !important; }

/* ── Modal edycji poziomów ── */
#edit-levels-overlay .modal-box { width: 320px; }
#el-hint { font-size: 9px; padding: 3px 0; font-weight: 600; }

/* ── Aggregate score — dodatkowe pola ── */
#agg-merged { font-weight: 800; font-size: 13px; }
#agg-hitrate {
  font-size: 9px; padding: 1px 6px; border-radius: 4px;
  background: var(--bg5); border: 1px solid var(--brd2);
}

/* ── NEURO·FLOW modal — sekcje FINAL + DQ ── */
#ai-final-section { margin: 8px 0; }
#ai-dq-section {
  background: var(--bg3); border-radius: 4px; padding: 3px 8px;
  border: 1px solid var(--brd); margin-top: 4px;
}
#ai-penalties-section { margin: 4px 0; display: flex; flex-wrap: wrap; gap: 3px; }

/* ── PrądFlow label MOC ── */
#prad-flow-moc-val {
  font-size: 10px; font-weight: 700; margin-left: 8px; letter-spacing: .3px;
}

/* ── RSI badge live ── */
#rsi-live-signal {
  font-size: 9px; font-weight: 700; padding: 1px 7px; border-radius: 3px; margin-left: 5px;
}

/* ── Status wait — poprawiony kolor ── */
.pc-st.wait { background: rgba(232,168,32,.08); color: var(--gold); }

/* ── R:R warning w karcie ── */
.pc-rr.rr-warn { color: var(--red) !important; border-color: rgba(240,60,85,.3) !important; }

/* ══════════════════════════════════════
   v17 — OGÓLNE POPRAWKI WYGLĄDU
══════════════════════════════════════ */

/* Topbar — subtelny gradient */
#topbar {
  background: linear-gradient(180deg, #0e1220 0%, #090b12 100%);
  border-bottom: 1px solid rgba(46,111,255,.12);
}

/* Sidebar — wyraźniejszy scroll */
#sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(46,111,255,.3) var(--bg2);
}

/* Karty pozycji — ulepszone wcięcia i cienie */
.pc {
  border-radius: 6px;
  transition: box-shadow .15s, border-color .15s;
}
.pc:hover { border-color: rgba(46,111,255,.25) !important; }

/* Linia sekcji Live/Historia */
.sec-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: .8px;
  color: var(--txt); padding: 4px 6px 3px;
  border-bottom: 1px solid var(--brd); margin-bottom: 4px;
  display: flex; align-items: center; gap: 5px;
  text-transform: uppercase;
}
.sec-cnt {
  background: var(--bg5); color: var(--txt2);
  font-size: 9px; padding: 0 5px; border-radius: 8px;
  border: 1px solid var(--brd2);
}

/* NEURO·FLOW™ modal — bardziej czytelny */
#ai-overlay .modal-box {
  border: 1px solid rgba(46,111,255,.2);
  box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(176,110,240,.08);
}

/* Toolbar range buttons */
.range-btn {
  transition: background .12s, color .12s, border-color .12s;
}
.range-btn:hover {
  background: rgba(46,111,255,.15) !important;
  border-color: rgba(46,111,255,.4) !important;
  color: #88aaff !important;
}

/* Overlay plugins — lepsze wejście */
.plugins-panel {
  animation: slideInRight .2s ease;
}
@keyframes slideInRight {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* RSI panel — wyraźniejszy separator */
#rsi-resize-handle {
  background: linear-gradient(90deg, transparent, rgba(46,111,255,.3), transparent);
  transition: background .15s;
}
#rsi-resize-handle:hover {
  background: linear-gradient(90deg, transparent, rgba(46,111,255,.6), transparent);
}

/* Status bar — lepsza widoczność */
#st-msg.sok  { color: var(--green); }
#st-msg.serr { color: var(--red); }

/* Loading indicator — widoczniejszy */
#loading {
  backdrop-filter: blur(2px);
}

/* ═══════════════════════════════════════════════════════
   JEŻYK Chart Viewer v17 — nowe klasy CSS
   Setup / Execution / Probability · DEMO badges · Future positions
═══════════════════════════════════════════════════════ */

/* Karty pozycji — 3-sekcyjny layout v17 */
.nf-v17-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--brd2);
  border-radius: 5px;
  overflow: hidden;
  margin: 4px 0 2px;
}

.nf-v17-section {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nf-v17-section:last-child { border-bottom: none; }

.nf-v17-sec-lbl {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--txt);
  margin-bottom: 3px;
  opacity: .7;
}

.nf-setup-section    { background: rgba(46,111,255,.04); }
.nf-exec-section     { background: rgba(232,168,32,.04); }
.nf-prob-section     { background: rgba(176,110,240,.05); }

/* DEMO badges v17 */
.demo-wait-badge {
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(176,110,240,.15);
  color: #c090ff;
  border: 1px solid rgba(176,110,240,.3);
  margin-left: 3px;
  font-weight: 600;
}
.demo-hist-badge {
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(61,204,240,.1);
  color: #3dccf0;
  border: 1px solid rgba(61,204,240,.25);
  margin-left: 3px;
}

/* Karta pozycji — sygnał z przyszłości (DEMO WAIT) */
.pc.pc-future {
  border-left: 3px solid #b06ef0 !important;
  background: rgba(176,110,240,.04);
  position: relative;
}
.pc.pc-future::before {
  content: '⏳';
  position: absolute;
  top: 6px; right: 6px;
  font-size: 12px;
  opacity: .5;
}

/* Karta ambiguous */
.pc-st.be { color: var(--gold); }

/* Metryki DEMO — panel sidebar */
.demo-metrics-panel {
  margin: 4px 6px;
  padding: 6px 8px;
  background: rgba(176,110,240,.06);
  border: 1px solid rgba(176,110,240,.18);
  border-radius: 5px;
  font-size: 9px;
  color: var(--txt2);
  line-height: 1.8;
}
.demo-metrics-panel b { color: var(--txt); }
.demo-metrics-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

/* Decision badge */
.decision-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  margin-top: 3px;
}

/* Waiting reason badge */
.waiting-reason-badge {
  display: inline-block;
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 2px;
  background: rgba(176,110,240,.12);
  color: #c090ff;
  border-left: 2px solid #b06ef0;
  margin-top: 2px;
}

/* Miss risk indicator */
.miss-risk-high  { color: var(--red) !important; }
.miss-risk-mid   { color: var(--gold) !important; }
.miss-risk-low   { color: var(--txt) !important; }

/* Entry model badge */
.entry-model-fvg { color: #3dccf0 !important; }
.entry-model-ob  { color: var(--gold) !important; }
.entry-model-atr { color: var(--txt) !important; }

/* Setup type badge */
.setup-type-badge {
  font-size: 7px;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.05);
  color: var(--txt);
  border: 1px solid var(--brd2);
}

/* Kalibracja meta — źródło */
.calib-source-real  { color: var(--green); }
.calib-source-demo  { color: #b06ef0; }
.calib-source-mix   { color: var(--gold); }

/* Przełączniki widoku (sidebar) */
.view-filter-btns {
  display: flex;
  gap: 3px;
  padding: 3px 6px;
  flex-wrap: wrap;
}
.view-filter-btn {
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--brd2);
  background: var(--bg2);
  color: var(--txt);
  cursor: pointer;
  transition: all .15s;
}
.view-filter-btn:hover { border-color: var(--acc); color: var(--acc); }
.view-filter-btn.active {
  background: rgba(46,111,255,.12);
  border-color: rgba(46,111,255,.4);
  color: #88aaff;
  font-weight: 600;
}

/* Badge RYZYKO MISSED TP na karcie */
.missed-tp-risk-badge {
  display: inline-block;
  font-size: 8px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(240,60,85,.12);
  color: #ff8090;
  border: 1px solid rgba(240,60,85,.3);
  margin-left: 4px;
}

/* NF final row — większy spacing v17 */
.nf-final-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}

/* Panel metryk DEMO oczekujące */
#demo-stats-panel {
  display: none;
  margin: 4px 6px;
  padding: 6px 8px;
  background: rgba(10,12,16,.8);
  border: 1px solid rgba(176,110,240,.2);
  border-radius: 5px;
  font-size: 9px;
}
#demo-stats-panel.visible { display: block; }
.demo-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
  color: var(--txt);
}
.demo-stat-val { color: var(--txt2); font-weight: 600; }
.demo-stat-good { color: var(--green); }
.demo-stat-warn { color: var(--gold); }
.demo-stat-bad  { color: var(--red); }

/* ══════════════════════════════════════
   LIFECYCLE SEKCJA NA KARTACH POZYCJI v17
   Etap 11 & 13 — premium, zwięzłe, czytelne
══════════════════════════════════════ */

.lc-section {
  margin-top: 5px;
  padding: 5px 7px;
  border-radius: 4px;
  font-size: 9px;
  border: 1px solid transparent;
}
.lc-waiting {
  background: rgba(46,111,255,.05);
  border-color: rgba(46,111,255,.15);
}
.lc-inpos {
  background: rgba(0,200,150,.05);
  border-color: rgba(0,200,150,.15);
}
.lc-ended {
  background: rgba(240,60,85,.04);
  border-color: rgba(240,60,85,.15);
  padding: 4px 7px;
}

/* Header wiersz stanu */
.lc-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}
.lc-state-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lc-state-txt {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .3px;
  flex: 1;
}
.lc-age {
  font-size: 8px;
  color: var(--txt);
  flex-shrink: 0;
}

/* Pasek żywotności / stabilności */
.lc-bar-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}
.lc-bar-label {
  font-size: 8px;
  color: var(--txt);
  width: 96px;
  flex-shrink: 0;
}
.lc-bar-track {
  flex: 1;
  height: 3px;
  background: var(--bg5);
  border-radius: 3px;
  overflow: hidden;
}
.lc-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .6s ease;
}
.lc-bar-val {
  font-size: 8px;
  font-weight: 700;
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* Czynniki inpos */
.lc-factors {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 3px;
}
.lc-factor {
  font-size: 7px;
  padding: 1px 5px;
  border-radius: 8px;
}
.lc-support {
  background: rgba(0,200,150,.1);
  border: 1px solid rgba(0,200,150,.25);
  color: #60d8a0;
}
.lc-warn {
  background: rgba(232,168,32,.1);
  border: 1px solid rgba(232,168,32,.25);
  color: var(--gold);
}

/* ── Stany karty pozycji — cancelled/expired/replaced ── */
.pc-st.cancelled {
  background: rgba(240,60,85,.08);
  color: #ff8090;
}
.pc-st.replaced {
  background: rgba(176,110,240,.1);
  color: #c090ff;
}

/* ══════════════════════════════════════
   EFEKTY PREMIUM v17 — Etap 13
══════════════════════════════════════ */

/* 1. Pasek jakości po lewej stronie karty */
.pc {
  position: relative;
}
.pc::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 6px 0 0 6px;
  background: transparent;
  transition: background .3s;
}
.pc.pc-strong::after  { background: var(--green); box-shadow: 0 0 6px rgba(0,200,150,.3); }
.pc.pc-warning::after { background: var(--gold); }
.pc.pc-demo-wait::after { background: var(--purple); }

/* 2. Pulsująca ramka aktywnego najlepszego setupu */
@keyframes lc-pulse-border {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0,200,150,.2), 0 2px 12px rgba(0,200,150,.05); }
  50%       { box-shadow: 0 0 0 2px rgba(0,200,150,.35), 0 4px 18px rgba(0,200,150,.12); }
}
.pc.pc-active-best {
  animation: lc-pulse-border 2s ease-in-out infinite;
}

/* 3. Glow dla pozycji z flow aligned */
.pc.pc-flow-aligned {
  box-shadow: 0 0 0 1px rgba(0,200,150,.12), inset 0 0 20px rgba(0,200,150,.03);
}

/* 4. Badge stanu rynku */
.market-setup-badge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px 8px;
  margin: 4px 6px;
  border-radius: 5px;
  font-size: 9px;
  border: 1px solid;
  transition: all .3s ease;
}
.msb-icon {
  font-size: 11px;
  flex-shrink: 0;
}
.msb-text {
  font-weight: 700;
  letter-spacing: .5px;
  font-size: 9px;
}
.msb-reason {
  color: var(--txt);
  font-size: 8px;
  flex: 1;
}
.msb-details {
  display: block;
  width: 100%;
  font-size: 8px;
  color: var(--txt);
  margin-top: 1px;
  line-height: 1.4;
}
.msb-details span + span::before {
  content: ' · ';
  color: var(--brd2);
}

/* Warianty koloru badge stanu rynku */
.msb-none {
  background: rgba(100,120,150,.06);
  border-color: rgba(100,120,150,.18);
  color: var(--txt);
}
.msb-weak {
  background: rgba(232,168,32,.06);
  border-color: rgba(232,168,32,.2);
  color: var(--gold);
}
.msb-wait {
  background: rgba(176,110,240,.08);
  border-color: rgba(176,110,240,.25);
  color: #c090ff;
}
.msb-active {
  background: rgba(0,200,150,.08);
  border-color: rgba(0,200,150,.25);
  color: var(--green);
}
/* Nowe tryby v17.5 */
.msb-reversal {
  background: rgba(176,110,240,.10);
  border-color: rgba(176,110,240,.35);
  color: #c090ff;
  animation: msb-pulse-rev 2s ease-in-out infinite;
}
.msb-continuation {
  background: rgba(46,111,255,.08);
  border-color: rgba(46,111,255,.3);
  color: #7ab0ff;
}
.msb-watch {
  background: rgba(232,168,32,.07);
  border-color: rgba(232,168,32,.25);
  color: var(--gold);
}
@keyframes msb-pulse-rev {
  0%, 100% { border-color: rgba(176,110,240,.35); }
  50%       { border-color: rgba(176,110,240,.7); box-shadow: 0 0 6px rgba(176,110,240,.25); }
}

/* ── Checklista konfluencji w overlay ── */
.nso-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
  margin-top: 5px;
  width: 100%;
}
.nso-check-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  padding: 1px 0;
}
.nso-check-ico {
  font-size: 9px;
  font-weight: 700;
  width: 12px;
  flex-shrink: 0;
}
.nso-check-ok { color: var(--green); }
.nso-check-ok .nso-check-ico { color: var(--green); }
.nso-check-no { color: var(--txt); opacity: .6; }
.nso-check-no .nso-check-ico { color: var(--red); }

/* ── Panel debug v17.5 ── */
#debug-panel {
  position: fixed;
  top: 60px;
  right: 0;
  width: 280px;
  background: #0d121c;
  border-left: 2px solid #1e2a3a;
  border-bottom: 2px solid #1e2a3a;
  border-radius: 0 0 0 8px;
  z-index: 9999;
  font-family: var(--mono, monospace);
  font-size: 10px;
  max-height: 85vh;
  overflow-y: auto;
  display: none;
  scrollbar-width: thin;
  scrollbar-color: #1e2a3a transparent;
}
#debug-panel.visible { display: block; }
#debug-panel-header {
  padding: 6px 10px;
  background: #131b2a;
  color: #b06ef0;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid #1e2a3a;
  user-select: none;
}
#debug-panel-header:hover { background: #182234; }
.dbg-section { padding: 4px 8px; border-bottom: 1px solid #1a2233; }
.dbg-head { color: #7aa6ff; font-size: 9px; font-weight: bold; padding: 3px 0 2px; text-transform: uppercase; letter-spacing: .5px; }
.dbg-row { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; border-bottom: 1px solid #111820; }
.dbg-lbl { color: #6b7a8d; font-size: 9px; flex-shrink: 0; }
.dbg-val { color: #c0ccd8; font-size: 9px; max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.dbg-ok .dbg-val { color: #00c896; }
.dbg-bad .dbg-val { color: #f03c55; }

/* ── Przycisk debug w topbarze ── */
#btn-debug {
  color: #b06ef0;
  border-color: rgba(176,110,240,.25);
  font-size: 10px;
}

/* 5. Demo waiting badge na kartach */
.demo-wait-badge {
  font-size: 7px;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(176,110,240,.18);
  color: #c090ff;
  border: 1px solid rgba(176,110,240,.35);
  margin-left: 3px;
  animation: demo-wait-pulse 2.5s ease-in-out infinite;
}
@keyframes demo-wait-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .6; }
}

/* ── NOWE v17: DEMO HIST BADGE ── */
.demo-hist-badge {
  font-size: 7px;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(46,111,255,.12);
  color: #7ab0ff;
  border: 1px solid rgba(46,111,255,.25);
  margin-left: 3px;
}

/* ══════════════════════════════════════
   OVERLAY "BRAK SETUPU" — Etap 8 & 13
   Elegancki, półprzezroczysty na wykresie
══════════════════════════════════════ */
#no-setup-overlay {
  display: none;
  position: absolute;
  bottom: 14px;
  right: 12px;
  left: auto;
  transform: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 7px 11px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 25;
  background: rgba(8,10,16,.82);
  border: 1px solid rgba(80,100,130,.25);
  backdrop-filter: blur(4px);
  animation: nso-fade .3s ease;
  max-width: 250px;
  font-size: 9px;
}
@keyframes nso-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nso-icon {
  font-size: 16px;
  color: var(--txt);
  opacity: .7;
}
.nso-title {
  font-family: var(--cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--txt2);
  text-transform: uppercase;
}
.nso-reason {
  font-size: 9px;
  color: var(--gold);
  opacity: .9;
  text-align: center;
}
.nso-details {
  font-size: 9px;
  color: var(--txt);
  opacity: .8;
}
.nso-detail-item {
  display: inline-block;
  font-size: 8px;
  color: var(--txt);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 3px;
  padding: 1px 5px;
}

/* ══════════════════════════════════════
   SEKCJA STAN RYNKU / AKTYWNY SETUP w sidebar
   Etap 14
══════════════════════════════════════ */
.sb-market-section {
  flex-shrink: 0;
  border-bottom: 1px solid var(--brd);
}

/* ══════════════════════════════════════
   NOWE v17: sekcje NEURO·FLOW™ v17 w karcie
══════════════════════════════════════ */
.nf-v17-section {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.nf-v17-section:last-child { border-bottom: none; }
.nf-v17-sec-lbl {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--txt);
  margin-bottom: 3px;
  text-transform: uppercase;
}
.nf-setup-section {}
.nf-exec-section {}
.nf-prob-section {}
.nf-v17-card {}

/* ══════════════════════════════════════
   TOOLTIP "WHY NOW" — Etap 13
══════════════════════════════════════ */
.lc-tooltip {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--bg3);
  border: 1px solid var(--brd2);
  border-radius: 5px;
  padding: 6px 10px;
  font-size: 9px;
  color: var(--txt2);
  z-index: 100;
  min-width: 160px;
  box-shadow: 0 6px 24px rgba(0,0,0,.6);
  line-height: 1.6;
  pointer-events: none;
  display: none;
}
.pc:hover .lc-tooltip { display: block; }

/* ══════════════════════════════════════
   CANCELLED / EXPIRED / REPLACED statusy
   Ikony i style
══════════════════════════════════════ */
.pc.pc-cancelled {
  opacity: .65;
}
.pc.pc-expired {
  opacity: .6;
}
.pc.pc-replaced {
  opacity: .7;
  border-left-style: dashed !important;
}

/* ══════════════════════════════════════
   POPRAWKI v17.2 — Vizualizacja pozycji
══════════════════════════════════════ */

/* Waiting — gdy entry daleko */
.pc.lc-entry-far {
  border-left-style: dashed !important;
  border-left-color: var(--gold) !important;
}

/* Degradacja waiting — poziomy */
.lc-degradation-0 { /* OK — nic */ }
.lc-degradation-1 .lc-section { border-color: rgba(232,168,32,.25) !important; }
.lc-degradation-2 .lc-section { border-color: rgba(240,60,85,.25) !important; }
.lc-degradation-3 .lc-section { border-color: rgba(240,60,85,.4) !important; opacity: .75; }

/* Entry distance badge w karcie */
.lc-entry-dist-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 8px;
  padding: 1px 6px;
  border-radius: 3px;
  margin-top: 3px;
}
.lc-entry-dist-close {
  background: rgba(0,200,150,.1);
  border: 1px solid rgba(0,200,150,.25);
  color: #60d8a0;
}
.lc-entry-dist-ok {
  background: rgba(46,111,255,.1);
  border: 1px solid rgba(46,111,255,.25);
  color: #7ab0ff;
}
.lc-entry-dist-far {
  background: rgba(232,168,32,.1);
  border: 1px solid rgba(232,168,32,.3);
  color: var(--gold);
}
.lc-entry-dist-very-far {
  background: rgba(240,60,85,.1);
  border: 1px solid rgba(240,60,85,.3);
  color: #ff8090;
}

/* Progress bar TP na karcie inpos */
.lc-tp-progress {
  margin-top: 4px;
  height: 3px;
  background: var(--bg5);
  border-radius: 3px;
  overflow: hidden;
}
.lc-tp-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(0,200,150,.5), var(--green));
  transition: width .5s ease;
}

/* Animacja "entry approaching" — gdy cena zbliża się do entry */
@keyframes entry-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0,200,150,.15); }
  50%       { box-shadow: 0 0 0 2px rgba(0,200,150,.4), 0 0 12px rgba(0,200,150,.1); }
}
.pc.pc-entry-approaching {
  animation: entry-pulse 1.8s ease-in-out infinite;
}

/* ══════════════════════════════════════
   BRAKUJĄCE STATUSY pc-st v17
══════════════════════════════════════ */
.pc-st.expired {
  background: rgba(100,120,150,.08);
  color: var(--txt);
}
.pc-st.replaced {
  background: rgba(176,110,240,.1);
  color: #c090ff;
}
.pc-st.missed_tp {
  background: rgba(176,110,240,.12);
  color: #c090ff;
}

/* ══════════════════════════════════════
   TOOLTIP "WHY NOW" — Etap 13 pkt 6
   Wyświetla się po najechaniu na kartę
══════════════════════════════════════ */
.lc-why-tooltip {
  display: none;
  position: fixed;           /* fixed — wyrywa z sidebara, nie przycina */
  top: auto;
  left: auto;
  width: 220px;
  background: var(--bg2);
  border: 1px solid var(--brd2);
  border-radius: 6px;
  padding: 8px 11px;
  font-size: 9px;
  color: var(--txt2);
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,.85);
  line-height: 1.7;
  pointer-events: none;
}
/* Strzałka — po lewej (tooltip jest NA LEWO od sidebara) */
.lc-why-tooltip::before {
  content: '';
  position: absolute;
  top: 12px;
  right: -5px;
  width: 8px; height: 8px;
  background: var(--bg2);
  border-right: 1px solid var(--brd2);
  border-top: 1px solid var(--brd2);
  transform: rotate(45deg);
}
.lc-why-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 1px 0;
}
.lc-why-ico { flex-shrink: 0; font-size: 9px; }
.lc-why-txt { flex: 1; }
.lc-why-pos { color: #60d8a0; }
.lc-why-neg { color: #ff9f40; }
.lc-why-neu { color: var(--txt); }

/* Tooltip pozycjonowany przez JS — mouseenter w buildCard */
.pc {
  position: relative;
  overflow: visible;
}
/* NIE używamy CSS :hover — JS ustawia display i pozycję fixed */
@keyframes tooltip-appear {
  from { opacity: 0; transform: translateX(4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════
   PASEK PROGRESU LIFECYCLE w karcie
   Mini gradient bar między sekcjami
══════════════════════════════════════ */
.lc-progress-strip {
  height: 2px;
  border-radius: 2px;
  margin: 3px 0;
  background: linear-gradient(90deg,
    var(--green) 0%,
    var(--gold) 50%,
    var(--red) 100%
  );
  position: relative;
  overflow: hidden;
}
.lc-progress-cursor {
  position: absolute;
  top: -1px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px rgba(255,255,255,.6);
  transform: translateX(-50%);
  transition: left .5s ease;
}

/* ══════════════════════════════════════
   ANIMACJA LIFECYCLE BARS
   Płynne wypełnianie przy renderowaniu
══════════════════════════════════════ */
.lc-bar-fill {
  transition: width .6s cubic-bezier(.34,1.2,.64,1);
}

/* ══════════════════════════════════════
   MARKET SETUP STATE — sidebar kompaktowy
   Etap 8 — rozbudowany wariant
══════════════════════════════════════ */
.sb-market-section {
  padding: 0;
}
.market-setup-badge {
  cursor: default;
  user-select: none;
}
.market-setup-badge:hover {
  filter: brightness(1.08);
}

/* Pulsowanie gdy valid_waiting */
@keyframes ms-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176,110,240,.15); }
  50%       { box-shadow: 0 0 0 4px rgba(176,110,240,.05); }
}
.msb-wait {
  animation: ms-badge-pulse 2.5s ease-in-out infinite;
}

/* ══════════════════════════════════════
   SEKCJA ANULOWANE w sidebar
══════════════════════════════════════ */
.sec-lbl .sec-cancelled {
  color: #ff8090;
}
.sec-lbl .sec-replaced {
  color: #c090ff;
}

/* Przekreślona karta anulowana */
.pc.pc-cancelled .pc-name::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: rgba(240,60,85,.3);
}

/* ══════════════════════════════════════
   DEMO WAITING karta — dodatkowe style
══════════════════════════════════════ */
.pc.pc-demo-wait {
  border-left-color: var(--purple) !important;
}
.pc.pc-demo-wait .pc-dot {
  animation: demo-dot-pulse 2s ease-in-out infinite;
}
@keyframes demo-dot-pulse {
  0%, 100% { box-shadow: 0 0 6px var(--purple); }
  50%       { box-shadow: 0 0 14px rgba(176,110,240,.6); }
}

/* Risky demo — złota ramka */
.pc.pc-demo-wait.pc-risky {
  border-left-color: var(--gold) !important;
}

/* ══════════════════════════════════════
   SEKCJA LIVE STATUS w modalu AI
══════════════════════════════════════ */
#ai-live-section {
  border-radius: 5px;
  overflow: hidden;
}

/* ══════════════════════════════════════
   MINI-BADGE LIFECYCLE STATE
   Na karcie przy nazwie Tradera
══════════════════════════════════════ */
.lc-mini-badge {
  font-size: 7px;
  padding: 1px 4px;
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: .2px;
  flex-shrink: 0;
}
.lc-mini-valid    { background: rgba(0,200,150,.12); color: #60d8a0; border: 1px solid rgba(0,200,150,.25); }
.lc-mini-risky    { background: rgba(232,168,32,.12); color: var(--gold); border: 1px solid rgba(232,168,32,.25); }
.lc-mini-invalid  { background: rgba(240,60,85,.1);  color: #ff8090; border: 1px solid rgba(240,60,85,.2); }
.lc-mini-inpos    { background: rgba(0,200,150,.1);  color: var(--green); border: 1px solid rgba(0,200,150,.2); }
.lc-mini-warning  { background: rgba(232,168,32,.1); color: var(--gold); border: 1px solid rgba(232,168,32,.2); }

/* ══════════════════════════════════════
   PC-RISKY — ogólny styl dla ryzykownego setupu
══════════════════════════════════════ */
.pc.pc-risky:not(.pc-demo-wait) {
  border-left-color: var(--gold) !important;
  box-shadow: 0 0 0 1px rgba(232,168,32,.1);
}

/* ═══════════════════════════════════════════════════════
   JEŻYK Chart Viewer v17.3 — Nowe style
   Ghost Forecast, Premium Overlaye, Profile QUICK
   Lifecycle fading, Komentarze live, Settings panel
═══════════════════════════════════════════════════════ */

/* ── Faza waiting_fading ── */
.lc-fading {
  background: rgba(232,168,32,.04);
  border-color: rgba(232,168,32,.3);
}
.lc-degradation-1 { border-left-color: rgba(232,168,32,.4) !important; }
.lc-degradation-2 { border-left-color: rgba(240,60,85,.4)  !important; }
.lc-degradation-3 { border-left-color: rgba(240,60,85,.7)  !important; animation: lc-pulse 1.5s ease-in-out infinite; }

@keyframes lc-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(240,60,85,0); }
  50%      { box-shadow: 0 0 6px 2px rgba(240,60,85,.2); }
}

/* ── Komentarz live ── */
.lc-wait-comment {
  font-size: 8px;
  color: var(--txt);
  padding: 3px 6px;
  background: rgba(255,255,255,.03);
  border-radius: 3px;
  border-left: 2px solid rgba(255,255,255,.08);
  margin-top: 4px;
  font-style: italic;
}
.lc-live-comment-strong { color: var(--green); }
.lc-live-comment-warn   { color: var(--gold);  }
.lc-live-comment-danger { color: var(--red);   }

/* ── Mini badge DEEP auto ── */
.deep-auto-badge {
  font-size: 7px;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(176,110,240,.12);
  color: #b06ef0;
  border: 1px solid rgba(176,110,240,.25);
  margin-left: 4px;
}
.deep-done-badge {
  font-size: 7px;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(0,200,150,.12);
  color: var(--green);
  margin-left: 4px;
}
.deep-pending-badge {
  font-size: 7px;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(232,168,32,.1);
  color: var(--gold);
  margin-left: 4px;
  animation: blink 1.4s infinite;
}

/* ── Profile QUICK badge ── */
.qp-profile-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  padding: 3px 6px;
  background: rgba(61,204,240,.06);
  border-radius: 3px;
  border-left: 2px solid rgba(61,204,240,.3);
}
.qp-profile-name {
  font-size: 8px;
  font-weight: 700;
  color: #3dccf0;
}
.qp-profile-confidence-high   { color: var(--green); }
.qp-profile-confidence-medium { color: var(--gold);  }
.qp-profile-confidence-low    { color: var(--red);   }

/* ── Ghost Forecast ── */
#forecast-panel {
  background: rgba(61,204,240,.06);
  border: 1px solid rgba(61,204,240,.2);
  border-radius: 5px;
  padding: 8px 10px;
  margin: 6px 0;
}
.forecast-scenario-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  padding: 2px 0;
}
.forecast-scenario-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.forecast-base-marker {
  font-size: 7px;
  padding: 1px 4px;
  background: rgba(61,204,240,.15);
  border-radius: 2px;
  color: #3dccf0;
}
.forecast-accuracy {
  font-size: 8px;
  color: var(--txt);
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.05);
}

/* ── Panel ustawień AI (modal) ── */
.ai-cfg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 9px;
  color: var(--txt);
}
.ai-cfg-row select, .ai-cfg-row input[type="number"] {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 3px;
  color: var(--txt);
  font-size: 9px;
  padding: 2px 6px;
}
.ai-cfg-row input[type="checkbox"] {
  accent-color: var(--purple);
  width: 12px; height: 12px;
}
.ai-cfg-section-title {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #b06ef0;
  margin: 6px 0 3px;
  text-transform: uppercase;
}

/* ── Overlay pozycji — premium warstwa ── */

/* OCZEKUJĄCE — gradientowy overlay zamiast twardych boxów */
.pos-overlay-waiting {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}
/* Gradient TP/SL z fade-out */
.pos-gradient-tp-long {
  background: linear-gradient(to top,
    rgba(0,200,150,0) 0%,
    rgba(0,200,150,0.06) 50%,
    rgba(0,200,150,0.12) 100%
  );
}
.pos-gradient-sl-long {
  background: linear-gradient(to bottom,
    rgba(240,60,85,0) 0%,
    rgba(240,60,85,0.06) 50%,
    rgba(240,60,85,0.12) 100%
  );
}
.pos-gradient-tp-short {
  background: linear-gradient(to bottom,
    rgba(0,200,150,0) 0%,
    rgba(0,200,150,0.06) 50%,
    rgba(0,200,150,0.12) 100%
  );
}
.pos-gradient-sl-short {
  background: linear-gradient(to top,
    rgba(240,60,85,0) 0%,
    rgba(240,60,85,0.06) 50%,
    rgba(240,60,85,0.12) 100%
  );
}

/* GLOW dla oczekujących setupów */
.pc-demo-wait.pc-active-best {
  box-shadow: 0 0 12px rgba(176,110,240,.25), 0 0 4px rgba(176,110,240,.15) inset;
}
.pc-demo-wait.lc-degradation-1 {
  box-shadow: 0 0 8px rgba(232,168,32,.15);
}
.pc-demo-wait.lc-degradation-2 {
  box-shadow: 0 0 10px rgba(240,60,85,.2);
}

/* Hold class — kolor karty otwartej pozycji */
.pc-hold-strong   { border-top: 1px solid rgba(0,200,150,.2) !important; }
.pc-hold-ok       { border-top: 1px solid rgba(61,204,240,.15) !important; }
.pc-hold-risky    { border-top: 1px solid rgba(232,168,32,.2) !important; }
.pc-hold-exit-watch { border-top: 1px solid rgba(240,60,85,.25) !important; animation: lc-pulse 2s infinite; }

/* ── Selektory zakresów QUICK/DEEP w modalu AI ── */
.ai-bars-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.ai-bars-btn {
  font-size: 8px;
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 3px;
  background: rgba(255,255,255,.04);
  color: var(--txt);
  cursor: pointer;
  transition: all .15s;
}
.ai-bars-btn.active, .ai-bars-btn:hover {
  background: rgba(176,110,240,.15);
  border-color: rgba(176,110,240,.4);
  color: #b06ef0;
}

/* ── Zapis/Import/Eksport przycisków ── */
.btn-settings-save {
  font-size: 8px;
  padding: 3px 8px;
  border: 1px solid rgba(0,200,150,.3);
  border-radius: 3px;
  background: rgba(0,200,150,.08);
  color: var(--green);
  cursor: pointer;
  transition: all .15s;
}
.btn-settings-save:hover { background: rgba(0,200,150,.15); }

.btn-settings-export {
  font-size: 8px;
  padding: 3px 8px;
  border: 1px solid rgba(61,204,240,.3);
  border-radius: 3px;
  background: rgba(61,204,240,.06);
  color: #3dccf0;
  cursor: pointer;
  transition: all .15s;
}
.btn-settings-import {
  font-size: 8px;
  padding: 3px 8px;
  border: 1px solid rgba(176,110,240,.3);
  border-radius: 3px;
  background: rgba(176,110,240,.06);
  color: #b06ef0;
  cursor: pointer;
}

/* ── Waiting comment w karcie ── */
.lc-wait-comment-row {
  font-size: 8px;
  color: var(--txt);
  margin-top: 3px;
  padding: 2px 5px;
  background: rgba(255,255,255,.02);
  border-radius: 2px;
  border-left: 2px solid rgba(255,255,255,.06);
  font-style: italic;
}

/* ── Re-arming badge ── */
.lc-rearmed-badge {
  font-size: 7px;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(61,204,240,.12);
  color: #3dccf0;
  margin-left: 4px;
}

/* ── Hold class badge w karcie ── */
.hold-class-badge {
  font-size: 7px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}
.hold-strong     { background: rgba(0,200,150,.12); color: var(--green); }
.hold-ok         { background: rgba(61,204,240,.1);  color: #3dccf0; }
.hold-risky      { background: rgba(232,168,32,.1);  color: var(--gold); }
.hold-exit-watch { background: rgba(240,60,85,.12);  color: var(--red); }

/* ── Setup type ikona ── */
.setup-type-icon {
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.05);
  color: var(--txt);
  margin-left: 3px;
}

/* ── Forecast toggle ── */
.forecast-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(61,204,240,.05);
  border: 1px solid rgba(61,204,240,.15);
  border-radius: 4px;
  margin: 4px 0;
}
.forecast-toggle-label {
  font-size: 9px;
  color: #3dccf0;
  font-weight: 600;
}

/* ── Auto-DEEP indykator ── */
.auto-deep-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(176,110,240,.1);
  border: 1px solid rgba(176,110,240,.25);
  color: #b06ef0;
  margin-top: 4px;
}
.auto-deep-indicator.done {
  background: rgba(0,200,150,.1);
  border-color: rgba(0,200,150,.25);
  color: var(--green);
}

/* ── form-lbl: zastępstwo dla bare <label> (a11y fix) ── */
.form-lbl {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--txt);
  text-transform: uppercase;
  margin-bottom: 3px;
}

/* ══════════════════════════════════════
   DEMO SNAPSHOT DECYZYJNY v17.5
══════════════════════════════════════ */
.demo-snapshot-section {
  margin: 4px 0 2px;
  border: 1px solid rgba(176,110,240,.2);
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--mono);
}
.demo-snapshot-header {
  padding: 3px 8px;
  font-size: 8px;
  font-weight: 700;
  color: #b06ef0;
  background: rgba(176,110,240,.07);
  cursor: pointer;
  user-select: none;
  letter-spacing: .3px;
}
.demo-snapshot-header:hover { background: rgba(176,110,240,.12); }
.demo-snapshot-body {
  display: none;
  padding: 4px 8px;
  background: rgba(0,0,0,.15);
}
.demo-snapshot-section.expanded .demo-snapshot-body { display: block; }
.snap-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 8px;
}
.snap-row:last-child { border-bottom: none; }
.snap-lbl {
  color: var(--txt);
  min-width: 64px;
  flex-shrink: 0;
  opacity: .7;
}
.snap-val {
  color: var(--txt2);
  flex: 1;
  word-break: break-word;
}

/* ══════════════════════════════════════
   BADGE STANU RYNKU — ANIMACJE v17.5
   (uzupełnienie dla nowych trybów)
══════════════════════════════════════ */
.msb-reversal .msb-icon { animation: msb-icon-spin 3s linear infinite; }
@keyframes msb-icon-spin {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}
.msb-continuation .msb-icon { color: #7ab0ff; }
.msb-watch .msb-icon { animation: msb-watch-blink 1.5s ease-in-out infinite; }
@keyframes msb-watch-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

/* ══════════════════════════════════════
   NSO OVERLAY — checklista poprawki
══════════════════════════════════════ */
#no-setup-overlay {
  pointer-events: none;
  max-width: 250px;
}
.nso-check-item span:last-child {
  font-size: 8px;
}

/* ══════════════════════════════════════
   DEBUG PANEL — uzupełnienie
══════════════════════════════════════ */
#debug-panel-content { padding: 4px 0; }
#debug-panel::-webkit-scrollbar { width: 4px; }
#debug-panel::-webkit-scrollbar-track { background: transparent; }
#debug-panel::-webkit-scrollbar-thumb { background: #1e2a3a; border-radius: 2px; }

/* ══════════════════════════════════════
   GUARDIAN STYLES v18
   Style dla pozycji i panelu Guardian
══════════════════════════════════════ */

/* Karta pozycji Guardian — subtelna lewa krawędź */
.pc[data-source="guardian_db"] {
  border-left: 2px solid rgba(61, 204, 240, 0.35);
}

/* Status "clipboard" (Schowek) — szary */
.pc-st.cancelled.clipboard-status {
  color: #4a6a7a;
}

/* Badge Schowek */
.pc-clipboard-badge {
  font-size: 7px;
  background: rgba(107, 122, 141, 0.12);
  color: #5a6a7a;
  border: 1px solid rgba(107, 122, 141, 0.25);
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 2px;
}

/* Panel Guardian w sidebarze */
#guardian-panel {
  transition: box-shadow 0.2s ease;
}
#guardian-panel:hover {
  box-shadow: 0 2px 12px rgba(61, 204, 240, 0.08);
}
#guardian-panel-header:hover {
  background: rgba(61, 204, 240, 0.12) !important;
}

/* Input dat Guardian */
#guardian-date-from:focus,
#guardian-date-to:focus {
  outline: none;
  border-color: rgba(61, 204, 240, 0.6);
  box-shadow: 0 0 0 1px rgba(61, 204, 240, 0.2);
}

/* Guardian progress overlay */
#guardian-import-overlay {
  animation: guardianFadeIn 0.2s ease;
}
@keyframes guardianFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Filtry Guardian w view-filter-btns */
.view-filter-btn[data-sigtype="guardian"] {
  color: #3dccf0;
  border-color: rgba(61, 204, 240, 0.3);
}
.view-filter-btn[data-sigtype="guardian"].active {
  background: rgba(61, 204, 240, 0.18);
  border-color: rgba(61, 204, 240, 0.6);
  color: #5de8ff;
}
.view-filter-btn[data-sigtype="clipboard"] {
  color: #5a7a8a;
  border-color: rgba(90, 122, 138, 0.25);
}
.view-filter-btn[data-sigtype="clipboard"].active {
  background: rgba(90, 122, 138, 0.15);
  border-color: rgba(90, 122, 138, 0.5);
  color: #7a9aaa;
}

/* Sekcja Schowek w pos-list */
.sec-lbl-clipboard {
  color: #4a6a7a;
  border-left-color: rgba(90, 122, 138, 0.3);
}

/* Guardian stats grid */
#guardian-stats-panel .demo-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  padding: 1px 0;
}