@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* =====================================================
   TRADEREPLAY PRO v7 — Upstox Light Theme
   LAYOUT: [Watchlist 240px] [Chart FLEX] [Orders 280px]
   All in a single flex-row. Center is a flex column.
===================================================== */

#trp-app {
  --wl:    240px;
  --op:    280px;
  --brand: #f97316;
  --brandl:#fff7ed;
  --brande:#ffedd5;
  --bull:  #16a34a;
  --bulle: #dcfce7;
  --bulll: #86efac;
  --bear:  #dc2626;
  --beare: #fee2e2;
  --bearl: #fca5a5;
  --blue:  #2563eb;
  --bluel: #eff6ff;
  --gold:  #d97706;
  --golde: #fffbeb;
  --purp:  #7c3aed;
  --purpe: #f5f3ff;
  --w:     #ffffff;
  --g50:   #f8fafc;
  --g100:  #f1f5f9;
  --g200:  #e2e8f0;
  --g300:  #cbd5e1;
  --g400:  #94a3b8;
  --g500:  #64748b;
  --g600:  #475569;
  --g700:  #334155;
  --g800:  #1e293b;
  --g900:  #0f172a;
  --bd:    1px solid #e2e8f0;
}

/* === RESET === */
#trp-app, #trp-app * { box-sizing: border-box; margin: 0; padding: 0; }
#trp-app {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px; color: var(--g900); background: var(--g100);
  height: calc(100vh - 40px); min-height: 600px;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 10px; border: var(--bd);
  box-shadow: 0 4px 24px rgba(15,23,42,.1);
  -webkit-font-smoothing: antialiased;
  position: relative;
}
#trp-app button, #trp-app input, #trp-app select { font-family: inherit; outline: none; -webkit-appearance: none; appearance: none; }
#trp-app ::-webkit-scrollbar { width: 4px; height: 4px; }
#trp-app ::-webkit-scrollbar-thumb { background: var(--g300); border-radius: 2px; }

/* === LOADER === */
#trp-loader {
  display: none; position: absolute; inset: 0; z-index: 9999;
  background: rgba(248,250,252,.93); backdrop-filter: blur(4px);
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
#trp-loader.on { display: flex; }
.spin { width: 36px; height: 36px; border: 3px solid var(--g200); border-top-color: var(--brand); border-radius: 50%; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.lmsg { font-family: 'JetBrains Mono',monospace; font-size: 12px; color: var(--g500); max-width: 240px; text-align: center; }
.lbar { width: 200px; height: 3px; background: var(--g200); border-radius: 2px; overflow: hidden; }
.lprg { height: 100%; background: linear-gradient(90deg,var(--brand),var(--bull)); animation: lp 1.8s ease-in-out infinite; }
@keyframes lp { 0%{width:0;margin-left:0} 50%{width:65%;margin-left:20%} 100%{width:0;margin-left:100%} }

/* === TOAST === */
#trp-toast {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 9998; padding: 9px 18px; border-radius: 8px; font-weight: 700;
  font-family: 'JetBrains Mono',monospace; font-size: 11px;
  pointer-events: none; opacity: 0; transition: opacity .2s;
  white-space: nowrap; box-shadow: 0 4px 14px rgba(15,23,42,.15);
}
#trp-toast.on { opacity: 1; }
#trp-toast.ok { background: var(--bulle); border: 1px solid var(--bulll); color: #15803d; }
#trp-toast.er { background: var(--beare); border: 1px solid var(--bearl); color: #b91c1c; }
#trp-toast.wn { background: var(--golde); border: 1px solid #fde68a; color: #92400e; }
#trp-toast.in { background: var(--bluel); border: 1px solid #bfdbfe; color: #1d4ed8; }

