/* 实战课程组件保持独立命名，不继承旧练习卡或图表的布局。 */
.tl-hook { font-size:20px; line-height:1.65; color:var(--sub); margin:10px 0 20px; max-width:660px; }
.tl-objective { border-left:3px solid var(--accent); padding:6px 0 6px 18px; margin:26px 0; }
.tl-objective b { font-size:11px; color:var(--accent-deep); }
.tl-objective p { margin:7px 0 0; font-size:15px; }
.tl-mode-bar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:24px 0; font-size:12px; }
.tl-mode-bar > span { color:var(--sub); }
.tl-mode-bar small { width:100%; font-size:11px; color:var(--sub); }
.tl-button-group { display:flex; flex-wrap:wrap; gap:6px; }
.tl-button-group button, .tl-link-button { border:1px solid var(--line); background:var(--card); color:var(--sub); border-radius:6px; padding:7px 12px; font-size:12px; }
.tl-button-group button[aria-pressed="true"] { border-color:var(--accent); color:var(--accent-deep); background:var(--accent-soft); font-weight:650; }
.tl-lens { font-size:14px; color:var(--sub); }
.tl-history, .tl-decision, .tl-action-card { border:1px solid var(--line); border-radius:12px; background:var(--card); padding:22px; margin:22px 0 30px; }
.tl-lab-toolbar { display:flex; align-items:center; justify-content:space-between; gap:15px; flex-wrap:wrap; margin-bottom:18px; }
.tl-mark-toggle { display:flex; gap:6px; align-items:center; font-size:11px; color:var(--sub); cursor:pointer; }
.tl-history input[type="checkbox"], .tl-history input[type="radio"], .tl-review input { accent-color:var(--accent); }
.tl-hint { background:var(--accent-soft); padding:12px 14px; border-radius:6px; color:var(--sub); font-size:12px; line-height:1.85; }
body[data-learning-mode="independent"] .tl-hint { display:none; }
body[data-learning-mode="independent"] .tl-choice-feedback { display:none; }
.tl-chart-top { display:flex; justify-content:space-between; gap:10px; font-size:11px; padding:18px 0 12px; color:var(--sub); }
.tl-chart-top b { color:var(--text); font-size:12px; }
.tl-chart-scroll { overflow-x:auto; overscroll-behavior-x:contain; max-width:100%; border-radius:5px; padding:7px 0; }
.tl-chart-scroll svg { display:block; width:100%; height:auto; }
.tl-chart-narrow { display:none; }
/* 默认观看演示；个人练习与填写在用户主动切换或展开后出现。 */
body:not([data-learning-mode="independent"]) .tl-history-decision,
body:not([data-learning-mode="independent"]) .tl-history-log,
body:not([data-learning-mode="independent"]) .tl-history-reset,
body:not([data-learning-mode="independent"]) .tl-decision-stage,
body:not([data-learning-mode="independent"]) .tl-decision-report { display:none; }
body[data-learning-mode="independent"] .tl-demo-controls,
body[data-learning-mode="independent"] .tl-demo-commentary,
body[data-learning-mode="independent"] .tl-decision-demo { display:none; }
.tl-demo-controls { margin:18px 0 4px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.tl-demo-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.tl-demo-actions button:not(.tl-button), .tl-demo-steps button { border:1px solid var(--line); background:var(--card); border-radius:6px; color:var(--sub); padding:8px 10px; font-size:11px; }
.tl-demo-actions button:disabled { opacity:.42; cursor:default; }
.tl-demo-actions .tl-button { min-width:130px; }
.tl-demo-speed { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--sub); }
.tl-demo-speed select { border:1px solid var(--line); border-radius:5px; background:var(--card); color:var(--text); font:inherit; padding:5px; }
.tl-demo-steps { display:flex; gap:6px; margin-top:13px; }
.tl-demo-steps button { flex:1; padding:6px 9px; }
.tl-demo-steps button[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent); color:var(--accent-deep); }
.tl-demo-status { display:block; font-size:10px; color:var(--sub); margin-top:10px; }
.tl-demo-commentary { border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 8px 8px 0; padding:18px; margin:20px 0; }
.tl-demo-commentary .tl-button-group { margin-bottom:19px; }
.tl-demo-commentary .tl-demo-decision, .tl-demo-commentary .tl-demo-reason, .tl-demo-commentary .tl-demo-outcome { font-size:13px; font-weight:400; margin:14px 0 0; line-height:1.85; }
.tl-demo-commentary b { display:block; font-size:10px; font-weight:650; color:var(--accent-deep); margin-bottom:4px; }
.tl-demo-commentary span { display:block; }
.tl-demo-commentary .tl-demo-outcome > span { font-weight:650; }
.tl-demo-fact { padding:16px; border:1px solid var(--line); background:var(--bg); border-radius:7px; font-size:14px; margin:22px 0 18px; }
.tl-demo-prompt { font-size:17px; margin:20px 0; }
.tl-demo-options { display:grid; gap:12px; }
.tl-demo-option { padding:17px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.tl-demo-option.is-speaking { border-color:var(--accent); background:var(--accent-soft); }
.tl-demo-option > b { display:block; font-size:14px; }
.tl-demo-option-tag { display:block; color:var(--sub); font-size:10px; margin:7px 0 0; }
.tl-demo-option p { font-size:13px; color:var(--sub); margin:11px 0 0; line-height:1.9; }
.tl-demo-option button { font-size:10px; margin-top:12px; padding:4px 8px; }
.tl-demo-conclusion { font-size:11px; color:var(--sub); padding-top:17px; margin:20px 0 0; border-top:1px solid var(--line); }
.tl-demo-comparison-group { margin-bottom:22px; }
.tl-demo-comparison-group h3 { font-size:17px; }
.tl-demo-comparison-group .tl-demo-option { margin-top:12px; }
.tl-optional-plan, .tl-optional-notes { margin:25px 0; border-top:1px solid var(--line); padding-top:18px; }
.tl-optional-plan > summary, .tl-optional-notes > summary, .tl-optional-reason > summary { font-size:13px; color:var(--accent-deep); cursor:pointer; }
.tl-optional-notes .trader-practice { margin-top:18px; }
.tl-optional-reason { margin:16px 0; }
.tl-optional-reason .tl-field-label { margin-top:15px; }
.tl-chart-scroll .k-grid { fill:none; stroke:var(--line); stroke-width:.7; }
.tl-chart-scroll .k-up { fill:#059669; stroke:#059669; }
.tl-chart-scroll .k-dn { fill:#dc5252; stroke:#dc5252; }
.tl-chart-scroll .k-wick { fill:none; stroke-width:1.1; }
.tl-chart-scroll .k-body { stroke:none; }
.tl-chart-scroll text { fill:var(--sub); font-family:inherit; font-size:10px; }
.tl-chart-scroll .k-ax { text-anchor:end; }
.tl-chart-scroll .k-ax-l { text-anchor:start; }
.tl-chart-scroll .k-cut { stroke:var(--sub); stroke-dasharray:4 4; stroke-width:1; }
.tl-chart-scroll .k-cut-t { fill:var(--sub); font-size:9px; }
.tl-chart-scroll .tl-annotations { display:none; }
.tl-show-marks .tl-chart-scroll .tl-annotations { display:block; }
.tl-annotations circle { fill:var(--card); stroke:var(--accent); stroke-width:1.6; }
.tl-annotations path { fill:none; stroke:var(--accent); stroke-width:.8; stroke-dasharray:4 4; opacity:.7; }
.tl-chart-scroll .tl-annotations text { fill:var(--accent-deep); font-size:10px; paint-order:stroke; stroke:var(--card); stroke-width:3px; stroke-linejoin:round; }
.tl-chart-caption { font-size:10.5px; color:var(--sub); line-height:1.75; margin:10px 0 0; }
.tl-weekly { border-top:1px solid var(--line); margin:15px 0; padding-top:13px; }
.tl-weekly summary, .tl-worked-example summary, .tl-advanced summary { cursor:pointer; font-size:13px; color:var(--accent-deep); }
.tl-observation { font-size:12px; color:var(--sub); padding:13px 0; border-bottom:1px solid var(--line); }
.tl-history fieldset, .tl-review { border:0; padding:0; margin:18px 0; min-width:0; }
.tl-history legend, .tl-review legend { font-size:13px; font-weight:650; margin-bottom:12px; }
.tl-history-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.tl-history-options label { display:flex; align-items:center; gap:7px; border:1px solid var(--line); padding:9px 11px; border-radius:6px; font-size:12px; cursor:pointer; }
.tl-history-options label:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-deep); }
.tl-field-label { display:block; font-size:11px; color:var(--sub); margin-bottom:8px; }
.tl-history-reason, .tl-plan-field textarea { display:block; width:100%; min-width:0; min-height:92px; border:1px solid var(--line); border-radius:7px; padding:12px 13px; font-size:13px; line-height:1.85; resize:vertical; background:var(--bg); color:var(--text); }
.tl-history-actions, .tl-action-footer { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:16px; }
.tl-button { background:var(--accent); color:var(--card); border:1px solid var(--accent); border-radius:7px; padding:10px 14px; font-size:12px; font-weight:650; }
.tl-history-status, #planStatus { font-size:11px; color:var(--sub); }
.tl-history-log { margin:22px 0 0; padding-left:21px; }
.tl-history-log:empty { display:none; }
.tl-history-log li { font-size:12px; padding:0 0 12px 3px; }
.tl-history-log p { color:var(--sub); white-space:pre-wrap; overflow-wrap:anywhere; margin:6px 0 0; }
.tl-history-log button { margin-top:8px; font-size:11px; }
.tl-storage-warning { font-size:12px; color:var(--sub); padding:12px 15px; border:1px solid var(--line); border-radius:7px; }
.tl-history-reset { margin-top:18px; font-size:11px; }
.tl-result-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:22px 0; }
.tl-result-metrics span { display:block; font-size:10px; color:var(--sub); }
.tl-result-metrics b { font-size:23px; color:var(--accent-deep); font-variant-numeric:tabular-nums; }
.tl-history-result h3 { font-size:17px; margin:22px 0 14px; }
.tl-history-result p { font-size:13px; }
.tl-history-result .tl-source { font-size:11px; color:var(--sub); }
.tl-execution { border-top:1px solid var(--line); margin:22px 0; padding-top:17px; }
.tl-execution summary { cursor:pointer; font-size:13px; color:var(--accent-deep); }
.tl-execution p { font-size:12px; color:var(--sub); margin-top:17px; }
.tl-table-scroll { overflow-x:auto; max-width:100%; margin:18px 0; }
.tl-table-scroll table { width:100%; min-width:490px; border-collapse:collapse; font-size:11px; }
.tl-table-scroll th,.tl-table-scroll td { text-align:left; padding:10px 9px; border-bottom:1px solid var(--line); vertical-align:top; }
.tl-table-scroll thead { color:var(--sub); }
.tl-when { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; margin:28px 0; }
.tl-when b { font-size:12px; color:var(--accent-deep); }
.tl-when p { margin:8px 0 0; font-size:14px; }
.tl-workflow { list-style:none; padding:0; margin:25px 0; }
.tl-workflow li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:14px; margin-bottom:22px; }
.tl-workflow li > span { font-size:13px; color:var(--accent); font-weight:750; padding-top:1px; }
.tl-workflow h3 { font-size:15px; margin:0 0 8px; }
.tl-workflow p { font-size:14px; color:var(--sub); margin:0; }
.tl-worked-example { margin:28px 0 15px; }
.tl-section-note { font-size:12px; color:var(--sub); }
.tl-cases { margin:24px 0 30px; }
.tl-case { border-top:1px solid var(--line); padding:25px 0 20px; }
.tl-case-kind { font-size:11px; color:var(--accent-deep); background:var(--accent-soft); padding:4px 9px; border-radius:4px; }
.tl-case h3 { margin:13px 0; font-size:19px; }
.tl-case > p { font-size:14px; margin:0 0 18px; }
.tl-debrief { border-left:2px solid var(--accent); padding-left:16px; }
.tl-debrief b { color:var(--accent-deep); font-size:11px; }
.tl-debrief p { font-size:13px; color:var(--sub); margin:6px 0 0; }
.tl-decision > p { font-size:13px; color:var(--sub); }
.tl-step-label { font-size:11px; color:var(--accent-deep); margin-top:25px; }
.tl-fact { background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:16px; font-size:14px; }
.tl-decision-stage h3 { font-size:16px; margin:20px 0 14px; }
.tl-choices { display:grid; gap:9px; margin:20px 0; }
.tl-choice { text-align:left; padding:13px 15px; border:1px solid var(--line); background:var(--card); border-radius:7px; color:var(--text); font-size:13px; line-height:1.7; }
.tl-choice:hover { border-color:var(--accent); }
.tl-choice[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent); color:var(--accent-deep); }
.tl-choice-feedback { border-left:2px solid var(--accent); padding:4px 0 4px 15px; margin:20px 0; }
.tl-choice-feedback b { font-size:12px; color:var(--accent-deep); }
.tl-choice-feedback p { font-size:13px; margin:8px 0 0; color:var(--sub); }
.tl-choice-feedback[data-aligned="false"] { border-color:var(--sub); }
.tl-decision-report h3 { font-size:17px; }
.tl-decision-report ol { padding-left:20px; }
.tl-decision-report li { margin:20px 0; font-size:13px; }
.tl-decision-report li p { color:var(--sub); margin:8px 0; }
.tl-decision-summary { border-top:1px solid var(--line); padding-top:17px; color:var(--sub); font-size:12px; }
.tl-plan-field { display:block; margin-bottom:21px; }
.tl-plan-field > span { display:block; font-size:13px; font-weight:600; margin-bottom:9px; }
.tl-review label { display:flex; align-items:flex-start; gap:9px; font-size:12px; color:var(--sub); margin:10px 0; }
.tl-review input { margin-top:5px; flex-shrink:0; }
.tl-advanced { background:var(--accent-soft); border-radius:9px; padding:20px; }
.tl-advanced p { font-size:14px; margin:20px 0 0; }
.tl-history-frame, .tl-decision-stage, .tl-decision-report { scroll-margin-top:80px; }
.overview-row b em { display:block; font-style:normal; font-size:11px; font-weight:400; color:var(--sub); line-height:1.7; margin-top:5px; }
@media(max-width:600px) {
  .tl-demo-actions { gap:6px; }
  .tl-demo-actions .tl-button { flex:1 0 100%; }
  .tl-demo-actions button:not(.tl-button) { flex:1; padding:8px 6px; }
  .tl-demo-speed { margin-top:3px; width:100%; }
  .tl-demo-commentary { padding:14px; }
  .tl-demo-commentary .tl-button-group button { padding:7px 9px; font-size:11px; }
  .tl-demo-option { padding:14px; }
  .tl-chart-wide { display:none; }
  .tl-chart-narrow { display:block; }
  .tl-chart-narrow text { font-size:11px; }
  .tl-hook { font-size:18px; }
  .tl-history, .tl-decision, .tl-action-card { padding:16px; }
  .tl-result-metrics { gap:7px; }
  .tl-result-metrics b { font-size:19px; }
  .tl-result-metrics span { font-size:9px; }
  .tl-history-options { gap:6px; }
  .tl-history-options label { padding:9px 7px; font-size:11px; }
  .tl-history-actions .tl-button, .tl-action-footer .tl-button { width:100%; }
  .tl-case h3 { font-size:17px; }
  .overview-stats { gap:20px; }
  .overview-stats span { font-size:10px; }
}
@media print {
  .tl-mode-bar,.tl-lab-toolbar,.tl-history-decision,.tl-history-reset,.tl-decision-next,.tl-action-footer { display:none; }
  .tl-chart-scroll svg { min-width:0; }
  .tl-history,.tl-case,.tl-action-card { break-inside:avoid; }
}

