/* Pro Trading page (CFI-style) — every rule is scoped to #pageTrading or the .ptr-* receipt, so nothing else on the site changes.
   Palette follows trading.css: gold #F5B82E, green #16C784, red #EA3943, navy panels. */
#pageTrading { --pt-bg: #0b1020; --pt-panel: rgba(16,22,40,.82); --pt-line: #1c2540; --pt-mut: #8D98A8; --pt-txt: #e6ecf8;
  --pt-gold: #F5B82E; --pt-up: #16C784; --pt-down: #EA3943; --pt-blue: #60A5FA; }

/* mode switch: Pro Trading | Up/Down */
#pageTrading .tr-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: rgba(0,0,0,.35); border: 1px solid var(--pt-line); border-radius: 14px; padding: 4px; margin-bottom: 12px; }
#pageTrading .tr-modes button { border: 0; background: transparent; color: var(--pt-mut); padding: 10px 4px; border-radius: 10px; font-weight: 800; font-size: .84rem; cursor: pointer; transition: .2s; }
#pageTrading .tr-modes button.on { background: linear-gradient(135deg, #F5B82E, #D99A1F); color: #070B12; box-shadow: 0 6px 18px rgba(245,184,46,.25); }

#pageTrading .pt-off { text-align: center; color: var(--pt-mut); padding: 40px 10px; }
#pageTrading .pt-off i { font-size: 2rem; color: var(--pt-gold); display: block; margin-bottom: 10px; }
#pageTrading .up { color: var(--pt-up) !important; }
#pageTrading .down { color: var(--pt-down) !important; }
#pageTrading .pt-wrap, #pageTrading .pt-wrap * { box-sizing: border-box; }
#pageTrading .pt-wrap { color: var(--pt-txt); }
#pageTrading .pt-wrap > div > * + * { margin-top: 12px; }

/* shared panels */
#pageTrading .pt-acct, #pageTrading .pt-watch, #pageTrading .pt-chartbox, #pageTrading .pt-ticket, #pageTrading .pt-orders {
  background: var(--pt-panel); border: 1px solid var(--pt-line); border-radius: 18px; backdrop-filter: blur(10px); }

/* account bar */
#pageTrading .pt-acct { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; padding: 10px 6px; }
#pageTrading .pt-m { flex: 1 1 33%; min-width: 0; padding: 4px 10px; border-inline-end: 1px solid var(--pt-line); }
#pageTrading .pt-m small { display: block; color: var(--pt-mut); font-size: .64rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pageTrading .pt-m b { font-family: 'Courier New', monospace; font-size: .95rem; direction: ltr; display: inline-block; }
#pageTrading #ptBal { color: var(--pt-gold); }
#pageTrading #ptBal.demo { color: var(--pt-blue); }
#pageTrading .pt-acct-sw { display: flex; align-items: center; gap: 6px; padding: 4px 8px; }
#pageTrading .pt-reset { border: 1px solid var(--pt-line); background: transparent; color: var(--pt-blue); border-radius: 8px; padding: 5px 8px; cursor: pointer; }
#pageTrading .pt-badge { margin-inline-start: auto; font-size: .64rem; color: var(--pt-up); background: rgba(22,199,132,.1); border: 1px solid rgba(22,199,132,.3); border-radius: 20px; padding: 4px 10px; white-space: nowrap; }
#pageTrading .pt-demo-banner { background: rgba(96,165,250,.1); border: 1px dashed rgba(96,165,250,.5); color: #bfdbfe; border-radius: 12px; padding: 8px 12px; font-size: .72rem; }
#cfdRoot.pt-is-demo .pt-ticket { border-color: rgba(96,165,250,.45); }

/* segmented controls + chips */
#pageTrading .pt-seg { display: inline-flex; background: rgba(0,0,0,.3); border: 1px solid var(--pt-line); border-radius: 10px; padding: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
#pageTrading .pt-seg button { background: transparent; border: 0; color: var(--pt-mut); padding: 5px 10px; cursor: pointer; font-size: .72rem; border-radius: 8px; white-space: nowrap; font-weight: 700; }
#pageTrading .pt-seg button.on { background: rgba(245,184,46,.16); color: var(--pt-gold); }
#pageTrading .pt-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
#pageTrading .pt-chips button { flex: 1; min-width: 44px; background: rgba(0,0,0,.3); border: 1px solid var(--pt-line); color: var(--pt-txt); padding: 7px 0; border-radius: 10px; cursor: pointer; font-size: .74rem; }
#pageTrading .pt-chips button.on { border-color: var(--pt-gold); color: var(--pt-gold); background: rgba(245,184,46,.08); }

/* asset icon */
#pageTrading .pt-ico { --c: #F5B82E; flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 900; font-size: .9rem;
  color: var(--c); background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--c) 35%, transparent), rgba(0,0,0,.4)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }

/* layout */
#pageTrading .pt-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#pageTrading .pt-grid > * { min-width: 0; }
#pageTrading .pt-h { color: var(--pt-mut); font-size: .7rem; font-weight: 800; letter-spacing: .04em; padding: 10px 12px 4px; }

/* watchlist */
#pageTrading .pt-watch { padding-bottom: 6px; }
#pageTrading .pt-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 10px 6px; }
#pageTrading .pt-cats::-webkit-scrollbar { display: none; }
#pageTrading .pt-cats button { flex: none; background: transparent; border: 1px solid var(--pt-line); color: var(--pt-mut); border-radius: 20px; padding: 4px 11px;
  font-size: .7rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
#pageTrading .pt-cats button.on { border-color: var(--pt-gold); color: var(--pt-gold); background: rgba(245,184,46,.08); }
#pageTrading #ptWatch { display: flex; gap: 8px; overflow-x: auto; padding: 4px 10px 6px; scrollbar-width: none; }
#pageTrading #ptWatch button { position: relative; flex: 0 0 auto; min-width: 170px; display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.25);
  border: 1px solid var(--pt-line); border-radius: 14px; padding: 8px 10px 10px; color: var(--pt-txt); cursor: pointer; text-align: start; transition: .15s; }
#pageTrading #ptWatch button.on { border-color: var(--pt-gold); background: rgba(245,184,46,.07); }
#pageTrading .pt-wn { flex: 1; min-width: 0; }
#pageTrading .pt-wn b { display: block; font-size: .8rem; }
#pageTrading .pt-wn small, #pageTrading .pt-wp small { display: block; font-size: .6rem; color: var(--pt-mut); }
#pageTrading .pt-wn i.cnt { font-style: normal; background: var(--pt-gold); color: #000; border-radius: 8px; padding: 0 5px; font-size: .58rem; margin-inline-start: 4px; }
#pageTrading .pt-wp { text-align: end; direction: ltr; font-family: 'Courier New', monospace; }
#pageTrading .pt-wp b { font-size: .8rem; }
#pageTrading .pt-sent { position: absolute; inset-inline: 10px; bottom: 4px; height: 3px; border-radius: 3px; background: var(--pt-down); overflow: hidden; }
#pageTrading .pt-sent i { display: block; height: 100%; background: var(--pt-up); }

/* chart */
#pageTrading .pt-chartbox { padding: 10px; min-width: 0; }
#pageTrading .pt-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
#pageTrading .pt-sym { display: flex; align-items: center; gap: 10px; }
#pageTrading .pt-sym b small { color: var(--pt-mut); font-weight: 400; font-size: .66rem; }
#pageTrading .pt-sym small { font-size: .68rem; }
#pageTrading .pt-last { font-family: 'Courier New', monospace; font-size: 1.15rem; font-weight: 800; direction: ltr; display: inline-block; }
#pageTrading .pt-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#pageTrading .pt-st { font-size: .66rem; display: inline-flex; align-items: center; gap: 5px; }
#pageTrading .pt-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--pt-up); box-shadow: 0 0 0 0 rgba(22,199,132,.6); animation: ptPulse 1.6s infinite; }
@keyframes ptPulse { 70% { box-shadow: 0 0 0 7px rgba(22,199,132,0); } 100% { box-shadow: 0 0 0 0 rgba(22,199,132,0); } }
#pageTrading .pt-chart { direction: ltr; height: 400px; border-radius: 14px; overflow: hidden; background: var(--pt-bg); border: 1px solid var(--pt-line); }
#pageTrading .pt-chart > div, #pageTrading #ptTvBox { width: 100%; height: 100%; }
/* full-screen chart (cfd.js setFull): button in the chart head; the chart box covers the screen, Sell / Buy bar under it */
#pageTrading .pt-full-btn { order: 9; flex: none; width: 34px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(0,0,0,.45); color: var(--pt-txt); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; font-size: .85rem; }
#pageTrading .pt-full-btn:active { transform: scale(.94); }
#pageTrading .pt-fbar { display: none; }
#cfdRoot.pt-full .pt-chartbox { position: fixed; inset: 0; z-index: 9500; margin: 0; border: 0; border-radius: 0; background: #0b0e11; backdrop-filter: none;
  display: flex; flex-direction: column; padding: calc(6px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left)); }