/* === MODAL === */
.modal-bg { display: none; position: absolute; inset: 0; z-index: 9990; background: rgba(15,23,42,.45); backdrop-filter: blur(3px); align-items: center; justify-content: center; }
.modal-bg.on { display: flex; }
.modal { background: var(--w); border-radius: 12px; width: 400px; max-width: 95%; box-shadow: 0 20px 50px rgba(15,23,42,.2); animation: pop .18s ease-out; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }
.m-hdr { padding: 16px 20px; border-bottom: var(--bd); display: flex; align-items: center; justify-content: space-between; }
.m-ttl { font-size: 15px; font-weight: 800; color: var(--g900); }
.m-cls { width: 28px; height: 28px; border-radius: 6px; background: var(--g100); border: none; cursor: pointer; font-size: 16px; color: var(--g500); display: flex; align-items: center; justify-content: center; }
.m-cls:hover { background: var(--g200); }
.m-body { padding: 18px 20px 20px; }
.m-lbl { display: block; font-size: 10px; font-weight: 700; color: var(--g500); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px; }
.m-in { width: 100%; height: 38px; background: var(--g50); border: var(--bd); border-radius: 7px; padding: 0 11px; font-family: 'JetBrains Mono',monospace; font-size: 12px; color: var(--g900); margin-bottom: 13px; transition: .15s; }
.m-in:focus { border-color: var(--brand); background: var(--w); box-shadow: 0 0 0 3px rgba(249,115,22,.1); }
.m-note { font-size: 10px; color: var(--g400); margin: -9px 0 12px; line-height: 1.5; }
.m-row { display: flex; gap: 8px; margin-top: 4px; align-items: center; }
.m-ok { flex: 1; height: 38px; background: var(--brand); color: #fff; border: none; border-radius: 7px; font-weight: 700; font-size: 13px; cursor: pointer; }
.m-ok:hover { opacity: .88; }
.m-ghost { height: 38px; padding: 0 14px; background: var(--g100); border: var(--bd); border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--g600); cursor: pointer; white-space: nowrap; }
.m-ghost:hover { background: var(--g200); }
#s-testres { font-size: 11px; font-family: 'JetBrains Mono',monospace; }

