:root {
  color-scheme: light;
  --bg: #f3efe6;
  --surface: #fffdf8;
  --line: #e3dccb;
  --text: #26221a;
  --muted: #837a66;
  --red: #bf3a2b;
  --green: #2e7d54;
  --blue: #2c5d8f;
  --amber: #a16a08;
  --ink: #1d1a13;
  /* 编辑风新增令牌 */
  --vermilion: #bf3a2b;
  --serif: "Songti SC", "Noto Serif SC", "SimSun", Georgia, "Times New Roman", serif;
  --paper-shadow: 0 1px 2px rgba(38, 30, 15, 0.04), 0 6px 18px rgba(38, 30, 15, 0.05);
  --paper-shadow-hover: 0 2px 4px rgba(38, 30, 15, 0.05), 0 10px 28px rgba(38, 30, 15, 0.08);
  --hairline: #d8d0bb;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    repeating-linear-gradient(0deg, rgba(38, 30, 15, 0.014) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(38, 30, 15, 0.011) 0 1px, transparent 1px 28px),
    radial-gradient(1200px 500px at 50% -160px, rgba(255, 252, 243, 0.9), transparent),
    var(--bg);
  color: var(--text);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.pwa-standalone .topbar {
  padding-top: max(14px, env(safe-area-inset-top));
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}

h1, h2, p {
  margin: 0;
}

h1 {
  font-size: 18px;
}

h2 {
  font-size: 15px;
}

h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.brand p {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.tabs {
  display: flex;
  gap: 6px;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  padding: 3px;
  border-radius: 8px;
  background: #f2f4f7;
}

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

button {
  min-height: 32px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 6px;
  padding: 0 14px;
  cursor: pointer;
}

button:hover {
  border-color: #a8b1bd;
}

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

.button-link {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  display: inline-flex;
  font-weight: 700;
  min-height: 32px;
  padding: 0 14px;
  text-decoration: none;
}

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

.button-link.small {
  font-size: 12px;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
}

.button-link.disabled {
  color: #98a2b3;
  pointer-events: none;
}

button.tab {
  border: 0;
  background: transparent;
  min-width: 86px;
  white-space: nowrap;
}

button.tab.active {
  background: #fff;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.12);
}

main {
  padding: 18px clamp(14px, 1.7vw, 28px) 40px;
  max-width: min(1920px, calc(100vw - 24px));
  margin: 0 auto;
}

.pwa-install-card {
  align-items: center;
  background: linear-gradient(135deg, #111827, #243b53 58%, #c7372f);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(17, 24, 39, .18);
  color: #fff;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 14px auto 0;
  max-width: min(1400px, calc(100vw - 28px));
  padding: 14px 16px;
}

.pwa-install-card strong,
.pwa-install-card span {
  display: block;
}

.pwa-install-card span {
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 3px;
}

.pwa-install-steps {
  color: rgba(255, 255, 255, .9);
  display: grid;
  gap: 4px;
  line-height: 1.55;
  margin: 8px 0 0;
  padding-left: 18px;
}

.pwa-install-steps li {
  padding-left: 2px;
}

.pwa-install-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.pwa-install-actions button {
  border-color: rgba(255, 255, 255, .28);
}

.pwa-install-actions button:not(.primary) {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.toolband {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-bottom: 10px;
}

.quickbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.quickbar button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

.field {
  display: grid;
  gap: 6px;
}

.field.grow {
  max-width: 420px;
  width: min(420px, 100%);
}

.field span,
.note-grid span {
  font-size: 12px;
  color: var(--muted);
}

input, select, textarea {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
}

input, select {
  height: 34px;
  padding: 0 10px;
}

textarea {
  min-height: 118px;
  padding: 10px;
  resize: vertical;
}

.alert {
  padding: 10px 12px;
  border: 1px solid #f2b8b5;
  color: #8f1d18;
  background: #fff3f2;
  border-radius: 6px;
  margin-bottom: 14px;
}

.hidden {
  display: none;
}

.muted {
  color: var(--muted);
  font-size: 12px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.metric {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  min-height: 78px;
}

.metric .label {
  color: var(--muted);
  font-size: 12px;
}

.metric .value {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.index-metric {
  min-width: 320px;
}

.index-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.index-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.index-row strong {
  font-size: 14px;
  white-space: nowrap;
}

.index-row.benchmark {
  padding: 7px 8px;
  border-radius: 6px;
  background: #fff7e6;
  color: var(--ink);
}

.index-row.benchmark span {
  font-weight: 800;
}

.index-row.benchmark strong {
  font-size: 22px;
}

.metric .sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.deviation-metrics {
  grid-template-columns: minmax(320px, 1.35fr) minmax(260px, 1fr) minmax(360px, 1.4fr);
}

.stock-price-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.stock-price-title {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.stock-price-title strong {
  font-size: 23px;
  color: var(--ink);
}

.stock-price-title span {
  color: var(--muted);
  font-size: 13px;
}

.deviation-alert-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
  padding: 16px;
}

.deviation-alert-card {
  display: grid;
  gap: 11px;
  width: 100%;
  padding: 18px 20px;
  border: 1px solid #edf0f5;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fffdfb 100%);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.06);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.deviation-alert-card:hover {
  transform: translateY(-2px);
  border-color: #f2b8b5;
  box-shadow: 0 16px 34px rgba(180, 35, 24, 0.11);
}

.deviation-alert-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: baseline;
}

.deviation-alert-top strong {
  font-size: 20px;
  color: var(--ink);
}

.deviation-alert-top > span {
  font-size: 20px;
  font-weight: 800;
}

.deviation-alert-top em {
  grid-column: 1 / -1;
  font-style: normal;
  color: var(--ink);
  font-size: 16px;
}

.deviation-alert-top b {
  color: var(--red);
}

.deviation-alert-trigger {
  color: var(--ink);
  font-size: 15px;
}

.deviation-alert-trigger span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-right: 8px;
  padding: 0 8px;
  border-radius: 6px;
  background: #f59e0b;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.deviation-alert-muted,
.deviation-alert-rule {
  color: #98a2b3;
  font-size: 13px;
  line-height: 1.5;
}

.deviation-watch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 0 16px 16px;
}

.deviation-watch-card {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98)),
    #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
  overflow: hidden;
}

.deviation-watch-card .table-wrap.compact {
  max-height: 520px;
  overflow: auto;
}

.deviation-watch-card.monitoring-card {
  border-color: rgba(199, 55, 47, 0.18);
}

.deviation-watch-card.warning-card {
  border-color: rgba(245, 158, 11, 0.24);
}

.deviation-watch-card .mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 13px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.82);
  background:
    radial-gradient(circle at top left, rgba(199, 55, 47, 0.11), transparent 38%),
    linear-gradient(135deg, #fff 0%, #fff8f5 100%);
}

.warning-card .mini-head {
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.14), transparent 38%),
    linear-gradient(135deg, #fff 0%, #fffbeb 100%);
}

.deviation-watch-card .mini-head strong {
  color: var(--ink);
  display: block;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.deviation-watch-card .mini-head small {
  color: #758195;
  display: block;
  font-size: 11px;
  margin-top: 3px;
}

.watch-count {
  align-items: baseline;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  color: #64748b;
  display: inline-flex;
  gap: 4px;
  padding: 6px 10px;
  white-space: nowrap;
}

.watch-count b {
  color: var(--red);
  font-size: 18px;
  line-height: 1;
}

.warning-card .watch-count b {
  color: #d97706;
}

.watch-notice {
  background: #fffbeb;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
  color: #92400e;
  font-size: 13px;
  line-height: 1.6;
  padding: 10px 18px;
}

.watch-count span {
  font-size: 11px;
  font-weight: 800;
}

.table-wrap.compact {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.watch-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 15px;
}

.watch-table th {
  background: #f8fafc;
  border-bottom: 1px solid rgba(226, 232, 240, 0.88);
  color: #64748b;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 11px 11px;
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  white-space: nowrap;
}

.watch-table td {
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(226, 232, 240, 0.66);
  color: var(--text);
  padding: 13px 11px;
  vertical-align: middle;
}

.watch-table tbody tr:last-child td {
  border-bottom: 0;
}

.watch-table tr[data-query] {
  cursor: pointer;
}

.watch-table tr[data-query]:hover td {
  background: #fff7ed;
}

.watch-table tr.watch-row-hot:hover td {
  background: #fff5f2;
}

.watch-rank {
  align-items: center;
  background: linear-gradient(135deg, #fee2e2, #fff7ed);
  border: 1px solid rgba(248, 113, 113, 0.24);
  border-radius: 999px;
  color: var(--red);
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  height: 26px;
  justify-content: center;
  min-width: 26px;
}

.watch-row-warn .watch-rank {
  background: linear-gradient(135deg, #fef3c7, #fff7ed);
  border-color: rgba(245, 158, 11, 0.26);
  color: #b45309;
}

.watch-code {
  color: #64748b;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  font-weight: 800;
}

.watch-name {
  color: var(--ink);
  display: block;
  font-size: 17px;
  letter-spacing: 0.01em;
}

.watch-sub {
  color: #8a94a6;
  display: block;
  font-size: 13px;
  line-height: 1.45;
  margin-top: 2px;
}

.watch-period {
  color: #334155;
  display: block;
  font-weight: 800;
}

.watch-theme {
  background: #f1f5f9;
  border-radius: 999px;
  color: #475569;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  max-width: 108px;
  overflow: hidden;
  padding: 4px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-pct {
  display: inline-block;
  font-size: 18px;
  min-width: 54px;
}

.watch-price {
  color: #334155;
  font-weight: 800;
}

.watch-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #fff7ed;
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: #9a3412;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.watch-tag.danger {
  background: #fef3f2;
  border-color: rgba(199, 55, 47, 0.18);
  color: #b42318;
}

.metric-stack {
  display: grid;
  gap: 2px;
}

.metric-stack .red,
.metric-stack .green {
  font-size: 11px;
  font-weight: 700;
}

.red {
  color: var(--red) !important;
}

.green {
  color: var(--green) !important;
}

.amber {
  color: var(--amber) !important;
}

.strong {
  font-weight: 700;
  color: var(--ink);
}

.split {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.05fr);
  gap: 14px;
  margin-bottom: 14px;
}

.split.wide {
  grid-template-columns: minmax(520px, 1.3fr) minmax(280px, 0.7fr);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ghost-btn {
  min-height: 30px;
  border-color: rgba(35, 100, 170, 0.22);
  background: #f8fbff;
  color: #24527f;
  font-size: 12px;
  font-weight: 700;
}

.ghost-btn:hover {
  border-color: rgba(35, 100, 170, 0.42);
  background: #eef6ff;
}

.ai-toolbar {
  justify-content: flex-end;
}

.ai-entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.ai-entry-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fcfdff;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.ai-entry-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ai-entry-result {
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.ai-entry-field {
  display: grid;
  gap: 5px;
}

.ai-entry-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.ai-entry-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ai-meta {
  color: var(--muted);
  font-size: 12px;
}

.ai-workflow-tag {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #36506f;
  background: #eef5ff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 8px;
}

.ai-analysis {
  margin-top: 8px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
  white-space: pre-wrap;
  line-height: 1.55;
}

.ai-table-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.ai-table-pick span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #fff1ed;
  color: var(--red);
  font-size: 12px;
}

.ai-table-pick.trend {
  margin-top: 8px;
}

.ai-table-pick.trend span {
  background: #eef5ff;
  color: #2364aa;
}

.ai-table-result {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
}

.ai-table-meta {
  margin-top: 6px;
  max-height: 5.2em;
  overflow: hidden;
}

.ai-pending {
  color: var(--muted);
}

.ai-equity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.ai-equity-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.ai-equity-head,
.ai-equity-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ai-equity-head span,
.ai-equity-label {
  color: var(--muted);
  font-size: 12px;
}

.ai-equity-lines {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.ai-spark-wrap {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
  margin-top: 4px;
}

.ai-spark-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #98a2b3;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
}

.ai-spark {
  display: block;
  width: 100%;
  height: 58px;
  overflow: visible;
}

.ai-spark-grid line {
  stroke: #f0f2f5;
  stroke-width: 1;
}

.ai-spark-baseline {
  stroke: #e5e7eb;
  stroke-width: 1;
}

.ai-spark polyline {
  fill: none;
  stroke: var(--red);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.ai-equity-lines > div:nth-child(2) .ai-spark polyline {
  stroke: #2364aa;
}

.ai-spark-empty {
  height: 58px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: 12px;
}

.intro-panel {
  max-width: 980px;
  margin: 18px auto;
}

.intro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  padding: 16px;
}

.intro-grid > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.intro-grid p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
}

.intro-grid button {
  min-height: 38px;
  width: 148px;
  font-weight: 700;
}

.trend-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid #d7cdb9;
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 20%, rgba(199, 55, 47, 0.14), transparent 30%),
    linear-gradient(135deg, #fffaf0 0%, #f7f0df 48%, #eef4ed 100%);
  box-shadow: 0 12px 28px rgba(79, 64, 36, 0.08);
}

.trend-hero::after {
  content: "";
  position: absolute;
  inset: auto -40px -80px auto;
  width: 300px;
  height: 180px;
  background: repeating-linear-gradient(135deg, rgba(35, 100, 170, 0.16) 0 2px, transparent 2px 12px);
  transform: rotate(-4deg);
}

.trend-hero h2 {
  position: relative;
  margin: 6px 0 8px;
  color: #2b2114;
  font-size: 28px;
  letter-spacing: 0.02em;
}

.trend-hero p {
  position: relative;
  max-width: 660px;
  color: #655d4f;
  line-height: 1.7;
}

.eyebrow {
  color: #9b3a2f !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.trend-rule-card {
  position: relative;
  z-index: 1;
  min-width: 260px;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(43, 33, 20, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  color: #514635;
  font-size: 12px;
}

.trend-rule-card strong {
  color: #2b2114;
  font-size: 15px;
}

.ladder-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid #f0c7c2;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(199, 55, 47, 0.12), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(199, 55, 47, 0.16), transparent 34%),
    #fff8f7;
}

.ladder-hero h2 {
  margin: 6px 0 8px;
  color: #3b1411;
  font-size: 28px;
}

.ladder-hero p {
  max-width: 700px;
  color: #6b4a46;
  line-height: 1.7;
}

.ladder-date-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  gap: 10px;
  min-width: 470px;
  padding: 14px;
  border: 1px solid rgba(199, 55, 47, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}

.ladder-date-card .field {
  min-width: 150px;
}

.ladder-panel {
  overflow: hidden;
  border-radius: 12px;
}

.ladder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.72fr);
  gap: 14px;
  padding: 14px;
  background:
    radial-gradient(circle at 16% 0, rgba(199, 55, 47, 0.07), transparent 28%),
    #fff;
}

.ladder-board {
  display: grid;
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
  padding: 14px;
  background:
    linear-gradient(90deg, rgba(17, 24, 39, 0.03), rgba(199, 55, 47, 0.05)),
    #fffdfd;
  border: 1px solid #f1e4e2;
  border-radius: 12px;
}

.ladder-tier {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 34px minmax(220px, 1fr);
  align-items: stretch;
  gap: 0;
  border: 1px solid #edf0f2;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.ladder-tier.days-3 {
  grid-template-columns: minmax(190px, 1fr) 34px minmax(190px, 1fr) 34px minmax(190px, 1fr);
}

.ladder-column {
  min-width: 0;
  background: #f8f9fb;
}

.ladder-column.today {
  background: #fff1f3;
}

.ladder-column-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 42px;
  padding: 10px;
  color: #3f4654;
  background: rgba(17, 24, 39, 0.05);
  font-weight: 900;
}

.ladder-column.today .ladder-column-title,
.ladder-first-board .ladder-column-title {
  color: #c7372f;
  background: #ffe4e7;
}

.ladder-column-title span {
  font-size: 13px;
}

.ladder-arrow {
  display: grid;
  place-items: center;
  color: #c7372f;
  background:
    linear-gradient(180deg, transparent 0 45%, rgba(199, 55, 47, 0.18) 45% 55%, transparent 55%),
    #fff;
  font-size: 22px;
  font-weight: 900;
}

.ladder-list {
  display: grid;
}

.ladder-stock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  width: 100%;
  min-height: 54px;
  padding: 9px 12px;
  border: 0;
  border-top: 1px solid #fff;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.ladder-stock:hover {
  background: rgba(255, 255, 255, 0.72);
}

.ladder-stock.promoted {
  background: rgba(255, 255, 255, 0.54);
}

.ladder-stock.broken {
  opacity: 0.72;
}

.ladder-stock.new {
  background: rgba(255, 255, 255, 0.5);
}

.ladder-stock-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.ladder-stock-main strong {
  color: #1f2937;
  display: block;
  font-size: 16px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ladder-stock-main small {
  color: var(--muted);
  font-size: 11px;
}

.ladder-stock-pct {
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.ladder-stock em {
  grid-column: 1 / -1;
  overflow: hidden;
  color: #7a8290;
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ladder-empty {
  min-height: 54px;
  display: grid;
  place-items: center;
  color: #c0c6cf;
}

.ladder-first-board {
  border: 1px solid #f2cbd0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff5f6;
}

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

.ladder-compare-card {
  align-self: start;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e7e9ee;
  border-radius: 12px;
  background: #f7f8fa;
  box-shadow: inset 10px 0 18px -20px rgba(17, 24, 39, 0.24);
}

.ladder-compare-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #e6e8ed;
  background: #fff;
}

.ladder-compare-head strong {
  color: #2d3340;
  font-size: 16px;
}

.ladder-compare-head span {
  color: var(--muted);
  font-size: 12px;
}

.ladder-compare-empty {
  padding: 18px;
  color: var(--muted);
}

.ladder-compare-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  color: #7a8290;
  background:
    linear-gradient(90deg, rgba(199, 55, 47, 0.08), rgba(255, 255, 255, 0.78)),
    #fff;
  font-size: 12px;
}

.ladder-compare-toolbar span:first-child {
  color: #c7372f;
  font-weight: 800;
}

.ladder-compare-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 10px;
  scrollbar-color: #c7372f #eceff3;
  scrollbar-width: thin;
}

.ladder-compare-scroll::-webkit-scrollbar {
  height: 12px;
}

.ladder-compare-scroll::-webkit-scrollbar-track {
  background: #eceff3;
  border-radius: 999px;
}

.ladder-compare-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #c7372f, #e18b64);
  border: 3px solid #eceff3;
  border-radius: 999px;
}

.ladder-compare-table {
  min-width: calc(86px + 20 * 108px);
  border-collapse: collapse;
  table-layout: fixed;
  color: #2f3541;
  font-size: 13px;
}

.ladder-compare-table th,
.ladder-compare-table td {
  border: 1px solid #fff;
  background: #f1f2f4;
  vertical-align: top;
}

.ladder-compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 42px;
  color: #3f4654;
  background: #e6e7ea;
  font-size: 15px;
  font-weight: 900;
}

.ladder-compare-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 72px;
  color: #404653;
  background: #e5e6e8;
  font-size: 15px;
  font-weight: 900;
}

.ladder-compare-table td {
  width: 108px;
  min-height: 54px;
  padding: 8px 8px;
}

.ladder-compare-stock {
  display: block;
  width: 100%;
  margin: 0 0 5px;
  padding: 4px 3px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #2f3541;
  font: inherit;
  line-height: 1.25;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: normal;
  white-space: normal;
  cursor: pointer;
}

.ladder-compare-stock:hover {
  background: rgba(199, 55, 47, 0.1);
  color: #c7372f;
}

.ladder-compare-blank {
  display: block;
  color: #c2c6ce;
  line-height: 28px;
  text-align: center;
}

.trend-toolbar {
  align-items: end;
  flex-wrap: wrap;
}

.trend-subtabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  margin: 0 0 14px;
  border: 1px solid #dfe6ef;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.05);
}

.trend-subtab {
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  color: #475467;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.trend-subtab.active {
  color: #ffffff;
  background: linear-gradient(135deg, #b91c1c, #d97706);
  box-shadow: 0 8px 18px rgba(185, 28, 28, 0.18);
}

.trend-subview.active {
  display: block;
}

.trend-panel {
  border-radius: 12px;
}

.trend-backtest-panel {
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 0%, rgba(199, 55, 47, 0.08), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(15, 118, 110, 0.09), transparent 30%),
    #ffffff;
}

.trend-backtest-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.field.compact {
  min-width: 132px;
}

.trend-backtest-status {
  padding: 0 14px 10px;
}

.trend-backtest-metrics {
  padding: 0 14px 12px;
}

.trend-backtest-audit {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin: 0 14px 14px;
  padding: 12px 14px;
  border: 1px dashed rgba(185, 28, 28, 0.28);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.92), rgba(255, 255, 255, 0.92));
  color: #6b4f28;
}

.trend-backtest-audit strong {
  color: #9f1239;
}

.trend-backtest-audit span {
  line-height: 1.6;
}

.trend-backtest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  padding: 0 14px 14px;
}

.trend-backtest-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #dfe6ef;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.05);
}

.trend-backtest-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: #64748b;
}

