/* 密度页：四列看板需要横向空间；只加宽壳，gutter 走 --sa-topbar-px */
body.trading-dashboard-page {
  --sa-topbar-max-width: 1600px;
  min-height: 100vh;
  margin: 0;
  background: var(--bg-color);
  color: var(--text-primary);
  font-family: var(--font-family-base);
}

@media (min-width: 1680px) {
  body.trading-dashboard-page { --sa-topbar-max-width: 1720px; }
}

@media (min-width: 1920px) {
  body.trading-dashboard-page { --sa-topbar-max-width: 1840px; }
}

@media (max-width: 720px) {
  body.trading-dashboard-page { --sa-topbar-max-width: 100%; }
}

/* 水平 padding 由 .sa-page-shell 提供；此处仅补垂直节奏 */
body.trading-dashboard-page .td-shell.sa-page-shell {
  box-sizing: border-box;
  max-width: var(--sa-topbar-max-width);
  width: 100%;
  margin-inline: auto;
  padding-top: 20px;
  padding-bottom: 40px;
}

.td-section-kicker { margin: 0 0 6px; color: var(--primary-color); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.td-focus, .td-work-section, .td-disclosure { border: 1px solid var(--border-color); border-radius: var(--border-radius-md); background: var(--card-bg); box-shadow: var(--shadow-card); }

.td-focus { padding: 24px; border-left: 4px solid var(--primary-color); }
.td-focus-topline, .td-focus-action-row, .td-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.td-focus-phase { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: 700; }
.td-focus-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.td-chip, .td-status-badge, .td-pill-current { display: inline-flex; align-items: center; gap: 4px; min-height: 25px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.td-chip { border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary); }
.td-chip b { color: var(--primary-color); font-family: var(--font-family-number); }
.td-chip--warn { border-color: rgba(190, 105, 25, .35); background: #fffaf2; color: #8b4a12; }
.td-focus-title { max-width: 56rem; margin: 14px 0 0; color: var(--text-primary); font-size: clamp(25px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -.025em; }
.td-focus-outcome { max-width: 52rem; margin: 10px 0 0; color: var(--text-secondary); font-size: var(--font-size-base); line-height: 1.65; }
.td-focus-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.td-focus-facts > div { min-width: 0; padding: 11px 13px; border: 1px solid var(--border-light); border-radius: var(--border-radius-sm); background: var(--bg-secondary); }
.td-focus-facts span { display: block; margin-bottom: 5px; color: var(--text-tertiary); font-size: 11px; font-weight: 700; }
.td-focus-facts strong { display: block; color: var(--text-primary); font-size: var(--font-size-sm); line-height: 1.5; }
.td-focus-action-row { align-items: center; flex-wrap: wrap; margin-top: 18px; }
.td-focus-progress { display: inline-flex; align-items: baseline; gap: 5px; color: var(--text-secondary); font-size: var(--font-size-xs); }
.td-focus-progress strong { color: var(--primary-color); font-family: var(--font-family-number); font-size: var(--font-size-lg); }
.td-live-meta { margin-left: auto; color: var(--text-tertiary); font-size: var(--font-size-xs); }
.td-focus-note { margin: 13px 0 0; padding-top: 12px; border-top: 1px dashed var(--border-color); color: #8b4a12; font-size: var(--font-size-xs); }

.td-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 13px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--card-bg); color: var(--primary-color); font: inherit; font-size: var(--font-size-xs); font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.td-btn:hover:not(:disabled) { border-color: var(--primary-color); background: var(--primary-light); }.td-btn:active:not(:disabled) { transform: translateY(1px); }.td-btn--primary { border-color: var(--primary-color); background: var(--primary-color); color: #fff; }.td-btn--primary:hover:not(:disabled) { background: var(--primary-hover); color: #fff; }.td-btn--quiet { color: var(--text-secondary); }.td-btn:disabled { opacity: .55; cursor: not-allowed; }

.td-work-section {
  margin-top: 16px;
  padding: 18px 18px 16px;
}
.td-section-head h2 { margin: 0; font-size: var(--font-size-xl); line-height: 1.3; }
.td-section-head p:not(.td-section-kicker) {
  margin: 6px 0 0;
  max-width: 52rem;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.td-milestone-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
  align-items: stretch;
}
.td-board-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 260px;
  padding: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-sm);
  background: var(--bg-secondary);
  overflow: hidden;
}
.td-board-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  border-top: 3px solid var(--text-disabled);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 800;
  background: var(--card-bg);
}
.td-board-col--planned .td-board-col-head { border-top-color: #94a3b8; }
.td-board-col--in_progress .td-board-col-head { border-top-color: var(--primary-color); }
.td-board-col--in_review .td-board-col-head { border-top-color: #d97706; }
.td-board-col--completed .td-board-col-head { border-top-color: var(--success-color, #52c41a); }
.td-board-col-head b {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font-family-number);
  font-size: 12px;
}
.td-board-cards {
  display: grid;
  gap: 10px;
  flex: 1;
  align-content: start;
  padding: 10px;
}
.td-board-empty {
  display: grid;
  place-items: center;
  min-height: 120px;
  margin: 2px;
  padding: 16px 10px;
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  text-align: center;
  background: transparent;
}
.td-milestone {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-sm);
  background: var(--card-bg);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}
.td-milestone.is-current {
  border-color: rgba(26, 86, 167, .42);
  box-shadow: inset 3px 0 0 var(--primary-color);
  background: rgba(26, 86, 167, .04);
}
.td-milestone-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 0; }
.td-milestone-title-row:empty { display: none; }
.td-milestone h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 750;
  line-height: 1.4;
}
.td-milestone p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}
.td-milestone-metric {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--text-secondary) !important;
}
.td-evidence {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(82, 196, 26, .08);
  color: #287115 !important;
  font-size: 11px !important;
  word-break: break-all;
}
.td-pill-current { background: var(--primary-color); color: #fff; }
.td-milestone-actions { display: grid; gap: 6px; }
.td-milestone-actions .td-btn { width: 100%; min-height: 34px; }
.td-progress-detail { color: var(--text-secondary); font-size: var(--font-size-xs); }
.td-progress-detail summary {
  cursor: pointer;
  list-style: none;
  color: var(--text-tertiary);
  font-weight: 700;
}
.td-progress-detail summary::-webkit-details-marker { display: none; }
.td-progress-detail summary::before { content: "＋ "; }
.td-progress-detail[open] summary::before { content: "－ "; }
.td-progress-detail[open] { width: 100%; }
.td-milestone-form { display: grid; gap: 7px; margin-top: 8px; }
.td-milestone-form label { display: grid; gap: 4px; }
.td-milestone-form label span { color: var(--text-tertiary); font-size: 11px; }
.td-milestone-form input,
.td-milestone-form select {
  min-height: 32px;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background: var(--card-bg);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-xs);
  padding: 0 8px;
}
.td-milestone-form button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius-sm);
  background: var(--primary-color);
  color: #fff;
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: 800;
  cursor: pointer;
}

