/*
 * 期权策略训练系统 — 通用组件库
 * 负责人: 工程师 A | 文件: css/components.css | 任务: A-02
 * 最后更新: 2026-04-07
 * ================================================
 * 所有工程师按此文件中的 class 使用，禁止重复实现
 */

/* ───────────────────────────────────────────────
   CARDS — .card / .card-hover
─────────────────────────────────────────────── */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  transition: border-color var(--transition-normal),
              background var(--transition-normal),
              transform var(--transition-normal);
}

.card-hover { cursor: pointer; }
.card-hover:hover {
  background: var(--color-card-hover);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.card--accent {
  border-color: var(--color-accent);
  background: linear-gradient(135deg, var(--color-card) 80%, rgba(20, 121, 255, 0.06));
}

.card--danger {
  border-color: var(--color-red);
  background: linear-gradient(135deg, var(--color-card) 80%, var(--color-red-dim));
}

.card--success {
  border-color: var(--color-green);
  background: linear-gradient(135deg, var(--color-card) 80%, var(--color-green-dim));
}

.card--warning {
  border-color: var(--color-yellow);
  background: linear-gradient(135deg, var(--color-card) 80%, var(--color-yellow-dim));
}

.card--purple {
  border-color: var(--color-purple);
  background: linear-gradient(135deg, var(--color-card) 80%, var(--color-purple-dim));
}

.card-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.card-title { font-size: var(--text-lg); font-weight: 700; color: var(--color-text); }
.card-body { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.7; }

/* ───────────────────────────────────────────────
   BADGES — .badge
─────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge--accent { background: var(--color-accent-glow); color: var(--color-accent); border-color: var(--border-accent-30); }
.badge--green { background: var(--color-green-dim); color: var(--color-green); border-color: var(--border-green-30); }
.badge--red { background: var(--color-red-dim); color: var(--color-red); border-color: var(--border-red-30); }
.badge--yellow { background: var(--color-yellow-dim); color: var(--color-yellow); border-color: var(--border-yellow-30); }
.badge--blue { background: var(--color-blue-dim); color: var(--color-blue); border-color: var(--border-blue-30); }
.badge--purple { background: var(--color-purple-dim); color: var(--color-purple); border-color: var(--border-purple-30); }
.badge--orange { background: var(--color-orange-dim); color: var(--color-orange); border-color: var(--border-orange-30); }
.badge--gray { background: rgba(128, 144, 170, 0.12); color: var(--color-text-muted); border-color: rgba(128, 144, 170, 0.3); }

/* ───────────────────────────────────────────────
   RISK STARS — .risk-star
─────────────────────────────────────────────── */
.risk-star { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-sm); }
.risk-star .star-filled { color: currentColor; }
.risk-star .star-empty { color: var(--color-border); }
.risk-star--1 { color: var(--color-green); }
.risk-star--2 { color: var(--color-green-light); }
.risk-star--3 { color: var(--color-yellow); }
.risk-star--4 { color: var(--color-orange); }
.risk-star--5 { color: var(--color-red); }

/* ───────────────────────────────────────────────
   TICKER — .ticker (股票代码统一样式)
─────────────────────────────────────────────── */
.ticker {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text);
  background: var(--color-border);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

.ticker--lg { font-size: var(--text-xl); padding: var(--space-1) var(--space-3); }
.ticker--inline { background: transparent; padding: 0; color: var(--color-accent); }

.ticker-capsule {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  border: 1px solid currentColor;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}
.ticker-capsule:hover { opacity: 1; }
.ticker-capsule--tech { color: var(--sector-tech); background: rgba(20, 121, 255, 0.08); }
.ticker-capsule--semi { color: var(--sector-semi); background: rgba(167, 139, 250, 0.08); }
.ticker-capsule--crypto { color: var(--sector-crypto); background: rgba(251, 146, 60, 0.08); }
.ticker-capsule--finance { color: var(--sector-finance); background: rgba(34, 197, 94, 0.08); }
.ticker-capsule--pharma { color: var(--sector-pharma); background: rgba(239, 68, 68, 0.08); }
.ticker-capsule--etf { color: var(--sector-etf); background: rgba(128, 144, 170, 0.08); }

/* ───────────────────────────────────────────────
   TIP BOXES — .tip-box (4 种颜色提示框)
─────────────────────────────────────────────── */
.tip-box {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border-left: 3px solid currentColor;
  font-size: var(--text-sm);
  line-height: 1.65;
  margin-block: var(--space-4);
}
.tip-box__icon { flex-shrink: 0; font-size: var(--text-lg); margin-top: 1px; }
.tip-box__content { flex: 1; }
.tip-box__title { font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-1); }
.tip-box--info { color: var(--color-blue); background: var(--color-blue-dim); border-color: var(--color-blue); }
.tip-box--success { color: var(--color-green); background: var(--color-green-dim); border-color: var(--color-green); }
.tip-box--warning { color: var(--color-yellow); background: var(--color-yellow-dim); border-color: var(--color-yellow); }
.tip-box--danger { color: var(--color-red); background: var(--color-red-dim); border-color: var(--color-red); }

