/* ===== P1-6: Virtual Cost Guide ===== */

/* Flow diagram (rules tab) */
.vc-flow-diagram {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 20px 0;
  overflow-x: auto;
}
.vc-flow-step {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 140px;
}
.vc-flow-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 8px;
}
.vc-flow-content {
  text-align: center;
  flex: 1;
  min-width: 0;
}
.vc-flow-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 0 auto 8px;
}
.vc-flow-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}
.vc-flow-desc {
  font-size: 12px;
  color: #606266;
  line-height: 1.5;
}
.vc-flow-arrow {
  font-size: 18px;
  color: #C0C4CC;
  flex-shrink: 0;
  padding: 0 4px;
  margin-top: 22px;
}

/* Strategy tips */
.vc-strategy-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #EBEEF5;
}
.vc-strategy-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vc-strategy-cards {
  display: flex;
  gap: 12px;
}
.vc-strategy-card {
  flex: 1;
  padding: 16px 14px;
  background: #F5F7FA;
  border-radius: 8px;
  text-align: center;
}
.vc-strategy-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin: 0 auto 8px;
}
.vc-strategy-label {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}
.vc-strategy-desc {
  font-size: 12px;
  color: #606266;
  line-height: 1.5;
}

/* Simulator */
.vc-sim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.vc-sim-budget {
  font-size: 14px;
  color: #303133;
}
.vc-sim-budget .num { font-weight: 700; font-size: 18px; }
.vc-sim-budget .num.ok { color: #67C23A; }
.vc-sim-budget .num.warn { color: #E6A23C; }
.vc-sim-budget .num.over { color: #F56C6C; }
.vc-sim-presets { display: flex; gap: 6px; }

/* Course search */
.vc-sim-add-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.vc-sim-count {
  font-size: 12px;
  color: #909399;
  flex-shrink: 0;
}
.vc-search-dropdown {
  background: #fff;
  border: 1px solid #DCDFE6;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 12px;
}
.vc-search-item {
  padding: 10px 14px;
  cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid #F5F7FA;
}
.vc-search-item:last-child { border-bottom: none; }
.vc-search-item:hover { background: #F5F9FF; }
.vc-search-name { font-size: 14px; font-weight: 500; color: #303133; }
.vc-search-code { font-size: 12px; color: #909399; margin-left: 8px; }
.vc-search-meta { font-size: 12px; color: #909399; margin-top: 2px; }
.vc-search-empty {
  padding: 20px;
  text-align: center;
  color: #909399;
  font-size: 13px;
}

.vc-sim-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 40vh;
  overflow-y: auto;
}
.vc-sim-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #EBEEF5;
  border-radius: 6px;
}
.vc-sim-info { flex: 1; min-width: 0; }
.vc-sim-name { font-size: 14px; font-weight: 500; color: #303133; }
.vc-sim-meta { font-size: 12px; color: #909399; margin-top: 2px; }
.vc-sim-input { width: 90px; flex-shrink: 0; }
.vc-sim-prob {
  width: 70px;
  text-align: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 16px;
}
.vc-sim-prob.high { color: #67C23A; }
.vc-sim-prob.mid { color: #E6A23C; }
.vc-sim-prob.low { color: #F56C6C; }
.vc-prob-label {
  font-size: 11px;
  font-weight: 400;
  margin-top: 1px;
}
.vc-sim-empty {
  text-align: center;
  padding: 32px 0;
  color: #C0C4CC;
  font-size: 13px;
}
.vc-sim-empty .el-icon { display: block; margin: 0 auto 8px; }

.vc-sim-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #EBEEF5;
}
.vc-sim-note {
  font-size: 12px;
  color: #909399;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Probability legend */
.vc-prob-legend {
  display: flex;
  gap: 16px;
  padding: 10px 0 0;
  justify-content: center;
}
.vc-prob-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
}
.vc-prob-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.vc-prob-dot.high { background: #67C23A; }
.vc-prob-dot.mid { background: #E6A23C; }
.vc-prob-dot.low { background: #F56C6C; }