/* =========================================================
   Cartea · 全球内容营销中台 - 4 张实装页 v2 样式
   对齐设计卡 7 字段 + 原版视觉
   ========================================================= */

/* ====== 1.1 总部经营驾驶舱 v2 ====== */
.hq-cockpit-v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 8px;
}

/* 筛选器 */
.cockpit-filters-v2 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}
.filter-select-v2 {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.filter-label-v2 {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.filter-btn-v2 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  transition: all 0.2s;
}
.filter-btn-v2:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}
.filter-dropdown-v2 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 500;
  background-color: #141a2b;
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
  min-width: 120px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}
.filter-option-v2 {
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.filter-option-v2:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.filter-option-v2.active {
  background: rgba(139,92,246,0.15);
  color: var(--primary-light);
}
.filter-group-v2 {
  border-top: 1px solid var(--border-color);
  margin-top: 4px;
  padding-top: 4px;
}
.filter-group-v2:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.filter-group-label-v2 {
  padding: 6px 14px 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* 顶部 4 大 KPI */
.kpi-row-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.kpi-card-v2 {
  position: relative;
  padding: 20px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s;
  overflow: hidden;
}
.kpi-card-v2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gradient-primary);
  opacity: 0.5;
}
.kpi-card-v2:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}
.kpi-label-v2 {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.kpi-value-v2 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}
.kpi-number-v2 {
  font-size: 40px;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.kpi-unit-v2 {
  font-size: 16px;
  color: var(--text-secondary);
  font-weight: 500;
}
.kpi-change-v2 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.kpi-change-up { color: var(--accent-green); }
.kpi-change-down { color: var(--accent-red); }
.kpi-sub-v2 {
  color: var(--text-tertiary);
  margin-left: 6px;
}

.kpi-tooltip-v2 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  margin-top: -8px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  animation: fadeSlideDown 0.2s ease;
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.tooltip-title {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.tooltip-chart { height: 80px; margin-bottom: 8px; }
.tooltip-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-tertiary);
}
.tooltip-meta b { color: var(--accent-green); font-weight: 600; }

/* 主区：地图 + 异常预警 */
.cockpit-main-v2 {
  display: grid;
  grid-template-columns: 60% 1fr;
  gap: 16px;
  min-height: 340px;
}

.section-header-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.section-title-group { display: flex; align-items: baseline; gap: 10px; }
.section-title-v2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.section-sub-v2 {
  font-size: 12px;
  color: var(--text-tertiary);
}
.section-link-v2 {
  font-size: 12px;
  color: var(--primary-light);
  cursor: pointer;
}

.map-section-v2, .alert-section-v2 {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 世界地图 */
.map-legend-v2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.legend-scale {
  display: flex;
  gap: 2px;
}
.lg {
  width: 14px;
  height: 10px;
  border-radius: 2px;
}
.lg-1 { background: rgba(139,92,246,0.15); }
.lg-2 { background: rgba(139,92,246,0.35); }
.lg-3 { background: rgba(139,92,246,0.6); }
.lg-4 { background: rgba(139,92,246,0.9); }
.legend-high-label { color: var(--text-secondary); }
.legend-alert-item {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  color: var(--accent-red);
}
.alert-dot-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-red);
  animation: alertPulse 2s infinite;
}
@keyframes alertPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.7); }
  50% { box-shadow: 0 0 0 6px rgba(248,113,113,0); }
}

.world-map-v2 { flex: 1; position: relative; }
.map-svg-v2 {
  width: 100%;
  height: 100%;
  max-height: 260px;
}
.map-region-v2 { cursor: pointer; }
.region-block-v2 {
  fill: rgba(139,92,246,0.15);
  stroke: rgba(139,92,246,0.3);
  stroke-width: 1;
  transition: all 0.2s;
}
.map-level-1 .region-block-v2 { fill: rgba(139,92,246,0.12); }
.map-level-2 .region-block-v2 { fill: rgba(139,92,246,0.25); }
.map-level-3 .region-block-v2 { fill: rgba(139,92,246,0.45); }
.map-level-4 .region-block-v2 { fill: rgba(139,92,246,0.7); }
.region-text-v2 {
  fill: var(--text-primary);
  font-size: 11px;
  font-weight: 500;
}
.map-level-1 .region-text-v2,
.map-level-2 .region-text-v2 { fill: var(--text-secondary); }

.map-region-v2:hover .region-block-v2 {
  fill: rgba(34,211,238,0.5);
  stroke: var(--accent-cyan);
}
.map-region-v2.selected .region-block-v2 {
  fill: rgba(34,211,238,0.6);
  stroke: var(--accent-cyan);
  stroke-width: 2;
}
.map-region-v2.has-alert .region-block-v2 {
  stroke: var(--accent-red);
}
.map-region-v2.highlight .region-block-v2 {
  fill: rgba(248,113,113,0.5);
  stroke: var(--accent-red);
  stroke-width: 2;
  animation: regionAlertFlash 1.5s infinite;
}
@keyframes regionAlertFlash {
  0%, 100% { fill: rgba(248,113,113,0.4); }
  50% { fill: rgba(248,113,113,0.7); }
}

.alert-pulse-v2 {
  fill: var(--accent-red);
  animation: alertPulse 2s infinite;
}
.alert-ring-v2 {
  fill: none;
  stroke: var(--accent-red);
  stroke-width: 1;
  opacity: 0;
  animation: alertRing 2s infinite;
}
@keyframes alertRing {
  0% { r: 5; opacity: 0.8; }
  100% { r: 14; opacity: 0; }
}

/* 下钻面板 */
.drilldown-panel-v2 {
  position: absolute;
  top: 50px;
  right: 18px;
  width: 320px;
  max-height: calc(100% - 70px);
  background: rgba(15,21,36,0.95);
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: slideInRight 0.25s ease;
  z-index: 5;
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}
.drilldown-header-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
}
.drilldown-title-v2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.drilldown-sub-v2 {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.drilldown-close-v2 {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  border-radius: 6px;
  transition: all 0.2s;
}
.drilldown-close-v2:hover { background: var(--bg-hover); color: var(--text-primary); }
.drilldown-list-v2 {
  padding: 8px 0;
  overflow-y: auto;
  flex: 1;
}
.drilldown-row {
  display: grid;
  grid-template-columns: 24px 60px 1fr 60px 56px;
  gap: 8px;
  align-items: center;
  padding: 8px 16px;
  font-size: 12px;
  transition: background 0.15s;
}
.drilldown-row:hover { background: var(--bg-hover); }
.drilldown-rank {
  width: 20px; height: 20px;
  background: var(--bg-deep);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
}
.drilldown-cname { color: var(--text-primary); font-weight: 500; }
.ds-bar {
  height: 6px;
  background: var(--bg-deep);
  border-radius: 3px;
  overflow: hidden;
}
.ds-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 3px;
}
.drilldown-leads { color: var(--text-secondary); text-align: right; }
.drilldown-change { text-align: right; font-weight: 500; }
.drilldown-change.up { color: var(--accent-green); }
.drilldown-change.down { color: var(--accent-red); }
.drilldown-footer-v2 {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

/* 异常预警 */
.alert-count-v2 {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--accent-red);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 11px;
  margin-left: 8px;
}
.alert-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-panel);
  padding: 3px;
  border-radius: 8px;
}
.alert-tab {
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-tertiary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.alert-tab:hover { color: var(--text-secondary); }
.alert-tab.active {
  background: var(--primary);
  color: white;
}

.alert-list-v2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  max-height: 320px;
}
.alert-item-v2 {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}
.alert-item-v2:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}
.alert-item-v2.alert-critical { border-left-color: var(--accent-red); }
.alert-item-v2.alert-warning { border-left-color: var(--accent-orange); }
.alert-item-v2.alert-info { border-left-color: var(--accent-cyan); }

.alert-icon-v2 {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.alert-critical .alert-icon-v2 {
  background: rgba(248,113,113,0.15);
  color: var(--accent-red);
}
.alert-warning .alert-icon-v2 {
  background: rgba(245,158,11,0.15);
  color: var(--accent-orange);
}
.alert-info .alert-icon-v2 {
  background: rgba(34,211,238,0.15);
  color: var(--accent-cyan);
}
.alert-body-v2 { flex: 1; min-width: 0; }
.alert-title-row-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  gap: 8px;
}
.alert-title-v2 {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alert-level-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  font-weight: 500;
}
.alert-critical .alert-level-tag {
  background: rgba(248,113,113,0.15);
  color: var(--accent-red);
}
.alert-warning .alert-level-tag {
  background: rgba(245,158,11,0.15);
  color: var(--accent-orange);
}
.alert-info .alert-level-tag {
  background: rgba(34,211,238,0.15);
  color: var(--accent-cyan);
}
.alert-detail-v2 {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.alert-meta-v2 {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-tertiary);
}

/* 底部 3 模块 */
.cockpit-bottom-v2 {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  min-height: 580px;
}
.bottom-card-v2 {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 爆款 TOP10 */
.hot-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 100%;
  flex: 1;
  min-height: 0;
}
.hot-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
.hot-item:hover { background: var(--bg-hover); }
.hot-rank {
  width: 22px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-tertiary);
}
.hot-rank-top {
  color: var(--primary-light);
}
.hot-thumb {
  width: 48px; height: 32px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.hot-thumb-inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.hot-info { flex: 1; min-width: 0; }
.hot-title {
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hot-tags {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}
.hot-tag {
  font-size: 10px;
  padding: 1px 5px;
  background: var(--bg-panel);
  color: var(--text-tertiary);
  border-radius: 3px;
}
.hot-tag-car { color: var(--primary-light); }
.hot-stats { text-align: right; flex-shrink: 0; }
.hot-views {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.hot-rate {
  font-size: 10px;
  color: var(--text-tertiary);
}

/* 经销商排行 */
.dealer-list-v2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.dealer-item-v2 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
.dealer-item-v2:hover { background: var(--bg-hover); }
.dealer-rank-v2 {
  width: 22px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-tertiary);
}
.dealer-rank-top { color: var(--primary-light); }
.dealer-avatar-v2 {
  width: 32px; height: 32px;
  background: var(--bg-panel);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.dealer-info-v2 { flex: 1; min-width: 0; }
.dealer-name-v2 {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
}
.dealer-region-v2 {
  font-size: 11px;
  color: var(--text-tertiary);
}
.dealer-bar-wrap {
  width: 120px;
  flex-shrink: 0;
}
.dealer-bar {
  height: 5px;
  background: var(--bg-panel);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.dealer-bar-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 3px;
}
.dealer-score-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-secondary);
}
.dealer-trend {
  display: flex;
  align-items: center;
  gap: 2px;
}
.trend-up { color: var(--accent-green); }
.trend-down { color: var(--accent-red); }

/* 目标完成率 */
.goal-rings {
  display: flex;
  justify-content: space-around;
  margin-bottom: 16px;
}
.goal-ring-item {
  text-align: center;
}
.ring-svg-wrap {
  position: relative;
  width: 90px; height: 90px;
  margin: 0 auto 6px;
}
.ring-center {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
}
.ring-pct {
  font-size: 18px;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ring-label {
  font-size: 12px;
  color: var(--text-secondary);
}
.goal-list-v2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.goal-item-v2 {
  padding: 8px 10px;
  background: var(--bg-panel);
  border-radius: 8px;
}
.goal-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.goal-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.goal-name-v2 {
  font-size: 12px;
  color: var(--text-primary);
  flex: 1;
}
.goal-pct {
  font-size: 12px;
  font-weight: 600;
}
.goal-bar-v2 {
  height: 5px;
  background: var(--bg-deep);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.goal-bar-fill-v2 {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}
.goal-target-v2 {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ====== 1.2 待办与审批 v2 ====== */
.todo-approval-v2 {
  display: flex;
  height: 100%;
  min-height: 600px;
  gap: 0;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
}

/* 左 Tab 栏 */
.todo-tabs-v2 {
  width: 220px;
  border-right: 1px solid var(--border-color);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  background: var(--bg-panel);
}
.todo-tabs-title {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 0 8px 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.todo-tab-v2 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-secondary);
  transition: all 0.15s;
  text-align: left;
}
.todo-tab-v2:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.todo-tab-v2.active {
  background: rgba(139,92,246,0.15);
  color: var(--primary-light);
}
.tab-icon {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
}
.tab-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
}
.tab-badge {
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  background: var(--bg-deep);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.todo-tab-v2.active .tab-badge {
  background: var(--primary);
  color: white;
}
.badge-high { background: var(--accent-red); color: white; }

.todo-tabs-divider {
  height: 1px;
  background: var(--border-color);
  margin: 12px 8px;
}
.todo-stats-v2 {
  display: flex;
  gap: 12px;
  padding: 12px 8px;
}
.stat-mini {
  flex: 1;
  text-align: center;
}
.stat-mini-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
}
.stat-mini-num.stat-urgent { color: var(--accent-red); }
.stat-mini-label {
  font-size: 11px;
  color: var(--text-tertiary);
  display: block;
  margin-top: 2px;
}

/* 中列表区 */
.todo-main-v2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--border-color);
}
.todo-toolbar-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.toolbar-left, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.selected-text {
  font-size: 12px;
  color: var(--text-tertiary);
}
.toolbar-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.15s;
}
.toolbar-filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}

/* checkbox */
.checkbox-wrap-v2 {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.checkbox-wrap-v2 input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.checkbox-custom-v2 {
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-hover);
  border-radius: 4px;
  display: inline-block;
  position: relative;
  transition: all 0.15s;
  flex-shrink: 0;
}
.checkbox-wrap-v2 input:checked + .checkbox-custom-v2 {
  background: var(--primary);
  border-color: var(--primary);
}
.checkbox-wrap-v2 input:checked + .checkbox-custom-v2::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 批量操作栏 */
.batch-bar-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  background: rgba(139,92,246,0.1);
  border-bottom: 1px solid var(--border-color);
  animation: slideDown 0.2s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.batch-bar-left {
  font-size: 13px;
  color: var(--primary-light);
  display: flex;
  align-items: center;
  gap: 6px;
}
.batch-bar-right {
  display: flex;
  gap: 8px;
}

/* 列表 */
.todo-list-v2 {
  flex: 1;
  overflow-y: auto;
}
.todo-item-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.todo-item-v2:hover { background: var(--bg-hover); }
.todo-item-v2.active { background: rgba(139,92,246,0.08); }
.todo-item-v2.selected { background: rgba(139,92,246,0.05); }

.priority-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.priority-urgent .priority-bar { background: var(--accent-red); }
.priority-important .priority-bar { background: var(--accent-orange); }
.priority-normal .priority-bar { background: var(--accent-green); }

.todo-item-v2.priority-urgent.active,
.todo-item-v2.priority-urgent:hover {
  box-shadow: inset 4px 0 0 var(--accent-red);
}

.item-checkbox { margin-left: 12px; }

.todo-avatar-v2 {
  width: 36px; height: 36px;
  background: var(--gradient-primary);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  font-size: 13px;
  color: white;
  flex-shrink: 0;
}
.todo-body-v2 { flex: 1; min-width: 0; }
.todo-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.todo-title-v2 {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.title-urgent {
  font-weight: 600;
  animation: urgentGlow 2s ease-in-out infinite;
}
@keyframes urgentGlow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 8px rgba(248,113,113,0.6); }
}
.todo-status-v2 {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  font-weight: 500;
}
.status-review { background: rgba(139,92,246,0.15); color: var(--primary-light); }
.status-pending { background: rgba(245,158,11,0.15); color: var(--accent-orange); }
.status-active { background: rgba(34,211,238,0.15); color: var(--accent-cyan); }
.status-read { background: rgba(107,114,128,0.2); color: var(--text-tertiary); }
.status-unread { background: rgba(248,113,113,0.15); color: var(--accent-red); }

.todo-meta-v2 {
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.todo-source-v2 { color: var(--text-secondary); }
.meta-dot { color: var(--text-tertiary); }

.todo-right-v2 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.todo-time-v2 {
  font-size: 11px;
  color: var(--text-tertiary);
}
.todo-priority-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.priority-tag-urgent {
  background: rgba(248,113,113,0.15);
  color: var(--accent-red);
}
.priority-tag-important {
  background: rgba(245,158,11,0.15);
  color: var(--accent-orange);
}
.priority-tag-normal {
  background: rgba(52,211,153,0.15);
  color: var(--accent-green);
}

/* 右详情抽屉 */
.todo-drawer-v2 {
  width: 0;
  flex-shrink: 0;
  overflow: hidden;
  transition: width 0.3s ease;
  background: var(--bg-panel);
}
.todo-drawer-v2.open { width: 380px; }

.drawer-empty-v2 {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  gap: 10px;
}
.empty-icon { color: var(--text-tertiary); opacity: 0.5; }
.empty-title { font-size: 14px; color: var(--text-secondary); }
.empty-sub { font-size: 12px; color: var(--text-tertiary); }

.drawer-content-v2 {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 380px;
}
.drawer-header-v2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
}
.drawer-priority {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 500;
  margin-bottom: 10px;
  display: inline-block;
}
.drawer-close-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  border-radius: 6px;
  transition: all 0.15s;
}
.drawer-close-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.drawer-body-v2 {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 20px;
}
.drawer-title-v2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
  line-height: 1.4;
}

.info-grid-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.info-cell.info-full { grid-column: 1 / -1; }
.info-label {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.info-value {
  display: block;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}
.info-link { color: var(--primary-light); cursor: pointer; }
.status-val { color: var(--accent-orange); }

.detail-section-v2 { margin-bottom: 20px; }
.section-title-sm {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}

/* 内容预览 */
.preview-card-v2 {
  background: var(--bg-card);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}
.preview-cover {
  position: relative;
  height: 160px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.8);
}
.preview-cover-inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.preview-type {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 3px 8px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  border-radius: 4px;
  font-size: 11px;
  color: white;
}
.preview-info {
  padding: 12px;
}
.preview-title {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 4px;
}
.preview-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  display: flex;
  gap: 6px;
}

/* 审批历史时间线 */
.timeline-v2 {
  position: relative;
  padding-left: 20px;
}
.timeline-item {
  position: relative;
  padding-bottom: 16px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: -20px;
  top: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text-tertiary);
  border: 2px solid var(--bg-panel);
  z-index: 1;
}
.timeline-passed .timeline-dot,
.timeline-passed .timeline-dot { background: var(--accent-green); }
.timeline-current .timeline-dot {
  background: var(--primary);
  width: 12px; height: 12px;
  left: -21px;
  box-shadow: 0 0 0 4px rgba(139,92,246,0.2);
  animation: timelinePulse 2s infinite;
}
@keyframes timelinePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(139,92,246,0.2); }
  50% { box-shadow: 0 0 0 6px rgba(139,92,246,0.1); }
}
.timeline-line {
  position: absolute;
  left: -16px;
  top: 12px;
  bottom: 0;
  width: 2px;
  background: var(--border-color);
}
.timeline-line.line-active { background: var(--accent-green); }
.timeline-content { }
.timeline-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}
.timeline-step {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}
.timeline-result {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.result-passed { background: rgba(52,211,153,0.15); color: var(--accent-green); }
.result-pending { background: rgba(139,92,246,0.15); color: var(--primary-light); }
.timeline-user {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.timeline-time {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.timeline-note {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-card);
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 2px solid var(--primary);
}

/* 评论 */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.comment-item {
  display: flex;
  gap: 10px;
}
.comment-avatar {
  width: 28px; height: 28px;
  background: var(--gradient-primary);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}
.comment-body { flex: 1; }
.comment-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
}
.comment-user {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}
.comment-time {
  font-size: 11px;
  color: var(--text-tertiary);
}
.comment-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.no-comments {
  text-align: center;
  padding: 16px;
  font-size: 12px;
  color: var(--text-tertiary);
}
.comment-input-wrap {
  display: flex;
  gap: 8px;
}
.comment-input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s;
}
.comment-input:focus { border-color: var(--primary); }
.comment-send {
  padding: 0 14px;
  background: var(--primary);
  color: white;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.2s;
}
.comment-send:hover { background: var(--primary-dark); }

.drawer-footer-v2 {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-color);
}
.drawer-footer-v2 .btn { flex: 1; }

/* ====== 1.3 全球营销日历 v3 ====== */
.calendar-v3 {
  display: flex;
  height: 100%;
  min-height: 600px;
  gap: 0;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
}

/* 左侧面板 */
.cal-left-panel {
  width: 22%;
  min-width: 220px;
  border-right: 1px solid var(--border-color);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bg-panel);
  flex-shrink: 0;
}
.cal-left-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cal-left-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.cal-select-all {
  font-size: 11px;
  color: var(--primary-light);
  background: none;
  cursor: pointer;
}
.cal-select-all:hover { text-decoration: underline; }

.region-layer-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.region-layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.region-layer-item:hover { background: var(--bg-hover); }
.region-layer-item.active { background: rgba(139,92,246,0.1); }
.layer-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.layer-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.layer-check-custom {
  width: 14px; height: 14px;
  border: 1.5px solid var(--border-hover);
  border-radius: 3px;
  display: inline-block;
  position: relative;
  transition: all 0.15s;
}
.layer-checkbox input:checked + .layer-check-custom {
  background: var(--primary);
  border-color: var(--primary);
}
.layer-checkbox input:checked + .layer-check-custom::after {
  content: '';
  position: absolute;
  left: 3px; top: 0px;
  width: 5px; height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.layer-color-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.layer-name {
  flex: 1;
  font-size: 12px;
  color: var(--text-primary);
}
.layer-count {
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-deep);
  padding: 1px 6px;
  border-radius: 8px;
}

/* 迷你世界地图 */
.mini-world-map {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 12px;
  border: 1px solid var(--border-color);
}
.mini-map-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.mini-map-svg { width: 100%; height: 100px; }
.mini-region-block {
  stroke: rgba(139,92,246,0.2);
  stroke-width: 0.5;
  transition: all 0.2s;
}
.mini-region:hover .mini-region-block {
  stroke: rgba(139,92,246,0.6);
}
.mini-alert-dot {
  fill: var(--accent-red);
  animation: alertPulse 2s infinite;
}

/* 冲突统计卡 */
.conflict-stat-card {
  padding: 14px;
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 10px;
}
.conflict-stat-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-red);
  margin-bottom: 6px;
}
.conflict-stat-num {
  margin-left: auto;
  background: var(--accent-red);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.conflict-stat-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* 中间日历 */
.cal-center-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
  gap: 12px;
  flex-shrink: 0;
}
.cal-nav-left, .cal-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cal-nav-btn-v3 {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  border-radius: 6px;
  transition: all 0.15s;
}
.cal-nav-btn-v3:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.cal-month-title-v3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 110px;
  text-align: center;
}
.cal-today-btn-v3 {
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.15s;
}
.cal-today-btn-v3:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.cal-view-switcher {
  display: flex;
  background: var(--bg-panel);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.view-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-tertiary);
  border-radius: 6px;
  transition: all 0.15s;
}
.view-btn:hover { color: var(--text-secondary); }
.view-btn.active {
  background: var(--primary);
  color: white;
}
.cal-tool-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.15s;
}
.cal-tool-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.cal-view-area {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* 月视图 */
.month-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0 8px;
}
.cal-week-header-v3 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border-color);
}
.week-day {
  padding: 10px;
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  font-weight: 500;
}
.cal-grid-v3 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(5, 1fr);
  flex: 1;
  overflow: hidden;
}
.cal-cell-v2 {
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  position: relative;
}
.cal-cell-v2.other-month {
  background: rgba(0,0,0,0.1);
  opacity: 0.4;
}
.cal-cell-v2.is-today {
  background: rgba(139,92,246,0.05);
}
.day-num {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}
.today-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--primary);
  color: white !important;
  border-radius: 50%;
  font-size: 12px;
}
.day-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  overflow: hidden;
}
.cal-event-v3 {
  height: 20px;
  border-radius: 3px;
  background: var(--evt-color, #8b5cf6);
  font-size: 10px;
  color: white;
  padding: 0 6px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: all 0.15s;
  border-left: 3px solid rgba(255,255,255,0.3);
}
.cal-event-v3:hover {
  filter: brightness(1.15);
  z-index: 2;
}
.cal-event-v3.conflict {
  border: 1px solid var(--accent-red);
  animation: conflictPulse 2s infinite;
}
@keyframes conflictPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.5); }
  50% { box-shadow: 0 0 0 3px rgba(248,113,113,0); }
}
.evt-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.cal-more-v3 {
  font-size: 10px;
  color: var(--text-tertiary);
  padding: 2px 6px;
  cursor: pointer;
}
.cal-more-v3:hover { color: var(--primary-light); }

/* 甘特图视图 */
.gantt-view {
  height: 100%;
  overflow: auto;
  position: relative;
}
.gantt-header {
  display: flex;
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 3;
  border-bottom: 1px solid var(--border-color);
}
.gantt-row-label {
  width: 110px;
  min-width: 110px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border-color);
  z-index: 2;
}
.gantt-header-label {
  font-weight: 600;
  color: var(--text-tertiary);
  justify-content: center;
}
.gantt-days-scale {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(31, 1fr);
}
.gantt-day-label {
  padding: 10px 0;
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: center;
  border-right: 1px solid var(--border-color);
}
.gantt-day-label.is-today {
  color: var(--primary-light);
  font-weight: 600;
}
.gantt-body {
  min-height: 400px;
}
.gantt-row {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}
.gantt-row:hover { background: rgba(139,92,246,0.03); }
.gantt-row-track {
  flex: 1;
  position: relative;
  height: 52px;
  background-image:
    linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
  background-size: calc(100% / 31) 100%;
}
.gantt-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 40px;
}
.gantt-bar:hover {
  filter: brightness(1.15);
  z-index: 2;
}
.gantt-bar.selected {
  outline: 2px solid white;
  outline-offset: 2px;
}
.gantt-bar.conflict {
  border: 2px solid var(--accent-red);
  animation: ganttConflict 2s infinite;
}
@keyframes ganttConflict {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.6); }
  50% { box-shadow: 0 0 0 4px rgba(248,113,113,0); }
}
.gantt-bar-name {
  font-size: 11px;
  color: white;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.gantt-conflict-mark {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px; height: 16px;
  background: var(--accent-red);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  border: 2px solid var(--bg-card);
}
.gantt-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent-red);
  z-index: 4;
  pointer-events: none;
}
.gantt-today-line::before {
  content: '今天';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-red);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.gantt-row-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}

/* 右侧详情抽屉 */
.cal-right-drawer {
  width: 0;
  flex-shrink: 0;
  overflow: hidden;
  transition: width 0.3s ease;
  background: var(--bg-panel);
  border-left: 0 solid var(--border-color);
}
.cal-right-drawer.open {
  width: 320px;
  border-left: 1px solid var(--border-color);
}
.drawer-empty-v3 {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  gap: 10px;
  padding: 0 20px;
}
.empty-cal-icon { opacity: 0.4; color: var(--text-tertiary); }

.campaign-detail-drawer {
  min-width: 320px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.cd-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.cd-status {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 500;
  margin-bottom: 8px;
}
.status-active { background: rgba(34,211,238,0.15); color: var(--accent-cyan); }
.status-pending { background: rgba(245,158,11,0.15); color: var(--accent-orange); }
.status-done { background: rgba(52,211,153,0.15); color: var(--accent-green); }
.cd-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.3;
}
.cd-sub {
  font-size: 12px;
  color: var(--text-tertiary);
}
.cd-close {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  border-radius: 6px;
  transition: all 0.15s;
}
.cd-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.cd-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 20px;
}
.cd-section { margin-top: 18px; }
.cd-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}
.cd-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cd-info-item { }
.cd-info-label {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 3px;
}
.cd-info-value {
  display: block;
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
}

.cd-conflict-warning {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 8px;
  margin-top: 14px;
}
.cd-conflict-icon { color: var(--accent-red); flex-shrink: 0; }
.cd-conflict-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-red);
  margin-bottom: 2px;
}
.cd-conflict-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.cd-stages {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.cd-stage-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
}
.cd-stage-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-deep);
  color: var(--text-tertiary);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 600;
  z-index: 1;
  border: 2px solid var(--bg-panel);
}
.cd-stage-dot.completed {
  background: var(--accent-green);
  color: white;
}
.cd-stage-dot.current {
  background: var(--primary);
  color: white;
  box-shadow: 0 0 0 4px rgba(139,92,246,0.2);
}
.cd-stage-name {
  font-size: 10px;
  color: var(--text-tertiary);
}
.cd-stage-item.completed .cd-stage-name { color: var(--accent-green); }
.cd-stage-item.current .cd-stage-name { color: var(--primary-light); }

.cd-roi-card {
  text-align: center;
  padding: 16px;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.cd-roi-value {
  font-size: 32px;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cd-roi-label {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.cd-team-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cd-team-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.cd-team-avatar {
  width: 28px; height: 28px;
  background: var(--gradient-primary);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: white;
}
.cd-team-name {
  font-size: 12px;
  color: var(--text-primary);
}

.cd-footer {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-color);
}
.cd-footer .btn { flex: 1; }

/* ====== 1.4 营销活动管理 v3 ====== */
.campaign-v3 {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  min-height: 600px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
}

/* 顶部状态圆环 Tab */
.camp-status-tabs {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.status-ring-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 12px;
  transition: all 0.2s;
}
.status-ring-tab:hover { background: var(--bg-hover); }
.status-ring-tab.active { background: rgba(139,92,246,0.1); }
.ring-wrap {
  position: relative;
  width: 72px; height: 72px;
}
.ring-center-v3 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ring-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
.status-ring-tab.active .ring-num { color: var(--primary-light); }
.ring-label-v3 {
  font-size: 12px;
  color: var(--text-secondary);
}
.status-ring-tab.active .ring-label-v3 {
  color: var(--text-primary);
  font-weight: 500;
}

.camp-tabs-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.camp-search-v3 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  width: 220px;
  height: 34px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-tertiary);
  transition: border-color 0.2s;
}
.camp-search-v3:focus-within { border-color: var(--primary); }
.camp-search-v3 input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 12px;
}
.camp-search-v3 input::placeholder { color: var(--text-tertiary); }

/* 活动主区 */
.camp-main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.camp-toolbar-v3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.camp-filter-tags {
  display: flex;
  gap: 6px;
}
.filter-tag {
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  background: var(--bg-panel);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.filter-tag:hover { color: var(--text-secondary); }
.filter-tag.active {
  background: rgba(139,92,246,0.15);
  color: var(--primary-light);
  border-color: rgba(139,92,246,0.3);
}
.camp-sort-v3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sort-label { font-size: 12px; color: var(--text-tertiary); }
.sort-select {
  padding: 4px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
}

.camp-grid-v3 {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-content: start;
}
.camp-card-v3 {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.camp-card-v3:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.camp-card-v3.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(139,92,246,0.3);
}

.camp-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.camp-status-tag {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 500;
}
.camp-region-tag {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--bg-card);
  color: var(--text-secondary);
  border-radius: 4px;
}
.camp-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.camp-card-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* 4 段阶段进度条 */
.camp-stage-progress { }
.stage-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.stage-l {
  font-size: 10px;
  color: var(--text-tertiary);
  flex: 1;
  text-align: center;
}
.stage-l.done { color: var(--accent-green); font-weight: 500; }
.stage-l.cur { color: var(--primary-light); font-weight: 500; }
.stage-bar-v3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  height: 8px;
  margin-bottom: 6px;
}
.stage-seg {
  background: rgba(139,92,246,0.15);
  border-radius: 2px;
}
.stage-seg.seg-done { background: var(--seg-color); }
.stage-seg.seg-cur {
  background: linear-gradient(90deg, var(--seg-color) 50%, rgba(139,92,246,0.15) 50%);
}
.stage-pct-text {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: right;
}

/* 区域热力网格 */
.camp-heat-grid { }
.heat-grid-title {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.heat-grid-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.heat-cell {
  padding: 6px 8px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all 0.15s;
}
.heat-cell:hover { filter: brightness(1.2); }
.heat-lv-1 { background: rgba(248,113,113,0.25); }
.heat-lv-2 { background: rgba(245,158,11,0.3); }
.heat-lv-3 { background: rgba(34,211,238,0.3); }
.heat-lv-4 { background: rgba(52,211,153,0.35); }

.heat-cell-name {
  font-size: 10px;
  color: var(--text-secondary);
}
.heat-cell-score {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* 底部数据 */
.camp-card-footer-v3 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}
.camp-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.metric-label {
  font-size: 10px;
  color: var(--text-tertiary);
}
.metric-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.metric-roi {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.camp-detail-arrow {
  margin-left: auto;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 4px;
  transition: all 0.15s;
}
.camp-card-v3:hover .camp-detail-arrow {
  color: var(--primary-light);
  transform: translateX(2px);
}

/* 详情抽屉 6 子模块 */
.camp-drawer-v3 {
  position: fixed;
  top: 0; right: 0;
  width: 0;
  height: 100vh;
  z-index: 1000;
  overflow: hidden;
  transition: width 0.3s ease;
  background: var(--bg-panel);
  border-left: 0 solid var(--border-color);
  box-shadow: -8px 0 24px rgba(0,0,0,0.3);
}
.camp-drawer-v3.open {
  width: 420px;
  border-left: 1px solid var(--border-color);
}

.camp-detail-v3 {
  width: 420px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.cdv-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.cdv-status {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 500;
  margin-bottom: 8px;
}
.cdv-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.cdv-sub {
  font-size: 12px;
  color: var(--text-tertiary);
}
.cdv-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  border-radius: 8px;
  transition: all 0.15s;
}
.cdv-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.cdv-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  padding: 0 12px;
  flex-shrink: 0;
}
.cdv-tab {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-tertiary);
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
  font-weight: 500;
}
.cdv-tab:hover { color: var(--text-secondary); }
.cdv-tab.active {
  color: var(--primary-light);
}
.cdv-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 12px; right: 12px;
  height: 2px;
  background: var(--primary);
  border-radius: 1px;
}