/* ───────────────────────────────────────────────
   SECTION BANNER — .section-banner
─────────────────────────────────────────────── */
.section-banner {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-10);
  margin-bottom: var(--space-10);
  position: relative;
  overflow: hidden;
}
.section-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
}
.section-banner__number {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.section-banner__title { font-size: var(--text-3xl); font-weight: 700; margin-bottom: var(--space-3); }
.section-banner__desc { color: var(--color-text-muted); font-size: var(--text-base); max-width: 640px; }
.section-banner__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* ───────────────────────────────────────────────
   BUTTONS — .btn-primary / .btn-ghost / .btn-danger
─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  transition: all var(--transition-normal);
  white-space: nowrap;
  border: 1px solid transparent;
  text-decoration: none;
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--color-accent); color: var(--print-bg); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-dim); color: var(--print-bg); box-shadow: 0 0 20px var(--color-accent-glow); }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-glow); }
.btn-danger { background: var(--color-red-dim); color: var(--color-red); border-color: var(--border-red-40); }
.btn-danger:hover { background: var(--color-red); color: var(--print-bg); }
.btn-success { background: var(--color-green-dim); color: var(--color-green); border-color: var(--border-green-40); }
.btn-success:hover { background: var(--color-green); color: var(--color-bg); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); border-radius: var(--radius-lg); }

/* ───────────────────────────────────────────────
   TABLES — .table-std
─────────────────────────────────────────────── */
.table-wrapper { width: 100%; overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.table-std { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table-std thead { background: var(--color-card-hover); }
.table-std th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.table-std td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text);
  vertical-align: top;
  line-height: 1.5;
}
.table-std tbody tr:last-child td { border-bottom: none; }
.table-std tbody tr:hover td { background: var(--color-card); }
.table-std tbody tr.row-highlight td { background: var(--color-accent-glow); }

/* ───────────────────────────────────────────────
   COLLAPSE — .collapse-toggle (折叠组件)
─────────────────────────────────────────────── */
.collapse { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--transition-normal); }
.collapse.is-open { border-color: var(--color-accent); }
.collapse-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-card);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
}
.collapse-toggle:hover { background: var(--color-card-hover); }
.collapse-toggle__title { font-weight: 700; font-size: var(--text-base); color: var(--color-text); }
.collapse-toggle__icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--color-text-muted); transition: transform var(--transition-normal); }
.collapse.is-open .collapse-toggle__icon { transform: rotate(180deg); }
.collapse-body { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow), padding var(--transition-normal); }
.collapse.is-open .collapse-body { max-height: 2000px; }
.collapse-body__inner { padding: var(--space-6); border-top: 1px solid var(--color-border); background: var(--color-card); }

/* ───────────────────────────────────────────────
   STRATEGY TAGS — .tag-buy / .tag-sell / .tag-ban
─────────────────────────────────────────────── */
.tag-buy, .tag-sell, .tag-ban, .tag-neutral {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: var(--font-mono);
  white-space: nowrap;
  border: 1px solid transparent;
}
.tag-buy { background: var(--color-green-dim); color: var(--color-green); border-color: var(--border-green-30); }
.tag-sell { background: var(--color-purple-dim); color: var(--color-purple); border-color: var(--border-purple-30); }
.tag-ban { background: var(--color-red-dim); color: var(--color-red); border-color: var(--border-red-30); }
.tag-neutral { background: var(--color-blue-dim); color: var(--color-blue); border-color: var(--border-blue-30); }

/* ───────────────────────────────────────────────
   ICON CARDS (首页三栏价值卡片)
─────────────────────────────────────────────── */
.icon-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}
.icon-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.icon-card:hover { border-color: var(--color-accent); background: var(--color-card-hover); transform: translateY(-4px); }
.icon-card:hover::after { opacity: 1; }

.icon-card__icon {
  width: 48px;
  height: 48px;
  background: var(--color-accent-glow);
  border: 1px solid var(--border-accent-30);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}
.icon-card__icon--green { background: var(--color-green-dim); border-color: var(--border-green-30); color: var(--color-green); }
.icon-card__icon--purple { background: var(--color-purple-dim); border-color: var(--border-purple-30); color: var(--color-purple); }
.icon-card__title { font-size: var(--text-xl); font-weight: 700; }
.icon-card__desc { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.7; }

