.tr-intro p { color:var(--ink-text-soft); line-height:1.6; margin:0 0 12px; max-width:680px; }
.tr-intro p b { color:var(--ink-text); }
.tr-rules { font-size:13.5px; }
.tr-limit { margin-top:12px; font-family:var(--font-mono); font-size:12px; color:var(--ink-text-faint); }
.tr-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:16px; }
@media (max-width:820px){ .tr-stats{ grid-template-columns:repeat(2,1fr);} }

.tr-wrap { max-width:1280px; }
.tr-top { display:flex; justify-content:space-between; align-items:center; padding:10px 0 12px; }
.tr-meta { display:flex; gap:8px; }
.tr-grid { display:grid; grid-template-columns:1fr 340px; gap:14px; align-items:start; }
@media (max-width:980px){ .tr-grid{ grid-template-columns:1fr; } }
.tr-chart-card { padding:8px; position:relative; }
#chart { width:100%; height:min(62vh,560px); min-height:340px; }
.tr-legend { display:flex; gap:14px; flex-wrap:wrap; padding:8px 10px 2px; font-family:var(--font-mono); font-size:12px; color:var(--ink-text-soft); }
.tr-legend i { display:inline-block; width:10px; height:3px; border-radius:2px; margin-right:6px; vertical-align:middle; }

.tr-panel h3 { margin:0 0 4px; font-family:var(--font-display); font-size:16px; }
.tr-panel .hint { color:var(--ink-text-soft); font-size:13px; margin:0 0 14px; line-height:1.5; }
.tr-sides { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.tr-side { padding:12px; border-radius:var(--radius-sm); border:1px solid var(--ink-line); background:var(--ink-panel-2); color:var(--ink-text); font-weight:800; cursor:pointer; font-family:var(--font-body); font-size:15px; }
.tr-side.long.on { background:var(--mint); color:#06170f; border-color:var(--mint); }
.tr-side.short.on { background:var(--ember); color:#1a0603; border-color:var(--ember); }
.tr-row { display:grid; grid-template-columns:1fr auto; gap:6px; align-items:end; margin-bottom:12px; }
.tr-row .vt-field { margin:0; }
.tr-pick { padding:11px 12px; background:var(--ink-panel-2); border:1px solid var(--ink-line); border-radius:var(--radius-sm); cursor:pointer; color:var(--ink-text-soft); font-size:13px; }
.tr-pick.on { border-color:var(--gold); color:var(--gold); }
.tr-calc { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:6px 0 14px; padding:12px; background:var(--ink); border:1px solid var(--ink-line); border-radius:var(--radius-sm); }
.tr-calc .vt-stat-value { font-size:14px; }
.tr-warn { font-size:12.5px; color:var(--gold); margin:-6px 0 12px; line-height:1.45; }
.tr-err { font-size:13px; color:var(--ember); margin-bottom:10px; }
.tr-actions { display:grid; gap:8px; }
.tr-step-row { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.tr-step { padding:8px 4px; border-radius:var(--radius-sm); border:1px solid var(--ink-line); background:var(--ink-panel-2); color:var(--ink-text); font-family:var(--font-mono); font-size:12.5px; font-weight:600; white-space:nowrap; cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.tr-step:hover { border-color:var(--mint); color:var(--mint); }
.tr-step:active { background:color-mix(in srgb, var(--mint) 10%, var(--ink-panel-2)); }
.tr-step:disabled { opacity:.5; cursor:default; }
.tr-step-end { grid-column:1 / -1; font-family:var(--font-body); font-size:13px; padding:9px 4px; border-color:color-mix(in srgb, var(--mint) 45%, var(--ink-line)); color:var(--mint); }
.tr-divider { height:1px; background:var(--ink-line); margin:14px 0; }
.tr-result { text-align:center; padding:6px 0 14px; }
.tr-result .big { font-family:var(--font-mono); font-size:38px; font-weight:600; margin:6px 0; }
.tr-result .big.mint { color:var(--mint); } .tr-result .big.ember { color:var(--ember); }
.tr-facts { display:grid; gap:8px; font-size:13px; margin-bottom:14px; }
.tr-facts div { display:flex; justify-content:space-between; gap:10px; }
.tr-facts span:first-child { color:var(--ink-text-faint); }
.tr-viol { display:grid; gap:6px; margin-bottom:14px; }

.tr-tfs { display:flex; gap:6px; padding:4px 6px 8px; }
.tr-tf { padding:6px 12px; border-radius:var(--radius-sm); border:1px solid var(--ink-line); background:var(--ink-panel-2); color:var(--ink-text-soft); font-family:var(--font-mono); font-size:12px; cursor:pointer; }
.tr-tf.on { background:var(--mint); border-color:var(--mint); color:#06170f; font-weight:600; }
#chart { touch-action:pan-y; }
.tr-lockbox { margin:4px 0 14px; padding:12px 14px; border:1px dashed var(--ink-line); border-radius:var(--radius-sm); color:var(--gold); font-size:14px; }

.tr-runend { padding:12px 14px; border-radius:var(--radius-sm); font-size:13.5px; line-height:1.5; margin-bottom:12px; }
.tr-runend b { display:block; margin-bottom:4px; font-size:14.5px; }
.tr-runend.ok { background:color-mix(in srgb, var(--mint) 12%, transparent); border:1px solid color-mix(in srgb, var(--mint) 40%, transparent); color:var(--mint); }
.tr-runend.bad { background:color-mix(in srgb, var(--gold) 12%, transparent); border:1px solid color-mix(in srgb, var(--gold) 40%, transparent); color:var(--gold); }
.tr-runend.ok b, .tr-runend.bad b { color:var(--ink-text); }

.tr-gauge { margin:4px 0 14px; padding:12px 14px; border:1px solid var(--ink-line); border-radius:var(--radius-sm); font-size:14px; color:var(--ink-text-soft); }
.tr-gauge b { color:var(--ink-text); }

/* remaining-candles counter while a position is open */
.tr-left { margin:10px 0 14px; padding:12px 14px; border:1px solid var(--ink-line); border-radius:var(--radius-md); }
.tr-left-t { font-size:14px; margin-bottom:8px; }
.tr-left .hint { margin:8px 0 0; font-size:12.5px; }
.tr-left.low { border-color:var(--gold); }
.tr-left.low .tr-left-t { color:var(--gold); }