.cdv-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px 20px;
}
.detail-tab-content { padding-top: 18px; }
.tab-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tab-count {
  font-size: 11px;
  padding: 1px 7px;
  background: var(--bg-card);
  color: var(--text-secondary);
  border-radius: 10px;
  font-weight: 500;
}
.mt20 { margin-top: 20px; }

/* 任务列表 */
.task-list-drawer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.task-item-drawer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.task-checkbox {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border-hover);
  flex-shrink: 0;
}
.task-cb-done {
  background: var(--accent-green);
  border-color: var(--accent-green);
  position: relative;
}
.task-cb-done::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.task-cb-doing {
  border-color: var(--primary);
  background: rgba(139,92,246,0.15);
  position: relative;
}
.task-cb-doing::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--primary);
  border-radius: 2px;
  animation: cbPulse 2s infinite;
}
@keyframes cbPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.task-info-drawer { flex: 1; }
.task-name-drawer {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.task-meta-drawer {
  font-size: 11px;
  color: var(--text-tertiary);
  display: flex;
  gap: 4px;
}

/* 内容列表 */
.content-list-drawer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.content-item-drawer {
  display: flex;
  gap: 12px;
  padding: 10px;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.content-thumb-d {
  width: 56px; height: 40px;
  background: var(--gradient-primary);
  border-radius: 6px;
  flex-shrink: 0;
}
.content-info-d { flex: 1; }
.content-name-d {
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 4px;
  font-weight: 500;
}
.content-meta-d {
  display: flex;
  gap: 6px;
  align-items: center;
}
.content-type-tag {
  font-size: 10px;
  padding: 1px 6px;
  background: var(--bg-deep);
  color: var(--text-secondary);
  border-radius: 3px;
}
.content-status-d {
  font-size: 10px;
  color: var(--accent-green);
}

/* 数据卡片 */
.data-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.data-stat-card {
  padding: 14px;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-label {
  font-size: 11px;
  color: var(--text-tertiary);
}
.ds-value {
  font-size: 18px;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.region-heat-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.heat-detail-item {
  display: grid;
  grid-template-columns: 50px 1fr 45px;
  gap: 10px;
  align-items: center;
}
.hd-name {
  font-size: 12px;
  color: var(--text-secondary);
}
.hd-bar {
  height: 8px;
  background: var(--bg-card);
  border-radius: 4px;
  overflow: hidden;
}
.hd-bar-fill {
  height: 100%;
  border-radius: 4px;
}
.hd-bar-fill.heat-lv-1 { background: rgba(248,113,113,0.6); }
.hd-bar-fill.heat-lv-2 { background: rgba(245,158,11,0.7); }
.hd-bar-fill.heat-lv-3 { background: rgba(34,211,238,0.7); }
.hd-bar-fill.heat-lv-4 { background: rgba(52,211,153,0.75); }
.hd-score {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}

/* 团队列表 */
.team-list-drawer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.team-item-drawer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.team-avatar-d {
  width: 32px; height: 32px;
  background: var(--gradient-primary);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}
.team-info-d { flex: 1; }
.team-name-d {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 2px;
}
.team-role-d {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ROI */
.roi-big-card {
  text-align: center;
  padding: 24px;
  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--border-color);
  margin-bottom: 16px;
}
.roi-big-value {
  font-size: 42px;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 6px;
}
.roi-big-label {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.roi-big-rank {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  background: rgba(52,211,153,0.15);
  color: var(--accent-green);
  border-radius: 12px;
  font-weight: 500;
}
.roi-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.roi-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.roi-row-label {
  font-size: 12px;
  color: var(--text-secondary);
}
.roi-row-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* 风险 */
.risk-count { color: var(--accent-red) !important; background: rgba(248,113,113,0.15) !important; }
.risk-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.risk-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  border-left: 3px solid transparent;
}
.risk-high { border-left-color: var(--accent-red); }
.risk-mid { border-left-color: var(--accent-orange); }
.risk-low { border-left-color: var(--accent-cyan); }
.risk-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.risk-high .risk-dot { background: var(--accent-red); }
.risk-mid .risk-dot { background: var(--accent-orange); }
.risk-low .risk-dot { background: var(--accent-cyan); }
.risk-content { flex: 1; }
.risk-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.risk-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.4;
}
.risk-status {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ====== 2.1 市场与用户洞察 ====== */
.market-insights-v1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 8px;
}

/* 顶部筛选器 */
.insights-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}
.ins-filter-select {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.ins-filter-label {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.ins-filter-native {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  padding: 6px 28px 6px 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.ins-filter-native:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}
.ins-filter-native:focus {
  outline: none;
  border-color: var(--primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.ins-filter-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
}
.insights-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  width: 240px;
  height: 34px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-tertiary);
  transition: border-color 0.2s;
}
.insights-search:focus-within { border-color: var(--primary); }
.insights-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 12px;
}
.insights-search input::placeholder { color: var(--text-tertiary); }

/* 主区上 */
.insights-main-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-height: 420px;
}

.bubble-map-section, .compare-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.section-header-insights {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sh-title-group { display: flex; align-items: baseline; gap: 10px; }
.sh-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.sh-sub {
  font-size: 12px;
  color: var(--text-tertiary);
}
.sh-link {
  font-size: 12px;
  color: var(--primary-light);
  cursor: pointer;
}

/* 气泡地图 */
.bubble-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.legend-bubbles {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 4px;
}
.lb {
  border-radius: 50%;
  background: rgba(139,92,246,0.5);
  border: 1px solid rgba(139,92,246,0.8);
}
.lb-s { width: 8px; height: 8px; }
.lb-m { width: 12px; height: 12px; }
.lb-l { width: 16px; height: 16px; }
.legend-colors {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
.lc { width: 10px; height: 10px; border-radius: 50%; }
.lc-up { background: var(--accent-green); }
.lc-down { background: var(--accent-red); }
.legend-pulse-note {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  color: var(--accent-red);
}
.pulse-dot-small {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-red);
  animation: alertPulse 2s infinite;
}

.bubble-map-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.bubble-map-svg {
  width: 100%;
  max-height: 360px;
}
.bubble-group {
  cursor: pointer;
  transition: transform 0.2s;
}
.bubble-group:hover { transform: scale(1.08); transform-origin: center; }
.bubble-group.selected .bubble-outer {
  stroke-width: 1.2;
  filter: drop-shadow(0 0 4px currentColor);
}
.bubble-outer { transition: all 0.3s; }
.bubble-inner { transition: all 0.3s; }
.bubble-text-main {
  font-size: 2.2px;
  fill: var(--text-primary);
  font-weight: 600;
}
.bubble-text-sub {
  font-size: 1.8px;
  font-weight: 600;
}
.bubble-text-sub.trend-up { fill: var(--accent-green); }
.bubble-text-sub.trend-down { fill: var(--accent-red); }
.bubble-group.is-new .bubble-pulse-ring {
  animation: bubblePulse1 2s infinite;
}
.bubble-group.is-new .bubble-pulse-ring2 {
  animation: bubblePulse2 2s infinite;
}
@keyframes bubblePulse1 {
  0% { opacity: 0.8; r: 3; }
  100% { opacity: 0; r: 8; }
}
@keyframes bubblePulse2 {
  0% { opacity: 0.6; r: 2; }
  100% { opacity: 0; r: 6; }
}

/* 气泡详情面板 */
.bubble-detail-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 260px;
  max-height: 100%;
  background: rgba(15,21,36,0.95);
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideInRight 0.25s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.bd-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
}
.bd-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.bd-sub {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
}
.bd-heat { color: var(--text-secondary); }
.bd-growth {
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 600;
}
.bd-growth.growth-up { color: var(--accent-green); }
.bd-growth.growth-down { color: var(--accent-red); }
.bd-close {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  border-radius: 6px;
}
.bd-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.bd-section {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
}
.bd-section:last-of-type { border-bottom: none; }
.bd-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.bd-topic-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bd-topic-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-primary);
}
.bd-topic-rank {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-light);
}
.bd-topic-name { font-weight: 500; }
.bd-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bd-keyword-tag {
  font-size: 11px;
  padding: 3px 8px;
  background: rgba(139,92,246,0.15);
  color: var(--primary-light);
  border-radius: 10px;
}
.bd-related-cars {
  font-size: 12px;
  color: var(--text-secondary);
}
.bd-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bd-suggestion-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 6px 8px;
  background: var(--bg-panel);
  border-radius: 6px;
  border-left: 2px solid var(--primary);
}
.bd-sug-icon { color: var(--primary-light); flex-shrink: 0; }
.bd-footer {
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--border-color);
}
.bd-footer .btn { flex: 1; }

/* 跨市场对比 */
.export-report-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--primary-light);
  background: rgba(139,92,246,0.1);
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 8px;
  transition: all 0.2s;
}
.export-report-btn:hover {
  background: rgba(139,92,246,0.2);
}

.compare-pickers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}
.compare-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}
.picker-label {
  font-size: 11px;
  color: var(--text-tertiary);
}
.picker-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.picker-select:hover { border-color: var(--border-hover); }
.picker-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.compare-vs {
  font-size: 14px;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: 14px;
}

.compare-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.compare-chart-card {
  background: var(--bg-panel);
  border-radius: 10px;
  padding: 12px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  min-height: 180px;
}
.chart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.chart-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.chart-sub {
  font-size: 11px;
  color: var(--text-tertiary);
}
.chart-legend {
  display: flex;
  gap: 10px;
  font-size: 10px;
  color: var(--text-secondary);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.legend-item i {
  width: 8px; height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.chart-trend-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.trend-up.badge, .chart-trend-badge.trend-up {
  background: rgba(52,211,153,0.15);
  color: var(--accent-green);
}

/* 双柱 */
.double-bar-chart {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  flex: 1;
  padding-top: 8px;
  gap: 8px;
}
.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.bar-pair {
  display: flex;
  gap: 3px;
  height: 100px;
  align-items: flex-end;
}
.bar {
  width: 14px;
  border-radius: 3px 3px 0 0;
  position: relative;
  transition: height 0.3s ease;
  min-height: 4px;
}
.bar-val {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.bar-label {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* 双折线 */
.double-line-chart {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.line-chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-tertiary);
}

/* 双环 */
.double-ring-wrap {
  display: flex;
  gap: 12px;
  flex: 1;
}
.ring-compare-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ring-compare-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}
.ring-compare-wrap {
  position: relative;
  width: 64px; height: 64px;
}
.ring-compare-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ring-compare-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.ring-compare-sub {
  font-size: 9px;
  color: var(--text-tertiary);
}
.ring-compare-age {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.age-row {
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  gap: 4px;
  align-items: center;
  font-size: 10px;
  color: var(--text-tertiary);
}
.age-row > span:last-child { text-align: right; color: var(--text-secondary); }
.age-bar {
  height: 4px;
  background: var(--bg-deep);
  border-radius: 2px;
  overflow: hidden;
}
.age-bar > div {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}

/* 双漏斗 */
.double-funnel-wrap {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.funnel-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.funnel-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  text-align: center;
}
.funnel-seg {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-radius: 6px;
  transition: width 0.3s;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.funnel-seg .funnel-label {
  font-size: 10px;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  font-weight: 500;
}
.funnel-seg .funnel-val {
  font-size: 10px;
  color: white;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.funnel-rate {
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-tertiary);
}
.funnel-rate b { font-size: 12px; font-weight: 700; }

/* 底部三模块 */
.insights-bottom {
  display: grid;
  grid-template-columns: 4fr 3fr 3fr;
  gap: 16px;
}
.bottom-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.bottom-card-wide { }

/* 趋势 TOP10 */
.trend-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  flex: 1;
}
.trend-item {
  display: grid;
  grid-template-columns: 24px 1fr 120px 64px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
.trend-item:hover { background: var(--bg-hover); }
.trend-rank {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  background: var(--bg-panel);
  border-radius: 4px;
}
.trend-rank.trend-top {
  background: var(--gradient-primary);
  color: white;
}
.trend-info { min-width: 0; }
.trend-name {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.trend-meta {
  display: flex;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.trend-market { color: var(--text-secondary); }
.trend-keyword { color: var(--primary-light); }
.trend-bar-wrap { }
.trend-bar {
  height: 6px;
  background: var(--bg-panel);
  border-radius: 3px;
  overflow: hidden;
}
.trend-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}
.trend-change {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
}
.trend-up { color: var(--accent-green); }
.trend-down { color: var(--accent-red); }

/* 用户画像 */
.user-profile-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.profile-row {
  display: grid;
  grid-template-columns: 70px 1fr 36px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.profile-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}
.profile-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.profile-bar {
  height: 8px;
  background: var(--bg-panel);
  border-radius: 4px;
  overflow: hidden;
}
.profile-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}
.profile-val {
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.profile-tag-title {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  display: block;
}
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.profile-tag {
  padding: 3px 10px;
  background: rgba(139,92,246,0.1);
  color: var(--primary-light);
  border-radius: 12px;
  border: 1px solid rgba(139,92,246,0.2);
}
.profile-tag.tag-lg { font-size: 14px; font-weight: 600; padding: 5px 14px; }
.profile-tag.tag-md { font-size: 12px; }
.profile-tag.tag-sm { font-size: 11px; color: var(--text-secondary); }

/* AI 策略推送 */
.ai-strategy-card { position: relative; }
.ai-red-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-red);
  animation: alertPulse 2s infinite;
  display: inline-block;
  margin-left: -2px;
}
.ai-strategy-scroller {
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
.ai-strategy-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
  animation: aiScroll 30s linear infinite;
}
.ai-strategy-track:hover {
  animation-play-state: paused;
}
@keyframes aiScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(calc(-50% - 4px)); }
}

.ai-strategy-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  gap: 10px;
  position: relative;
  border-left: 3px solid var(--primary);
  flex-shrink: 0;
  transition: all 0.2s;
}
.ai-strategy-card:hover {
  border-color: var(--border-hover);
}
.ai-strategy-card.priority-high { border-left-color: var(--accent-orange); }
.ai-strategy-card.priority-urgent { border-left-color: var(--accent-red); }
.ai-strategy-card.priority-mid { border-left-color: var(--accent-cyan); }
.ai-strategy-card.priority-budget { border-left-color: var(--accent-green); }
.ai-strategy-card.priority-opportunity { border-left-color: var(--primary); }

.ai-strategy-card.is-new {
  animation: newCardGlow 3s ease-in-out;
}
@keyframes newCardGlow {
  0% { box-shadow: 0 0 0 0 rgba(248,113,113,0.4); }
  30% { box-shadow: 0 0 12px 2px rgba(248,113,113,0.3); }
  100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
}

.ai-new-badge {
  position: absolute;
  top: -6px;
  right: 10px;
  background: var(--accent-red);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
}
.ai-strategy-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(139,92,246,0.15);
  color: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.priority-high .ai-strategy-icon { background: rgba(245,158,11,0.15); color: var(--accent-orange); }
.priority-urgent .ai-strategy-icon { background: rgba(248,113,113,0.15); color: var(--accent-red); }
.priority-mid .ai-strategy-icon { background: rgba(34,211,238,0.15); color: var(--accent-cyan); }
.priority-budget .ai-strategy-icon { background: rgba(52,211,153,0.15); color: var(--accent-green); }

.ai-strategy-body {
  flex: 1;
  min-width: 0;
}
.ai-strategy-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.ai-strategy-evidence {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ev-icon { color: var(--accent-cyan); flex-shrink: 0; }
.ai-strategy-suggest {
  font-size: 11px;
  color: var(--primary-light);
  font-weight: 500;
}
.ai-create-task-btn {
  margin-left: auto;
  align-self: center;
  padding: 6px 10px;
  font-size: 11px;
  background: var(--primary);
  color: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: background 0.2s;
  flex-shrink: 0;
}
.ai-create-task-btn:hover { background: var(--primary-dark); }

/* ====== 2.2 爆款灵感库 ====== */
.inspiration-v1 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 8px;
}

/* 5 平台 logo 多选（参考图风格：彩色 logo + 名称） */
.ins-platform-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(34, 211, 238, 0.04));
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-radius: 10px;
  flex-wrap: wrap;
}
.ins-platform-tabs-label {
  font-size: 11px;
  color: var(--text-tertiary, #8b95b7);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.ins-platform-tabs-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ins-platform-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary, #b8c1d9);
  transition: all 0.18s ease;
  font-family: inherit;
  --plat-color: rgba(139, 92, 246, 0.5);
}
.ins-platform-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--plat-color);
  color: var(--text-primary, #f1f3f8);
}
.ins-platform-tab.is-active {
  background: color-mix(in srgb, var(--plat-color) 18%, transparent);
  border-color: var(--plat-color);
  color: var(--text-primary, #f1f3f8);
  box-shadow: 0 0 0 1px var(--plat-color), 0 2px 6px -2px var(--plat-color);
}
.ins-platform-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.ins-platform-tab-label {
  font-weight: 500;
  white-space: nowrap;
}

/* 顶部 sticky 过滤栏 */
.ins-filters-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-deep);
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(8px);
}
.ins-filter-row {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.ins-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ins-filter-label {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}
.ins-chip-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ins-chip {
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  transition: all 0.2s;
  white-space: nowrap;
}
.ins-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}
.ins-chip.active {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
}
.ins-ai-score-group .ins-chip.active {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

/* 结果统计条 */
.ins-result-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
}
.ins-result-count {
  font-size: 13px;
  color: var(--text-secondary);
}
.ins-result-count b {
  color: var(--primary-light);
  font-size: 15px;
  font-weight: 700;
}
.ins-result-sort {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ins-sort-label {
  font-size: 12px;
  color: var(--text-tertiary);
}
.ins-sort-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s;
}
.ins-sort-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.ins-sort-btn.active {
  color: var(--primary-light);
  border-color: var(--primary);
  background: rgba(139,92,246,0.1);
}
.ins-sort-divider {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 4px;
  vertical-align: middle;
}
.ins-sort-btn-ai {
  position: relative;
  background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(34,211,238,0.06));
  border-color: rgba(139,92,246,0.3);
}
.ins-sort-btn-ai.active {
  background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(34,211,238,0.15));
  border-color: var(--primary);
  color: var(--primary-light);
}
.ins-sort-btn-ai::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(139,92,246,0.5), rgba(34,211,238,0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
}
.ins-sort-btn-ai.active::before { opacity: 1; }

/* 瀑布流 */
.ins-masonry {
  column-count: 4;
  column-gap: 14px;
}
@media (max-width: 1600px) { .ins-masonry { column-count: 4; } }
@media (max-width: 1400px) { .ins-masonry { column-count: 3; } }
@media (max-width: 1100px) { .ins-masonry { column-count: 2; } }

.ins-card {
  break-inside: avoid;
  margin-bottom: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: inline-block;
  width: 100%;
}
.ins-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 12px 32px rgba(139,92,246,0.2);
}
.ins-card.card-short { }
.ins-card.card-medium { }
.ins-card.card-tall { }

.ins-card-cover {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.ins-card.card-short .ins-card-cover { height: 140px; }
.ins-card.card-medium .ins-card-cover { height: 180px; }
.ins-card.card-tall .ins-card-cover { height: 240px; }

.ins-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.ins-card:hover .ins-cover-img {
  transform: scale(1.05);
}
.ins-card-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,14,26,0.2) 0%, rgba(10,14,26,0.5) 60%, rgba(10,14,26,0.8) 100%);
  pointer-events: none;
}

/* AI 评分角标 */
.ins-ai-score {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  z-index: 3;
}
.ins-ai-score.score-high {
  background: linear-gradient(135deg, rgba(99,102,241,0.9), rgba(168,85,247,0.9));
  border: 1px solid rgba(196,181,253,0.5);
  box-shadow: 0 4px 16px rgba(139,92,246,0.4);
}
.ins-ai-score.score-mid {
  background: rgba(59,130,246,0.8);
  border: 1px solid rgba(147,197,253,0.4);
}
.ins-ai-score.score-low {
  background: rgba(107,114,128,0.7);
  border: 1px solid rgba(156,163,175,0.3);
}
.score-num {
  font-size: 22px;
  font-weight: 800;
  color: white;
  line-height: 1;
}
.score-label {
  font-size: 9px;
  color: rgba(255,255,255,0.8);
  margin-top: 2px;
  font-weight: 500;
}

.ins-source-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  font-size: 10px;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  border-radius: 6px;
  z-index: 3;
}

.ins-new-badge {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  color: white;
  background: var(--accent-red);
  border-radius: 8px;
  z-index: 3;
  animation: newBadgePulse 2s infinite;
}
@keyframes newBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.5); }
  50% { box-shadow: 0 0 8px 2px rgba(248,113,113,0.4); }
}

/* 悬停雷达图 */
.ins-radar-hover {
  position: absolute;
  inset: 0;
  background: rgba(10,14,26,0.92);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 4;
}
.ins-card:hover .ins-radar-hover {
  opacity: 1;
}
.ins-radar-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.ins-radar-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ins-radar-svg { }
.ins-radar-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 8px;
  margin-top: 4px;
  width: 100%;
}
.radar-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-secondary);
}
.radar-legend-item i {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.radar-legend-item b {
  margin-left: auto;
  color: var(--text-primary);
  font-weight: 600;
}

/* 发布者条（参考图风格：头像+名+时间+复制） */
.ins-publisher-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.015);
}
.ins-publisher-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
  flex-shrink: 0;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ins-publisher-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ins-publisher-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #f1f3f8);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ins-publisher-meta {
  font-size: 10px;
  color: var(--text-tertiary, #8b95b7);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ins-publisher-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--text-tertiary, #8b95b7);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s ease;
  font-family: inherit;
  padding: 0;
}
.ins-publisher-copy:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: var(--primary, #8b5cf6);
  color: var(--primary-light, #a78bfa);
}
.ins-publisher-copy:active {
  transform: scale(0.92);
}

/* 卡片 body */
.ins-card-body {
  padding: 12px 14px 14px;
  position: relative;
}
.ins-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.ins-card-meta {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ins-brand-tag, .ins-market-tag, .ins-format-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 500;
}
.ins-brand-tag {
  background: rgba(139,92,246,0.15);
  color: var(--primary-light);
}
.ins-market-tag {
  background: rgba(34,211,238,0.15);
  color: var(--accent-cyan);
}
.ins-format-tag {
  background: rgba(244,114,182,0.15);
  color: #f472b6;
}

.ins-card-stats {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--border-color);
  margin-bottom: 8px;
}
.ins-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-tertiary);
  font-size: 11px;
}
.ins-stat-icon { color: var(--text-tertiary); }
.ins-stat-num {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 11px;
}
.ins-stat-engagement {
  position: relative;
  padding: 2px 6px;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(139, 92, 246, 0.08));
}
.ins-stat-engagement .ins-stat-icon { color: #22d3ee; }
.ins-stat-engagement .ins-stat-num {
  color: #22d3ee;
  font-weight: 700;
}

/* 7 天热度曲线 */
.ins-heat-curve {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ins-heat-label {
  font-size: 10px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.ins-heat-svg { flex-shrink: 0; }
.ins-heat-trend {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
}
.ins-heat-trend.trend-up { color: var(--accent-green); }
.ins-heat-trend.trend-down { color: var(--accent-red); }

/* 引用按钮 */
.ins-quote-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  background: var(--gradient-primary);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(139,92,246,0.4);
  z-index: 5;
  white-space: nowrap;
}
.ins-card:hover .ins-quote-btn {
  opacity: 1;
  transform: translateY(0);
}
.ins-quote-btn:hover {
  box-shadow: 0 6px 20px rgba(139,92,246,0.6);
  transform: translateY(-1px);
}

/* ====== 3.1 AI 脚本生成 ====== */
.ai-script-v1 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 8px;
  height: 100%;
}

.gen-progress-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.progress-track {
  height: 4px;
  background: var(--bg-panel);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 2px;
  transition: width 0.3s ease;
  box-shadow: 0 0 12px rgba(139,92,246,0.5);
}
.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.progress-text { color: var(--text-secondary); }
.progress-percent {
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ai-script-main {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.script-form-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-panel-header { }
.form-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
}
.form-subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
  display: block;
}

.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.form-required { color: var(--accent-red); margin-left: 2px; }

.form-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.form-select:hover { border-color: var(--border-hover); }
.select-value {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.form-tags-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.form-tag {
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s;
}
.form-tag:hover { color: var(--text-primary); border-color: var(--border-hover); }
.form-tag.active {
  background: rgba(139,92,246,0.15);
  border-color: var(--primary);
  color: var(--primary-light);
  font-weight: 500;
}

.form-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sell-point-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.2s;
  text-align: left;
}
.sell-point-item:hover { border-color: var(--border-hover); color: var(--text-primary); }
.sell-point-item.checked {
  border-color: var(--primary);
  background: rgba(139,92,246,0.08);
  color: var(--text-primary);
}
.sp-checkbox {
  width: 18px; height: 18px;
  border: 1.5px solid var(--border-color);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: white;
  flex-shrink: 0;
  transition: all 0.2s;
}
.sell-point-item.checked .sp-checkbox {
  background: var(--primary);
  border-color: var(--primary);
}

.form-input-wrap {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: border-color 0.2s;
}
.form-input-wrap:focus-within { border-color: var(--primary); }
.form-input {
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
}
.form-textarea {
  width: 100%;
  min-height: 70px;
  padding: 10px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}
.form-textarea:focus { border-color: var(--primary); }

/* ====== 3 段来源 tab(参考图风格:手动编写 / AI 帮写 / 脚本库) ====== */
.sg-source-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}
.sg-source-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 8px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  position: relative;
}
.sg-source-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}
.sg-source-tab.is-active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(34, 211, 238, 0.15));
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.4), 0 2px 6px -2px rgba(139, 92, 246, 0.5);
}
.sg-source-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.85;
}
.sg-source-tab.is-active .sg-source-tab-icon { color: var(--primary-light); }
.sg-source-tab-label { white-space: nowrap; }
.sg-source-tab-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(34, 211, 238, 0.18);
  color: #67e8f9;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-left: 1px;
}
.sg-source-tab-count {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 700;
  margin-left: 1px;
}

/* ====== 脚本库浮层(参考图风格:深色 + 6 列编号列表 + 搜索 + 创作者下拉) ====== */
.sg-lib-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sg-lib-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.sg-lib-search {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(20, 26, 43, 0.6);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-tertiary);
}
.sg-lib-search:focus-within {
  border-color: var(--primary);
  background: rgba(20, 26, 43, 0.85);
}
.sg-lib-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
}
.sg-lib-search-input::placeholder { color: var(--text-tertiary); }
.sg-lib-creator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  background: rgba(20, 26, 43, 0.6);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.sg-lib-creator-label {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
}
.sg-lib-creator-select {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 4px;
  min-width: 90px;
}
.sg-lib-creator-select option { background: #141a2b; color: #f1f3f8; }

.sg-lib-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 460px;
  overflow-y: auto;
  padding-right: 4px;
}
.sg-lib-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  background: rgba(20, 26, 43, 0.3);
  border: 1px dashed var(--border-color);
  border-radius: 10px;
}
.sg-lib-item {
  background: rgba(20, 26, 43, 0.5);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sg-lib-item:hover {
  background: rgba(20, 26, 43, 0.8);
  border-color: rgba(139, 92, 246, 0.4);
}
.sg-lib-item.is-selected {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(34, 211, 238, 0.08));
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 2px 8px -2px rgba(139, 92, 246, 0.5);
}
.sg-lib-item-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.sg-lib-item-no {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-light);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.sg-lib-item-no span {
  font-size: 16px;
  color: var(--primary-light);
  margin-left: 1px;
}
.sg-lib-item-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.sg-lib-item-time {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.sg-lib-item-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  background: rgba(0, 0, 0, 0.15);
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 2px solid var(--primary);
}
.sg-lib-item-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sg-lib-item-creator {
  font-size: 11px;
  color: var(--text-tertiary);
}
.sg-lib-item-creator b {
  color: var(--text-primary);
  font-weight: 600;
}
.sg-lib-item-tags {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}
.sg-lib-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(139, 92, 246, 0.15);
  color: var(--primary-light);
  font-weight: 500;
}
.sg-lib-item-select {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  flex-shrink: 0;
}
.sg-lib-item-select:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: var(--primary);
  color: var(--primary-light);
}
.sg-lib-item-select.is-selected {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(34, 211, 238, 0.25));
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 1px var(--primary);
}

.form-generate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--gradient-primary);
  color: white;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.3s;
  box-shadow: 0 4px 16px rgba(139,92,246,0.3);
}
.form-generate-btn:hover {
  box-shadow: 0 6px 24px rgba(139,92,246,0.5);
  transform: translateY(-1px);
}
.gen-btn-icon { display: flex; }
.gen-countdown {
  padding: 2px 8px;
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

.form-steps-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 0;
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
}
.step-item.active .step-num {
  background: var(--gradient-primary);
  border-color: transparent;
  color: white;
  box-shadow: 0 2px 8px rgba(139,92,246,0.4);
}
.step-text {
  font-size: 10px;
  color: var(--text-tertiary);
}
.step-item.active .step-text { color: var(--primary-light); font-weight: 500; }
.step-line {
  flex: 1;
  height: 1.5px;
  background: var(--border-color);
  margin: 0 6px 14px;
  border-radius: 1px;
  transition: background 0.3s;
}
.step-line.active { background: var(--gradient-primary); }

.script-preview-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  min-height: 0;
}

.empty-preview {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 30px;
  min-height: 400px;
}
.empty-preview-icon {
  width: 80px; height: 80px;
  border-radius: 20px;
  background: var(--gradient-primary);
  display: flex; align-items: center; justify-content: center;
  color: white;
  margin-bottom: 20px;
  opacity: 0.8;
}
.empty-preview-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.empty-preview-desc {
  font-size: 14px;
  color: var(--text-tertiary);
  line-height: 1.6;
  margin-bottom: 28px;
}
.empty-suggestions {
  width: 100%;
  max-width: 480px;
}
.empty-sug-title {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 10px;
  display: block;
}
.empty-sug-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.empty-sug-btn {
  padding: 8px 16px;
  font-size: 12px;
  color: var(--primary-light);
  background: rgba(139,92,246,0.1);
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 8px;
  transition: all 0.2s;
}
.empty-sug-btn:hover {
  background: rgba(139,92,246,0.2);
  border-color: var(--primary);
}

.version-tabs-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.version-tabs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 14px;
}
.tabs-label {
  font-size: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  font-weight: 500;
}
.tabs-row {
  display: flex;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-row::-webkit-scrollbar { display: none; }
.version-tab, .lang-tab {
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  background: transparent;
  border-radius: 6px;
  transition: all 0.2s;
  white-space: nowrap;
  position: relative;
}
.version-tab:hover, .lang-tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.version-tab.active {
  color: var(--primary-light);
  background: rgba(139,92,246,0.15);
  font-weight: 600;
}
.lang-tab.active {
  color: var(--accent-cyan);
  background: rgba(34,211,238,0.12);
  font-weight: 600;
}

.script-preview-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}