/* =====================================================
   HEADER — full width, 52px
===================================================== */
#trp-hdr {
  flex-shrink: 0; height: 52px; background: var(--w); border-bottom: var(--bd);
  display: flex; align-items: center;
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.h-logo {
  width: var(--wl); flex-shrink: 0; padding: 0 14px; height: 100%;
  display: flex; align-items: center; gap: 10px; border-right: var(--bd);
}
.h-logo-ico { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg,#f97316,#ea580c); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(249,115,22,.3); }
.h-logo-nm  { font-size: 14px; font-weight: 800; color: var(--g900); letter-spacing: -.3px; line-height: 1.2; }
.h-logo-sub { font-size: 9px; color: var(--g400); font-family: 'JetBrains Mono',monospace; }
.h-search { flex-shrink: 0; width: 250px; padding: 0 12px; position: relative; }
.h-sbox { display: flex; align-items: center; gap: 7px; height: 34px; background: var(--g100); border: var(--bd); border-radius: 8px; padding: 0 10px; transition: .15s; }
.h-sbox:focus-within { background: var(--w); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(249,115,22,.1); }
.h-sico { color: var(--g400); font-size: 12px; }
.h-sin { flex: 1; background: none; border: none; font-size: 12px; color: var(--g900); }
.h-sin::placeholder { color: var(--g400); }
.h-drop { position: absolute; top: calc(100% + 2px); left: 12px; right: 12px; background: var(--w); border: var(--bd); border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,.12); z-index: 500; display: none; max-height: 260px; overflow-y: auto; padding: 4px; }
.h-drop.on { display: block; }
.h-di { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.h-di:hover { background: var(--g100); }
.h-di-sym  { width: 80px; font-family: 'JetBrains Mono',monospace; font-size: 12px; font-weight: 700; color: var(--g900); flex-shrink: 0; }
.h-di-name { flex: 1; font-size: 11px; color: var(--g500); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.h-di-sec  { font-size: 9px; background: var(--g100); color: var(--g500); padding: 2px 6px; border-radius: 4px; flex-shrink: 0; font-family: 'JetBrains Mono',monospace; }
.h-idx { flex: 1; display: flex; align-items: center; gap: 4px; padding: 0 10px; overflow: hidden; }
.h-chip { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 7px; background: var(--g100); border: var(--bd); flex-shrink: 0; }
.h-chip-nm { font-size: 9px; font-weight: 700; color: var(--g500); white-space: nowrap; }
.h-chip-vl { font-family: 'JetBrains Mono',monospace; font-size: 12px; font-weight: 700; color: var(--g900); white-space: nowrap; }
.h-chip-ch { font-family: 'JetBrains Mono',monospace; font-size: 10px; font-weight: 700; white-space: nowrap; }
.up { color: var(--bull); } .dn { color: var(--bear); }
.h-right { display: flex; align-items: center; gap: 6px; padding: 0 14px; border-left: var(--bd); height: 100%; flex-shrink: 0; }
.h-paper { display: flex; align-items: center; gap: 5px; padding: 5px 10px; background: var(--brandl); border: 1px solid var(--brande); border-radius: 7px; font-size: 10px; font-weight: 800; color: var(--brand); font-family: 'JetBrains Mono',monospace; white-space: nowrap; }
.h-dot { width: 6px; height: 6px; background: var(--brand); border-radius: 50%; animation: blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
.h-btn { width: 32px; height: 32px; border-radius: 8px; background: var(--g100); border: var(--bd); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; color: var(--g500); transition: .12s; }
.h-btn:hover { background: var(--g200); color: var(--g700); }

/* =====================================================
   BODY ROW — flex row, fills remaining height
   LEFT: Watchlist (fixed 240px)
   CENTER: Chart column (flex: 1)
   RIGHT: Order panel (fixed 280px)
===================================================== */
#trp-body {
  flex: 1; display: flex; flex-direction: row;
  overflow: hidden; min-height: 0;
}

/* =====================================================
   WATCHLIST — LEFT COLUMN
===================================================== */
#trp-wl {
  width: var(--wl); flex-shrink: 0;
  background: var(--w); border-right: var(--bd);
  display: flex; flex-direction: column; overflow: hidden;
}
.wl-top { padding: 10px 12px 8px; flex-shrink: 0; }
.wl-tr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wl-title { font-size: 12px; font-weight: 700; color: var(--g700); }
.wl-plus { width: 24px; height: 24px; border-radius: 5px; background: var(--g100); border: var(--bd); cursor: pointer; font-size: 16px; color: var(--g500); display: flex; align-items: center; justify-content: center; transition: .12s; }
.wl-plus:hover { background: var(--brandl); border-color: var(--brande); color: var(--brand); }
.wl-sf { display: flex; align-items: center; gap: 6px; height: 30px; background: var(--g100); border: var(--bd); border-radius: 6px; padding: 0 9px; }
.wl-sf:focus-within { background: var(--w); border-color: var(--brand); }
.wl-sico { font-size: 11px; color: var(--g400); }
.wl-sin { flex: 1; background: none; border: none; font-size: 11px; color: var(--g900); }
.wl-sin::placeholder { color: var(--g400); }
.wl-tabs { display: flex; padding: 0 12px; border-bottom: var(--bd); flex-shrink: 0; }
.wl-tab { padding: 6px 9px; font-size: 10px; font-weight: 700; color: var(--g400); cursor: pointer; border-bottom: 2px solid transparent; position: relative; bottom: -1px; white-space: nowrap; transition: .12s; }
.wl-tab.on { color: var(--brand); border-bottom-color: var(--brand); }
.wl-cols { display: flex; justify-content: space-between; padding: 4px 12px; background: var(--g50); border-bottom: var(--bd); flex-shrink: 0; }
.wl-cl { font-size: 9px; font-weight: 700; color: var(--g400); text-transform: uppercase; letter-spacing: .4px; }
/* Items */
.wl-list { flex: 1; overflow-y: auto; }
.wl-row { display: flex; align-items: center; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--g50); transition: background .1s; gap: 7px; position: relative; }
.wl-row:hover { background: var(--g50); }
.wl-row.active { background: var(--brandl); border-left: 3px solid var(--brand); padding-left: 9px; }
.wl-row:hover .wl-acts { opacity: 1; }
.wl-acts { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; opacity: 0; transition: .12s; }
.wl-act { padding: 2px 5px; border-radius: 3px; font-size: 9px; font-weight: 800; cursor: pointer; border: none; font-family: 'JetBrains Mono',monospace; }
.wl-act.b { background: var(--bulle); color: var(--bull); }
.wl-act.s { background: var(--beare); color: var(--bear); }
.wl-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.wl-info { flex: 1; min-width: 0; }
.wl-sym { font-family: 'JetBrains Mono',monospace; font-size: 12px; font-weight: 800; color: var(--g900); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wl-nm  { font-size: 10px; color: var(--g400); margin-top: 1px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wl-px { text-align: right; flex-shrink: 0; min-width: 68px; }
.wl-ltp { font-family: 'JetBrains Mono',monospace; font-size: 12px; font-weight: 700; }
.wl-pct { font-family: 'JetBrains Mono',monospace; font-size: 10px; font-weight: 600; margin-top: 1px; }
.wl-foot { padding: 9px 12px; border-top: var(--bd); flex-shrink: 0; background: var(--g50); }
.wl-loadbtn { width: 100%; height: 34px; background: var(--brand); color: #fff; border: none; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 6px rgba(249,115,22,.25); display: flex; align-items: center; justify-content: center; gap: 6px; transition: .12s; }
.wl-loadbtn:hover { opacity: .9; } .wl-loadbtn:active { transform: scale(.98); }

/* =====================================================
   CENTER COLUMN — flex column, chart everything
===================================================== */
#trp-center {
  flex: 1; min-width: 0;  /* CRITICAL — must have min-width:0 */
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--g100);
}

/* Symbol bar */
#trp-sb {
  flex-shrink: 0; height: 58px; background: var(--w); border-bottom: var(--bd);
  display: flex; align-items: center; padding: 0 14px; gap: 0;
  overflow-x: auto; scrollbar-width: none;
}
#trp-sb::-webkit-scrollbar { display: none; }
.sb-ng { flex-shrink: 0; margin-right: 14px; }
.sb-sym { font-family: 'JetBrains Mono',monospace; font-size: 14px; font-weight: 800; color: var(--g900); }
.sb-xch { font-size: 10px; color: var(--g400); margin-top: 2px; }
.sb-pg { flex-shrink: 0; margin-right: 14px; }
.sb-ltp { font-family: 'JetBrains Mono',monospace; font-size: 22px; font-weight: 800; line-height: 1; }
.sb-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 5px; font-family: 'JetBrains Mono',monospace; font-size: 11px; font-weight: 700; margin-top: 3px; }
.pill-up { background: var(--bulle); color: var(--bull); }
.pill-dn { background: var(--beare); color: var(--bear); }
.sb-sep { width: 1px; height: 28px; background: var(--g200); margin: 0 12px; flex-shrink: 0; }
.sb-st { flex-shrink: 0; margin-right: 12px; }
.sb-sl { font-size: 9px; font-weight: 700; color: var(--g400); text-transform: uppercase; letter-spacing: .4px; }
.sb-sv { font-family: 'JetBrains Mono',monospace; font-size: 12px; font-weight: 700; color: var(--g900); margin-top: 2px; }
.sb-badge { margin-left: auto; flex-shrink: 0; padding: 4px 9px; border-radius: 5px; font-size: 9px; font-weight: 800; font-family: 'JetBrains Mono',monospace; letter-spacing: .3px; }
.bd-none { background: var(--g100); color: var(--g400); border: var(--bd); }
.bd-real { background: var(--bulle); color: var(--bull); border: 1px solid var(--bulll); }
.bd-hist { background: var(--golde); color: var(--gold); border: 1px solid #fde68a; }
.bd-sim  { background: var(--g100); color: var(--g500); border: var(--bd); }
.bd-live { background: var(--beare); color: var(--bear); border: 1px solid var(--bearl); animation: blink 1.5s infinite; }

/* Toolbar */
#trp-tb {
  flex-shrink: 0; height: 42px; background: var(--w); border-bottom: var(--bd);
  display: flex; align-items: center; padding: 0 12px; gap: 5px;
  overflow-x: auto; scrollbar-width: none;
}
#trp-tb::-webkit-scrollbar { display: none; }
.tb-date { height: 28px; padding: 0 9px; background: var(--g100); border: var(--bd); border-radius: 6px; font-family: 'JetBrains Mono',monospace; font-size: 11px; color: var(--g700); cursor: pointer; flex-shrink: 0; transition: .12s; }
.tb-date:focus { border-color: var(--brand); background: var(--w); }
.tb-load { height: 28px; padding: 0 13px; background: var(--brand); color: #fff; border: none; border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer; flex-shrink: 0; white-space: nowrap; box-shadow: 0 2px 4px rgba(249,115,22,.25); transition: .12s; }
.tb-load:hover { opacity: .9; } .tb-load:active { transform: scale(.98); }
.tb-sep { width: 1px; height: 20px; background: var(--g200); flex-shrink: 0; margin: 0 2px; }
.tb-tfg { display: flex; background: var(--g100); border: var(--bd); border-radius: 6px; padding: 2px; gap: 1px; flex-shrink: 0; }
.tb-tf { padding: 3px 9px; border-radius: 4px; background: none; border: none; color: var(--g500); font-size: 11px; font-family: 'JetBrains Mono',monospace; font-weight: 600; cursor: pointer; transition: .12s; }
.tb-tf:hover { color: var(--g800); }
.tb-tf.on { background: var(--w); color: var(--g900); font-weight: 700; box-shadow: 0 1px 3px rgba(15,23,42,.07); }
.tb-ind { height: 28px; padding: 0 9px; border: var(--bd); border-radius: 6px; background: var(--g100); color: var(--g500); font-size: 10px; font-family: 'JetBrains Mono',monospace; font-weight: 600; cursor: pointer; transition: .12s; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.tb-ind:hover { color: var(--g700); background: var(--g200); }
.tb-ind.on { background: var(--w); border-color: var(--brand); color: var(--brand); }
.tb-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Replay bar */
#trp-rp {
  flex-shrink: 0; height: 40px; background: var(--w); border-bottom: var(--bd);
  display: flex; align-items: center; padding: 0 10px; gap: 5px;
}
.rp-btn { width: 26px; height: 26px; border-radius: 5px; background: var(--g100); border: var(--bd); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; color: var(--g600); transition: .12s; flex-shrink: 0; }
.rp-btn:hover { background: var(--g200); color: var(--g900); }
.rp-play { height: 26px; min-width: 76px; padding: 0 10px; border-radius: 5px; border: none; font-family: 'JetBrains Mono',monospace; font-size: 10px; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 5px; justify-content: center; flex-shrink: 0; transition: .12s; }
.rp-play.idle    { background: var(--bulle); color: var(--bull); border: 1px solid var(--bulll); }
.rp-play.running { background: var(--beare); color: var(--bear); border: 1px solid var(--bearl); }
.rp-spds { display: flex; gap: 1px; background: var(--g100); border: var(--bd); border-radius: 5px; padding: 2px; flex-shrink: 0; }
.rp-spd  { padding: 2px 6px; border-radius: 3px; background: none; border: none; color: var(--g400); font-family: 'JetBrains Mono',monospace; font-size: 10px; font-weight: 700; cursor: pointer; transition: .12s; }
.rp-spd.on { background: var(--g900); color: #fff; }
.rp-sl { flex: 1; accent-color: var(--brand); cursor: pointer; height: 3px; min-width: 0; }
.rp-tm { font-family: 'JetBrains Mono',monospace; font-size: 10px; color: var(--g500); white-space: nowrap; flex-shrink: 0; }
.rp-inf { font-family: 'JetBrains Mono',monospace; font-size: 9px; color: var(--g400); white-space: nowrap; flex-shrink: 0; margin-left: auto; }

/* Canvas area */
#trp-cw {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  background: var(--w); margin: 6px; border-radius: 8px; border: var(--bd);
}
#trp-cv { width: 100%; height: 100%; display: block; cursor: crosshair; }

/* Splash */
#trp-splash {
  position: absolute; inset: 0; background: var(--w); z-index: 5;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; padding: 24px; text-align: center;
}
.sp-ico  { font-size: 44px; line-height: 1; }
.sp-ttl  { font-size: 20px; font-weight: 800; color: var(--g900); letter-spacing: -.4px; }
.sp-sub  { font-size: 12px; color: var(--g500); max-width: 340px; line-height: 1.7; }
.sp-pills{ display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.sp-pill { display: flex; align-items: center; gap: 5px; padding: 6px 12px; background: var(--g100); border: var(--bd); border-radius: 7px; font-size: 11px; color: var(--g700); }
.sp-steps{ background: var(--g50); border: var(--bd); border-radius: 10px; padding: 12px 16px; max-width: 320px; width: 100%; text-align: left; }
.sp-step { display: flex; gap: 9px; padding: 4px 0; font-size: 12px; color: var(--g600); align-items: flex-start; }
.sp-n    { width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.sp-cta  { height: 40px; padding: 0 24px; background: var(--brand); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgba(249,115,22,.3); }
.sp-cta:hover { opacity: .9; }

/* OHLC tooltip */
#trp-tt { position: absolute; top: 10px; left: 12px; background: var(--w); border: var(--bd); border-radius: 8px; padding: 8px 12px; font-family: 'JetBrains Mono',monospace; font-size: 10px; pointer-events: none; display: none; z-index: 10; box-shadow: 0 4px 12px rgba(15,23,42,.1); line-height: 2; }
.tt-r { display: flex; justify-content: space-between; gap: 14px; }
.tt-l { color: var(--g400); font-size: 9px; font-weight: 600; text-transform: uppercase; }
.tt-v { font-weight: 700; color: var(--g900); } .tt-g { color: var(--bull); } .tt-d { color: var(--bear); }

/* Portfolio strip */
#trp-strip {
  flex-shrink: 0; height: 48px; background: var(--w); border-top: var(--bd);
  display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none;
}
#trp-strip::-webkit-scrollbar { display: none; }
.si { padding: 0 13px; display: flex; flex-direction: column; justify-content: center; border-right: var(--bd); flex-shrink: 0; }
.si-l { font-size: 9px; font-weight: 700; color: var(--g400); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.si-v { font-family: 'JetBrains Mono',monospace; font-size: 12px; font-weight: 800; }

/* Bottom panels */
#trp-bot {
  flex-shrink: 0; height: 190px; background: var(--w);
  display: flex; flex-direction: column; border-top: var(--bd);
}
.bt-tabs { display: flex; padding: 0 14px; border-bottom: var(--bd); flex-shrink: 0; }
.bt-tab { padding: 7px 13px; font-size: 11px; font-weight: 700; color: var(--g400); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; position: relative; bottom: -1px; transition: .12s; }
.bt-tab.on { color: var(--brand); border-bottom-color: var(--brand); }
.bt-pane { display: none; flex: 1; overflow: auto; }
.bt-pane.on { display: block; }

/* Tables */
.trp-t { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono',monospace; font-size: 11px; }
.trp-t thead th { padding: 7px 13px; color: var(--g400); font-weight: 700; text-align: left; border-bottom: var(--bd); position: sticky; top: 0; background: var(--w); z-index: 1; white-space: nowrap; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; }
.trp-t tbody td { padding: 8px 13px; border-bottom: 1px solid var(--g50); color: var(--g900); white-space: nowrap; }
.trp-t tbody tr:hover td { background: var(--g50); }
.trp-t tbody tr:last-child td { border-bottom: none; }
.tr { text-align: right; }
.empty { text-align: center; padding: 22px; color: var(--g400); font-size: 12px; }
.badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px; font-size: 9px; font-weight: 800; }
.bg-buy  { background: var(--bulle); color: var(--bull); }
.bg-sell { background: var(--beare); color: var(--bear); }
.bg-long { background: var(--bluel); color: var(--blue); }
.bg-short{ background: var(--purpe); color: var(--purp); }
.bg-mkt  { background: var(--g100); color: var(--g500); }
/* Stats */
.sg { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); }
.sc { padding: 10px 13px; border-right: var(--bd); border-bottom: var(--bd); }
.sc-l { font-size: 9px; color: var(--g400); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.sc-v { font-family: 'JetBrains Mono',monospace; font-size: 13px; font-weight: 800; }

/* =====================================================
   ORDER PANEL — RIGHT COLUMN
===================================================== */
#trp-op {
  width: var(--op); flex-shrink: 0;
  background: var(--w); border-left: var(--bd);
  display: flex; flex-direction: column; overflow: hidden;
}
/* BUY/SELL */
.op-bs { display: grid; grid-template-columns: 1fr 1fr; background: var(--g100); border: var(--bd); border-radius: 9px; padding: 3px; margin: 12px 13px 10px; flex-shrink: 0; }
.op-bsb { padding: 9px 0; text-align: center; border-radius: 6px; font-size: 13px; font-weight: 800; cursor: pointer; transition: .15s; color: var(--g400); border: none; background: none; }
.op-bsb.buy.on  { background: var(--bull); color: #fff; box-shadow: 0 2px 8px rgba(22,163,74,.25); }
.op-bsb.sell.on { background: var(--bear); color: #fff; box-shadow: 0 2px 8px rgba(220,38,38,.25); }
.op-bsb:not(.on):hover { color: var(--g700); }
/* OT tabs */
.op-ott { display: flex; background: var(--g100); border: var(--bd); border-radius: 7px; padding: 2px; gap: 1px; margin: 0 13px 10px; flex-shrink: 0; }
.op-otb { flex: 1; padding: 5px 0; text-align: center; border-radius: 5px; background: none; border: none; color: var(--g400); font-size: 10px; font-weight: 700; cursor: pointer; transition: .12s; font-family: 'JetBrains Mono',monospace; }
.op-otb.on { background: var(--w); color: var(--g900); box-shadow: 0 1px 2px rgba(15,23,42,.07); }
/* Body */
.op-body { flex: 1; overflow-y: auto; padding: 0 13px 10px; }
.op-mrow { display: flex; justify-content: space-between; align-items: center; background: var(--g50); border: var(--bd); border-radius: 8px; padding: 9px 11px; margin-bottom: 10px; }
.op-ml { font-size: 9px; font-weight: 700; color: var(--g400); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.op-mpx { font-family: 'JetBrains Mono',monospace; font-size: 15px; font-weight: 800; color: var(--g900); }
/* Fields */
.op-f { margin-bottom: 9px; }
.op-fl { display: block; font-size: 10px; font-weight: 700; color: var(--g500); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.op-in { width: 100%; height: 36px; background: var(--g50); border: var(--bd); border-radius: 6px; padding: 0 10px; font-family: 'JetBrains Mono',monospace; font-size: 13px; color: var(--g900); transition: .15s; }
.op-in:focus { background: var(--w); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(249,115,22,.1); }
/* Qty stepper */
.op-qs { display: flex; gap: 3px; }
.op-qb { width: 36px; height: 36px; background: var(--g100); border: var(--bd); border-radius: 6px; color: var(--g600); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 300; transition: .12s; flex-shrink: 0; }
.op-qb:hover { background: var(--g200); color: var(--g900); }
.op-qi { flex: 1; min-width: 0; text-align: center; background: var(--g50); border: var(--bd); border-radius: 6px; font-family: 'JetBrains Mono',monospace; font-size: 17px; font-weight: 800; height: 36px; color: var(--g900); }
.op-qi:focus { background: var(--w); border-color: var(--brand); }
/* Presets */
.op-pre { display: grid; grid-template-columns: repeat(6,1fr); gap: 3px; margin-bottom: 10px; }
.op-pr  { padding: 4px 0; background: var(--g100); border: var(--bd); border-radius: 5px; color: var(--g500); font-size: 10px; font-family: 'JetBrains Mono',monospace; font-weight: 700; cursor: pointer; text-align: center; transition: .12s; }
.op-pr:hover { background: var(--g900); color: #fff; border-color: var(--g900); }
/* Summary */
.op-sum { background: var(--g50); border: var(--bd); border-radius: 8px; padding: 9px 11px; margin-bottom: 10px; }
.op-sr { display: flex; justify-content: space-between; padding: 2px 0; }
.op-sl { font-size: 10px; color: var(--g400); }
.op-sv { font-family: 'JetBrains Mono',monospace; font-size: 11px; font-weight: 700; color: var(--g800); }
.op-sdiv { height: 1px; background: var(--g200); margin: 5px 0; }
/* AI */
.op-ai { background: var(--g50); border: var(--bd); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.op-aih { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; border-bottom: var(--bd); background: var(--w); }
.op-aitl { font-size: 10px; font-weight: 700; color: var(--g600); text-transform: uppercase; letter-spacing: .3px; }
.op-aiml { background: var(--g100); border: var(--bd); border-radius: 5px; color: var(--g600); font-size: 9px; padding: 3px 7px; cursor: pointer; font-family: 'JetBrains Mono',monospace; font-weight: 600; }
.op-aiml:hover { border-color: var(--brand); color: var(--brand); }
.op-aibs { display: grid; grid-template-columns: 1fr 1fr; background: var(--bd); gap: 1px; }
.op-aib  { padding: 7px 0; background: var(--w); border: none; cursor: pointer; font-size: 10px; font-weight: 700; color: var(--g500); font-family: 'JetBrains Mono',monospace; transition: .12s; text-align: center; }
.op-aib:hover { background: var(--g100); color: var(--g900); }
.op-aio  { padding: 9px 11px; font-family: 'JetBrains Mono',monospace; font-size: 10px; line-height: 1.8; color: var(--g700); max-height: 180px; overflow-y: auto; white-space: pre-wrap; background: var(--w); }
.op-aie  { color: var(--g400); font-style: italic; }
/* LB */
.op-ar { display: flex; gap: 6px; margin-bottom: 10px; }
.op-ab { flex: 1; height: 30px; background: var(--g100); border: var(--bd); border-radius: 6px; color: var(--g600); font-size: 10px; font-weight: 700; cursor: pointer; font-family: 'JetBrains Mono',monospace; transition: .12s; }
.op-ab:hover { background: var(--g200); color: var(--g900); }
.op-lbc { background: var(--g50); border: var(--bd); border-radius: 8px; overflow: hidden; margin-bottom: 10px; display: none; }
.op-lbh { padding: 7px 11px; background: var(--w); border-bottom: var(--bd); display: flex; justify-content: space-between; }
.op-lbt { font-size: 10px; font-weight: 700; color: var(--g600); text-transform: uppercase; }
.op-lbx { background: none; border: none; color: var(--g400); cursor: pointer; font-size: 14px; }
.op-lbd { max-height: 150px; overflow-y: auto; }
.op-lbrow { display: flex; gap: 8px; padding: 7px 11px; border-bottom: 1px solid var(--g100); font-family: 'JetBrains Mono',monospace; font-size: 10px; align-items: center; }
.op-lbrk { width: 18px; color: var(--g400); font-weight: 700; }
.op-lbnm { flex: 1; font-weight: 600; color: var(--g800); }
.op-lbpc { font-weight: 800; }
/* Footer */
.op-foot { padding: 10px 13px 12px; border-top: var(--bd); flex-shrink: 0; }
.op-place { width: 100%; height: 44px; border: none; border-radius: 8px; font-size: 14px; font-weight: 800; cursor: pointer; transition: .15s; letter-spacing: .4px; }
.op-place.buy  { background: linear-gradient(135deg,#16a34a,#15803d); color: #fff; box-shadow: 0 3px 10px rgba(22,163,74,.28); }
.op-place.sell { background: linear-gradient(135deg,#dc2626,#b91c1c); color: #fff; box-shadow: 0 3px 10px rgba(220,38,38,.28); }
.op-place:hover { opacity: .92; transform: translateY(-1px); }
.op-place:active { transform: scale(.99); }
.op-sq { width: 100%; height: 32px; margin-top: 7px; background: var(--golde); color: var(--gold); border: 1px solid #fde68a; border-radius: 7px; font-size: 11px; font-weight: 700; cursor: pointer; display: none; }
.op-sq:hover { background: #fde68a; }