/* EURUSD Journal symbol live panel + REST trade history v0.23 — 10-row scroll viewport */
.signal-panel .signal.buy { color:#86efac; }
.signal-panel .signal.sell { color:#fca5a5; }
.signal-panel .signal.none { color:#e2e8f0; }
.signal-panel .signal.closed { letter-spacing:.02em; }
.signal-panel strong.closed { color:#fde68a; letter-spacing:.02em; }
.signal-panel .live-status-pill { display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(148,163,184,.24); background:rgba(15,23,42,.42); border-radius:999px; padding:6px 10px; font-size:12px; font-weight:800; color:#dbeafe; }
.live-shot { margin-top:18px; border:1px solid rgba(148,163,184,.20); border-radius:18px; overflow:hidden; background:rgba(2,6,23,.28); }
.live-shot-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid rgba(148,163,184,.14); }
.live-shot-head strong { font-size:14px; }
.live-shot-head a { font-size:12px; font-weight:800; text-decoration:none; color:#bfdbfe; }
.live-shot-frame { position:relative; min-height:220px; aspect-ratio:2580 / 1080; display:flex; align-items:center; justify-content:center; background:#020617; overflow:hidden; }
.live-shot-frame img { display:block; width:100%; height:100%; object-fit:contain; background:#000; }
.live-shot-frame img[hidden], .live-shot-empty[hidden] { display:none !important; }
.live-shot-empty { width:100%; height:100%; min-height:220px; display:flex; align-items:center; justify-content:center; padding:32px 18px; text-align:center; color:rgba(226,232,240,.72); font-weight:900; font-size:24px; letter-spacing:.02em; background:linear-gradient(135deg, rgba(15,23,42,.92), rgba(2,6,23,.96)); }
.live-shot-note { padding:9px 14px 12px; font-size:11px; color:rgba(226,232,240,.62); }
.live-shot.live-shot-close .live-shot-head strong { color:#fde68a; }
.live-shot-badge { position:absolute; left:14px; top:14px; z-index:3; padding:8px 12px; border-radius:999px; border:1px solid rgba(251,191,36,.40); background:rgba(2,6,23,.86); color:#fde68a; font-size:12px; line-height:1; font-weight:900; letter-spacing:.03em; box-shadow:0 10px 30px rgba(0,0,0,.40); }
.live-shot-badge[hidden] { display:none !important; }
.live-shot-badge.is-open.is-buy { color:#86efac; border-color:rgba(74,222,128,.48); background:rgba(2,44,34,.90); }
.live-shot-badge.is-open.is-sell { color:#fca5a5; border-color:rgba(248,113,113,.48); background:rgba(69,10,10,.90); }
.live-shot-badge.is-close { color:#fde68a; border-color:rgba(251,191,36,.40); background:rgba(2,6,23,.86); }
.trade-history-card .trade-history-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:12px; }
.trade-history-state { font-size:12px; font-weight:800; border-radius:999px; padding:7px 10px; background:rgba(15,23,42,.50); border:1px solid rgba(148,163,184,.20); white-space:nowrap; }
.trade-history-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0 14px; }
.trade-history-stat { border:1px solid rgba(148,163,184,.18); border-radius:14px; padding:10px 12px; background:rgba(15,23,42,.34); }
.trade-history-stat span { display:block; font-size:12px; opacity:.72; margin-bottom:5px; }
.trade-history-stat strong { font-size:18px; }
.trade-history-wrap { overflow:auto; scrollbar-gutter:stable; overscroll-behavior:contain; }
.trade-history-table { width:100%; border-collapse:collapse; font-size:13px; }
.trade-history-table th,.trade-history-table td { padding:9px; border-bottom:1px solid rgba(148,163,184,.16); text-align:left; white-space:nowrap; }
.trade-history-table th { font-size:12px; opacity:.70; font-weight:800; }
.trade-history-table thead th { position:sticky; top:0; z-index:2; background:#0f1724; box-shadow:0 1px 0 rgba(148,163,184,.22); }
.trade-history-table a { color:#bfdbfe; font-weight:800; text-decoration:none; }
.myfx-profit-plus { color:#86efac !important; font-weight:900; }
.myfx-profit-minus { color:#fca5a5 !important; font-weight:900; }
@media (max-width:720px){ .trade-history-card .trade-history-head{display:block}.trade-history-state{display:inline-flex;margin-top:8px}.trade-history-stats{grid-template-columns:1fr}.live-shot-head{align-items:flex-start;flex-direction:column}.live-shot-empty{font-size:20px} }

/* Modalny podgląd wykresu CLOSE z historii tradów — obraz 2580x1080 mieści się w całości w oknie. */
.myfx-popup-btn { appearance:none; border:1px solid rgba(96,165,250,.40); background:rgba(37,99,235,.16); color:#bfdbfe; border-radius:999px; padding:7px 11px; font:inherit; font-size:12px; font-weight:900; cursor:pointer; white-space:nowrap; }
.myfx-popup-btn:hover { background:rgba(37,99,235,.26); }
.myfx-image-popup { border:0; padding:0; background:transparent; width:min(96vw, calc(229vh - 220px)); max-width:2580px; max-height:96vh; overflow:hidden; }
.myfx-image-popup::backdrop { background:rgba(2,6,23,.86); backdrop-filter:blur(3px); }
.myfx-image-popup-card { width:100%; max-height:96vh; display:flex; flex-direction:column; overflow:hidden; resize:none; border:1px solid rgba(148,163,184,.30); border-radius:20px; background:#020617; box-shadow:0 30px 100px rgba(0,0,0,.65); }
.myfx-image-popup-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid rgba(148,163,184,.18); background:rgba(15,23,42,.96); }
.myfx-image-popup-head strong { color:#e2e8f0; font-size:14px; line-height:1.2; }
.myfx-popup-close { appearance:none; border:1px solid rgba(248,113,113,.40); background:rgba(127,29,29,.32); color:#fecaca; border-radius:999px; padding:8px 13px; font:inherit; font-size:12px; font-weight:900; cursor:pointer; }
.myfx-popup-close:hover { background:rgba(127,29,29,.52); }
.myfx-image-popup-frame { flex:0 1 auto; width:100%; aspect-ratio:2580 / 1080; max-height:calc(96vh - 92px); min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#000; }
.myfx-image-popup-frame img { display:block; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; pointer-events:none; touch-action:none; }
.myfx-image-popup-note { flex:0 0 auto; padding:9px 14px 12px; border-top:1px solid rgba(148,163,184,.14); background:rgba(15,23,42,.96); color:rgba(226,232,240,.64); font-size:11px; }
@media (max-width:720px){ .myfx-image-popup{width:96vw}.myfx-image-popup-head{align-items:flex-start;flex-direction:column}.myfx-image-popup-frame{max-height:calc(96vh - 138px)} }

/* v0.23 — dark embossed coin in full EURUSD/BTCUSD panel, right-aligned to main frame */
.symbol-performance-with-coin {
  position: relative;
}

.symbol-performance-with-coin > .trade-charts-head {
  padding-right: 156px;
  min-height: 128px;
}

.symbol-performance-coin {
  position: absolute;
  right: 24px;
  top: 62px;
  width: 128px;
  height: 128px;
  object-fit: contain;
  transform: translateY(-50%);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.42));
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.symbol-performance-with-coin .trade-charts-status {
  margin-right: 0;
  position: relative;
  z-index: 3;
}

@media (max-width: 900px) {
  .symbol-performance-with-coin > .trade-charts-head {
    padding-right: 118px;
    min-height: 106px;
  }
  .symbol-performance-coin {
    right: 18px;
    top: 58px;
    width: 104px;
    height: 104px;
  }
}

@media (max-width: 680px) {
  .symbol-performance-with-coin > .trade-charts-head {
    padding-right: 0;
    padding-top: 86px;
    min-height: 0;
  }
  .symbol-performance-coin {
    right: 18px;
    top: 18px;
    width: 78px;
    height: 78px;
    transform: none;
  }
}

/* v0.24 — coin moved from chart panel to top EURUSD/BTCUSD hero header */
.symbol-performance-coin {
  display: none !important;
}

.symbol-performance-with-coin > .trade-charts-head {
  padding-right: 0 !important;
  min-height: initial !important;
}

.symbol-hero-with-coin {
  position: relative;
  padding-right: 190px;
  min-height: 154px;
}

.symbol-hero-coin {
  position: absolute;
  right: 0;
  top: 50%;
  width: 152px;
  height: 152px;
  object-fit: contain;
  transform: translateY(-50%);
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.45));
  pointer-events: none;
  user-select: none;
}

@media (max-width: 760px) {
  .symbol-hero-with-coin {
    padding-right: 128px;
    min-height: 112px;
  }
  .symbol-hero-coin {
    width: 112px;
    height: 112px;
  }
}

@media (max-width: 560px) {
  .symbol-hero-with-coin {
    padding-right: 0;
    padding-top: 92px;
  }
  .symbol-hero-coin {
    right: 0;
    top: 0;
    width: 82px;
    height: 82px;
    transform: none;
  }
}


/* v0.28 — coin on opened EURUSD/BTCUSD pages: top symbol header, right edge */
.symbol-hero-with-coin {
  position:relative !important;
  padding-right:190px !important;
  min-height:154px !important;
}
.symbol-hero-coin {
  display:block !important;
  position:absolute !important;
  right:0 !important;
  top:50% !important;
  width:152px !important;
  height:152px !important;
  object-fit:contain !important;
  transform:translateY(-50%) !important;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.45));
  pointer-events:none;
  user-select:none;
}
.symbol-performance-coin {
  display:none !important;
}
@media (max-width:760px){
  .symbol-hero-with-coin{
    padding-right:128px !important;
    min-height:112px !important;
  }
  .symbol-hero-coin{
    width:112px !important;
    height:112px !important;
  }
}
@media (max-width:560px){
  .symbol-hero-with-coin{
    padding-right:0 !important;
    padding-top:92px !important;
  }
  .symbol-hero-coin{
    right:0 !important;
    top:0 !important;
    width:82px !important;
    height:82px !important;
    transform:none !important;
  }
}

/* v0.29 — opened EURUSD/BTCUSD pages only: move header coin right by one coin width */
.symbol-hero-coin {
  transform: translate(152px, -50%) !important;
}

@media (max-width:760px){
  .symbol-hero-coin{
    transform: translate(112px, -50%) !important;
  }
}

@media (max-width:560px){
  .symbol-hero-coin{
    transform: translateX(82px) !important;
  }
}


/* v0.30 — block Edge/Browser image hover tools on full symbol-panel chart screenshots */
.symbol-signal-panel img,
.signal-panel img.chart,
.symbol-live-chart img,
.symbol-live-screenshot,
.trade-image-modal img,
.myfx-chart-modal img,
img[data-symbol-chart],
img[src*="/screens/"],
img[src*="_OPEN"],
img[src*="_CLOSE"],
img[src*="OPEN.png"],
img[src*="CLOSE.png"] {
  pointer-events: none !important;
  -webkit-user-drag: none;
  user-select: none;
}

/* Keep popup/modal buttons clickable */
.symbol-signal-panel button,
.symbol-signal-panel a,
.trade-image-modal button,
.trade-image-modal a,
.myfx-chart-modal button,
.myfx-chart-modal a,
button[data-close-modal],
button[data-open-modal],
button[data-popup-close],
button[data-popup-open],
.btn {
  pointer-events: auto;
}

/* v2.9 — duży Panel transakcji AI: nagłówek LIVE i układ kafli zgodny z mini panelami */
.signal-panel .signal.live {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  border:1px solid rgba(50,255,100,.80);
  border-radius:999px;
  padding:8px 18px;
  color:#b7ffd0 !important;
  font-size:18px;
  line-height:1;
  letter-spacing:.12em;
  font-weight:950;
  text-transform:uppercase;
  -webkit-text-stroke:.35px rgba(50,255,100,.78);
  text-shadow:0 0 10px rgba(50,255,100,.28), 0 1px 0 rgba(0,0,0,.55);
  background:rgba(22,101,52,.14);
  box-shadow:inset 0 0 0 1px rgba(50,255,100,.10), 0 0 0 1px rgba(0,0,0,.18);
}
.signal-panel .live-status-pill.buy,
.signal-panel strong.buy {
  color:#86efac !important;
}
.signal-panel .live-status-pill.sell,
.signal-panel strong.sell {
  color:tomato !important;
}
.signal-panel .live-status-pill.buy {
  border-color:rgba(50,255,100,.50);
  background:rgba(22,101,52,.18);
}
.signal-panel .live-status-pill.sell {
  border-color:rgba(255,99,71,.50);
  background:rgba(127,29,29,.22);
}


/* v3.2 — consistent OPEN/CLOSED colors in both full symbol panels */
.signal-panel .signal.closed {
  color:#fde68a !important;
}
.live-shot.live-shot-open.live-shot-buy .live-shot-head strong {
  color:#86efac !important;
}
.live-shot.live-shot-open.live-shot-sell .live-shot-head strong {
  color:#fca5a5 !important;
}
.live-shot.live-shot-close .live-shot-head strong {
  color:#fde68a !important;
}
.live-shot-badge {
  transition:none !important;
  animation:none !important;
}

/* v3.3 — headline color follows position direction in full EURUSD/BTCUSD panels */
.live-shot.live-shot-open.live-shot-buy .live-shot-head strong {
  color:#86efac;
}
.live-shot.live-shot-open.live-shot-sell .live-shot-head strong {
  color:#fca5a5;
}
.live-shot.live-shot-close .live-shot-head strong {
  color:#fde68a;
}


/* v3.4 — główne panele EURUSD/BTCUSD: kontrolowany podgląd pełnego wykresu.
   Obraz nie przyjmuje zdarzeń myszy, więc Edge nie nakłada „Wyszukaj/Ustawienia”. */
.myfx-image-popup-frame img[data-myfx-popup-img] {
  pointer-events:none !important;
  -webkit-user-drag:none !important;
  user-select:none !important;
  -webkit-touch-callout:none;
}
.live-shot-head a[data-live-shot-link] {
  cursor:pointer;
}


/* v3.6 — separate metallic-copper Stop Loss and emerald Take Profit values. */
.signal-panel .metric strong.myfx-metric-value-sl{
  color:#d8895b !important;
  background:linear-gradient(180deg,#ffe2c6 0%,#e6a178 28%,#b85f39 58%,#f0b28a 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 10px rgba(216,137,91,.20),0 1px 0 rgba(255,226,203,.16);
}
.signal-panel .metric strong.myfx-metric-value-tp{
  color:#50d8a0 !important;
  background:linear-gradient(180deg,#c8ffe8 0%,#55dda7 32%,#0f9f70 62%,#78edbd 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 10px rgba(16,185,129,.22),0 1px 0 rgba(194,255,228,.14);
}

/* v3.7 — points/price notation and emerald SL after its price moves above entry. */
.signal-panel .metric strong.myfx-metric-value-sl,
.signal-panel .metric strong.myfx-metric-value-tp{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
}
.signal-panel .metric strong.myfx-metric-value-sl.myfx-sl-emerald{
  color:#50d8a0 !important;
  background:linear-gradient(180deg,#c8ffe8 0%,#55dda7 32%,#0f9f70 62%,#78edbd 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 10px rgba(16,185,129,.22),0 1px 0 rgba(194,255,228,.14);
}

/* v0.31 — 2026-08-07 keep the result-page coin inside the hero frame.
   Cancels legacy v0.29 which translated the coin one full width to the right. */
.symbol-hero-coin{
  right:0 !important;
  transform:translateY(-50%) !important;
}
@media (max-width:560px){
  .symbol-hero-coin{
    right:0 !important;
    transform:none !important;
  }
}

/* v0.32 — 2026-08-07 mobile result-page coin baseline.
   On phones the coin sits beside the EURUSD/BTCUSD title: the coin's lower
   edge and the title's lower edge are visually aligned, matching the home page. */
@media (max-width:560px){
  .symbol-hero-with-coin{
    padding-top:38px !important;
    padding-right:0 !important;
    min-height:initial !important;
  }
  .symbol-hero-coin{
    right:0 !important;
    top:18px !important;
    width:82px !important;
    height:82px !important;
    transform:none !important;
  }
}