:root {
  --bg: #ffffff;
  --soft: #f5f5f7;
  --soft-2: #fbfbfd;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --faint: #a1a1a6;
  --line: #e5e5ea;
  --blue: #007aff;
  --blue-soft: #eaf4ff;
  --dark: #111114;
  --max: 1120px;
  --radius: 8px;
  --shadow: 0 18px 48px rgba(0, 0, 0, .055);
}

/* Validated beginner chart lab: scenario-specific tools and in-chart correction. */
.validated-lab { overflow:hidden; }
.case-count { flex:0 0 auto; padding:10px 12px; border:1px solid #cdddf0; border-radius:10px; background:#f5f9ff; color:#284b73; font-weight:800; line-height:1.35; text-align:right; }
.case-count small { color:var(--muted); font-weight:600; }
.training-stage-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:18px; }
.training-stage-flow button,.case-variant-strip button,.prediction-choices button { border:1px solid var(--line); border-radius:9px; background:#fff; padding:9px 10px; color:#435065; cursor:pointer; font-weight:700; }
.training-stage-flow button.is-active,.case-variant-strip button.is-active,.prediction-choices button.is-active { border-color:var(--blue); background:var(--blue-soft); color:#155a9d; }
.scenario-targets { grid-template-columns:repeat(3,minmax(0,1fr)); }
.case-variant-strip { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.evidence-warning { display:grid; gap:4px; margin-top:12px; padding:11px 13px; border:1px solid #efc36c; border-radius:10px; background:#fff8e8; color:#75500a; }
.evidence-warning span { font-size:12px; line-height:1.5; }
.drawing-sidebar { min-width:0; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.drawing-sidebar h3 { margin-bottom:10px; }
.drawing-sidebar .drawing-target { width:100%; margin-top:7px; }
.drawing-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.drawing-feedback { display:block; padding:12px; border-radius:10px; background:#f7f9fc; }
.drawing-feedback p { margin:7px 0 0; }.drawing-feedback p.ok { color:#14784a; }.drawing-feedback p.bad { color:#a35d05; }
.validated-training-chart .drawing-user-line line { stroke:#246bd6; stroke-width:3; }
.validated-training-chart .drawing-user-line text { fill:#174b91; font-size:10px; font-weight:800; }
.validated-training-chart .drawing-reference-layer line { stroke:#e88b16; stroke-width:2.4; stroke-dasharray:7 4; }
.validated-training-chart .drawing-evidence-window { fill:#2f7df6; fill-opacity:.045; stroke:#2f7df6; stroke-dasharray:4 3; }
.validated-training-chart .evidence-window-label { fill:#315271; font-size:9px; font-weight:800; }
.validated-training-chart .drawing-touch-marker rect { fill:#fff; stroke:#e88b16; stroke-width:1.7; }
.validated-training-chart .drawing-touch-marker text { fill:#80500a; font-size:9px; font-weight:900; text-anchor:middle; }
.validated-training-chart .answer-label-bg { fill:#fff8e8; stroke:#e8b45f; }
.validated-training-chart .answer-label { fill:#704b0a; font-size:9px; font-weight:800; }
.validated-training-chart .drawing-volume-layer text,.validated-training-chart>text { fill:#6e7682; font-size:10px; }
.validated-training-chart .chart-context-title { fill:#334155; font-size:12px; font-weight:800; }
.validated-training-chart .hidden-next-slot rect { fill:#f5f7fa; fill-opacity:.92; stroke:#aeb8c5; stroke-dasharray:4 3; }
.validated-training-chart .hidden-next-slot text { fill:#7c8795; font-size:22px; font-weight:900; }
.validated-training-chart .revealed-next-bar { filter:drop-shadow(0 0 3px rgba(47,125,246,.6)); }
.prediction-lab { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:16px; padding:16px; border:1px solid #dbe4ef; border-radius:12px; background:#fbfdff; }
.prediction-lab span { color:var(--blue); font-size:12px; font-weight:850; }.prediction-lab h3 { margin-top:4px; font-size:17px; }
.prediction-choices { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }.prediction-result { max-width:580px; color:#425065; font-size:13px; line-height:1.55; }

@media (max-width:760px) {
  .training-stage-flow,.scenario-targets { grid-template-columns:1fr; }
  .case-count { text-align:left; }
  .drawing-actions { grid-template-columns:1fr; }
  .prediction-lab { display:grid; }
  .prediction-choices { justify-content:flex-start; }
  .validated-training-chart .answer-label { font-size:8px; }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  min-width: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background: linear-gradient(to bottom, #fff 0%, #f8f9fb 52%, #fff 100%);
  font-family: "SF Pro Display", "SF Pro Text", "PingFang SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: 54px;
  display: flex;
  justify-content: center;
  background: rgba(255, 255, 255, .78);
  border-bottom: 1px solid rgba(229, 229, 234, .72);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

.nav-inner {
  width: min(var(--max), calc(100% - 40px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.brand {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.nav-links {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 22px;
  color: rgba(29, 29, 31, .72);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.is-active {
  color: var(--ink);
}

.page-shell {
  padding-top: 54px;
}

.hero {
  padding: clamp(82px, 11vw, 136px) 0 70px;
  text-align: center;
}

.wrap {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
}

.eyebrow {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 18px;
}

h1 {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(44px, 7vw, 86px);
  line-height: 1.02;
  font-weight: 850;
  text-wrap: balance;
}

.hero p {
  max-width: 680px;
  margin: 24px auto 0;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.48;
  font-weight: 500;
}

.section {
  padding: 78px 0;
}

.section.soft {
  background: var(--soft);
}

.section-head {
  max-width: 760px;
  margin-bottom: 34px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.08;
  font-weight: 850;
}

.section-head p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 500;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .92);
  padding: 24px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .03);
}

.card h3 {
  font-size: 24px;
  line-height: 1.18;
  font-weight: 820;
}

.card p,
.card li {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.58;
  font-weight: 500;
}

.card p {
  margin-top: 12px;
}

.card ul,
.quiet-list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.quiet-list li,
.check-row {
  border: 1px solid rgba(229, 229, 234, .84);
  border-radius: var(--radius);
  background: #fff;
  padding: 12px 14px;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink);
  cursor: pointer;
}

.check-row input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--blue);
}

.field {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.field label,
.field span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.input,
.textarea,
.select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  padding: 12px 13px;
  outline: none;
}

.textarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.55;
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: rgba(0, 122, 255, .42);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, .09);
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 760;
  cursor: pointer;
}

.chip.is-active {
  color: #fff;
  border-color: var(--ink);
  background: var(--ink);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 0 18px;
  font-weight: 800;
  cursor: pointer;
}

.btn.primary {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}

.btn.soft {
  border-color: transparent;
  color: var(--blue);
  background: rgba(0, 122, 255, .08);
}

.result {
  min-height: 118px;
  display: grid;
  align-content: center;
  border: 1px solid rgba(0, 122, 255, .18);
  border-radius: var(--radius);
  background: var(--blue-soft);
  padding: 22px;
}

.result strong {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
}

.result p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.saved-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.saved-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 16px;
}

.saved-item strong {
  display: block;
  font-size: 17px;
}

.saved-item p {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.55;
}

.note {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.signal {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 7px 11px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.footer {
  color: rgba(255, 255, 255, .62);
  background: var(--dark);
  padding: 42px 0 50px;
}

.footer-inner {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: center;
}

.footer a:hover {
  color: #fff;
}

@media (max-width: 1199px) {
  .grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .nav-links {
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .grid,
  .grid.two,
  .grid.four {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-bottom: 48px;
  }

  .section {
    padding: 62px 0;
  }

  .footer-inner {
    display: grid;
    align-items: start;
  }
}

@media (max-width: 767px) {
  .nav-inner,
  .wrap,
  .footer-inner {
    width: min(100% - 28px, var(--max));
  }

  .brand {
    font-size: 13px;
  }

  h1 {
    font-size: 42px;
  }

  .hero p,
  .section-head p {
    font-size: 17px;
  }

  .card {
    padding: 20px;
  }

  .actions .btn {
    width: 100%;
  }
}

/* ── 操盘训练 v2 ─────────────────────────────────────────────── */
.course-hero { padding: 112px 0 58px; background: radial-gradient(circle at 50% 10%,rgba(0,122,255,.09),transparent 38%),#fff; }
.course-hero.compact { padding-bottom: 48px; }
.course-hero h1 { max-width: 980px; font-size: clamp(38px,6vw,72px); }
.course-hero p { max-width: 760px; margin:20px auto 0; text-align:center; color:var(--muted); font-size:18px; line-height:1.65; }
.course-progress { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; max-width:760px; margin:28px auto 0; }
.course-progress b { font-size:24px; }
.course-progress span { color:var(--muted); }
.progress-track { width:220px; height:8px; overflow:hidden; border-radius:999px; background:var(--line); }
.progress-track i { display:block; height:100%; border-radius:inherit; background:var(--blue); }
.learning-order { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; padding:18px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:14px; }
.learning-order span { color:var(--ink); font-weight:750; }
.course-filter { display:flex; gap:8px; overflow-x:auto; margin:28px 0 18px; padding-bottom:4px; scrollbar-width:none; }
.course-filter::-webkit-scrollbar { display:none; }
.course-filter .chip { flex:0 0 auto; }
.lesson-list { display:grid; gap:12px; }
.lesson-card { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.025); }
.lesson-summary { width:100%; display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:14px; border:0; background:#fff; padding:20px 22px; text-align:left; color:var(--ink); cursor:pointer; }
.lesson-summary:hover { background:var(--soft-2); }
.lesson-summary b { display:block; font-size:20px; }
.lesson-summary small { display:block; margin-top:5px; color:var(--muted); }
.lesson-number { color:var(--faint); font-size:20px; font-variant-numeric:tabular-nums; }
.lesson-state { color:var(--blue); font-size:13px; font-weight:750; }
.lesson-body { padding:0 22px 24px; border-top:1px solid var(--line); }
.reading-order { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; margin-top:18px; padding:12px 14px; border:1px dashed #e5aa3c; border-radius:10px; background:#fffaf0; color:#5d6470; font-size:14px; }
.reading-order b { color:#303742; }
.reading-order span { white-space:nowrap; }
.visual-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding-top:22px; }
.visual-pair figure { min-width:0; margin:0; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--soft-2); }
.visual-pair figcaption { font-weight:800; }
.visual-pair figure p { margin-top:8px; color:var(--muted); line-height:1.55; }
.chart-why { margin-top:12px; padding:12px; border-radius:9px; background:#fff; border:1px solid #e7eaf0; }
.chart-why > b { display:block; margin-bottom:8px; color:#303742; }
.chart-why dl,.chart-why dd { margin:0; }
.chart-why dl { display:grid; gap:8px; }
.chart-why dl > div { display:grid; grid-template-columns:72px minmax(0,1fr); gap:8px; align-items:start; }
.chart-why dt { padding:2px 6px; border-radius:4px; background:#fff4dc; color:#93600a; font-size:12px; font-weight:800; text-align:center; }
.chart-why dd { color:var(--muted); font-size:13px; line-height:1.55; }
.lesson-trade-plan { margin-top:12px; padding:12px; border:1px solid #d9e5f2; border-radius:9px; background:#f7fbff; }
.lesson-trade-plan > b { display:block; margin-bottom:8px; color:#273649; }
.lesson-trade-plan p { display:grid; grid-template-columns:82px minmax(0,1fr); gap:8px; margin:7px 0 0!important; color:var(--muted); font-size:13px; line-height:1.5; }
.lesson-trade-plan p span { color:#315271; font-weight:800; }
.lesson-trade-plan p:nth-of-type(2) span { color:#b4232c; }
.lesson-trade-plan small { display:block; margin-top:9px; color:var(--faint); line-height:1.5; }
.lesson-chart { width:100%; height:auto; display:block; margin-top:8px; background:#fff; border-radius:8px; }
.lesson-notes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.lesson-notes section { padding:18px; border-left:3px solid var(--blue); background:var(--soft-2); }
.lesson-notes h3 { font-size:17px; margin-bottom:10px; }
.lesson-notes h3:not(:first-child) { margin-top:18px; }
.lesson-notes p,.lesson-notes li { color:var(--muted); line-height:1.65; }
.lesson-notes ul { padding-left:20px; }
.rule-strip { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; margin-top:16px; padding:15px 17px; border-radius:10px; background:var(--blue-soft); }
.rule-strip span { color:#315271; line-height:1.55; }
.question-card { padding:24px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.daily-workflow { margin-bottom:24px; padding:24px; border:1px solid #d9e5f2; border-radius:16px; background:linear-gradient(135deg,#fff 0%,#f7fbff 100%); }
.course-drawing-practice { margin-top:42px; }
.daily-mission { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.9fr); gap:20px; align-items:center; margin-bottom:24px; padding:20px 22px; border:1px solid #d9e5f2; border-radius:16px; background:#fff; }.daily-mission>div>span { color:var(--blue); font-size:13px; font-weight:850; letter-spacing:.08em; }.daily-mission h2 { margin-top:5px; font-size:26px; }.daily-mission p { margin-top:8px; color:var(--muted); font-size:14px; line-height:1.58; }.mission-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.mission-steps article { min-width:0; padding:12px; border-radius:10px; background:var(--soft-2); }.mission-steps b { display:block; color:var(--blue); font-size:12px; }.mission-steps span { display:block; margin-top:5px; font-size:14px; font-weight:800; }.mission-steps small { display:block; margin-top:4px; color:var(--muted); font-size:11px; line-height:1.4; }
.drawing-lab { margin:24px 0; padding:24px; border:1px solid #d9e5f2; border-radius:16px; background:linear-gradient(135deg,#fafdff 0%,#fff 75%); }
.drawing-lab-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }.drawing-lab-head span { color:var(--blue); font-size:13px; font-weight:850; letter-spacing:.08em; }.drawing-lab-head h2 { margin-top:5px; font-size:28px; }.drawing-lab-head p { max-width:720px; margin-top:8px; color:var(--muted); line-height:1.58; }
.drawing-tip { flex:0 0 auto; padding:8px 11px; border-radius:999px; background:#fff4dc; color:#8a5c08; font-size:13px; font-weight:800; }
.drawing-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,.7fr); gap:16px; margin-top:18px; }.drawing-board,.drawing-guide { padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; }.drawing-chart { display:block; width:100%; height:auto; cursor:crosshair; touch-action:manipulation; }.drawing-hint { margin-top:9px; color:var(--muted); font-size:13px; line-height:1.5; }.drawing-hint b { color:#273649; }
.drawing-guide h3 { font-size:18px; }.drawing-guide ol { margin:10px 0 0 20px; color:var(--muted); font-size:13px; line-height:1.6; }.drawing-targets { display:grid; gap:8px; margin-top:14px; }.drawing-target { display:grid; gap:3px; border:1px solid var(--line); border-radius:9px; background:#fff; padding:10px 11px; text-align:left; cursor:pointer; }.drawing-target b { font-size:14px; }.drawing-target span { color:var(--muted); font-size:12px; line-height:1.45; }.drawing-target.is-active { border-color:var(--blue); background:var(--blue-soft); }.drawing-guide .btn { width:100%; margin-top:10px; }
.drawing-feedback { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; }.drawing-feedback>h3,.drawing-feedback>.drawing-disclaimer { grid-column:1/-1; }.drawing-feedback>h3 { font-size:19px; }.drawing-feedback article { padding:13px; border-radius:10px; background:#fff; }.drawing-feedback article.is-correct { border-left:3px solid #1f9d63; }.drawing-feedback article.is-needs-work { border-left:3px solid #e89b18; }.drawing-feedback p { margin-top:8px; color:var(--muted); font-size:13px; line-height:1.55; }.drawing-feedback strong { color:#303742; }.drawing-feedback small,.drawing-disclaimer { display:block; margin-top:8px; color:var(--faint); font-size:12px; line-height:1.5; }
.daily-workflow-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.daily-workflow-head span { color:var(--blue); font-size:13px; font-weight:850; letter-spacing:.08em; }
.daily-workflow-head h2 { margin-top:5px; font-size:28px; }
.daily-workflow-head p,.workflow-step-title p,.workflow-actions p { margin-top:8px; color:var(--muted); line-height:1.58; }
.workflow-status { flex:0 0 auto; padding:8px 11px; border-radius:999px; background:#fff4dc; color:#93600a; font-size:13px; font-weight:800; }
.workflow-status.ready { background:#edf9f3; color:#18794e; }
.workflow-fields,.workflow-notes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
.workflow-fields label,.workflow-notes label { display:grid; gap:7px; }
.workflow-fields span,.workflow-notes span { color:var(--muted); font-size:13px; font-weight:800; }
.workflow-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.workflow-step { padding:15px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.workflow-step-title { display:flex; gap:11px; align-items:flex-start; }
.workflow-step-title>b { display:inline-grid; place-items:center; flex:0 0 30px; height:30px; border-radius:50%; background:var(--blue-soft); color:var(--blue); font-size:12px; }
.workflow-step-title h3 { font-size:17px; }.workflow-step-title p { margin-top:4px; font-size:13px; }
.workflow-checks { display:grid; gap:8px; margin-top:12px; }.workflow-checks .check-row { padding:9px 10px; font-size:13px; line-height:1.45; }
.workflow-notes .textarea { min-height:88px; }
.workflow-actions { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }.workflow-actions p { max-width:730px; margin-top:0; font-size:13px; }.workflow-actions .btn:disabled { cursor:not-allowed; opacity:.48; }
.question-meta { display:flex; justify-content:space-between; color:var(--muted); font-weight:750; }
.question-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr); gap:26px; align-items:center; margin-top:18px; }
.question-layout h2 { font-size:26px; line-height:1.35; }
.choice-list { display:grid; gap:10px; margin-top:20px; }
.choice-list button { border:1px solid var(--line); border-radius:10px; background:#fff; padding:14px 16px; color:var(--ink); text-align:left; cursor:pointer; }
.choice-list button:hover { border-color:var(--blue); }
.choice-list button.correct { border-color:#1f9d63; background:#edf9f3; }
.choice-list button.wrong { border-color:#e5484d; background:#fff1f1; }
.confidence { display:flex; align-items:center; gap:10px; margin-top:16px; color:var(--muted); }
.confidence select { border:1px solid var(--line); border-radius:8px; padding:8px; }
.answer-explain { margin-top:18px; padding:16px; border-radius:10px; background:var(--soft); }
.answer-explain.ok { border-left:4px solid #1f9d63; }.answer-explain.bad { border-left:4px solid #e5484d; }
.answer-explain p { margin:8px 0; color:var(--muted); line-height:1.55; }
.answer-explain small { display:block; margin-bottom:14px; color:var(--muted); }
.training-result,.empty-state { padding:48px 28px; border:1px solid var(--line); border-radius:16px; background:#fff; text-align:center; }
.training-result>b { font-size:64px; }.training-result h2,.empty-state h2 { margin-top:10px; font-size:30px; }
.training-result p,.empty-state p { max-width:620px; margin:12px auto 0; color:var(--muted); line-height:1.6; }
.training-result .actions,.empty-state .actions { justify-content:center; }
.empty-state>.btn { margin-top:20px; }
.rule-group,.mistake-group { display:grid; gap:10px; margin-bottom:24px; }
.rule-group h2,.mistake-group h2 { margin-bottom:4px; }
.rule-record,.mistake-record,.review-record { border:1px solid var(--line); border-radius:12px; background:#fff; padding:18px; }
.rule-record b,.mistake-record b { font-size:18px; }.rule-record p,.mistake-record p { margin-top:7px; color:var(--muted); line-height:1.55; }
.rule-record small,.mistake-record small { display:block; margin-top:8px; color:var(--faint); line-height:1.5; }
.review-record { margin-bottom:14px; }.review-head { display:flex; justify-content:space-between; align-items:center; }.review-head strong { font-size:28px; }
.review-record details { margin-top:10px; padding:12px 0 0; border-top:1px solid var(--line); }.review-record summary { cursor:pointer; font-weight:750; }.review-record details p { margin-top:9px; color:var(--muted); line-height:1.55; }
.mistake-record { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; }.mistake-explain { padding-left:20px; border-left:3px solid #e5484d; }
.real-case-lab { margin-top:48px; }
.real-case-heading { margin-bottom:16px; }
.real-case-heading span { color:var(--blue); font-size:13px; font-weight:800; letter-spacing:.08em; }
.real-case-heading h2 { margin-top:5px; font-size:30px; }
.real-case-heading p { margin-top:8px; color:var(--muted); line-height:1.6; }
.real-case-list { display:grid; gap:16px; }
.real-case-notice { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; padding:14px 16px; border:1px solid #e5aa3c; border-radius:12px; background:#fffaf0; color:#5d6470; line-height:1.55; }
.real-case-notice b { color:#704b0b; }
.real-case-card { padding:20px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.025); }
.real-case-card header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; }
.real-case-index { padding:6px 9px; border-radius:7px; background:var(--blue-soft); color:var(--blue); font-size:12px; font-weight:800; }
.real-case-card h3 { font-size:22px; }.real-case-card h3 small { margin-left:6px; color:var(--faint); font-size:13px; }
.real-case-card header p { margin-top:4px; color:var(--muted); font-size:13px; }
.real-case-card header strong { color:#8b5d0c; }
.composite-case-visual { margin-top:16px; padding:10px; border:1px solid var(--line); border-radius:12px; background:#f8fafc; }
.composite-case-chart { display:block; width:100%; height:auto; background:#fff; border-radius:9px; }
.composite-case-visual > p { margin:9px 4px 1px; color:var(--muted); font-size:13px; line-height:1.55; }
.case-course-links,.case-levels { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:16px; }
.case-course-links span,.case-levels span { padding:5px 8px; border-radius:999px; background:var(--soft); color:#4f5967; font-size:12px; }
.case-evidence-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.case-evidence-grid section { padding:15px; border-radius:10px; background:var(--soft-2); }
.case-evidence-grid section:last-child { border-left:3px solid #e5aa3c; }
.case-evidence-grid h4 { margin-bottom:8px; }.case-evidence-grid ul { padding-left:18px; }
.case-evidence-grid li { margin-top:5px; color:var(--muted); line-height:1.55; }
.case-evidence-grid li b { display:inline-block; margin-right:6px; color:#93600a; }
.missingEvidence { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin-top:12px; padding:11px 13px; border:1px dashed #d8a33b; border-radius:9px; background:#fffaf0; color:#6c5a38; font-size:13px; }
.missingEvidence b { color:#8b5d0c; }
.case-scenarios { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px; }
.case-scenarios p { padding:10px; border:1px dashed var(--line); border-radius:8px; color:var(--muted); font-size:13px; line-height:1.5; }
.case-answer { margin-top:14px; padding:13px 15px; border-radius:10px; background:#f7f9fc; }
.case-answer summary { cursor:pointer; color:#273649; font-weight:800; }
.case-answer p { margin-top:11px; line-height:1.65; }.case-answer small { display:block; margin-top:8px; color:var(--muted); line-height:1.55; }

@media (max-width:900px) {
  .visual-pair,.lesson-notes,.question-layout,.mistake-record,.case-evidence-grid,.case-scenarios,.workflow-fields,.workflow-notes,.workflow-steps,.drawing-layout,.drawing-feedback,.daily-mission { grid-template-columns:1fr; }
  .mistake-explain { padding:14px 0 0; border-left:0; border-top:3px solid #e5484d; }
}
@media (max-width:640px) {
  .nav { position:sticky; height:auto; }.nav-inner { display:block; padding:10px 0; }.nav-links { margin-top:9px; padding-bottom:3px; }
  .page-shell { padding-top:0; }.course-hero { padding:62px 0 38px; }.course-hero h1 { font-size:36px; }.course-hero p { font-size:16px; text-align:left; }
  .lesson-summary { grid-template-columns:38px minmax(0,1fr); padding:16px; }.lesson-state { grid-column:2; }.lesson-body { padding:0 14px 16px; }
  .visual-pair figure { padding:8px; }.rule-strip { grid-template-columns:1fr; }.question-card { padding:14px; }.question-layout h2 { font-size:21px; }
  .course-progress { justify-content:flex-start; }.learning-order { justify-content:flex-start; }.daily-workflow,.drawing-lab { padding:16px; }.daily-workflow-head,.workflow-actions,.drawing-lab-head { display:grid; grid-template-columns:1fr; }.workflow-status,.drawing-tip { justify-self:start; }
  .real-case-card header { grid-template-columns:auto minmax(0,1fr); }.real-case-card header strong { grid-column:2; }
  .real-case-notice { grid-template-columns:1fr; }
}