/* Trading Bot v2 (per-user paper bots + THE ORBIT animation), 2026-09-27.
   Uses the site theme variables only (see :root in index.html); fallbacks are for safety. */
#panel-trading #tb-guest, #panel-trading #tb-main { display: none !important; }
.tb2 {
  --tb2-accent: var(--accent, #22d3ee); --tb2-accent2: var(--accent-2, #14b8a6); --tb2-accent3: var(--accent-3, #facc15);
  --tb2-ok: var(--ok, #34d399); --tb2-bad: var(--danger, #f87171); --tb2-ink: var(--ink, #e6f6f8); --tb2-muted: var(--muted, #8aa3a8);
  --tb2-line: var(--line, rgba(127,127,127,.25)); --tb2-surface: var(--surface, #0f1a1d); --tb2-surface2: var(--surface-2, #132226);
  --tb2-r: var(--radius-md, 14px); --tb2-mono: "IBM Plex Mono", ui-monospace, monospace;
  display: flex; flex-direction: column; gap: 16px; padding: 18px 28px 28px; color: var(--tb2-ink);
}
.tb2 * { box-sizing: border-box; }
.tb2 .tb2-card { border: 1px solid var(--tb2-line); border-radius: var(--tb2-r); background: var(--tb2-surface); padding: 14px 16px; min-width: 0; }
.tb2 h3 { font-family: var(--tb2-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tb2-muted); margin: 0 0 10px; font-weight: 600; }
.tb2 .tb2-pos { color: var(--tb2-ok) !important; } .tb2 .tb2-neg { color: var(--tb2-bad) !important; }
.tb2 .tb2-mono { font-family: var(--tb2-mono); }

/* hero */
.tb2-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
.tb2-hero-main { position: relative; overflow: hidden; border: 1px solid var(--tb2-line); border-radius: var(--tb2-r); padding: 16px 18px;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--tb2-accent) 16%, transparent), transparent 60%), var(--tb2-surface); }
.tb2-hero-main::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--tb2-accent) 14%, transparent), transparent); animation: tb2Sheen 5.5s ease-in-out infinite; }
@keyframes tb2Sheen { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.tb2-kicker { display: flex; align-items: center; gap: 8px; font-family: var(--tb2-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tb2-muted); }
.tb2-pip { width: 9px; height: 9px; border-radius: 50%; background: var(--tb2-ok); box-shadow: 0 0 10px var(--tb2-ok); position: relative; flex: none; }
.tb2-pip::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--tb2-ok); animation: tb2Ping 1.6s ease-out infinite; }
.tb2-pip.off { background: var(--tb2-muted); box-shadow: none; } .tb2-pip.off::after { display: none; }
@keyframes tb2Ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.3); opacity: 0; } }
.tb2-eq { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.tb2-eq-v { font-family: "Baloo 2", "IBM Plex Sans", sans-serif; font-weight: 800; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.05; letter-spacing: -.01em;
  text-shadow: 0 0 22px color-mix(in srgb, var(--tb2-accent) 35%, transparent); font-variant-numeric: tabular-nums; }
.tb2-eq .u { font-family: var(--tb2-mono); color: var(--tb2-muted); font-size: 14px; }
.tb2-pnl { font-family: var(--tb2-mono); font-size: 14px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tb2-flash-up { animation: tb2FlashUp .9s ease; } .tb2-flash-down { animation: tb2FlashDown .9s ease; }
@keyframes tb2FlashUp { 30% { color: var(--tb2-ok); transform: scale(1.04); } }
@keyframes tb2FlashDown { 30% { color: var(--tb2-bad); transform: scale(1.04); } }
.tb2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tb2-chip { font-family: var(--tb2-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--tb2-line); color: var(--tb2-muted); background: var(--tb2-surface2); white-space: nowrap; }
.tb2-chip.run { color: var(--tb2-ok); border-color: color-mix(in srgb, var(--tb2-ok) 50%, transparent); }
.tb2-chip.pause { color: var(--tb2-accent3); border-color: color-mix(in srgb, var(--tb2-accent3) 50%, transparent); }
.tb2-chip.demo { color: var(--tb2-accent); border-color: color-mix(in srgb, var(--tb2-accent) 50%, transparent); }
.tb2-chip.danger { color: var(--tb2-bad); border-color: color-mix(in srgb, var(--tb2-bad) 50%, transparent); }
.tb2-mode { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tb2-mode p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--tb2-muted); }
.tb2-badge { font-family: var(--tb2-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px;
  color: var(--tb2-accent); background: color-mix(in srgb, var(--tb2-accent) 14%, transparent); }

/* THE ORBIT */
.tb2-orbit { position: relative; overflow: hidden; border: 1px solid var(--tb2-line); border-radius: var(--tb2-r); padding: 12px 14px 10px;
  background: radial-gradient(90% 120% at 50% 55%, color-mix(in srgb, var(--tb2-accent) 12%, transparent), transparent 70%), var(--tb2-surface2); }
.tb2-orbit-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--tb2-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tb2-muted); }
.tb2-orbit-h b { color: var(--tb2-ink); font-weight: 600; }
.tb2-orbit-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: 6px; }
.tb2-stage { font-family: "Baloo 2", "IBM Plex Sans", sans-serif; font-weight: 800; font-size: 17px; letter-spacing: .04em; color: var(--tb2-accent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--tb2-accent) 45%, transparent); min-height: 24px; }
.tb2-stage-sub { font-family: var(--tb2-mono); font-size: 11px; color: var(--tb2-muted); min-height: 15px; }
.tb2-unreal { text-align: right; font-family: var(--tb2-mono); }
.tb2-unreal .l { font-size: 10px; letter-spacing: .1em; color: var(--tb2-muted); text-transform: uppercase; }
.tb2-unreal .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tb2-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 330; margin-top: 4px; }
.tb2-ticker { display: flex; gap: 18px; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  font-family: var(--tb2-mono); font-size: 11.5px; color: var(--tb2-muted); border-top: 1px dashed var(--tb2-line); padding-top: 8px; margin-top: 4px; }
.tb2-ticker-track { display: inline-flex; gap: 18px; animation: tb2Tick 38s linear infinite; }
.tb2-ticker span b { color: var(--tb2-ink); }
@keyframes tb2Tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* controls */
.tb2-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; align-items: start; }
.tb2-run { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 170px; }
.tb2-btn { font: 600 13px/1 "IBM Plex Sans", sans-serif; border-radius: 12px; padding: 11px 14px; cursor: pointer; border: 1px solid var(--tb2-line);
  background: var(--tb2-surface2); color: var(--tb2-ink); transition: transform .15s ease, box-shadow .2s ease, border-color .2s; }