.preview-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: rgba(15, 23, 42, 0.6);
}
.preview-title {
  font-size: 16px;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 6px;
}
.preview-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.preview-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #94a3b8;
}
.risk-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.risk-badge.ok {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}
.risk-badge.has-risk {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}
.preview-score {
  text-align: right;
}
.preview-score.pulse { animation: scorePulse 1.5s infinite; }
@keyframes scorePulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.score-label {
  display: block;
  font-size: 11px;
  color: #94a3b8;
}
.score-value {
  font-size: 28px;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.script-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.script-section { }
.script-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.script-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(139,92,246,0.1);
  padding: 2px 10px;
  border-radius: 10px;
  font-family: -apple-system, sans-serif;
}
.script-section-time {
  font-size: 11px;
  color: #6b7280;
  font-family: -apple-system, sans-serif;
}
.script-section-risk {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  font-family: -apple-system, sans-serif;
  display: flex;
  align-items: center;
  gap: 3px;
}
.script-section-risk.ok { color: #10b981; }
.script-section-risk.has-risk { color: #f59e0b; }

.script-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-primary);
  padding-left: 12px;
  border-left: 3px solid var(--primary);
  font-family: inherit;
}
.script-section.typing .script-text {
  animation: typeIn 0.5s ease;
}
@keyframes typeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.risk-word {
  color: #dc2626;
  background: #fef2f2;
  border-bottom: 2px solid #f59e0b;
  cursor: help;
  position: relative;
  padding: 0 2px;
  border-radius: 2px;
}
.risk-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  padding: 10px 12px;
  border-radius: 8px;
  min-width: 180px;
  font-size: 12px;
  line-height: 1.5;
  font-family: -apple-system, sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.risk-word:hover .risk-tooltip, .risk-word:focus .risk-tooltip {
  opacity: 1;
  visibility: visible;
}
.risk-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f2937;
}
.risk-tooltip-title {
  display: block;
  font-weight: 700;
  color: #fca5a5;
  margin-bottom: 4px;
}
.risk-tooltip-desc {
  display: block;
  color: #d1d5db;
  margin-bottom: 6px;
}
.risk-tooltip-suggest {
  display: block;
  color: white;
  margin-bottom: 8px;
}
.risk-tooltip-suggest b { color: #34d399; }
.risk-fix-btn {
  width: 100%;
  padding: 6px 10px;
  background: var(--gradient-primary);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  text-align: center;
}
.risk-fix-btn:hover { opacity: 0.9; }

.preview-footer {
  padding: 14px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.preview-footer-right { display: flex; gap: 8px; }
.preview-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s;
  font-family: -apple-system, sans-serif;
}
.preview-btn-secondary {
  color: #4b5563;
  background: white;
  border: 1px solid #d1d5db;
}
.preview-btn-secondary:hover { background: #f3f4f6; border-color: #9ca3af; }
.preview-btn-primary {
  color: white;
  background: var(--gradient-primary);
  box-shadow: 0 2px 8px rgba(139,92,246,0.3);
}
.preview-btn-primary:hover { box-shadow: 0 4px 12px rgba(139,92,246,0.5); transform: translateY(-1px); }

.quick-versions-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 14px;
}
.qv-label {
  font-size: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.qv-cards {
  display: flex;
  gap: 8px;
  flex: 1;
}
.qv-card {
  flex: 1;
  padding: 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-align: left;
  transition: all 0.2s;
}
.qv-card:hover {
  border-color: var(--primary);
  background: rgba(139,92,246,0.08);
  transform: translateY(-2px);
}
.qv-title {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.qv-score {
  font-size: 14px;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ====== 3.2 多语言本地化改写 ====== */
.loc-v1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 8px;
  height: 100%;
}

/* 顶部语言 Tabs 栏 */
.loc-tabs-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 16px;
  flex-shrink: 0;
  gap: 14px;
}
.loc-tabs-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.loc-tabs-label {
  font-size: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  font-weight: 500;
}
.loc-tabs-row {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.loc-tabs-row::-webkit-scrollbar { display: none; }
.loc-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  background: transparent;
  border-radius: 8px;
  transition: all 0.2s;
  white-space: nowrap;
  position: relative;
}
.loc-tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.loc-tab.active {
  color: var(--primary-light);
  background: rgba(139,92,246,0.15);
  font-weight: 600;
  border-bottom: 2px solid var(--primary);
  border-radius: 8px 8px 0 0;
}
.loc-tab-flag { font-size: 14px; }
.loc-tab-status {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  font-weight: 700;
}
.loc-tab-status.status-done {
  background: rgba(52,211,153,0.2);
  color: var(--accent-green);
}
.loc-tab-status.status-review {
  background: rgba(245,158,11,0.2);
  color: var(--accent-orange);
}
.loc-tab-status.status-pending {
  background: rgba(107,114,128,0.2);
  color: var(--text-tertiary);
}

.loc-tabs-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.loc-stat-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.loc-stat-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.loc-stat-risk { background: rgba(248,113,113,0.15); color: var(--accent-red); }
.loc-stat-risk .loc-stat-dot { background: var(--accent-red); }
.loc-stat-warn { background: rgba(245,158,11,0.15); color: var(--accent-orange); }
.loc-stat-warn .loc-stat-dot { background: var(--accent-orange); }
.loc-stat-ok { background: rgba(52,211,153,0.15); color: var(--accent-green); }
.loc-stat-ok .loc-stat-dot { background: var(--accent-green); }

.loc-approve-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  background: var(--gradient-primary);
  border-radius: 8px;
  transition: all 0.2s;
}
.loc-approve-btn:hover { box-shadow: 0 4px 12px rgba(139,92,246,0.4); }

/* 对比主体 */
.loc-compare-wrap {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  min-height: 0;
}

.loc-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.loc-col-source { border-right: 1px solid var(--border-color); }

.loc-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.loc-col-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.loc-lang-badge {
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(139,92,246,0.15);
  color: var(--primary-light);
  font-size: 11px;
  font-weight: 700;
}
.loc-lang-badge.lang-target {
  background: rgba(34,211,238,0.15);
  color: var(--accent-cyan);
}
.loc-translate-badge {
  padding: 1px 6px;
  background: rgba(139,92,246,0.1);
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 8px;
  font-size: 10px;
  color: var(--primary-light);
  font-weight: 500;
  margin-left: 4px;
}
.loc-col-meta {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* 行 */
.loc-lines {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.loc-line {
  display: grid;
  grid-template-columns: 36px 1fr;
  padding: 8px 12px 8px 0;
  align-items: start;
  gap: 4px;
  position: relative;
  transition: background 0.15s;
  cursor: pointer;
}
.loc-line:hover { background: var(--bg-hover); }
.loc-line.active { background: rgba(139,92,246,0.08); }
.loc-line.active .loc-line-num {
  background: var(--primary);
  color: white;
}
.loc-line-num {
  width: 24px;
  height: 24px;
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-tertiary);
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  flex-shrink: 0;
}
.loc-line-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding-right: 12px;
}

/* 分割线 */
.loc-col-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-panel);
  padding: 12px 0;
}
.loc-divider-vert {
  flex: 1;
  width: 1px;
  background: var(--border-color);
}
.loc-divider-sync {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
  box-shadow: 0 2px 8px rgba(139,92,246,0.4);
}

/* 行内禁忌词高亮 */
.anno-inline {
  position: relative;
  cursor: help;
  padding: 1px 3px;
  border-radius: 3px;
}
.anno-inline.anno-risk {
  background: #fee2e2;
  color: #dc2626;
  border-bottom: 2px solid #f59e0b;
  font-weight: 600;
}
.anno-inline.anno-warn {
  background: #fef3c7;
  color: #92400e;
  border-bottom: 2px dashed #f59e0b;
}
.anno-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  padding: 12px;
  border-radius: 8px;
  min-width: 220px;
  font-size: 12px;
  line-height: 1.5;
  font-family: -apple-system, sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  pointer-events: none;
}
.anno-inline:hover .anno-tooltip, .anno-inline:focus .anno-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.anno-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #1f2937;
}
.anno-tooltip-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}
.anno-title-risk { color: #fca5a5; }
.anno-title-warn { color: #fcd34d; }
.anno-title-ok { color: #6ee7b7; }
.anno-tooltip-desc {
  color: #d1d5db;
  font-size: 11px;
  margin-bottom: 8px;
  display: block;
  line-height: 1.5;
}
.anno-suggest-title {
  font-size: 10px;
  color: #9ca3af;
  margin-bottom: 6px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.anno-suggest-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.anno-suggest-btn {
  padding: 6px 10px;
  background: var(--gradient-primary);
  color: white;
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  text-align: left;
  transition: opacity 0.2s;
}
.anno-suggest-btn:hover { opacity: 0.9; }

/* 行级批注气泡 */
.loc-line.has-anno {
  padding-bottom: 60px;
}
.line-anno-bubble {
  grid-column: 2;
  margin-top: 8px;
  margin-right: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  font-family: -apple-system, sans-serif;
  position: relative;
}
.line-anno-bubble::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 20px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
}
.line-anno-bubble.level-risk {
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.3);
}
.line-anno-bubble.level-risk::before {
  background: rgba(248,113,113,0.1);
  border-top: 1px solid rgba(248,113,113,0.3);
  border-left: 1px solid rgba(248,113,113,0.3);
}
.line-anno-bubble.level-warn {
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.3);
}
.line-anno-bubble.level-warn::before {
  background: rgba(245,158,11,0.1);
  border-top: 1px solid rgba(245,158,11,0.3);
  border-left: 1px solid rgba(245,158,11,0.3);
}
.line-anno-bubble.level-ok {
  background: rgba(52,211,153,0.1);
  border: 1px solid rgba(52,211,153,0.3);
}
.line-anno-bubble.level-ok::before {
  background: rgba(52,211,153,0.1);
  border-top: 1px solid rgba(52,211,153,0.3);
  border-left: 1px solid rgba(52,211,153,0.3);
}

.line-anno-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.level-risk .line-anno-icon { background: rgba(248,113,113,0.2); color: var(--accent-red); }
.level-warn .line-anno-icon { background: rgba(245,158,11,0.2); color: var(--accent-orange); }
.level-ok .line-anno-icon { background: rgba(52,211,153,0.2); color: var(--accent-green); }

.line-anno-content {
  min-width: 0;
}
.line-anno-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.line-anno-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 6px;
}
.line-anno-suggest {
  font-size: 11px;
  color: var(--primary-light);
  background: rgba(139,92,246,0.1);
  padding: 5px 8px;
  border-radius: 6px;
}
.line-anno-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 4px;
  background: none;
  border: none;
}
.anno-action-btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.2s;
}
.line-anno-actions > .anno-action-btn:first-child {
  background: var(--primary);
  color: white;
}
.anno-action-btn.anno-ignore {
  background: transparent;
  color: var(--text-tertiary);
  border: 1px solid var(--border-color);
}
.anno-action-btn:hover { opacity: 0.9; }

/* 底部栏 */
.loc-footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 16px;
  flex-shrink: 0;
}
.loc-footer-left, .loc-footer-right {
  display: flex;
  gap: 8px;
}
.loc-footer-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
}
.loc-footer-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.loc-btn-secondary { color: var(--text-secondary); }
.loc-btn-primary {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
}
.loc-btn-primary:hover { box-shadow: 0 4px 12px rgba(139,92,246,0.4); }

.loc-footer-center {
  flex: 1;
  display: flex;
  justify-content: center;
}
.loc-progress-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 280px;
}
.loc-progress-label {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.loc-progress-track {
  flex: 1;
  height: 6px;
  background: var(--bg-panel);
  border-radius: 3px;
  overflow: hidden;
}
.loc-progress-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 3px;
  transition: width 0.5s;
}
.loc-progress-value {
  font-size: 12px;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
  width: 32px;
  text-align: right;
}

/* ====== 4.1 官方模板库 ====== */
.tpl-v1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding-bottom: 8px;
  position: relative;
}

/* AI 推荐条 */
.tpl-ai-rec-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.08));
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 12px;
  padding: 10px 18px;
  flex-shrink: 0;
}
.tpl-ai-rec-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  min-width: 220px;
}
.tpl-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--gradient-primary);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  width: fit-content;
}
.tpl-ai-rec-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.tpl-ai-rec-text b {
  color: var(--primary-light);
  font-weight: 600;
}
.tpl-ai-rec-cards {
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.tpl-rec-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(15,23,42,0.6);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  flex: 1;
  min-width: 0;
  text-align: left;
  transition: all 0.2s;
}
.tpl-rec-card:hover {
  border-color: var(--primary);
  background: rgba(139,92,246,0.1);
  transform: translateY(-2px);
}
.tpl-rec-thumb {
  width: 48px;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.tpl-rec-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tpl-rec-info {
  min-width: 0;
  flex: 1;
}
.tpl-rec-title {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tpl-rec-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.tpl-rec-apply-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--gradient-primary);
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  flex-shrink: 0;
  transition: all 0.2s;
  white-space: nowrap;
}
.tpl-rec-apply-btn:hover {
  box-shadow: 0 4px 12px rgba(139,92,246,0.4);
}

/* 主区 */
.tpl-main {
  flex: 1;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  min-height: 0;
}

/* 左侧筛选栏 */
.tpl-filter-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tpl-filter-search {
  position: relative;
}
.tpl-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
}
.tpl-search-input {
  width: 100%;
  padding: 9px 14px 9px 36px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s;
}
.tpl-search-input:focus { border-color: var(--primary); }

.tpl-filter-section { }
.tpl-filter-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.tpl-filter-clear {
  font-size: 11px;
  color: var(--primary-light);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 500;
}
.tpl-filter-options {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tpl-filter-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: left;
  transition: all 0.15s;
}
.tpl-filter-opt:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.tpl-filter-opt.active {
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.3);
  color: var(--text-primary);
}
.tpl-opt-check {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-color);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  transition: all 0.15s;
}
.tpl-filter-opt.active .tpl-opt-check {
  background: var(--primary);
  border-color: var(--primary);
}
.tpl-opt-label {
  flex: 1;
}
.tpl-opt-count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
}
.tpl-filter-opt.active .tpl-opt-count {
  color: var(--primary-light);
}

/* 右侧内容区 */
.tpl-content-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

/* 工具栏 */
.tpl-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.tpl-result-count {
  font-size: 13px;
  color: var(--text-secondary);
}
.tpl-result-count b {
  color: var(--primary-light);
  font-size: 15px;
  font-weight: 700;
}
.tpl-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tpl-sort-label {
  font-size: 12px;
  color: var(--text-tertiary);
}
.tpl-sort-btn {
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  transition: all 0.15s;
}
.tpl-sort-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.tpl-sort-btn.active {
  color: var(--primary-light);
  border-color: var(--primary);
  background: rgba(139,92,246,0.1);
  font-weight: 500;
}
.tpl-view-switch {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  overflow: hidden;
}
.tpl-view-btn {
  padding: 5px 10px;
  color: var(--text-tertiary);
  transition: all 0.15s;
  display: flex;
  align-items: center;
}
.tpl-view-btn:hover { color: var(--text-primary); }
.tpl-view-btn.active {
  background: rgba(139,92,246,0.15);
  color: var(--primary-light);
}

/* 瀑布流 */
.tpl-masonry {
  flex: 1;
  overflow-y: auto;
  column-count: 3;
  column-gap: 14px;
  padding-right: 4px;
}
@media (max-width: 1600px) { .tpl-masonry { column-count: 3; } }
@media (max-width: 1300px) { .tpl-masonry { column-count: 2; } }

.tpl-card {
  break-inside: avoid;
  margin-bottom: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  display: inline-block;
  width: 100%;
  position: relative;
}
.tpl-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 12px 32px rgba(139,92,246,0.18);
}

.tpl-card-cover {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.tpl-card-tall .tpl-card-cover { height: 200px; }
.tpl-card-medium .tpl-card-cover { height: 150px; }
.tpl-card-short .tpl-card-cover { height: 110px; }

.tpl-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.tpl-card:hover .tpl-cover-img {
  transform: scale(1.06);
}
.tpl-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,14,26,0.1) 0%, rgba(10,14,26,0.6) 100%);
  pointer-events: none;
}

.tpl-lang-flags {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 2px;
  z-index: 3;
}
.tpl-flag {
  width: 20px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  border-radius: 3px;
  overflow: hidden;
}
.tpl-flag-more {
  font-size: 9px;
  color: white;
  font-weight: 600;
}

.tpl-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 3;
}
.tpl-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.tpl-badge-hot {
  background: rgba(248,113,113,0.9);
  color: white;
}
.tpl-badge-new {
  background: rgba(34,211,238,0.9);
  color: white;
}
.tpl-badge-ai {
  background: var(--gradient-primary);
  color: white;
  display: flex;
  align-items: center;
  gap: 3px;
}

.tpl-compliance {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  z-index: 3;
  backdrop-filter: blur(4px);
}
.tpl-compliance.compliance-A {
  background: rgba(52,211,153,0.85);
  color: white;
}
.tpl-compliance.compliance-B {
  background: rgba(245,158,11,0.85);
  color: white;
}
.tpl-compliance.compliance-C {
  background: rgba(107,114,128,0.85);
  color: white;
}

.tpl-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s;
  z-index: 4;
}
.tpl-card:hover .tpl-play-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

.tpl-card-body {
  padding: 12px 14px 14px;
}
.tpl-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tpl-card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tpl-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 500;
}
.tpl-tag-brand {
  background: rgba(139,92,246,0.15);
  color: var(--primary-light);
}
.tpl-tag-region {
  background: rgba(34,211,238,0.15);
  color: var(--accent-cyan);
}
.tpl-tag-type {
  background: rgba(244,114,182,0.15);
  color: #f472b6;
}

.tpl-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}
.tpl-card-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tpl-rating {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-orange);
}
.tpl-usage {
  font-size: 11px;
  color: var(--text-tertiary);
}
.tpl-trend-mini { display: flex; }
.tpl-trend-svg { display: block; }

/* ====== 预览抽屉 ====== */
.tpl-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
  z-index: 100;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.tpl-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 720px;
  max-width: 90vw;
  height: 100%;
  background: var(--bg-deep);
  border-left: 1px solid var(--border-color);
  z-index: 101;
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: -8px 0 32px rgba(0,0,0,0.3);
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.tpl-drawer-header {
  padding: 16px 24px 12px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  position: relative;
}
.tpl-drawer-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  transition: all 0.2s;
}
.tpl-drawer-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.tpl-drawer-title-row {
  margin-bottom: 12px;
  padding-right: 40px;
}
.tpl-drawer-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.tpl-drawer-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.tpl-drawer-rating {
  color: var(--accent-orange);
  font-size: 13px;
  font-weight: 600;
}
.tpl-drawer-usage {
  font-size: 12px;
  color: var(--text-secondary);
}
.tpl-drawer-compliance {
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.tpl-drawer-compliance.compliance-A { background: rgba(52,211,153,0.15); color: var(--accent-green); }
.tpl-drawer-compliance.compliance-B { background: rgba(245,158,11,0.15); color: var(--accent-orange); }
.tpl-drawer-compliance.compliance-C { background: rgba(107,114,128,0.2); color: var(--text-tertiary); }

/* 语言 tabs */
.tpl-drawer-langtabs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.langtabs-label, .regions-label {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  font-weight: 500;
}
.langtabs-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.langtab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.langtab:hover { color: var(--text-primary); border-color: var(--border-hover); }
.langtab.active {
  background: rgba(34,211,238,0.12);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  font-weight: 600;
}
.langtab-flag { font-size: 12px; }

/* 区域变体 */
.tpl-drawer-regions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.regions-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.region-chip {
  padding: 3px 10px;
  font-size: 11px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.region-chip:hover { color: var(--text-primary); border-color: var(--border-hover); }
.region-chip.active {
  background: rgba(139,92,246,0.15);
  border-color: var(--primary);
  color: var(--primary-light);
  font-weight: 500;
}

/* Drawer Tabs */
.tpl-drawer-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  padding: 0 24px;
  flex-shrink: 0;
  gap: 4px;
}
.tpl-dt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-secondary);
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s;
  font-weight: 500;
}
.tpl-dt:hover { color: var(--text-primary); }
.tpl-dt.active {
  color: var(--primary-light);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

/* Drawer 内容 */
.tpl-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

/* 预览页 */
.drawer-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.drawer-preview-stage {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 9/16;
  max-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}
.drawer-play-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255,255,255,0.4);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.drawer-play-btn:hover {
  transform: scale(1.1);
  background: rgba(255,255,255,0.3);
}
.drawer-preview-info {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}
.drawer-duration, .drawer-ratio, .drawer-lang {
  padding: 3px 8px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  font-size: 11px;
  color: white;
}

.drawer-preview-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}
.preview-ctrl-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  transition: all 0.2s;
}
.preview-ctrl-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.preview-fullscreen { margin-left: auto; }
.preview-zoom-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.preview-zoom-track {
  flex: 1;
  height: 4px;
  background: var(--bg-panel);
  border-radius: 2px;
  overflow: hidden;
}
.preview-zoom-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 2px;
}
.preview-zoom-val {
  font-size: 11px;
  color: var(--text-tertiary);
  width: 40px;
  text-align: right;
  font-family: ui-monospace, monospace;
}

.drawer-preview-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.drawer-stat-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drawer-stat-label {
  font-size: 11px;
  color: var(--text-tertiary);
}
.drawer-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

/* 规范说明 */
.drawer-spec {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.drawer-spec-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.drawer-spec-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.spec-list {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}
.spec-item {
  display: flex;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
}
.spec-item:last-child { border-bottom: none; }
.spec-label {
  width: 100px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.spec-value {
  color: var(--text-primary);
  flex: 1;
  line-height: 1.5;
}
.spec-compliance-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
}
.spec-compliance-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.spec-compliance-badge {
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
.spec-compliance-badge.compliance-A { background: rgba(52,211,153,0.15); color: var(--accent-green); }
.spec-compliance-badge.compliance-B { background: rgba(245,158,11,0.15); color: var(--accent-orange); }
.spec-compliance-badge.compliance-C { background: rgba(107,114,128,0.2); color: var(--text-tertiary); }
.spec-compliance-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.spec-compliance-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.spec-regions-box { }
.spec-regions-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.spec-regions-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.spec-region-tag {
  padding: 4px 12px;
  background: rgba(34,211,238,0.12);
  border: 1px solid rgba(34,211,238,0.25);
  border-radius: 12px;
  font-size: 11px;
  color: var(--accent-cyan);
}

/* 版本历史 */
.drawer-versions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.version-timeline {
  position: relative;
  padding-left: 20px;
}
.version-timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border-color);
}
.version-item {
  position: relative;
  padding-bottom: 16px;
}
.version-item:last-child { padding-bottom: 0; }
.version-dot {
  position: absolute;
  left: -18px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 2px solid var(--border-color);
}
.version-item.current .version-dot {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(139,92,246,0.2);
}
.version-info { }
.version-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.version-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.version-current-badge {
  padding: 1px 8px;
  background: var(--gradient-primary);
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px;
}
.version-date {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: auto;
}
.version-author {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.version-change {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* 底部使用按钮 */
.tpl-drawer-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  background: var(--bg-deep);
}
.tpl-use-dropdown {
  width: 100%;
  position: relative;
}
.tpl-use-main-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--gradient-primary);
  color: white;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(139,92,246,0.3);
}
.tpl-use-main-btn:hover {
  box-shadow: 0 6px 24px rgba(139,92,246,0.5);
}
.tpl-use-options {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.2);
}
.tpl-use-dropdown:hover .tpl-use-options {
  display: flex;
  flex-direction: column;
}
.tpl-use-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  text-align: left;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border-color);
}
.tpl-use-opt:last-child { border-bottom: none; }
.tpl-use-opt:hover {
  background: var(--bg-hover);
}
.tpl-use-opt-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(139,92,246,0.12);
  color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tpl-use-opt-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.tpl-use-opt-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* List mode */
.tpl-masonry.list-mode {
  column-count: 1;
  display: flex;
  flex-direction: column;
}

/* ====== 4.2 模板编辑器 ====== */
.te-v1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
  padding-bottom: 8px;
}

/* 顶部工具条 */
.te-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px 16px;
  flex-shrink: 0;
  margin-bottom: 10px;
}
.te-topbar-left, .te-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.te-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.2s;
}
.te-back-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.te-file-info { }
.te-file-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.te-dirty-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-orange);
  animation: dirtyPulse 2s infinite;
}
@keyframes dirtyPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.te-dirty-text {
  font-size: 11px;
  color: var(--accent-orange);
  font-weight: 500;
}
.te-file-path {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.te-topbar-center {
  display: flex;
  align-items: center;
  gap: 20px;
}
.te-history-ctrl {
  display: flex;
  gap: 2px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}
.te-history-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.15s;
  gap: 4px;
  padding: 0 8px;
  width: auto;
  min-width: 32px;
  border-radius: 6px;
}
.te-history-btn .te-icon-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.te-history-btn .te-icon-text {
  font-size: 12px;
  color: inherit;
  white-space: nowrap;
}
.te-history-btn:hover:not(.disabled) {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.te-history-btn.disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
  opacity: 0.5;
}
.te-zoom-mini {
  display: flex;
  align-items: center;
  gap: 8px;
}
.te-zoom-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 16px;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.15s;
}
.te-zoom-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.te-zoom-val {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: ui-monospace, monospace;
  min-width: 44px;
  text-align: center;
}

.te-topbar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s;
}
.te-topbar-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.te-btn-primary {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
}
.te-btn-primary:hover { box-shadow: 0 4px 12px rgba(139,92,246,0.4); }

/* 主区 */
.te-main {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  gap: 10px;
  min-height: 0;
  margin-bottom: 10px;
}

/* 左侧面板 */
.te-left-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.te-panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.te-panel-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  font-weight: 500;
}
.te-panel-tab:hover { color: var(--text-primary); }
.te-panel-tab.active {
  color: var(--primary-light);
  border-bottom-color: var(--primary);
  background: rgba(139,92,246,0.06);
  font-weight: 600;
}
.te-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

/* 组件库 */
.te-component-lib {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.te-cat-section { }
.te-cat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  font-size: 12px;
  color: var(--text-primary);
  width: 100%;
  text-align: left;
  border-radius: 6px;
  font-weight: 500;
  transition: background 0.15s;
}
.te-cat-header:hover { background: var(--bg-hover); }
.te-cat-icon {
  color: var(--primary-light);
  display: flex;
}
.te-cat-name { flex: 1; }
.te-cat-arrow {
  color: var(--text-tertiary);
  transition: transform 0.2s;
  display: flex;
}
.te-cat-arrow.open { transform: rotate(180deg); }

.te-cat-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 4px 4px 8px;
}
.te-comp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: grab;
  transition: all 0.15s;
  position: relative;
}
.te-comp-item:hover {
  border-color: var(--primary);
  background: rgba(139,92,246,0.08);
  transform: translateY(-2px);
}
.te-comp-item:active { cursor: grabbing; }
.te-comp-icon {
  color: var(--text-secondary);
  display: flex;
}
.te-comp-item:hover .te-comp-icon { color: var(--primary-light); }
.te-comp-name {
  font-size: 10px;
  color: var(--text-tertiary);
}
.te-comp-item:hover .te-comp-name { color: var(--text-secondary); }
.te-comp-drag {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 9px;
  color: var(--text-tertiary);
  letter-spacing: -1px;
  opacity: 0.5;
}

/* 图层面板 */
.te-layer-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.te-layer-group { }
.te-layer-group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  padding: 4px 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.te-layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 2px;
}
.te-layer-item:hover { background: var(--bg-hover); }
.te-layer-item.active {
  background: rgba(139,92,246,0.1);
  border: 1px solid rgba(139,92,246,0.3);
}
.te-layer-item.is-brand { opacity: 0.7; }
.te-lay-icon {
  color: var(--text-tertiary);
  display: flex;
}
.te-layer-item.active .te-lay-icon { color: var(--primary-light); }
.te-lay-name {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.te-layer-item.active .te-lay-name { color: var(--text-primary); font-weight: 500; }
.te-lay-actions {
  display: flex;
  gap: 2px;
}
.te-lay-btn {
  width: 28px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  border-radius: 4px;
  transition: all 0.15s;
}
.te-lay-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.te-lay-lock { font-size: 11px; }

/* 中央画布 */
.te-canvas-area {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.te-canvas-viewport {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 50%, rgba(139,92,246,0.05), transparent 60%),
    var(--bg-panel);
  position: relative;
}
.te-canvas-wrap {
  transform-origin: center center;
  transition: transform 0.15s;
}
.te-canvas-frame {
  position: relative;
  width: 360px;
  height: 640px;
  background: #1a1f2e;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
}
.te-canvas-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

/* 层 */
.te-layer {
  position: absolute;
  inset: 0;
}
.te-layer.collapsed { opacity: 0.3; }
.te-layer-label {
  position: absolute;
  left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(4px);
}
.te-label-bg {
  top: 8px;
  background: rgba(34,211,238,0.2);
  color: var(--accent-cyan);
}
.te-label-brand {
  top: 32px;
  background: rgba(139,92,246,0.25);
  color: var(--primary-light);
}
.te-label-content {
  top: 56px;
  background: rgba(52,211,153,0.2);
  color: var(--accent-green);
}
.te-layer-toggle {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}
.te-label-btn {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.1);
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.15s;
}
.te-label-btn:hover { color: white; background: rgba(255,255,255,0.2); }
.te-label-btn.on {
  background: var(--primary);
  color: white;
}

/* 画布元素 */
.te-element {
  position: absolute;
  cursor: move;
  user-select: none;
}
.te-element.te-locked {
  cursor: not-allowed;
}
.te-element.selected .te-resize-handles { display: block; }
.te-element.te-locked {
  outline: 1.5px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.2);
  border-radius: 2px;
}
.te-lock-badge {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(139,92,246,0.5);
}
.te-lock-side {
  top: 4px;
  right: 4px;
  left: auto;
}
.te-resize-handles {
  display: none;
  position: absolute;
  inset: -4px;
  pointer-events: none;
}
.te-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: white;
  border: 1.5px solid var(--primary);
  border-radius: 2px;
}
.te-handle.tl { top: 0; left: 0; cursor: nwse-resize; }
.te-handle.tr { top: 0; right: 0; cursor: nesw-resize; }
.te-handle.bl { bottom: 0; left: 0; cursor: nesw-resize; }
.te-handle.br { bottom: 0; right: 0; cursor: nwse-resize; }
.te-handle.t { top: 0; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.te-handle.b { bottom: 0; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.te-handle.l { left: 0; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.te-handle.r { right: 0; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

/* 背景图 */
.te-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}
.te-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,14,26,0.3) 0%, rgba(10,14,26,0.6) 100%);
}

/* Logo 元素 */
.te-logo-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.te-logo-text {
  font-size: 20px;
  font-weight: 900;
  color: white;
  letter-spacing: 1px;
  line-height: 1;
}
.te-logo-sub {
  font-size: 10px;
  font-weight: 700;
  color: #d4af37;
  letter-spacing: 2px;
}

/* 品牌色条 */
.te-element-bar {
  background: linear-gradient(180deg, #6366f1, #a855f7);
}

/* 底部品牌条 */
.te-element-bottombar {
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.te-bottombar-text {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  letter-spacing: 2px;
}

/* 数字人 */
.te-element-digital {
  width: 80px;
  height: 160px;
}
.te-digital-avatar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.te-avatar-head {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(180deg, #c49b7a, #a67c52);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.te-avatar-body {
  width: 70px;
  height: 110px;
  margin-top: -4px;
  background: linear-gradient(180deg, #1e3a5f, #0f2744);
  border-radius: 12px 12px 0 0;
  position: relative;
}
.te-avatar-body::before {
  content: '';
  position: absolute;
  top: 20px;
  left: -6px;
  width: 12px;
  height: 40px;
  background: #1e3a5f;
  border-radius: 6px;
}
.te-avatar-body::after {
  content: '';
  position: absolute;
  top: 20px;
  right: -6px;
  width: 12px;
  height: 40px;
  background: #1e3a5f;
  border-radius: 6px;
}
.te-digital-tag {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--text-tertiary);
  white-space: nowrap;
  background: rgba(0,0,0,0.6);
  padding: 1px 6px;
  border-radius: 6px;
}

/* 标题文字 */
.te-element-title { width: auto; }
.te-title-text {
  font-size: 28px;
  font-weight: 900;
  color: white;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  white-space: nowrap;
}
.te-subtitle-text {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}

/* 字幕条 */
.te-caption-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  border-radius: 6px;
}
.te-caption-text {
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: white;
  padding: 10px 14px;
  line-height: 1.4;
}

/* CTA 按钮 */
.te-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--gradient-primary);
  color: white;
  font-size: 13px;
  font-weight: 600;
  border-radius: 26px;
  box-shadow: 0 4px 16px rgba(99,102,241,0.4);
  white-space: nowrap;
}
.te-cta-arrow { font-size: 14px; }

/* 安全区 */
.te-safe-area {
  position: absolute;
  inset: 24px 16px 24px 16px;
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 4px;
  pointer-events: none;
}

/* 画布底部 */
.te-canvas-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.te-canvas-dim {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
}
.te-canvas-zoombar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.te-zoom-foot-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.te-zoom-track {
  width: 120px;
  height: 4px;
  background: var(--bg-card);
  border-radius: 2px;
  overflow: hidden;
}
.te-zoom-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 2px;
}
.te-zoom-pct {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: ui-monospace, monospace;
  min-width: 40px;
  text-align: right;
}
.te-zoom-fit {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}
.te-zoom-fit:hover { color: var(--text-primary); border-color: var(--border-hover); }

/* 右侧属性面板 */
.te-right-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.te-prop-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.te-prop-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.te-prop-elem {
  display: flex;
  align-items: center;
  gap: 8px;
}
.te-prop-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(139,92,246,0.12);
  color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.te-prop-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}
.te-prop-empty {
  font-size: 11px;
  color: var(--text-tertiary);
}

.te-prop-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.te-prop-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.te-prop-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.te-prop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.te-prop-field {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.te-prop-field label {
  font-size: 11px;
  color: var(--text-tertiary);
  min-width: 24px;
}
.te-prop-input {
  flex: 1;
  padding: 6px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  font-family: ui-monospace, monospace;
  outline: none;
  transition: border-color 0.15s;
  min-width: 0;
}
.te-prop-input:focus { border-color: var(--primary); }
.te-prop-unit {
  font-size: 10px;
  color: var(--text-tertiary);
  position: absolute;
  right: 8px;
  pointer-events: none;
}
.te-prop-full {
  grid-column: 1 / -1;
}
.te-prop-full-input {
  width: 100%;
  padding: 8px 10px;
  margin-top: 4px;
}
.te-prop-textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.5;
  resize: none;
  outline: none;
  font-family: inherit;
}
.te-prop-textarea:focus { border-color: var(--primary); }
.te-prop-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.te-prop-tip b { color: var(--primary-light); font-weight: 600; }

.te-prop-select {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s;
}
.te-prop-select:hover { border-color: var(--border-hover); }