.td-disclosure { margin-top: 12px; overflow: clip; }.td-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; cursor: pointer; list-style: none; }.td-disclosure > summary::-webkit-details-marker { display: none; }.td-disclosure > summary::after { content: "+"; order: 3; color: var(--text-tertiary); font-size: 20px; line-height: 1; }.td-disclosure[open] > summary::after { content: "−"; }.td-disclosure > summary b { display: block; color: var(--text-primary); font-size: var(--font-size-sm); }.td-disclosure > summary small { display: block; margin-top: 3px; color: var(--text-tertiary); font-size: var(--font-size-xs); }.td-disclosure-value { margin-left: auto; color: var(--primary-color); font-size: var(--font-size-xs); font-weight: 800; white-space: nowrap; }.td-disclosure-body { padding: 0 18px 18px; border-top: 1px solid var(--border-light); }

.td-loop-list { display: grid; }.td-loop-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border-light); }.td-loop-item:first-child { border-top: 0; }.td-loop-item.is-focus { margin: 0 -8px; padding-right: 8px; padding-left: 8px; border-radius: var(--border-radius-sm); background: rgba(26, 86, 167, .05); }.td-loop-index { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-light); color: var(--primary-color); font-size: var(--font-size-xs); font-weight: 800; }.td-loop-item h3 { margin: 0; font-size: var(--font-size-sm); }.td-loop-item p { margin: 3px 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.45; }.td-loop-state { display: grid; justify-items: end; gap: 4px; }.td-loop-state small { color: var(--text-tertiary); font-size: 11px; }.td-status-badge--planned, .td-status-badge--not_connected { background: var(--border-light); color: var(--text-tertiary); }.td-status-badge--in_progress { background: var(--primary-light); color: var(--primary-color); }.td-status-badge--in_review { background: #fffaf2; color: #8b4a12; }.td-status-badge--completed, .td-status-badge--available { background: rgba(82, 196, 26, .13); color: #287115; }.td-status-badge--blocked { background: rgba(245, 108, 108, .12); color: var(--down-color); }

.td-engine-section { padding-top: 18px; }.td-engine-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }.td-engine-panel { margin-top: 14px; }.td-engine-meta { display: flex; gap: 14px; margin-bottom: 8px; color: var(--text-tertiary); font-size: var(--font-size-xs); }.td-engine-status.is-busy { color: var(--primary-color); font-weight: 800; }.td-engine-status.is-error { color: #b91c1c; font-weight: 800; }.td-engine-status.is-ok { color: #15803d; font-weight: 800; }.td-prompt-label { display: block; margin-bottom: 5px; color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: 700; }.td-prompt-box { width: 100%; min-height: 135px; box-sizing: border-box; padding: 11px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-secondary); color: var(--text-primary); font-family: var(--font-family-number, ui-monospace, monospace); font-size: 12px; line-height: 1.55; resize: vertical; }.td-verify-cmds { margin: 8px 0 0; color: var(--text-tertiary); font-size: var(--font-size-xs); }

.td-status-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--border-radius-sm); background: var(--border-light); }.td-status-item { min-width: 0; padding: 14px; background: var(--card-bg); }.td-status-item span, .td-status-item p { color: var(--text-tertiary); font-size: var(--font-size-xs); }.td-status-item strong { display: block; margin-top: 5px; color: var(--text-primary); font-size: var(--font-size-lg); }.td-status-item p { margin: 6px 0 0; line-height: 1.45; }.td-status-item a { display: inline-block; margin-top: 8px; color: var(--primary-color); font-size: var(--font-size-xs); font-weight: 800; text-decoration: none; }
.td-phase-counts { display: flex; gap: 14px; margin: 14px 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); }.td-phase-counts b { color: var(--text-primary); font-family: var(--font-family-number); }.td-phase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }.td-phase-card { display: flex; justify-content: space-between; gap: 12px; padding: 13px; border: 1px solid var(--border-light); border-left: 3px solid var(--text-disabled); border-radius: var(--border-radius-sm); }.td-phase-card--in_progress { border-left-color: var(--info-color); }.td-phase-card--completed { border-left-color: var(--success-color); }.td-phase-card h3 { margin: 3px 0 0; font-size: var(--font-size-sm); }.td-phase-card p { margin: 5px 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.45; }.td-phase-number { color: var(--text-tertiary); font-size: 11px; font-weight: 800; }.td-phase-actions { display: flex; flex: none; flex-direction: column; align-items: end; gap: 6px; }.td-phase-actions button { min-height: 30px; padding: 0 8px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--card-bg); color: var(--primary-color); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }.td-log-section { margin-top: 20px; }.td-log-section h2 { margin: 0; font-size: var(--font-size-base); }.td-log-list { display: grid; margin-top: 9px; }.td-log-item { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--border-light); }.td-log-item time { color: var(--text-tertiary); font-size: var(--font-size-xs); }.td-log-item strong { font-size: var(--font-size-sm); }.td-log-item p { margin: 3px 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); }.td-loading, .td-empty { padding: 16px; color: var(--text-secondary); font-size: var(--font-size-sm); text-align: center; }.td-empty--error { color: var(--down-color); }