#cfdRoot.pt-full .pt-chart { flex: 1 1 auto; height: auto !important; min-height: 0; border-radius: 10px; }
#cfdRoot.pt-full .pt-hint { display: none; }
#cfdRoot.pt-full .pt-full-btn { background: rgba(245,184,46,.18); border-color: var(--pt-gold); color: var(--pt-gold); }
#cfdRoot.pt-full .pt-fbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; flex: none; padding-top: 8px; max-width: 640px; width: 100%; margin: 0 auto; }
#pageTrading .pt-fbar button { border: 0; border-radius: 12px; padding: 7px 4px; cursor: pointer; }
#pageTrading .pt-fbar button:disabled { opacity: .5; }
#pageTrading .pt-fbar .sell { background: var(--pt-down); color: #fff; }
#pageTrading .pt-fbar .buy { background: var(--pt-up); color: #06140d; }
#pageTrading .pt-fbar small { display: block; font-size: .72rem; font-weight: 800; }
#pageTrading .pt-fbar b { display: block; font-family: 'Courier New', monospace; font-size: .98rem; direction: ltr; }
#pageTrading #ptFAmt { color: var(--pt-gold); font-size: .72rem; font-weight: 800; text-align: center; white-space: nowrap; direction: ltr; }
body.tr-full-on .ptr-overlay { z-index: 10000; }
#pageTrading .pt-hint { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: #6b7690; font-size: .64rem; margin-top: 6px; }

/* order ticket */
#pageTrading .pt-ticket { padding: 12px; }
#pageTrading .pt-sides { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
#pageTrading .pt-sides button { border: 1px solid var(--pt-line); border-radius: 14px; padding: 10px 6px; cursor: pointer; color: var(--pt-txt); transition: .15s; }
#pageTrading .pt-sides .sell { background: linear-gradient(180deg, rgba(234,57,67,.16), rgba(234,57,67,.04)); }
#pageTrading .pt-sides .buy { background: linear-gradient(180deg, rgba(22,199,132,.16), rgba(22,199,132,.04)); }
#pageTrading .pt-sides small { display: block; font-size: .72rem; font-weight: 800; }
#pageTrading .pt-sides .sell small { color: var(--pt-down); }
#pageTrading .pt-sides .buy small { color: var(--pt-up); }
#pageTrading .pt-sides b { display: block; font-family: 'Courier New', monospace; font-size: 1.12rem; direction: ltr; }
#pageTrading .pt-sides .sell.on { border-color: var(--pt-down); box-shadow: 0 0 0 1px var(--pt-down) inset; }
#pageTrading .pt-sides .buy.on { border-color: var(--pt-up); box-shadow: 0 0 0 1px var(--pt-up) inset; }
#pageTrading .pt-spread { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); background: var(--pt-bg); border: 1px solid var(--pt-line); color: var(--pt-mut);
  font-size: .6rem; border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
#pageTrading .pt-typerow { display: flex; gap: 6px; margin-top: 6px; }
#pageTrading #ptType { display: flex; flex: 1; }
#pageTrading #ptType button { flex: 1; }
#pageTrading #ptUnit { flex: none; }
#pageTrading .pt-lbl { display: flex; justify-content: space-between; align-items: center; gap: 6px; color: var(--pt-mut); font-size: .72rem; margin: 10px 0 5px; }
#pageTrading .pt-trig small { display: block; color: var(--pt-blue); font-size: .64rem; margin-top: 4px; }
#pageTrading .pt-step { display: flex; align-items: stretch; background: rgba(0,0,0,.3); border: 1px solid var(--pt-line); border-radius: 12px; overflow: hidden; }
#pageTrading .pt-step button { width: 42px; border: 0; background: rgba(255,255,255,.03); color: var(--pt-txt); font-size: 1.1rem; cursor: pointer; }
#pageTrading .pt-step input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; padding: 10px 4px; font-size: 1.05rem; text-align: center; font-family: 'Courier New', monospace; }
#pageTrading .pt-range { display: block; color: #6b7690; font-size: .62rem; text-align: center; }
#pageTrading .pt-lvl { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 8px; margin-bottom: 6px; }
#pageTrading .pt-lvl input { min-width: 0; background: rgba(0,0,0,.3); border: 1px solid var(--pt-line); color: #fff; padding: 8px; border-radius: 10px; text-align: center; font-family: 'Courier New', monospace; }
#pageTrading .pt-lvl input:disabled { opacity: .4; }
#pageTrading .pt-lvl em { grid-column: 2; font-style: normal; font-size: .64rem; color: var(--pt-mut); text-align: center; min-height: .8em; }
#pageTrading .pt-sw { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; cursor: pointer; min-width: 98px; }
#pageTrading .pt-sw input { display: none; }
#pageTrading .pt-sw i { width: 30px; height: 17px; border-radius: 10px; background: #2a3350; position: relative; transition: .2s; flex: none; }
#pageTrading .pt-sw i::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: .2s; }
#pageTrading .pt-sw input:checked + i { background: var(--pt-gold); }
#pageTrading .pt-sw input:checked + i::after { inset-inline-start: 15px; }
#pageTrading #ptLvl_sl .pt-sw { color: #fca5a5; }
#pageTrading #ptLvl_tp .pt-sw { color: #86efac; }
#pageTrading .pt-sum { background: rgba(0,0,0,.25); border: 1px solid var(--pt-line); border-radius: 12px; padding: 6px 10px; margin: 10px 0; }
#pageTrading .pt-sum div { display: flex; justify-content: space-between; font-size: .7rem; color: var(--pt-mut); padding: 3px 0; }
#pageTrading .pt-sum b { color: var(--pt-txt); font-family: 'Courier New', monospace; direction: ltr; }
#pageTrading .pt-go { width: 100%; border: 0; border-radius: 14px; padding: 15px 0; font-size: 1rem; font-weight: 900; color: #fff; cursor: pointer; transition: transform .1s; }
#pageTrading .pt-go:active { transform: scale(.98); }
#pageTrading .pt-go.buy { background: linear-gradient(135deg, #15803d, #16C784); box-shadow: 0 8px 22px rgba(22,199,132,.3); }
#pageTrading .pt-go.sell { background: linear-gradient(135deg, #b91c1c, #EA3943); box-shadow: 0 8px 22px rgba(234,57,67,.3); }
#pageTrading .pt-go:disabled { opacity: .45; cursor: not-allowed; }
#pageTrading .pt-note { color: #6b7690; font-size: .64rem; line-height: 1.6; text-align: center; margin: 8px 0 0; }

