/* =============================================
   visualizations.css — 可视化组件专用样式
   业务公式引擎 · 可视化层
   ============================================= */

/* =====================================================
   0. 通用容器
   ===================================================== */

.viz-container {
  margin: var(--space-md) 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  animation: slide-up var(--duration-slow) var(--ease-default) both;
  overflow: hidden;
}

.viz-container + .viz-container {
  margin-top: var(--space-md);
}

.viz-title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.viz-title .viz-icon {
  font-size: var(--icon-size-lg);
  color: var(--accent-purple);
}

.viz-subtitle {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: var(--font-regular);
  margin-left: auto;
}

/* =====================================================
   1. 业务画像 Business Profile
   ===================================================== */

.business-profile {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.profile-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border: var(--border-width-thin) solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: var(--transition-color);
}

.profile-item:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}

.profile-item .profile-label {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.profile-item .profile-value {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

.profile-item .profile-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* 目标类型徽章 */
.target-type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-xs);
  background: var(--bg-badge);
  border: var(--border-width-thin) solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  color: var(--accent-purple);
}

.target-type-badge.type-growth {
  background: var(--level-4-bg);
  color: var(--level-4);
  border-color: var(--level-4);
}

.target-type-badge.type-profit {
  background: var(--level-3-bg);
  color: var(--level-3);
  border-color: var(--level-3);
}

.target-type-badge.type-efficiency {
  background: var(--level-5-bg);
  color: var(--level-5);
  border-color: var(--level-5);
}

.target-type-badge.type-retention {
  background: var(--level-6-bg);
  color: var(--level-6);
  border-color: var(--level-6);
}

/* =====================================================
   2. 公式树 Formula Tree
   ===================================================== */

.formula-tree {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  position: relative;
}

/* 目标栏 */
.formula-target-bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--gradient-main);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  font-weight: var(--font-bold);
  font-size: var(--text-md);
  margin-bottom: var(--space-md);
}

.formula-target-bar .target-label {
  font-size: var(--text-xs);
  opacity: 0.8;
  font-weight: var(--font-regular);
}

.formula-target-bar .target-value {
  margin-left: auto;
  font-size: var(--text-lg);
}

.formula-target-bar .target-unit {
  font-size: var(--text-xs);
  opacity: 0.7;
}

/* 公式表达式 */
.formula-expression {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--bg-input);
  border: var(--border-width-thin) solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  color: var(--text-primary);
  flex-wrap: wrap;
}

/* 算子符号 */
.formula-operator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--bg-badge);
  color: var(--accent-purple);
  border-radius: var(--radius-sm);
  font-weight: var(--font-bold);
  font-size: var(--text-md);
  flex-shrink: 0;
}

.formula-operator.op-multiply {
  color: var(--accent-blue);
  background: var(--level-5-bg);
}

.formula-operator.op-add {
  color: var(--accent-green);
  background: var(--level-4-bg);
}

.formula-operator.op-subtract {
  color: var(--accent-amber);
  background: var(--level-2-bg);
}

.formula-operator.op-divide {
  color: var(--accent-cyan);
  background: rgba(var(--accent-cyan-rgb), 0.15);
}

/* 参数节点 */
.param-node {
  display: inline-flex;
  flex-direction: column;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--bg-secondary);
  border: var(--border-width-thin) solid var(--border-color);
  border-radius: var(--radius-sm);
  min-width: 60px;
  text-align: center;
  transition: var(--transition-color);
}

.param-node:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-glow);
}

.param-name {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}

.param-values {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  margin-top: var(--space-3xs);
}

/* 子参数 */
.param-children {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-left: var(--space-2xl);
  margin-top: var(--space-xs);
  position: relative;
  flex-wrap: wrap;
}

.param-children::before {
  content: "";
  position: absolute;
  left: var(--space-lg);
  top: 0;
  bottom: 50%;
  width: var(--border-width-thick);
  border-left: var(--border-width-thin) solid var(--border-strong);
  border-bottom: var(--border-width-thin) solid var(--border-strong);
  border-bottom-left-radius: var(--radius-md);
}

.param-children .param-node {
  position: relative;
}

.param-children .param-node::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: var(--border-width-thin);
  height: 10px;
  background: var(--border-strong);
}

/* =====================================================
   3. 参数列表 Param List
   ===================================================== */

.param-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.param-list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border: var(--border-width-thin) solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: var(--transition-color);
}

.param-list-item:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}

.param-list-item .param-marker {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--gradient-main);
  color: var(--text-inverse);
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
}

.param-detail {
  flex: 1;
  min-width: 0;
}

.param-detail .param-key {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.param-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-3xs);
  line-height: var(--leading-snug);
}