@media (max-width: 1200px) {
  .td-milestone-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .td-board-col { min-height: 200px; }
}
@media (max-width: 820px) {
  body.trading-dashboard-page .td-shell.sa-page-shell { padding-top: 16px; padding-bottom: 28px; }
  .td-focus { padding: 18px; }
  .td-work-section { padding: 14px; }
  .td-focus-facts, .td-status-panel, .td-phase-grid { grid-template-columns: 1fr; }
  .td-focus-meta { justify-content: flex-start; }
  .td-live-meta { width: 100%; margin-left: 0; }
  .td-phase-actions { flex-direction: row; flex-wrap: wrap; align-items: start; }
}
@media (max-width: 640px) {
  .td-focus-topline, .td-focus-action-row, .td-section-head { flex-direction: column; align-items: flex-start; }
  .td-focus-title { font-size: 27px; }
  .td-focus-facts { gap: 8px; }
  .td-disclosure > summary { padding: 14px; }
  .td-disclosure-body { padding: 0 14px 14px; }
  .td-disclosure-value { margin-left: 0; }
  .td-loop-item { grid-template-columns: 28px minmax(0, 1fr); }
  .td-loop-state { grid-column: 2; justify-items: start; }
  .td-milestone-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .td-board-col {
    flex: 0 0 min(78vw, 300px);
    min-height: 220px;
    scroll-snap-align: start;
  }
  .td-engine-actions { justify-content: flex-start; }
  .td-log-item { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .td-btn { transition: none; } }