.te-color-picker {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.te-color-picker:hover { border-color: var(--border-hover); }
.te-color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.2);
}
.te-color-hex {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: ui-monospace, monospace;
}

.te-prop-sync {
  margin-top: 4px;
}
.te-sync-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(34,211,238,0.1);
  border: 1px solid rgba(34,211,238,0.3);
  color: var(--accent-cyan);
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s;
}
.te-sync-btn:hover {
  background: rgba(34,211,238,0.18);
  border-color: var(--accent-cyan);
}

/* 品牌锁定提示 */
.te-brand-lock-box {
  background: rgba(139,92,246,0.08);
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.te-brand-lock-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.te-brand-lock-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-light);
  margin-bottom: 6px;
}
.te-brand-lock-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}
.te-brand-lock-btn {
  width: 100%;
  padding: 8px 14px;
  background: var(--gradient-primary);
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.te-brand-lock-ref {
  font-size: 11px;
  color: var(--text-tertiary);
}
.te-brand-lock-ref a {
  color: var(--primary-light);
  text-decoration: underline;
  cursor: pointer;
}
.te-prop-static {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary);
}

/* 数字人形象预设 */
.te-avatar-presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.te-avatar-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 10px;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.te-avatar-preset:hover { border-color: var(--border-hover); color: var(--text-primary); }
.te-avatar-preset.active {
  border-color: var(--primary);
  background: rgba(139,92,246,0.1);
  color: var(--primary-light);
}
.te-avatar-preset-icon {
  color: inherit;
}

/* 语音预览 */
.te-voice-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-panel);
  border-radius: 6px;
  margin-top: 4px;
}
.te-voice-play {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.te-voice-wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 20px;
}
.te-voice-wave span {
  flex: 1;
  background: var(--primary);
  border-radius: 1px;
  opacity: 0.6;
  animation: voiceWave 1s infinite ease-in-out;
}
.te-voice-wave span:nth-child(1) { height: 40%; animation-delay: 0s; }
.te-voice-wave span:nth-child(2) { height: 70%; animation-delay: 0.1s; }
.te-voice-wave span:nth-child(3) { height: 100%; animation-delay: 0.2s; }
.te-voice-wave span:nth-child(4) { height: 60%; animation-delay: 0.3s; }
.te-voice-wave span:nth-child(5) { height: 30%; animation-delay: 0.4s; }
@keyframes voiceWave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.4); }
}
.te-voice-time {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
  flex-shrink: 0;
}

/* 属性空状态 */
.te-prop-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.6;
  padding: 20px;
}
.te-prop-empty-icon {
  color: var(--text-tertiary);
  margin-bottom: 12px;
  opacity: 0.5;
}

/* ====== 底部语言版本矩阵 ====== */
.te-lang-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.te-lang-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
}
.te-lang-matrix {
  flex: 1;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.te-lang-matrix::-webkit-scrollbar { display: none; }
.te-lang-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s;
  min-width: 90px;
  flex-shrink: 0;
}
.te-lang-tab:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}
.te-lang-tab.active {
  border-color: var(--primary);
  background: rgba(139,92,246,0.1);
  box-shadow: 0 2px 8px rgba(139,92,246,0.2);
}
.te-lang-flag {
  font-size: 18px;
}
.te-lang-name {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
}
.te-lang-status {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 500;
}
.te-lang-status.status-published {
  background: rgba(52,211,153,0.15);
  color: var(--accent-green);
}
.te-lang-status.status-editing {
  background: rgba(245,158,11,0.15);
  color: var(--accent-orange);
}
.te-lang-status.status-pending {
  background: rgba(248,113,113,0.15);
  color: var(--accent-red);
}
.te-lang-status.status-draft {
  background: rgba(107,114,128,0.2);
  color: var(--text-tertiary);
}

.te-lang-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.te-lang-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s;
  white-space: nowrap;
}
.te-lang-action-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.te-lang-primary {
  background: rgba(139,92,246,0.15);
  color: var(--primary-light);
  border-color: rgba(139,92,246,0.4);
}
.te-lang-primary:hover {
  background: rgba(139,92,246,0.2);
  border-color: var(--primary);
}

/* 品牌锁浮窗提示 */
.te-lock-alert {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30,41,59,0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(139,92,246,0.4);
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 200;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  animation: slideUpFade 0.3s ease;
}
@keyframes slideUpFade {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.te-lock-alert-icon { font-size: 24px; }
.te-lock-alert-body { }
.te-lock-alert-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.te-lock-alert-desc {
  font-size: 11px;
  color: var(--text-secondary);
}
.te-lock-alert-btn {
  padding: 7px 14px;
  background: var(--gradient-primary);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
}

/* ====== 5.1 模板化生成 ====== */
.gen-v1 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding-bottom: 70px; /* 底部栏占位 */
  position: relative;
}

/* 步骤条 */
.gen-stepbar {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 20px;
  flex-shrink: 0;
}
.gen-step {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
  cursor: pointer;
}
.gen-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--bg-panel);
  color: var(--text-tertiary);
  border: 2px solid var(--border-color);
  transition: all 0.3s;
  z-index: 2;
}
.gen-step.done .gen-step-num {
  background: var(--accent-green);
  border-color: var(--accent-green);
  color: white;
}
.gen-step.active .gen-step-num {
  background: var(--gradient-primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 0 0 4px rgba(139,92,246,0.15);
  transform: scale(1.1);
}
.gen-step-label {
  margin-left: 10px;
  min-width: 0;
}
.gen-step-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.gen-step.active .gen-step-name {
  color: var(--primary-light);
}
.gen-step.done .gen-step-name {
  color: var(--accent-green);
}
.gen-step-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.gen-step-line {
  position: absolute;
  top: 50%;
  left: calc(36px + 50%);
  right: 0;
  height: 2px;
  background: var(--border-color);
  z-index: 1;
}
.gen-step.done .gen-step-line {
  background: var(--accent-green);
}

/* 主区 */
.gen-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 16px;
  min-height: 0;
}

/* 左侧向导 */
.gen-wizard {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.gen-wizard-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.gen-wizard-stepno {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(139,92,246,0.15);
  color: var(--primary-light);
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  margin-bottom: 10px;
}
.gen-wizard-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.gen-wizard-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.gen-wizard-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
}

/* AI 建议条 */
.gen-ai-suggest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  margin: 0 22px;
  background: linear-gradient(90deg, rgba(139,92,246,0.08), transparent);
  border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0;
  flex-shrink: 0;
}
.gen-ai-suggest-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.gen-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--gradient-primary);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  flex-shrink: 0;
}
.gen-ai-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.gen-ai-adopt-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(139,92,246,0.4);
  color: var(--primary-light);
  font-size: 11px;
  font-weight: 600;
  border-radius: 7px;
  flex-shrink: 0;
  transition: all 0.2s;
  white-space: nowrap;
}
.gen-ai-adopt-btn:hover {
  background: rgba(139,92,246,0.25);
}

/* 步骤导航 */
.gen-step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border-color);
  margin-top: 14px;
  flex-shrink: 0;
}
/* 第六步右侧双按钮组（演示路径分叉：批量混剪 / 专业时间线编辑） */
.gen-step-nav-right {
  display: flex;
  gap: 10px;
}
.gen-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s;
}
.gen-nav-prev {
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
}
.gen-nav-prev:hover:not(.disabled) {
  color: var(--text-primary);
  border-color: var(--border-hover);
}
.gen-nav-next {
  color: white;
  background: var(--gradient-primary);
  box-shadow: 0 4px 12px rgba(139,92,246,0.3);
}
.gen-nav-next:hover:not(.disabled) {
  box-shadow: 0 6px 20px rgba(139,92,246,0.45);
}
.gen-nav-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* 卡片网格通用 */
.gen-card-grid {
  display: grid;
  gap: 12px;
}
.gen-template-grid { grid-template-columns: repeat(3, 1fr); }
.gen-car-grid { grid-template-columns: repeat(3, 1fr); }
.gen-region-grid { grid-template-columns: repeat(3, 1fr); }

.gen-card {
  position: relative;
  background: var(--bg-panel);
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}
.gen-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}
.gen-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.15), 0 4px 16px rgba(139,92,246,0.15);
}
.gen-card-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(139,92,246,0.4);
}
.gen-check-round {
  width: 22px;
  height: 22px;
}

/* 模板卡片 */
.gen-tpl-thumb {
  position: relative;
  height: 110px;
  overflow: hidden;
}
.gen-tpl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gen-tpl-hot {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  background: rgba(248,113,113,0.9);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}
.gen-tpl-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 2px 6px;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 10px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}
.gen-card-body {
  padding: 10px 12px 12px;
}
.gen-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gen-card-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.gen-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}
.gen-card-usage { color: var(--text-tertiary); }
.gen-card-rating { color: var(--accent-orange); font-weight: 600; }

/* 车型卡片 */
.gen-car-card {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.gen-car-img {
  width: 80px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.gen-car-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gen-car-info { flex: 1; min-width: 0; }
.gen-car-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.gen-car-tag {
  font-size: 11px;
  color: var(--primary-light);
  background: rgba(139,92,246,0.12);
  padding: 1px 6px;
  border-radius: 6px;
  display: inline-block;
}

/* AI 智能填充 */
.gen-auto-fill {
  margin-top: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(168,85,247,0.04));
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: 10px;
}
.gen-auto-fill-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.gen-auto-fill-header b {
  color: var(--primary-light);
  font-weight: 600;
}
.gen-ai-fill-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--gradient-primary);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
}
.gen-auto-points {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gen-point-chip {
  padding: 5px 12px;
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.25);
  color: var(--primary-light);
  font-size: 11px;
  font-weight: 500;
  border-radius: 16px;
  animation: chipPop 0.3s ease;
}
@keyframes chipPop {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* 区域卡片 */
.gen-region-card {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.gen-region-flag { font-size: 28px; }
.gen-region-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.gen-region-desc {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* 语言卡片 */
.gen-lang-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.gen-lang-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.gen-lang-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}
.gen-lang-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
  background: rgba(139,92,246,0.05);
}
.gen-lang-flag { font-size: 24px; }
.gen-lang-info { flex: 1; }
.gen-lang-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.gen-lang-native {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.gen-lang-checkbox {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: var(--bg-card);
}
.gen-lang-card.selected .gen-lang-checkbox {
  background: var(--primary);
  border-color: var(--primary);
}

/* AI 配置页 */
.gen-ai-config {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.gen-ai-section { }
.gen-ai-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.gen-ai-section-title > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}
.gen-ai-section-title > span:first-child svg {
  color: var(--primary-light);
}
.gen-ai-section-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
}

/* 数字人卡片行 */
.gen-avatar-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.gen-avatar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px;
  background: var(--bg-panel);
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.gen-avatar-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}
.gen-avatar-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
  background: rgba(139,92,246,0.05);
}
.gen-avatar-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
}
.gen-avatar-head {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.gen-avatar-body-ai {
  width: 56px;
  height: 50px;
  margin-top: -4px;
  background: linear-gradient(180deg, #1e3a5f, #0f2744);
  border-radius: 10px 10px 0 0;
  position: relative;
}
.gen-avatar-body-ai::before,
.gen-avatar-body-ai::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 8px;
  height: 20px;
  background: #1e3a5f;
  border-radius: 4px;
}
.gen-avatar-body-ai::before { left: -6px; }
.gen-avatar-body-ai::after { right: -6px; }
.gen-avatar-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}
.gen-avatar-desc {
  font-size: 10px;
  color: var(--text-tertiary);
  text-align: center;
  margin-top: 2px;
}

/* 配音 */
.gen-voice-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gen-voice-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-panel);
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.gen-voice-card:hover { border-color: var(--primary); }
.gen-voice-card.selected {
  border-color: var(--primary);
  background: rgba(139,92,246,0.05);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
}
.gen-voice-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gen-voice-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
}
.gen-voice-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.gen-voice-type {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.gen-voice-style {
  font-size: 11px;
  color: var(--primary-light);
  background: rgba(139,92,246,0.1);
  padding: 3px 8px;
  border-radius: 8px;
}

/* 字幕风格 */
.gen-subtitle-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gen-subtitle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--bg-panel);
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.gen-subtitle-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.gen-subtitle-card.selected {
  border-color: var(--primary);
  background: rgba(139,92,246,0.05);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
}
.gen-subtitle-preview {
  width: 100%;
  height: 48px;
  background: #1a1f2e;
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  overflow: hidden;
}
.gen-subtitle-text {
  font-size: 12px;
  font-weight: 700;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  background: rgba(0,0,0,0.6);
  padding: 2px 10px;
  border-radius: 4px;
}
.gen-subtitle-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.gen-subtitle-desc {
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* 确认页 */
.gen-review {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.gen-review-summary {
  text-align: center;
  padding: 20px;
}
.gen-review-icon {
  color: var(--accent-green);
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}
.gen-review-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.gen-review-sub {
  font-size: 13px;
  color: var(--text-secondary);
}
.gen-review-items {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}
.gen-review-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}
.gen-review-item:last-child { border-bottom: none; }
.gen-review-item.gen-review-total {
  background: rgba(139,92,246,0.08);
  border-top: 1px solid rgba(139,92,246,0.2);
  border-bottom: none;
}
.gen-review-item.gen-review-total .gen-review-value b {
  color: var(--primary-light);
  font-size: 16px;
}
.gen-review-label {
  color: var(--text-tertiary);
  font-size: 12px;
}
.gen-review-value {
  color: var(--text-primary);
  font-weight: 500;
  max-width: 60%;
  text-align: right;
}

/* ====== 右侧预览面板 ====== */
.gen-preview-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.gen-preview-panel {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: sticky;
  top: 0;
}
.gen-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.gen-preview-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.gen-preview-actions {
  display: flex;
  gap: 4px;
}
.gen-preview-ctrl {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  transition: all 0.15s;
}
.gen-preview-ctrl:hover { color: var(--text-primary); border-color: var(--border-hover); }
.gen-preview-play {
  color: var(--primary-light);
  border-color: rgba(139,92,246,0.3);
  background: rgba(139,92,246,0.1);
}

.gen-preview-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background:
    radial-gradient(circle at 50% 30%, rgba(139,92,246,0.06), transparent 60%),
    var(--bg-panel);
}
.gen-preview-frame {
  position: relative;
  width: 240px;
  height: 426px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
}
.gen-pv-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
}
.gen-pv-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,14,26,0.2) 0%, rgba(10,14,26,0.7) 100%);
}
.gen-pv-logo {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 11px;
  font-weight: 800;
  color: white;
  letter-spacing: 1px;
  z-index: 2;
}
.gen-pv-title {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 120px;
  font-size: 22px;
  font-weight: 900;
  color: white;
  line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  z-index: 2;
}
.gen-pv-avatar-mini {
  position: absolute;
  bottom: 100px;
  right: 14px;
  width: 50px;
  height: 80px;
  background: linear-gradient(180deg, #c49b7a, #8b6b4a);
  border-radius: 25px 25px 8px 8px;
  z-index: 2;
  opacity: 0.9;
}
.gen-pv-subtitle {
  position: absolute;
  left: 14px;
  right: 80px;
  bottom: 80px;
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  z-index: 2;
}
.gen-pv-cta {
  position: absolute;
  left: 14px;
  bottom: 44px;
  padding: 6px 14px;
  background: var(--gradient-primary);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 16px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(139,92,246,0.4);
}
.gen-pv-bottombar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 2;
}
.gen-pv-lang {
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  padding: 1px 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}
.gen-pv-brand {
  font-size: 8px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 1px;
  font-weight: 700;
}

.gen-preview-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 240px;
  margin-top: 10px;
}
.gen-preview-badge {
  padding: 3px 10px;
  background: rgba(139,92,246,0.15);
  color: var(--primary-light);
  font-size: 11px;
  font-weight: 500;
  border-radius: 8px;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gen-preview-time {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
}

/* 任务列表 */
.gen-tasks-list {
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  max-height: 200px;
  display: flex;
  flex-direction: column;
}
.gen-tasks-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
}
.gen-tasks-count {
  font-size: 11px;
  color: var(--primary-light);
  background: rgba(139,92,246,0.12);
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}
.gen-tasks-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 10px;
}
.gen-task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 2px;
  transition: background 0.15s;
}
.gen-task-item:hover { background: var(--bg-hover); }
.gen-task-index {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  flex-shrink: 0;
}
.gen-task-info { flex: 1; min-width: 0; }
.gen-task-name {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gen-task-meta {
  font-size: 10px;
  color: var(--text-tertiary);
  display: flex;
  gap: 4px;
  margin-top: 2px;
}
.gen-task-cost {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-orange);
  flex-shrink: 0;
}

/* ====== 底部生成队列栏 ====== */
.gen-queue-bar {
  position: fixed;
  bottom: 0;
  left: 260px;
  right: 20px;
  height: 60px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 50;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
.gen-queue-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gen-queue-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--gradient-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(139,92,246,0.3);
}
.gen-queue-info { }
.gen-queue-title {
  font-size: 14px;
  color: var(--text-primary);
}
.gen-queue-title b {
  color: var(--primary-light);
  font-size: 18px;
  font-weight: 800;
  margin: 0 2px;
}
.gen-queue-meta {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.gen-queue-meta b {
  color: var(--text-primary);
  font-weight: 600;
}
.gen-queue-dot {
  color: var(--text-tertiary);
}
.gen-queue-right {
  display: flex;
  gap: 10px;
  align-items: center;
}
.gen-queue-secondary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s;
}
.gen-queue-secondary:hover { color: var(--text-primary); border-color: var(--border-hover); }
.gen-queue-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  background: var(--gradient-primary);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(139,92,246,0.4);
  transition: all 0.2s;
}
.gen-queue-primary:hover {
  box-shadow: 0 6px 24px rgba(139,92,246,0.55);
  transform: translateY(-1px);
}

/* ====== 5.2 AI 数字人视频生成 ====== */
.aivg-v1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 80px;
  gap: 12px;
  position: relative;
}

/* 顶部 */
.aivg-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 18px;
  flex-shrink: 0;
}
.aivg-title-area {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.aivg-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.aivg-project {
  font-size: 13px;
  color: var(--primary-light);
  background: rgba(139,92,246,0.1);
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 500;
}
.aivg-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 3px;
}
.aivg-tab {
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border-radius: 6px;
  transition: all 0.2s;
}
.aivg-tab:hover { color: var(--text-primary); }
.aivg-tab.active {
  background: var(--gradient-primary);
  color: white;
  box-shadow: 0 2px 8px rgba(139,92,246,0.3);
}
.aivg-top-actions { display: flex; gap: 8px; }
.aivg-top-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s;
}
.aivg-top-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.aivg-btn-primary {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
}
.aivg-btn-primary:hover { box-shadow: 0 4px 12px rgba(139,92,246,0.4); }

/* 主区 */
.aivg-main {
  flex: 1;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 12px;
  min-height: 0;
}

/* 左侧数字人面板 */
.aivg-left-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.aivg-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.aivg-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.aivg-count {
  font-size: 11px;
  color: var(--primary-light);
  background: rgba(139,92,246,0.12);
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}
.aivg-filter-row {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.aivg-filter-chip {
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.aivg-filter-chip:hover { color: var(--text-secondary); }
.aivg-filter-chip.active {
  color: var(--primary-light);
  border-color: var(--primary);
  background: rgba(139,92,246,0.12);
  font-weight: 500;
}
.aivg-human-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
  flex: 1;
}
.aivg-human-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px 10px;
  background: var(--bg-panel);
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.aivg-human-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}
.aivg-human-card.selected {
  border-color: var(--primary);
  background: rgba(139,92,246,0.06);
  box-shadow: 0 0 0 2px rgba(139,92,246,0.15);
}
.aivg-human-avatar {
  width: 52px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.aivg-ha-body {
  position: relative;
  width: 44px;
  height: 60px;
}
.aivg-ha-head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.aivg-ha-hair {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 16px;
  border-radius: 15px 15px 5px 5px;
  z-index: 3;
}
.aivg-ha-neck {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 6px;
  border-radius: 2px;
  z-index: 1;
}
.aivg-ha-outfit {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 44px;
  height: 30px;
  border-radius: 8px 8px 0 0;
}
.aivg-human-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}
.aivg-human-style {
  font-size: 9px;
  color: var(--text-tertiary);
  text-align: center;
  margin-top: 1px;
}
.aivg-human-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(139,92,246,0.4);
}

.aivg-human-detail {
  padding: 10px 14px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.aivg-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 11px;
}
.aivg-detail-label {
  color: var(--text-tertiary);
}
.aivg-detail-value {
  color: var(--text-primary);
  font-weight: 500;
}

/* 中央画布区 */
.aivg-canvas-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.aivg-scene-switcher {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  flex-shrink: 0;
}
.aivg-scene-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.aivg-scene-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}
.aivg-scene-chip.active {
  color: white;
  background: var(--gradient-primary);
  border-color: var(--primary);
  box-shadow: 0 2px 10px rgba(139,92,246,0.3);
}
.aivg-scene-emoji { font-size: 14px; }

.aivg-canvas-stage {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.aivg-canvas-frame {
  flex: 1;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(139,92,246,0.05), transparent 60%),
    var(--bg-panel);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aivg-scene-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  filter: blur(0.5px);
}
.aivg-scene-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,14,26,0.1) 0%, rgba(10,14,26,0.5) 100%);
}
.aivg-canvas-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.aivg-brand-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 16px;
  font-weight: 900;
  color: white;
  letter-spacing: 1px;
  z-index: 5;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* 数字人舞台 */
.aivg-digital-stage {
  position: absolute;
  width: 120px;
  height: 200px;
  cursor: grab;
  z-index: 4;
}
.aivg-digital-stage:active { cursor: grabbing; }
.aivg-digital-figure {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.aivg-dg-head {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 2;
  position: relative;
}
.aivg-dg-hair {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 28px;
  border-radius: 27px 27px 8px 8px;
  z-index: 3;
}
.aivg-dg-body {
  width: 80px;
  height: 130px;
  margin-top: -8px;
  border-radius: 14px 14px 6px 6px;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.aivg-dg-arm {
  position: absolute;
  top: 60px;
  width: 18px;
  height: 60px;
  background: inherit;
  border-radius: 9px;
}
.aivg-dg-arm-l {
  left: -10px;
  background: var(--arm-color, #4338ca);
  opacity: 0.9;
  transform: rotate(10deg);
}
.aivg-dg-arm-r {
  right: -10px;
  background: var(--arm-color, #4338ca);
  opacity: 0.9;
  transform: rotate(-5deg);
}
.aivg-dg-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.2), transparent 70%);
  pointer-events: none;
  z-index: -1;
  animation: dgPulse 3s infinite ease-in-out;
}
@keyframes dgPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.08); }
}
.aivg-dg-resize-handle {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  background: var(--primary);
  border: 2px solid white;
  border-radius: 50%;
  cursor: se-resize;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* 前景车 */
.aivg-fg-car {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  z-index: 3;
}
.aivg-fg-car img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.4));
}

/* 画布字幕 */
.aivg-canvas-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}
.aivg-caption-text {
  padding: 8px 16px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  color: white;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  text-align: center;
  direction: rtl;
}

/* 画布控制条 */
.aivg-canvas-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 20px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.aivg-ctrl-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  transition: all 0.15s;
}
.aivg-ctrl-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.aivg-ctrl-btn.aivg-ctrl-primary {
  width: auto;
  padding: 0 12px;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--primary-light);
  background: rgba(139,92,246,0.12);
  border-color: rgba(139,92,246,0.3);
}
.aivg-ctrl-btn.aivg-ctrl-primary:hover {
  background: rgba(139,92,246,0.2);
}
.aivg-ctrl-divider {
  width: 1px;
  height: 20px;
  background: var(--border-color);
  margin: 0 4px;
}
.aivg-zoom-track {
  width: 100px;
  height: 4px;
  background: var(--bg-card);
  border-radius: 2px;
  position: relative;
}
.aivg-zoom-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 2px;
}
.aivg-zoom-val {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: ui-monospace, monospace;
  min-width: 40px;
  text-align: right;
}

/* 波形面板 */
.aivg-waveform-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.aivg-wave-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
}
.aivg-wave-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.aivg-wave-title svg { color: var(--primary-light); }
.aivg-wave-actions { display: flex; gap: 6px; }
.aivg-wave-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.15s;
}
.aivg-wave-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }

.aivg-wave-timeline {
  padding: 0 16px 0 0;
}
.aivg-time-ruler {
  position: relative;
  height: 20px;
  margin: 6px 6px 4px 110px;
  border-bottom: 1px solid var(--border-color);
}
.aivg-time-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
}
.aivg-time-tick::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 1px;
  height: 4px;
  background: var(--text-tertiary);
  opacity: 0.4;
}

.aivg-wave-tracks {
  display: flex;
  flex-direction: column;
  padding: 4px 10px 12px;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}
.aivg-wave-track {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.aivg-wave-track:hover { background: var(--bg-hover); }
.aivg-wave-track.active {
  background: rgba(139,92,246,0.08);
  border-color: rgba(139,92,246,0.3);
}
.aivg-track-info {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100px;
  flex-shrink: 0;
}
.aivg-track-flag { font-size: 16px; }
.aivg-track-lang {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.aivg-track-voice {
  font-size: 10px;
  color: var(--text-tertiary);
  display: none;
}
.aivg-track-wave {
  flex: 1;
  height: 32px;
  display: flex;
  align-items: center;
  background: var(--bg-panel);
  border-radius: 4px;
  padding: 4px 6px;
}
.aivg-wave-bars {
  display: flex;
  align-items: center;
  gap: 1px;
  width: 100%;
  height: 100%;
}
.aivg-wave-bar {
  flex: 1;
  min-width: 1px;
  border-radius: 1px;
  transition: height 0.2s;
}
.aivg-track-ctrls {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.aivg-wave-track:hover .aivg-track-ctrls { opacity: 1; }
.aivg-track-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  transition: all 0.15s;
}
.aivg-track-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

/* 语音详情调节 */
.aivg-voice-detail {
  border-top: 1px solid var(--border-color);
  padding: 12px 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--bg-panel);
}
.aivg-voice-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.aivg-voice-d-flag { font-size: 24px; }
.aivg-voice-d-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.aivg-voice-d-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.aivg-voice-sliders {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aivg-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.aivg-slider-row label {
  font-size: 11px;
  color: var(--text-tertiary);
  width: 32px;
  flex-shrink: 0;
}
.aivg-slider {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.aivg-slider-track {
  flex: 1;
  height: 4px;
  background: var(--bg-card);
  border-radius: 2px;
  position: relative;
}
.aivg-slider-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 2px;
}
.aivg-slider-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: white;
  border: 2px solid var(--primary);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  cursor: pointer;
}
.aivg-slider-val {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: ui-monospace, monospace;
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}
.aivg-voice-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.aivg-voice-test-btn,
.aivg-voice-sync-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  transition: all 0.15s;
}
.aivg-voice-test-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}
.aivg-voice-test-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.aivg-voice-sync-btn {
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(139,92,246,0.3);
  color: var(--primary-light);
}
.aivg-voice-sync-btn:hover { background: rgba(139,92,246,0.25); }

/* ====== 底部 3 阶段进度 ====== */
.aivg-progress-bar {
  position: fixed;
  bottom: 0;
  left: 260px;
  right: 20px;
  height: 72px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 50;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.25);
}
.aivg-prog-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.aivg-prog-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--gradient-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(139,92,246,0.35);
}
.aivg-prog-info { }
.aivg-prog-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.aivg-prog-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

.aivg-prog-stages {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
  max-width: 560px;
}
.aivg-stage {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  min-width: 140px;
  position: relative;
}
.aivg-stage-done {
  border-color: rgba(52,211,153,0.4);
  background: rgba(52,211,153,0.06);
}
.aivg-stage-active {
  border-color: var(--primary);
  background: rgba(139,92,246,0.08);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.15);
}
.aivg-stage-pending {
  opacity: 0.6;
}
.aivg-stage-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.aivg-stage-done .aivg-stage-num {
  background: var(--accent-green);
  border-color: var(--accent-green);
  color: white;
}
.aivg-stage-active .aivg-stage-num {
  border-color: var(--primary);
  background: var(--bg-card);
  color: var(--primary-light);
}
.aivg-stage-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(139,92,246,0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: progSpin 1s linear infinite;
}
@keyframes progSpin {
  to { transform: rotate(360deg); }
}
.aivg-stage-info { flex: 1; min-width: 0; }
.aivg-stage-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.aivg-stage-done .aivg-stage-name { color: var(--accent-green); }
.aivg-stage-active .aivg-stage-name { color: var(--primary-light); }
.aivg-stage-status {
  font-size: 10px;
  color: var(--text-tertiary);
}
.aivg-stage-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-green);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.aivg-stage-progress-ring {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-light);
  font-family: ui-monospace, monospace;
  flex-shrink: 0;
}
.aivg-stage-line {
  width: 24px;
  height: 2px;
  background: var(--border-color);
  flex-shrink: 0;
}
.aivg-stage-line-done {
  background: var(--accent-green);
}
.aivg-stage-line-half {
  background: linear-gradient(90deg, var(--accent-green) 60%, var(--border-color) 60%);
}

.aivg-prog-right {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.aivg-prog-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s;
}
.aivg-prog-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.aivg-prog-btn-primary {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
}
.aivg-prog-btn-primary:hover {
  box-shadow: 0 4px 14px rgba(139,92,246,0.45);
}

/* ====== 6.1 批量混剪 ====== */
.bmix-v1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  padding-bottom: 260px;
  position: relative;
}

/* 顶部 */
.bmix-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 18px;
  flex-shrink: 0;
}
.bmix-topbar-left {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.bmix-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.bmix-project {
  font-size: 12px;
  color: var(--primary-light);
  background: rgba(139,92,246,0.1);
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 500;
}
.bmix-topbar-center {
  flex: 1;
  max-width: 400px;
  margin: 0 24px;
}
.bmix-total-progress { }
.bmix-tp-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.bmix-tp-count {
  color: var(--primary-light);
  font-weight: 600;
}
.bmix-tp-bar {
  height: 6px;
  background: var(--bg-panel);
  border-radius: 3px;
  overflow: hidden;
}
.bmix-tp-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 3px;
  transition: width 0.4s;
  position: relative;
}
.bmix-tp-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: tpShine 2s infinite;
}
@keyframes tpShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.bmix-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bmix-count-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 14px;
  background: rgba(139,92,246,0.1);
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 8px;
}
.bmix-count-badge.bmix-count-secondary {
  background: var(--bg-panel);
  border-color: var(--border-color);
}
.bmix-count-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary-light);
  line-height: 1.1;
}
.bmix-count-badge.bmix-count-secondary .bmix-count-num {
  color: var(--text-primary);
}
.bmix-count-label {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.bmix-start-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: var(--gradient-primary);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(139,92,246,0.35);
  transition: all 0.2s;
}
.bmix-start-btn:hover {
  box-shadow: 0 6px 20px rgba(139,92,246,0.5);
  transform: translateY(-1px);
}

/* 配方Tab */
.bmix-recipe-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 16px;
  flex-shrink: 0;
  overflow: hidden;
}
.bmix-recipe-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
  padding-right: 12px;
  border-right: 1px solid var(--border-color);
  height: 36px;
}
.bmix-recipe-label svg { color: var(--primary-light); }
.bmix-recipe-tabs {
  flex: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bmix-recipe-tabs::-webkit-scrollbar { display: none; }
.bmix-recipe-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 14px;
  background: var(--bg-panel);
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  min-width: 100px;
}
.bmix-recipe-tab:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px);
}
.bmix-recipe-tab.active {
  border-color: var(--primary);
  background: rgba(139,92,246,0.08);
  box-shadow: 0 0 0 2px rgba(139,92,246,0.15);
}
.bmix-recipe-emoji { font-size: 18px; line-height: 1; }
.bmix-recipe-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.bmix-recipe-tab.active .bmix-recipe-name {
  color: var(--primary-light);
}
.bmix-recipe-desc {
  font-size: 10px;
  color: var(--text-tertiary);
}
.bmix-recipe-new {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  flex-shrink: 0;
  transition: all 0.2s;
}
.bmix-recipe-new:hover {
  color: var(--primary-light);
  border-color: var(--primary);
}

/* 主区 */
.bmix-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 12px;
  min-height: 0;
}

/* 素材面板 */
.bmix-materials-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.bmix-panel-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.bmix-panel-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bmix-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.bmix-mat-count {
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-panel);
  padding: 2px 8px;
  border-radius: 6px;
}
.bmix-filter-chips {
  display: flex;
  gap: 6px;
}
.bmix-filter-chip {
  padding: 4px 12px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.bmix-filter-chip:hover { color: var(--text-secondary); }
.bmix-filter-chip.active {
  color: var(--primary-light);
  border-color: var(--primary);
  background: rgba(139,92,246,0.1);
  font-weight: 500;
}
.bmix-mat-tools {
  display: flex;
  gap: 6px;
}
.bmix-mat-tool-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.15s;
}
.bmix-mat-tool-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }

.bmix-mat-grid {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-content: start;
}
.bmix-mat-card {
  background: var(--bg-panel);
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}
.bmix-mat-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.bmix-mat-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(139,92,246,0.2);
}
.bmix-mat-thumb {
  position: relative;
  height: 80px;
  background: var(--bg-card);
  overflow: hidden;
}
.bmix-mat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bmix-mat-audio {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-light);
  background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(168,85,247,0.05));
}
.bmix-mat-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,14,26,0.3);
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 6px;
}
.bmix-mat-card:hover .bmix-mat-overlay,
.bmix-mat-card.selected .bmix-mat-overlay {
  opacity: 1;
}
.bmix-mat-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.bmix-mat-card.selected .bmix-mat-check {
  background: var(--primary);
  border-color: var(--primary);
}
.bmix-mat-duration {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 1px 6px;
  background: rgba(0,0,0,0.7);
  color: white;
  font-size: 10px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
}
.bmix-mat-res {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 1px 6px;
  background: rgba(139,92,246,0.8);
  color: white;
  font-size: 9px;
  border-radius: 4px;
  font-weight: 600;
}
.bmix-mat-info {
  padding: 8px 10px;
}
.bmix-mat-name {
  font-size: 11px;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bmix-mat-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.bmix-mat-tag {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}
.bmix-tag-wey {
  background: rgba(59,130,246,0.15);
  color: #60a5fa;
}
.bmix-tag-tank {
  background: rgba(245,158,11,0.15);
  color: #fbbf24;
}
.bmix-tag-haval {
  background: rgba(239,68,68,0.15);
  color: #f87171;
}
.bmix-tag-audio {
  background: rgba(34,211,238,0.15);
  color: var(--accent-cyan);
}

/* 右侧配置面板 */
.bmix-config-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.bmix-config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.bmix-config-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.bmix-config-title svg { color: var(--primary-light); }
.bmix-save-recipe-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--primary-light);
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 6px;
  transition: all 0.15s;
}
.bmix-save-recipe-btn:hover { background: rgba(139,92,246,0.2); }

.bmix-config-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
.bmix-config-section {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: all 0.2s;
}
.bmix-config-section.open {
  border-color: rgba(139,92,246,0.25);
  background: rgba(139,92,246,0.03);
}
.bmix-config-header-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  transition: all 0.15s;
}
.bmix-config-header-btn:hover { background: var(--bg-hover); }
.bmix-ch-icon {
  color: var(--primary-light);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139,92,246,0.12);
  border-radius: 6px;
}
.bmix-ch-title { flex: 1; }
.bmix-ch-arrow {
  color: var(--text-tertiary);
  transition: transform 0.2s;
}
.bmix-config-section.open .bmix-ch-arrow {
  transform: rotate(180deg);
  color: var(--primary-light);
}
.bmix-config-content {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: slideDown 0.2s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.bmix-config-row { }
.bmix-config-row label {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  font-weight: 500;
}
.bmix-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bmix-radio {
  padding: 5px 12px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.bmix-radio:hover { color: var(--text-primary); border-color: var(--border-hover); }
.bmix-radio.active {
  color: var(--primary-light);
  border-color: var(--primary);
  background: rgba(139,92,246,0.1);
  font-weight: 500;
}
.bmix-bgm-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.bmix-bgm-name {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
}
.bmix-bgm-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  transition: all 0.15s;
}
.bmix-bgm-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }

.bmix-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bmix-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.bmix-toggle::before {
  content: '';
  width: 28px;
  height: 16px;
  background: var(--text-tertiary);
  border-radius: 8px;
  position: relative;
  opacity: 0.4;
}
.bmix-toggle.on {
  color: var(--primary-light);
  border-color: rgba(139,92,246,0.3);
  background: rgba(139,92,246,0.08);
}
.bmix-toggle.on::before {
  background: var(--primary);
  opacity: 1;
}
.bmix-toggle.on::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  margin-left: -22px;
  margin-top: -6px;
}

.bmix-brand-samples {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.bmix-brand-sample {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: var(--bg-panel);
  border-radius: 6px;
}
.bmix-bs-label {
  font-size: 10px;
  color: var(--text-tertiary);
}
.bmix-bs-logo {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
}
.bmix-bs-wey { color: #60a5fa; }
.bmix-bs-tank { color: #fbbf24; }
.bmix-bs-haval { color: #f87171; }

.bmix-platform-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bmix-plat-chip {
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.bmix-plat-chip.on {
  color: var(--primary-light);
  border-color: var(--primary);
  background: rgba(139,92,246,0.1);
  font-weight: 500;
}
.bmix-ratio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.bmix-ratio-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
  color: var(--text-tertiary);
  transition: all 0.15s;
}
.bmix-ratio-item.on {
  color: var(--primary-light);
  border-color: var(--primary);
  background: rgba(139,92,246,0.08);
}
.bmix-ratio-preview {
  width: 28px;
  height: 28px;
  background: rgba(139,92,246,0.2);
  border: 1.5px solid var(--primary);
  border-radius: 2px;
}
.bmix-ratio-item.on .bmix-ratio-preview {
  background: rgba(139,92,246,0.3);
}
.r-916 { width: 14px; height: 24px; }
.r-169 { width: 28px; height: 16px; }
.r-11 { width: 22px; height: 22px; }
.r-45 { width: 18px; height: 22px; }

.bmix-duration-slider {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bmix-slider-track {
  flex: 1;
  height: 4px;
  background: var(--bg-panel);
  border-radius: 2px;
  position: relative;
}
.bmix-slider-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 2px;
}
.bmix-slider-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: white;
  border: 2px solid var(--primary);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  cursor: pointer;
}
.bmix-duration-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-light);
  font-family: ui-monospace, monospace;
  min-width: 32px;
  text-align: right;
}

/* ====== 底部生成队列 ====== */
.bmix-queue-bar {
  position: fixed;
  bottom: 0;
  left: 260px;
  right: 20px;
  height: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  z-index: 50;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
}
.bmix-queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.bmix-queue-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.bmix-queue-title svg { color: var(--primary-light); }
.bmix-queue-stats {
  display: flex;
  gap: 12px;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--border-color);
}
.bmix-qs-done, .bmix-qs-running, .bmix-qs-queued {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
}
.bmix-qs-done { color: var(--accent-green); }
.bmix-qs-running { color: var(--primary-light); }
.bmix-qs-queued { color: var(--accent-orange); }
.bmix-queue-actions {
  display: flex;
  gap: 8px;
}
.bmix-queue-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  transition: all 0.15s;
}
.bmix-queue-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.bmix-queue-btn-primary {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
}
.bmix-queue-btn-primary:hover {
  box-shadow: 0 4px 14px rgba(139,92,246,0.4);
}

.bmix-queue-scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  scroll-behavior: smooth;
}
.bmix-queue-scroll::-webkit-scrollbar { height: 6px; }
.bmix-queue-scroll::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 3px;
}

.bmix-task-card {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
}
.bmix-task-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.bmix-task-card.status-done {
  border-color: rgba(52,211,153,0.3);
}
.bmix-task-card.status-running {
  border-color: rgba(139,92,246,0.3);
  box-shadow: 0 0 0 1px rgba(139,92,246,0.1);
}
.bmix-task-thumb {
  position: relative;
  height: 90px;
  overflow: hidden;
}
.bmix-task-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bmix-task-status-done,
.bmix-task-status-run,
.bmix-task-status-queued {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.bmix-task-status-done {
  background: var(--accent-green);
}
.bmix-task-status-run {
  background: var(--primary);
  animation: runPulse 1.5s infinite;
}
@keyframes runPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(139,92,246,0); }
}
.bmix-task-status-run svg {
  animation: statusSpin 1s linear infinite;
}
@keyframes statusSpin {
  to { transform: rotate(360deg); }
}
.bmix-task-status-queued {
  background: var(--accent-orange);
}

.bmix-task-info {
  flex: 1;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bmix-task-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bmix-task-meta {
  font-size: 10px;
  color: var(--text-tertiary);
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.bmix-task-platform {
  color: var(--primary-light);
  font-weight: 500;
}
.bmix-task-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.bmix-task-prog-bar {
  height: 4px;
  background: var(--bg-card);
  border-radius: 2px;
  overflow: hidden;
}
.bmix-task-prog-fill {
  height: 100%;
  background: var(--accent-green);
  border-radius: 2px;
  transition: width 0.4s;
}
.status-running .bmix-task-prog-fill {
  background: var(--gradient-primary);
  position: relative;
}
.status-running .bmix-task-prog-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: progShine 1.5s infinite;
}
@keyframes progShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.status-queued .bmix-task-prog-fill {
  background: var(--accent-orange);
}
.bmix-task-prog-text {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
}
.status-done .bmix-task-prog-text { color: var(--accent-green); font-weight: 600; }
.status-running .bmix-task-prog-text { color: var(--primary-light); font-weight: 600; }
.status-queued .bmix-task-prog-text { color: var(--accent-orange); }

.bmix-task-actions {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  border-top: 1px solid var(--border-color);
  justify-content: flex-end;
}
.bmix-task-btn {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  transition: all 0.15s;
}
.bmix-task-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* ====== 6.2 专业时间线 ====== */
.tl-v1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 340px;
  gap: 10px;
  position: relative;
}

/* 顶部 */
.tl-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px 18px;
  flex-shrink: 0;
  height: 50px;
}
.tl-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tl-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.tl-project {
  font-size: 12px;
  color: var(--primary-light);
  background: rgba(139,92,246,0.1);
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 500;
}
.tl-unsaved {
  font-size: 11px;
  color: var(--accent-red);
  font-weight: 500;
}
.tl-topbar-center {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tl-top-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.15s;
}
.tl-top-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.tl-btn-primary {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
  font-weight: 600;
}
.tl-btn-primary:hover { box-shadow: 0 4px 12px rgba(139,92,246,0.4); }
.tl-top-divider {
  width: 1px;
  height: 22px;
  background: var(--border-color);
  margin: 0 6px;
}
.tl-topbar-right { }
.tl-brand-lock-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px;
  background: rgba(139,92,246,0.08);
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: 8px;
}
.tl-bl-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}
.tl-bl-switch {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.tl-bl-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-tertiary);
  border-radius: 50%;
  transition: all 0.2s;
}
.tl-bl-switch.on {
  background: var(--primary);
  border-color: var(--primary);
}
.tl-bl-switch.on .tl-bl-thumb {
  left: 20px;
  background: white;
}

/* 主区布局 */
.tl-main {
  flex: 1;
  display: grid;
  grid-template-columns: 72px 1fr 320px;
  gap: 10px;
  min-height: 0;
}

/* 左侧工具栏 */
.tl-toolbar {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  gap: 6px;
  flex-shrink: 0;
}
.tl-tool-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  align-items: center;
}
.tl-tool-btn {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-secondary);
  transition: all 0.15s;
  background: transparent;
}
.tl-tool-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.tl-tool-btn.tl-ai-tool {
  width: 100%;
  height: 40px;
  flex-direction: row;
  justify-content: flex-start;
  padding: 0 10px;
  font-size: 11px;
  gap: 6px;
}
.tl-tool-divider {
  width: 36px;
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}
.tl-tool-group-title {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 0;
  text-align: center;
  width: 100%;
}
.tl-tool-spacer { flex: 1; }
.tl-ai-oneclick {
  width: 100%;
  height: auto;
  flex-direction: column;
  padding: 10px 6px;
  gap: 4px;
  font-size: 11px;
  background: var(--gradient-primary);
  color: white;
  box-shadow: 0 4px 12px rgba(139,92,246,0.35);
  font-weight: 600;
}
.tl-ai-oneclick:hover {
  box-shadow: 0 6px 18px rgba(139,92,246,0.5);
  transform: translateY(-1px);
  background: var(--gradient-primary);
}

/* 中央预览区 */
.tl-preview-area {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.tl-preview-frame {
  flex: 1;
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 250px;
}
.tl-pv-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}
.tl-pv-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
}
.tl-pv-brand-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 22px;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 2px;
  z-index: 5;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.tl-pv-lock-hide { display: none; }
.tl-pv-lock-icon {
  position: absolute;
  top: 22px;
  left: 90px;
  font-size: 16px;
  z-index: 5;
  opacity: 0.7;
}
.tl-pv-caption {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 24px;
  background: rgba(0,0,0,0.75);
  color: white;
  font-size: 16px;
  font-weight: 500;
  border-radius: 4px;
  z-index: 5;
  max-width: 80%;
  text-align: center;
  backdrop-filter: blur(4px);
}
.tl-pv-timecode {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  font-family: ui-monospace, monospace;
  background: rgba(0,0,0,0.6);
  padding: 3px 10px;
  border-radius: 4px;
  z-index: 5;
}

.tl-preview-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}
.tl-pv-ctrl-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  transition: all 0.15s;
}
.tl-pv-ctrl-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.tl-pv-play {
  width: 44px;
  height: 44px;
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(139,92,246,0.4);
}
.tl-pv-play:hover {
  box-shadow: 0 6px 18px rgba(139,92,246,0.55);
  transform: scale(1.05);
}
.tl-pv-ctrl-divider {
  width: 1px;
  height: 20px;
  background: var(--border-color);
}
.tl-pv-vol-icon { color: var(--text-tertiary); }
.tl-pv-volume { width: 80px; }
.tl-pv-vol-bar {
  height: 4px;
  background: var(--bg-card);
  border-radius: 2px;
  position: relative;
}
.tl-pv-vol-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 2px;
}
.tl-pv-speed {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
}
.tl-pv-speed:hover { color: var(--text-primary); }

/* 右侧属性面板 */
.tl-property-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.tl-prop-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.tl-prop-tab {
  flex: 1;
  padding: 10px;
  font-size: 12px;
  color: var(--text-tertiary);
  background: transparent;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  font-weight: 500;
}
.tl-prop-tab:hover { color: var(--text-secondary); }
.tl-prop-tab.active {
  color: var(--primary-light);
  border-bottom-color: var(--primary);
  font-weight: 600;
  background: rgba(139,92,246,0.05);
}
.tl-prop-section {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}
.tl-prop-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.tl-kf-add-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--primary-light);
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.15s;
}
.tl-kf-add-btn:hover { background: rgba(139,92,246,0.2); }
.tl-prop-subtitle {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}
.tl-prop-row {
  margin-bottom: 12px;
}
.tl-prop-row label {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  font-weight: 500;
}
.tl-prop-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tl-prop-input {
  width: 100%;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-family: inherit;
}
.tl-prop-input:focus { outline: none; border-color: var(--primary); }
.tl-prop-num {
  text-align: right;
  font-family: ui-monospace, monospace;
  font-weight: 600;
  color: var(--primary-light);
}
.tl-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tl-mini-slider {
  flex: 1;
  height: 4px;
  background: var(--bg-panel);
  border-radius: 2px;
  position: relative;
}
.tl-mini-slider-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 2px;
}
.tl-mini-slider-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: white;
  border: 2px solid var(--primary);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}
.tl-slider-row > span:last-child {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: ui-monospace, monospace;
  min-width: 40px;
  text-align: right;
}

/* 关键帧 Tabs */
.tl-kf-tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--bg-panel);
  border-radius: 6px;
  margin-bottom: 12px;
}
.tl-kf-tab {
  flex: 1;
  padding: 5px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: transparent;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.15s;
}
.tl-kf-tab.active {
  background: var(--primary);
  color: white;
}

/* 关键帧列表 */
.tl-kf-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  max-height: 180px;
  overflow-y: auto;
}
.tl-kf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.tl-kf-item:hover { border-color: var(--border-hover); }
.tl-kf-item.active {
  border-color: var(--primary);
  background: rgba(139,92,246,0.08);
}
.tl-kf-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: ui-monospace, monospace;
  flex-shrink: 0;
  width: 56px;
}
.tl-kf-diamond {
  color: var(--primary);
  font-size: 8px;
}
.tl-kf-item.active .tl-kf-diamond {
  color: var(--primary-light);
  filter: drop-shadow(0 0 4px var(--primary));
}
.tl-kf-values {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: var(--text-tertiary);
  min-width: 0;
}
.tl-kf-editor {
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}
.tl-ease-options {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.tl-ease-opt {
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.tl-ease-opt.active {
  color: var(--primary-light);
  border-color: var(--primary);
  background: rgba(139,92,246,0.1);
  font-weight: 500;
}

/* 品牌锁 */
.tl-brand-lock-section {
  border-top: 1px solid var(--border-color);
  padding: 12px 14px;
  flex-shrink: 0;
  background: var(--bg-panel);
}
.tl-bl-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.tl-bl-section-title svg { color: var(--primary-light); }
.tl-bl-count {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.tl-bl-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tl-bl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.2s;
}
.tl-bl-item.locked {
  border-color: rgba(139,92,246,0.3);
  background: rgba(139,92,246,0.08);
}
.tl-bl-item-icon { font-size: 16px; }
.tl-bl-item-info { flex: 1; min-width: 0; }
.tl-bl-item-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}
.tl-bl-item-range {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 1px;
}
.tl-bl-item-lock { font-size: 14px; }

/* ====== 底部时间线 ====== */
.tl-timeline-bar {
  position: fixed;
  bottom: 0;
  left: 260px;
  right: 20px;
  height: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  z-index: 50;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
  overflow: hidden;
}

.tl-tl-header {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.tl-tl-zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 160px;
  flex-shrink: 0;
}
.tl-tl-zoom-btn {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  transition: all 0.15s;
}
.tl-tl-zoom-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.tl-tl-zoom-val {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
  min-width: 40px;
  text-align: center;
}
.tl-tl-zoom-divider {
  width: 1px;
  height: 18px;
  background: var(--border-color);
  margin: 0 4px;
}
.tl-tl-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  transition: all 0.15s;
  white-space: nowrap;
}
.tl-tl-btn:hover { color: var(--primary-light); border-color: var(--primary); }
.tl-tl-ruler-track {
  flex: 1;
  margin-left: 10px;
}

.tl-tl-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tl-tl-track-list {
  flex: 1;
  overflow-y: auto;
}

/* 单轨道 */
.tl-track {
  display: flex;
  min-height: 36px;
  border-bottom: 1px solid var(--border-color);
}
.tl-track.selected {
  background: rgba(139,92,246,0.04);
}
.tl-track-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 160px;
  padding: 0 10px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border-color);
  flex-shrink: 0;
}
.tl-track-color {
  width: 4px;
  height: 20px;
  border-radius: 2px;
  flex-shrink: 0;
}
.tl-track-video .tl-track-color { background: #3b82f6; }
.tl-track-digital .tl-track-color { background: #ec4899; }
.tl-track-audio .tl-track-color { background: #22c55e; }
.tl-track-effect .tl-track-color { background: #f59e0b; }
.tl-track-brandlock .tl-track-color { background: #8b5cf6; }
.tl-track-subtitle .tl-track-color { background: #eab308; }

.tl-track-icon { font-size: 13px; }
.tl-track-name {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-track-lock { font-size: 11px; }
.tl-track-tools {
  display: flex;
  gap: 2px;
  opacity: 0.5;
}
.tl-track:hover .tl-track-tools { opacity: 1; }
.tl-track-eye, .tl-track-lock-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  transition: all 0.15s;
}
.tl-track-eye:hover, .tl-track-lock-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.tl-track-content {
  flex: 1;
  position: relative;
  background:
    linear-gradient(90deg, transparent 49px, rgba(255,255,255,0.02) 50px, transparent 51px),
    var(--bg-card);
  background-size: 50px 100%;
  overflow: hidden;
}

/* Clip */
.tl-clip {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border: 1.5px solid;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  overflow: hidden;
  background: var(--bg-panel);
  min-width: 20px;
}
.tl-clip:hover {
  filter: brightness(1.1);
}
.tl-clip.selected {
  box-shadow: 0 0 0 2px var(--primary), 0 2px 10px rgba(139,92,246,0.3);
  z-index: 2;
}
.tl-clip-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.tl-clip-name {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 10px;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  white-space: nowrap;
  z-index: 2;
}
.tl-clip-dur {
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: 9px;
  color: rgba(255,255,255,0.7);
  font-family: ui-monospace, monospace;
  z-index: 2;
}
.tl-clip-lock-icon {
  position: absolute;
  top: 4px;
  right: 5px;
  font-size: 10px;
  z-index: 2;
}
.tl-clip-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--primary);
  cursor: ew-resize;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.15s;
}
.tl-clip.selected .tl-clip-handle { opacity: 1; }
.tl-clip-handle-l { left: 0; border-radius: 4px 0 0 4px; }
.tl-clip-handle-r { right: 0; border-radius: 0 4px 4px 0; }

.tl-clip-locked {
  opacity: 0.7;
  cursor: not-allowed;
}
.tl-track-locked .tl-track-content {
  background:
    linear-gradient(90deg, transparent 49px, rgba(139,92,246,0.03) 50px, transparent 51px),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 8px,
      rgba(139,92,246,0.02) 8px,
      rgba(139,92,246,0.02) 16px
    ),
    var(--bg-card);
}

/* 音频波形 */
.tl-clip-wave {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.tl-mini-wave {
  display: flex;
  align-items: center;
  gap: 1px;
  width: 100%;
  height: 60%;
}
.tl-mini-wave span {
  flex: 1;
  min-width: 1px;
  border-radius: 1px;
  opacity: 0.7;
}

/* 数字人 clip */
.tl-clip-digital {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-cd-figure {
  width: 20px;
  height: 28px;
  background: linear-gradient(180deg, #d4a574, #8b5cf6);
  border-radius: 10px 10px 4px 4px;
  position: relative;
}
.tl-cd-figure::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: #d4a574;
  border-radius: 50%;
}

/* 特效 clip */
.tl-clip-effect {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fbbf24;
  letter-spacing: 2px;
}

/* 字幕 clip */
.tl-clip-subtitle {
  background: rgba(234,179,8,0.2);
  border-style: solid;
  height: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding: 0 8px;
}
.tl-clip-sub-text {
  font-size: 10px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 播放头 */
.tl-playhead {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--accent-red);
  z-index: 10;
  pointer-events: none;
}
.tl-playhead::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: var(--accent-red);
  border-radius: 50%;
}

/* 标尺 */
.tl-ruler {
  position: relative;
  height: 20px;
  border-left: 1px solid var(--border-color);
}
.tl-ruler-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
}
.tl-ruler-tick::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 1px;
  height: 6px;
  background: var(--text-tertiary);
  opacity: 0.4;
}

/* 字幕轨道语言Tab */
.tl-subtitle-tracks {
  border-top: 2px solid var(--border-color);
}
.tl-sub-lang-bar {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  flex-shrink: 0;
}
.tl-sub-lang {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}
.tl-sub-lang:hover {
  color: var(--text-secondary);
}
.tl-sub-lang.active {
  color: var(--text-primary);
  font-weight: 600;
  background: rgba(139,92,246,0.08);
}
.tl-sub-flag { font-size: 13px; }

/* 响应式调整：当内容过高时滚动 */
.tl-prop-section {
  scrollbar-width: thin;
}

/* ====== 7.1 AI 自动质检 ====== */
.qcv1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 300px;
  gap: 10px;
  position: relative;
}

/* 顶部 */
.qc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 20px;
  flex-shrink: 0;
}
.qc-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.qc-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.qc-project {
  font-size: 12px;
  color: var(--primary-light);
  background: rgba(139,92,246,0.1);
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 500;
}
.qc-level-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.qc-level-low {
  background: rgba(34,197,94,0.12);
  color: var(--accent-green);
  border: 1px solid rgba(34,197,94,0.3);
}
.qc-level-medium {
  background: rgba(245,158,11,0.12);
  color: var(--accent-orange);
  border: 1px solid rgba(245,158,11,0.3);
}
.qc-level-high {
  background: rgba(239,68,68,0.12);
  color: var(--accent-red);
  border: 1px solid rgba(239,68,68,0.3);
}
.qc-level-icon { font-size: 14px; }

.qc-topbar-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qc-total-score {
  display: flex;
  align-items: baseline;
  line-height: 1;
}
.qc-ts-num {
  font-size: 36px;
  font-weight: 900;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.qc-ts-denom {
  font-size: 16px;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-left: 3px;
}
.qc-ts-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 3px;
}

.qc-topbar-right {
  display: flex;
  gap: 8px;
}
.qc-top-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.15s;
}
.qc-top-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.qc-btn-primary {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
  font-weight: 600;
}
.qc-btn-primary:hover {
  box-shadow: 0 4px 14px rgba(139,92,246,0.4);
}

/* 主布局 */
.qc-main {
  flex: 1;
  display: grid;
  grid-template-columns: 320px 1fr 300px;
  gap: 10px;
  min-height: 0;
}

.qc-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.qc-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.qc-panel-title svg { color: var(--primary-light); }

/* 左：雷达图 */
.qc-radar-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
}
.qc-radar-score {
  font-size: 11px;
  color: var(--primary-light);
  font-weight: 600;
  background: rgba(139,92,246,0.1);
  padding: 2px 8px;
  border-radius: 6px;
}
.qc-radar-chart {
  width: 100%;
  height: 260px;
  flex-shrink: 0;
}
.qc-legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 10px 14px;
  flex-shrink: 0;
}
.qc-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 11px;
}
.qc-legend-item:hover {
  background: var(--bg-hover);
}
.qc-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.qc-legend-name {
  flex: 1;
  color: var(--text-secondary);
}
.qc-legend-score {
  font-weight: 700;
  color: var(--text-primary);
  font-family: ui-monospace, monospace;
}
.qc-radar-footer {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.qc-stat-chip {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.qc-stat-num {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  min-width: 18px;
  text-align: left;
}
.qc-stat-red { color: var(--accent-red); }
.qc-stat-yellow { color: var(--accent-orange); }
.qc-stat-green { color: var(--accent-green); }
.qc-stat-label {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 3px;
}

/* 中：预览 + 风险色块 */
.qc-preview-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.qc-risk-filters {
  display: flex;
  gap: 4px;
}
.qc-rf-chip {
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
}
.qc-rf-chip:hover { color: var(--text-secondary); }
.qc-rf-chip.active {
  color: var(--text-primary);
  background: var(--bg-hover);
  border-color: var(--border-hover);
}
.qc-rf-high.active { color: var(--accent-red); border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.1); }
.qc-rf-medium.active { color: var(--accent-orange); border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.1); }
.qc-rf-low.active { color: var(--accent-green); border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.1); }

.qc-preview-frame {
  flex: 1;
  position: relative;
  background: #000;
  overflow: hidden;
  min-height: 250px;
}
.qc-pv-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
}
.qc-pv-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
}
.qc-pv-brand {
  position: absolute;
  top: 18px;
  left: 20px;
  font-size: 20px;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 2px;
  z-index: 5;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.qc-pv-caption {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 20px;
  background: rgba(0,0,0,0.75);
  color: white;
  font-size: 15px;
  font-weight: 500;
  border-radius: 4px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  direction: rtl;
  backdrop-filter: blur(4px);
}
.qc-pv-caption-risk {
  font-size: 14px;
  animation: riskBlink 1.5s infinite;
}
@keyframes riskBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.qc-pv-time {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-size: 12px;
  color: white;
  font-family: ui-monospace, monospace;
  background: rgba(0,0,0,0.6);
  padding: 3px 10px;
  border-radius: 4px;
  z-index: 5;
  font-weight: 600;
}

/* 风险色块覆盖层 */
.qc-risk-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.qc-risk-block {
  position: absolute;
  border: 2px solid;
  border-radius: 4px;
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
}
.qc-risk-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0.15;
}
.qc-risk-high {
  border-color: var(--accent-red);
  color: var(--accent-red);
  box-shadow: 0 0 0 1px rgba(239,68,68,0.3), inset 0 0 20px rgba(239,68,68,0.1);
  animation: riskPulseRed 2s infinite;
}
@keyframes riskPulseRed {
  0%, 100% { box-shadow: 0 0 0 1px rgba(239,68,68,0.3), inset 0 0 20px rgba(239,68,68,0.1); }
  50% { box-shadow: 0 0 0 4px rgba(239,68,68,0.2), inset 0 0 30px rgba(239,68,68,0.2); }
}
.qc-risk-medium {
  border-color: var(--accent-orange);
  color: var(--accent-orange);
  box-shadow: 0 0 0 1px rgba(245,158,11,0.2), inset 0 0 15px rgba(245,158,11,0.1);
}
.qc-risk-low {
  border-color: var(--accent-green);
  color: var(--accent-green);
  opacity: 0.5;
}
.qc-risk-block:hover {
  filter: brightness(1.2);
  transform: scale(1.01);
}
.qc-risk-block.active {
  filter: brightness(1.3);
  z-index: 10;
}
.qc-risk-high.active {
  box-shadow: 0 0 0 3px rgba(239,68,68,0.4), inset 0 0 30px rgba(239,68,68,0.25);
}
.qc-rb-badge {
  position: absolute;
  top: -20px;
  left: -2px;
  padding: 1px 6px;
  background: currentColor;
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  white-space: nowrap;
}

/* 选中风险卡片 */
.qc-active-risk-card {
  padding: 14px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
  border-left: 4px solid;
}
.qc-risk-card-high { border-left-color: var(--accent-red); background: rgba(239,68,68,0.06); }
.qc-risk-card-medium { border-left-color: var(--accent-orange); background: rgba(245,158,11,0.06); }
.qc-risk-card-low { border-left-color: var(--accent-green); background: rgba(34,197,94,0.06); }
.qc-arc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.qc-arc-level {
  font-size: 12px;
  font-weight: 700;
}
.qc-arc-time {
  font-size: 12px;
  font-family: ui-monospace, monospace;
  color: var(--text-secondary);
  font-weight: 600;
}
.qc-arc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.qc-arc-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}
.qc-arc-category {
  font-size: 11px;
  color: var(--text-tertiary);
}
.qc-arc-cat-label { }
.qc-arc-cat-val {
  color: var(--primary-light);
  font-weight: 600;
}

/* 右：修复建议 */
.qc-repair-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.qc-repair-count {
  font-size: 11px;
  color: var(--primary-light);
  font-weight: 600;
  background: rgba(139,92,246,0.12);
  padding: 2px 10px;
  border-radius: 12px;
}
.qc-repair-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qc-repair-item {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  transition: all 0.15s;
}
.qc-repair-item:hover {
  border-color: var(--border-hover);
}
.qc-ri-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.qc-ri-index {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.qc-ri-time {
  font-size: 11px;
  font-family: ui-monospace, monospace;
  color: var(--text-tertiary);
  font-weight: 600;
}
.qc-ri-level {
  margin-left: auto;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.qc-ri-high { background: rgba(239,68,68,0.15); color: var(--accent-red); }
.qc-ri-medium { background: rgba(245,158,11,0.15); color: var(--accent-orange); }
.qc-ri-low { background: rgba(34,197,94,0.15); color: var(--accent-green); }
.qc-ri-type {
  font-size: 11px;
  color: var(--primary-light);
  font-weight: 600;
  margin-bottom: 8px;
}
.qc-ri-before, .qc-ri-after {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bg-card);
}
.qc-ri-before { border-left: 3px solid var(--accent-red); }
.qc-ri-after { border-left: 3px solid var(--accent-green); }
.qc-ri-label {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 600;
  flex-shrink: 0;
  width: 28px;
  padding-top: 1px;
}
.qc-ri-text {
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.4;
  flex: 1;
}
.qc-ri-text-bad { color: var(--accent-red); text-decoration: line-through; text-decoration-color: rgba(239,68,68,0.5); }
.qc-ri-text-good { color: var(--accent-green); font-weight: 500; }
.qc-ri-arrow {
  display: flex;
  justify-content: center;
  color: var(--primary-light);
  margin: 4px 0;
}
.qc-ri-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.qc-ri-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.15s;
  font-weight: 500;
}
.qc-ri-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.qc-ri-apply {
  color: white;
  background: var(--gradient-primary);
  border-color: transparent;
}
.qc-ri-apply:hover {
  box-shadow: 0 2px 8px rgba(139,92,246,0.35);
}

.qc-repair-footer {
  padding: 12px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.qc-oneclick-repair {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: var(--gradient-primary);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(139,92,246,0.35);
  transition: all 0.2s;
  margin-bottom: 10px;
}
.qc-oneclick-repair:hover {
  box-shadow: 0 6px 20px rgba(139,92,246,0.5);
  transform: translateY(-1px);
}
.qc-jump-links {
  display: flex;
  gap: 8px;
}
.qc-jump-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.15s;
  font-weight: 500;
}
.qc-jump-link:hover {
  color: var(--primary-light);
  border-color: var(--primary);
}

/* ====== 底部批注时间线 ====== */
.qc-timeline-bar {
  position: fixed;
  bottom: 0;
  left: 260px;
  right: 20px;
  height: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  z-index: 50;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
  overflow: hidden;
}
.qc-tl-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.qc-tl-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.qc-tl-title svg { color: var(--primary-light); }
.qc-tl-count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--border-color);
}
.qc-tl-actions {
  display: flex;
  gap: 6px;
}
.qc-tl-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.15s;
  font-weight: 500;
}
.qc-tl-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.qc-tl-btn-primary {
  color: var(--primary-light);
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.3);
}
.qc-tl-btn-primary:hover { background: rgba(139,92,246,0.2); }