.param-meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-2xs);
}

/* =====================================================
   4. 假设看板 Hypothesis Kanban
   ===================================================== */

.hypothesis-kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.kanban-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-height: 80px;
}

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) 0;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-xs);
}

.kanban-column.col-confirmed .kanban-column-header {
  border-bottom-color: var(--level-4);
  color: var(--level-4);
}

.kanban-column.col-testing .kanban-column-header {
  border-bottom-color: var(--level-3);
  color: var(--level-3);
}

.kanban-column.col-unconfirmed .kanban-column-header {
  border-bottom-color: var(--level-1);
  color: var(--level-1);
}

.kanban-column-count {
  background: var(--bg-secondary);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
}

/* 假设卡片 */
.hypothesis-card {
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.hypothesis-card:hover {
  background: var(--bg-card);
  border-color: var(--border-color);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.hypothesis-card.col-confirmed {
  background: var(--level-4-bg);
}

.hypothesis-card.col-testing {
  background: var(--level-3-bg);
}

.hypothesis-card.col-unconfirmed {
  background: var(--level-1-bg);
}

.hypothesis-card .hypothesis-text {
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

/* 假设类型标签 */
.hypothesis-type {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2xs);
}

.hypothesis-type.type-market {
  background: var(--level-5-bg);
  color: var(--level-5);
}

.hypothesis-type.type-product {
  background: var(--level-6-bg);
  color: var(--level-6);
}

.hypothesis-type.type-channel {
  background: var(--level-4-bg);
  color: var(--level-4);
}

.hypothesis-type.type-pricing {
  background: var(--level-3-bg);
  color: var(--level-3);
}

.hypothesis-type.type-ops {
  background: var(--level-2-bg);
  color: var(--level-2);
}

/* =====================================================
   5. 假设矩阵 Hypothesis Matrix
   ===================================================== */

.hypothesis-matrix {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: transparent;
  border: none;
}

.matrix-axis-y,
.matrix-axis-x {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.matrix-axis-y {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-xs) 0;
  justify-content: center;
}

.matrix-grid {
  display: grid;
  flex: 1;
  gap: 2px;
  background: var(--border-subtle);
  border: var(--border-width-thin) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.matrix-cell {
  background: var(--bg-secondary);
  padding: var(--space-xs);
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  position: relative;
  transition: var(--transition-color);
}

.matrix-cell:hover {
  background: var(--bg-card-hover);
}

.matrix-cell.cell-high {
  background: var(--level-4-bg);
}

.matrix-cell.cell-mid {
  background: var(--level-3-bg);
}

.matrix-cell.cell-low {
  background: var(--level-1-bg);
}

.matrix-cell .matrix-dot {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--accent-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  color: var(--text-inverse);
  box-shadow: var(--shadow-glow);
}

.matrix-cell .matrix-dot.dot-count {
  font-size: 10px;
}

/* 矩阵容器（含轴标签） */
.hypothesis-matrix-container {
  display: flex;
  gap: var(--space-xs);
}

.hypothesis-matrix-container .matrix-body {
  flex: 1;
}

.matrix-x-label {
  text-align: center;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  margin-top: var(--space-2xs);
}

/* =====================================================
   6. 逻辑塔 Logic Tower
   ===================================================== */

.logic-tower {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.logic-level {
  display: flex;
  align-items: stretch;
  position: relative;
  transition: var(--transition-normal);
}

/* 阶梯缩进效果 */
.logic-level:nth-child(1) { padding-left: 0; }
.logic-level:nth-child(2) { padding-left: var(--space-lg); }
.logic-level:nth-child(3) { padding-left: var(--space-2xl); }
.logic-level:nth-child(4) { padding-left: var(--space-3xl); }
.logic-level:nth-child(5) { padding-left: var(--space-4xl); }
.logic-level:nth-child(6) { padding-left: var(--space-5xl); }

/* 左侧连接线 */
.logic-level::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--border-width-thin);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--border-strong) 20%,
    var(--border-strong) 80%,
    transparent 100%
  );
}

/* 层级编号 */
.logic-level-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--text-inverse);
  z-index: 1;
  position: relative;
}

.logic-level:nth-child(1) .logic-level-num { background: var(--level-1); }
.logic-level:nth-child(2) .logic-level-num { background: var(--level-2); }
.logic-level:nth-child(3) .logic-level-num { background: var(--level-3); }
.logic-level:nth-child(4) .logic-level-num { background: var(--level-4); }
.logic-level:nth-child(5) .logic-level-num { background: var(--level-5); }
.logic-level:nth-child(6) .logic-level-num { background: var(--level-6); }