.tb2-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--tb2-accent); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--tb2-accent) 60%, transparent); }
.tb2-btn:disabled { opacity: .55; cursor: default; }
.tb2-btn.primary { background: var(--tb2-accent); color: var(--accent-ink, #041316); border-color: transparent; }
.tb2-btn.go { background: var(--tb2-ok); color: #04130c; border-color: transparent; font-size: 14px; padding: 13px 16px; }
.tb2-btn.stop { background: transparent; color: var(--tb2-accent3); border-color: color-mix(in srgb, var(--tb2-accent3) 60%, transparent); font-size: 14px; padding: 13px 16px; }
.tb2-btn.warn { color: var(--tb2-bad); border-color: color-mix(in srgb, var(--tb2-bad) 55%, transparent); background: transparent; }
.tb2-btn.warn.armed { background: var(--tb2-bad); color: #fff; }
.tb2-seg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tb2-seg button { font: 700 11.5px/1.2 var(--tb2-mono); letter-spacing: .04em; padding: 10px 6px; border-radius: 10px; border: 1px solid var(--tb2-line);
  background: var(--tb2-surface2); color: var(--tb2-muted); cursor: pointer; transition: all .18s ease; }
.tb2-seg button small { display: block; font-weight: 500; font-size: 9.5px; opacity: .8; margin-top: 3px; letter-spacing: 0; }
.tb2-seg button.on { color: var(--tb2-ink); border-color: var(--tb2-accent); background: color-mix(in srgb, var(--tb2-accent) 18%, var(--tb2-surface2));
  box-shadow: 0 0 0 1px var(--tb2-accent) inset, 0 0 18px -6px var(--tb2-accent); }
.tb2-seg button.danger small { color: var(--tb2-bad); }
.tb2-seg button:disabled { cursor: default; }
.tb2-desc { font-size: 12px; color: var(--tb2-muted); margin: 8px 0 0; line-height: 1.5; min-height: 36px; }
.tb2-adv { margin-top: 10px; }
.tb2-adv summary { cursor: pointer; font-family: var(--tb2-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tb2-muted); }
.tb2-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.tb2-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--tb2-muted); }
.tb2-form input, .tb2-reset input { font: 500 13px var(--tb2-mono); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--tb2-line); background: var(--tb2-surface2); color: var(--tb2-ink); width: 100%; min-width: 0; }
.tb2-form input:focus, .tb2-reset input:focus { outline: 2px solid color-mix(in srgb, var(--tb2-accent) 60%, transparent); outline-offset: 1px; }
.tb2-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.tb2-reset { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.tb2-reset label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--tb2-muted); width: 150px; }
.tb2-note { font-size: 11.5px; color: var(--tb2-muted); margin: 6px 0 0; }
.tb2-status { font-size: 12.5px; margin: 0; min-height: 17px; }
.tb2-status.err { color: var(--tb2-bad); } .tb2-status.ok { color: var(--tb2-ok); }
.tb2-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tb2-accent) 14%, transparent), transparent), var(--tb2-surface); }
.tb2-cta p { margin: 0; font-size: 13.5px; line-height: 1.5; } .tb2-cta p b { color: var(--tb2-accent); }