.trend-backtest-card.good::before {
  background: #c7372f;
}

.trend-backtest-card.watch::before {
  background: #b86b00;
}

.trend-backtest-card.weak::before {
  background: #137a4c;
}

.trend-backtest-card.thin::before {
  background: #94a3b8;
}

.trend-backtest-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.trend-backtest-card-head strong {
  color: #152237;
  font-size: 15px;
}

.trend-backtest-card-head span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.trend-backtest-rate {
  color: #111827;
  font-size: 34px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
}

.trend-backtest-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.trend-backtest-mini em {
  padding: 4px 7px;
  border-radius: 8px;
  background: #f8fafc;
  color: #667085;
  font-size: 12px;
  font-style: normal;
}

.trend-backtest-lower {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(440px, 1.05fr);
  align-items: stretch;
  gap: 12px;
  padding: 0 14px 14px;
}

.trend-backtest-lower > div {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mini-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: #152237;
}

.mini-section-head span {
  color: var(--muted);
  font-size: 12px;
}

.trend-backtest-table-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.trend-backtest-filter-stats {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #e4e9f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.trend-backtest-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.trend-backtest-filter select {
  min-width: 118px;
  padding: 7px 28px 7px 10px;
  border: 1px solid #d8e0ea;
  border-radius: 999px;
  background: #ffffff;
  color: #172033;
  font-weight: 800;
}

.compact-curves {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  padding: 0;
}

.compact-curves .signal-curve-card {
  padding: 12px;
}

.trend-backtest-table-wrap {
  flex: 1;
  min-height: 760px;
  max-height: 920px;
  overflow: auto;
  border: 1px solid #e4e9f0;
  border-radius: 14px;
}

.trend-backtest-table {
  min-width: 760px;
}

.trend-backtest-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
}

.trend-backtest-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.trend-backtest-pending {
  display: inline-block !important;
  width: fit-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b !important;
  font-weight: 800;
}

.trend-backtest-notes {
  padding: 0 14px 14px;
}

.trend-analysis-panel {
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 247, 237, 0.82), rgba(255, 255, 255, 0.96) 42%),
    radial-gradient(circle at 92% 0%, rgba(199, 55, 47, 0.08), transparent 32%),
    #ffffff;
}

.trend-analysis-status {
  padding: 0 14px 12px;
}

.trend-rule-toggles {
  display: grid;
  gap: 10px;
  margin: 0 14px 14px;
  padding: 14px;
  border: 1px solid #ead8c6;
  border-radius: 16px;
  background: rgba(255, 251, 247, 0.86);
}

.trend-rule-toggle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.trend-rule-toggle-head strong {
  color: #9f1239;
  font-size: 16px;
}

.trend-rule-toggle-head span {
  color: var(--muted);
  font-size: 12px;
}

.trend-rule-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.trend-rule-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e4e9f0;
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.trend-rule-toggle:hover,
.trend-rule-toggle.enabled {
  border-color: rgba(199, 55, 47, 0.38);
  box-shadow: 0 10px 22px rgba(185, 28, 28, 0.08);
  transform: translateY(-1px);
}

.trend-rule-toggle input {
  margin-top: 4px;
  accent-color: #c7372f;
}

.trend-rule-toggle strong,
.trend-rule-toggle em,
.trend-rule-toggle small {
  display: block;
}

.trend-rule-toggle strong {
  color: #152237;
  font-size: 14px;
}

.trend-rule-toggle em {
  margin-top: 2px;
  color: #b45309;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.trend-rule-toggle small {
  margin-top: 6px;
  color: #667085;
  line-height: 1.5;
}

.trend-analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 14px;
  padding: 0 14px 14px;
}

.trend-analysis-card {
  display: grid;
  gap: 13px;
  padding: 16px;
  border: 1px solid #dfe6ef;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98)),
    #ffffff;
  box-shadow: 0 14px 30px rgba(17, 24, 39, 0.06);
}

.trend-analysis-card-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
}

.trend-analysis-card h3 {
  margin: 0 0 6px;
  color: #111827;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.trend-analysis-card p {
  margin: 0;
  color: #475467;
  line-height: 1.6;
}

.trend-analysis-score {
  min-width: 108px;
  padding: 10px;
  border-radius: 14px;
  background: #fff7ed;
  text-align: center;
}

.trend-analysis-score span,
.trend-analysis-score em {
  display: block;
  color: #9a3412;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.trend-analysis-score strong {
  display: block;
  margin: 4px 0;
  color: #c7372f;
  font-size: 26px;
  letter-spacing: -0.04em;
}

.trend-analysis-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.trend-analysis-metrics span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

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

.strategy-condition-block {
  padding: 11px;
  border: 1px solid #e4e9f0;
  border-radius: 14px;
  background: #ffffff;
}

.strategy-condition-block strong,
.failure-analysis > strong,
.suggested-rules > strong {
  display: block;
  margin-bottom: 7px;
  color: #152237;
  font-size: 13px;
}

.strategy-condition-block ul,
.failure-analysis ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.strategy-condition-block li {
  color: #475467;
  font-size: 13px;
  line-height: 1.55;
}

.failure-analysis {
  padding: 12px;
  border-radius: 14px;
  background: #f8fafc;
}

.failure-analysis li {
  padding: 9px 10px;
  border-left: 3px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
}

.failure-analysis li.warn {
  border-left-color: #d97706;
  background: #fff7ed;
}

.failure-analysis li.weak {
  border-left-color: #c7372f;
  background: #fff1f2;
}

.failure-analysis li strong,
.failure-analysis li span {
  display: block;
}

.failure-analysis li strong {
  color: #152237;
  font-size: 13px;
}

.failure-analysis li span {
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
  line-height: 1.55;
}

.suggested-rules {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.suggested-rules strong {
  margin: 0;
}

.suggested-rule-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(199, 55, 47, 0.28);
  border-radius: 999px;
  padding: 7px 11px;
  color: #9f1239;
  background: #fff7ed;
  font-weight: 800;
  cursor: pointer;
}

.suggested-rule-option:hover,
.suggested-rule-option.enabled {
  background: #fee2e2;
}

.suggested-rule-option input {
  accent-color: #c7372f;
}

.trend-analysis-notes {
  padding: 0 14px 14px;
}

.trend-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  padding: 14px;
}

.trend-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 360px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.trend-card:hover,
.trend-card:focus-visible {
  border-color: color-mix(in srgb, var(--trend-color) 42%, var(--line));
  box-shadow: 0 16px 32px rgba(17, 24, 39, 0.1);
  transform: translateY(-2px);
  outline: none;
}

.trend-card.fresh-buy {
  border-color: color-mix(in srgb, var(--trend-color) 58%, #ffffff);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--trend-color) 18%, transparent);
}

.trend-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--trend-color, var(--blue));
}

.trend-card.fresh-buy::after {
  content: "买点优先";
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 1;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff;
  background: var(--trend-color, var(--red));
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.trend-card.up {
  --trend-color: #c7372f;
}

.trend-card.early {
  --trend-color: #d95f18;
}

.trend-card.sideways {
  --trend-color: #2364aa;
}

.trend-card.sammi {
  --trend-color: #9f3a8c;
}

.trend-card.multiwave {
  --trend-color: #0f766e;
}

.trend-card.wind {
  --trend-color: #b45309;
}

.trend-card.pullback {
  --trend-color: #b86b00;
}

.trend-card.hold {
  --trend-color: #137a4c;
}

.signal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  margin-bottom: 16px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid #cbd7e6;
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 18%, rgba(19, 122, 76, 0.16), transparent 26%),
    radial-gradient(circle at 82% 20%, rgba(35, 100, 170, 0.16), transparent 30%),
    linear-gradient(135deg, #f7fbf6 0%, #f4f7ff 56%, #fff8ef 100%);
  box-shadow: 0 18px 42px rgba(24, 44, 69, 0.08);
}

.signal-hero h2 {
  margin: 5px 0 9px;
  color: #152237;
  font-size: 30px;
}

.signal-hero p {
  max-width: 900px;
  color: #52606d;
  line-height: 1.75;
}

.signal-rule-card {
  display: grid;
  gap: 8px;
  align-content: center;
  padding: 18px;
  border: 1px solid rgba(35, 100, 170, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.signal-rule-card strong {
  color: #152237;
}

.signal-rule-card span {
  color: #667085;
  font-size: 13px;
}

.checkline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  color: var(--muted);
  font-size: 13px;
}

.signal-panel {
  border-radius: 16px;
}

.ai-signal-panel {
  margin-top: 16px;
}

.ai-signal-panel .signal-hero {
  margin: 14px;
}

.ai-signal-panel > .toolband {
  margin: 0 14px 12px;
}

.watch-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  margin-bottom: 16px;
  padding: 26px;
  overflow: hidden;
  border: 1px solid #cfd8df;
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 15%, rgba(199, 55, 47, 0.14), transparent 24%),
    radial-gradient(circle at 82% 22%, rgba(19, 122, 76, 0.15), transparent 30%),
    linear-gradient(135deg, #fffaf3 0%, #f8fbff 48%, #f3faf6 100%);
  box-shadow: 0 20px 48px rgba(24, 44, 69, 0.08);
}

.watch-hero h2 {
  margin: 4px 0 10px;
  color: #132033;
  font-size: 31px;
}

.watch-hero p {
  max-width: 920px;
  color: #52606d;
  line-height: 1.75;
}

.watch-hero-card {
  display: grid;
  gap: 9px;
  align-content: center;
  padding: 18px;
  border: 1px solid rgba(199, 55, 47, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.watch-hero-card strong {
  color: #172033;
}

.watch-hero-card span {
  color: #667085;
  font-size: 13px;
}

.watch-toolbar {
  margin-bottom: 14px;
}

.watch-health-panel .metric-grid {
  padding: 0 14px 12px;
}

.data-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  padding: 0 14px 14px;
}

.health-card {
  display: grid;
  gap: 9px;
  min-height: 136px;
  padding: 14px;
  border: 1px solid #dfe6ef;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f8fafc);
}

.health-card.ok {
  border-color: rgba(22, 163, 74, 0.24);
  background: linear-gradient(180deg, #ffffff, #f2fbf5);
}

.health-card.degraded,
.health-card.stale,
.health-card.missing {
  border-color: rgba(217, 119, 6, 0.28);
  background: linear-gradient(180deg, #ffffff, #fff8ed);
}

.health-card.failed {
  border-color: rgba(220, 38, 38, 0.28);
  background: linear-gradient(180deg, #ffffff, #fff1f1);
}

.health-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.health-card-top strong {
  color: #152237;
  font-size: 15px;
}

.health-card-top span {
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
}

.health-card.ok .health-card-top span {
  background: #dcfce7;
  color: #15803d;
}

.health-card.failed .health-card-top span {
  background: #fee2e2;
  color: #b42318;
}

.health-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.health-card-meta em {
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  color: #667085;
  font-size: 12px;
  font-style: normal;
}

.health-card p {
  margin: 0;
  color: #52606d;
  font-size: 13px;
  line-height: 1.55;
}

.health-card small {
  color: #98a2b3;
}

.watch-subtabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
  padding: 7px;
  border: 1px solid #e4e9f0;
  border-radius: 999px;
  background: #f8fafc;
}

.watch-subtab {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  color: #475467;
  background: transparent;
  font-weight: 800;
}

.watch-subtab.active {
  color: #fff;
  background: #152237;
  box-shadow: 0 10px 22px rgba(21, 34, 55, 0.18);
}

.watch-subview.hidden {
  display: none;
}

.watch-subview.active {
  display: block;
}

.cache-schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  padding: 14px;
}

.cache-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dfe6ef;
  border-radius: 15px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.cache-card.fresh {
  border-color: rgba(22, 163, 74, 0.22);
  background: linear-gradient(180deg, #ffffff, #f3fbf6);
}

.cache-card.stale {
  border-color: rgba(217, 119, 6, 0.28);
  background: linear-gradient(180deg, #ffffff, #fff8ed);
}

.cache-card.missing {
  border-color: rgba(220, 38, 38, 0.25);
  background: linear-gradient(180deg, #ffffff, #fff1f1);
}

.cache-card:has(.cache-governance-mini.warning) {
  border-color: rgba(220, 38, 38, 0.28);
}

.cache-card-top,
.cache-card footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.cache-card-top strong {
  display: block;
  color: #152237;
  font-size: 15px;
}

.cache-card-top span,
.cache-card footer small {
  color: #667085;
  font-size: 12px;
}

.cache-card-top em {
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475467;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.cache-card.fresh .cache-card-top em {
  background: #dcfce7;
  color: #15803d;
}

.cache-card.stale .cache-card-top em {
  background: #fef3c7;
  color: #a15c07;
}

.cache-card.missing .cache-card-top em {
  background: #fee2e2;
  color: #b42318;
}

.cache-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cache-card-meta span {
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: #667085;
  font-size: 12px;
}

.cache-card p {
  margin: 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.55;
}

.cache-governance-mini {
  display: grid;
  gap: 5px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f8fafc;
  color: #52606d;
  font-size: 12px;
  line-height: 1.45;
}

.cache-governance-mini.warning {
  background: #fff1f1;
  color: #a3261a;
}

.cache-governance-mini.info {
  background: #eff6ff;
  color: #1d4f91;
}

.cache-card code {
  max-width: 180px;
  overflow: hidden;
  color: #2364aa;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-runs-panel {
  display: grid;
  gap: 12px;
  margin: 0 14px 14px;
  padding: 14px;
  border: 1px solid #dfe6ef;
  border-radius: 15px;
  background: #ffffff;
}

.job-runs-panel .metric-grid {
  padding: 0;
}

.job-runs-list {
  display: grid;
  gap: 10px;
}

.job-run-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e4e9f0;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, #f8fafc);
}

.job-run-card.success {
  border-color: rgba(22, 163, 74, 0.22);
  background: linear-gradient(180deg, #fff, #f3fbf6);
}

.job-run-card.failed {
  border-color: rgba(220, 38, 38, 0.25);
  background: linear-gradient(180deg, #fff, #fff1f1);
}

.job-run-card.partial {
  border-color: rgba(217, 119, 6, 0.3);
  background: linear-gradient(180deg, #fff, #fffbeb);
}

.job-run-card.skipped {
  border-color: rgba(217, 119, 6, 0.26);
  background: linear-gradient(180deg, #fff, #fff8ed);
}

.job-run-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.job-run-head strong {
  display: block;
  color: #152237;
  font-size: 14px;
}

.job-run-head span,
.job-run-card small {
  color: #667085;
  font-size: 12px;
}

.job-run-head em {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475467;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.job-run-card.success .job-run-head em {
  background: #dcfce7;
  color: #15803d;
}

.job-run-card.failed .job-run-head em {
  background: #fee2e2;
  color: #b42318;
}

.job-run-card.partial .job-run-head em {
  background: #fef3c7;
  color: #a15c07;
}

.job-run-card.skipped .job-run-head em {
  background: #fef3c7;
  color: #a15c07;
}

.job-run-card p {
  margin: 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.5;
}

.cache-governance-notes {
  padding-top: 0;
  margin-bottom: 14px;
}

.cache-governance-notes .governance-note {
  display: grid;
  gap: 4px;
}

.cache-governance-notes .governance-note strong {
  color: #152237;
  font-size: 12px;
}

.cache-governance-notes .governance-note span {
  color: #52606d;
}

.cache-governance-notes .governance-note.warning {
  border-color: rgba(220, 38, 38, 0.25);
  background: #fff7f7;
}

.cache-governance-notes .governance-note.info {
  border-color: rgba(35, 100, 170, 0.18);
  background: #f4f8ff;
}

.watch-main-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(520px, 1.35fr);
  gap: 16px;
  align-items: start;
}

.watchlist-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.6fr) minmax(220px, 1.1fr) auto;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid #eef2f7;
}

.watchlist-grid {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.watchlist-group {
  display: grid;
  gap: 10px;
}

.watchlist-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #344054;
}

.watchlist-group-head strong {
  font-size: 15px;
}

.watchlist-group-head span {
  color: #98a2b3;
  font-size: 12px;
}

.watch-stock-list {
  display: grid;
  gap: 10px;
}

.watch-stock-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  padding: 13px;
  border: 1px solid #dfe6ef;
  border-radius: 15px;
  background: #fff;
}

.watch-stock-card strong {
  color: #152237;
  font-size: 16px;
}

.watch-stock-card small {
  display: block;
  margin-top: 3px;
  color: #98a2b3;
}

.watch-stock-price {
  text-align: right;
}

.watch-stock-price span {
  display: block;
  color: #152237;
  font-size: 17px;
  font-weight: 800;
}

.watch-stock-price em,
.concept-stock-top em,
.concept-heat strong {
  font-style: normal;
  font-weight: 800;
}

.watch-stock-card p {
  grid-column: 1 / -1;
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.55;
}

.watch-stock-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #98a2b3;
  font-size: 12px;
}

.danger-lite {
  padding: 5px 9px;
  border-color: #fee2e2;
  background: #fff5f5;
  color: #b42318;
}

.concept-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 14px 0;
}

.concept-searchbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 10px;
  padding: 14px 14px 0;
}

.concept-search-status {
  display: block;
  min-height: 18px;
  padding: 8px 14px 0;
  font-size: 12px;
}

.concept-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: #f5f7fb;
}

.concept-tabs button.active {
  border-color: #c7372f;
  background: #fff1ed;
  color: #b42318;
  box-shadow: 0 8px 18px rgba(199, 55, 47, 0.12);
}

.concept-tabs span {
  color: #98a2b3;
  font-size: 12px;
}

.concept-detail {
  padding: 14px;
}

.concept-profile {
  display: grid;
  gap: 14px;
}

.concept-profile-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #152237 0%, #25354d 65%, #31415c 100%);
  color: #fff;
}

.concept-profile-head h3 {
  margin: 2px 0 8px;
  font-size: 26px;
}

.concept-profile-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
}

.concept-heat {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
  text-align: center;
}

.concept-heat strong {
  font-size: 28px;
}

.concept-heat span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.concept-aliases {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.concept-aliases span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef2f7;
  color: #667085;
  font-size: 12px;
}

.concept-stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.concept-stock-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid #dfe6ef;
  border-radius: 15px;
  background: #fff;
}

.concept-stock-top,
.concept-stock-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.concept-stock-top strong {
  color: #152237;
  font-size: 16px;
}

.concept-stock-top small {
  display: block;
  margin-top: 3px;
  color: #98a2b3;
}

.concept-stock-card p {
  min-height: 42px;
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.55;
}

.concept-stock-foot span {
  color: #98a2b3;
  font-size: 12px;
}

.up {
  color: #c7372f;
}

.down {
  color: #137a4c;
}

.signal-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px;
}

.signal-group-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dfe6ef;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96)),
    radial-gradient(circle at 18% 0%, rgba(35, 100, 170, 0.12), transparent 34%);
}

.signal-group-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.signal-group-top strong {
  color: #152237;
  font-size: 14px;
}

.signal-group-top span,
.signal-group-meta {
  color: var(--muted);
  font-size: 12px;
}

.signal-group-rate {
  color: #1f2937;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.signal-group-meta,
.signal-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.signal-mini-stats em {
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  font-style: normal;
  font-size: 12px;
}

.signal-note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
  padding: 10px 14px 0;
}

.signal-note-grid div {
  padding: 8px 10px;
  border: 1px solid #e4e9f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #52606d;
  font-size: 12px;
  line-height: 1.45;
}

.signal-validation-wrap {
  margin: 10px 14px 14px;
  border: 1px solid #e4e9f0;
  border-radius: 14px;
  background: #ffffff;
}

.ai-referee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  padding: 14px;
}

.ai-referee-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dfe6ef;
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96)),
    radial-gradient(circle at 100% 0%, rgba(35, 100, 170, 0.12), transparent 34%);
}

.ai-referee-card.good {
  border-color: rgba(199, 55, 47, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 237, 0.96)),
    radial-gradient(circle at 100% 0%, rgba(199, 55, 47, 0.16), transparent 34%);
}

.ai-referee-card.weak {
  border-color: rgba(19, 122, 76, 0.25);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 244, 0.96)),
    radial-gradient(circle at 100% 0%, rgba(19, 122, 76, 0.12), transparent 34%);
}

.ai-referee-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ai-referee-top strong {
  display: block;
  color: #152237;
  font-size: 16px;
}

.ai-referee-top span {
  color: #667085;
  font-size: 12px;
}

.ai-referee-top em {
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef2f7;
  color: #344054;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.ai-referee-card.good .ai-referee-top em {
  background: #fee2e2;
  color: #b42318;
}

.ai-referee-card.weak .ai-referee-top em {
  background: #dcfce7;
  color: #15803d;
}

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

.ai-referee-stats div {
  padding: 8px;
  border: 1px solid #edf0f2;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
}

.ai-referee-stats span {
  display: block;
  color: #667085;
  font-size: 12px;
}

.ai-referee-stats b {
  display: block;
  margin-top: 3px;
  color: #152237;
  font-size: 16px;
}