/* 层级内容 */
.logic-level-content {
  flex: 1;
  padding: var(--space-xs) var(--space-sm);
  margin-left: var(--space-sm);
  background: var(--bg-secondary);
  border: var(--border-width-thin) solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: var(--transition-color);
}

.logic-level-content:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}

.logic-level-content .logic-level-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-3xs);
}

.logic-level-content .logic-level-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

.logic-level-content .logic-level-formula {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-purple);
  margin-top: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  background: var(--bg-badge);
  border-radius: var(--radius-sm);
}

/* =====================================================
   7. 版本时间线 Version Timeline
   ===================================================== */

.version-timeline {
  position: relative;
  padding-left: var(--space-lg);
}

/* 垂直线 */
.version-timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-strong);
}

.version-node {
  position: relative;
  padding: var(--space-xs) 0 var(--space-md) var(--space-xl);
}

.version-node:last-child {
  padding-bottom: var(--space-xs);
}

/* 节点圆点 */
.version-circle {
  position: absolute;
  left: 0;
  top: var(--space-xs);
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  border: var(--border-width-thick) solid var(--accent-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: var(--transition-normal);
}

.version-circle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent-purple);
}

.version-circle.current {
  border-color: var(--accent-green);
  box-shadow: var(--shadow-glow-green);
  animation: pulse var(--anim-pulse-duration) var(--ease-default) infinite;
}

.version-circle.current::after {
  background: var(--accent-green);
}

/* 节点连线 */
.version-line {
  position: absolute;
  left: 11px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background: var(--border-subtle);
}

.version-node:last-child .version-line {
  display: none;
}

/* 版本内容 */
.version-content {
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border: var(--border-width-thin) solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: var(--transition-color);
}

.version-content:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}

.version-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2xs);
}

.version-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.version-date {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.version-changes {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

.version-changes li {
  margin: var(--space-3xs) 0;
  padding-left: var(--space-sm);
  position: relative;
}

.version-changes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--accent-purple);
}

/* =====================================================
   8. 冰山图 Iceberg SVG 容器
   ===================================================== */

.iceberg-container {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-md);
}

.iceberg-container svg {
  width: 100%;
  max-width: 500px;
  height: auto;
}

.iceberg-water-line {
  position: relative;
  height: 1px;
  width: 100%;
  background: var(--border-strong);
  margin: var(--space-sm) 0;
}

.iceberg-water-line::after {
  content: "水位线";
  position: absolute;
  right: 0;
  top: -18px;
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

.iceberg-label {
  font-size: var(--text-xs);
  fill: var(--text-secondary);
  font-family: var(--font-sans);
}

.iceberg-label-visible {
  fill: var(--accent-blue);
}

.iceberg-label-hidden {
  fill: var(--text-muted);
}

.iceberg-shape-visible {
  fill: rgba(var(--accent-blue-rgb), 0.15);
  stroke: var(--accent-blue);
  stroke-width: 1.5;
}

.iceberg-shape-hidden {
  fill: rgba(var(--accent-purple-rgb), 0.08);
  stroke: rgba(var(--accent-purple-rgb), 0.4);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

/* =====================================================
   9. 可视化动画
   ===================================================== */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(0.97);
  }
}

@keyframes wave {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 可视化元素逐项出现 */
.viz-container .fade-in-seq > * {
  opacity: 0;
  animation: fade-in var(--duration-slow) var(--ease-default) forwards;
}

.viz-container .fade-in-seq > *:nth-child(1) { animation-delay: 0.05s; }
.viz-container .fade-in-seq > *:nth-child(2) { animation-delay: 0.10s; }
.viz-container .fade-in-seq > *:nth-child(3) { animation-delay: 0.15s; }
.viz-container .fade-in-seq > *:nth-child(4) { animation-delay: 0.20s; }
.viz-container .fade-in-seq > *:nth-child(5) { animation-delay: 0.25s; }
.viz-container .fade-in-seq > *:nth-child(6) { animation-delay: 0.30s; }
.viz-container .fade-in-seq > *:nth-child(7) { animation-delay: 0.35s; }
.viz-container .fade-in-seq > *:nth-child(8) { animation-delay: 0.40s; }

/* =====================================================
   10. 响应式适配
   ===================================================== */

@media (max-width: 768px) {
  .business-profile {
    grid-template-columns: 1fr;
  }

  .hypothesis-kanban {
    grid-template-columns: 1fr;
  }

  .logic-level:nth-child(n) {
    padding-left: var(--space-sm);
  }

  .viz-container {
    padding: var(--space-md);
  }

  .formula-expression {
    flex-direction: column;
    align-items: flex-start;
  }

  .param-children {
    padding-left: var(--space-md);
  }
}