/* Trade desk: futures ticket in the right panel + positions dock under the chart. Flat Sniper Charts look. */
[data-dtab="trade"], .dpane[data-dpane="trade"] { display: none; }
body[data-desk="trade"] [data-dtab="trade"] { display: inline-flex; }
body[data-desk="trade"] .dpane[data-dpane="trade"]:not([hidden]) { display: block; }
body[data-desk="trade"] #desk { width: 300px; }
.dpane[data-dpane="trade"] { overflow: auto; padding: 10px 12px 16px; }
#tr-ticket { display: flex; flex-direction: column; gap: 10px; font-size: 12px; color: var(--text); }
.tr-acct { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-acct div { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; }
.tr-acct span, .tr-sum span, .tr-f span, .tr-lev span { display: block; color: var(--muted); font-size: 11px; }
.tr-acct b, .tr-sum b { font: 600 13px var(--mono, ui-monospace, Menlo, monospace); font-variant-numeric: tabular-nums; }
.up { color: var(--up, #34d399); } .dn { color: var(--down, #f87171); } .warn { color: var(--amber, #fbbf24); }
.tr-sides, .tr-types { display: grid; gap: 6px; }
.tr-sides { grid-template-columns: 1fr 1fr; } .tr-types { grid-template-columns: repeat(3, 1fr); }
.tr-sides button, .tr-types button, .tr-chips button, .td-act button, .td-tabs button { background: transparent; border: 1px solid var(--line-2); color: var(--muted); border-radius: 7px; font: 600 11.5px var(--sans, system-ui); padding: 7px 8px; cursor: pointer; }
.tr-sides button:hover, .tr-types button:hover, .tr-chips button:hover { background: var(--bg-3); color: var(--text); }
.tr-sides button.long.on { background: rgba(52,211,153,.14); border-color: rgba(52,211,153,.55); color: #34d399; }
.tr-sides button.short.on { background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.55); color: #f87171; }
.tr-types button.on { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.45); color: var(--accent, #34d399); }
.tr-f { display: block; } .tr-f input { width: 100%; box-sizing: border-box; margin-top: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 8px 10px; font: 600 13px var(--mono, ui-monospace, Menlo, monospace); }
.tr-f input:focus { outline: none; border-color: rgba(52,211,153,.5); }
.tr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .tr-chips button { padding: 4px 8px; font-size: 11px; } .tr-chips span { color: var(--faint, #5d6778); font-size: 10.5px; }
.tr-chips#tr-pct button { flex: 1; }
.tr-lev > div:first-child { display: flex; justify-content: space-between; align-items: baseline; } .tr-lev b { color: var(--accent, #34d399); font-size: 14px; }
.tr-lev input { width: 100%; accent-color: #34d399; } .tr-ticks { display: flex; justify-content: space-between; color: var(--faint, #5d6778); font-size: 10px; font-style: normal; } .tr-ticks i { font-style: normal; }
.tr-sum { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.tr-risk { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.tr-go { border: 0; border-radius: 9px; padding: 12px; font: 700 13px var(--sans, system-ui); letter-spacing: .03em; cursor: pointer; }
.tr-go.long { background: #34d399; color: #05150e; } .tr-go.short { background: #f87171; color: #1a0606; } .tr-go:disabled { opacity: .55; cursor: wait; }
.tr-fees { color: var(--faint, #5d6778); font-size: 10.5px; text-align: center; }

#trade-dock { flex: none; height: 224px; display: flex; flex-direction: column; background: var(--bg-2, #0d1017); border-top: 1px solid var(--line); min-height: 0; }
#trade-dock.shut { height: 36px; } #trade-dock.shut .td-body { display: none; }
.td-tabs { display: flex; align-items: center; gap: 2px; padding: 0 8px; min-height: 36px; border-bottom: 1px solid var(--line); }
.td-tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 9px 12px; font-size: 12px; }
.td-tabs button.on { color: var(--text); border-bottom-color: var(--accent, #34d399); background: transparent; }
.td-tabs i { font-style: normal; background: var(--bg-4, #1b2130); color: var(--text); border-radius: 8px; padding: 0 6px; font-size: 10px; margin-left: 4px; } .td-tabs i:empty { display: none; }
.td-sp { flex: 1; }
.tr-strip { display: flex; gap: 16px; align-items: center; color: var(--muted); font-size: 11.5px; padding-right: 10px; white-space: nowrap; overflow: hidden; }
.tr-strip b { font: 600 12px var(--mono, ui-monospace, Menlo, monospace); color: var(--text); } .tr-strip b.up { color: #34d399; } .tr-strip b.dn { color: #f87171; }
.tr-pill { background: rgba(52,211,153,.12); color: #34d399; border: 1px solid rgba(52,211,153,.35); border-radius: 6px; padding: 1px 7px; font-weight: 700; font-size: 10px; }
.td-body { flex: 1; overflow: auto; min-height: 0; }
.td-body table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.td-body th { text-align: left; font: 500 11px var(--sans, system-ui); color: var(--faint, #5d6778); padding: 7px 12px; position: sticky; top: 0; background: var(--bg-2, #0d1017); }
.td-body td { padding: 7px 12px; border-top: 1px solid var(--line); font: 12px var(--mono, ui-monospace, Menlo, monospace); white-space: nowrap; }
.td-body td small { display: block; color: var(--faint, #5d6778); font-size: 10.5px; }
.td-empty { text-align: center; color: var(--muted); padding: 22px !important; font-family: var(--sans, system-ui) !important; }
.td-sym, .td-link { background: none; border: 0; color: var(--text); font: 700 12px var(--sans, system-ui); cursor: pointer; padding: 0; } .td-link { font: 11.5px var(--mono, ui-monospace, Menlo, monospace); color: var(--muted); text-decoration: underline dotted; }
.td-side { font: 700 10px var(--sans, system-ui); letter-spacing: .04em; }
.td-act { text-align: right; } .td-act button { padding: 3px 8px; margin-left: 4px; } .td-act button.x:hover { color: #f87171; border-color: rgba(248,113,113,.5); }
@media (max-width: 720px) { #trade-dock { height: 190px; } .tr-strip { display: none; } }
.tr-f[hidden] { display: none; }

/* Panel tabs scroll sideways when they do not all fit, and every tab sits on the same line. */
#desk-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; align-items: center; }
#desk-tabs::-webkit-scrollbar { display: none; }
#desk-tabs button[data-dtab] { flex: 1 0 auto; padding: 0 12px; white-space: nowrap; height: 30px; line-height: 30px; display: inline-flex; align-items: center; justify-content: center; }
#desk-tabs #desk-x { position: sticky; right: 0; background: #0a0c11; z-index: 1; }
.td-pending td { opacity: .75; } .td-opening { color: var(--accent, #34d399); font-family: var(--sans, system-ui) !important; animation: tdPulse 1s ease-in-out infinite; }
@keyframes tdPulse { 50% { opacity: .35; } }