.ai-referee-card p,
.ai-referee-card footer {
  margin: 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.55;
}

.ai-referee-card ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: #52606d;
  font-size: 12px;
  line-height: 1.45;
}

.ai-referee-card footer {
  padding-top: 8px;
  border-top: 1px dashed #d8e0ea;
  color: #2364aa;
  font-weight: 800;
}

.signal-table {
  min-width: 980px;
  font-size: 12px;
}

.signal-table th,
.signal-table td {
  padding: 6px 8px;
  vertical-align: middle;
}

.signal-table td small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.signal-stock-cell {
  min-width: 128px;
}

.signal-stock-cell strong {
  display: inline-block;
  margin-right: 5px;
  color: #152237;
}

.signal-source-cell {
  min-width: 170px;
}

.signal-source-pill,
.signal-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
}

.signal-source-pill {
  background: #eef4ff;
  color: #1d4f8f;
}

.signal-status {
  font-weight: 700;
}

.signal-period-cell {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 160px;
}

.signal-period-cell span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 7px;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.signal-win {
  background: #fff1f0;
  color: var(--red);
}

.signal-loss {
  background: #ecfdf3;
  color: var(--green);
}

.signal-flat,
.signal-pending {
  background: #f1f5f9;
  color: #64748b;
}

.signal-up {
  color: var(--red) !important;
  font-weight: 700;
}

.signal-down {
  color: var(--green) !important;
  font-weight: 700;
}

.signal-detail {
  color: #52606d;
  max-width: 260px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signal-curve-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  padding: 14px;
}

.signal-curve-card {
  padding: 14px;
  border: 1px solid #dfe6ef;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.97)),
    radial-gradient(circle at 100% 0%, rgba(19, 122, 76, 0.12), transparent 30%);
}

.signal-curve-head,
.signal-curve-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.signal-curve-head strong {
  display: block;
  color: #152237;
  font-size: 15px;
}

.signal-curve-head span,
.signal-curve-foot {
  color: var(--muted);
  font-size: 12px;
}

.signal-curve-head em {
  font-size: 22px;
  font-style: normal;
}

.signal-curve-svg {
  width: 100%;
  height: auto;
  margin-top: 10px;
}

.signal-curve-svg text {
  fill: #667085;
  font-size: 12px;
}

.signal-curve-axis {
  stroke: #d8e0ea;
  stroke-width: 1;
}

.signal-curve-zero {
  stroke: #c2ccda;
  stroke-dasharray: 5 5;
  stroke-width: 1;
}

.technical-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  margin-bottom: 16px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid #d9e2dc;
  border-radius: 24px;
  background:
    linear-gradient(115deg, rgba(17, 24, 39, 0.06), transparent 34%),
    radial-gradient(circle at 16% 20%, rgba(34, 197, 94, 0.18), transparent 26%),
    radial-gradient(circle at 88% 10%, rgba(245, 158, 11, 0.18), transparent 28%),
    linear-gradient(135deg, #f8fbf5 0%, #fffaf0 52%, #f7fbff 100%);
  box-shadow: 0 22px 54px rgba(26, 42, 31, 0.09);
}

.technical-hero h2 {
  margin: 4px 0 10px;
  color: #142116;
  font-size: 32px;
}

.technical-hero p {
  max-width: 900px;
  color: #53625b;
  line-height: 1.75;
}

.technical-hero-card {
  display: grid;
  gap: 9px;
  align-content: center;
  padding: 18px;
  border: 1px solid rgba(20, 122, 76, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
}

.technical-hero-card strong {
  color: #172033;
}

.technical-hero-card span {
  color: #667085;
  font-size: 13px;
}

.technical-toolbar {
  margin-bottom: 14px;
}

.technical-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 6px;
  border: 1px solid #dfe8e2;
  border-radius: 14px;
  background: #f6faf6;
}

.technical-subtab {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #52605a;
  font-weight: 900;
}

.technical-subtab.active {
  background: #142116;
  color: #fff;
  box-shadow: 0 8px 18px rgba(20, 33, 22, 0.16);
}

.technical-pane {
  display: none;
}

.technical-pane.active {
  display: block;
}

.technical-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(620px, 1.45fr);
  gap: 16px;
  align-items: start;
}

.technical-watch-panel,
.technical-main-panel,
.technical-detail-panel {
  border-radius: 18px;
}

.technical-watch-panel,
.technical-main-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: clamp(360px, 64vh, 720px);
}

.technical-watch-panel .panel-head,
.technical-main-panel .panel-head {
  flex: 0 0 auto;
}

.technical-watchlist {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.technical-watch-group {
  display: grid;
  gap: 7px;
}

.technical-watch-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #344054;
}

.technical-watch-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 5px 9px;
  padding: 9px 32px 9px 10px;
  border: 1px solid #dfe7df;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, #f9fbf8);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.technical-watch-card:hover,
.technical-watch-card.active {
  transform: translateY(-1px);
  border-color: rgba(19, 122, 76, 0.38);
  box-shadow: 0 10px 20px rgba(20, 82, 48, 0.09);
}

.technical-watch-main {
  min-width: 0;
}

.technical-watch-card strong {
  color: #142116;
  display: block;
  font-size: 14px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.technical-watch-card small {
  display: inline-block;
  margin-top: 1px;
  color: #98a2b3;
  font-size: 11px;
}

.technical-watch-card p {
  grid-column: 1 / -1;
  margin: 0;
  color: #667085;
  font-size: 12px;
}

.technical-watch-score,
.technical-score-pill,
.technical-verdict {
  border-radius: 999px;
  font-weight: 900;
}

.technical-watch-score {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: #eef2f7;
  color: #475467;
  font-size: 12px;
}

.technical-watch-score.hot,
.technical-score-pill.hot,
.technical-verdict.hot {
  background: #fee2e2;
  color: #b42318;
}

.technical-watch-score.warm,
.technical-score-pill.warm,
.technical-verdict.warm {
  background: #fef3c7;
  color: #a15c07;
}

.technical-watch-score.neutral,
.technical-score-pill.neutral,
.technical-verdict.neutral {
  background: #e0f2fe;
  color: #2364aa;
}

.technical-watch-score.cold,
.technical-score-pill.cold,
.technical-verdict.cold {
  background: #dcfce7;
  color: #15803d;
}

.technical-watch-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #667085;
  font-size: 12px;
}

.technical-watch-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.technical-watch-meta em {
  font-style: normal;
  font-weight: 900;
  flex: 0 0 auto;
}

.technical-watch-remove {
  position: absolute;
  top: 7px;
  right: 7px;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.technical-watch-remove:hover {
  border-color: rgba(180, 35, 24, 0.22);
  background: #fee2e2;
  color: #b42318;
}

.technical-overview {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 14px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.technical-watchlist::-webkit-scrollbar,
.technical-overview::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.technical-watchlist::-webkit-scrollbar-thumb,
.technical-overview::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(102, 112, 133, 0.28);
}

.technical-watchlist::-webkit-scrollbar-track,
.technical-overview::-webkit-scrollbar-track {
  background: transparent;
}

.technical-table-wrap {
  overflow-x: auto;
}

.technical-overview .technical-table {
  min-width: 840px;
}

.technical-table,
.technical-comparison table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.technical-table th,
.technical-comparison th {
  padding: 8px 10px;
  color: #667085;
  font-size: 12px;
  text-align: left;
}

.technical-table td,
.technical-comparison td {
  padding: 11px 10px;
  border-top: 1px solid #e8eee9;
  border-bottom: 1px solid #e8eee9;
  background: #fff;
  color: #1d2939;
  font-size: 13px;
}

.technical-table tr.active td {
  background: #f2fbf5;
}

.technical-table td:first-child,
.technical-comparison td:first-child {
  border-left: 1px solid #e8eee9;
  border-radius: 12px 0 0 12px;
}

.technical-table td:last-child,
.technical-comparison td:last-child {
  border-right: 1px solid #e8eee9;
  border-radius: 0 12px 12px 0;
}

.technical-table small {
  display: block;
  margin-top: 2px;
  color: #98a2b3;
}

.technical-score-pill {
  display: inline-flex;
  min-width: 38px;
  justify-content: center;
  padding: 5px 9px;
}

.technical-detail-panel {
  margin-top: 16px;
  padding: 16px;
}

.technical-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid #e4ebe6;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff, #f6fbf5);
}

.technical-detail-head h2 {
  margin: 2px 0 6px;
  color: #142116;
  font-size: 28px;
}

.technical-detail-head h2 small {
  color: #98a2b3;
  font-size: 15px;
}

.technical-detail-head span {
  color: #667085;
}

.technical-verdict {
  display: grid;
  min-width: 110px;
  padding: 12px 16px;
  text-align: center;
}

.technical-verdict strong {
  font-size: 30px;
  line-height: 1;
}

.technical-verdict em {
  margin-top: 4px;
  font-style: normal;
  font-size: 12px;
}

.technical-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.technical-overall-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid #dce8df;
  border-radius: 20px;
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 177, 105, 0.13), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f7fbf4 58%, #eef7ea 100%);
  box-shadow: 0 16px 34px rgba(22, 71, 45, 0.08);
}

.technical-overall-card.hot {
  border-color: #f3c4b8;
  background:
    radial-gradient(circle at 8% 0%, rgba(229, 73, 49, 0.13), transparent 34%),
    linear-gradient(135deg, #fff 0%, #fff8f5 58%, #fff1ea 100%);
}

.technical-overall-card.warm {
  border-color: #f2d3a7;
  background:
    radial-gradient(circle at 8% 0%, rgba(214, 142, 38, 0.13), transparent 34%),
    linear-gradient(135deg, #fff 0%, #fffaf1 56%, #fff4df 100%);
}

.technical-overall-card.cold {
  border-color: #c7d7ef;
  background:
    radial-gradient(circle at 8% 0%, rgba(52, 103, 174, 0.13), transparent 34%),
    linear-gradient(135deg, #fff 0%, #f6f9ff 58%, #eef4ff 100%);
}

.technical-overall-main {
  display: grid;
  grid-template-columns: 140px minmax(260px, 1fr) minmax(220px, 0.72fr);
  gap: 14px;
  align-items: stretch;
}

.technical-overall-score {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  min-height: 132px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.85);
}

.technical-overall-score span,
.technical-overall-copy h3,
.technical-overall-breakdown h3 {
  margin: 0;
  color: #4d6255;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.technical-overall-score strong {
  color: #17211a;
  font-size: 46px;
  line-height: 0.95;
}

.technical-overall-score em {
  color: #30513c;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.technical-overall-copy,
.technical-overall-breakdown {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.84);
}

.technical-overall-copy p {
  margin: 0;
  color: #223329;
  font-size: 15px;
  line-height: 1.72;
}

.technical-action-note {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(19, 122, 76, 0.08);
  color: #184b32;
  font-weight: 800;
  line-height: 1.55;
}

.technical-overall-bar {
  display: grid;
  gap: 5px;
}

.technical-overall-bar div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.technical-overall-bar em {
  color: #667085;
  font-style: normal;
}

.technical-overall-bar i {
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: rgba(20, 33, 22, 0.08);
}

.technical-overall-bar b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #27ae60, #f2b84b, #e5533d);
}

.technical-overall-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.technical-overall-lists > div {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.84);
}

.technical-overall-lists strong {
  display: block;
  margin-bottom: 6px;
  color: #142116;
  font-size: 14px;
}

.technical-overall-lists ul {
  margin: 0;
  padding-left: 18px;
  color: #51605a;
  line-height: 1.62;
}

.technical-overall-card footer {
  margin-top: 10px;
  color: #7a8a80;
  font-size: 12px;
}

.technical-overall-empty {
  color: #98a2b3;
}

.technical-price-action {
  display: grid;
  gap: 12px;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid #dbe8e0;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbf8 100%);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.06);
}

.technical-price-action-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.technical-price-action-head span,
.technical-price-action-grid > article > strong,
.technical-behavior-notes strong {
  display: block;
  color: #3f5548;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.technical-price-action-head h3 {
  margin: 4px 0 6px;
  color: #17211a;
  font-size: 18px;
  line-height: 1.28;
}

.technical-price-action-head p {
  max-width: 860px;
  margin: 0;
  color: #344054;
  line-height: 1.68;
}

.technical-price-action-head em {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid rgba(19, 122, 76, 0.18);
  border-radius: 999px;
  background: rgba(19, 122, 76, 0.08);
  color: #184b32;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.technical-price-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: 12px;
}

.technical-price-action-grid > article,
.technical-behavior-notes > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e5eee8;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
}

.technical-mini-table-wrap {
  overflow-x: auto;
  margin-top: 10px;
  border: 1px solid #edf2ef;
  border-radius: 12px;
}

.technical-mini-table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.technical-mini-table th,
.technical-mini-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #edf2ef;
  color: #344054;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.technical-mini-table th {
  background: #f6faf8;
  color: #4d6255;
  font-weight: 900;
}

.technical-mini-table tr:last-child td {
  border-bottom: 0;
}

.technical-mini-table td small {
  display: block;
  margin-top: 3px;
  color: #667085;
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
}

.technical-pattern-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.technical-pattern-tags span {
  padding: 2px 6px;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 11px;
  font-weight: 850;
}

.technical-mini-table td:last-child {
  min-width: 190px;
  line-height: 1.5;
  white-space: normal;
}

.technical-behavior-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.62fr);
  gap: 12px;
}

.technical-behavior-notes ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #344054;
  line-height: 1.72;
}

.technical-behavior-notes p {
  margin: 8px 0 0;
  color: #344054;
  line-height: 1.65;
}

.technical-concept-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.technical-concept-tags span {
  padding: 4px 8px;
  border: 1px solid #d8e6df;
  border-radius: 999px;
  background: #f7fbf8;
  color: #30513c;
  font-size: 12px;
  font-weight: 800;
}

.pattern-bar {
  display: grid;
  gap: 12px;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid #dfe9e3;
  border-radius: 14px;
  background: #fff;
}

.pattern-bar.empty {
  background: #f9fbfa;
}

.pattern-bar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pattern-bar-head strong {
  display: block;
  color: #17211a;
  font-size: 15px;
  font-weight: 900;
}

.pattern-bar-head span {
  display: block;
  margin-top: 2px;
  color: #667085;
  font-size: 12px;
}

.pattern-bar-head em {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef6f1;
  color: #266044;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.pattern-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.pattern-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #e5eee8;
  border-left: 4px solid #94a3b8;
  border-radius: 10px;
  background: #fafbfc;
  cursor: help;
}

.pattern-card.bull {
  border-left-color: #dc2626;
  background: #fff8f6;
}

.pattern-card.bear {
  border-left-color: #16a34a;
  background: #f2fbf5;
}

.pattern-card.neutral {
  border-left-color: #64748b;
  background: #f8fafc;
}

.pattern-card-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.pattern-card-head strong {
  min-width: 0;
  overflow: hidden;
  color: #17211a;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pattern-card-head em {
  margin-left: auto;
  color: #98a2b3;
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.pattern-dir {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 900;
}

.pattern-card.bull .pattern-dir {
  color: #dc2626;
}

.pattern-card.bear .pattern-dir {
  color: #16a34a;
}

.pattern-strength {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pattern-strength i {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f7;
}

.pattern-strength i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fbbf24, #16a34a);
}

.pattern-strength span {
  min-width: 24px;
  color: #475467;
  font-size: 12px;
  font-weight: 950;
  text-align: right;
}

.pattern-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pattern-meta span {
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.45;
}

.pos-tag {
  background: #e0f2fe;
  color: #2364aa;
}

.vol-tag.expand {
  background: #fee2e2;
  color: #b42318;
}

.vol-tag.shrink {
  background: #dcfce7;
  color: #15803d;
}

.vol-tag.normal,
.vol-tag.unknown {
  background: #f1f5f9;
  color: #64748b;
}

.confirm.yes {
  background: #16a34a;
  color: #fff;
}

.confirm.no {
  background: #fee2e2;
  color: #b42318;
}

.confirm.pending {
  background: #fef3c7;
  color: #a15c07;
}

.position-warn {
  background: #fff7ed;
  color: #9a3412;
}

.pattern-card p,
.pattern-disclaimer {
  margin: 0;
  color: #667085;
  font-size: 11px;
  line-height: 1.55;
}

.signal-consistency {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  margin: 12px 0;
  border: 1px solid #e4ebe6;
  border-radius: 14px;
  background: #fff;
}

.signal-consistency.high {
  background: #f0fdf4;
  border-color: #86efac;
}

.signal-consistency.low {
  background: #fef2f2;
  border-color: #fca5a5;
}

.signal-consistency.mid {
  background: #fffbeb;
  border-color: #fcd34d;
}

.sc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sc-head strong {
  color: #17211a;
}

.sc-head em {
  color: #475467;
  font-style: normal;
  font-weight: 900;
}

.sc-bar {
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: #eef2f7;
}

.sc-bar b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fca5a5, #fcd34d, #86efac);
}

.sc-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flag-pill {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #475467;
  font-size: 11px;
}

.flag-pill b {
  margin-right: 4px;
  color: #17211a;
  font-weight: 900;
}

.weekly-atr-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.weekly-tf,
.atr-box,
.divergence-box {
  padding: 12px;
  border: 1px solid #e4ebe6;
  border-radius: 14px;
  background: #fff;
}

.weekly-tf h4,
.atr-box h4,
.divergence-box h4 {
  margin: 0 0 8px;
  color: #137a4c;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.weekly-tf-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.weekly-tf-grid > div,
.atr-row > div {
  display: grid;
  gap: 2px;
}

.weekly-tf-grid span,
.atr-row span {
  color: #98a2b3;
  font-size: 11px;
}

.weekly-tf-grid strong,
.atr-row strong {
  color: #17211a;
  font-size: 14px;
  font-weight: 900;
}

.atr-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.atr-box p,
.divergence-box p {
  margin: 8px 0 0;
  color: #667085;
  line-height: 1.5;
}

.divergence-box {
  margin: 12px 0;
}

.divergence-box.bear {
  background: #fef2f2;
  border-color: #fca5a5;
}

.divergence-box.bull {
  background: #f0fdf4;
  border-color: #86efac;
}

.div-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.div-tag {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.div-tag.bear {
  background: #dc2626;
  color: #fff;
}

.div-tag.bull {
  background: #16a34a;
  color: #fff;
}

.divergence-box ul {
  margin: 0;
  padding-left: 18px;
  color: #475467;
  font-size: 12px;
  line-height: 1.6;
}

.technical-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.technical-section-card {
  display: grid;
  gap: 8px;
  padding: 15px;
  border: 1px solid #e4ebe6;
  border-radius: 16px;
  background: #fff;
}

.technical-section-card span {
  color: #137a4c;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.technical-section-card p {
  margin: 0;
  color: #344054;
  line-height: 1.65;
}

.technical-section-card ul {
  margin: 0;
  padding-left: 18px;
  color: #667085;
  line-height: 1.6;
}

.technical-sources,
.technical-comparison {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #e4ebe6;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f9fbf8);
}

.technical-source-empty {
  padding: 14px;
  border-radius: 14px;
  background: #f2f4f7;
  color: #667085;
}

.technical-source-status {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}

.technical-source-status span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

.technical-source-status span.ok {
  background: #dcfce7;
  color: #15803d;
}

.technical-source-status span.failed {
  background: #fee2e2;
  color: #b42318;
}

.technical-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.technical-source-card {
  display: grid;
  gap: 7px;
  padding: 13px;
  border: 1px solid #e4ebe6;
  border-radius: 15px;
  background: #fff;
}

.technical-source-card span,
.technical-source-card em {
  color: #98a2b3;
  font-size: 12px;
  font-style: normal;
}

.technical-source-card strong {
  color: #152237;
}

.technical-source-card p {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.55;
}

.technical-source-card a {
  color: #2364aa;
  font-weight: 900;
  text-decoration: none;
}

.technical-backtest-panel {
  margin-top: 16px;
  border-radius: 18px;
}

.signal-scan-panel {
  margin-top: 16px;
  border-radius: 18px;
}

.technical-context-pill {
  align-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid rgba(19, 122, 76, 0.18);
  border-radius: 11px;
  background: #f2fbf5;
  color: #137a4c;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.signal-scan-actions {
  display: grid;
  grid-template-columns: minmax(160px, auto) 108px 118px auto;
  gap: 10px;
  align-items: end;
}

.signal-scan-actions label {
  display: grid;
  gap: 5px;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.signal-scan-actions select {
  min-height: 36px;
  border: 1px solid #d7dde5;
  border-radius: 11px;
  background: #fff;
  color: #172033;
}

.signal-scan-status {
  display: block;
  padding: 0 14px 10px;
}

.signal-scan-body {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}

.scan-stock-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e4ebe6;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fbfdfb);
}

.scan-stock-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.scan-stock-head strong {
  display: block;
  color: #17211a;
  font-size: 15px;
  font-weight: 950;
}

.scan-stock-head small {
  color: #98a2b3;
  font-size: 12px;
}

.scan-stock-badges {
  display: flex;
  gap: 5px;
}

.scan-stock-badges span,
.scan-sig {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
}

.scan-stock-badges span {
  padding: 3px 7px;
}

.scan-stock-badges .bullish {
  background: #fee2e2;
  color: #b42318;
}

.scan-stock-badges .bearish {
  background: #dcfce7;
  color: #15803d;
}

.scan-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.scan-sig {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid #dbe3ea;
  cursor: help;
}

.scan-sig strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scan-sig i,
.scan-sig em {
  font-style: normal;
}

.scan-sig b {
  font-size: 10px;
  opacity: 0.75;
}

.scan-sig em {
  color: currentColor;
  font-size: 10px;
  opacity: 0.68;
}

.scan-sig.bullish {
  border-color: #fca5a5;
  background: #fff5f5;
  color: #b42318;
}

.scan-sig.bearish {
  border-color: #86efac;
  background: #f0fdf4;
  color: #15803d;
}

.scan-sig.neutral {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #475467;
}

.scan-sig.pattern {
  box-shadow: inset 0 -2px rgba(19, 122, 76, 0.08);
}

.technical-discovery-panel {
  margin-top: 16px;
  border-radius: 18px;
}

.technical-discovery-actions {
  display: flex;
  align-items: end;
  gap: 10px;
}

.technical-discovery-status {
  display: block;
  padding: 0 14px 10px;
}

.technical-discovery-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  padding: 0 14px 14px;
}