/* orders / history / ledger */
#pageTrading .pt-orders { padding: 8px 12px 12px; }
#pageTrading .pt-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--pt-line); margin-bottom: 10px; scrollbar-width: none; }
#pageTrading .pt-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--pt-mut); padding: 8px 10px; font-weight: 800; font-size: .78rem; cursor: pointer; white-space: nowrap; }
#pageTrading .pt-tabs button.on { color: var(--pt-gold); border-bottom-color: var(--pt-gold); }
#pageTrading .pt-tabs i { font-style: normal; background: var(--pt-gold); color: #000; border-radius: 8px; padding: 0 5px; font-size: .6rem; }
#pageTrading .pt-tabs i:empty { display: none; }
#pageTrading .pt-tabs i.muted { background: #2a3350; color: var(--pt-txt); }
#pageTrading .pt-hsum { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
#pageTrading .pt-hsum div { background: rgba(0,0,0,.25); border: 1px solid var(--pt-line); border-radius: 10px; padding: 6px; text-align: center; }
#pageTrading .pt-hsum small { display: block; color: var(--pt-mut); font-size: .6rem; }
#pageTrading .pt-hsum b { font-size: .82rem; font-family: 'Courier New', monospace; }
#pageTrading .pt-tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; background: rgba(0,0,0,.25); border: 1px solid var(--pt-line);
  border-radius: 12px; padding: 9px 12px; margin-bottom: 6px; font-size: .74rem; cursor: pointer; transition: border-color .15s; }
#pageTrading .pt-tr:hover { border-color: #2c3a63; }
#pageTrading .pt-tr small { display: block; color: var(--pt-mut); font-size: .6rem; }
#pageTrading .pt-tr .c-a { display: flex; align-items: center; gap: 8px; }
#pageTrading .pt-tr .c-a .pt-ico { width: 28px; height: 28px; font-size: .75rem; }
#pageTrading .pt-tr .c-a small.buy { color: var(--pt-up); }
#pageTrading .pt-tr .c-a small.sell { color: var(--pt-down); }
#pageTrading .pt-tr .c-v, #pageTrading .pt-tr .c-p, #pageTrading .pt-tr .c-l { font-family: 'Courier New', monospace; direction: ltr; text-align: start; }
#pageTrading .pt-tr .c-v small, #pageTrading .pt-tr .c-p small, #pageTrading .pt-tr .c-l small { font-family: inherit; }
#pageTrading .pt-tr .c-p i { font-style: normal; color: var(--pt-txt); }
#pageTrading .pt-tr .c-pl { font-family: 'Courier New', monospace; font-size: .9rem; direction: ltr; text-align: end; grid-column: 2; grid-row: 1; }
#pageTrading .pt-tr .c-x { display: flex; gap: 4px; justify-content: flex-end; grid-column: 2; }
#pageTrading .pt-tr .c-x button { border: 1px solid var(--pt-line); background: rgba(255,255,255,.04); color: #c5d0e6; border-radius: 8px; padding: 5px 9px; font-size: .68rem; cursor: pointer; }
#pageTrading .pt-tr .c-x button.x { border-color: rgba(234,57,67,.5); color: var(--pt-down); }
#pageTrading .pt-tr .c-x button.rc { border-color: rgba(245,184,46,.4); color: var(--pt-gold); }
#pageTrading .pt-tr .c-x button:disabled { opacity: .4; }
#pageTrading .pt-tr .c-t { direction: ltr; }
#pageTrading .pt-muted { color: #6b7690; font-size: .74rem; text-align: center; padding: 18px; }