/* 时间轴可视化 */
.qc-tl-track {
  padding: 10px 18px 0;
  flex-shrink: 0;
}
.qc-tl-ruler {
  position: relative;
  height: 18px;
  border-left: 1px solid var(--border-color);
  margin-left: 60px;
}
.qc-tl-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
}
.qc-tl-tick::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 1px;
  height: 5px;
  background: var(--text-tertiary);
  opacity: 0.3;
}
.qc-tl-risk-row {
  position: relative;
  height: 30px;
  margin-left: 60px;
  margin-top: 4px;
  background: linear-gradient(90deg, transparent 49px, rgba(255,255,255,0.02) 50px, transparent 51px);
  background-size: 50px 100%;
  border-bottom: 1px solid var(--border-color);
}
.qc-tl-marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  cursor: pointer;
  transition: all 0.15s;
}
.qc-tl-mk-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  margin: 0 auto;
}
.qc-tl-high .qc-tl-mk-dot { background: var(--accent-red); }
.qc-tl-medium .qc-tl-mk-dot { background: var(--accent-orange); }
.qc-tl-low .qc-tl-mk-dot { background: var(--accent-green); }
.qc-tl-mk-label {
  font-size: 9px;
  color: var(--text-tertiary);
  text-align: center;
  margin-top: 2px;
  font-family: ui-monospace, monospace;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.qc-tl-marker:hover .qc-tl-mk-label,
.qc-tl-marker.active .qc-tl-mk-label {
  opacity: 1;
}
.qc-tl-marker.active .qc-tl-mk-dot {
  transform: scale(1.3);
  box-shadow: 0 0 0 4px rgba(139,92,246,0.25);
}
.qc-tl-playhead {
  position: absolute;
  top: -6px;
  bottom: -2px;
  width: 2px;
  background: var(--accent-red);
  pointer-events: none;
}
.qc-tl-playhead::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: var(--accent-red);
  border-radius: 50%;
}

/* 批注卡片列表 */
.qc-tl-annotations {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
}
.qc-ann-card {
  flex-shrink: 0;
  width: 240px;
  display: flex;
  gap: 10px;
  padding: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.qc-ann-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.qc-ann-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(139,92,246,0.15);
}
.qc-ann-high { border-left: 3px solid var(--accent-red); }
.qc-ann-medium { border-left: 3px solid var(--accent-orange); }
.qc-ann-low { border-left: 3px solid var(--accent-green); }

.qc-ann-time-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 50px;
}
.qc-ann-time {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: ui-monospace, monospace;
}
.qc-ann-time-line {
  flex: 1;
  width: 2px;
  background: var(--border-color);
  margin-top: 6px;
}
.qc-ann-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qc-ann-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.qc-ann-level-badge {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.qc-al-high { background: rgba(239,68,68,0.15); color: var(--accent-red); }
.qc-al-medium { background: rgba(245,158,11,0.15); color: var(--accent-orange); }
.qc-al-low { background: rgba(34,197,94,0.15); color: var(--accent-green); }
.qc-ann-category {
  font-size: 10px;
  color: var(--text-tertiary);
}
.qc-ann-status {
  margin-left: auto;
  font-size: 10px;
  color: var(--accent-green);
  font-weight: 500;
}
.qc-ann-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}
.qc-ann-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qc-ann-suggestion {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(139,92,246,0.06);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.qc-as-icon { flex-shrink: 0; }

/* ====== 7.2 合规规则库 ====== */
.rlv1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  position: relative;
}

/* 顶部区域切换器 */
.rl-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 16px;
  flex-shrink: 0;
  gap: 16px;
}
.rl-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.rl-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.rl-total-badge {
  font-size: 11px;
  color: var(--primary-light);
  background: rgba(139,92,246,0.1);
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 500;
}
.rl-region-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: center;
}
.rl-rs-label {
  font-size: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.rl-rs-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-panel);
  border-radius: 10px;
  border: 1px solid var(--border-color);
}
.rl-rs-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-tertiary);
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
  white-space: nowrap;
}
.rl-rs-tab:hover { color: var(--text-secondary); }
.rl-rs-tab.active {
  background: var(--gradient-primary);
  color: white;
  box-shadow: 0 2px 8px rgba(139,92,246,0.3);
}
.rl-rs-flag { font-size: 15px; }
.rl-rs-code {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 2px;
}
.rl-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.rl-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  width: 220px;
  transition: all 0.15s;
}
.rl-search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
}
.rl-search-box svg { color: var(--text-tertiary); flex-shrink: 0; }
.rl-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 12px;
  color: var(--text-primary);
  font-family: inherit;
}
.rl-search-input::placeholder { color: var(--text-tertiary); }
.rl-top-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  transition: all 0.15s;
  font-weight: 500;
}
.rl-top-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.rl-btn-primary {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
  font-weight: 600;
}
.rl-btn-primary:hover { box-shadow: 0 4px 14px rgba(139,92,246,0.4); }

/* 主布局 */
.rl-main {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr 340px;
  gap: 10px;
  min-height: 0;
}

/* 左：规则树 */
.rl-tree-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rl-tree-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.rl-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.rl-tree-expand {
  font-size: 11px;
  color: var(--primary-light);
  cursor: pointer;
  font-weight: 500;
}
.rl-tree-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.rl-tree-cat {
  margin-bottom: 2px;
}
.rl-tree-cat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 600;
}
.rl-tree-cat-head:hover { background: var(--bg-hover); }
.rl-tc-arrow {
  color: var(--text-tertiary);
  transition: transform 0.15s;
  width: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rl-tree-cat-head.open .rl-tc-arrow {
  transform: rotate(90deg);
  color: var(--primary-light);
}
.rl-tc-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-light);
  background: rgba(139,92,246,0.1);
  border-radius: 6px;
}
.rl-tc-name { flex: 1; }
.rl-tc-count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
  background: var(--bg-panel);
  padding: 1px 7px;
  border-radius: 10px;
}
.rl-tree-children {
  padding-left: 32px;
  margin-top: 2px;
}
.rl-tree-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 11px;
  color: var(--text-secondary);
}
.rl-tree-sub:hover { background: var(--bg-hover); color: var(--text-primary); }
.rl-tree-sub.active {
  background: rgba(139,92,246,0.1);
  color: var(--primary-light);
  font-weight: 600;
}
.rl-ts-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-tertiary);
  flex-shrink: 0;
}
.rl-tree-sub.active .rl-ts-dot { background: var(--primary); }
.rl-ts-name { flex: 1; }
.rl-ts-count {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
}

/* 中间面板 */
.rl-center-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
}

/* 对比矩阵 */
.rl-matrix-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.rl-matrix-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}
.rl-matrix-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.rl-matrix-title svg { color: var(--primary-light); }
.rl-matrix-legend {
  display: flex;
  gap: 12px;
}
.rl-mat-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.rl-mat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.rl-mat-strict { background: var(--accent-red); }
.rl-mat-moderate { background: var(--accent-orange); }
.rl-mat-lenient { background: var(--accent-green); }

.rl-matrix-table {
  padding: 14px 16px;
}
.rl-mat-row {
  display: grid;
  grid-template-columns: 110px repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.rl-mat-row:last-child { margin-bottom: 0; }
.rl-mat-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  border-radius: 6px;
  font-size: 11px;
  transition: all 0.15s;
}
.rl-mat-head .rl-mat-cell {
  font-weight: 700;
  padding: 10px 6px;
}
.rl-mat-corner {
  background: transparent;
  color: var(--text-tertiary);
  justify-content: flex-start;
  padding-left: 0;
}
.rl-mat-region {
  flex-direction: column;
  gap: 3px;
  background: var(--bg-panel);
  color: var(--text-primary);
}
.rl-mat-region.active {
  background: rgba(139,92,246,0.12);
  box-shadow: 0 0 0 2px var(--primary);
}
.rl-mat-flag { font-size: 16px; }
.rl-mat-rname { font-size: 11px; }
.rl-mat-dim {
  background: var(--bg-panel);
  color: var(--text-primary);
  justify-content: flex-start;
  padding-left: 12px;
  font-weight: 600;
}
.rl-mat-level {
  gap: 6px;
  flex-direction: column;
  padding: 10px 6px;
}
.rl-mat-indicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: all 0.2s;
}
.rl-mat-strict .rl-mat-indicator {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
}
.rl-mat-moderate .rl-mat-indicator {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}
.rl-mat-lenient .rl-mat-indicator {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.15);
}
.rl-mat-level-text {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.rl-mat-level.active {
  transform: scale(1.08);
}

/* 规则列表区 */
.rl-rule-list-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.rl-rl-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.rl-rl-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rl-rl-count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-left: 4px;
  padding-left: 10px;
  border-left: 1px solid var(--border-color);
}
.rl-rl-filters {
  display: flex;
  gap: 4px;
}
.rl-rf-chip {
  padding: 4px 12px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
}
.rl-rf-chip:hover { color: var(--text-secondary); }
.rl-rf-chip.active {
  color: var(--text-primary);
  background: var(--bg-hover);
  border-color: var(--border-hover);
}
.rl-rf-high.active { color: var(--accent-red); border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.1); }
.rl-rf-medium.active { color: var(--accent-orange); border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.1); }
.rl-rf-low.active { color: var(--accent-green); border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.1); }

.rl-rule-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rl-rule-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  border-left: 3px solid var(--border-color);
}
.rl-rule-card:hover {
  border-color: var(--border-hover);
  transform: translateX(3px);
}
.rl-rule-card.active {
  border-color: var(--primary);
  border-left-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(139,92,246,0.12);
  background: rgba(139,92,246,0.04);
}
.rl-rule-high { border-left-color: var(--accent-red); }
.rl-rule-medium { border-left-color: var(--accent-orange); }
.rl-rule-low { border-left-color: var(--accent-green); }
.rl-rc-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.rl-rc-level-badge {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}
.rl-rc-lvl-high { background: linear-gradient(135deg, #ef4444, #dc2626); }
.rl-rc-lvl-medium { background: linear-gradient(135deg, #f59e0b, #d97706); }
.rl-rc-lvl-low { background: linear-gradient(135deg, #22c55e, #16a34a); }
.rl-rc-info {
  flex: 1;
  min-width: 0;
}
.rl-rc-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rl-rc-meta {
  display: flex;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.rl-rc-cat { color: var(--primary-light); font-weight: 500; }
.rl-rc-right {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.rl-rc-status {
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-tertiary);
}
.rl-rc-status.on { color: var(--accent-green); }
.rl-rc-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
}
.rl-rc-status.on::before {
  background: var(--accent-green);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.15);
}

/* 右：规则详情抽屉 */
.rl-detail-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.rl-detail-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  background: var(--bg-panel);
}
.rl-dh-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.rl-dh-level {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
}
.rl-dh-high { background: rgba(239,68,68,0.15); color: var(--accent-red); }
.rl-dh-medium { background: rgba(245,158,11,0.15); color: var(--accent-orange); }
.rl-dh-low { background: rgba(34,197,94,0.15); color: var(--accent-green); }
.rl-dh-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.rl-dh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
}
.rl-dh-dot.on {
  background: var(--accent-green);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
}
.rl-dh-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.3;
}
.rl-dh-meta {
  display: flex;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}

.rl-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rl-dsection { }
.rl-dsection-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rl-dsection-hint {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0;
}
.rl-dsection-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.rl-dtrigger-box,
.rl-daction-box,
.rl-case-box {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: var(--bg-panel);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
}
.rl-daction-box { border-left-color: var(--accent-green); }
.rl-case-box { border-left-color: var(--accent-cyan); }
.rl-dt-icon, .rl-da-icon, .rl-case-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.rl-dt-text, .rl-da-text, .rl-case-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.rl-dkeywords {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
}
.rl-dk-label {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  font-weight: 500;
}
.rl-dk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.rl-dk-tag {
  padding: 3px 10px;
  font-size: 11px;
  color: var(--accent-red);
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 4px;
  font-weight: 500;
  font-family: ui-monospace, monospace;
}

/* 阈值 */
.rl-threshold-row {
  display: flex;
  gap: 16px;
  align-items: center;
}
.rl-thresh-slider {
  flex: 1;
}
.rl-thresh-track {
  height: 6px;
  background: var(--bg-panel);
  border-radius: 3px;
  position: relative;
}
.rl-thresh-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 3px;
}
.rl-thresh-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: white;
  border: 2px solid var(--primary);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  cursor: pointer;
}
.rl-thresh-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-tertiary);
}
.rl-thresh-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.rl-tv-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary-light);
  font-family: ui-monospace, monospace;
  line-height: 1;
}
.rl-tv-label {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 3px;
}

/* 底部操作 */
.rl-detail-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.rl-df-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 7px;
  transition: all 0.15s;
}
.rl-df-secondary {
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}
.rl-df-secondary:hover { color: var(--text-primary); border-color: var(--border-hover); }
.rl-df-primary {
  flex: 1.5;
  background: var(--gradient-primary);
  color: white;
  border: 1px solid transparent;
  box-shadow: 0 4px 12px rgba(139,92,246,0.35);
}
.rl-df-primary:hover { box-shadow: 0 6px 16px rgba(139,92,246,0.5); }

/* ====== 8.1 审核任务列表 ====== */
.rv1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 12px;
  position: relative;
}

/* 顶部筛选条 */
.rv-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 18px;
  flex-shrink: 0;
  gap: 16px;
}
.rv-fb-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.rv-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.rv-pending-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 16px;
  font-size: 12px;
  color: var(--accent-orange);
  font-weight: 500;
}
.rv-pb-num {
  font-weight: 800;
  font-size: 14px;
  font-family: ui-monospace, monospace;
}
.rv-fb-filters {
  display: flex;
  gap: 8px;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}
.rv-fb-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.rv-view-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--text-tertiary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  transition: all 0.15s;
}
.rv-view-btn:hover { color: var(--text-secondary); border-color: var(--border-hover); }
.rv-view-btn.active {
  color: var(--primary-light);
  border-color: var(--primary);
  background: rgba(139,92,246,0.1);
}

/* 看板主体 */
.rv-kanban-board {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.rv-column {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.rv-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.rv-col-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rv-col-icon {
  display: flex;
  align-items: center;
}
.rv-col-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.rv-col-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 1px 8px;
  border-radius: 10px;
  font-family: ui-monospace, monospace;
}
.rv-col-urgent {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-red);
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  padding: 2px 8px;
  border-radius: 10px;
}

.rv-col-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-content: flex-start;
}

/* 空列 */
.rv-col-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  color: var(--text-tertiary);
}
.rv-ce-icon { font-size: 32px; margin-bottom: 8px; }
.rv-ce-text { font-size: 12px; }

/* 卡片 */
.rv-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 4px solid;
  position: relative;
  flex-shrink: 0;
}
.rv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  border-color: var(--border-hover);
}

.rv-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px 8px;
}
.rv-priority-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.rv-risk-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 8px;
  font-family: ui-monospace, monospace;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.rv-card-thumb {
  position: relative;
  margin: 0 12px;
  height: 90px;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}
.rv-ct-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}
.rv-ct-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.4) 100%);
}
.rv-ct-duration {
  position: absolute;
  bottom: 5px;
  right: 6px;
  font-size: 10px;
  font-weight: 600;
  color: white;
  background: rgba(0,0,0,0.6);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
}

.rv-card-body {
  padding: 10px 12px;
}
.rv-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rv-card-meta {
  display: flex;
  gap: 5px;
  font-size: 10px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.rv-cm-brand {
  color: var(--primary-light);
  font-weight: 600;
}
.rv-card-risks, .rv-card-safe {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 5px;
}
.rv-card-risks {
  background: rgba(239,68,68,0.08);
  color: var(--accent-red);
  font-weight: 500;
}
.rv-card-safe {
  background: rgba(34,197,94,0.08);
  color: var(--accent-green);
  font-weight: 500;
}
.rv-cr-icon, .rv-cs-icon { font-size: 12px; }

.rv-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--border-color);
}
.rv-cf-submitter {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rv-cf-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rv-cf-info { min-width: 0; }
.rv-cf-name {
  font-size: 11px;
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
.rv-cf-time {
  font-size: 10px;
  color: var(--text-tertiary);
}
.rv-cf-wait {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* Hover 快捷操作 */
.rv-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.2s;
  z-index: 5;
}
.rv-card:hover .rv-card-actions {
  opacity: 1;
  transform: translateY(0);
}
.rv-ca-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.rv-ca-pass { background: linear-gradient(135deg, #22c55e, #16a34a); }
.rv-ca-pass:hover { transform: scale(1.1); box-shadow: 0 4px 10px rgba(34,197,94,0.4); }
.rv-ca-reject { background: linear-gradient(135deg, #ef4444, #dc2626); }
.rv-ca-reject:hover { transform: scale(1.1); box-shadow: 0 4px 10px rgba(239,68,68,0.4); }
.rv-ca-transfer { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.rv-ca-transfer:hover { transform: scale(1.1); box-shadow: 0 4px 10px rgba(59,130,246,0.4); }

/* =========================================================
   8.1 审核任务列表 · 高效列表视图（2026-08-26）
   现实场景：审核员每天处理几十+条视频，4列大卡片布局效率低
   重构为：状态 tab 切换 + 紧凑表格（30+ 条/屏）+ 批量操作
   ========================================================= */

/* 顶部 header：标题 + 状态 tab */
.rv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 18px;
}
.rv-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.rv-total-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(167,139,250,0.1);
  border: 1px solid rgba(167,139,250,0.25);
  border-radius: 6px;
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 500;
}
.rv-status-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.rv-status-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.rv-status-tab:hover {
  background: rgba(167,139,250,0.06);
  border-color: rgba(167,139,250,0.3);
  color: var(--text-primary);
}
.rv-status-tab.active {
  background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(34,211,238,0.12));
  border-color: var(--tab-accent, #a78bfa);
  color: #fff;
  box-shadow: 0 2px 8px rgba(167,139,250,0.2);
}
.rv-status-tab.active .rv-st-count {
  background: var(--tab-accent, #a78bfa);
  color: #fff;
  border-color: transparent;
}
.rv-st-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}

/* 顶部筛选条：左筛选 + 右排序视图切换（去掉 rv-fb-left 标题）*/
.rv-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 18px;
  gap: 16px;
}

/* 筛选条中的小圆点（优先级筛选） */
.rv-fs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  color: #f59e0b;
}

/* 批量操作栏（选中项 > 0 时显示） */
.rv-batch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(167,139,250,0.12), rgba(34,211,238,0.08));
  border: 1px solid rgba(167,139,250,0.4);
  border-radius: 10px;
  padding: 8px 16px;
  animation: rvBatchSlideIn .25s ease;
}
@keyframes rvBatchSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.rv-bb-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rv-bb-count {
  font-size: 13px;
  color: #e8ecf5;
  font-weight: 500;
}
.rv-bb-count b {
  color: #a78bfa;
  font-weight: 700;
  font-size: 15px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  margin: 0 2px;
}
.rv-bb-clear {
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-tertiary);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.rv-bb-clear:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}
.rv-bb-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rv-bb-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  border: 1px solid transparent;
}
.rv-bb-pass {
  background: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(22,163,74,0.22));
  color: #4ade80;
  border-color: rgba(34,197,94,0.4);
}
.rv-bb-pass:hover {
  background: linear-gradient(135deg, rgba(34,197,94,0.35), rgba(22,163,74,0.35));
  box-shadow: 0 3px 10px rgba(34,197,94,0.3);
}
.rv-bb-reject {
  background: linear-gradient(135deg, rgba(239,68,68,0.22), rgba(220,38,38,0.22));
  color: #f87171;
  border-color: rgba(239,68,68,0.4);
}
.rv-bb-reject:hover {
  background: linear-gradient(135deg, rgba(239,68,68,0.35), rgba(220,38,38,0.35));
  box-shadow: 0 3px 10px rgba(239,68,68,0.3);
}
.rv-bb-transfer {
  background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(37,99,235,0.22));
  color: #60a5fa;
  border-color: rgba(59,130,246,0.4);
}
.rv-bb-transfer:hover {
  background: linear-gradient(135deg, rgba(59,130,246,0.35), rgba(37,99,235,0.35));
  box-shadow: 0 3px 10px rgba(59,130,246,0.3);
}

/* ====== 列表视图（表格）====== */
.rv-list-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}
.rv-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.rv-list-table thead {
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border-color);
}
.rv-list-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
/* 列宽 */
.rv-list-th-check { width: 44px; }
.rv-list-th-thumb { width: 88px; }
.rv-list-th-title { width: auto; }
.rv-list-th-region { width: 130px; }
.rv-list-th-pri { width: 70px; }
.rv-list-th-risk { width: 70px; }
.rv-list-th-status { width: 90px; }
.rv-list-th-sub { width: 150px; }
.rv-list-th-op { width: 160px; }

.rv-list-row {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background .12s;
}
.rv-list-row:hover {
  background: rgba(167,139,250,0.04);
}
.rv-list-row.selected {
  background: rgba(167,139,250,0.08);
}
.rv-list-row td {
  padding: 10px 12px;
  vertical-align: middle;
  color: var(--text-secondary);
}

/* 复选框 */
.rv-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.rv-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.rv-cb-box {
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(167,139,250,0.4);
  border-radius: 4px;
  background: rgba(255,255,255,0.02);
  position: relative;
  transition: all .15s;
  flex-shrink: 0;
}
.rv-checkbox input:checked + .rv-cb-box {
  background: linear-gradient(135deg, #a78bfa, #22d3ee);
  border-color: transparent;
}
.rv-checkbox input:checked + .rv-cb-box::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.rv-cb-box.indeterminate {
  background: linear-gradient(135deg, #a78bfa, #22d3ee);
  border-color: transparent;
}
.rv-cb-box.indeterminate::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  width: 8px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}
.rv-checkbox:hover .rv-cb-box {
  border-color: rgba(167,139,250,0.7);
}

/* 缩略图（小，80x45 比例 16:9） */
.rv-list-thumb {
  position: relative;
  width: 80px;
  height: 45px;
  border-radius: 5px;
  overflow: hidden;
  background: #0a0f1a;
  flex-shrink: 0;
}
.rv-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rv-list-thumb-dur {
  position: absolute;
  bottom: 2px;
  right: 2px;
  padding: 1px 5px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 9.5px;
  border-radius: 3px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 500;
  line-height: 1.3;
}

/* 标题行 */
.rv-list-title-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}
.rv-list-title {
  font-size: 13px;
  font-weight: 600;
  color: #e8ecf5;
  line-height: 1.3;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.rv-list-title:hover {
  color: #a78bfa;
}
.rv-list-subtitle {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.3;
}

/* 区域·语言 */
.rv-list-td-region {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rv-list-region {
  font-size: 12.5px;
  color: var(--text-primary);
  font-weight: 500;
}
.rv-list-lang {
  font-size: 10.5px;
  color: var(--text-tertiary);
}

/* 优先级 chip */
.rv-list-pri {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* AI 风险分 */
.rv-list-risk {
  font-size: 16px;
  font-weight: 700;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  line-height: 1;
}

/* 预审状态 */
.rv-list-risks {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  color: #f87171;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.rv-list-safe {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.3);
  color: #4ade80;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* 提交人/等待 */
.rv-list-sub-name {
  font-size: 12.5px;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 2px;
}
.rv-list-sub-wait {
  font-size: 10.5px;
  color: var(--text-tertiary);
  line-height: 1.3;
}

/* 操作按钮组 */
.rv-list-op {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.rv-op-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.02);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
  font-size: 11px;
  font-family: inherit;
  font-weight: 500;
  padding: 0;
  gap: 2px;
}
.rv-op-btn:hover {
  background: rgba(167,139,250,0.1);
  border-color: var(--border-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}
.rv-op-pass:hover {
  background: linear-gradient(135deg, rgba(34,197,94,0.25), rgba(22,163,74,0.25));
  border-color: rgba(34,197,94,0.5);
  color: #4ade80;
  box-shadow: 0 2px 8px rgba(34,197,94,0.25);
}
.rv-op-reject:hover {
  background: linear-gradient(135deg, rgba(239,68,68,0.25), rgba(220,38,38,0.25));
  border-color: rgba(239,68,68,0.5);
  color: #f87171;
  box-shadow: 0 2px 8px rgba(239,68,68,0.25);
}
.rv-op-transfer:hover {
  background: linear-gradient(135deg, rgba(59,130,246,0.25), rgba(37,99,235,0.25));
  border-color: rgba(59,130,246,0.5);
  color: #60a5fa;
  box-shadow: 0 2px 8px rgba(59,130,246,0.25);
}
.rv-op-view {
  width: auto;
  padding: 0 8px;
}

/* 列表底部 */
.rv-list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-tertiary);
}
.rv-list-footer b {
  color: var(--text-primary);
  font-weight: 700;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  margin: 0 2px;
}
.rv-lf-tip {
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* 空状态 */
.rv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  gap: 12px;
}
.rv-empty-icon {
  font-size: 40px;
  opacity: 0.6;
}
.rv-empty-text {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ====== 8.2 审核详情 ====== */
.rdv1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 310px;
  gap: 10px;
  position: relative;
}

/* 顶部操作栏 */
.rd-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 18px;
  flex-shrink: 0;
}
.rd-top-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rd-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  transition: all 0.15s;
  font-weight: 500;
}
.rd-back-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.rd-title-wrap { }
.rd-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.rd-title-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.rd-tm-badge {
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.rd-tm-reviewing {
  background: rgba(59,130,246,0.12);
  color: #3b82f6;
  border: 1px solid rgba(59,130,246,0.3);
}

.rd-top-right {
  display: flex;
  gap: 8px;
}
.rd-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.15s;
}
.rd-btn-transfer {
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
}
.rd-btn-transfer:hover { color: var(--text-primary); border-color: var(--border-hover); }
.rd-btn-reject {
  color: white;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 3px 10px rgba(239,68,68,0.3);
}
.rd-btn-reject:hover { box-shadow: 0 5px 16px rgba(239,68,68,0.45); transform: translateY(-1px); }
.rd-btn-approve {
  color: white;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 3px 10px rgba(34,197,94,0.3);
}
.rd-btn-approve:hover { box-shadow: 0 5px 16px rgba(34,197,94,0.45); transform: translateY(-1px); }

/* 主体 */
.rd-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 10px;
  min-height: 0;
}

/* 左列：视频 */
.rd-video-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.rd-video-frame {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  flex: 1;
  min-height: 280px;
  border: 1px solid var(--border-color);
}
.rd-vf-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}
.rd-vf-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);
}
.rd-vf-brand {
  position: absolute;
  top: 20px;
  left: 24px;
  font-size: 24px;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 3px;
  z-index: 5;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.rd-vf-caption {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 24px;
  background: rgba(0,0,0,0.8);
  color: white;
  font-size: 18px;
  font-weight: 600;
  border-radius: 6px;
  z-index: 5;
  backdrop-filter: blur(6px);
  text-align: center;
  max-width: 80%;
}

/* 批注圈选层 */
.rd-annotation-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.rd-ann-rect {
  position: absolute;
  border: 2px solid #a855f7;
  border-radius: 4px;
  pointer-events: auto;
  cursor: pointer;
  background: rgba(168,85,247,0.12);
  box-shadow: 0 0 0 1px rgba(168,85,247,0.3), inset 0 0 20px rgba(168,85,247,0.1);
  transition: all 0.2s;
}
.rd-ann-rect::before {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px dashed rgba(168,85,247,0.5);
  border-radius: 6px;
}
.rd-ann-rect:hover {
  box-shadow: 0 0 0 3px rgba(168,85,247,0.4), inset 0 0 30px rgba(168,85,247,0.2);
}
.rd-ann-rect.active {
  border-color: #c084fc;
  box-shadow: 0 0 0 4px rgba(168,85,247,0.5), inset 0 0 40px rgba(168,85,247,0.25);
  z-index: 10;
}
.rd-ar-badge {
  position: absolute;
  top: -24px;
  left: -2px;
  padding: 2px 8px;
  background: #a855f7;
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  white-space: nowrap;
}
.rd-ar-bubble {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  min-width: 220px;
  max-width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  z-index: 20;
  overflow: hidden;
  animation: bubbleIn 0.2s ease;
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.rd-ab-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-color);
}
.rd-ab-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rd-ab-avatar.ai {
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
}
.rd-ab-avatar.sys {
  background: linear-gradient(135deg, #64748b, #475569);
}
.rd-ab-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}
.rd-ab-role {
  font-size: 10px;
  color: var(--text-tertiary);
}
.rd-ab-close {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--text-tertiary);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.rd-ab-close:hover { color: var(--text-primary); }
.rd-ab-content {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.rd-ab-actions {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-panel);
}
.rd-ab-btn {
  flex: 1;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  transition: all 0.15s;
  font-weight: 500;
}
.rd-ab-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.rd-ab-resolve {
  color: var(--accent-green);
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.3);
}
.rd-ab-resolve:hover { background: rgba(34,197,94,0.15); }

/* 圈选提示 */
.rd-draw-hint {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.8);
  font-size: 11px;
  border-radius: 20px;
  z-index: 10;
}
.rd-draw-hint svg { color: rgba(255,255,255,0.6); }

/* 播放控制 */
.rd-player-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  flex-shrink: 0;
}
.rd-pc-left, .rd-pc-right {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.rd-pc-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--bg-panel);
  transition: all 0.15s;
}
.rd-pc-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.rd-pc-play {
  width: 40px;
  height: 40px;
  background: var(--gradient-primary);
  color: white;
  box-shadow: 0 4px 12px rgba(139,92,246,0.35);
}
.rd-pc-play:hover { box-shadow: 0 6px 16px rgba(139,92,246,0.5); }
.rd-pc-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rd-pc-progress {
  width: 100%;
}
.rd-pc-track {
  position: relative;
  height: 6px;
  background: var(--bg-panel);
  border-radius: 3px;
}
.rd-pc-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 3px;
}
.rd-pc-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: white;
  border: 2px solid var(--primary);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
}
.rd-pc-mark {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: all 0.15s;
}
.rd-pc-mark:hover {
  transform: translate(-50%, -50%) scale(1.5);
}
.rd-pc-time {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  color: var(--text-tertiary);
}
.rd-pc-btn-sm {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  transition: all 0.15s;
}
.rd-pc-btn-sm:hover { color: var(--text-secondary); }

/* AI 质检快览 */
.rd-ai-quick {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.rd-aq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
}
.rd-aq-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.rd-aq-title svg { color: var(--primary-light); }
.rd-aq-score {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.rd-aq-num {
  font-size: 22px;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.rd-aq-label {
  font-size: 10px;
  color: var(--text-tertiary);
}
.rd-aq-dims {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px 14px;
}
.rd-aq-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 11px;
}
.rd-aq-item:hover {
  border-color: var(--primary);
  background: rgba(139,92,246,0.06);
  transform: translateY(-1px);
}
.rd-aq-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rd-aq-low .rd-aq-dot { background: var(--accent-green); }
.rd-aq-medium .rd-aq-dot { background: var(--accent-orange); }
.rd-aq-high .rd-aq-dot { background: var(--accent-red); }
.rd-aq-dim {
  flex: 1;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-aq-score-num {
  font-weight: 700;
  color: var(--text-primary);
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
.rd-aq-time {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
}
.rd-aq-item svg {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* 右列 */
.rd-right-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
}
.rd-lang-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.rd-lang-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
}
.rd-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.rd-lang-count {
  font-size: 11px;
  color: var(--primary-light);
  font-weight: 600;
  background: rgba(139,92,246,0.1);
  padding: 2px 10px;
  border-radius: 10px;
}

/* 语言 Tabs */
.rd-lang-tabs {
  display: flex;
  gap: 2px;
  padding: 8px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
}
.rd-lang-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
}
.rd-lang-tab:hover { color: var(--text-secondary); }
.rd-lang-tab.active {
  background: rgba(139,92,246,0.12);
  color: var(--primary-light);
  font-weight: 600;
}
.rd-lt-flag { font-size: 14px; }
.rd-lt-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
}
.rd-lt-approved .rd-lt-status-dot { background: var(--accent-green); }
.rd-lt-editing .rd-lt-status-dot { background: var(--accent-orange); }
.rd-lt-pending .rd-lt-status-dot { background: var(--text-tertiary); }