.technical-discovery-card {
  position: relative;
  display: grid;
  gap: 11px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid #e4ebe6;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 248, 0.98)),
    #fff;
  box-shadow: 0 12px 26px rgba(22, 71, 45, 0.06);
}

.technical-discovery-rank {
  position: absolute;
  right: 12px;
  bottom: 6px;
  color: rgba(19, 122, 76, 0.06);
  font-size: 42px;
  font-weight: 950;
  line-height: 1;
}

.technical-discovery-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.technical-discovery-head strong {
  display: block;
  color: #142116;
  font-size: 17px;
  font-weight: 950;
}

.technical-discovery-head small,
.technical-discovery-head span {
  color: #98a2b3;
  font-size: 12px;
}

.technical-discovery-score {
  display: grid;
  place-items: center;
  min-width: 54px;
  padding: 7px 8px;
  border-radius: 14px;
  background: #eef2f7;
}

.technical-discovery-score em {
  color: inherit;
  font-size: 20px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.technical-discovery-score span {
  margin-top: 3px;
  color: inherit;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.technical-discovery-score.hot {
  background: #fee2e2;
  color: #b42318;
}

.technical-discovery-score.warm {
  background: #fef3c7;
  color: #a15c07;
}

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

.technical-discovery-grid div {
  min-width: 0;
  padding: 8px;
  border: 1px solid #e8eee9;
  border-radius: 12px;
  background: #fbfdfb;
}

.technical-discovery-grid span,
.technical-discovery-grid em {
  display: block;
  color: #667085;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.technical-discovery-grid strong {
  display: block;
  margin: 2px 0;
  color: #172033;
  font-size: 13px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.technical-discovery-reasons {
  margin: 0;
  padding-left: 16px;
  color: #475467;
  font-size: 12px;
  line-height: 1.55;
}

.technical-discovery-actions-row {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.technical-backtest-actions {
  display: grid;
  grid-template-columns: minmax(160px, auto) 120px auto auto;
  gap: 10px;
  align-items: end;
}

.technical-backtest-actions label {
  display: grid;
  gap: 5px;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.technical-backtest-actions input,
.technical-backtest-actions select {
  min-height: 36px;
  border: 1px solid #d7dde5;
  border-radius: 11px;
  background: #fff;
  color: #172033;
}

.technical-backtest-status {
  display: block;
  padding: 0 14px 10px;
}

.technical-backtest-metrics {
  padding: 0 14px 12px;
}

.technical-backtest-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  padding: 0 14px 14px;
}

.technical-backtest-kline-panel {
  margin: 0 14px 14px;
  padding: 14px;
  border: 1px solid #e4ebe6;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f9fbf8);
}

.technical-backtest-klines {
  display: grid;
  gap: 14px;
}

.technical-backtest-kline-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dfe7df;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(22, 71, 45, 0.05);
}

.technical-backtest-kline-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.technical-backtest-kline-head span {
  color: #667085;
  display: block;
  font-size: 12px;
  font-weight: 850;
  margin-bottom: 3px;
}

.technical-backtest-kline-head strong {
  color: #142116;
  font-size: 17px;
}

.technical-backtest-kline-head small {
  color: #98a2b3;
  font-size: 12px;
}

.technical-backtest-kline-head em {
  border-radius: 999px;
  background: #f2f4f7;
  font-style: normal;
  font-weight: 950;
  padding: 6px 10px;
  white-space: nowrap;
}

.technical-backtest-kline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.technical-backtest-kline-meta span {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 9px;
}

.technical-backtest-kline-card .kline-chart-shell {
  border-radius: 14px;
}

.technical-backtest-kline-card .kline-svg {
  min-width: 760px;
}

.technical-backtest-card {
  position: relative;
  display: grid;
  gap: 10px;
  overflow: hidden;
  padding: 15px;
  border: 1px solid #e4ebe6;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f9fbf8);
}

.technical-backtest-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #98a2b3;
}

.technical-backtest-card.good::before {
  background: #c7372f;
}

.technical-backtest-card.watch::before {
  background: #f59e0b;
}

.technical-backtest-card.weak::before {
  background: #137a4c;
}

.technical-backtest-card.thin::before {
  background: #98a2b3;
}

.technical-backtest-card-head {
  display: grid;
  gap: 4px;
}

.technical-backtest-card-head strong {
  color: #172033;
  font-size: 16px;
}

.technical-backtest-card-head span {
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}

.technical-backtest-rate {
  color: #172033;
  font-size: 30px;
  font-weight: 950;
}

.technical-backtest-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.technical-backtest-mini em {
  padding: 4px 7px;
  border-radius: 8px;
  background: #f2f4f7;
  color: #667085;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.technical-backtest-table-wrap {
  margin: 0 14px 14px;
  max-height: 520px;
  overflow: auto;
}

.technical-backtest-table th {
  white-space: nowrap;
}

.technical-action-pill,
.technical-action-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.technical-action-pill {
  min-width: 44px;
  padding: 4px 8px;
  border: 1px solid #dbe3ea;
  background: #f8fafc;
  color: #475467;
}

.technical-action-pill.signal {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: #3730a3;
}

.technical-action-pill.build,
.technical-action-pill.add {
  border-color: #fca5a5;
  background: #fff5f5;
  color: #b42318;
}

.technical-action-pill.watch {
  border-color: #d0d5dd;
  background: #f8fafc;
  color: #475467;
}

.technical-action-pill.trim,
.technical-action-pill.clear {
  border-color: #86efac;
  background: #f0fdf4;
  color: #15803d;
}

.technical-action-score {
  min-width: 34px;
  padding: 4px 7px;
  background: #eef2f7;
  color: #475467;
}

.technical-action-score.hot {
  background: #fee2e2;
  color: #b42318;
}

.technical-action-score.warm {
  background: #fef3c7;
  color: #a15c07;
}

.technical-action-score.cold {
  background: #dcfce7;
  color: #15803d;
}

.technical-action-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 112px;
  max-width: 220px;
}

.technical-backtest-table td small {
  display: block;
  margin-top: 3px;
  color: #98a2b3;
  font-size: 11px;
}

.technical-backtest-notes {
  padding: 0 14px 14px;
}

.trend-rank {
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: rgba(17, 24, 39, 0.05);
  font-size: 54px;
  font-weight: 900;
  line-height: 1;
}

.trend-buy-badge {
  position: relative;
  z-index: 1;
  justify-self: start;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--trend-color) 20%, #dfe6ef);
  border-radius: 999px;
  color: color-mix(in srgb, var(--trend-color) 76%, #111827);
  background: color-mix(in srgb, var(--trend-color) 8%, #ffffff);
  font-size: 12px;
  font-weight: 900;
}

.trend-buy-badge.hot {
  color: #fff;
  background: var(--trend-color);
}

.trend-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.trend-card-head h3 {
  font-size: 19px;
}

.trend-card-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.trend-card-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.trend-score {
  display: grid;
  place-items: center;
  min-width: 58px;
  height: 58px;
  border: 2px solid color-mix(in srgb, var(--trend-color) 35%, #ffffff);
  border-radius: 50%;
  background: color-mix(in srgb, var(--trend-color) 8%, #ffffff);
}

.trend-score span {
  color: var(--trend-color);
  font-size: 12px;
  font-weight: 900;
}

.trend-score strong {
  color: var(--ink);
  font-size: 14px;
}

.trend-tags {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}

.trend-tags span {
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--trend-color) 11%, #ffffff);
  color: color-mix(in srgb, var(--trend-color) 72%, #111827);
  font-size: 12px;
  font-weight: 700;
}

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

.trend-stats > div,
.trend-levels > div {
  min-width: 0;
  padding: 9px;
  border: 1px solid #edf0f2;
  border-radius: 8px;
  background: #fbfcfd;
}

.trend-stats span,
.trend-levels span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.trend-stats strong,
.trend-levels strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.trend-levels {
  display: grid;
  grid-template-columns: 0.9fr 0.9fr 1.4fr;
  gap: 8px;
}

.trend-plan-strip {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px dashed color-mix(in srgb, var(--trend-color) 26%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--trend-color) 5%, #ffffff);
}

.trend-plan-strip span {
  color: color-mix(in srgb, var(--trend-color) 78%, #111827);
  font-size: 12px;
  font-weight: 900;
}

.trend-plan-strip strong {
  color: #344054;
  font-size: 12px;
}

.move-reading {
  position: relative;
  z-index: 2;
  border: 1px solid color-mix(in srgb, var(--trend-color) 18%, var(--line));
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--trend-color) 7%, #ffffff), #ffffff 62%),
    #fff;
  cursor: default;
}

.move-reading summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  list-style: none;
  cursor: pointer;
}

.move-reading summary::-webkit-details-marker {
  display: none;
}

.move-reading summary span {
  color: color-mix(in srgb, var(--trend-color) 82%, #111827);
  font-size: 12px;
  font-weight: 900;
}

.move-reading summary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.move-reading summary em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.move-reading[open] summary em {
  color: var(--trend-color);
}

.move-reading-body {
  display: grid;
  gap: 10px;
  padding: 0 11px 11px;
  color: #344054;
  font-size: 12px;
  line-height: 1.58;
}

.move-reading-body p {
  padding-top: 2px;
  color: #1f2937;
  font-weight: 700;
}

.move-reading-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.move-reading-source a {
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}

.move-reading-section {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--trend-color) 16%, var(--line));
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.8);
}

.move-reading-section strong {
  color: color-mix(in srgb, var(--trend-color) 84%, #111827);
  font-size: 12px;
}

.move-reading-section p {
  color: #344054;
  font-weight: 600;
  line-height: 1.7;
}

.move-reading-loading {
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fbfcfd;
  text-align: center;
}

.move-reading-group {
  display: grid;
  gap: 5px;
  padding: 8px 9px;
  border: 1px solid #edf0f2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
}

.move-reading-group strong {
  color: var(--ink);
  font-size: 12px;
}

.move-reading-group ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 16px;
}

.move-reading-group.risk {
  background: #fff9f4;
}

.trend-notes {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  color: #4b5563;
  font-size: 12px;
  line-height: 1.65;
}

.trend-notes strong {
  color: var(--ink);
}

.trend-card-action {
  position: relative;
  z-index: 1;
  justify-self: start;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--trend-color) 24%, var(--line));
  border-radius: 999px;
  color: color-mix(in srgb, var(--trend-color) 80%, #111827);
  background: color-mix(in srgb, var(--trend-color) 7%, #ffffff);
  font-size: 12px;
  font-weight: 800;
}

.kline-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
}

.kline-modal.hidden {
  display: none;
}

.kline-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 16%, rgba(199, 55, 47, 0.18), transparent 30%),
    radial-gradient(circle at 78% 18%, rgba(35, 100, 170, 0.16), transparent 28%),
    rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(5px);
}

.kline-dialog {
  position: relative;
  width: min(1120px, 96vw);
  max-height: min(880px, 92vh);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 44%, #f7fafc 100%);
  box-shadow: 0 28px 70px rgba(17, 24, 39, 0.28);
}

.kline-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(223, 227, 232, 0.9);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
}

.kline-head h2 {
  margin-top: 4px;
  font-size: 22px;
}

.kline-close {
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
}

.kline-body {
  display: grid;
  gap: 14px;
  padding: 16px 18px 20px;
}

.kline-loading {
  display: grid;
  min-height: 260px;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  background: #fbfcfd;
}

.kline-metrics {
  margin-bottom: 0;
}

.kline-chart-shell {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(199, 55, 47, 0.05), transparent 34%),
    linear-gradient(315deg, rgba(35, 100, 170, 0.05), transparent 34%),
    #fff;
}

.kline-svg {
  display: block;
  width: 100%;
  min-width: 820px;
  height: auto;
}

.kline-bg {
  fill: transparent;
}

.kline-grid-line,
.kline-volume-base {
  stroke: #e6ebf0;
  stroke-width: 1;
}

.kline-axis-label,
.kline-date-label,
.kline-volume-label {
  fill: #667085;
  font-size: 12px;
}

.kline-date-label {
  text-anchor: middle;
}

.kline-volume-label {
  text-anchor: end;
}

.kline-candle line {
  stroke-width: 1.4;
}

.kline-candle.up line,
.kline-candle.up rect {
  stroke: var(--red);
  fill: rgba(199, 55, 47, 0.82);
}

.kline-candle.down line,
.kline-candle.down rect {
  stroke: var(--green);
  fill: rgba(19, 122, 76, 0.82);
}

.kline-candle .kline-volume {
  opacity: 0.28;
  stroke: none;
}

.kline-ma {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.kline-ma.ma5 {
  stroke: #b86b00;
}

.kline-legend.ma5 {
  fill: #b86b00;
}

.kline-ma.ma10 {
  stroke: #2364aa;
}

.kline-legend.ma10 {
  fill: #2364aa;
}

.kline-ma.ma20 {
  stroke: #7c3aed;
}

.kline-legend.ma20 {
  fill: #7c3aed;
}

.kline-ma.ma60 {
  stroke: #0f766e;
  stroke-dasharray: 6 4;
}

.kline-legend.ma60 {
  fill: #0f766e;
}

.kline-legend,
.kline-marker-label {
  font-size: 12px;
  font-weight: 800;
}

.kline-marker {
  stroke-width: 1.5;
  stroke-dasharray: 7 5;
}

.kline-marker.vertical {
  stroke: rgba(184, 107, 0, 0.7);
}

.kline-marker.breakout {
  stroke: rgba(199, 55, 47, 0.85);
}

.kline-marker.support {
  stroke: rgba(19, 122, 76, 0.85);
}

.kline-marker-label {
  fill: #344054;
}

.kline-trade-marker .kline-trade-vline {
  stroke: rgba(15, 23, 42, 0.22);
  stroke-dasharray: 4 5;
}

.kline-trade-marker circle {
  stroke: #fff;
  stroke-width: 2;
}

.kline-trade-marker text {
  font-size: 12px;
  font-weight: 950;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  text-anchor: middle;
}

.kline-trade-marker.build circle {
  fill: #dc2626;
}

.kline-trade-marker.build text {
  fill: #b91c1c;
}

.kline-trade-marker.add circle {
  fill: #f97316;
}

.kline-trade-marker.add text {
  fill: #c2410c;
}

.kline-trade-marker.watch circle {
  fill: #94a3b8;
}

.kline-trade-marker.watch text {
  fill: #475569;
}

.kline-trade-marker.trim circle {
  fill: #2563eb;
}

.kline-trade-marker.trim text {
  fill: #1d4ed8;
}

.kline-trade-marker.clear circle {
  fill: #0f172a;
}

.kline-trade-marker.clear text {
  fill: #0f172a;
}

.kline-trade-marker.signal circle {
  fill: #f59e0b;
}

.kline-trade-marker.signal text {
  fill: #b45309;
}

.kline-latest-strip,
.kline-readme,
.kline-legend-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfd;
  font-size: 13px;
}

.kline-legend-strip {
  gap: 8px;
  margin-top: 8px;
}

.kline-legend-strip span {
  align-items: center;
  color: #475467;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 5px;
}

.kline-legend-strip i {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 18px;
}

.legend-up {
  background: #c7372f;
}

.legend-down {
  background: #137a4c;
}

.legend-ma20 {
  background: #7c3aed;
}

.legend-build {
  background: #dc2626;
}

.legend-add {
  background: #f97316;
}

.legend-watch {
  background: #94a3b8;
}

.legend-trim {
  background: #2563eb;
}

.legend-clear {
  background: #0f172a;
}

.legend-signal {
  background: #f59e0b;
}

.kline-latest-strip strong {
  font-size: 16px;
}

.kline-readme strong {
  color: var(--ink);
}

.kline-readme span {
  color: var(--muted);
}

.trend-trade-plan {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dfe6ef;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(199, 55, 47, 0.06), transparent 38%),
    linear-gradient(315deg, rgba(19, 122, 76, 0.06), transparent 38%),
    #fff;
}

.trend-trade-plan.fresh {
  border-color: rgba(199, 55, 47, 0.28);
  box-shadow: 0 12px 28px rgba(199, 55, 47, 0.08);
}

.trade-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.trade-plan-head h3 {
  margin-top: 3px;
  color: #152237;
  font-size: 20px;
}

.trade-plan-head span {
  display: block;
  margin-top: 4px;
  color: #52606d;
  font-size: 13px;
}

.trade-plan-signal {
  display: grid;
  gap: 4px;
  min-width: 112px;
  padding: 9px 11px;
  border-radius: 14px;
  background: #152237;
  color: #fff;
  text-align: center;
}

.trade-plan-signal strong {
  font-size: 15px;
}

.trade-plan-signal em {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-style: normal;
}

.trade-plan-levels,
.trade-plan-grid {
  display: grid;
  gap: 10px;
}

.trade-plan-levels {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trade-plan-levels div,
.trade-plan-list {
  padding: 10px;
  border: 1px solid #edf0f2;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
}

.trade-plan-levels span {
  display: block;
  color: #667085;
  font-size: 12px;
}

.trade-plan-levels strong {
  display: block;
  margin-top: 4px;
  color: #152237;
  font-size: 18px;
}

.trade-plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trade-plan-list strong {
  color: #152237;
  font-size: 13px;
}

.trade-plan-list.buy strong {
  color: var(--red);
}

.trade-plan-list.sell strong,
.trade-plan-list.risk strong {
  color: var(--green);
}

.trade-plan-list ul {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding-left: 18px;
  color: #344054;
  font-size: 12px;
  line-height: 1.55;
}

.empty-state {
  display: grid;
  gap: 6px;
  min-height: 150px;
  place-content: center;
  text-align: center;
  color: var(--muted);
}

.empty-state strong {
  color: var(--ink);
}

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

.rule-reset-info {
  display: grid;
  gap: 4px;
  margin: 12px 16px 0;
  padding: 10px 12px;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12px;
}

.rule-reset-info strong {
  font-size: 13px;
  color: #7c2d12;
}

.rule-reset-info em {
  font-style: normal;
  color: #b45309;
}

.trigger {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}

.trigger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.trigger h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  color: var(--ink);
}

.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #d2d9e5;
  color: #667085;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: help;
}

.trigger-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.trigger-badge.amber {
  color: #b54708;
  background: #fff7e6;
}

.trigger-badge.muted {
  color: #475467;
  background: #f2f4f7;
}

.trigger-badge.danger {
  color: #b42318;
  background: #fef3f2;
}

.trigger-value {
  font-size: 31px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 14px;
}

.trigger-value.monitoring {
  color: #b42318;
}

.trigger-monitoring {
  color: #b42318;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

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

.trigger-summary-row-monitoring {
  margin-top: 0;
}

.trigger-summary-row > div {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #edf0f5;
}

.trigger-summary-row span {
  color: var(--muted);
  font-size: 13px;
}

.trigger-summary-row strong {
  font-size: 14px;
  color: var(--ink);
}

.chart {
  height: 260px;
  padding: 10px;
}

.chart.tall {
  height: 320px;
}

.chart.small {
  height: 430px;
  padding: 12px 0 16px;
  overflow: hidden;
}

.chart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.chart-scroll-shell {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: stretch;
  height: 100%;
}

.chart-fixed-axis {
  width: 58px;
  height: 100%;
  background: #fff;
}

.chart-scroll-body {
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: 14px;
}

.chart-scroll-body svg {
  width: auto;
}

.chart svg.scrollable-chart-svg {
  max-width: none;
  min-width: 900px;
}

.axis {
  stroke: #cfd6df;
  stroke-width: 1;
}

.chart-hover-zone {
  fill: transparent;
  cursor: crosshair;
  pointer-events: all;
}

.chart-hover-zone:hover {
  fill: rgba(255, 74, 61, 0.06);
}

.review-chart-tooltip {
  position: fixed;
  z-index: 10000;
  min-width: 230px;
  max-width: 320px;
  padding: 12px 14px;
  border: 1px solid rgba(207, 68, 55, 0.68);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.22);
  color: #ff1f1f;
  font-size: 14px;
  line-height: 1.62;
  pointer-events: none;
}