/* stats + chart */
.tb2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tb2-stat { border: 1px solid var(--tb2-line); border-radius: var(--tb2-r); background: var(--tb2-surface2); padding: 11px 13px; transition: transform .2s ease, border-color .2s; }
.tb2-stat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tb2-accent) 55%, transparent); }
.tb2-stat .k { font-family: var(--tb2-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tb2-muted); }
.tb2-stat .v { font-family: "Baloo 2", "IBM Plex Sans", sans-serif; font-size: 21px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tb2-stat .s { font-size: 11.5px; color: var(--tb2-muted); }
.tb2-chart svg { width: 100%; height: 150px; display: block; }
.tb2-chart .cap { display: flex; justify-content: space-between; gap: 10px; font-family: var(--tb2-mono); font-size: 10.5px; color: var(--tb2-muted); margin-bottom: 4px; }
.tb2-chart path.line { stroke-dasharray: var(--len, 0); stroke-dashoffset: 0; }
.tb2-chart path.line.draw { animation: tb2Draw 1.1s ease-out; }
@keyframes tb2Draw { from { stroke-dashoffset: var(--len, 0); } to { stroke-dashoffset: 0; } }
.tb2-empty { text-align: center; color: var(--tb2-muted); font-size: 12.5px; padding: 22px 8px; }

/* tables + log */
.tb2-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
.tb2-tw { overflow-x: auto; }
.tb2 table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tb2 th { text-align: left; font-family: var(--tb2-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--tb2-muted); padding: 6px 8px; white-space: nowrap; border-bottom: 1px solid var(--tb2-line); }
.tb2 td { padding: 7px 8px; border-bottom: 1px solid color-mix(in srgb, var(--tb2-line) 60%, transparent); white-space: nowrap; font-family: var(--tb2-mono); font-variant-numeric: tabular-nums; }
.tb2 td.sym { font-family: "IBM Plex Sans", sans-serif; font-weight: 700; }
.tb2 tr.new td { animation: tb2Row 1.4s ease; }
@keyframes tb2Row { 0% { background: color-mix(in srgb, var(--tb2-accent) 26%, transparent); } 100% { background: transparent; } }
.tb2-bar { height: 4px; border-radius: 4px; background: var(--tb2-line); overflow: hidden; margin-top: 4px; width: 90px; }
.tb2-bar i { display: block; height: 100%; background: var(--tb2-accent); }
.tb2-log { max-height: 330px; overflow-y: auto; display: flex; flex-direction: column; }
.tb2-log-row { display: grid; grid-template-columns: 52px 62px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 4px; border-bottom: 1px solid color-mix(in srgb, var(--tb2-line) 55%, transparent);
  font-size: 12px; position: relative; }
.tb2-log-row.new { animation: tb2LogIn .45s cubic-bezier(.2,.8,.2,1); }
.tb2-log-row.new::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--tb2-accent) 22%, transparent), transparent 65%); animation: tb2Fade .9s ease-out forwards; }
@keyframes tb2LogIn { from { opacity: 0; transform: translateX(-12px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes tb2Fade { to { opacity: 0; } }
.tb2-log-row .t { font-family: var(--tb2-mono); color: var(--tb2-muted); font-size: 10.5px; }
.tb2-log-row .tag { font-family: var(--tb2-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-align: center; border-radius: 6px; padding: 2px 4px; border: 1px solid currentColor; }
.tb2-log-row .m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb2-log-row.k-entry .tag { color: var(--tb2-accent); } .tb2-log-row.k-tp .tag { color: var(--tb2-ok); } .tb2-log-row.k-sl .tag { color: var(--tb2-bad); }
.tb2-log-row.k-partial .tag { color: var(--tb2-ok); } .tb2-log-row.k-scan .tag { color: var(--tb2-muted); } .tb2-log-row.k-reject .tag { color: var(--tb2-accent3); }
.tb2-log-row.k-pass .tag { color: var(--tb2-accent2); } .tb2-log-row.k-info .tag { color: var(--tb2-muted); }
.tb2-disclaimer { font-size: 12px; line-height: 1.55; color: var(--tb2-muted); }
.tb2-disclaimer b { color: var(--tb2-ink); }
.tb2-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-family: var(--tb2-mono); font-size: 11px; color: var(--tb2-muted); }

/* position-closed overlay (from the original dashboard) */
.tb2-ov { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.tb2-ov.show { opacity: 1; pointer-events: auto; }
.tb2-ov-card { text-align: center; padding: 22px 34px; border-radius: 20px; border: 1px solid var(--tb2-ok); background: color-mix(in srgb, var(--tb2-surface) 92%, transparent);
  box-shadow: 0 0 60px -10px var(--tb2-ok), 0 30px 60px -30px rgba(0,0,0,.6); transform: scale(.85); transition: transform .35s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
.tb2-ov.show .tb2-ov-card { transform: scale(1); }
.tb2-ov-card.loss { border-color: var(--tb2-bad); box-shadow: 0 0 60px -10px var(--tb2-bad), 0 30px 60px -30px rgba(0,0,0,.6); }
.tb2-ov-card .oh { font-family: var(--tb2-mono); letter-spacing: .22em; font-size: 11.5px; color: var(--tb2-ok); }
.tb2-ov-card.loss .oh, .tb2-ov-card.loss .ox { color: var(--tb2-bad); }
.tb2-ov-card .ox { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 40px; color: var(--tb2-ok); line-height: 1.1; margin-top: 6px; }
.tb2-ov-card .od { font-family: var(--tb2-mono); font-size: 12px; color: var(--tb2-muted); margin-top: 4px; }

@media (max-width: 900px) {
  .tb2 { padding: 14px 14px 20px; }
  .tb2-hero, .tb2-grid { grid-template-columns: 1fr; }
  .tb2-controls { grid-template-columns: 1fr; }
  .tb2-run { flex-direction: row; min-width: 0; } .tb2-run .tb2-btn { flex: 1; }
  .tb2-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb2-canvas { aspect-ratio: 390 / 300; }
  .tb2-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .tb2 *, .tb2 *::before, .tb2 *::after, .tb2-ov, .tb2-ov-card { animation: none !important; transition: none !important; }
  .tb2-ticker-track { animation: none !important; }
}