/* 语言状态列表 */
.rd-lang-status-list {
  padding: 8px 10px;
  max-height: 200px;
  overflow-y: auto;
}
.rd-ls-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  transition: all 0.15s;
}
.rd-ls-item:hover { background: var(--bg-hover); }
.rd-ls-flag { font-size: 18px; flex-shrink: 0; }
.rd-ls-info { flex: 1; min-width: 0; }
.rd-ls-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.rd-ls-version {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.rd-ls-status {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.rd-ls-approved { background: rgba(34,197,94,0.12); color: var(--accent-green); }
.rd-ls-editing { background: rgba(245,158,11,0.12); color: var(--accent-orange); }
.rd-ls-pending { background: rgba(100,116,139,0.12); color: #94a3b8; }

/* 对比预览 */
.rd-compare-section {
  padding: 10px 12px 14px;
  border-top: 1px solid var(--border-color);
}
.rd-cs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.rd-cs-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.rd-cs-swap {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 10px;
  color: var(--primary-light);
  background: rgba(139,92,246,0.08);
  border-radius: 5px;
  font-weight: 500;
}
.rd-compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}
.rd-compare-item { }
.rd-ci-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}
.rd-ci-status {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 8px;
}
.rd-ci-approved { background: rgba(34,197,94,0.12); color: var(--accent-green); }
.rd-ci-editing { background: rgba(245,158,11,0.12); color: var(--accent-orange); }
.rd-ci-pending { background: rgba(100,116,139,0.12); color: #94a3b8; }
.rd-ci-preview {
  position: relative;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}
.rd-ci-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.rd-ci-caption {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: rgba(0,0,0,0.8);
  color: white;
  font-size: 10px;
  font-weight: 500;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-ci-caption-ar { direction: rtl; }
.rd-compare-divider {
  width: 1px;
  height: 100px;
  background: var(--border-color);
  position: relative;
}
.rd-compare-divider::before {
  content: 'VS';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ====== 底部批注时间线 ====== */
.rd-timeline-bar {
  position: fixed;
  bottom: 0;
  left: 260px;
  right: 20px;
  height: 290px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  z-index: 50;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
  overflow: hidden;
}
.rd-tl-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.rd-tl-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.rd-tl-title svg { color: var(--primary-light); }
.rd-tl-count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--border-color);
}
.rd-tl-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rd-tl-filter {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}
.rd-tl-f-btn {
  padding: 4px 12px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
}
.rd-tl-f-btn:hover { color: var(--text-secondary); }
.rd-tl-f-btn.active {
  background: rgba(139,92,246,0.12);
  color: var(--primary-light);
  font-weight: 600;
}
.rd-tl-add-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 11px;
  color: white;
  background: var(--gradient-primary);
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.15s;
}
.rd-tl-add-btn:hover { box-shadow: 0 4px 12px rgba(139,92,246,0.4); }

/* 时间轴 */
.rd-tl-track {
  padding: 10px 18px 0;
  flex-shrink: 0;
}
.rd-tl-ruler {
  position: relative;
  height: 18px;
  margin-left: 60px;
}
.rd-tl-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
}
.rd-tl-tick::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 1px;
  height: 5px;
  background: var(--text-tertiary);
  opacity: 0.3;
}
.rd-tl-row {
  position: relative;
  height: 28px;
  margin-left: 60px;
  margin-top: 4px;
  background: linear-gradient(90deg, transparent 49px, rgba(255,255,255,0.02) 50px, transparent 51px);
  background-size: 50px 100%;
  border-bottom: 1px solid var(--border-color);
}
.rd-tl-progress-line {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: 2px;
}
.rd-tl-anno-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: all 0.2s;
  z-index: 3;
}
.rd-tl-am-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--anno-color, #ef4444);
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: all 0.2s;
}
.rd-tl-am-time {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
}
.rd-tl-anno-marker:hover .rd-tl-am-time,
.rd-tl-anno-marker.active .rd-tl-am-time {
  opacity: 1;
}
.rd-tl-anno-marker:hover .rd-tl-am-dot,
.rd-tl-anno-marker.active .rd-tl-am-dot {
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(139,92,246,0.25);
}
.rd-tl-anno-marker.resolved .rd-tl-am-dot {
  opacity: 0.5;
}
.rd-tl-playhead {
  position: absolute;
  top: -8px;
  bottom: -2px;
  width: 2px;
  background: var(--primary-light);
  pointer-events: none;
  z-index: 5;
}
.rd-tl-playhead::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: var(--primary-light);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* 批注卡片 */
.rd-tl-annotations {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
}
.rd-ann-card {
  flex-shrink: 0;
  width: 280px;
  display: flex;
  gap: 10px;
  padding: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.rd-ann-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.rd-ann-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(139,92,246,0.15);
}
.rd-ann-card.resolved {
  opacity: 0.6;
}
.rd-ann-time-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 44px;
}
.rd-ann-time {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: ui-monospace, monospace;
}
.rd-ann-line {
  flex: 1;
  width: 2px;
  background: var(--border-color);
  margin-top: 6px;
}
.rd-ann-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rd-ann-avatar.ai {
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
}
.rd-ann-avatar.sys {
  background: linear-gradient(135deg, #64748b, #475569);
}
.rd-ann-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rd-ann-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rd-ann-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}
.rd-ann-role {
  font-size: 10px;
  color: var(--text-tertiary);
}
.rd-ann-type {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.rd-ann-person {
  background: rgba(59,130,246,0.12);
  color: #3b82f6;
}
.rd-ann-ai {
  background: rgba(139,92,246,0.12);
  color: var(--primary-light);
}
.rd-ann-system {
  background: rgba(100,116,139,0.12);
  color: #94a3b8;
}
.rd-ann-status {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-orange);
}
.rd-ann-card.resolved .rd-ann-status {
  color: var(--accent-green);
}
.rd-ann-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ====== 9.1 渠道管理 ====== */
.chv1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  position: relative;
}

/* 顶部 */
.ch-top-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.ch-stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.ch-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 16px;
  position: relative;
  overflow: hidden;
}
.ch-stat-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
}
.ch-stat-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  font-weight: 500;
}
.ch-stat-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  font-family: ui-monospace, monospace;
}
.ch-stat-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 3px;
}
.ch-stat-active::before { background: var(--accent-green); }
.ch-stat-active .ch-stat-value { color: var(--accent-green); }
.ch-stat-renewal::before { background: var(--accent-orange); }
.ch-stat-renewal .ch-stat-value { color: var(--accent-orange); }
.ch-stat-expired::before { background: var(--accent-red); }
.ch-stat-expired .ch-stat-value { color: var(--accent-red); }
.ch-stat-fans::before { background: var(--gradient-primary); }
.ch-stat-fans .ch-stat-value {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ch-filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 14px;
}
.ch-filters {
  display: flex;
  gap: 8px;
}
.ch-filter-sel {
  padding: 6px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  font-size: 12px;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  font-weight: 500;
  outline: none;
  transition: all 0.15s;
}
.ch-filter-sel:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
}
.ch-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  width: 220px;
  transition: all 0.15s;
}
.ch-search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
}
.ch-search-box svg { color: var(--text-tertiary); flex-shrink: 0; }
.ch-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 12px;
  color: var(--text-primary);
  font-family: inherit;
}
.ch-search-input::placeholder { color: var(--text-tertiary); }

/* 主体 */
.ch-main {
  flex: 1;
  display: grid;
  grid-template-columns: 260px 1fr 340px;
  gap: 10px;
  min-height: 0;
}

/* 左：账号列表 */
.ch-list-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ch-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.ch-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.ch-panel-title svg { color: var(--primary-light); }
.ch-list-count {
  font-size: 11px;
  color: var(--primary-light);
  font-weight: 600;
  background: rgba(139,92,246,0.1);
  padding: 2px 10px;
  border-radius: 10px;
}
.ch-list-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ch-account-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  border-left: 3px solid var(--border-color);
}
.ch-account-card:hover {
  transform: translateX(3px);
  border-color: var(--border-hover);
}
.ch-account-card.active {
  border-color: var(--primary);
  background: rgba(139,92,246,0.06);
  box-shadow: 0 0 0 2px rgba(139,92,246,0.12);
}
.ch-ac-active { border-left-color: var(--accent-green); }
.ch-ac-renewal { border-left-color: var(--accent-orange); }
.ch-ac-expired { border-left-color: var(--accent-red); }
.ch-ac-pending { border-left-color: #64748b; }

.ch-ac-platform {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #a855f7);
}
.ch-pf-icon { font-size: 16px; line-height: 1; }
.ch-pf-YouTube { background: linear-gradient(135deg, #ef4444, #dc2626); }
.ch-pf-Instagram { background: linear-gradient(135deg, #f58529, #dd2a7b); }
.ch-pf-Facebook { background: linear-gradient(135deg, #1877f2, #0d65d0); }
.ch-pf-Snapchat { background: linear-gradient(135deg, #fffc00, #e6e200); }
.ch-pf-Snapchat .ch-pf-icon { filter: invert(0.9); }
.ch-pf-抖音 { background: linear-gradient(135deg, #fe2c55, #25f4ee); }
.ch-pf-微信视频号 { background: linear-gradient(135deg, #07c160, #06ad56); }
.ch-pf-小红书 { background: linear-gradient(135deg, #fe2c55, #ff6b81); }
.ch-pf-快手 { background: linear-gradient(135deg, #ff4906, #ff6a00); }
.ch-pf-B站 { background: linear-gradient(135deg, #00a1d6, #00b4e8); }

.ch-ac-info { flex: 1; min-width: 0; }
.ch-ac-handle {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-ac-meta {
  display: flex;
  gap: 4px;
  font-size: 10px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.ch-ac-country { color: var(--text-secondary); }
.ch-ac-right { flex-shrink: 0; }
.ch-ac-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
}

/* 中：地图区 */
.ch-map-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ch-map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.ch-map-legend {
  display: flex;
  gap: 14px;
}
.ch-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.ch-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
}

.ch-map-container {
  flex: 1;
  position: relative;
  min-height: 0;
  background: radial-gradient(ellipse at center, rgba(15,23,42,0.8) 0%, rgba(10,14,26,1) 100%);
  overflow: hidden;
}
.ch-world-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 20px 10px;
  box-sizing: border-box;
}
.ch-continent {
  fill: rgba(139,92,246,0.08);
  stroke: rgba(139,92,246,0.25);
  stroke-width: 0.5;
  transition: all 0.2s;
}
.ch-continent:hover {
  fill: rgba(139,92,246,0.15);
  stroke: rgba(139,92,246,0.4);
}

.ch-map-markers {
  position: absolute;
  inset: 20px 10px;
  pointer-events: none;
}
.ch-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
  border-radius: 50%;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.ch-marker:hover {
  transform: translate(-50%, -50%) scale(1.3);
  z-index: 10;
}
.ch-marker.active {
  transform: translate(-50%, -50%) scale(1.4);
  z-index: 15;
}
.ch-marker-inner {
  width: 60%;
  height: 60%;
  border-radius: 50%;
  position: relative;
}
.ch-marker-inner::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid white;
  opacity: 0.3;
}

.ch-marker-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 20;
  animation: tooltipIn 0.2s ease;
}
@keyframes tooltipIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.ch-mt-handle {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}
.ch-mt-meta {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.ch-region-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(15,23,42,0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 12px;
  font-size: 10px;
  color: var(--text-secondary);
  z-index: 3;
  pointer-events: none;
}
.ch-rl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.ch-rl-name { font-weight: 600; }
.ch-rl-count {
  font-weight: 700;
  color: var(--text-primary);
  margin-left: 2px;
}

/* 紧急提醒 */
.ch-urgent-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(245,158,11,0.1), rgba(245,158,11,0.05));
  border-top: 1px solid rgba(245,158,11,0.3);
  flex-shrink: 0;
}
.ch-ub-icon { font-size: 20px; }
.ch-ub-content { flex: 1; }
.ch-ub-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-orange);
  display: block;
}
.ch-ub-desc {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.ch-ub-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 7px;
  transition: all 0.15s;
}
.ch-ub-btn:hover { box-shadow: 0 4px 12px rgba(245,158,11,0.4); }

/* 右：详情 */
.ch-detail-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.ch-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.ch-dh-platform {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #a855f7);
}
.ch-dh-info { flex: 1; min-width: 0; }
.ch-dh-handle {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-dh-meta {
  display: flex;
  gap: 5px;
  font-size: 11px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.ch-dh-status {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  flex-shrink: 0;
}
.ch-dhs-active { background: rgba(34,197,94,0.12); color: var(--accent-green); }
.ch-dhs-renewal { background: rgba(245,158,11,0.12); color: var(--accent-orange); }
.ch-dhs-expired { background: rgba(239,68,68,0.12); color: var(--accent-red); }
.ch-dhs-pending { background: rgba(100,116,139,0.12); color: #94a3b8; }

.ch-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ch-dsection { }
.ch-dsection-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.ch-data-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.ch-data-item {
  padding: 10px;
  background: var(--bg-panel);
  border-radius: 8px;
  text-align: center;
  border: 1px solid var(--border-color);
}
.ch-data-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: ui-monospace, monospace;
  line-height: 1;
  margin-bottom: 4px;
}
.ch-data-label {
  font-size: 10px;
  color: var(--text-tertiary);
}

/* 授权卡片 */
.ch-auth-card {
  padding: 12px;
  background: var(--bg-panel);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.ch-auth-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 11px;
}
.ch-auth-row:last-of-type { margin-bottom: 10px; }
.ch-auth-label {
  color: var(--text-tertiary);
}
.ch-auth-value {
  color: var(--text-primary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ch-auth-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
}
.ch-auth-renewal .ch-auth-dot { background: var(--accent-orange); }
.ch-auth-expired .ch-auth-dot { background: var(--accent-red); }
.ch-auth-pending .ch-auth-dot { background: #64748b; }
.ch-av-danger { color: var(--accent-red); }
.ch-av-warning { color: var(--accent-orange); }

.ch-auth-progress {
  height: 4px;
  background: var(--bg-card);
  border-radius: 2px;
  overflow: hidden;
}
.ch-auth-pbar {
  height: 100%;
  background: var(--accent-green);
  border-radius: 2px;
  transition: width 0.3s;
}
.ch-auth-renewal .ch-auth-pbar { background: var(--accent-orange); }
.ch-auth-expired .ch-auth-pbar { background: var(--accent-red); width: 100%; }
.ch-auth-pending .ch-auth-pbar { background: #64748b; width: 10%; }

/* 绑定车型 */
.ch-model-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ch-model-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}
.ch-model-icon { font-size: 14px; }
.ch-model-name { color: var(--text-primary); }

/* 最近发布 */
.ch-last-post {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-panel);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.ch-lp-icon { font-size: 24px; }
.ch-lp-info { flex: 1; }
.ch-lp-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.ch-lp-time {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.ch-lp-status {
  font-size: 11px;
  color: var(--accent-green);
  font-weight: 600;
}

/* 层级关系 */
.ch-hierarchy {
  padding: 12px;
  background: var(--bg-panel);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.ch-hi-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ch-hi-avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.ch-hi-top .ch-hi-avatar { background: rgba(139,92,246,0.2); }
.ch-hi-mid .ch-hi-avatar { background: rgba(59,130,246,0.2); }
.ch-hi-bottom .ch-hi-avatar { background: rgba(34,197,94,0.2); }
.ch-hi-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.ch-hi-role {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.ch-hi-line {
  width: 2px;
  height: 16px;
  background: var(--border-color);
  margin-left: 16px;
  position: relative;
}
.ch-hi-line::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  width: 12px;
  height: 2px;
  background: var(--border-color);
}

.ch-detail-footer {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.ch-df-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.15s;
}
.ch-df-secondary {
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}
.ch-df-secondary:hover { color: var(--text-primary); border-color: var(--border-hover); }
.ch-df-primary {
  flex: 1.5;
  background: var(--gradient-primary);
  color: white;
  border: 1px solid transparent;
  box-shadow: 0 4px 12px rgba(139,92,246,0.35);
}
.ch-df-primary:hover { box-shadow: 0 6px 16px rgba(139,92,246,0.5); }

/* ====== 9.2 分发策略 ====== */
.dsv1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  position: relative;
  padding-bottom: 220px;
}

/* 顶部 */
.ds-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 18px;
  flex-shrink: 0;
}
.ds-top-left { display: flex; flex-direction: column; gap: 3px; }
.ds-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.ds-subtitle {
  font-size: 11px;
  color: var(--text-tertiary);
}
.ds-top-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ds-mode-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.ds-mt-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  color: var(--text-tertiary);
  background: transparent;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.15s;
}
.ds-mt-btn:hover { color: var(--text-secondary); }
.ds-mt-btn.active {
  background: rgba(139,92,246,0.12);
  color: var(--primary-light);
  font-weight: 600;
}
.ds-launch-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: var(--gradient-primary);
  color: white;
  font-size: 13px;
  font-weight: 600;
  border-radius: 9px;
  transition: all 0.15s;
  box-shadow: 0 4px 14px rgba(139,92,246,0.35);
}
.ds-launch-btn:hover { box-shadow: 0 6px 20px rgba(139,92,246,0.5); transform: translateY(-1px); }

/* 主体 */
.ds-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}
.ds-main-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
}
.ds-right-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
}

.ds-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.ds-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
}
.ds-ch-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds-ai-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  background: rgba(139,92,246,0.12);
  color: var(--primary-light);
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
}
.ds-ai-badge svg { color: var(--primary-light); }
.ds-matrix-count, .ds-config-count, .ds-lead-count, .ds-queue-count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.ds-ch-sel {
  padding: 5px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: inherit;
  outline: none;
}

/* 时间轴 */
.ds-timeline {
  padding: 14px 16px;
}
.ds-tl-ruler {
  position: relative;
  height: 22px;
  margin-left: 110px;
  margin-bottom: 4px;
}
.ds-tl-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
}
.ds-tl-tick::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 1px;
  height: 5px;
  background: var(--text-tertiary);
  opacity: 0.3;
}
.ds-tl-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds-tl-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ds-tl-label {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100px;
  flex-shrink: 0;
}
.ds-tl-flag { font-size: 16px; }
.ds-tl-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.ds-tl-utc {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
  background: var(--bg-panel);
  padding: 1px 5px;
  border-radius: 4px;
}
.ds-tl-bar {
  position: relative;
  flex: 1;
  height: 32px;
  background: var(--bg-panel);
  border-radius: 6px;
  overflow: hidden;
}
.ds-tl-grid {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent calc(100% / 8 - 1px),
    var(--border-color) calc(100% / 8),
    transparent calc(100% / 8 + 1px));
  background-size: calc(100% / 8) 100%;
}
.ds-tl-peak {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 4px;
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.ds-tl-peak:hover { opacity: 0.75; }
.ds-tl-peak-label {
  font-size: 10px;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ds-tl-task-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  cursor: pointer;
}
.ds-tl-tm-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: transform 0.15s;
}
.ds-tl-task-marker:hover .ds-tl-tm-dot {
  transform: scale(1.3);
}
.ds-tl-tm-time {
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--text-primary);
  background: var(--bg-card);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.ds-tl-task-marker:hover .ds-tl-tm-time {
  opacity: 1;
}

/* 尺寸适配矩阵 */
.ds-fit-matrix {
  padding: 10px 14px 14px;
}
.ds-fm-header-row {
  display: grid;
  grid-template-columns: 140px repeat(4, 1fr);
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 8px;
}
.ds-fm-corner { }
.ds-fm-col-head {
  text-align: center;
}
.ds-fm-ch-ratio {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: ui-monospace, monospace;
}
.ds-fm-ch-desc {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.ds-fm-row {
  display: grid;
  grid-template-columns: 140px repeat(4, 1fr);
  gap: 8px;
  padding: 7px 0;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}
.ds-fm-row:last-child { border-bottom: none; }
.ds-fm-row-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ds-fm-rh-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.ds-fm-rh-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.ds-fm-cell {
  position: relative;
  height: 54px;
  background: var(--bg-panel);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  transition: all 0.15s;
}
.ds-fm-cell:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px);
}
.ds-fm-preview {
  position: relative;
}
.ds-fmp-inner {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  border-radius: 2px;
  opacity: 0.6;
}
.ds-fmp-9-16 { width: 14px; height: 26px; }
.ds-fmp-16-9 { width: 28px; height: 16px; }
.ds-fmp-1-1 { width: 22px; height: 22px; }
.ds-fmp-4-5 { width: 18px; height: 23px; }
.ds-fm-status {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 10px;
}
.ds-fm-auto { border-color: rgba(34,197,94,0.3); }
.ds-fm-auto .ds-fmp-inner { filter: hue-rotate(100deg); }
.ds-fm-crop { border-color: rgba(245,158,11,0.3); }
.ds-fm-manual { border-color: rgba(239,68,68,0.3); opacity: 0.7; }

.ds-fit-legend {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.ds-fl-dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
}
.ds-fl-auto { background: var(--accent-green); }
.ds-fl-crop { background: var(--accent-orange); }
.ds-fl-manual { background: var(--accent-red); }

/* 配置表 */
.ds-add-account-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 11px;
  color: var(--primary-light);
  background: rgba(139,92,246,0.1);
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.15s;
}
.ds-add-account-btn:hover { background: rgba(139,92,246,0.18); }

.ds-config-table { padding: 0 6px 6px; }
.ds-ct-head, .ds-ct-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr 1.2fr 0.8fr 1fr 1.2fr;
  gap: 8px;
  padding: 10px 12px;
  align-items: center;
}
.ds-ct-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding-bottom: 8px;
}
.ds-ct-row {
  font-size: 12px;
  color: var(--text-secondary);
  border-radius: 7px;
  margin: 4px 0;
  cursor: pointer;
  transition: all 0.15s;
}
.ds-ct-row:hover { background: var(--bg-hover); }
.ds-ct-row.active {
  background: rgba(139,92,246,0.06);
  border: 1px solid var(--primary);
  box-shadow: 0 0 0 2px rgba(139,92,246,0.1);
}
.ds-ct-handle {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 12px;
}
.ds-ct-platform {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ds-ct-pf-icon {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.ds-ct-time-badge {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-panel);
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11px;
  border: 1px solid var(--border-color);
}
.ds-ct-lead-on { color: var(--accent-green); font-weight: 600; font-size: 11px; }
.ds-ct-lead-off { color: var(--text-tertiary); font-size: 11px; }
.ds-ct-st {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
}
.ds-ct-st-success { color: var(--accent-green); }
.ds-ct-st-publishing { color: var(--primary-light); }
.ds-ct-st-queued { color: var(--text-tertiary); }
.ds-ct-st-scheduled { color: var(--accent-orange); }
.ds-ct-st-failed { color: var(--accent-red); }

/* 右侧：留资组件 */
.ds-lead-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
}
.ds-lf-label {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.ds-lf-sel {
  flex: 1;
  padding: 5px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: 11px;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
}

.ds-lead-list {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-lead-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  transition: all 0.15s;
}
.ds-lead-item:hover { border-color: var(--border-hover); }
.ds-lead-item.unavailable {
  opacity: 0.4;
  cursor: not-allowed;
}
.ds-li-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 30px;
  text-align: center;
}
.ds-li-info { flex: 1; min-width: 0; }
.ds-li-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.ds-li-desc {
  font-size: 10px;
  color: var(--text-tertiary);
}

/* Switch */
.ds-li-switch {
  position: relative;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}
.ds-li-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.ds-li-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  transition: all 0.2s;
}
.ds-li-slider::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: all 0.2s;
}
.ds-li-switch input:checked + .ds-li-slider {
  background: var(--primary);
  border-color: var(--primary);
}
.ds-li-switch input:checked + .ds-li-slider::before {
  transform: translate(16px, -50%);
}
.ds-li-switch input:disabled + .ds-li-slider {
  cursor: not-allowed;
}

/* 留资预览 */
.ds-lead-preview {
  padding: 12px 14px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-panel);
}
.ds-lp-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.ds-lp-card {
  background: var(--bg-card);
  border-radius: 9px;
  padding: 14px;
  border: 1px solid var(--border-color);
}
.ds-lp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.ds-lp-fields {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 10px;
}
.ds-lp-input {
  width: 100%;
  padding: 7px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: 11px;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.ds-lp-submit {
  width: 100%;
  padding: 8px;
  background: var(--gradient-primary);
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  margin-bottom: 6px;
}
.ds-lp-note {
  text-align: center;
  font-size: 10px;
  color: var(--text-tertiary);
}

/* 发布队列 */
.ds-queue-list {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-queue-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background: var(--bg-panel);
  border-radius: 7px;
  border-left: 3px solid var(--border-color);
}
.ds-qi-success { border-left-color: var(--accent-green); }
.ds-qi-publishing { border-left-color: var(--primary); }
.ds-qi-queued { border-left-color: var(--text-tertiary); }
.ds-qi-failed { border-left-color: var(--accent-red); }

.ds-qi-status {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
}
.ds-qi-icon-success { color: var(--accent-green); }
.ds-qi-icon-publishing { color: var(--primary-light); animation: spin 1.5s linear infinite; }
.ds-qi-icon-queued { color: var(--text-tertiary); }
.ds-qi-icon-failed { color: var(--accent-red); }
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.ds-qi-info { flex: 1; min-width: 0; }
.ds-qi-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.ds-qi-meta {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.ds-qi-progress {
  position: relative;
  margin-top: 8px;
}
.ds-qi-pbar {
  height: 4px;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.3s;
}
.ds-qi-pct {
  position: absolute;
  right: 0;
  top: -4px;
  font-size: 9px;
  color: var(--primary-light);
  font-weight: 600;
  font-family: ui-monospace, monospace;
}
.ds-qi-error {
  font-size: 10px;
  color: var(--accent-red);
  margin-top: 5px;
}
.ds-qi-action {
  font-size: 10px;
  color: var(--primary-light);
  font-weight: 500;
  flex-shrink: 0;
}

/* ====== 底部排期日历 ====== */
.ds-schedule-bar {
  position: fixed;
  bottom: 0;
  left: 260px;
  right: 20px;
  height: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  z-index: 40;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
  overflow: hidden;
}
.ds-sb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.ds-sb-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.ds-sb-title svg { color: var(--primary-light); }
.ds-sb-count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--border-color);
}
.ds-sb-actions {
  display: flex;
  gap: 6px;
}
.ds-sb-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  transition: all 0.15s;
  font-weight: 500;
}
.ds-sb-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.ds-sb-today {
  color: var(--primary-light);
  border-color: var(--primary);
  background: rgba(139,92,246,0.1);
}

.ds-sb-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border-color);
  padding: 0;
  overflow: hidden;
}
.ds-sb-day {
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.ds-sb-day.today {
  background: var(--bg-panel);
}
.ds-sd-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
}
.ds-sb-day.today .ds-sd-head {
  background: rgba(139,92,246,0.1);
}
.ds-sd-date {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ds-sd-month-day {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.ds-sd-weekday {
  font-size: 10px;
  color: var(--text-tertiary);
}
.ds-sd-label {
  font-size: 9px;
  padding: 1px 6px;
  background: var(--primary);
  color: white;
  border-radius: 8px;
  font-weight: 600;
}
.ds-sd-count {
  font-size: 10px;
  color: var(--primary-light);
  font-weight: 600;
  background: rgba(139,92,246,0.1);
  padding: 1px 7px;
  border-radius: 8px;
}
.ds-sd-tasks {
  flex: 1;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.ds-sd-task {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  background: var(--bg-panel);
  border-radius: 5px;
  font-size: 10px;
  transition: all 0.15s;
}
.ds-sd-task:hover { transform: translateX(2px); }
.ds-sdt-time {
  font-family: ui-monospace, monospace;
  font-size: 9px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  width: 32px;
}
.ds-sdt-platform {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
}
.ds-sdt-title {
  flex: 1;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-sdt-success { border-left: 2px solid var(--accent-green); }
.ds-sdt-publishing { border-left: 2px solid var(--primary); }
.ds-sdt-queued { border-left: 2px solid var(--text-tertiary); }
.ds-sdt-scheduled { border-left: 2px solid var(--accent-orange); }
.ds-sd-more {
  text-align: center;
  font-size: 10px;
  color: var(--text-tertiary);
  padding: 4px;
  cursor: pointer;
  transition: color 0.15s;
}
.ds-sd-more:hover { color: var(--primary-light); }

/* ====== 10.1 数据看板 ====== */
.dsh1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  overflow-y: auto;
  padding-bottom: 10px;
}

/* 顶部维度条 */
.dsh-dim-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 18px;
  flex-shrink: 0;
}
.dsh-dim-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dsh-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.dsh-live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(34,197,94,0.1);
  border-radius: 10px;
  font-size: 11px;
  color: var(--accent-green);
  font-weight: 600;
}
.dsh-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.dsh-dim-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dsh-dim-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.dsh-dim-btn {
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-tertiary);
  background: transparent;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.15s;
}
.dsh-dim-btn:hover { color: var(--text-secondary); }
.dsh-dim-btn.active {
  background: var(--gradient-primary);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(139,92,246,0.3);
}
.dsh-time-range {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.dsh-tr-btn {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: transparent;
  border-radius: 5px;
  font-weight: 500;
  transition: all 0.15s;
}
.dsh-tr-btn:hover { color: var(--text-secondary); }
.dsh-tr-btn.active {
  background: rgba(139,92,246,0.12);
  color: var(--primary-light);
  font-weight: 600;
}
.dsh-filter-sel {
  padding: 6px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  font-size: 11px;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
}

/* KPI 行 */
.dsh-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1fr 1fr;
  gap: 10px;
  flex-shrink: 0;
}
.dsh-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s;
}
.dsh-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-primary);
  opacity: 0.5;
}
.dsh-kpi-card::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.dsh-kpi-card > * { position: relative; z-index: 1; }
.dsh-kpi-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}
.dsh-kpi-label {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 10px;
  font-weight: 500;
  /* v2 风格（2026-08-26 修复参考 1.1 总部经营驾驶舱）：
     label 单行 block 排版，不再把 unit 横挤在 label 后面 */
}
.dsh-kpi-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
  /* v2 风格：number + unit 横向 baseline 对齐 */
}
.dsh-kpi-number {
  font-size: 40px;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.dsh-kpi-unit-inline {
  font-size: 16px;
  color: var(--text-secondary);
  font-weight: 500;
}
.dsh-kpi-secondary .dsh-kpi-number {
  background: var(--text-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dsh-kpi-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* v2 风格：左文（change+sub）右图（spark）两端分布 */
}
.dsh-kpi-bottom-text {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dsh-kpi-change {
  font-size: 12px;
  font-weight: 700;
  /* v2 风格：去掉 padding + 背景色块，更紧凑 */
}
.dsh-kpi-change.up { color: var(--accent-green); }
.dsh-kpi-change.down { color: var(--accent-red); }
.dsh-kpi-sub {
  color: var(--text-tertiary);
  margin-left: 2px;
  font-size: 11px;
  /* v2 风格：替代原 dsh-kpi-compare，单行间距更紧凑 */
}
.dsh-kpi-spark {
  width: 60px;
  height: 22px;
  /* v2 风格：去掉 margin-left: auto，改用父级 justify-content: space-between */
}
.dsh-spark-svg {
  width: 100%;
  height: 100%;
}

/* 主体 */
.dsh-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 10px;
  min-height: 0;
}
.dsh-left-col, .dsh-right-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.dsh-right-col { overflow-y: auto; }
.dsh-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.dsh-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
}
.dsh-ch-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dsh-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.dsh-panel-title svg { color: var(--primary-light); }
.dsh-dim-badge {
  font-size: 10px;
  padding: 2px 8px;
  background: rgba(139,92,246,0.1);
  color: var(--primary-light);
  border-radius: 10px;
  font-weight: 500;
}

/* 热力地图 */
.dsh-legend-heat {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dsh-lh-bar {
  width: 80px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #22c55e 0%, #eab308 50%, #dc2626 100%);
}
.dsh-lh-label {
  font-size: 10px;
  color: var(--text-tertiary);
}

.dsh-map-wrap {
  position: relative;
  height: 280px;
  background: radial-gradient(ellipse at center, rgba(15,23,42,0.6) 0%, rgba(10,14,26,1) 100%);
  overflow: hidden;
}
.dsh-world-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 20px 15px;
  box-sizing: border-box;
}
.dsh-continent {
  transition: all 0.3s;
  stroke: rgba(139,92,246,0.2);
  stroke-width: 0.4;
}
.dsh-cold { fill: rgba(139,92,246,0.1); }
.dsh-mid { fill: rgba(59,130,246,0.15); }
.dsh-hot { fill: rgba(249,115,22,0.2); }
.dsh-superhot { fill: rgba(239,68,68,0.25); }

.dsh-map-markers {
  position: absolute;
  inset: 20px 15px;
}
.dsh-region-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 5;
}
.dsh-rm-heat {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-size: 12px;
}
.dsh-region-marker:hover .dsh-rm-heat {
  transform: scale(1.2);
}
.dsh-region-marker.active .dsh-rm-heat {
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(139,92,246,0.2) !important;
}
.dsh-rm-heat-lv { font-size: 10px; }

.dsh-rm-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 10px;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 20;
}
.dsh-region-marker:hover .dsh-rm-tooltip,
.dsh-region-marker.active .dsh-rm-tooltip {
  opacity: 1;
}
.dsh-rm-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}
.dsh-rm-flag { font-size: 14px; }
.dsh-rm-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}
.dsh-rm-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-light);
  font-family: ui-monospace, monospace;
}
.dsh-rm-top-label {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.dsh-rm-top-content { display: flex; flex-direction: column; gap: 2px; }
.dsh-rm-model {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}
.dsh-rm-title {
  font-size: 10px;
  color: var(--text-secondary);
}

/* 趋势图 */
.dsh-trend-section {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border-color);
}
.dsh-trend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.dsh-trend-legend {
  display: flex;
  gap: 12px;
}
.dsh-tl-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.dsh-tl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dsh-tl-exposure { background: #8b5cf6; }
.dsh-tl-engagement { background: #f59e0b; }
.dsh-tl-leads { background: #22c55e; }
.dsh-tl-revenue { background: #ec4899; }
.dsh-trend-chart {
  height: 120px;
  width: 100%;
}
.dsh-trend-svg {
  width: 100%;
  height: 100%;
}

/* 实时流 */
.dsh-realtime-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  background: rgba(239,68,68,0.12);
  color: var(--accent-red);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}
.dsh-rt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-red);
  animation: pulse 1.2s ease-in-out infinite;
}
.dsh-rt-count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.dsh-realtime-feed {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 450px;
  overflow-y: auto;
}
.dsh-rt-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 7px;
  transition: all 0.15s;
}
.dsh-rt-item:hover {
  background: var(--bg-hover);
}
@keyframes rtSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.dsh-rt-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--bg-panel);
  flex-shrink: 0;
}
.dsh-rt-content { flex: 1; min-width: 0; }
.dsh-rt-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dsh-rt-meta {
  display: flex;
  gap: 4px;
  font-size: 10px;
  color: var(--text-tertiary);
}
.dsh-rt-platform { color: var(--primary-light); font-weight: 500; }
.dsh-rt-right {
  text-align: right;
  flex-shrink: 0;
}
.dsh-rt-data {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: ui-monospace, monospace;
  white-space: nowrap;
}
.dsh-rt-time {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* 底部 4 模块 */
.dsh-bottom-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 10px;
  flex-shrink: 0;
}
.dsh-bottom-card { min-height: 280px; display: flex; flex-direction: column; }