.review-chart-tooltip.hidden {
  display: none;
}

.review-tooltip-line,
.review-tooltip-themes {
  white-space: nowrap;
}

.grid-line {
  stroke: #edf0f4;
  stroke-width: 1;
}

.line-stock {
  fill: none;
  stroke: var(--red);
  stroke-width: 2.2;
}

.line-index {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
}

.line-score {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.2;
}

.line-limit {
  fill: none;
  stroke: var(--red);
  stroke-width: 1.8;
}

.line-down {
  fill: none;
  stroke: var(--green);
  stroke-width: 1.8;
}

.score-dot {
  fill: var(--blue);
  stroke: #fff;
  stroke-width: 1.4;
}

.score-dot.hot {
  fill: var(--red);
}

.score-dot.cold {
  fill: var(--green);
}

.temp {
  opacity: 0.26;
}

.temp-cold {
  fill: #3b82f6;
}

.temp-cool {
  fill: #22c55e;
}

.temp-mid {
  fill: #a3e635;
}

.temp-warm {
  fill: #facc15;
}

.temp-hot {
  fill: #ef4444;
}

.bar-height {
  fill: color-mix(in srgb, var(--amber) 72%, #ffffff);
}

/* Redesigned height chart bars */
.bar-height-bg {
  fill: color-mix(in srgb, var(--amber) 15%, #ffffff);
  stroke: color-mix(in srgb, var(--amber) 30%, #ffffff);
  stroke-width: 1;
}

.bar-height-fill {
  fill: url(#barGradient);
  stroke: color-mix(in srgb, var(--amber) 60%, #ffffff);
  stroke-width: 0.5;
}

.chart-bar-label {
  font-size: 16px;
  font-weight: 800;
  fill: #b86b00;
  text-anchor: middle;
}

.chart-bar-name {
  font-size: 10px;
  font-weight: 500;
  fill: #667085;
  text-anchor: middle;
}

.height-leader-label {
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.86);
  stroke-linejoin: round;
  stroke-width: 3px;
}

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

.chart-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
  font-size: 17px;
}

.insight {
  padding: 16px;
}

.insight-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 10px;
}

.insight-main.compact {
  grid-template-columns: minmax(0, 1fr);
}

.insight-main > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfd;
}

.insight-main strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
}

.insight-main span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.insight-compact-card {
  border-radius: 12px !important;
  padding: 16px 18px !important;
}

.insight-title {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rule-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.rule-item {
  display: grid;
  grid-template-columns: 96px 88px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.rule-item strong {
  color: var(--red);
}

.rule-item em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.table-wrap {
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th, td {
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-weight: 600;
  background: #fbfcfd;
  white-space: nowrap;
}

table.dense {
  min-width: 1520px;
}

table.dense td {
  max-width: 240px;
  line-height: 1.45;
}

.index-cell {
  min-width: 280px;
}

.index-cell p {
  margin: 0;
}

.index-cell p + p {
  margin-top: 8px;
  color: var(--text);
}

.note-cell {
  min-width: 32px;
  width: 32px;
  max-width: 36px;
  padding-left: 2px;
  padding-right: 2px;
  text-align: center;
}

#review .table-wrap table.dense th:last-child {
  min-width: 32px;
  width: 32px;
  max-width: 36px;
  padding-left: 2px;
  padding-right: 2px;
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.review-note-card {
  display: grid;
  gap: 7px;
  min-height: 100%;
}

.open-review-note {
  background: linear-gradient(135deg, rgba(199, 55, 47, 0.10), rgba(35, 100, 170, 0.08));
  border: 1px solid rgba(199, 55, 47, 0.20);
  border-radius: 10px;
  color: #8f1f18;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  min-height: 34px;
  padding: 0 10px;
}

.open-review-note.has-note {
  background: linear-gradient(135deg, rgba(199, 55, 47, 0.16), rgba(255, 247, 237, 0.94));
}

.open-review-note.compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  min-width: 22px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.review-note-preview {
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
  margin: 0;
  max-width: 180px;
}

.note-inline {
  width: 100%;
  min-height: 124px;
  border: 1px solid rgba(148, 163, 184, .32);
  border-radius: 10px;
  background: #fffef8;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  padding: 9px 10px;
}

.review-note-dialog {
  max-width: min(680px, 92vw);
}

.review-note-modal-body {
  display: grid;
  gap: 12px;
}

.note-modal-textarea {
  min-height: 280px;
  resize: vertical;
}

.inline-note-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.inline-note-actions button {
  min-height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

.theme-list {
  padding: 10px 12px 14px;
  display: grid;
  gap: 8px;
}

.theme {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.theme:last-child {
  border-bottom: 0;
}

.stage {
  display: inline-block;
  min-width: 64px;
  text-align: center;
  border-radius: 999px;
  padding: 2px 8px;
  background: #edf4ff;
  color: var(--blue);
  font-size: 12px;
}

.stage.hot {
  background: #fff1f0;
  color: var(--red);
}

.stage.cold {
  background: #eef7f1;
  color: var(--green);
}

.theme-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.theme-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--theme) 45%, #ffffff);
  background: color-mix(in srgb, var(--theme) 10%, #ffffff);
  color: var(--theme);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  margin: 2px 4px 2px 0;
}

.metric .value .theme-badge {
  vertical-align: middle;
}

.status-pill {
  display: inline-flex;
  min-width: 74px;
  justify-content: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}

.status-pill.ok {
  background: #eef7f1;
  color: var(--green);
}

.status-pill.warn {
  background: #fff7e6;
  color: var(--amber);
}

.sim-rule-cell {
  display: grid;
  gap: 4px;
}

.sim-rule-cell span {
  color: var(--muted);
  font-size: 12px;
}

.sim-rise-highlight {
  color: var(--red);
  font-weight: 700;
}

.note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
  padding: 14px;
}

.note-grid label {
  display: grid;
  gap: 6px;
}

.actions {
  padding: 0 14px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.stage-period-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.stage-period-btn {
  padding: 2px 10px;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.stage-period-btn:hover { border-color: var(--accent); color: var(--text); }
.stage-period-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.stage-period-custom {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
.stage-period-custom input[type="date"] {
  width: 120px;
  padding: 2px 6px;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text);
}
.stage-period-custom button.compact {
  padding: 2px 8px;
  font-size: 0.75rem;
}

.stage-calendar {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 4px;
  padding: 14px;
  min-height: 72px;
}
/* Period-based cell sizing */
.stage-per-3w .stage-cell { min-width: 88px; min-height: 72px; }
.stage-per-3w .stage-cell .sc-date { font-size: 14px; }
.stage-per-3w .stage-cell .sc-stage { font-size: 14px; }
.stage-per-5w .stage-cell { min-width: 64px; min-height: 60px; }
.stage-per-5w .stage-cell .sc-date { font-size: 12px; }
.stage-per-5w .stage-cell .sc-stage { font-size: 12px; }
.stage-per-10w .stage-cell { min-width: 56px; min-height: 56px; }

.stage-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 56px;
  border-radius: 6px;
  padding: 4px 6px;
  cursor: default;
  flex-shrink: 0;
}

.stage-cell .sc-date {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.stage-cell .sc-stage {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  margin-top: 2px;
}

.stage-cell .sc-score {
  font-size: 10px;
  margin-top: 1px;
  opacity: 0.7;
}

/* Stage colors - 主升=红, 下跌=绿 (A股红涨绿跌) */
.stage-下跌 { background: #27ae60; color: #fff; }
.stage-反弹 { background: #f39c12; color: #fff; }
.stage-探底 { background: #95a5a6; color: #fff; }
.stage-横盘 { background: #5d89a8; color: #fff; }
.stage-底部横盘 { background: #3498db; color: #fff; }
.stage-主升 { background: #e74c3c; color: #fff; }
.stage-主升分歧 { background: #e67e22; color: #fff; }
.stage-顶部横盘 { background: #8e44ad; color: #fff; }
.stage-观察 { background: #ecf0f1; color: #7f8c8d; }

.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  padding: 14px;
}

.concept-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.concept-card .cc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.concept-card .cc-pct {
  font-size: 14px;
  font-weight: 800;
  justify-self: end;
}

.concept-card .cc-leader {
  font-size: 11px;
  color: var(--muted);
  grid-column: 1 / -1;
}

.concept-card .cc-detail {
  font-size: 11px;
  color: var(--muted);
  grid-column: 1 / -1;
}

/* Concept card hover tooltip */
.concept-card {
  position: relative;
  cursor: help;
}

.concept-card .cc-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2933;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 20;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  pointer-events: none;
}

.concept-card .cc-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f2933;
}

.concept-card:hover .cc-tooltip {
  display: block;
}

.highboard-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
}

.highboard-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff7e6;
}

.highboard-card .hb-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.highboard-card .hb-board {
  font-size: 20px;
  font-weight: 800;
  color: var(--amber);
  margin-top: 2px;
}

.highboard-card .hb-label {
  font-size: 11px;
  color: var(--muted);
}

.review-table-wrap,
.table-wrap {
  overflow-x: auto;
}

.review-table-wrap table,
.table-wrap table.dense {
  min-width: 100%;
  font-size: 12px;
  table-layout: fixed;
  width: 100%;
}

#review .table-wrap table.dense {
  min-width: 100%;
}

.review-table-wrap td,
.table-wrap table.dense td {
  max-width: 220px;
  line-height: 1.4;
  vertical-align: top;
}

#review {
  max-width: 100%;
  padding-inline: 0;
}

#review .table-wrap {
  overflow-x: hidden;
}

#review .panel {
  border-radius: 12px;
}

.review-subtabs {
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(246, 248, 251, 0.88));
  border: 1px solid rgba(207, 216, 226, 0.9);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
  display: inline-flex;
  gap: 6px;
  margin: 0 0 16px;
  padding: 5px;
}

.review-subtab {
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: #64748b;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  padding: 9px 18px;
}

.review-subtab.active {
  background: #1f2937;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.16);
  color: #fff;
}

.review-pane {
  display: none;
}

.review-pane.active {
  display: block;
}

.review-freshness {
  align-items: center;
  background: #f8fafc;
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 12px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin: 0 0 14px;
  padding: 12px 14px;
}

.review-freshness.stale {
  background: #fff7ed;
  border-color: rgba(251, 146, 60, 0.75);
}

.review-freshness strong {
  color: #0f172a;
  display: block;
  font-size: 13px;
  line-height: 1.3;
}

.review-freshness span {
  color: #64748b;
  font-size: 13px;
}

.review-freshness-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.freshness-pill {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 999px;
  color: #334155;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  min-height: 28px;
  padding: 5px 10px;
}

.freshness-pill.fresh {
  border-color: rgba(34, 197, 94, 0.45);
  color: #15803d;
}

.freshness-pill.stale,
.freshness-pill.missing {
  border-color: rgba(249, 115, 22, 0.55);
  color: #c2410c;
}

.freshness-pill.optional-missing {
  color: #64748b;
}

.research-hero {
  align-items: center;
  background: linear-gradient(135deg, var(--surface) 0%, #faf6ea 58%, #f6efdc 100%);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--paper-shadow);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 20px 24px;
}

.research-hero h2 {
  font-family: var(--serif);
  font-size: 27px;
  letter-spacing: 0.04em;
  line-height: 1.25;
  margin: 2px 0 7px;
}

.research-hero p:last-child {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  max-width: 760px;
}

.research-hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.research-subtabs {
  align-items: center;
  background: #efe9d8;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: inline-flex;
  gap: 5px;
  margin: 0 0 14px;
  padding: 4px;
}

.research-subtab {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  padding: 8px 18px;
  transition: color 0.15s ease, background 0.15s ease;
}

.research-subtab.active {
  background: var(--ink);
  color: #f7f3e8;
}

.research-pane {
  display: none;
}

.research-pane.active {
  display: block;
}

.research-report-panel .panel-head {
  align-items: flex-start;
}

.research-report-panel .panel-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.research-category-select-label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.research-category-select-label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.research-category-select {
  appearance: none;
  background: var(--surface)
    linear-gradient(45deg, transparent 50%, #5d553f 50%) calc(100% - 16px) 50% / 7px 7px no-repeat;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  min-height: 36px;
  min-width: 168px;
  padding: 7px 32px 7px 11px;
}

.research-markdown {
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  line-height: 1.9;
  padding: 26px 32px 34px;
}

.research-markdown h2,
.research-markdown h3,
.research-markdown h4,
.research-markdown h5 {
  color: var(--ink);
  line-height: 1.4;
  margin: 30px 0 12px;
}

.research-markdown h2:first-child,
.research-markdown h3:first-child {
  margin-top: 0;
}

.research-markdown h2 {
  border-bottom: 1px solid var(--hairline);
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding-bottom: 10px;
}

.research-markdown h3 {
  border-left: 3px solid var(--vermilion);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding-left: 12px;
}

.research-markdown h4,
.research-markdown h5 {
  font-size: 15px;
}

.research-markdown h4 {
  background: #f6f1e4;
  border-left: 3px solid #c4b896;
  border-radius: 0 7px 7px 0;
  color: var(--ink);
  padding: 8px 12px;
}

.research-markdown h5 {
  color: #5d553f;
  font-weight: 800;
  margin-top: 16px;
}

.research-divider {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 26px 0 24px;
}

.research-markdown p,
.research-markdown ul,
.research-markdown ol {
  margin: 0 0 14px;
}

.research-markdown ul,
.research-markdown ol {
  padding-left: 22px;
}

.research-markdown li {
  margin: 6px 0;
  padding-left: 2px;
}

.research-markdown li::marker {
  color: var(--vermilion);
  font-weight: 700;
}

.research-markdown blockquote {
  background: #f8f4e9;
  border-left: 3px solid var(--vermilion);
  border-radius: 0 8px 8px 0;
  color: #4e4633;
  margin: 0 0 14px;
  padding: 12px 16px;
}

.research-markdown strong {
  color: var(--ink);
}

.research-markdown a {
  color: var(--blue);
  text-decoration-color: rgba(44, 93, 143, 0.4);
  text-underline-offset: 3px;
}

.research-markdown > p:first-of-type {
  color: #3d3729;
  font-size: 15.5px;
}

.daily-sector-matrix {
  background: linear-gradient(180deg, #fffaf0 0%, #fbf8ef 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0 0 18px;
  overflow: hidden;
}

.daily-sector-matrix h2 {
  background: #f1ead8;
  border-bottom: 1px solid var(--line);
  font-size: 20px;
  margin: 0;
  padding: 15px 17px 12px;
}

.daily-sector-matrix > p {
  color: #5d553f;
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
  padding: 11px 16px 0;
}

.daily-sector-matrix .research-table-wrap {
  border: 0;
  border-radius: 0;
  margin: 13px 0 0;
}

.daily-sector-matrix .research-table {
  font-size: 12px;
  min-width: 1180px;
  table-layout: fixed;
}

.daily-sector-matrix .research-table th:first-child,
.daily-sector-matrix .research-table td:first-child {
  left: 0;
  position: sticky;
  z-index: 1;
}

.daily-sector-matrix .research-table th:first-child {
  z-index: 2;
}

.daily-sector-matrix .research-table td:first-child {
  background: #fffaf0;
  color: #3d3729;
  font-weight: 850;
  white-space: nowrap;
}

.daily-sector-matrix .research-table td {
  color: #3d3729;
  line-height: 1.5;
  min-width: 118px;
}

.daily-sector-matrix .research-table br {
  display: block;
  content: "";
}

.daily-sector-matrix .radar-stage-table-wrap {
  background: #fffaf0;
  border-top: 1px solid var(--line);
  margin-top: 12px;
}

.daily-sector-matrix .radar-stage-table {
  min-width: 520px;
  table-layout: fixed;
}

.daily-sector-matrix .radar-stage-table th:nth-child(1),
.daily-sector-matrix .radar-stage-table td:nth-child(1) {
  width: 96px;
}

.daily-sector-matrix .radar-stage-table th:nth-child(2),
.daily-sector-matrix .radar-stage-table td:nth-child(2) {
  width: auto;
}

.daily-sector-matrix .radar-stage-table th:nth-child(3),
.daily-sector-matrix .radar-stage-table td:nth-child(3) {
  width: 138px;
}

.daily-sector-matrix .hot-radar-table {
  min-width: 960px;
  table-layout: fixed;
}

.daily-sector-matrix .hot-radar-table th:nth-child(1),
.daily-sector-matrix .hot-radar-table td:nth-child(1) {
  width: 78px;
}

.daily-sector-matrix .hot-radar-table th:nth-child(2),
.daily-sector-matrix .hot-radar-table td:nth-child(2) {
  width: 38px;
}

.daily-sector-matrix .hot-radar-table th:nth-child(3),
.daily-sector-matrix .hot-radar-table td:nth-child(3) {
  width: 34px;
}

.daily-sector-matrix .hot-radar-table th:nth-child(4),
.daily-sector-matrix .hot-radar-table td:nth-child(4) {
  width: 58px;
}

.daily-sector-matrix .hot-radar-table th:nth-child(8),
.daily-sector-matrix .hot-radar-table td:nth-child(8) {
  width: 46px;
}

.hot-radar-table td:nth-child(6),
.hot-radar-table td:nth-child(7) {
  color: #3c3427;
  line-height: 1.6;
}

.hot-radar-table td:nth-child(2),
.hot-radar-table td:nth-child(3),
.hot-radar-table td:nth-child(8) {
  font-weight: 850;
  text-align: center;
}

.yishou-focus-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 680px;
  table-layout: fixed;
}

.yishou-focus-table th:first-child,
.yishou-focus-table td:first-child {
  width: 146px;
}

.yishou-focus-table th {
  text-align: center;
}

.yishou-focus-table .yishou-sector-cell {
  background: linear-gradient(180deg, #fff8ed, #f6eddc);
  color: #3d3729;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.45;
  position: sticky;
  left: 0;
  text-align: center;
  vertical-align: middle;
  z-index: 1;
  white-space: nowrap;
}

.yishou-focus-table .yishou-stock-cell {
  font-weight: 760;
  line-height: 1.65;
  padding-bottom: 10px;
  padding-top: 10px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.yishou-focus-table tbody tr + tr .yishou-stock-cell {
  border-top-color: #eadfcb;
}

.yishou-focus-table tbody tr:hover .yishou-stock-cell,
.yishou-focus-table tbody tr:hover .yishou-sector-cell {
  background-color: #fff7e8;
}

.radar-stage-band {
  align-items: center;
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(92px, 1fr) auto;
  min-height: 20px;
}

.radar-stage-strip {
  align-items: center;
  display: grid;
  gap: 1px;
  grid-auto-columns: minmax(10px, 1fr);
  grid-auto-flow: column;
  min-width: 0;
}

.radar-stage-cell {
  border-radius: 3px;
  display: block;
  height: 18px;
  min-width: 12px;
}

i.radar-stage-cell.radar-stage-up {
  background: var(--red);
}

i.radar-stage-cell.radar-stage-flat {
  background: #d9b96a;
}

i.radar-stage-cell.radar-stage-down {
  background: var(--green);
}

i.radar-stage-cell.radar-stage-empty {
  background: var(--line);
}

.radar-stage-latest {
  color: #5d553f;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.radar-change-cell {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.radar-change-cell span {
  background: #f4efe1;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #4e4633;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  padding: 2px 7px;
  white-space: nowrap;
}

.radar-change-cell .radar-change-up {
  background: #fff1ed;
  border-color: rgba(191, 58, 43, 0.28);
  color: var(--red);
}

.radar-change-cell .radar-change-down {
  background: #edf7f1;
  border-color: rgba(46, 125, 84, 0.28);
  color: var(--green);
}

.daily-main-summary {
  margin-bottom: 18px;
}

.daily-latest-banner {
  align-items: center;
  background: var(--ink);
  border-radius: 8px;
  color: #f7f3e8;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 0 0 14px;
  padding: 13px 15px;
}

.daily-latest-banner span {
  color: #b3a98e;
  display: block;
  font-size: 12px;
  font-weight: 750;
  margin-bottom: 3px;
}

.daily-latest-banner strong {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.02em;
}

.daily-latest-banner p {
  color: #cfc7af;
  font-size: 12px;
  margin: 0;
  text-align: right;
}

.daily-date-filter {
  background: #f7f3e7;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 11px;
  margin: 18px 0 14px;
  padding: 13px 14px;
}

.daily-date-filter-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
}

.daily-date-filter-head strong {
  color: #111827;
  font-size: 15px;
}

.daily-date-filter-head span {
  color: #667085;
  font-size: 12px;
}

.daily-date-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.daily-date-toggle {
  align-items: center;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 7px;
  color: #344054;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 750;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
}

.daily-date-toggle input {
  accent-color: var(--blue);
  height: 14px;
  margin: 0;
  width: 14px;
}

.daily-date-section.hidden {
  display: none;
}

.daily-date-section {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 2px;
}

.daily-date-section > h3:first-child {
  align-items: center;
  background: #f3ecdb;
  border-left: 0;
  border-radius: 8px;
  display: flex;
  font-size: 19px;
  justify-content: space-between;
  margin: 0 0 14px;
  padding: 10px 12px;
}

.daily-date-section:first-child {
  border-top: 0;
  margin-top: 0;
}

.daily-appendix {
  background: #f7f3e7;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 18px;
  overflow: hidden;
}

.daily-appendix summary {
  color: #5d553f;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  list-style-position: inside;
  padding: 12px 14px;
}

.daily-appendix-body {
  border-top: 1px solid var(--line);
  padding: 12px 14px 16px;
}

.daily-appendix:not([open]) .daily-appendix-body {
  display: none;
}

.research-markdown code {
  background: #f4efe1;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: #5d553f;
  font-size: 12px;
  padding: 1px 5px;
}

.research-table-wrap {
  background: #fffdf8;
  border: 1px solid #e5d9c5;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(52, 42, 25, 0.04);
  margin: 13px 0 20px;
  max-width: none;
  overflow-x: auto;
}

.research-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px;
  width: 100%;
}

.research-table th,
.research-table td {
  border-color: #eadfcb;
  line-height: 1.55;
  padding: 9px 10px;
  vertical-align: top;
}

.research-table th {
  background: #f2ead9;
  color: #5d553f;
  font-size: 12px;
  letter-spacing: 0;
  white-space: nowrap;
}

.research-table tbody tr:nth-child(even) td {
  background-color: #fffaf1;
}

.research-table tbody tr:hover td {
  background-color: #fff5e4;
}

.research-category-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: 14px;
}

.research-category-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 8px;
  padding: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.research-category-card:hover,
.research-category-card:focus-visible,
.research-category-card.active {
  border-color: var(--vermilion);
  box-shadow: var(--paper-shadow-hover);
  outline: none;
}

.research-category-card.active {
  background: #faf3ec;
}

.research-category-card strong {
  color: var(--ink);
  font-size: 14px;
}

.research-category-card span {
  color: var(--muted);
  font-size: 12px;
  min-height: 18px;
}

.ai-review-hero {
  align-items: center;
  background:
    radial-gradient(circle at 12% 12%, rgba(199, 55, 47, 0.18), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(35, 100, 170, 0.18), transparent 30%),
    linear-gradient(135deg, #fffaf5 0%, #f7fbff 58%, #ffffff 100%);
  border: 1px solid rgba(218, 226, 235, 0.95);
  border-radius: 24px;
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.07);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 22px;
}

.ai-review-hero h2 {
  font-size: 30px;
  letter-spacing: -0.05em;
  margin: 2px 0 6px;
}

.ai-review-hero span {
  color: #64748b;
  font-size: 13px;
}

.ai-review-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.ai-review-actions input {
  border: 1px solid #d9e2ec;
  border-radius: 12px;
  font-size: 14px;
  min-height: 40px;
  padding: 0 12px;
}

.ai-review-content {
  display: grid;
  gap: 18px;
}

.ai-review-topline {
  align-items: stretch;
  background: #111827;
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
  color: #fff;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 20px 22px;
}

.ai-review-topline span {
  color: #f8d5b0;
  display: block;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.ai-review-topline strong {
  display: block;
  font-size: 18px;
  line-height: 1.7;
}

.ai-review-topline em {
  align-self: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #ffe8cc;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  padding: 8px 12px;
  white-space: nowrap;
}

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

.deep-ai-review-picker {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #dbe4ee;
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
}

.deep-ai-review-picker button {
  align-items: center;
  background: #fff;
  border: 1px solid #d8e2ee;
  border-radius: 12px;
  color: #475569;
  display: inline-flex;
  gap: 8px;
  min-height: 36px;
  padding: 7px 11px;
}

.deep-ai-review-picker button.active {
  background: #152237;
  border-color: #152237;
  color: #fff;
  box-shadow: 0 10px 22px rgba(21, 34, 55, 0.16);
}

.deep-ai-review-picker span {
  font-size: 13px;
  font-weight: 950;
}

.deep-ai-review-picker small {
  color: inherit;
  font-size: 11px;
  font-weight: 750;
  opacity: 0.72;
}

.deep-ai-review-single {
  display: block;
}

.deep-ai-review-single .deep-ai-review-card {
  max-height: none;
}

.deep-ai-comparison {
  background: #f8fafc;
  border: 1px solid #dbe4ee;
  border-radius: 16px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 14px;
}

.deep-ai-comparison section {
  background: #fff;
  border: 1px solid #e6edf4;
  border-radius: 12px;
  padding: 12px 13px;
}

.deep-ai-comparison strong {
  color: #0f172a;
  display: block;
  font-size: 13px;
  font-weight: 950;
  margin-bottom: 8px;
}

.deep-ai-comparison ul {
  color: #334155;
  display: grid;
  gap: 6px;
  line-height: 1.65;
  margin: 0;
  padding-left: 18px;
}

.deep-ai-review-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94)),
    radial-gradient(circle at 100% 0%, rgba(199, 55, 47, 0.10), transparent 38%);
  border: 1px solid rgba(218, 226, 235, 0.95);
  border-radius: 20px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
  display: grid;
  gap: 14px;
  max-height: 760px;
  overflow: auto;
  padding: 18px;
}

.deep-ai-review-card.deepseek {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94)),
    radial-gradient(circle at 100% 0%, rgba(35, 100, 170, 0.12), transparent 38%);
}

.deep-ai-review-card.codex {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94)),
    radial-gradient(circle at 100% 0%, rgba(19, 122, 76, 0.13), transparent 38%);
}

