/* Shared trading UI: chart, timeframe pills, trades list, buy/sell box. */
.chart { position: relative; width: 100%; height: 100%; }
.chart-empty { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; pointer-events: none; }
.chart-empty b { font: 800 16px/1 var(--display); }
.chart-empty span { color: var(--mute); font-size: 13px; }
.tfs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid var(--line); width: max-content; }
.tfs button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font: 700 12px/1 var(--body); color: var(--mute); }
.tfs button.on { background: rgba(255,255,255,.09); color: var(--text); }
.tr { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.tr .side { font: 800 10.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.tr .side.buy { color: var(--green); } .tr .side.sell { color: var(--red); }
.tr .who { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr a { color: var(--mute); font-family: var(--mono); font-size: 11.5px; }
.small { font-size: 13px; }
.tbox { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: 18px; border: 1px solid var(--line2); background: rgba(255,255,255,.03); transition: opacity .2s; }
.tbox.is-busy { opacity: .8; pointer-events: none; }
.tbox-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.35); }
.tbox-tabs button { height: 38px; border: 0; border-radius: 9px; background: none; font: 800 13.5px/1 var(--body); color: var(--mute); }
.tbox-tabs button.on { background: rgba(95,211,239,.16); color: #fff6d6; }
.tbox-tabs button[data-side="sell"].on { background: rgba(95,211,239,.16); color: #fff2cf; }
.tbox-pos { font-size: 12.5px; color: var(--mute); min-height: 18px; }
.tbox-pos b { color: var(--text); }
.tbox-in { display: flex; align-items: center; border-radius: 12px; border: 1px solid var(--line2); background: rgba(0,0,0,.3); }
.tbox-in input { flex: 1; min-width: 0; height: 52px; padding: 0 14px; border: 0; background: none; font: 800 20px/1 var(--body); outline: none; }
.tbox-in span { padding: 0 14px; color: var(--mute); font-weight: 800; font-size: 13px; }
.tbox-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tbox-quick button { height: 34px; border-radius: 9px; border: 1px solid var(--line2); background: rgba(255,255,255,.03); font: 700 12px/1 var(--body); }
.tbox-quick button:hover { border-color: rgba(95,211,239,.5); }
.tbox-quote { font-size: 13px; color: var(--mute); min-height: 18px; }
.tbox-quote b { color: var(--text); }
.tbox-note { margin: 0; font-size: 11.5px; color: var(--dim); line-height: 1.5; }
.tbox-note a { color: var(--green); }
.tbox-grad { margin: 0; color: var(--mute); }