/* 事件编号和K线收盘位置对应，颜色跟随主题。 */
.tl-event-arrow path { fill:none; stroke:var(--accent, #008565); stroke-width:1.3; }
.tl-event-arrow circle { fill:var(--accent, #008565); }
.tl-event-arrow text { fill:white; font-size:11px; font-weight:700; }
.tl-event-legend { font-size:13px; line-height:1.8; padding-left:24px; }
.tl-demo-steps { flex-wrap:wrap; }
.tl-demo-steps button { flex: 1 0 64px; white-space: nowrap; }
.tl-chart-tools { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:12px 0; }
.tl-chart-tools button { min-height:36px; padding:7px 12px; }
.tl-interactive-chart canvas { display:block; cursor:grab; touch-action:pan-y; border-radius:6px; }
.tl-interactive-chart canvas:active { cursor:grabbing; }
.tl-interactive-chart input[type=range] { display:block; width:100%; margin:12px 0; accent-color:var(--accent); }

.tl-interactive-chart canvas { touch-action:none; cursor:crosshair; }
.tl-chart-quote { min-height:38px; font-size:11px; line-height:1.7; color:var(--sub); font-variant-numeric:tabular-nums; margin:8px 0; }

.tl-case-brief { margin:22px 0; padding:18px; border-left:3px solid var(--accent); background:var(--bg); }
.tl-case-brief h3 { margin:0 0 10px; font-size:17px; }
.tl-case-brief p { font-size:13px; line-height:1.9; }
.tl-account-visual { margin:28px 0; padding:20px; border:1px solid var(--line); border-radius:10px; }
.tl-account-visual svg { width:100%; height:auto; margin:12px 0; color:var(--sub); }
.tl-account-visual svg text { fill:var(--sub); font-size:12px; }
.tl-account-visual p { font-size:13px; line-height:1.9; }
/* 结构叠加层：画布从这些变量取色，深浅色分别保证与背景对比。 */
.tl-market-chart, .tl-candle-scene { --tl-rise:#047857; --tl-fall:#c2410c; --tl-stop:#b45309; }
:root[data-theme="dark"] .tl-market-chart, :root[data-theme="dark"] .tl-candle-scene { --tl-rise:#34d399; --tl-fall:#fb923c; --tl-stop:#fbbf24; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tl-market-chart, :root:not([data-theme="light"]) .tl-candle-scene { --tl-rise:#34d399; --tl-fall:#fb923c; --tl-stop:#fbbf24; } }
.tl-chart-key, .tl-plan-note { font-size:11px; line-height:1.7; color:var(--sub); margin:6px 0 0; }
.tl-plan-note { color:var(--text); border-left:2px solid var(--accent); padding-left:8px; }
/* 教学构造K线情景：区分盘中高点与收盘，边界线单独画出。 */
.figure.tl-candle-scene svg { width:100%; max-width:520px; margin:0 auto; height:auto; display:block; }
.figure.tl-candle-scene svg text { font-family:inherit; fill:var(--sub); font-size:15px; }
.figure.tl-candle-scene .cs-strong { fill:var(--text); font-weight:650; }
.figure.tl-candle-scene .cs-grid { stroke:var(--line); stroke-width:1; }
.figure.tl-candle-scene .cs-bound { stroke:var(--tl-stop); stroke-width:1.6; stroke-dasharray:6 5; }
.figure.tl-candle-scene .cs-bound-text { fill:var(--tl-stop); font-weight:650; }
.figure.tl-candle-scene .cs-up { fill:var(--tl-rise); stroke:var(--tl-rise); }
.figure.tl-candle-scene .cs-down { fill:var(--tl-fall); stroke:var(--tl-fall); }
.figure.tl-candle-scene .cs-wick { stroke-width:1.6; }
.figure.tl-candle-scene .cs-pending { fill:none; stroke:var(--sub); stroke-dasharray:4 4; }
.figure.tl-candle-scene .cs-note-up { fill:var(--tl-rise); font-weight:650; }
.figure.tl-candle-scene .cs-note-down { fill:var(--tl-fall); font-weight:650; }
.figure.tl-candle-scene .cs-dot { fill:var(--card); stroke:var(--text); stroke-width:1.6; }
.figure.tl-candle-scene .cs-compare { font-size:12px; color:var(--sub); line-height:1.8; margin:10px 0 0; }
.figure.tl-candle-scene .cs-compare b { color:var(--text); }