.deep-ai-review-card header {
  align-items: flex-start;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding-bottom: 12px;
}

.deep-ai-review-card header span {
  color: #b42318;
  display: block;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.14em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.deep-ai-review-card.deepseek header span {
  color: #2364aa;
}

.deep-ai-review-card.codex header span {
  color: #137a4c;
}

.deep-ai-review-card header strong {
  color: #0f172a;
  display: block;
  font-size: 18px;
  line-height: 1.35;
}

.deep-ai-review-card header em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.deep-ai-review-body {
  color: #334155;
  display: grid;
  gap: 14px;
  font-size: 14px;
  line-height: 1.9;
}

.deep-ai-review-body h3 {
  background:
    linear-gradient(90deg, rgba(180, 35, 24, 0.16), rgba(255, 247, 237, 0.82) 68%, rgba(255, 255, 255, 0));
  border: 1px solid rgba(254, 202, 202, 0.95);
  border-left: 6px solid rgba(180, 35, 24, 0.86);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(127, 29, 29, 0.08);
  color: #7f1d1d;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.45;
  margin: 12px 0 0;
  padding: 10px 12px;
}

.deep-ai-review-card.deepseek .deep-ai-review-body h3 {
  background:
    linear-gradient(90deg, rgba(35, 100, 170, 0.17), rgba(239, 246, 255, 0.88) 68%, rgba(255, 255, 255, 0));
  border-color: rgba(191, 219, 254, 0.98);
  border-left-color: rgba(35, 100, 170, 0.90);
  box-shadow: 0 10px 24px rgba(30, 64, 175, 0.08);
  color: #1e3a8a;
}

.deep-ai-review-card.codex .deep-ai-review-body h3 {
  background:
    linear-gradient(90deg, rgba(19, 122, 76, 0.17), rgba(240, 253, 244, 0.88) 68%, rgba(255, 255, 255, 0));
  border-color: rgba(187, 247, 208, 0.98);
  border-left-color: rgba(19, 122, 76, 0.90);
  box-shadow: 0 10px 24px rgba(20, 83, 45, 0.08);
  color: #14532d;
}

.deep-ai-review-body h4 {
  align-items: center;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 5px solid #f97316;
  border-radius: 8px;
  color: #9a3412;
  display: flex;
  font-size: 15px;
  font-weight: 950;
  gap: 8px;
  line-height: 1.45;
  margin: 7px 0 -2px;
  padding: 8px 11px;
}

.deep-ai-review-body h4::before {
  background: currentColor;
  border-radius: 999px;
  content: "";
  flex: 0 0 auto;
  height: 7px;
  opacity: 0.82;
  width: 7px;
}

.deep-ai-review-card.deepseek .deep-ai-review-body h4 {
  background: #eff6ff;
  border-color: #bfdbfe;
  border-left-color: #2563eb;
  color: #1d4ed8;
}

.deep-ai-review-card.codex .deep-ai-review-body h4 {
  background: #f0fdf4;
  border-color: #bbf7d0;
  border-left-color: #16a34a;
  color: #166534;
}

.deep-ai-review-body p {
  margin: 0;
}

.deep-ai-review-body ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
}

.deep-ai-review-body b,
.deep-ai-review-body strong {
  color: #0f172a;
  font-weight: 950;
}

.ai-review-highlight-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ai-review-highlight-strip span {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #9a3412;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 9px;
}

.deep-ai-review-card.deepseek .ai-review-highlight-strip span {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.deep-ai-review-card.codex .ai-review-highlight-strip span {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.ai-review-report-list {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 14px 12px 28px !important;
}

.ai-review-table-wrap {
  background: #ffffff;
  border: 1px solid #e5edf5;
  border-radius: 14px;
  overflow-x: auto;
}

.ai-review-table-wrap.source {
  border-color: #d8b4a0;
  box-shadow: 0 10px 26px rgba(99, 45, 28, 0.08);
}

.ai-review-report-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 560px;
  overflow: hidden;
  width: 100%;
}

.ai-review-report-table th,
.ai-review-report-table td {
  border-bottom: 1px solid #e5edf5;
  color: #334155;
  font-size: 12px;
  line-height: 1.55;
  padding: 8px 10px;
  text-align: left;
}

.ai-review-report-table th {
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 950;
}

.deep-ai-prompt-fallback pre {
  background: #0f172a;
  border-radius: 16px;
  color: #e5edf7;
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
  overflow: auto;
  padding: 16px;
  white-space: pre-wrap;
}

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

.ai-review-agent-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.90)),
    radial-gradient(circle at 100% 0%, rgba(199, 55, 47, 0.12), transparent 35%);
  border: 1px solid rgba(218, 226, 235, 0.95);
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
  display: grid;
  gap: 14px;
  padding: 18px;
}

.ai-review-agent-card.deepseek {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.90)),
    radial-gradient(circle at 100% 0%, rgba(35, 100, 170, 0.14), transparent 35%);
}

.ai-agent-head {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.ai-agent-head span {
  color: #b42318;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ai-review-agent-card.deepseek .ai-agent-head span {
  color: #2364aa;
}

.ai-agent-head h3 {
  font-size: 23px;
  letter-spacing: -0.04em;
  margin: 3px 0 0;
}

.ai-agent-head em {
  background: #f1f5f9;
  border-radius: 999px;
  color: #475569;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  padding: 6px 10px;
  text-align: right;
}

.ai-agent-summary {
  color: #1f2937;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.75;
  margin: 0;
}

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

.ai-review-card-grid section,
.ai-template-card {
  background: rgba(248, 250, 252, 0.88);
  border: 1px solid #e6edf5;
  border-radius: 16px;
  padding: 12px;
}

.ai-review-card-grid strong,
.ai-template-card span {
  color: #334155;
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.ai-review-card-grid ul,
.ai-template-card ul {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ai-review-card-grid li,
.ai-template-card li {
  color: #334155;
  font-size: 12px;
  line-height: 1.55;
  padding-left: 13px;
  position: relative;
}

.ai-review-card-grid li::before,
.ai-template-card li::before {
  background: #c7372f;
  border-radius: 99px;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  top: 8px;
  width: 5px;
}

.ai-review-agent-card.deepseek li::before {
  background: #2364aa;
}

.ai-template-section {
  background: #ffffff;
  border: 1px solid rgba(218, 226, 235, 0.95);
  border-radius: 22px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.05);
  padding: 18px;
}

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

.ai-article-grid {
  grid-template-columns: 1fr;
}

.ai-template-card p {
  color: #0f172a;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.6;
  margin: 0 0 10px;
}

.ai-article-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
    radial-gradient(circle at 0% 0%, rgba(199, 55, 47, 0.07), transparent 30%);
  border-radius: 18px;
  padding: 18px;
}

.ai-article-section h3 {
  color: #b42318;
  font-size: 20px;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.ai-article-lead {
  border-left: 4px solid rgba(199, 55, 47, 0.45);
  color: #1f2937 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.8 !important;
  margin: 0 0 14px !important;
  padding-left: 12px;
}

.ai-article-block {
  border-top: 1px dashed rgba(148, 163, 184, 0.35);
  display: grid;
  gap: 8px;
  padding: 13px 0 0;
}

.ai-article-block + .ai-article-block {
  margin-top: 12px;
}

.ai-article-block h4 {
  color: #111827;
  font-size: 15px;
  margin: 0;
}

.ai-article-block p {
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.85 !important;
  margin: 0 !important;
}

.ai-review-mini-table {
  background: #fff;
  border: 1px solid #e5edf5;
  border-radius: 12px;
  font-size: 12px;
  margin-top: 4px;
  min-width: 0;
  overflow: hidden;
  table-layout: fixed;
  width: 100%;
}

.ai-review-mini-table td {
  border-bottom: 1px solid #edf2f7;
  color: #334155;
  font-weight: 700;
  padding: 8px 10px;
}

.ai-review-mini-table tr:last-child td {
  border-bottom: 0;
}

.ai-agent-section {
  margin-top: 0;
}

.ai-review-source {
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

#realtimeFlowPanel {
  border-color: rgba(35, 100, 170, 0.16);
  box-shadow: 0 16px 40px rgba(31, 41, 51, 0.05);
}

#realtimeFlowPanel .panel-head {
  background:
    radial-gradient(circle at 0% 0%, rgba(35, 100, 170, 0.12), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
}

#realtimeFlowPanel .panel-actions {
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.flow-date-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(35, 100, 170, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  padding: 4px;
}

.flow-date-controls input {
  min-width: 136px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: #fff;
  color: #1f2937;
  font-weight: 800;
  padding: 7px 9px;
}

.flow-date-controls .ghost-btn {
  padding: 7px 10px;
}

#toggleFlowAuto:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.flow-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 238px;
  gap: 14px;
  align-items: stretch;
  padding: 14px 16px 8px;
}

.flow-chart-wrap {
  min-width: 0;
}

#realtimeFlowChart {
  display: block;
  width: 100%;
  min-height: 330px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 2px 0;
}

.flow-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: #fbfdff;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 9px;
}

.flow-legend-item b {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
}

.flow-legend-item.stale {
  border-color: rgba(180, 83, 9, 0.28);
  background: #fffaf2;
}

.flow-legend-item.stale b {
  color: #b45309;
}

.flow-legend-item i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);
}

.flow-legend-item.index-reference {
  border-color: rgba(17, 24, 39, 0.22);
  background: #f8fafc;
}

.flow-legend-item.index-reference i {
  width: 18px;
  height: 0;
  border-radius: 0;
  border-top: 2px dashed #111827;
  background: transparent;
  box-shadow: none;
}

.flow-board-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 330px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98)),
    radial-gradient(circle at 0% 0%, rgba(35, 100, 170, 0.08), transparent 38%);
  padding: 12px;
}

.flow-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1f2937;
  font-size: 14px;
}

.flow-picker-head span {
  border-radius: 999px;
  background: #e7f0ff;
  color: #2364aa;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
}

.flow-picker-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.flow-picker-actions button {
  border: 1px solid rgba(35, 100, 170, 0.18);
  border-radius: 10px;
  background: #fff;
  color: #335c85;
  cursor: pointer;
  font-weight: 800;
  padding: 7px 0;
}

.flow-picker-actions button:hover {
  background: #f1f7ff;
}

.flow-picker-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 304px;
  overflow: auto;
  padding-right: 2px;
}

.flow-picker-item {
  display: grid;
  grid-template-columns: 16px 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  color: #334155;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 8px;
  text-align: left;
  width: 100%;
}

.flow-picker-item:hover {
  border-color: color-mix(in srgb, var(--c) 42%, rgba(148, 163, 184, 0.22));
  background: color-mix(in srgb, var(--c) 8%, #fff);
}

.flow-picker-item input {
  accent-color: var(--c);
  margin: 0;
}

.flow-picker-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent);
}

.flow-picker-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-picker-item em {
  color: #64748b;
  font-style: normal;
  font-size: 11px;
}

.flow-index-note {
  margin: 0;
  border-top: 1px dashed rgba(148, 163, 184, 0.35);
  color: #64748b;
  font-size: 11px;
  line-height: 1.5;
  padding-top: 9px;
}

#realtimeFlowMeta {
  padding: 0 16px 14px;
}

@media (max-width: 980px) {
  #realtimeFlowPanel .panel-actions,
  .flow-date-controls {
    width: 100%;
  }

  .flow-date-controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .flow-dashboard {
    grid-template-columns: 1fr;
  }

  .flow-board-picker {
    min-height: auto;
  }

  .flow-picker-list {
    max-height: 220px;
  }
}

#review .metric-grid {
  grid-template-columns: repeat(8, minmax(120px, 1fr));
}

#review .market-chart-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

#review .review-template-table {
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
  min-width: 100%;
  width: 100%;
}

#review .review-template-table th,
#review .review-template-table td {
  box-sizing: border-box;
  max-width: none;
  min-width: 0;
}

#review .review-template-table .review-col-stage {
  width: 21%;
}

#review .review-template-table .review-col-index {
  width: 22%;
}

#review .review-template-table .review-col-sector {
  width: 16%;
}

#review .review-template-table .review-col-limit {
  width: 16%;
}

#review .review-template-table .review-col-fund {
  width: calc(25% - 46px);
}

#review .review-template-table .review-col-note {
  width: 46px;
}

#review .review-template-table td {
  height: 1px;
  line-height: 1.4;
  vertical-align: top;
}

#review .review-template-table .note-cell {
  padding-left: 2px;
  padding-right: 2px;
  text-align: center;
}

#review .review-template-table .index-cell {
  min-width: 0;
}

.leader-tag {
  display: inline-block;
  font-size: 10px;
  background: #fff7e6;
  color: var(--amber);
  border-radius: 3px;
  padding: 0 4px;
  white-space: nowrap;
  font-weight: 600;
}

.sector-cell {
  font-size: 12px;
  line-height: 1.5;
}

.sector-cell .sector-up {
  color: var(--red);
}

.sector-cell .sector-down {
  color: var(--green);
}

.sector-cell .sector-label {
  font-weight: 600;
  margin-right: 4px;
}

.review-insight-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.review-cell-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(18, 35, 52, 0.09);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(18, 35, 52, 0.05);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 150px;
  min-width: 0;
  padding: 9px;
}

#reviewRows .review-cell-card {
  height: 100%;
  min-height: 168px;
  padding: 9px;
}

.review-date-badge {
  align-items: center;
  background: linear-gradient(135deg, rgba(180, 35, 24, 0.09), rgba(245, 158, 11, 0.11));
  border: 1px solid rgba(180, 35, 24, 0.14);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  display: flex;
  justify-content: space-between;
  padding: 7px 9px;
}

.review-date-badge strong {
  color: #9f1d1d;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.review-date-badge span {
  background: rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  color: #b45309;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  white-space: nowrap;
}

.stage-score-head {
  align-items: center;
  display: flex;
  gap: 12px;
}

.stage-score-head .stage-cell {
  flex: 0 0 auto;
  min-height: 34px;
  min-width: 92px;
  padding: 5px 10px;
}

.ai-market-summary {
  color: #334155;
  font-size: 12px;
  line-height: 1.62;
  margin-top: 4px;
}

.review-insight-grid .review-cell-card {
  min-height: 190px;
}

.review-cell-card > strong {
  color: #334155;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.index-review-card .relay-review-card {
  border-color: rgba(199, 55, 47, 0.12);
  box-shadow: none;
  margin-top: 6px;
  min-height: auto;
  padding: 7px;
}

#reviewRows .index-review-card .relay-review-card {
  min-height: auto;
}

.index-review-card .relay-review-card > strong {
  color: #b42318;
  font-size: 12px;
}

.index-review-card .relay-review-card .review-stock-list {
  gap: 4px;
}

.index-review-card .relay-review-card .review-line-list {
  display: none;
}

.review-cell-card p {
  margin: 0;
}

.review-score {
  color: var(--ink);
  font-size: 28px;
  font-weight: 850;
  line-height: 1;
}

.mini-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-stat-row span {
  background: #eef2f7;
  border-radius: 999px;
  color: #334155;
  font-size: 11px;
  padding: 4px 7px;
}

.review-line-list {
  display: grid;
  gap: 6px;
}

.review-line-list.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.review-line-list.compact .review-line-row {
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 5px 6px;
}

.review-line-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(18, 35, 52, 0.06);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
}

.breadth-distribution {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(255, 255, 255, 0.82));
  border: 1px solid rgba(18, 35, 52, 0.08);
  border-radius: 12px;
  display: grid;
  gap: 8px;
  margin-top: 2px;
  padding: 8px 9px 9px;
}