/* SL/TP edit modal */
#pageTrading .pt-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(4,6,12,.86); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 20px; }
#pageTrading .pt-modal-box { max-width: 360px; width: 100%; background: #101526; border: 1px solid rgba(245,184,46,.45); border-radius: 18px; padding: 20px 16px; display: grid; gap: 10px; }
#pageTrading .pt-modal-box h3 { color: var(--pt-gold); font-size: .92rem; margin: 0; text-align: center; }
#pageTrading .pt-modal-box small { display: block; color: var(--pt-mut); font-size: .68rem; margin-bottom: 3px; }
#pageTrading .pt-modal-box input { width: 100%; background: rgba(0,0,0,.35); border: 1px solid var(--pt-line); color: #fff; padding: 10px; border-radius: 10px; text-align: center; font-size: 1rem; }
#pageTrading .pt-modal-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#pageTrading .pt-modal-btns button { border: 1px solid var(--pt-line); background: transparent; color: #c5d0e6; border-radius: 12px; padding: 11px; font-weight: 700; cursor: pointer; }
#pageTrading .pt-modal-btns button.ok { border: 0; color: #070B12; background: linear-gradient(135deg, #F5B82E, #D99A1F); }

/* receipt (invoice) overlay — lives on <body>, prefixed .ptr- */
.ptr-overlay { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(4,6,12,.88); backdrop-filter: blur(6px); }
.ptr-card { width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto; background: linear-gradient(180deg, #121a30, #0c1222); color: #e6ecf8;
  border: 1px solid rgba(245,184,46,.4); border-radius: 20px; padding: 18px 16px; box-shadow: 0 30px 80px rgba(0,0,0,.6); font-size: .8rem; }
.ptr-card .ptr-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed rgba(245,184,46,.35); padding-bottom: 10px; }
.ptr-card .ptr-brand { color: #F5B82E; font-weight: 900; }
.ptr-card .ptr-chip { display: inline-block; font-size: .64rem; border: 1px solid #2a3350; border-radius: 20px; padding: 2px 9px; color: #c5d0e6; }
.ptr-card .ptr-chip.open { border-color: #16C784; color: #16C784; } .ptr-card .ptr-chip.pending { border-color: #60A5FA; color: #60A5FA; }
.ptr-card .ptr-chip.demo { border-color: #60A5FA; color: #bfdbfe; background: rgba(96,165,250,.12); }
.ptr-card h3 { margin: 12px 0 2px; font-size: 1rem; }
.ptr-card .ptr-id { color: #8D98A8; font-size: .7rem; }
.ptr-card .ptr-id b { color: #e6ecf8; font-family: 'Courier New', monospace; }
.ptr-card .ptr-hero { margin: 12px 0; padding: 14px; border-radius: 14px; text-align: center; background: rgba(0,0,0,.3); border: 1px solid #1c2540; }
.ptr-card .ptr-hero small { display: block; color: #8D98A8; margin-top: 4px; }
.ptr-card .ptr-hero b { font-size: 1.9rem; font-family: 'Courier New', monospace; direction: ltr; display: inline-block; }
.ptr-card .ptr-side.buy, .ptr-card .up { color: #16C784; } .ptr-card .ptr-side.sell, .ptr-card .down { color: #EA3943; }
.ptr-card .ptr-table { width: 100%; border-collapse: collapse; }
.ptr-card .ptr-table td { padding: 7px 2px; border-bottom: 1px solid rgba(255,255,255,.05); color: #8D98A8; }
.ptr-card .ptr-table td:last-child { color: #e6ecf8; text-align: end; font-weight: 700; direction: ltr; font-family: 'Courier New', monospace; }
.ptr-card .ptr-foot { color: #6b7690; font-size: .62rem; text-align: center; margin: 12px 0 0; }
.ptr-card .ptr-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 12px; }
.ptr-card .ptr-btns button { border: 1px solid #2a3350; background: transparent; color: #c5d0e6; border-radius: 12px; padding: 10px 4px; font-weight: 700; cursor: pointer; font-size: .72rem; }
.ptr-card .ptr-btns button.ok { border: 0; color: #070B12; background: linear-gradient(135deg, #F5B82E, #D99A1F); }

/* glowing gold scrollbar — only while the trading page is open (and inside its sheets) */
html:has(#pageTrading.active)::-webkit-scrollbar, #pageTrading .pt-orders::-webkit-scrollbar, #pageTrading .pt-ticket::-webkit-scrollbar { width: 5px; }
html:has(#pageTrading.active)::-webkit-scrollbar-track { background: #0b1020; }
#pageTrading .pt-orders::-webkit-scrollbar-track, #pageTrading .pt-ticket::-webkit-scrollbar-track { background: transparent; }
html:has(#pageTrading.active)::-webkit-scrollbar-thumb, #pageTrading .pt-orders::-webkit-scrollbar-thumb, #pageTrading .pt-ticket::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FFE08A, #F5B82E 45%, #D99A1F); border-radius: 10px; box-shadow: 0 0 6px rgba(245,184,46,.9), 0 0 12px rgba(245,184,46,.45); }
@supports not selector(::-webkit-scrollbar) {   /* Firefox */
  html:has(#pageTrading.active), #pageTrading .pt-orders, #pageTrading .pt-ticket { scrollbar-width: thin; scrollbar-color: #F5B82E transparent; }
}
/* small bouncing arrow while there is more content below (cfd-scroll.js) */
#pageTrading .pt-scroll-hint { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 9999; width: 30px; height: 30px; margin-left: -15px;
  border-radius: 50%; border: 1px solid rgba(245,184,46,.6); background: rgba(11,16,32,.85); color: #F5B82E; font-size: .8rem; cursor: pointer;
  box-shadow: 0 0 10px rgba(245,184,46,.55); opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .25s, transform .25s; }
#pageTrading .pt-scroll-hint.show { opacity: .92; pointer-events: auto; transform: none; animation: ptHintBounce 1.6s ease-in-out infinite; }
@keyframes ptHintBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (max-width: 1099px) { #pageTrading .pt-scroll-hint { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); } }      /* above the site's bottom bar */
#pageTrading .pt-scroll-hint.above-bar { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }                       /* + our Buy/Sell bar */

/* phone (< 700px): everything on ONE screen, no page scroll (Bybit-style).
   Top: account line → pair + timeframes → chart (takes all free height) → panel with tabs:
   New trade (ticket + Sell / Buy) | Open | Pending | Closed | Ledger. The pair name opens the markets list as a bottom sheet. */
#pageTrading .pt-mbar, #pageTrading .pt-backdrop, #pageTrading .pt-sheet-head, #pageTrading .pt-corner, #pageTrading .pt-page-head,
#pageTrading .pt-phone, #pageTrading .pt-short, #pageTrading #ptLevSel, #pageTrading .pt-caret { display: none; }
#pageTrading .tr-top-row { display: block; }
@media (max-width: 699.98px) {
  #pageTrading { --pt-bg: #0b0e11; --pt-panel: #161a1e; --pt-line: rgba(255,255,255,.08); --pt-mut: #848e9c; --pt-txt: #eaecef; --pt-up: #0ecb81; --pt-down: #f6465d; }
  .main-dashboard:has(#pageTrading.active #cfdRoot.pt-fit), .dashboard-content-col:has(#pageTrading.active #cfdRoot.pt-fit) { padding-bottom: 0 !important; }
  #pageTrading .tr-top-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 6px; padding-top: 2px; }
  #pageTrading .tr-top-row .tr-modes { flex: 1; margin-bottom: 0; padding: 3px; border-radius: 12px; }
  #pageTrading .tr-modes button { padding: 6px 4px; font-size: .76rem; }
  #pageTrading .pt-acct, #pageTrading .pt-chartbox, #pageTrading .pt-orders { backdrop-filter: none; border-radius: 14px; }

  /* the whole Pro screen = a column that fills the height set by cfd.js (fitHeight) */
  #cfdRoot.pt-fit .pt-wrap { height: 100%; }
  #cfdRoot.pt-fit #ptMain { height: 100%; display: flex; flex-direction: column; gap: 6px; }
  #pageTrading .pt-wrap > div > * + * { margin-top: 0; }
  #pageTrading #ptMain > * + * { margin-top: 6px; }
  #cfdRoot.pt-fit #ptMain > * + * { margin-top: 0; }

  /* account: one line — Real/Demo · balance · margin · P/L */
  #pageTrading .pt-acct { flex: none; flex-wrap: nowrap; padding: 3px 4px; gap: 0; }
  #pageTrading .pt-acct-sw { order: -1; padding: 0 2px; }
  #pageTrading .pt-acct .pt-seg button { padding: 4px 8px; font-size: .68rem; }
  #pageTrading .pt-m { flex: 1 1 0; min-width: 0; padding: 1px 7px; }
  #pageTrading .pt-m:last-of-type { border: 0; }
  #pageTrading .pt-m small { font-size: .56rem; }
  #pageTrading .pt-m b { font-size: .74rem; white-space: nowrap; }
  /* less clutter: balance + P/L only (margin is on the ticket), chart type only in full screen, amount always in USDT */
  #pageTrading .pt-m[data-m="ptEq"], #pageTrading .pt-m[data-m="ptFree"], #pageTrading .pt-m[data-m="ptLevel"], #pageTrading .pt-m[data-m="ptUsed"],
  #cfdRoot:not(.pt-full) #ptView, #pageTrading #ptUnit, #pageTrading .pt-badge,
  #pageTrading .pt-demo-banner, #pageTrading .pt-hint, #pageTrading .pt-st { display: none !important; }

  /* chart: pair + price, timeframes, then the chart takes every free pixel */
  #pageTrading .pt-grid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; }
  #pageTrading .pt-chartbox { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 6px 0 0; overflow: hidden; }
  #pageTrading .pt-chart-head { flex: none; padding: 0 8px; margin-bottom: 4px; gap: 4px; position: relative; }
  #pageTrading .pt-sym { cursor: pointer; gap: 8px; width: 100%; padding-inline-end: 40px; }
  #pageTrading .pt-full-btn { position: absolute; top: 0; inset-inline-end: 8px; width: 36px; height: 32px; font-size: .95rem;
    color: var(--pt-gold); border-color: rgba(245,184,46,.45); background: rgba(245,184,46,.08); }
  #pageTrading .pt-sym .pt-ico { width: 26px; height: 26px; font-size: .7rem; }
  #pageTrading .pt-sym > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
  #pageTrading .pt-sym b { font-size: .92rem; }
  #pageTrading .pt-caret { display: inline-block; font-size: .62rem; color: var(--pt-mut); margin-inline-start: 5px; }
  #pageTrading .pt-last { font-size: 1.05rem; }
  #pageTrading .pt-tools { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #pageTrading .pt-tools::-webkit-scrollbar { display: none; }
  #pageTrading .pt-tools .pt-seg { flex: none; }
  #pageTrading .pt-seg button { padding: 4px 9px; }
  #pageTrading .pt-chart { flex: 1 1 auto; height: auto !important; min-height: 150px; border-radius: 0; border: 0; }

  /* markets: bottom sheet opened from the pair name */
  #pageTrading .pt-watch { position: fixed; inset-inline: 0; bottom: 0; z-index: 9998; max-height: 75svh; overflow-y: auto; margin: 0 !important;
    border: 0; border-radius: 20px 20px 0 0; background: #161a1e; padding: 2px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateY(105%); visibility: hidden; transition: transform .25s ease; }
  #pageTrading .pt-watch.open { transform: none; visibility: visible; box-shadow: 0 -20px 60px rgba(0,0,0,.6); }
  #pageTrading .pt-watch .pt-h { text-align: center; color: var(--pt-txt); font-size: .86rem; padding: 12px 0 6px; }
  #pageTrading .pt-cats { padding: 2px 0 8px; }
  #pageTrading #ptWatch { flex-direction: column; overflow: visible; padding: 0; gap: 4px; }
  #pageTrading #ptWatch button { min-width: 0; width: 100%; padding: 9px 10px 11px; border-radius: 12px; }
  #pageTrading #ptWatch .pt-ico { width: 28px; height: 28px; font-size: .74rem; }
  #pageTrading .pt-backdrop.open { display: block; position: fixed; inset: 0; z-index: 9997; background: rgba(0,0,0,.6); }

  /* the panel under the chart */
  #pageTrading .tr-top-row .pt-corner { display: none; }
  #pageTrading .pt-orders { flex: none; padding: 0 10px 8px; }
  #pageTrading .pt-orders .pt-tabs { margin: 0 -10px 8px; padding: 0 4px; gap: 0; justify-content: space-between; }
  #pageTrading .pt-tabs button { padding: 9px 6px 8px; font-size: .74rem; }
  #pageTrading .pt-tabs .pt-phone, #pageTrading .pt-tabs .pt-short { display: inline; }
  #pageTrading .pt-tabs .pt-long { display: none; }
  #pageTrading .pt-orders #ptSummary:not(:empty), #pageTrading .pt-orders #ptRows { max-height: 34svh; overflow-y: auto; overscroll-behavior: contain; }
  #pageTrading .pt-orders #ptRows { min-height: 120px; }
  #pageTrading .pt-orders.is-new #ptSummary, #pageTrading .pt-orders.is-new #ptRows, #pageTrading .pt-orders:not(.is-new) .pt-ticket { display: none; }
  #pageTrading .pt-hsum { grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 6px; }
  #pageTrading .pt-hsum div { padding: 4px 2px; }
  #pageTrading .pt-hsum small { font-size: .54rem; }
  #pageTrading .pt-hsum b { font-size: .7rem; }
  #pageTrading .pt-tr { padding: 7px 10px; margin-bottom: 5px; }

  /* compact order ticket: type · amount + leverage · SL/TP (folds) · margin line · Sell | Buy */
  #pageTrading .pt-ticket { padding: 0; background: transparent; border: 0; backdrop-filter: none; }
  #pageTrading .pt-ticket .pt-sides, #pageTrading .pt-go, #pageTrading .pt-note, #pageTrading #ptQuick, #pageTrading .pt-range,
  #pageTrading #ptLev, #pageTrading .pt-lev-lbl { display: none; }
  #pageTrading .pt-typerow { margin: 0 0 8px; }
  #pageTrading .pt-typerow .pt-seg button { padding: 6px 8px; }
  #pageTrading .pt-amt-lbl { display: none; }
  #pageTrading .pt-lbl { margin: 7px 0 4px; font-size: .68rem; }
  #pageTrading .pt-amtrow { display: flex; gap: 6px; }
  #pageTrading .pt-amtrow .pt-step { flex: 1; min-width: 0; }
  #pageTrading .pt-step button { width: 38px; }
  #pageTrading .pt-step input { padding: 8px 4px; font-size: 1rem; }
  #pageTrading #ptLevSel { display: block; flex: 0 0 82px; background: rgba(0,0,0,.3); border: 1px solid var(--pt-line); color: var(--pt-gold); border-radius: 12px;
    font-weight: 800; font-size: .9rem; text-align: center; text-align-last: center; padding: 0 6px; appearance: none; -webkit-appearance: none; cursor: pointer; }
  #pageTrading #ptSltpHead { cursor: pointer; margin-top: 8px; }
  #pageTrading #ptSltpHead .pt-caret { transition: transform .2s; }
  #pageTrading .pt-ticket.sltp-open #ptSltpHead .pt-caret { transform: rotate(180deg); }
  #pageTrading .pt-ticket:not(.sltp-open) #ptBy, #pageTrading .pt-ticket:not(.sltp-open) .pt-lvls { display: none; }
  #pageTrading .pt-lvls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #pageTrading .pt-lvl { grid-template-columns: minmax(0, 1fr); gap: 3px; margin: 0; }
  #pageTrading .pt-lvl em { grid-column: 1; }
  #pageTrading .pt-lvl input { padding: 7px; }
  #pageTrading .pt-sw { min-width: 0; font-size: .7rem; }
  #pageTrading .pt-sum { display: flex; justify-content: space-between; gap: 10px; background: none; border: 0; padding: 0; margin: 4px 0 0; }
  #pageTrading .pt-sum div { display: none; gap: 6px; padding: 0; font-size: .66rem; }
  #pageTrading .pt-sum div[data-k="reqMargin"], #pageTrading .pt-sum div[data-k="liq"] { display: flex; }
  #pageTrading .pt-ticket .pt-mbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
  #pageTrading .pt-mbar button { border: 0; border-radius: 12px; padding: 7px 4px; cursor: pointer; transition: transform .1s; }
  #pageTrading .pt-mbar button:active { transform: scale(.98); }
  #pageTrading .pt-mbar button:disabled { opacity: .5; }
  #pageTrading .pt-mbar .sell { background: var(--pt-down); color: #fff; }
  #pageTrading .pt-mbar .buy { background: var(--pt-up); color: #06140d; }
  #pageTrading .pt-mbar small { display: block; font-size: .72rem; font-weight: 800; }
  #pageTrading .pt-mbar b { display: block; font-family: 'Courier New', monospace; font-size: .98rem; direction: ltr; }
  #cfdRoot.pt-is-demo .pt-ticket { border: 0; }
}
/* tablet+ */
@media (min-width: 700px) {
  #pageTrading .pt-m { flex: 1 1 0; }
  #pageTrading .pt-tr { grid-template-columns: 1.2fr 1fr 1.3fr 1fr auto auto; grid-template-rows: auto; }
  #pageTrading .pt-tr .c-pl, #pageTrading .pt-tr .c-x { grid-column: auto; grid-row: auto; }
  #pageTrading .pt-led { grid-template-columns: 1.2fr 1.3fr 1fr auto; }
}
/* desktop: watchlist | chart | ticket, like CFI */
@media (min-width: 1100px) {
  #pageTrading .pt-grid { grid-template-columns: 230px minmax(0, 1fr) 320px; align-items: start; }
  #pageTrading #ptWatch { flex-direction: column; overflow: visible; }
  #pageTrading #ptWatch button { min-width: 0; width: 100%; }
  #pageTrading .pt-chart { height: 560px; }
  #pageTrading .pt-ticket { position: sticky; top: 16px; }
  #pageTrading .tr-modes { max-width: 420px; }
}

/* The Trading page stands on its own: no ad picture (Spotlight) and no announcement bar above it.
   They stay at the top of every other page. */
.dashboard-content-col:has(#pageTrading.active) #spotHero,
.dashboard-content-col:has(#pageTrading.active) #announcementBanner { display: none !important; }