/* Top 列表 */
.dsh-top-list {
  flex: 1;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.dsh-top-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 7px;
  transition: all 0.15s;
}
.dsh-top-item:hover {
  background: var(--bg-hover);
}
.dsh-top-rank {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: ui-monospace, monospace;
}
.dsh-top-rank-top {
  background: linear-gradient(135deg, #f59e0b, #eab308);
  color: white;
  box-shadow: 0 2px 8px rgba(245,158,11,0.3);
}
.dsh-top-info { flex: 1; min-width: 0; }
.dsh-top-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dsh-top-meta {
  display: flex;
  gap: 4px;
  font-size: 10px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.dsh-top-model { color: var(--primary-light); font-weight: 500; }
.dsh-top-right { text-align: right; flex-shrink: 0; }
.dsh-top-plays {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: ui-monospace, monospace;
}
.dsh-top-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
  display: flex;
  gap: 4px;
}

/* 饼图 */
.dsh-platform-chart {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.dsh-pie-wrap {
  position: relative;
  width: 140px;
  height: 140px;
}
.dsh-pie-chart {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
}
.dsh-pie-center {
  position: absolute;
  inset: 24px;
  background: var(--bg-card);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dsh-pc-total {
  font-size: 18px;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.dsh-pc-label {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 3px;
}
.dsh-pie-legend {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dsh-pl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 5px;
  transition: all 0.15s;
}
.dsh-pl-item:hover { background: var(--bg-hover); }
.dsh-pl-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.dsh-pl-name {
  flex: 1;
  color: var(--text-secondary);
}
.dsh-pl-value {
  font-weight: 700;
  color: var(--text-primary);
  font-family: ui-monospace, monospace;
}

/* 车系柱状图 */
.dsh-model-chart {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.dsh-mc-item { }
.dsh-mc-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  font-size: 11px;
}
.dsh-mc-name { font-weight: 600; color: var(--text-primary); }
.dsh-mc-value {
  font-weight: 700;
  color: var(--text-primary);
  font-family: ui-monospace, monospace;
}
.dsh-mc-bar {
  height: 8px;
  background: var(--bg-panel);
  border-radius: 4px;
  overflow: hidden;
}
.dsh-mc-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* AI 预测 */
.dsh-ai-tag {
  font-size: 9px;
  padding: 1px 6px;
  background: rgba(139,92,246,0.2);
  color: var(--primary-light);
  border-radius: 8px;
  font-weight: 600;
  border: 1px solid rgba(139,92,246,0.3);
}
.dsh-ai-content {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dsh-ai-forecast {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dsh-af-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-panel);
  border-radius: 7px;
  border-left: 3px solid var(--primary);
}
.dsh-af-icon { font-size: 18px; }
.dsh-af-info { flex: 1; }
.dsh-af-title {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}
.dsh-af-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.dsh-af-value .up { color: var(--accent-green); }
.dsh-af-value .down { color: var(--accent-red); }

.dsh-ai-insight {
  padding: 12px;
  background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(168,85,247,0.05));
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 8px;
}
.dsh-ai-insight-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-light);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.dsh-ai-insight-text {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ====== 10.2 爆款归因 ====== */
.atr1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  padding-bottom: 300px;
  position: relative;
}

/* 顶部栏 */
.atr-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 18px;
  flex-shrink: 0;
}
.atr-top-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.atr-back-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  transition: all 0.15s;
  font-weight: 500;
}
.atr-back-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.atr-back-btn svg { color: var(--text-tertiary); }
.atr-video-meta { display: flex; flex-direction: column; gap: 4px; }
.atr-video-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.atr-video-badge {
  font-size: 10px;
  padding: 2px 8px;
  background: linear-gradient(135deg, #f59e0b, #dc2626);
  color: white;
  border-radius: 10px;
  font-weight: 700;
}
.atr-video-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.atr-top-right { }
.atr-quick-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 18px;
  background: var(--bg-panel);
  border-radius: 10px;
  border: 1px solid var(--border-color);
}
.atr-qs-item { text-align: center; }
.atr-qs-value {
  font-size: 18px;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: ui-monospace, monospace;
  line-height: 1;
}
.atr-qs-label {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 3px;
}
.atr-qs-divider {
  width: 1px;
  height: 28px;
  background: var(--border-color);
}

/* 主体 */
.atr-main {
  flex: 1;
  display: grid;
  grid-template-columns: 340px 1fr 320px;
  gap: 10px;
  min-height: 0;
}
.atr-left-col, .atr-center-col, .atr-right-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
}
.atr-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.atr-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
}
.atr-ch-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.atr-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.atr-panel-title svg { color: var(--primary-light); }
.atr-element-count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.atr-ai-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  background: rgba(139,92,246,0.12);
  color: var(--primary-light);
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
}
.atr-ai-badge svg { color: var(--primary-light); }

/* 元素拆解树 */
.atr-element-tree {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.atr-el-item {
  padding: 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.15s;
  cursor: pointer;
}
.atr-el-item:hover {
  border-color: var(--border-hover);
  transform: translateX(2px);
}
.atr-el-item.active {
  border-color: var(--primary);
  background: rgba(139,92,246,0.06);
  box-shadow: 0 0 0 2px rgba(139,92,246,0.12);
}
.atr-el-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.atr-el-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(168,85,247,0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.atr-el-info { flex: 1; min-width: 0; }
.atr-el-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.atr-el-detail {
  font-size: 10px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atr-el-contrib {
  text-align: right;
  flex-shrink: 0;
}
.atr-el-pct {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary-light);
  font-family: ui-monospace, monospace;
  line-height: 1;
  display: block;
}
.atr-el-label {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.atr-el-bar {
  height: 6px;
  background: var(--bg-card);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}
.atr-el-bar-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 3px;
  position: relative;
  transition: width 0.4s ease;
}
.atr-el-bar-glow {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
}

.atr-el-subitems {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 4px;
}
.atr-el-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-secondary);
}
.atr-el-sub-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary-light);
  opacity: 0.5;
}

.atr-el-total {
  margin-top: 4px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(168,85,247,0.05));
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 8px;
  text-align: center;
}
.atr-el-total-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.atr-el-total-value {
  font-size: 32px;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  font-family: ui-monospace, monospace;
}
.atr-el-total-value span {
  font-size: 16px;
}
.atr-el-total-note {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 6px;
}

/* 热力图 */
.atr-heatmap-card { }
.atr-legend-heat {
  display: flex;
  align-items: center;
  gap: 6px;
}
.atr-lh-bar {
  width: 80px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(99,102,241,0.3) 0%, rgba(168,85,247,0.5) 40%, rgba(249,115,22,0.7) 70%, rgba(239,68,68,0.8) 100%);
}
.atr-lh-label {
  font-size: 10px;
  color: var(--text-tertiary);
}

.atr-heatmap-grid {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
}
.atr-hm-dim {
  background: var(--bg-panel);
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
}
.atr-hm-dim-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.atr-hm-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.atr-hm-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-radius: 6px;
  transition: all 0.2s;
  cursor: pointer;
}
.atr-hm-cell:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.atr-hm-cell-label {
  font-size: 11px;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.atr-hm-cell-value {
  font-size: 14px;
  font-weight: 800;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  font-family: ui-monospace, monospace;
}

/* 爆款配方摘要 */
.atr-recipe-summary {
  padding: 14px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-panel);
}
.atr-rs-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.atr-rs-title svg { color: var(--accent-orange); }
.atr-rs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.atr-rs-tag {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
}
.atr-rs-tag-high {
  background: linear-gradient(135deg, rgba(249,115,22,0.2), rgba(239,68,68,0.2));
  color: var(--accent-orange);
  border: 1px solid rgba(249,115,22,0.3);
}
.atr-rs-tag-mid {
  background: rgba(139,92,246,0.12);
  color: var(--primary-light);
  border: 1px solid rgba(139,92,246,0.2);
}
.atr-rs-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
}
.atr-rs-score strong {
  font-size: 20px;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: ui-monospace, monospace;
}
.atr-rs-level {
  padding: 3px 10px;
  background: rgba(249,115,22,0.12);
  color: var(--accent-orange);
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
}

/* 时间轴贡献度 */
.atr-timeline-section {
  padding: 14px 16px;
}
.atr-timeline-total {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-light);
  font-family: ui-monospace, monospace;
}
.atr-timeline-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
  margin-bottom: 10px;
}
.atr-tl-segment {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.atr-tl-seg-stack {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1px;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  background: var(--bg-panel);
}
.atr-tl-seg-bar {
  width: 100%;
  transition: height 0.3s;
}
.atr-tl-seg-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: ui-monospace, monospace;
  margin-top: 6px;
}
.atr-tl-seg-sub {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-top: 1px;
}
.atr-tl-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}
.atr-tl-lg-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--text-tertiary);
}
.atr-tl-lg-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* AI推荐卡片 */
.atr-rec-badge {
  font-size: 10px;
  padding: 2px 8px;
  background: rgba(139,92,246,0.12);
  color: var(--primary-light);
  border-radius: 10px;
  font-weight: 600;
}
.atr-rec-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.atr-rec-section { }
.atr-rec-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.atr-rec-icon-good { font-size: 14px; }
.atr-rec-icon-warn { font-size: 14px; }
.atr-rec-icon-tip { font-size: 14px; }
.atr-rec-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.atr-rec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-panel);
  border-radius: 6px;
  font-size: 11px;
}
.atr-rec-name { color: var(--text-secondary); }
.atr-rec-val { font-weight: 700; font-family: ui-monospace, monospace; }
.atr-rec-val.good { color: var(--accent-green); }
.atr-rec-val.warn { color: var(--accent-orange); }

.atr-rec-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.atr-sug-item {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-panel);
  border-radius: 7px;
  border-left: 3px solid var(--primary);
}
.atr-sug-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.atr-sug-text {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.atr-sug-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.atr-rec-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 4px;
}
.atr-ra-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.15s;
}
.atr-ra-btn svg { width: 15px; height: 15px; }
.atr-ra-primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: 0 4px 14px rgba(139,92,246,0.35);
}
.atr-ra-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(139,92,246,0.45);
}
.atr-ra-secondary {
  color: var(--primary-light);
  background: rgba(139,92,246,0.1);
  border: 1px solid rgba(139,92,246,0.25);
}
.atr-ra-secondary:hover {
  background: rgba(139,92,246,0.16);
}
.atr-ra-ghost {
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
}
.atr-ra-ghost:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}

/* 底部对比面板 */
.atr-compare-bar {
  position: fixed;
  bottom: 0;
  left: 260px;
  right: 20px;
  height: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  z-index: 40;
  box-shadow: 0 -10px 32px rgba(0,0,0,0.3);
  overflow: hidden;
}
.atr-cb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.atr-cb-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.atr-cb-title svg { color: var(--primary-light); }
.atr-cb-count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--border-color);
}
.atr-cb-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 7px;
}
.atr-cb-tab {
  padding: 5px 14px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: transparent;
  border-radius: 5px;
  font-weight: 500;
  transition: all 0.15s;
}
.atr-cb-tab:hover { color: var(--text-secondary); }
.atr-cb-tab.active {
  background: rgba(139,92,246,0.15);
  color: var(--primary-light);
  font-weight: 600;
}

.atr-cb-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr;
  gap: 1px;
  background: var(--border-color);
  overflow: hidden;
}
.atr-cb-item {
  background: var(--bg-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.atr-cb-current {
  background: linear-gradient(180deg, rgba(139,92,246,0.06) 0%, var(--bg-card) 30%);
}
.atr-cb-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.atr-cb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}
.atr-cb-average .atr-cb-dot { background: var(--text-tertiary); }
.atr-cb-previous .atr-cb-dot { background: var(--accent-orange); }

.atr-cb-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.atr-cb-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}
.atr-cb-met { text-align: center; }
.atr-cb-met-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: ui-monospace, monospace;
  line-height: 1;
}
.atr-cb-met-label {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-top: 3px;
}
.atr-cb-score .atr-cb-met-val {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.atr-cb-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.atr-cb-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}
.atr-cb-bar-label {
  width: 28px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.atr-cb-bar-track {
  flex: 1;
  height: 5px;
  background: var(--bg-panel);
  border-radius: 3px;
  overflow: hidden;
}
.atr-cb-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s;
}
.atr-cb-bar-cur { background: var(--gradient-primary); }
.atr-cb-bar-avg { background: var(--text-tertiary); }
.atr-cb-bar-prev { background: var(--accent-orange); }
.atr-cb-bar-pct {
  width: 30px;
  text-align: right;
  color: var(--text-secondary);
  font-weight: 600;
  font-family: ui-monospace, monospace;
  font-size: 9px;
}

/* 对比结论 */
.atr-cb-conclusion {
  background: var(--bg-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.atr-cb-conc-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.atr-cb-conc-title svg { color: var(--primary-light); }
.atr-cb-conc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.atr-cb-conc-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 6px 8px;
  background: var(--bg-panel);
  border-radius: 6px;
}
.atr-cb-conc-icon { font-size: 14px; flex-shrink: 0; }
.atr-cb-conc-item strong {
  color: var(--text-primary);
  font-weight: 700;
}
.atr-cb-conc-item.good strong { color: var(--accent-green); }
.atr-cb-conc-item.warn strong { color: var(--accent-orange); }

/* ====== 11.1 组织与权限 ====== */
.op1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  overflow-y: auto;
}

/* 顶部模板Tab */
.op-template-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 18px;
  flex-shrink: 0;
}
.op-tb-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.op-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.op-subtitle {
  font-size: 11px;
  color: var(--text-tertiary);
}
.op-tb-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.op-templates {
  display: flex;
  gap: 6px;
}
.op-tpl-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.15s;
  cursor: pointer;
  text-align: left;
}
.op-tpl-btn:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px);
}
.op-tpl-btn.active {
  border-color: var(--primary);
  background: rgba(139,92,246,0.1);
  box-shadow: 0 2px 8px rgba(139,92,246,0.2);
}
.op-tpl-icon { font-size: 20px; }
.op-tpl-info { display: flex; flex-direction: column; }
.op-tpl-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}
.op-tpl-btn.active .op-tpl-name { color: var(--primary-light); }
.op-tpl-desc {
  font-size: 10px;
  color: var(--text-tertiary);
}
.op-add-user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--gradient-primary);
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.15s;
  box-shadow: 0 3px 12px rgba(139,92,246,0.3);
}
.op-add-user-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(139,92,246,0.4);
}

/* 主体 */
.op-main {
  flex: 1;
  display: grid;
  grid-template-columns: 340px 1fr 320px;
  gap: 10px;
  min-height: 0;
}
.op-left-col, .op-center-col, .op-right-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
}
.op-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.op-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
}
.op-ch-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.op-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.op-panel-title svg { color: var(--primary-light); }
.op-org-count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* 组织树 */
.op-org-search {
  position: relative;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
}
.op-org-search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
}
.op-org-search-input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  font-size: 12px;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.op-org-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(139,92,246,0.15);
}

.op-org-tree {
  padding: 8px 0;
  max-height: 420px;
  overflow-y: auto;
}
.op-org-node-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  cursor: pointer;
  transition: all 0.15s;
  border-left: 3px solid transparent;
}
.op-org-node-row:hover {
  background: var(--bg-hover);
}
.op-org-node-row.active {
  background: rgba(139,92,246,0.08);
  border-left-color: var(--primary);
}
.op-org-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.op-org-toggle.open { transform: rotate(90deg); }
.op-org-toggle svg { color: var(--text-tertiary); }
.op-org-toggle-spacer { width: 16px; flex-shrink: 0; }
.op-org-icon { font-size: 14px; flex-shrink: 0; }
.op-org-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-org-users {
  font-size: 10px;
  color: var(--text-tertiary);
  background: var(--bg-panel);
  padding: 1px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}
.op-org-children { display: block; }

.op-org-summary {
  display: flex;
  gap: 1px;
  background: var(--border-color);
  border-top: 1px solid var(--border-color);
}
.op-os-item {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
  background: var(--bg-panel);
}
.op-os-value {
  font-size: 18px;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: ui-monospace, monospace;
  line-height: 1;
}
.op-os-label {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* 权限矩阵 */
.op-matrix-count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.op-matrix-legend {
  display: flex;
  gap: 12px;
}
.op-ml-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--text-tertiary);
}
.op-ml-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.op-ml-manage { background: #dc2626; }
.op-ml-write { background: #3b82f6; }
.op-ml-approve { background: #22c55e; }
.op-ml-read { background: #64748b; }
.op-ml-none { background: #1e293b; border: 1px solid #334155; }

.op-matrix-table {
  overflow-x: auto;
}
.op-mt-head {
  display: grid;
  grid-template-columns: 180px repeat(6, 1fr);
  gap: 1px;
  background: var(--border-color);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 2;
}
.op-mt-corner {
  background: var(--bg-panel);
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
}
.op-mt-col-head {
  background: var(--bg-panel);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.op-mt-ch-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.op-mt-ch-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
}

.op-mt-body { display: flex; flex-direction: column; }
.op-mt-row {
  display: grid;
  grid-template-columns: 180px repeat(6, 1fr);
  gap: 1px;
  background: var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.op-mt-row:last-child { border-bottom: none; }
.op-mt-row-head {
  background: var(--bg-panel);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.op-mt-rh-icon { font-size: 14px; }
.op-mt-rh-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.op-mt-rh-group {
  font-size: 9px;
  color: var(--text-tertiary);
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 8px;
}
.op-mt-cell {
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  gap: 3px;
  transition: all 0.15s;
  cursor: pointer;
}
.op-mt-cell:hover {
  filter: brightness(1.15);
}
.op-mt-cell-icon { font-size: 14px; }
.op-mt-cell-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.op-mt-manage { background: rgba(220,38,38,0.15); }
.op-mt-manage .op-mt-cell-label { color: #f87171; }
.op-mt-write { background: rgba(59,130,246,0.15); }
.op-mt-write .op-mt-cell-label { color: #60a5fa; }
.op-mt-approve { background: rgba(34,197,94,0.15); }
.op-mt-approve .op-mt-cell-label { color: #4ade80; }
.op-mt-submit { background: rgba(245,158,11,0.15); }
.op-mt-submit .op-mt-cell-label { color: #fbbf24; }
.op-mt-read { background: rgba(100,116,139,0.1); }
.op-mt-read .op-mt-cell-label { color: #94a3b8; }
.op-mt-none { background: rgba(30,41,59,0.3); }
.op-mt-none .op-mt-cell-label { color: #475569; }
.op-mt-none .op-mt-cell-icon { opacity: 0.4; }

/* 审计日志 */
.op-view-all-btn {
  font-size: 11px;
  color: var(--primary-light);
  font-weight: 600;
  background: none;
}
.op-audit-list {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.op-audit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  transition: all 0.15s;
}
.op-audit-item:hover { background: var(--bg-hover); }
.op-ai-time {
  display: flex;
  flex-direction: column;
  width: 50px;
  flex-shrink: 0;
}
.op-ai-date {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 600;
}
.op-ai-clock {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: ui-monospace, monospace;
  font-weight: 600;
}
.op-ai-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.op-ai-content { flex: 1; min-width: 0; }
.op-ai-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.op-ai-detail {
  font-size: 10px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-ai-user {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.op-ai-avatar { font-size: 16px; }
.op-ai-user-name {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* 数据隔离 */
.op-isolation-visual {
  padding: 16px;
}
.op-iso-circles {
  position: relative;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.op-iso-svg {
  width: 180px;
  height: 180px;
}
.op-iso-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.op-iso-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-panel);
  border-radius: 7px;
}
.op-iso-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.op-iso-info { flex: 1; }
.op-iso-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}
.op-iso-role {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 1px;
}
.op-iso-desc {
  font-size: 10px;
  color: var(--text-tertiary);
  text-align: right;
  max-width: 90px;
}

/* 用户详情 */
.op-user-detail { padding: 14px 16px; }
.op-ud-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.op-ud-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(168,85,247,0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.op-ud-info { flex: 1; }
.op-ud-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.op-ud-role {
  font-size: 11px;
  color: var(--text-tertiary);
}
.op-ud-status {
  font-size: 10px;
  padding: 2px 8px;
  background: rgba(34,197,94,0.12);
  color: var(--accent-green);
  border-radius: 10px;
  font-weight: 600;
}

.op-ud-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}
.op-uds-item {
  background: var(--bg-panel);
  padding: 8px 10px;
  border-radius: 6px;
}
.op-uds-label {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-bottom: 3px;
}
.op-uds-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: ui-monospace, monospace;
}

.op-ud-perm-tags { margin-bottom: 14px; }
.op-ud-pt-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.op-ud-pt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.op-ud-tag {
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--primary-light);
  background: rgba(139,92,246,0.1);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 10px;
}

.op-ud-actions {
  display: flex;
  gap: 8px;
}
.op-ud-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 7px;
  transition: all 0.15s;
}
.op-ud-btn-primary {
  background: var(--gradient-primary);
  color: white;
}
.op-ud-btn-secondary {
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
}
.op-ud-btn-secondary:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}

/* ====== 11.2 品牌与车型库 ====== */
.bg1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  overflow-y: auto;
}

/* 顶部栏 */
.bg-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 18px;
  flex-shrink: 0;
}
.bg-tb-left { display: flex; flex-direction: column; gap: 3px; }
.bg-title { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.bg-subtitle { font-size: 11px; color: var(--text-tertiary); }
.bg-tb-right { display: flex; align-items: center; gap: 14px; }

.bg-asset-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.bg-at-btn {
  padding: 7px 14px;
  font-size: 12px;
  color: var(--text-tertiary);
  background: transparent;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.15s;
}
.bg-at-btn:hover { color: var(--text-secondary); }
.bg-at-btn.active {
  background: var(--gradient-primary);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(139,92,246,0.3);
}
.bg-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--gradient-primary);
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.15s;
  box-shadow: 0 3px 12px rgba(139,92,246,0.3);
}
.bg-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(139,92,246,0.4);
}

/* 主体 */
.bg-main {
  flex: 1;
  display: grid;
  grid-template-columns: 320px 1fr 360px;
  gap: 10px;
  min-height: 0;
}
.bg-left-col, .bg-center-col, .bg-right-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
}
.bg-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.bg-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
}
.bg-ch-left { display: flex; align-items: center; gap: 10px; }
.bg-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.bg-panel-title svg { color: var(--primary-light); }
.bg-brand-count, .bg-variant-count, .bg-compliance-count, .bg-asset-count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* 品牌矩阵 */
.bg-brand-list { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.bg-brand-item {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.2s;
}
.bg-brand-item.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(139,92,246,0.12);
}
.bg-bi-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
}
.bg-bi-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
  background: rgba(255,255,255,0.03);
}
.bg-bi-letter { font-weight: 800; letter-spacing: 0.5px; }
.bg-bi-info { flex: 1; min-width: 0; }
.bg-bi-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.bg-bi-position {
  font-size: 11px;
  color: var(--text-tertiary);
}
.bg-bi-toggle {
  color: var(--text-tertiary);
  transition: transform 0.2s;
}
.bg-bi-toggle.open { transform: rotate(180deg); }
.bg-bi-toggle svg { color: var(--text-tertiary); }

.bg-bi-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border-color);
  border-top: 1px solid var(--border-color);
  padding: 0;
}
.bg-bi-stat {
  background: var(--bg-card);
  padding: 8px 4px;
  text-align: center;
}
.bg-bi-sv {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: ui-monospace, monospace;
  line-height: 1;
}
.bg-bi-sl {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-top: 3px;
}

.bg-bi-models {
  padding: 6px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bg-model-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
}
.bg-model-item:hover {
  border-color: var(--brand-color);
  transform: translateX(2px);
}
.bg-model-item.active {
  background: color-mix(in srgb, var(--brand-color) 10%, transparent);
  border-color: var(--brand-color);
}
.bg-model-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bg-model-info { flex: 1; min-width: 0; }
.bg-model-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}
.bg-model-tag {
  font-size: 10px;
  color: var(--text-tertiary);
}
.bg-model-hot { font-size: 12px; }
.bg-model-price {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 600;
  font-family: ui-monospace, monospace;
  flex-shrink: 0;
}

/* 车型详情卡 */
.bg-vh-name {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  background: rgba(139,92,246,0.1);
  border-radius: 10px;
}
.bg-edit-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 11px;
  color: var(--primary-light);
  background: rgba(139,92,246,0.1);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.15s;
}
.bg-edit-btn:hover { background: rgba(139,92,246,0.18); }

.bg-vehicle-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(168,85,247,0.03));
  border-bottom: 1px solid var(--border-color);
}
.bg-vh-badge {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.bg-vh-info { flex: 1; }
.bg-vh-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}
.bg-vh-position {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.bg-vh-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.bg-vh-status { display: flex; gap: 6px; }
.bg-vhs-tag {
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  background: rgba(34,197,94,0.12);
  color: var(--accent-green);
}
.bg-vhs-hot {
  background: rgba(245,158,11,0.12);
  color: var(--accent-orange);
}

.bg-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}
.bg-section:last-child { border-bottom: none; }
.bg-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bg-section-title svg { color: var(--primary-light); }

.bg-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.bg-hl-item {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: var(--bg-panel);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  transition: all 0.15s;
}
.bg-hl-item:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}
.bg-hl-icon { font-size: 24px; flex-shrink: 0; }
.bg-hl-content { flex: 1; min-width: 0; }
.bg-hl-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.bg-hl-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

.bg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bg-tag {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
  border-radius: 14px;
  background: rgba(139,92,246,0.05);
  transition: all 0.15s;
}
.bg-tag:hover { transform: scale(1.05); }

.bg-specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.bg-spec-item {
  padding: 10px 12px;
  background: var(--bg-panel);
  border-radius: 7px;
  border: 1px solid var(--border-color);
}
.bg-spec-label {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.bg-spec-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: ui-monospace, monospace;
}

/* 合规状态 */
.bg-compliance-grid {
  padding: 12px 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.bg-cmp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.bg-cmp-flag { font-size: 22px; flex-shrink: 0; }
.bg-cmp-info { flex: 1; min-width: 0; }
.bg-cmp-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.bg-cmp-status {
  font-size: 10px;
  font-weight: 600;
}
.bg-cmp-status.ok { color: var(--accent-green); }
.bg-cmp-status.partial { color: var(--accent-orange); }
.bg-cmp-status.restricted { color: var(--accent-red); }
.bg-cmp-detail {
  font-size: 10px;
  color: var(--text-tertiary);
  text-align: right;
  flex-shrink: 0;
  max-width: 80px;
}

/* 区域变体 */
.bg-region-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}
.bg-rt-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  font-weight: 500;
  transition: all 0.15s;
}
.bg-rt-btn:hover { color: var(--text-secondary); border-color: var(--border-hover); }
.bg-rt-btn.active {
  background: color-mix(in srgb, var(--region-color) 15%, transparent);
  border-color: var(--region-color);
  color: var(--region-color);
  font-weight: 600;
}
.bg-rt-flag { font-size: 14px; }

.bg-variant-detail {
  padding: 14px 16px;
  border-top: 3px solid;
}
.bg-vd-tagline {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  font-style: italic;
  padding: 12px 16px;
  background: var(--bg-panel);
  border-radius: 8px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.bg-vd-section { margin-bottom: 14px; }
.bg-vd-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bg-vd-colors {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.bg-vdc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 60px;
}
.bg-vdc-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.bg-vdc-name {
  font-size: 9px;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
}

.bg-vd-priorities {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bg-vdp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--bg-panel);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-primary);
}
.bg-vdp-rank {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, monospace;
  flex-shrink: 0;
}
.bg-vdp-text { font-weight: 600; }

.bg-vd-diff {
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(168,85,247,0.04));
  border: 1px solid rgba(139,92,246,0.15);
  border-radius: 7px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 品牌元素预览 */
.bg-asset-preview { padding: 12px 14px; }

.bg-ap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.bg-ap-logo-item {
  text-align: center;
  padding: 10px 8px;
  background: var(--bg-panel);
  border-radius: 7px;
  border: 1px solid var(--border-color);
}
.bg-ap-logo-preview {
  height: 50px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  background: var(--bg-card);
}
.bg-ap-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bg-ap-meta { font-size: 9px; color: var(--text-tertiary); }

.bg-ap-colors { display: flex; flex-direction: column; gap: 6px; }
.bg-ap-color-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-panel);
  border-radius: 7px;
}
.bg-ap-color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.bg-ap-color-info { flex: 1; min-width: 0; }
.bg-ap-color-hex {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: ui-monospace, monospace;
}
.bg-ap-color-desc {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

.bg-ap-fonts { display: flex; flex-direction: column; gap: 8px; }
.bg-ap-font-item {
  padding: 10px 12px;
  background: var(--bg-panel);
  border-radius: 7px;
  border: 1px solid var(--border-color);
}
.bg-ap-font-preview {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.bg-ap-font-usage {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-bottom: 3px;
}
.bg-ap-font-weights {
  font-size: 9px;
  color: var(--text-tertiary);
  opacity: 0.7;
}

.bg-ap-copy { display: flex; flex-direction: column; gap: 5px; }
.bg-ap-copy-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-panel);
  border-radius: 6px;
  border-left: 3px solid var(--primary);
}
.bg-ap-copy-num {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary-light);
  font-family: ui-monospace, monospace;
  flex-shrink: 0;
}
.bg-ap-copy-text {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.bg-ap-taboo { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.bg-ap-taboo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--bg-panel);
  border-radius: 6px;
  font-size: 11px;
}
.bg-ap-taboo-word {
  font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
  min-width: 60px;
  font-family: ui-monospace, monospace;
  text-decoration: line-through;
  text-decoration-color: rgba(239,68,68,0.5);
}
.bg-ap-taboo-level {
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 8px;
  flex-shrink: 0;
}
.bg-ap-taboo-reason {
  font-size: 10px;
  color: var(--text-tertiary);
  flex: 1;
  min-width: 0;
}

/* ============================================================
   顶部演示路径流程条 demo-flow-bar（2026-08-26）
   需求：用户 demo 内部评审提出"演示时需要一条主线指引"
   行为：默认折叠（~40px 高，显示当前步骤），hover 展开为 8 步卡片
   风格：暗色 + 紫渐变，激活步骤用紫色高亮
   ============================================================ */

.demo-flow-bar {
  position: relative;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-deep) 100%);
  border-bottom: 1px solid var(--border-color);
  z-index: 50;
  cursor: default;
}

/* 折叠态轨道（默认显示） */
.demo-flow-track {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  gap: 10px;
  user-select: none;
}
.demo-flow-track-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.5);
  flex-shrink: 0;
  animation: dfb-pulse 2s ease-in-out infinite;
}
@keyframes dfb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.demo-flow-track-label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.demo-flow-track-sep {
  color: var(--text-tertiary);
  opacity: 0.5;
}
.demo-flow-track-current {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
}
.demo-flow-track-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-tertiary);
  opacity: 0.6;
}
.demo-flow-track-chevron {
  font-size: 9px;
  color: var(--text-tertiary);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.demo-flow-bar:hover .demo-flow-track-chevron {
  transform: rotate(180deg);
}

/* 展开面板（hover 时显示） */
.demo-flow-panel {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.28s ease, opacity 0.22s ease, visibility 0.28s;
}
.demo-flow-bar:hover .demo-flow-panel,
.demo-flow-bar:focus-within .demo-flow-panel {
  max-height: 180px;
  opacity: 1;
  visibility: visible;
}
.demo-flow-panel-inner {
  padding: 16px 20px 18px;
}
.demo-flow-cards {
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* 步骤卡片 */
.demo-flow-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  color: var(--text-primary);
  font-family: inherit;
  min-width: 0;
}
.demo-flow-card:hover {
  border-color: rgba(124, 58, 237, 0.5);
  background: rgba(124, 58, 237, 0.08);
  transform: translateY(-1px);
}
.demo-flow-card.demo-flow-active {
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  border-color: #7c3aed;
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.demo-flow-card.demo-flow-active:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
}
.demo-flow-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--text-secondary);
}
.demo-flow-card:not(.demo-flow-active) .demo-flow-num {
  background: var(--bg-deep);
  color: var(--text-secondary);
}
.demo-flow-card.demo-flow-active .demo-flow-num {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.demo-flow-text {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.demo-flow-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-flow-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-flow-card.demo-flow-active .demo-flow-sub {
  color: rgba(255, 255, 255, 0.8);
}

/* 步骤间连接器 » */
.demo-flow-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 16px;
  font-weight: 700;
  padding: 0 4px;
  flex-shrink: 0;
  letter-spacing: -2px;
}