/* ───────────────────────────────────────────────
   ENVIRONMENT CARDS (市场环境卡片)
─────────────────────────────────────────────── */
.env-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  min-width: 200px;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-normal), border-color var(--transition-normal);
}
.env-card:hover { transform: translateY(-2px); border-color: var(--color-border); }
.env-card__dot { width: 10px; height: 10px; border-radius: 50%; margin-bottom: var(--space-3); background: currentColor; }
.env-card__name { font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-3); }
.env-card__tags { display: flex; flex-direction: column; gap: var(--space-2); }
.env-card__action { margin-top: var(--space-4); }
.env-card--green { color: var(--color-green); border-top: 3px solid var(--color-green); }
.env-card--blue { color: var(--color-blue); border-top: 3px solid var(--color-blue); }
.env-card--red { color: var(--color-red); border-top: 3px solid var(--color-red); }
.env-card--orange { color: var(--color-orange); border-top: 3px solid var(--color-orange); }
.env-card--purple { color: var(--color-purple); border-top: 3px solid var(--color-purple); }
.env-card--gray { color: var(--color-text-muted); border-top: 3px solid var(--color-text-muted); }

/* ───────────────────────────────────────────────
   STAT CARDS (数值展示)
─────────────────────────────────────────────── */
.stat-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; }
.stat-card__value { font-family: var(--font-mono); font-size: var(--text-4xl); font-weight: 700; color: var(--color-accent); line-height: 1; margin-bottom: var(--space-2); }
.stat-card__label { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ───────────────────────────────────────────────
   CHECKLIST
─────────────────────────────────────────────── */
.checklist { display: flex; flex-direction: column; gap: var(--space-3); }
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}
.checklist-item:hover { border-color: var(--color-accent); }
.checklist-item.is-checked { border-color: var(--color-green); background: var(--color-green-dim); }
.checklist-item__box {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}
.checklist-item.is-checked .checklist-item__box { background: var(--color-green); border-color: var(--color-green); }
.checklist-item__text { font-size: var(--text-sm); color: var(--color-text); }

/* ───────────────────────────────────────────────
   TABS
─────────────────────────────────────────────── */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); overflow-x: auto; padding-bottom: 1px; }
.tab {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  margin-bottom: -1px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tab:hover { color: var(--color-text); background: var(--color-card); }
.tab.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* ───────────────────────────────────────────────
   LOADING SPINNER
─────────────────────────────────────────────── */
.spinner { width: 24px; height: 24px; border: 2px solid var(--color-border); border-top-color: var(--color-accent); border-radius: 50%; animation: spin 600ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────────────────────────────────────────────
   TOOLTIP
─────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-card-hover);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  box-shadow: var(--shadow-dropdown);
  z-index: 100;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ───────────────────────────────────────────────
   PROFIT SOURCE TAGS (收益来源标签)
─────────────────────────────────────────────── */
.source-delta, .source-theta, .source-vega, .source-gamma {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: var(--font-mono);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
}
.source-delta { background: var(--color-green-dim); color: var(--color-green); border-color: var(--border-green-30); }
.source-theta { background: var(--color-orange-dim); color: var(--color-orange); border-color: var(--border-orange-30); }
.source-vega { background: var(--color-purple-dim); color: var(--color-purple); border-color: var(--border-purple-30); }
.source-gamma { background: var(--color-red-dim); color: var(--color-red); border-color: var(--border-red-30); }

/* ───────────────────────────────────────────────
   SCROLLING TICKER BAND
─────────────────────────────────────────────── */
.ticker-band { overflow: hidden; width: 100%; padding-block: var(--space-4); position: relative; }
.ticker-band::before, .ticker-band::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.ticker-band::before { left: 0; background: linear-gradient(to right, var(--color-bg), transparent); }
.ticker-band::after { right: 0; background: linear-gradient(to left, var(--color-bg), transparent); }
.ticker-band__track { display: flex; gap: var(--space-4); animation: scroll-left 40s linear infinite; width: max-content; }
.ticker-band__track:hover { animation-play-state: paused; }

/* ───────────────────────────────────────────────
   STEP LIST (操作步骤)
─────────────────────────────────────────────── */
.step-list { display: flex; flex-direction: column; gap: var(--space-3); counter-reset: steps; }
.step-item { display: flex; gap: var(--space-4); align-items: flex-start; counter-increment: steps; }
.step-item__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--color-accent-glow);
  border: 1px solid var(--border-accent-40);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
}
.step-item__num::before { content: counter(steps); }
.step-item__text { flex: 1; font-size: var(--text-sm); color: var(--color-text); padding-top: 4px; line-height: 1.65; }

/* ───────────────────────────────────────────────
   ERROR CALLOUT (常见错误警告框)
─────────────────────────────────────────────── */
.error-callout {
  background: var(--color-red-dim);
  border: 1px solid var(--border-red-40);
  border-left: 4px solid var(--color-red);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.error-callout__title { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--text-sm); color: var(--color-red); margin-bottom: var(--space-3); }
.error-callout__list { display: flex; flex-direction: column; gap: var(--space-2); }
.error-callout__item { display: flex; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.error-callout__item::before { content: '×'; color: var(--color-red); font-weight: 700; flex-shrink: 0; }

/* ───────────────────────────────────────────────
   RESPONSIVE OVERRIDES
─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .tabs { gap: 0; }
  .tab { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); }
  .section-banner { padding: var(--space-6); }
  .collapse-toggle { padding: var(--space-4); }
  .collapse-body__inner { padding: var(--space-4); }
}