.breadth-distribution.empty p {
  color: #64748b;
  font-size: 11px;
  line-height: 1.5;
}

.breadth-summary {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.breadth-summary b {
  color: #334155;
  font-size: 11px;
  white-space: nowrap;
}

.breadth-summary span {
  color: #64748b;
  font-size: 10px;
  text-align: right;
}

.breadth-bars {
  display: grid;
  gap: 4px;
}

.breadth-row {
  align-items: center;
  display: grid;
  gap: 7px;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  min-height: 16px;
}

.breadth-label,
.breadth-count {
  color: #475569;
  font-size: 10px;
  line-height: 1;
}

.breadth-label {
  text-align: right;
}

.breadth-count {
  font-variant-numeric: tabular-nums;
}

.breadth-track {
  background: rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.breadth-track i {
  border-radius: inherit;
  display: block;
  height: 100%;
}

.breadth-row.up .breadth-track i {
  background: linear-gradient(90deg, #f97352, var(--red));
}

.breadth-row.down .breadth-track i {
  background: linear-gradient(90deg, #32bf74, var(--green));
}

.breadth-row.flat .breadth-track i {
  background: #94a3b8;
}

.review-stock-list,
.sector-card-grid {
  display: grid;
  gap: 6px;
}

.review-item-line {
  align-items: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(18, 35, 52, 0.07);
  border-radius: 9px;
  display: grid;
  gap: 7px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 28px;
  padding: 5px 8px;
}

.review-item-line span {
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  white-space: nowrap;
}

.review-item-line b {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.relay-stock-line b {
  font-weight: 850;
}

.sector-list-block {
  border-radius: 11px;
  display: grid;
  gap: 5px;
  padding: 7px;
}

.sector-list-block.sector-up {
  background: rgba(254, 226, 226, 0.4);
}

.sector-list-block.sector-down {
  background: rgba(220, 252, 231, 0.42);
}

.sector-block-title {
  color: #475569;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.sector-item-line {
  grid-template-columns: minmax(0, 1fr);
}

.sector-item-line b {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.sector-item-line i {
  color: inherit;
  font-style: normal;
  opacity: 0.76;
}

.sector-item-line em {
  color: inherit;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.sector-item-line.red b {
  color: var(--red);
}

.sector-item-line.green b {
  color: var(--green);
}

.sector-item-line.muted b {
  color: var(--muted);
}

.review-line-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.review-line-row b {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.review-line-row b.red,
.review-line-row.sector-up b {
  color: var(--red);
}

.review-line-row b.green,
.review-line-row.sector-down b {
  color: var(--green);
}

.theme-strength-list {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.theme-strength-list span {
  align-items: center;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  cursor: help;
  display: flex;
  font-weight: 700;
  justify-content: space-between;
  padding: 6px 8px;
}

.theme-strength-list em {
  color: var(--amber);
  font-style: normal;
}

.market-flow-line {
  border-bottom: 1px dashed var(--hairline);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  padding-bottom: 5px;
}

.fund-flow-source {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.fund-flow-rankings {
  display: grid;
  gap: 8px;
}

.fund-flow-block {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #faf6ea;
  padding: 8px;
}

.fund-flow-block strong {
  display: block;
  font-size: 11px;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}

.fund-flow-item {
  align-items: center;
  display: grid;
  gap: 4px;
  grid-template-columns: 18px minmax(58px, 1fr) auto;
  line-height: 1.25;
  padding: 3px 0;
}

.fund-flow-rank {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 10px;
  height: 16px;
  justify-content: center;
  width: 16px;
}

.fund-flow-name {
  color: var(--ink);
  font-weight: 700;
}

.fund-flow-values {
  display: inline-flex;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fund-flow-values em {
  font-style: normal;
}

.fund-flow-values .red {
  color: var(--red);
}

.fund-flow-values .green {
  color: var(--green);
}

.fund-flow-values .muted {
  color: var(--muted);
}

.fund-flow-leader {
  color: var(--muted);
  font-size: 11px;
  grid-column: 2 / 4;
}

.fund-flow-in .fund-flow-rank {
  background: rgba(191, 58, 43, 0.12);
  color: var(--red);
  font-weight: 800;
}

.fund-flow-out .fund-flow-rank {
  background: rgba(46, 125, 84, 0.12);
  color: var(--green);
  font-weight: 800;
}

.macro-hero {
  align-items: stretch;
  background:
    radial-gradient(circle at top left, rgba(199, 55, 47, 0.16), transparent 34%),
    linear-gradient(135deg, #111827 0%, #203047 55%, #10241d 100%);
  border-radius: 24px;
  color: white;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 320px;
  margin-bottom: 16px;
  padding: 26px;
}

.macro-hero h2 {
  font-size: 34px;
  margin: 0 0 8px;
}

.macro-hero p {
  color: rgba(255, 255, 255, 0.74);
  margin: 0;
  max-width: 720px;
}

.macro-rule-card {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  display: grid;
  gap: 8px;
  padding: 18px;
}

.macro-rule-card span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
}

.macro-range-panel {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(199, 55, 47, 0.08), rgba(35, 100, 170, 0.08)),
    #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
  grid-template-columns: 220px minmax(240px, 1fr) 190px;
  margin: -4px 0 16px;
  padding: 14px 16px;
}

.macro-month-field {
  display: inline-grid;
  gap: 3px;
  min-width: 150px;
}

.macro-month-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.macro-month-field input,
.macro-range-panel select,
.macro-custom-range input {
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-weight: 750;
  padding: 8px 10px;
}

.macro-range-panel strong {
  display: block;
  font-size: 14px;
}

.macro-range-panel span,
.macro-range-ticks {
  color: var(--muted);
  font-size: 12px;
}

.macro-custom-range {
  display: flex;
  gap: 8px;
}

.macro-custom-range.hidden {
  display: none;
}

.macro-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.macro-subtab {
  background: #fff;
  border: 1px solid #cfe0f4;
  border-radius: 999px;
  color: #2364aa;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  padding: 9px 16px;
}

.macro-subtab.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

.macro-toolbar.hidden,
.macro-range-panel.hidden,
.macro-pane.hidden {
  display: none;
}

.macro-status-line {
  display: block;
  margin: -2px 0 12px;
}

.macro-event-overview {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.macro-event-summary-grid {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
}

.macro-event-panel,
.macro-calendar-card,
.macro-forward-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  min-width: 0;
  padding: 16px;
}

.macro-ai-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98)),
    radial-gradient(circle at 100% 0%, rgba(35, 100, 170, 0.12), transparent 36%);
  height: 100%;
  max-width: none;
}

.macro-ai-panel p {
  color: #334155;
  font-size: 13px;
  line-height: 1.65;
  margin: 0 0 10px;
  max-width: none;
}

.macro-ai-layout {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  margin-left: 0;
  max-width: none;
  min-width: 0;
  padding-left: 0;
}

.macro-ai-main {
  display: grid;
  gap: 10px;
  max-width: none;
  min-width: 0;
}

.macro-playbook {
  display: grid;
  gap: 8px;
}

.macro-playbook span {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #475569;
  font-size: 12px;
  line-height: 1.55;
  padding: 8px 10px;
}

.macro-research-brief {
  display: grid;
  gap: 12px;
  margin-left: 0;
  max-width: none;
  min-width: 0;
  padding-left: 0;
  width: 100%;
}

.macro-research-block {
  display: grid;
  gap: 8px;
  max-width: none;
  min-width: 0;
}

.macro-research-block b {
  color: #0f172a;
  font-size: 13px;
}

.macro-research-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.macro-research-chips span,
.macro-research-chips em {
  background: #eef6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  color: #1d4ed8;
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
  padding: 6px 9px;
}

.macro-research-split {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
}

.macro-research-block ul {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.macro-research-block li {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #475569;
  font-size: 12px;
  line-height: 1.55;
  padding: 8px 10px;
}

.macro-research-items {
  display: grid;
  gap: 8px;
  max-width: none;
  min-width: 0;
}

.macro-research-items article {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
}

.macro-research-items strong {
  color: #111827;
  display: block;
  font-size: 13px;
}

.macro-research-items span {
  color: var(--muted);
  display: block;
  font-size: 11px;
  margin-top: 2px;
}

.macro-research-items p {
  color: #334155;
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

.macro-research-items footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.macro-research-items em {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  padding: 2px 7px;
}

.macro-research-brief small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.macro-event-list,
.macro-forward-list {
  align-content: start;
  display: grid;
  gap: 8px;
}

.macro-event-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #94a3b8;
  border-radius: 12px;
  display: grid;
  gap: 7px;
  padding: 10px;
}

.macro-event-card.beat {
  border-left-color: #dc2626;
}

.macro-event-card.miss {
  border-left-color: #2563eb;
}

.macro-event-card.inline {
  border-left-color: #16a34a;
}

.macro-event-card.is-missing {
  background: #fff7ed;
  border-color: #fed7aa;
  border-left-color: #f97316;
}

.macro-event-card.is-pending {
  background: #f8fafc;
  border-left-color: #64748b;
}

.macro-event-card.is-attention {
  background: #fefce8;
  border-color: #fde68a;
  border-left-color: #ca8a04;
}

.macro-event-card.is-weekly-highlight {
  box-shadow: inset 0 0 0 1px rgba(35, 100, 170, 0.2);
}

.macro-event-card.compact {
  gap: 5px;
  padding: 8px;
}

.macro-event-top,
.macro-event-values {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.macro-event-top span {
  background: #e7f0ff;
  border-radius: 999px;
  color: #2364aa;
  font-size: 11px;
  font-weight: 850;
  padding: 2px 7px;
}

.macro-event-status {
  background: #ecfdf3;
  border-radius: 999px;
  color: #137a4c;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  padding: 2px 7px;
}

.macro-event-card.is-missing .macro-event-status {
  background: #ffedd5;
  color: #c2410c;
}

.macro-event-card.is-pending .macro-event-status {
  background: #e2e8f0;
  color: #475569;
}

.macro-event-card.is-attention .macro-event-status {
  background: #fef3c7;
  color: #a16207;
}

.macro-event-top em,
.macro-event-values span,
.macro-event-card small {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.macro-event-card strong {
  color: #111827;
  font-size: 13px;
}

.macro-event-card p {
  color: #475569;
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

.macro-calendar-panel,
.macro-forward-grid {
  margin-bottom: 16px;
}

.macro-calendar-weekdays,
.macro-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
}

.macro-calendar-weekdays {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
  text-align: center;
}

.macro-calendar-grid {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: auto;
}

.macro-calendar-day {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  min-height: 148px;
  padding: 8px;
}

.macro-calendar-day.muted-month {
  background: #f8fafc;
  opacity: 0.72;
}

.macro-calendar-day b {
  color: #1f2937;
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
}

.macro-core-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.9fr);
  margin-bottom: 16px;
}

.macro-core-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98));
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.macro-section-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.macro-section-head h2 {
  font-size: 20px;
  margin: 2px 0 0;
}

.macro-section-head span {
  color: var(--muted);
  font-size: 12px;
}

.macro-gauge-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.macro-gauge-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  display: grid;
  gap: 8px;
  min-height: 156px;
  padding: 12px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.macro-gauge-card.clickable {
  cursor: pointer;
}

.macro-gauge-card.clickable:hover,
.macro-gauge-card.clickable:focus-visible {
  border-color: rgba(35, 100, 170, 0.45);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.13);
  outline: none;
  transform: translateY(-2px);
}

.macro-gauge-card.hot {
  background: linear-gradient(180deg, #fff7ed, #fff);
  border-color: #fed7aa;
}

.macro-gauge-card.warm {
  background: linear-gradient(180deg, #fff8f3, #fff);
}

.macro-gauge-card.cool {
  background: linear-gradient(180deg, #eff6ff, #fff);
  border-color: #bfdbfe;
}

.macro-gauge-top {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.macro-gauge-top strong {
  font-size: 14px;
}

.macro-gauge-top span,
.macro-gauge-meta,
.macro-source-line {
  color: var(--muted);
  font-size: 12px;
}

.macro-gauge-value {
  color: #111827;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.macro-gauge-bar {
  background: #eef2f7;
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}

.macro-gauge-bar i {
  background: linear-gradient(90deg, #22c55e, #f59e0b 58%, #dc2626);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.macro-gauge-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-height: 16px;
}

.macro-gauge-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}

.macro-card-action {
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.macro-source-line {
  border-top: 1px dashed #e5e7eb;
  margin: 12px 0 0;
  padding-top: 10px;
}

.macro-rank-list {
  display: grid;
  gap: 8px;
}

.macro-rank-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 24px 72px minmax(110px, 1fr) 42px;
}

.macro-rank-row span {
  background: #f3f4f6;
  border-radius: 99px;
  color: var(--muted);
  font-size: 11px;
  height: 22px;
  line-height: 22px;
  text-align: center;
}

.macro-rank-row b {
  font-size: 13px;
  font-weight: 650;
}

.macro-rank-row div {
  background: #f1f5f9;
  border-radius: 99px;
  height: 10px;
  overflow: hidden;
}

.macro-rank-row i {
  background: linear-gradient(90deg, #3b82f6, #7c3aed, #dc2626);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.macro-rank-row em {
  color: #334155;
  font-size: 12px;
  font-style: normal;
  text-align: right;
}

.macro-chart-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
}

.macro-chart-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.macro-chart-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.macro-chart-head h3 {
  margin: 0;
}

.macro-legend {
  display: grid;
  gap: 4px;
  min-width: 180px;
}

.macro-legend span {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  gap: 6px;
}

.macro-legend i {
  background: var(--dot);
  border-radius: 99px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.macro-line-chart {
  height: 260px;
  margin-top: 8px;
  width: 100%;
}

.macro-grid line {
  stroke: #e5e7eb;
  stroke-width: 1;
}

.macro-axis text {
  fill: var(--muted);
  font-size: 11px;
}

.macro-axis text.macro-axis-right {
  fill: #2364aa;
  text-anchor: start;
}

.macro-detail-dialog {
  width: min(980px, 94vw);
}

.macro-detail-body {
  padding: 18px;
}

.macro-detail-body .macro-chart-card {
  box-shadow: none;
}

.macro-chart-card p,
.macro-empty {
  color: var(--muted);
  font-size: 13px;
}

.macro-note-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.macro-note {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 14px;
  line-height: 1.7;
  padding: 14px;
}

@media (max-width: 1180px) {
  .macro-event-summary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .macro-event-summary-grid,
  .macro-ai-layout,
  .macro-forward-grid {
    grid-template-columns: 1fr;
  }

  .macro-calendar-card {
    overflow-x: auto;
  }

  .macro-calendar-weekdays,
  .macro-calendar-grid {
    min-width: 880px;
  }

  .macro-range-panel {
    grid-template-columns: 1fr;
  }

  .macro-custom-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .macro-custom-range.hidden {
    display: none;
  }

  .macro-research-split {
    grid-template-columns: 1fr;
  }

  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 12px 12px 8px;
  }

  .brand {
    min-width: 0;
  }

  .brand p {
    display: none;
  }

  .tabs {
    background: rgba(255, 255, 255, .96);
    border-radius: 18px 18px 0 0;
    border-width: 1px 0 0;
    bottom: 0;
    box-shadow: 0 -12px 34px rgba(17, 24, 39, .16);
    gap: 4px;
    left: 0;
    overflow-x: auto;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    z-index: 30;
  }

  button.tab {
    background: #f2f4f7;
    border-radius: 999px;
    font-size: 13px;
    min-width: 88px;
    padding: 0 12px;
  }

  button.tab.active {
    background: var(--ink);
    color: #fff;
  }

  .pwa-install-card {
    align-items: stretch;
    border-radius: 14px;
    flex-direction: column;
    margin-top: 10px;
  }

  .pwa-install-actions {
    justify-content: flex-end;
  }

  .deviation-watch-card .table-wrap.compact {
    max-height: 68vh;
  }

  .metric-grid,
  .deviation-metrics,
  .split,
  .split.wide,
  .note-grid,
  .intro-grid,
  .market-chart-grid,
  .trigger-grid,
  .ladder-layout,
  .ladder-tier,
  .ladder-first-grid,
  .trend-card-grid,
  .review-insight-grid,
  .signal-hero,
  .signal-group-grid,
  .signal-note-grid,
  .signal-curve-grid,
  .macro-chart-grid,
  .macro-core-grid,
	  .macro-gauge-grid,
	  .macro-note-grid,
	  .data-health-grid,
	  .cache-schedule-grid,
	  .ai-referee-grid,
	  .watch-main-grid,
	  .watchlist-form,
	  .concept-searchbar,
	  .concept-profile-head,
	  .deviation-watch-grid,
	  .trend-levels,
	  .trade-plan-levels,
	  .trade-plan-grid,

  .stock-price-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .trend-hero,
  .ladder-hero,
  .signal-hero,
  .watch-hero,
  .macro-hero {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .trend-rule-card,
  .ladder-date-card,
  .signal-rule-card,
  .watch-hero-card,
  .macro-rule-card,

  .macro-range-panel {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .ladder-date-card {
    align-items: stretch;
    flex-direction: column;
  }

  .ladder-panel {
    overflow: visible;
  }

  .ladder-layout {
    gap: 10px;
    padding: 10px;
  }

  .ladder-board {
    padding: 10px;
    -webkit-overflow-scrolling: touch;
  }

  .ladder-tier {
    min-width: 560px;
    grid-template-columns: minmax(250px, 1fr) 32px minmax(250px, 1fr);
  }

  .ladder-tier.days-3 {
    min-width: 740px;
    grid-template-columns: minmax(220px, 1fr) 30px minmax(220px, 1fr) 30px minmax(220px, 1fr);
  }

  .ladder-first-grid {
    min-width: 540px;
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }

  .ladder-stock {
    min-height: 50px;
    padding: 8px 10px;
  }

  .ladder-stock-main strong,
  .ladder-stock-pct {
    font-size: 15px;
  }

  .ladder-arrow {
    min-height: auto;
    transform: none;
  }

  .ladder-compare-card {
    overflow-x: auto;
  }

  .ladder-compare-table {
    min-width: calc(82px + 20 * 104px);
  }

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

  .trend-backtest-actions,
  .trend-backtest-lower {
    grid-template-columns: 1fr;
  }

  .trend-analysis-grid,
  .strategy-condition-grid,
  .technical-hero,
  .technical-layout,
  .technical-backtest-actions,
  .technical-discovery-body {
    grid-template-columns: 1fr;
  }

  .technical-hero {
    padding: 20px;
  }

  .technical-subtabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .technical-toolbar,
  .technical-detail-head {
    align-items: stretch;
    flex-direction: column;
  }

  .technical-overall-main,
  .technical-overall-lists,
  .technical-price-action-grid,
  .technical-behavior-notes,
  .weekly-atr-row,
  .technical-backtest-kline-head {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .technical-price-action-head {
    align-items: stretch;
    flex-direction: column;
  }

  .technical-price-action-head em {
    align-self: flex-start;
    white-space: normal;
  }

  .pattern-bar-head {
    flex-direction: column;
  }

  .pattern-bar-head em {
    white-space: normal;
  }

  .pattern-list {
    grid-template-columns: 1fr;
  }

  .weekly-tf-grid,
  .atr-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sc-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .technical-overall-score {
    min-height: 0;
  }

  .technical-main-panel .panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .signal-scan-actions {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .technical-discovery-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .technical-context-pill {
    align-self: stretch;
    justify-content: center;
    white-space: normal;
  }

  .technical-discovery-grid {
    grid-template-columns: 1fr;
  }

  .scan-stock-head {
    flex-direction: column;
  }

  .technical-detail-panel {
    padding: 12px;
  }

  .trend-analysis-card-head {
    grid-template-columns: 1fr;
  }

  .trend-backtest-table-wrap {
    min-height: 420px;
    max-height: 560px;
  }

  .trend-backtest-actions {
    justify-content: stretch;
  }

  .kline-modal {
    padding: 10px;
  }

  .kline-dialog {
    width: 100%;
    max-height: 94vh;
    border-radius: 14px;
  }

  .kline-head {
    padding: 14px;
  }

  .kline-body {
    padding: 12px;
  }

  .stage-calendar {
    flex-wrap: wrap;
  }

  main {
    max-width: none;
    padding: 14px;
  }

  #review .metric-grid,
  #review .market-chart-grid {
    grid-template-columns: 1fr;
  }

  .review-subtabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .research-hero {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

  .research-hero h2 {
    font-size: 22px;
  }

  .research-hero-actions,
  .research-hero-actions button {
    width: 100%;
  }

  .research-subtabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .research-subtab {
    padding: 9px 10px;
  }

  .research-markdown {
    font-size: 13px;
    padding: 13px 12px 16px;
  }

  .research-report-panel .panel-actions,
  .research-category-select-label,
  .research-category-select {
    width: 100%;
  }

  .research-markdown h2 {
    font-size: 19px;
  }

  .research-markdown h3 {
    font-size: 16px;
  }

  .daily-latest-banner {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .daily-latest-banner p {
    text-align: left;
  }

  .daily-date-filter {
    padding: 12px;
  }

  .daily-date-filter-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .daily-date-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .daily-date-toggle {
    justify-content: center;
    padding: 7px 8px;
  }

  .research-category-grid {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .review-subtab {
    padding: 9px 10px;
  }

  .ai-review-hero,
  .ai-review-topline,
  .ai-agent-head {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .ai-review-actions,
  .ai-review-actions input,
  .ai-review-actions button {
    width: 100%;
  }

  .deep-ai-review-grid {
    grid-template-columns: 1fr;
  }

  .deep-ai-comparison {
    grid-template-columns: 1fr;
  }

  .deep-ai-review-card {
    max-height: none;
    overflow: visible;
  }

  .ai-review-agent-grid,
  .ai-review-card-grid,
  .ai-template-grid {
    grid-template-columns: 1fr;
  }

  #review .table-wrap {
    overflow-x: auto;
  }

  #review .review-template-table {
    min-width: 980px;
  }
}

@media (max-width: 720px) {
  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 58px;
  }

  body {
    min-width: 0;
    overflow-x: hidden;
    background: #f5f7fa;
  }

  .topbar {
    gap: 8px;
    padding: 10px 10px 7px;
  }

  .brand {
    gap: 9px;
  }

  .mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 13px;
  }

  h1 {
    font-size: 16px;
    line-height: 1.2;
  }

  h2 {
    font-size: 14px;
    line-height: 1.35;
  }

  h3 {
    font-size: 15px;
    line-height: 1.35;
  }

  .tabs {
    gap: 6px;
    padding: 7px 9px calc(7px + env(safe-area-inset-bottom));
    scroll-padding-inline: 9px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .tabs::-webkit-scrollbar,
  .review-subtabs::-webkit-scrollbar,
  .research-subtabs::-webkit-scrollbar,
  .technical-subtabs::-webkit-scrollbar,
  .trend-subtabs::-webkit-scrollbar,
  .watch-subtabs::-webkit-scrollbar {
    display: none;
  }

  button.tab {
    flex: 0 0 auto;
    min-width: 78px;
    min-height: 38px;
    padding: 0 12px;
    scroll-snap-align: start;
  }

  main {
    width: 100%;
    padding: 10px 8px calc(92px + env(safe-area-inset-bottom));
  }

  .pwa-install-card {
    width: calc(100vw - 16px);
    margin: 8px 8px 0;
    padding: 12px;
    border-radius: 10px;
  }

  .pwa-install-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .button-link {
    justify-content: center;
    min-height: 38px;
    width: 100%;
  }

  button,
  input,
  select,
  textarea {
    max-width: 100%;
  }

  button {
    min-height: 38px;
    padding: 0 12px;
  }

  input,
  select {
    height: 38px;
  }

  .toolband,
  .quickbar,
  .panel-actions,
  .ai-review-actions,
  .technical-toolbar,
  .technical-discovery-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .toolband > button,
  .toolband > .field,
  .quickbar > button,
  .panel-actions > button,
  .panel-actions > .field,
  .field,
  .field.grow {
    max-width: none;
    width: 100%;
  }

  .research-table {
    min-width: 680px;
  }

  .metric-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }

  .metric {
    min-height: 0;
    padding: 10px;
  }

  .metric .value {
    font-size: 19px;
    line-height: 1.25;
  }

  .panel {
    margin-bottom: 12px;
    border-radius: 8px;
  }

  .panel-head,
  .mini-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    padding: 10px 11px;
  }

  .panel-head h2,
  .mini-head strong {
    font-size: 15px;
  }

  .muted {
    line-height: 1.5;
  }

  .intro-grid > div,
  .cache-card,
  .health-card,
  .ai-review-agent-card,
  .ai-template-section,
  .deep-ai-comparison,
  .deep-ai-review-card,
  .technical-overall-card,
  .technical-price-action,
  .technical-backtest-kline-panel,
  .technical-backtest-kline-card {
    border-radius: 8px;
  }

  .table-wrap,
  .review-table-wrap,
  .technical-table-wrap,
  .technical-mini-table-wrap,
  .technical-backtest-table-wrap,
  .ai-review-table-wrap,
  .trend-backtest-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    font-size: 12px;
  }

  th,
  td {
    padding: 8px 9px;
  }

  #review {
    padding-inline: 0;
  }

  #review .table-wrap {
    overflow-x: auto;
  }

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

  #review .metric {
    min-width: 0;
  }

  #review .market-chart-grid {
    gap: 10px;
    padding: 10px;
  }

  .review-subtabs,
  .technical-subtabs,
  .trend-subtabs,
  .watch-subtabs {
    display: flex;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    padding: 5px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .review-subtab,
  .technical-subtab,
  .trend-subtab,
  .watch-subtab {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 12px;
  }

  .ai-review-hero,
  .technical-hero,
  .trend-hero,
  .ladder-hero,
  .watch-hero,
  .macro-hero,

  .ai-review-hero h2,
  .technical-hero h2,
  .trend-hero h2,
  .ladder-hero h2,
  .watch-hero h2,
  .macro-hero h2,

  .ai-review-hero span,
  .technical-hero p,
  .trend-hero p,
  .ladder-hero p,
  .watch-hero p,
  .macro-hero p,

  .ai-review-actions input,
  .ai-review-actions button {
    width: 100%;
  }

  .ai-review-content {
    gap: 12px;
  }

  .ai-review-topline {
    gap: 10px;
    padding: 13px;
    border-radius: 8px;
  }

  .ai-review-topline strong {
    font-size: 14px;
    line-height: 1.65;
  }

  .ai-review-topline em {
    justify-self: start;
    white-space: normal;
  }

  .deep-ai-review-grid,
  .deep-ai-comparison,
  .ai-review-agent-grid,
  .ai-review-card-grid,
  .ai-template-grid {
    grid-template-columns: 1fr;
  }

  .deep-ai-review-card {
    max-height: none;
    padding: 12px;
    overflow: visible;
  }

  .deep-ai-review-card header {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .deep-ai-review-card header strong {
    font-size: 16px;
  }

  .deep-ai-review-card header em {
    white-space: normal;
  }

  .deep-ai-review-body {
    gap: 10px;
    font-size: 13px;
    line-height: 1.78;
  }

  .deep-ai-review-body h3 {
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.45;
    padding: 7px 9px;
  }

  .deep-ai-review-body h4 {
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.45;
    margin-top: 5px;
    padding: 7px 9px;
  }

  .deep-ai-review-body h4::before {
    margin-top: 6px;
  }

  .ai-review-highlight-strip {
    gap: 5px;
  }

  .ai-review-highlight-strip span {
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.45;
    white-space: normal;
  }

  .ai-review-report-table {
    min-width: 520px;
  }

  #realtimeFlowPanel .panel-head,
  #realtimeFlowPanel .panel-actions {
    align-items: stretch;
  }

  .flow-date-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
  }

  .flow-date-controls input {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
  }

  .flow-date-controls .ghost-btn {
    min-width: 0;
    padding: 0 8px;
  }

  .flow-dashboard {
    gap: 10px;
    padding: 10px;
  }

  #realtimeFlowChart {
    min-height: 260px;
    border-radius: 8px;
  }

  .flow-legend {
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding-top: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .flow-legend-item {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 4px 7px;
  }

  .flow-board-picker {
    min-height: 0;
    border-radius: 8px;
    padding: 10px;
  }

  .flow-picker-list {
    max-height: 190px;
  }

  #realtimeFlowMeta {
    padding: 0 10px 12px;
  }

  .technical-hero-card,
  .trend-rule-card,
  .ladder-date-card,
  .signal-rule-card,
  .watch-hero-card,
  .macro-rule-card,

  .technical-layout {
    gap: 12px;
  }

  .technical-watch-panel,
  .technical-main-panel {
    max-height: none;
  }

  .technical-watchlist,
  .technical-overview {
    max-height: 52vh;
    padding: 8px;
  }

  .technical-watch-card {
    border-radius: 8px;
    padding: 9px 30px 9px 9px;
  }

  .technical-watch-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .technical-watch-meta span {
    white-space: normal;
  }

  .technical-detail-panel,
  .technical-backtest-panel,
  .signal-scan-panel {
    margin-top: 12px;
    padding: 10px;
    border-radius: 8px;
  }

  .technical-detail-head {
    padding: 12px;
    border-radius: 8px;
  }

  .technical-detail-head h2 {
    font-size: 22px;
    line-height: 1.25;
  }

  .technical-verdict {
    min-width: 0;
    width: 100%;
  }

  .technical-overall-card {
    padding: 12px;
  }

  .technical-overall-score {
    padding: 12px;
  }

  .technical-overall-score strong {
    font-size: 36px;
  }

  .technical-overall-copy,
  .technical-overall-breakdown,
  .technical-overall-lists > div {
    border-radius: 8px;
    padding: 10px;
  }

  .technical-overall-copy p,
  .technical-price-action-head p {
    font-size: 13px;
    line-height: 1.65;
  }

  .technical-metrics,
  .technical-backtest-metrics,
  .technical-backtest-summary,
  .signal-curve-grid,
  .technical-discovery-body,
  .technical-discovery-grid {
    grid-template-columns: 1fr;
  }

  .signal-scan-actions,
  .technical-backtest-actions {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .signal-scan-actions button,
  .signal-scan-actions label,
  .technical-backtest-actions button,
  .technical-backtest-actions label,
  .technical-context-pill {
    width: 100%;
  }

  .technical-context-pill {
    justify-content: center;
    min-height: 38px;
    white-space: normal;
  }

  .technical-backtest-kline-panel,
  .technical-backtest-table-wrap,
  .technical-backtest-metrics,
  .technical-backtest-summary {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .technical-backtest-kline-panel {
    padding: 10px;
  }

  .technical-backtest-table-wrap {
    max-height: 440px;
  }

  .technical-backtest-kline-card .kline-svg {
    min-width: 680px;
  }

  .kline-dialog {
    width: calc(100vw - 14px);
    max-height: calc(100vh - 14px);
    border-radius: 8px;
  }

  .kline-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  .kline-close {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .kline-body {
    padding: 10px;
  }

  .chart {
    min-height: 220px;
  }

  .chart.small {
    min-height: 210px;
  }

  .stage-calendar {
    gap: 6px;
    padding: 10px;
  }

  .concept-grid,
  .highboard-grid,
  .review-insight-grid,
  .fund-flow-rankings,
  .watch-main-grid,
  .cache-schedule-grid,
  .data-health-grid,
  .job-runs-list,
  .macro-core-grid,
  .macro-chart-grid,
  .macro-gauge-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  body {
    font-size: 13px;
  }

  .topbar {
    position: sticky;
    top: 0;
  }

  .tabs {
    border-radius: 14px 14px 0 0;
  }

  button.tab {
    min-width: 72px;
    font-size: 12px;
  }

  main {
    padding-inline: 7px;
  }

  #review .metric-grid,
  .trend-stats,
  .weekly-tf-grid,
  .atr-row {
    grid-template-columns: 1fr;
  }

  .review-subtabs,
  .technical-subtabs,
  .trend-subtabs,
  .watch-subtabs {
    margin-bottom: 10px;
  }

  .review-subtab,
  .technical-subtab,
  .trend-subtab,
  .watch-subtab {
    font-size: 12px;
  }

  .technical-watchlist,
  .technical-overview {
    max-height: 46vh;
  }

  .technical-table,
  .technical-overview .technical-table {
    min-width: 720px;
  }

  .technical-mini-table {
    min-width: 560px;
  }

  .technical-backtest-table {
    min-width: 760px;
  }

  #review .review-template-table {
    min-width: 860px;
  }

  .flow-date-controls {
    grid-template-columns: 1fr;
  }

  #realtimeFlowChart {
    min-height: 238px;
  }

  .ai-review-report-table {
    min-width: 480px;
  }
}

/* ============================================================
   案头研报 · 编辑风覆盖层（2026-06-10）
   依靠 CSS 后序覆盖既有同特异性规则；不改类名、不动 JS 钩子。
   ============================================================ */

/* —— 顶栏：纸面刊头 + 墨色双细线 —— */
.topbar {
  background: linear-gradient(180deg, #fffdf8, #fbf8f0);
  border-bottom: 0;
  box-shadow:
    0 1px 0 var(--ink),
    0 4px 0 -3px var(--ink),
    0 10px 24px rgba(38, 30, 15, 0.06);
  padding: 13px 22px;
}

.mark {
  background: var(--vermilion);
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 250, 240, 0.55),
    0 2px 6px rgba(191, 58, 43, 0.35);
  color: #fff8ef;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
}

.brand h1 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brand p {
  letter-spacing: 0.08em;
}

/* —— 标签页：编辑风下划线 —— */
.tabs {
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 2px;
  padding: 0;
}

button.tab {
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 -1px 0 transparent;
  color: var(--muted);
  font-weight: 600;
  min-height: 36px;
  min-width: 78px;
  transition: color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

button.tab:hover {
  background: rgba(38, 30, 15, 0.045);
  border-color: transparent;
  color: var(--text);
}

button.tab.active {
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--vermilion);
  color: var(--ink);
  font-weight: 700;
}

/* —— 标题：宋体刊头 —— */
h2,
h3,
.panel-head h2 {
  font-family: var(--serif);
  letter-spacing: 0.02em;
}

/* —— 面板：纸面卡片 —— */
.panel {
  border-color: var(--hairline);
  border-radius: 10px;
  box-shadow: var(--paper-shadow);
  transition: box-shadow 0.25s ease;
}

.panel:hover {
  box-shadow: var(--paper-shadow-hover);
}

.panel-head {
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: 13px 16px 11px;
}

/* —— 按钮 —— */
button,
.button-link {
  background: var(--surface);
  border-color: var(--hairline);
  border-radius: 8px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}

button:hover,
.button-link:hover {
  background: #fbf7ec;
  border-color: #b5a98c;
}

button:active {
  transform: translateY(1px) scale(0.99);
}

button.primary,
.button-link.primary {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 2px 8px rgba(29, 26, 19, 0.22);
  color: #f7f2e7;
}

button.primary:hover,
.button-link.primary:hover {
  background: #322d22;
  border-color: #322d22;
}

.ghost-btn {
  background: #f8f4ea;
  border-color: rgba(44, 93, 143, 0.28);
  color: var(--blue);
}

/* —— 输入控件 —— */
input,
select,
textarea {
  background: var(--surface);
  border-color: var(--hairline);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--vermilion);
  box-shadow: 0 0 0 3px rgba(191, 58, 43, 0.13);
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
}

/* —— 表格：研报数据栏 —— */
table {
  font-variant-numeric: tabular-nums;
}

th {
  background: transparent;
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

tbody tr {
  transition: background 0.12s ease;
}

tbody tr:hover > td {
  background: rgba(38, 30, 15, 0.026);
}

/* —— 徽章 / 提示 —— */
.stage {
  background: #eef2f7;
  font-weight: 600;
}

.stage.hot {
  background: #faeae6;
}

.stage.cold {
  background: #e9f2ec;
}

.alert {
  background: #fbf0ee;
  border-color: #ecc8c2;
  border-radius: 8px;
  color: #8c2b20;
}

/* —— 滚动条 / 选区 —— */
::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cdc4ab;
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #b3a888;
}

::selection {
  background: rgba(191, 58, 43, 0.16);
}

/* —— 视图切换入场 —— */
@keyframes editorial-view-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.view.active {
  animation: editorial-view-in 0.26s ease;
}

/* —— 安装卡与杂项色调对齐 —— */
.pwa-install-card {
  background: linear-gradient(135deg, #1d1a13, #3a3122 58%, var(--vermilion));
}

@media (prefers-reduced-motion: reduce) {
  .view.active {
    animation: none;
  }

  .panel,
  button,
  .button-link,
  button.tab,
  input,
  select,
  textarea,
  tbody tr {
    transition: none;
  }
}

/* ===== 市场周期板块 ===== */
.cycle-panel {
  margin-bottom: 16px;
}

.cycle-body {
  padding: 16px 18px 18px;
}

.cycle-summary {
  background: #f8f4e9;
  border-left: 3px solid var(--vermilion);
  border-radius: 0 8px 8px 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
  padding: 10px 14px;
}

.cycle-badge {
  border-radius: 999px;
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 12px;
  white-space: nowrap;
}

.cycle-up {
  background: rgba(191, 58, 43, 0.12);
  color: var(--red);
}

.cycle-down {
  background: rgba(46, 125, 84, 0.12);
  color: var(--green);
}

.cycle-flat {
  background: rgba(161, 106, 8, 0.12);
  color: var(--amber);
}

.cycle-na {
  background: #efe9d8;
  color: var(--muted);
}

.cycle-table .cycle-name {
  font-weight: 800;
  white-space: nowrap;
}

.cycle-group {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  margin-left: 4px;
}

.cycle-evidence {
  color: #5d553f;
  font-size: 12px;
  line-height: 1.6;
}

.cycle-signal-row td {
  background: #fdf6ec;
  border-left: 3px solid var(--amber);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}

.cycle-footnote {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.7;
  margin: 12px 0 0;
}

.cycle-major-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 14px;
}

.cycle-major-badge {
  font-family: var(--serif);
  font-size: 17px;
  padding: 6px 18px;
}

.cycle-major-note {
  color: #4e4633;
  font-size: 13px;
  line-height: 1.7;
  max-width: 760px;
}

.cycle-anchor-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 14px;
}

.cycle-anchor {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 5px;
  padding: 12px 14px;
}

.cycle-anchor b {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.cycle-anchor strong {
  color: var(--ink);
  font-size: 15px;
}

.cycle-anchor span {
  color: #5d553f;
  font-size: 12px;
  line-height: 1.65;
}

.cycle-history {
  border-top: 1px dashed var(--hairline);
  display: grid;
  gap: 7px;
  padding-top: 12px;
}

.cycle-history-item {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: 12.5px;
  gap: 8px;
}

.cycle-history-item b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 86px;
}

.cycle-history-item i {
  color: var(--vermilion);
  font-style: normal;
  font-weight: 700;
}

.cycle-history-item span {
  color: #5d553f;
}

.cycle-minor-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13px;
  margin-bottom: 12px;
}

.cycle-minor-head b {
  color: var(--ink);
}

.cycle-day-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cycle-day {
  border-radius: 8px;
  display: grid;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  gap: 2px;
  justify-items: center;
  min-width: 56px;
  padding: 7px 8px;
}

.cycle-day i {
  font-size: 11.5px;
  font-style: normal;
  font-weight: 800;
}

@media (max-width: 760px) {
  .cycle-anchor-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== 市场周期深化：温度计 / 色带 / 体征 ===== */
.cycle-combo {
  background: var(--ink);
  border-radius: 8px;
  color: #f7f3e8;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 12px;
  padding: 12px 16px;
}

.cycle-thermo-wrap {
  margin-bottom: 14px;
}

.cycle-thermo-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 10px;
}

.cycle-thermo-value {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}

.cycle-thermo-bar {
  background: linear-gradient(90deg, #2e7d54 0%, #8ba888 25%, #c9b97a 50%, #cf8a4e 75%, #bf3a2b 100%);
  border-radius: 999px;
  height: 10px;
  position: relative;
}

.cycle-thermo-bar i {
  background: var(--ink);
  border: 2px solid #fffdf8;
  border-radius: 50%;
  height: 18px;
  position: absolute;
  top: -4px;
  transform: translateX(-50%);
  width: 18px;
}

.cycle-thermo-scale {
  color: var(--muted);
  display: flex;
  font-size: 11px;
  justify-content: space-between;
  margin-top: 5px;
}

.cycle-rs {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.cycle-strip {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 1px;
}

td.cycle-strip-cell-wrap {
  min-width: 252px;
  white-space: nowrap;
}

.cycle-strip-cell {
  border-radius: 1px;
  display: inline-block;
  flex: 0 0 auto;
  height: 16px;
  width: 3px;
}

i.cycle-strip-cell.cycle-up { background: var(--red); }
i.cycle-strip-cell.cycle-down { background: var(--green); }
i.cycle-strip-cell.cycle-flat { background: #d9b96a; }
i.cycle-strip-cell.cycle-na { background: var(--line); }

.cycle-dim-reading {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cycle-source {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-style: normal;
  margin-top: 2px;
}

.cycle-signs {
  font-size: 12.5px;
  line-height: 1.7;
  margin: 10px 0;
}

.cycle-signs b {
  color: var(--ink);
}

.cycle-signs ul {
  margin: 4px 0 0;
  padding-left: 20px;
}

.cycle-signs .cycle-warn {
  color: #a16a08;
}

.cycle-signs .cycle-bottom {
  color: var(--green);
}

.cycle-stats {
  background: #f6f1e4;
  border-radius: 8px;
  color: #4e4633;
  font-size: 12.5px;
  margin: 0 0 12px;
  padding: 9px 13px;
}

/* 周期表在窄窗口下保持内容宽度、容器横向滚动，避免 fixed 布局压缩导致色带与依据列重叠 */
.table-wrap table.cycle-table {
  min-width: 1080px;
  table-layout: auto;
}