._bubble_19m9x_1 {
  margin: var(--ds-space-3, 12px) 0;
  border-left: 2px solid var(--ds-border, #e5e7eb);
  padding-left: var(--ds-space-3, 12px);
}

._head_19m9x_7 {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2, 8px);
  background: none;
  border: 0;
  padding: var(--ds-space-2, 8px) 0;
  cursor: pointer;
  font-size: 12px;
  color: var(--ds-text-muted, #6b7280);
}

._head_19m9x_7:disabled {
  cursor: default;
}

._caret_19m9x_23 {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  transition: transform 0.15s ease;
}

[data-state="expanded"] ._caret_19m9x_23 {
  transform: rotate(90deg);
}

[data-state="streaming"] ._caret_19m9x_23 {
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  background: var(--ds-text, #18181b);
  animation: _pulse_19m9x_1 1s ease-in-out infinite;
}

@keyframes _pulse_19m9x_1 {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

[data-state="streaming"] ._duration_19m9x_58 {
  display: none;
}

._title_19m9x_62 {
  color: var(--ds-text, #18181b);
}

._duration_19m9x_58 {
  font-variant-numeric: tabular-nums;
  color: var(--ds-text-muted, #6b7280);
}

._body_19m9x_71 {
  margin-top: var(--ds-space-2, 8px);
  padding: var(--ds-space-3, 12px);
  background: var(--ds-bg-alt, #f5f5f5);
  border-radius: var(--ds-radius-md, 8px);
  color: var(--ds-text-muted, #6b7280);
  font-size: 12px;
  white-space: pre-wrap;
  line-height: 1.6;
}

[data-state="streaming"] ._body_19m9x_71::after {
  content: "\25CD";
  display: inline-block;
  margin-left: 2px;
  animation: _blink_19m9x_1 1s steps(2, end) infinite;
}

@keyframes _blink_19m9x_1 {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
/* Plan-B Task 1.1 — narrow variant CSS for dock (380px) */

.conversation-shell.narrow .conversation-shell-main {
  /* dock container 决定外宽，本组件占满 */
  width: 100%;
}

.conversation-shell.narrow .conversation-messages {
  max-width: none !important;
  padding: 16px 12px 12px !important;
}

.conversation-shell.narrow .reply-input,
.conversation-shell.narrow textarea {
  font-size: 13px;
}

/* narrow variant 直接不渲染 ChatHeader（见 ChatPaneView.tsx），无需 CSS 隐藏 */
/* DataCard widget shared CSS module
   All widget class families live here; tasks append their families below.
   Token source: frontend/src/styles/global-design.css (--ds-* tokens)
   SVG colours: hardcoded #0078d4 / #4da6ff per design spec (v2.html aligned) */

/* ============================================================
   Task 1: Sparkline (.compactSpark family)
   Source: v2.html lines 203-241
   ============================================================ */

._compactSpark_azxz6_7 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
}

._csHead_azxz6_17 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11px;
}

._csTitle_azxz6_24 {
  color: var(--ds-text-muted);
  font-weight: 600;
}

._csEnd_azxz6_29 {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
}

._csDelta_azxz6_36 {
  color: var(--ds-success);
  font-weight: 700;
  margin-left: 2px;
}

._csDeltaDown_azxz6_42 {
  color: var(--ds-danger);
  font-weight: 700;
  margin-left: 2px;
}

._csAxis_azxz6_48 {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--ds-text-subtle);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Task 2: KpiCell (.kpiMini / .kpiCell / .skeletonBar families)
   Source: v2.html lines 169-194 (kpi-mini) + 554-610 (kpi-cell / skeleton)
   ============================================================ */

/* compact-mini variant */
._kpiMini_azxz6_57 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._kpiMiniLabel_azxz6_68 {
  font-size: 10px;
  color: var(--ds-text-subtle);
  font-weight: 600;
  letter-spacing: 0.02em;
}

._kpiMiniNum_azxz6_75 {
  font-size: 18px;
  font-weight: 800;
  color: var(--ds-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

._kpiMiniDeltaUp_azxz6_84 {
  font-size: 10px;
  font-weight: 600;
  color: var(--ds-success);
}

._kpiMiniDeltaDown_azxz6_90 {
  font-size: 10px;
  font-weight: 600;
  color: var(--ds-danger);
}

._kpiMiniDeltaPlaceholder_azxz6_96 {
  font-size: 10px;
  font-weight: 600;
  color: var(--ds-text-subtle);
}

/* expanded-row variant */
._kpiCell_azxz6_57 {
  padding: var(--ds-space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
}

._kpiHead_azxz6_113 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
  color: var(--ds-text);
}

._kpiIcon_azxz6_121 {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--ds-text);
  background: var(--ds-bg-alt);
  border-radius: var(--ds-radius-sm);
}

._kpiNum_azxz6_133 {
  font-size: 26px;
  font-weight: 800;
  color: var(--ds-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

._kpiLabel_azxz6_142 {
  font-size: 11px;
  color: var(--ds-text-subtle);
  font-weight: 600;
}

._kpiDeltaUp_azxz6_148 {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-success);
}

._kpiDeltaDown_azxz6_154 {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-danger);
}

._kpiDeltaPlaceholder_azxz6_160 {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text-subtle);
}

/* skeleton variant */
._skeletonBar_azxz6_57 {
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-deep);
}

._kpiCellSkeleton_azxz6_172 {
  gap: var(--ds-space-2);
}

._kpiCellSkeleton_azxz6_172 ._skeletonBar_azxz6_57:nth-child(1) { height: 22px; width: 60%; }
._kpiCellSkeleton_azxz6_172 ._skeletonBar_azxz6_57:nth-child(2) { height: 9px; width: 78%; }
._kpiCellSkeleton_azxz6_172 ._skeletonBar_azxz6_57:nth-child(3) { height: 9px; width: 50%; }

/* ============================================================
   Task 3: FilterBar (.filterBar / .filterChip / .filterBar* / .fb* / .fc* families)
   Source: v2.html lines 528-610
   ============================================================ */

._filterBar_azxz6_181 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-4);
  background: var(--ds-bg-alt);
  border-bottom: 1px solid var(--ds-border);
  flex-wrap: wrap;
  min-height: 40px;
}

._filterBarDisabled_azxz6_196 {
  opacity: 0.5;
  pointer-events: none;
}

._fbLabel_azxz6_201 {
  font-size: 10px;
  font-weight: 600;
  color: var(--ds-text-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

._filterChip_azxz6_181 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg);
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}

._filterChip_azxz6_181:hover {
  border-color: var(--ds-accent);
  background: var(--ds-bg-alt);
}

._filterChipActive_azxz6_231 {
  border-color: var(--ds-accent);
  background: var(--ds-accent-subtle, color-mix(in srgb, var(--ds-accent) 10%, transparent));
  color: var(--ds-accent);
}

._fcCaret_azxz6_237 {
  font-size: 9px;
  opacity: 0.6;
}

._fbSpacer_azxz6_242 {
  flex: 1;
}

._filterBarCta_azxz6_246 {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: 3px 10px;
  border: 1px solid var(--ds-accent);
  border-radius: var(--ds-radius-sm);
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-accent);
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

._filterBarCta_azxz6_246:hover {
  background: var(--ds-accent-subtle, color-mix(in srgb, var(--ds-accent) 10%, transparent));
}

._filterBarExport_azxz6_266 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 10px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg);
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text);
  cursor: pointer;
  transition: border-color 0.15s;
  flex-shrink: 0;
}

._filterBarExport_azxz6_266:hover {
  border-color: var(--ds-accent);
}

._fbCaret_azxz6_286 {
  font-size: 9px;
  opacity: 0.6;
}

._fbDisabledHint_azxz6_291 {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text-subtle);
  font-style: italic;
}

/* ============================================================
   Task 4: StatusStrip (.compactStatus / .statusStrip families)
   Source: v2.html lines 244-291 (compact-status) + 620-655 (status-strip + dot variants)
   ============================================================ */

._compactStatus_azxz6_299 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  font-size: 10px;
  color: var(--ds-text-subtle);
  flex-wrap: wrap;
}

._csChip_azxz6_312 {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-alt);
  font-size: 10px;
  font-weight: 600;
  color: var(--ds-text);
}

._csUpdated_azxz6_324 {
  font-size: 10px;
  color: var(--ds-text-subtle);
}

._csSyncBtn_azxz6_329 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg);
  font-size: 10px;
  font-weight: 600;
  color: var(--ds-text);
  cursor: pointer;
  transition: border-color 0.15s;
}

._csSyncBtn_azxz6_329:hover {
  border-color: var(--ds-accent);
}

._csSyncIcon_azxz6_348 {
  font-size: 11px;
}

._statusStrip_azxz6_299 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-4);
  background: var(--ds-bg-alt);
  border-bottom: 1px solid var(--ds-border);
  font-size: 11px;
  color: var(--ds-text-subtle);
  flex-wrap: wrap;
}

._dotSuccess_azxz6_364 {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ds-success);
  flex-shrink: 0;
}

._dotRunning_azxz6_373 {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ds-accent);
  flex-shrink: 0;
  animation: _ssPulse_azxz6_1 1.2s ease-in-out infinite;
}

._dotFail_azxz6_383 {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ds-danger);
  flex-shrink: 0;
}

@keyframes _ssPulse_azxz6_1 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ============================================================
   Task 5: SyncProgressCell (.syncProgressCell / .syncStat family)
   Source: v2.html lines 763-820
   ============================================================ */

._syncProgressCell_azxz6_398 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-bg-alt);
  border-bottom: 1px solid var(--ds-border);
}

._syncProgressHead_azxz6_411 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ds-text);
  font-weight: 600;
}

._spPct_azxz6_420 {
  color: var(--ds-accent);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

._spEta_azxz6_426 {
  font-size: 10px;
  color: var(--ds-text-subtle);
  font-weight: 500;
}

._syncBar_azxz6_432 {
  height: 6px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-deep);
  overflow: hidden;
}

._syncBarFill_azxz6_439 {
  height: 100%;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-accent);
  transition: width 0.3s ease;
}

._syncStats_azxz6_446 {
  display: flex;
  gap: var(--ds-space-3);
  flex-wrap: wrap;
}

._syncStat_azxz6_398 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 52px;
}

._syncStatFail_azxz6_459 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 52px;
}

._ssNum_azxz6_466 {
  font-size: 16px;
  font-weight: 800;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

._syncStatFail_azxz6_459 ._ssNum_azxz6_466 {
  color: var(--ds-danger);
}

._ssLabel_azxz6_478 {
  font-size: 9px;
  color: var(--ds-text-subtle);
  font-weight: 600;
  letter-spacing: 0.02em;
}

._syncCurrentStep_azxz6_485 {
  font-size: 10px;
  color: var(--ds-text-subtle);
  line-height: 1.4;
}

/* ============================================================
   Task 6: Mini charts (.chartCell / .chartHead / .chartTitle /
   .chartSub / .chartLegend / .lg / .lgSw / .chartCanvas / .chartSvg)
   Source: v2.html lines 667-735
   ============================================================ */

._chartCell_azxz6_492 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
}

._chartHead_azxz6_492 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11px;
}

._chartTitle_azxz6_492 {
  color: var(--ds-text);
  font-weight: 700;
}

._chartSub_azxz6_493 {
  font-size: 10px;
  color: var(--ds-text-subtle);
  font-weight: 500;
}

._chartLegend_azxz6_493 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-size: 10px;
  color: var(--ds-text-subtle);
}

._lg_azxz6_493 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

._lgSw_azxz6_493 {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

._chartCanvas_azxz6_493 {
  position: relative;
  width: 100%;
}

._chartSvg_azxz6_493 {
  display: block;
  width: 100%;
  height: 80px;
}

/* ============================================================
   Task 7: DetailTable (.tableShell / .detailTable / .titleCell /
   .platCell / .numCell / .linkCell / .unsyncChip / .tableFoot /
   .tablePager / .pagerBtn / .pagerPage / .sortGlyph)
   Source: v2.html lines 737-826
   ============================================================ */

._tableShell_azxz6_555 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  overflow-x: auto;
}

._detailTable_azxz6_555 {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

._detailTable_azxz6_555 thead th {
  padding: 6px 8px;
  text-align: left;
  font-weight: 700;
  color: var(--ds-text-subtle);
  border-bottom: 1px solid var(--ds-border);
  white-space: nowrap;
}

._detailTable_azxz6_555 tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--ds-border-subtle, var(--ds-border));
  color: var(--ds-text);
  vertical-align: middle;
}

._detailTable_azxz6_555 tbody tr:last-child td {
  border-bottom: none;
}

._titleCell_azxz6_555 {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._platCell_azxz6_556 {
  white-space: nowrap;
  color: var(--ds-text-subtle);
}

._numCell_azxz6_556 {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

._linkCell_azxz6_556 {
  white-space: nowrap;
}

._linkCell_azxz6_556 a {
  color: var(--ds-accent, #0078d4);
  text-decoration: none;
  font-size: 11px;
  cursor: pointer;
}

._linkCell_azxz6_556 a:hover {
  text-decoration: underline;
}

._unsyncChip_azxz6_556 {
  display: inline-block;
  font-size: 10px;
  color: var(--ds-text-subtle);
  background: var(--ds-fill-subtle, #f3f4f6);
  border-radius: 3px;
  padding: 1px 4px;
  font-weight: 500;
}

._sortGlyph_azxz6_557 {
  margin-left: 3px;
  font-size: 9px;
  color: var(--ds-text-subtle);
}

._tableFoot_azxz6_556 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ds-text-subtle);
  padding: 0 2px;
}

._tablePager_azxz6_557 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
}

._pagerBtn_azxz6_557 {
  background: none;
  border: 1px solid var(--ds-border);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ds-text);
  line-height: 1.4;
}

._pagerBtn_azxz6_557:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

._pagerPage_azxz6_557 {
  font-size: 11px;
  color: var(--ds-text-subtle);
  font-variant-numeric: tabular-nums;
}

/* ── Task 8: VideoInlineCard ─────────────────────────────────── */

._vidInlineCard_azxz6_681 {
  display: flex;
  gap: var(--ds-space-4);
  padding: var(--ds-space-4);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-bg);
}

._vicThumb_azxz6_690 {
  position: relative;
  width: 120px;
  flex-shrink: 0;
  aspect-ratio: 9 / 16;
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  background: linear-gradient(135deg, #44403c 0%, #292524 100%);
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
}

._vicFlag_azxz6_701 {
  position: absolute;
  top: var(--ds-space-2);
  left: var(--ds-space-2);
  padding: 2px var(--ds-space-2);
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--ds-text-on-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--ds-radius-pill);
  z-index: 2;
}

._vicDur_azxz6_717 {
  position: absolute;
  top: var(--ds-space-2);
  right: var(--ds-space-2);
  padding: 2px var(--ds-space-2);
  background: rgba(0, 0, 0, 0.6);
  color: var(--ds-text-on-ink);
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--ds-radius-pill);
  font-variant-numeric: tabular-nums;
  z-index: 2;
}

._vicPlay_azxz6_731 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--ds-text);
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

._vicBottom_azxz6_749 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--ds-space-4) var(--ds-space-2) var(--ds-space-2);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
  color: var(--ds-text-on-ink);
  z-index: 1;
}

._vicMiniTitle_azxz6_760 {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

._vicInfo_azxz6_770 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}

._vicHead_azxz6_778 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

._vicTitle_azxz6_784 {
  font-size: 15px;
  font-weight: 800;
  color: var(--ds-text);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

._vicMeta_azxz6_792 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--ds-text-muted);
}

._vicChip_azxz6_801 {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--ds-space-2);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-bg-alt);
  color: var(--ds-text-muted);
  font-weight: 600;
}

._vicChipPlat_azxz6_811 {
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
}

._vicStatsRow_azxz6_816 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) 0;
  border-top: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
}

._vicStat_azxz6_816 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._vicStatNum_azxz6_831 {
  font-size: 18px;
  font-weight: 800;
  color: var(--ds-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

._vicStatLabel_azxz6_840 {
  font-size: 10px;
  color: var(--ds-text-subtle);
  font-weight: 600;
}

._vicStatDeltaUp_azxz6_846 {
  font-size: 10px;
  font-weight: 600;
  color: var(--ds-success);
}

._vicStatDeltaDown_azxz6_852 {
  font-size: 10px;
  font-weight: 600;
  color: var(--ds-danger);
}

._vicDerived_azxz6_858 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ds-text-muted);
}

._vdKey_azxz6_867 {
  color: var(--ds-text-subtle);
  margin-right: 4px;
}

._vdPending_azxz6_872 {
  color: var(--ds-text-subtle);
  font-style: italic;
}

._vicActions_azxz6_877 {
  display: flex;
  gap: var(--ds-space-2);
  margin-top: auto;
  flex-wrap: wrap;
}

._vicBtn_azxz6_884 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg);
  color: var(--ds-text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

._vicBtn_azxz6_884:hover {
  border-color: var(--ds-border-strong);
  color: var(--ds-text);
  background: var(--ds-bg-alt);
}

._vicBtnArrow_azxz6_906 {
  font-size: 11px;
  opacity: 0.8;
}

._vicBtnIcon_azxz6_911 {
  width: 32px;
  padding: 0;
  justify-content: center;
  font-size: 14px;
}

/* ── Task 9: DataCardCompact (canvasCard / cardHead / cardBody / kpi2x2 /
   genPreview / genProgress / failPreview / cardCtaWrap families)
   Source: _base.css lines 770-824, 1028-1099 + v2.html lines 163-354
   ─────────────────────────────────────────────────────────────────── */

._canvasCard_azxz6_923 {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-deep);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._canvasCardGenerating_azxz6_933 {
  border-style: dashed;
  border-color: var(--ds-border-strong);
  box-shadow: none;
}

._canvasCardFailed_azxz6_939 {
  border-style: solid;
  border-color: var(--ds-danger);
  box-shadow: none;
}

._cardHead_azxz6_945 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border);
}

._cardEmoji_azxz6_953 {
  font-size: 15px;
  flex-shrink: 0;
}

._cardTitle_azxz6_958 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._cardBody_azxz6_967 {
  padding: var(--ds-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}

/* 2×2 KPI grid */
._kpi2x2_azxz6_975 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-2) var(--ds-space-3);
}

/* generating state */
._genPreview_azxz6_982 {
  height: 132px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
}

._genIcon_azxz6_993 {
  font-size: 30px;
  color: var(--ds-text-subtle);
}

._genHint_azxz6_998 {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text-muted);
}

._genProgress_azxz6_1004 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

._genProgressRow_azxz6_1010 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text);
}

._genEta_azxz6_1019 {
  font-weight: 500;
  color: var(--ds-text-muted);
}

._genBar_azxz6_1024 {
  height: 6px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-bg-deep);
  overflow: hidden;
}

._genBarFill_azxz6_1031 {
  height: 100%;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-success);
}

._cardMeta_azxz6_1037 {
  font-size: 12px;
  color: var(--ds-text-muted);
  line-height: 1.6;
}

/* failed state */
._failPreview_azxz6_1044 {
  height: 132px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-danger-tint);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
}

._failIcon_azxz6_1055 {
  font-size: 28px;
  color: var(--ds-danger);
}

._failHint_azxz6_1060 {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-danger);
}

._failReason_azxz6_1066 {
  font-size: 12px;
  color: var(--ds-text-muted);
  line-height: 1.6;
}

/* CTA wrap + full-width button */
._cardCtaWrap_azxz6_1073 {
  padding: var(--ds-space-2) var(--ds-space-4) var(--ds-space-4);
}

._cardCtaFull_azxz6_1077 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  width: 100%;
  height: 36px;
  border: none;
  border-radius: var(--ds-radius-md);
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: opacity 0.15s;
}

._cardCtaFull_azxz6_1077:hover {
  opacity: 0.85;
}

._ctaArrow_azxz6_1099 {
  font-size: 12px;
  opacity: 0.7;
  transition: transform 0.15s, opacity 0.15s;
}

._cardCtaFull_azxz6_1077:hover ._ctaArrow_azxz6_1099 {
  transform: translateX(2px);
  opacity: 1;
}

/* ── Task 10: DataCardExpanded (canvasCardFull / statusBadge* / expandCollapseBtn /
   fullBody / exBlock / exLabel / labelCount / kpiRow / chartRow / chartEmpty /
   errorBox / ebIcon / metaGrid / cardActions / cardAction* families)
   Source: v2.html lines 332-870
   ─────────────────────────────────────────────────────────────────────────── */

._canvasCardFull_azxz6_1116 {
  width: 100%;
  min-width: 760px;
}

._statusBadgeSuccess_azxz6_1121 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--ds-radius-pill);
  background: color-mix(in srgb, var(--ds-success) 12%, transparent);
  color: var(--ds-success);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

._statusBadgeRunning_azxz6_1134 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--ds-radius-pill);
  background: color-mix(in srgb, var(--ds-accent) 12%, transparent);
  color: var(--ds-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

._statusBadgeFail_azxz6_1147 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-danger-tint);
  color: var(--ds-danger);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

._expandCollapseBtn_azxz6_1160 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg);
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

._expandCollapseBtn_azxz6_1160:hover {
  border-color: var(--ds-border-strong);
  color: var(--ds-text);
}

._fullBody_azxz6_1182 {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

._exBlock_azxz6_1188 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border);
}

._exLabel_azxz6_1196 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-space-2);
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-text-subtle);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

._labelCount_azxz6_1208 {
  font-size: 10px;
  font-weight: 500;
  color: var(--ds-text-subtle);
  text-transform: none;
  letter-spacing: 0;
}

._kpiRow_azxz6_1216 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--ds-space-3);
}

._chartRow_azxz6_1222 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-space-4);
}

._chartEmpty_azxz6_1228 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg-deep);
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text-subtle);
  text-align: center;
  padding: var(--ds-space-4);
}

._errorBox_azxz6_1242 {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-radius: var(--ds-radius-md);
  background: var(--ds-danger-tint);
  border: 1px solid color-mix(in srgb, var(--ds-danger) 20%, transparent);
  font-size: 12px;
  color: var(--ds-text);
  line-height: 1.5;
}

._ebIcon_azxz6_1255 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ds-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  margin-top: 1px;
}

._metaGrid_azxz6_1270 {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--ds-space-2) var(--ds-space-4);
  margin: 0;
  font-size: 12px;
}

._metaGrid_azxz6_1270 dt {
  font-weight: 600;
  color: var(--ds-text-subtle);
  white-space: nowrap;
}

._metaGrid_azxz6_1270 dd {
  color: var(--ds-text);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

._cardActions_azxz6_1290 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-top: 1px solid var(--ds-border);
  flex-wrap: wrap;
}

._cardAction_azxz6_1290 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg);
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
}

._cardAction_azxz6_1290:hover {
  border-color: var(--ds-border-strong);
  color: var(--ds-text);
  background: var(--ds-bg-alt);
}

._cardActionPrimary_azxz6_1322 {
  border-color: var(--ds-accent);
  color: var(--ds-accent);
  background: color-mix(in srgb, var(--ds-accent) 6%, transparent);
}

._cardActionPrimary_azxz6_1322:hover {
  background: color-mix(in srgb, var(--ds-accent) 12%, transparent);
  border-color: var(--ds-accent);
  color: var(--ds-accent);
}

._cardActionDanger_azxz6_1334 {
  border-color: color-mix(in srgb, var(--ds-danger) 40%, transparent);
  color: var(--ds-danger);
  background: transparent;
}

._cardActionDanger_azxz6_1334:hover {
  background: var(--ds-danger-tint);
  border-color: var(--ds-danger);
  color: var(--ds-danger);
}

/* ============================================================
   Task 11: VideoDetailCard (.vd* family)
   Source: v2.html lines 1102-1330
   ============================================================ */

._statusBadgeNeutral_azxz6_1351 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--ds-text-muted) 10%, transparent);
  color: var(--ds-text-muted);
  border: 1px solid color-mix(in srgb, var(--ds-text-muted) 20%, transparent);
  flex-shrink: 0;
}

._vdBreadcrumb_azxz6_1365 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 6px;
  font-size: 11px;
  color: var(--ds-text-muted);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ds-border);
}

._vdBreadcrumbBack_azxz6_1376 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--ds-accent);
  font-size: 11px;
  font-weight: 600;
  transition: color 0.15s;
}

._vdBreadcrumbBack_azxz6_1376:hover {
  color: var(--ds-accent-hover, var(--ds-accent));
  text-decoration: underline;
}

._vdBreadcrumbSep_azxz6_1395 {
  color: var(--ds-border-strong);
  font-size: 11px;
}

._vdBody_azxz6_1400 {
  display: flex;
  gap: 16px;
  padding: 16px;
  overflow: auto;
  flex: 1;
}

._vdPreview_azxz6_1408 {
  position: relative;
  width: 140px;
  min-width: 140px;
  aspect-ratio: 9 / 16;
  border-radius: var(--ds-radius);
  background: var(--ds-bg-alt);
  border: 1px solid var(--ds-border);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

._vdFlag_azxz6_1422 {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: color-mix(in srgb, #000 55%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._vdDur_azxz6_1439 {
  position: absolute;
  bottom: 56px;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: color-mix(in srgb, #000 50%, transparent);
  padding: 1px 5px;
  border-radius: 3px;
  z-index: 1;
  font-variant-numeric: tabular-nums;
}

._vdPlay_azxz6_1453 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, #000 45%, transparent);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s, transform 0.1s;
}

._vdPlay_azxz6_1453:hover {
  background: color-mix(in srgb, #000 65%, transparent);
  transform: translate(-50%, -50%) scale(1.08);
}

._vdBottom_azxz6_1477 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 8px 8px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, #000 70%, transparent));
  z-index: 1;
}

._vdThumbnailTitle_azxz6_1487 {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 2px;
}

._vdThumbnailSub_azxz6_1495 {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.3;
}

._vdInfo_azxz6_1501 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

._vdHead_azxz6_1509 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._vdTitleMain_azxz6_1515 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-text);
  line-height: 1.4;
}

._vdDesc_azxz6_1522 {
  font-size: 12px;
  color: var(--ds-text-muted);
  line-height: 1.5;
}

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

._vdTag_azxz6_1528 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--ds-border);
  color: var(--ds-text-muted);
  background: var(--ds-bg-alt);
}

._vdTagPlat_azxz6_1546 {
  border-color: color-mix(in srgb, var(--ds-accent) 35%, transparent);
  color: var(--ds-accent);
  background: color-mix(in srgb, var(--ds-accent) 6%, transparent);
}

._vdMetaGrid_azxz6_1552 {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 0;
  padding: 10px 12px;
  background: var(--ds-bg-alt);
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
}

._vdMetaGrid_azxz6_1552 dt {
  font-size: 11px;
  color: var(--ds-text-muted);
  white-space: nowrap;
}

._vdMetaGrid_azxz6_1552 dd {
  font-size: 11px;
  color: var(--ds-text);
  margin: 0;
  word-break: break-all;
}

._mono_azxz6_1576 {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.03em;
}

._vdPlatformsLabel_azxz6_1582 {
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

._vdKpiGrid_azxz6_1591 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

._vdKpi_azxz6_1591 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-alt);
  border: 1px solid var(--ds-border);
}

._vdKpiNum_azxz6_1607 {
  font-size: 18px;
  font-weight: 800;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

._vdKpiLabel_azxz6_1615 {
  font-size: 10px;
  color: var(--ds-text-muted);
  font-weight: 500;
}

._vdKpiDeltaUp_azxz6_1621 {
  font-size: 10px;
  color: var(--ds-success);
  font-weight: 600;
}

._vdKpiDeltaDown_azxz6_1627 {
  font-size: 10px;
  color: var(--ds-danger);
  font-weight: 600;
}

._vdKpiDeltaPlaceholder_azxz6_1633 {
  font-size: 10px;
  color: var(--ds-text-subtle);
  font-weight: 600;
}

._vdPlatforms_azxz6_1582 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._vdPlatformRow_azxz6_1645 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-alt);
  border: 1px solid var(--ds-border);
  flex-wrap: wrap;
}

._vdPlatformHead_azxz6_1656 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 60px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-text);
}

._vdPlatformIcon_azxz6_1667 {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ds-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-accent) 25%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-accent);
  flex-shrink: 0;
}

._vdPlatformName_azxz6_1682 {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-text);
  min-width: 40px;
  flex-shrink: 0;
}

._vdPlatformLabel_azxz6_1690 {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-text);
}

._vdPlatformStats_azxz6_1696 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  flex: 1;
  font-size: 11px;
  color: var(--ds-text-muted);
}

._vdPlatformStats_azxz6_1696 b {
  color: var(--ds-text);
  font-weight: 700;
}

._vdPlatformLink_azxz6_1710 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-accent);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid color-mix(in srgb, var(--ds-accent) 30%, transparent);
  background: color-mix(in srgb, var(--ds-accent) 5%, transparent);
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

._vdPlatformLink_azxz6_1710:hover {
  background: color-mix(in srgb, var(--ds-accent) 12%, transparent);
  border-color: var(--ds-accent);
}

._vdActions_azxz6_1731 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--ds-border);
}
.dr-card-shell {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  padding: 36px 48px 40px;
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.03);
  min-height: 100%;
}
.dr-card-shell__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px; margin-bottom: 24px;
  border-bottom: 1px solid var(--ds-border);
}
.dr-card-shell__left { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.dr-card-shell__back {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--ds-border); background: var(--ds-bg);
  color: var(--ds-text-muted); cursor: pointer; font-size: 14px;
}
.dr-card-shell__back:hover { background: var(--ds-bg-alt); color: var(--ds-text); }
.dr-card-shell__title { font-weight: 600; }
.dr-card-shell__right { display: flex; gap: 6px; }
.dr-card-shell__body { max-width: 720px; margin: 0 auto; }

.dr-eyebrow {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--ds-text-muted);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.dr-eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; }
.dr-eyebrow__dot--warn { background: #d97706; }
.dr-eyebrow__dot--live { background: #10b981; animation: dr-pulse 2s infinite; }
.dr-eyebrow__dot--done { background: #10b981; }
.dr-hero-title { margin: 0 0 10px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.dr-hero-sub { margin: 0 0 18px; font-size: 14px; color: var(--ds-text-muted); line-height: 1.6; }
.dr-warn-banner {
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.28);
  border-radius: 10px; padding: 14px 16px;
  font-size: 13px; color: #92400e; line-height: 1.6; margin-bottom: 22px;
}
.dr-warn-banner ul { padding-left: 18px; margin: 6px 0 0; }
.dr-warn-banner li { line-height: 1.7; }
.dr-warn-banner__hint { margin-top: 4px; }
.dr-ok-banner {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 10px; padding: 14px 16px;
  font-size: 13px; color: #166534; line-height: 1.6; margin-bottom: 22px;
}
.dr-ok-banner__hint { margin-top: 4px; }
.dr-btn-row { display: flex; gap: 8px; align-items: center; }
.dr-btn {
  font-size: 13px; padding: 9px 18px;
  border-radius: 8px; border: 1px solid var(--ds-border);
  background: var(--ds-bg); cursor: pointer; font-weight: 600;
}
.dr-btn--primary { background: var(--ds-text); color: #fff; border-color: var(--ds-text); flex: 1; }
.dr-btn--ghost { background: transparent; color: var(--ds-text-muted); }
@keyframes dr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* DRPlanView §12 ink override — neutralize azure accents in console scope */
.dr-plan-wrapper { color: var(--ds-text); }
.dr-plan-wrapper button.ant-btn-primary {
  background: var(--ds-text) !important;
  border-color: var(--ds-text) !important;
  color: #fff !important;
}

/* ===== DRRunningView (STATE 3) ===== */

/* meta row */
.dr-meta-row {
  display: flex; flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid var(--ds-border); border-radius: 10px;
  background: var(--ds-surface); font-size: 12px;
  margin-bottom: 20px;
}
.dr-meta-cell {
  display: flex; flex-direction: column;
  padding: 0 18px; border-right: 1px solid var(--ds-border);
}
.dr-meta-cell:first-child { padding-left: 0; }
.dr-meta-cell:last-child { border-right: none; padding-right: 0; }
.dr-meta-l {
  font-size: 10px; color: var(--ds-text-subtle);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; margin-bottom: 4px;
}
.dr-meta-v {
  font-size: 16px; font-weight: 700;
  color: var(--ds-text); font-variant-numeric: tabular-nums;
}

/* section bar */
.dr-section-bar { display: flex; align-items: center; gap: 12px; margin: 24px 0 12px; }
.dr-section-bar__label {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--ds-text-subtle); white-space: nowrap;
}
.dr-section-bar__rule { flex: 1; height: 1px; background: var(--ds-border); }
.dr-section-bar__count {
  font-size: 11px; color: var(--ds-text-subtle); font-variant-numeric: tabular-nums;
}

/* live status */
.dr-live-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--ds-bg-alt); border: 1px solid var(--ds-border);
  font-size: 12px; color: var(--ds-text); margin-bottom: 8px;
}
.dr-spin {
  width: 10px; height: 10px;
  border: 1.5px solid var(--ds-border-strong);
  border-top-color: var(--ds-text);
  border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* timeline */
.dr-timeline {
  position: relative; margin-left: 4px; padding-left: 24px;
  border-left: 1px solid var(--ds-border);
  display: flex; flex-direction: column; gap: 18px;
  list-style: none; margin-top: 0; padding-top: 0;
}
.dr-step { position: relative; }
.dr-step::before {
  content: ''; position: absolute; left: -29px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ds-bg); border: 1.5px solid var(--ds-border); box-sizing: border-box;
}
.dr-step--done::before { background: var(--dr-success, #10b981); border-color: var(--dr-success, #10b981); }
.dr-step--done::after {
  content: ''; position: absolute; left: -26px; top: 7px;
  width: 4px; height: 6px; border: solid #fff;
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.dr-step--active::before {
  background: transparent; border-color: var(--ds-text);
  animation: spin 1.2s linear infinite;
  border-top-color: transparent; border-right-color: transparent;
}
.dr-step--todo::before { background: var(--ds-bg); border-color: var(--ds-border-strong); }
.dr-step__title { font-size: 14px; color: var(--ds-text); line-height: 1.5; }
.dr-step--active .dr-step__title { font-weight: 600; }
.dr-step--todo .dr-step__title { color: var(--ds-text-subtle); }

/* thinking disclosure */
.dr-disclosure {
  border: 1px solid var(--ds-border); border-radius: 10px;
  background: var(--ds-surface); margin-top: 12px; overflow: hidden;
}
.dr-disclosure summary {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; user-select: none;
  list-style: none;
}
.dr-disclosure summary::-webkit-details-marker { display: none; }
.dr-thinking-content {
  font-size: 13px; color: var(--ds-text-muted); line-height: 1.65;
  font-family: ui-monospace, monospace;
  padding: 4px 16px 16px; border-top: 1px solid var(--ds-border);
}
.dr-thinking-content p { margin: 0 0 10px; }

/* ===== DRDoneView (STATE 4) ===== */

/* DRDoneView §12 ink override: neutralize ResearchOutputView azure accents */
.dr-output-wrapper .rov-section h3 { color: var(--ds-text) !important; }
.dr-output-wrapper .ant-progress-bg {
  background: var(--ds-text) !important;
  background-image: none !important;
}
.dr-output-wrapper .ant-btn-primary {
  background: var(--ds-text) !important;
  border-color: var(--ds-text) !important;
}
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
  cursor: -webkit-grab;
  cursor: grab;
}
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__pane.dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow .react-flow__edges {
  pointer-events: none;
  overflow: visible;
}
.react-flow__edge-path,
.react-flow__connection-path {
  stroke: #b1b1b7;
  stroke-width: 1;
  fill: none;
}
.react-flow__edge {
  pointer-events: visibleStroke;
  cursor: pointer;
}
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    -webkit-animation: dashdraw 0.5s linear infinite;
            animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    -webkit-animation: none;
            animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge:focus .react-flow__edge-path,
  .react-flow__edge:focus-visible .react-flow__edge-path {
    stroke: #555;
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge-textbg {
    fill: white;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    -webkit-animation: dashdraw 0.5s linear infinite;
            animation: dashdraw 0.5s linear infinite;
  }
.react-flow__connectionline {
  z-index: 1001;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: -webkit-grab;
  cursor: grab;
}
.react-flow__node.dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: -webkit-grab;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background: #1a192b;
  border: 1px solid white;
  border-radius: 100%;
}
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-top {
    left: 50%;
    top: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-left {
    top: 50%;
    left: -4px;
    transform: translate(0, -50%);
  }
.react-flow__handle-right {
    right: -4px;
    top: 50%;
    transform: translate(0, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.center {
    left: 50%;
    transform: translateX(-50%);
  }
.react-flow__attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.5);
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@-webkit-keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: 3px;
  width: 150px;
  font-size: 12px;
  color: #222;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: #1a192b;
  background-color: white;
}
.react-flow__node-default.selectable:hover, .react-flow__node-input.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
    }
.react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: 0 0 0 0.5px #1a192b;
    }
.react-flow__node-group {
  background-color: rgba(240, 240, 240, 0.25);
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: rgba(0, 89, 220, 0.08);
  border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls {
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
}
.react-flow__controls-button {
    border: none;
    background: #fefefe;
    border-bottom: 1px solid #eee;
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    padding: 5px;
  }
.react-flow__controls-button:hover {
      background: #f4f4f4;
    }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__minimap {
  background-color: #fff;
}
.react-flow__minimap svg {
  display: block;
}
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 4px;
  height: 4px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: #3367d9;
  transform: translate(-50%, -50%);
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: #3367d9;
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
/*
 * console s4a · 视频卡 5 状态视觉
 * 视觉权威源：docs/design/console-redesign/2026-05-17-s4a-final-5states.html
 *   + 2026-05-17-s4a-highlight-options.html（h2 breathe-glow 方案）。
 * mindmap 下卡由 reactflow 节点定位 —— 不含 grid / canvas-stage 容器规则。
 * Token 全用 --ds-*（global-design.css 权威）。
 */

@keyframes vcard-ambient {
  0%, 100% { transform: translate(0, 0); opacity: 0.6; }
  50% { transform: translate(8%, -6%); opacity: 0.9; }
}
@keyframes vcard-spin { to { transform: rotate(360deg); } }
@keyframes vcard-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes breathe-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(24, 24, 27, 0.25), 0 24px 48px -24px rgba(24, 24, 27, 0.20); }
  50% { box-shadow: 0 0 0 6px rgba(24, 24, 27, 0), 0 24px 48px -20px rgba(24, 24, 27, 0.30); }
}

/* ===== 卡共用骨架 ===== */
.vcard {
  width: 240px;
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  box-shadow: var(--ds-shadow-deep);
  background: var(--ds-bg);
  border: 1px solid var(--ds-border-strong);
  position: relative;
  cursor: pointer;
}
/* 到达瞬间 pop-in + ink 高亮环（spec §3.2 阶段 C 弱化版）。
 * vcard-pop-in 一次性 0.6s 进入；vcard-ring 一次性 1.4s 后淡出。
 * 不再做 breathe-glow 持续呼吸（box-shadow 1.8s 节奏整张卡反复脱动过于打扰）；
 * 5min HIGHLIGHT 窗口由 mindmap minimap / toast 等独立路径表达，卡本身不再常驻动效。 */
.vcard--highlight {
  animation:
    vcard-pop-in 0.6s ease,
    vcard-ring 1.4s ease forwards;
}
@keyframes vcard-pop-in {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes vcard-ring {
  0%, 50% {
    box-shadow:
      0 0 0 2px var(--ds-text),
      0 0 0 6px rgba(24, 24, 27, 0.08);
  }
  100% {
    box-shadow:
      0 0 0 0 transparent,
      0 0 0 0 transparent;
  }
}
.vthumb {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
}

/* 无海报态占位：暗色 bg + 居中 mode emoji（spec §574）。
   底色复用 preprocessing 卡的深灰渐变，确保 vbottom 白字 / CTA 对比足够。 */
.vthumb--placeholder {
  background: linear-gradient(135deg, #44403c 0%, #292524 100%);
}
/* 缩略图可点击态（spec §4.2 上半区 onClick=onPlay）：
 * cursor 指针 + hover 轻微 brightness 反馈，告诉用户该区域可点。
 * 仅 VSuccess / VPublished 用；VFail / VGenerating / VPreprocessing 不加。 */
.vthumb--clickable { cursor: pointer; }
.vthumb--clickable:hover { filter: brightness(0.95); }
.vthumb-emoji {
  position: absolute;
  top: 28%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 52px;
  line-height: 1;
  opacity: 0.6;
  z-index: 1;
  user-select: none;
}

/* preprocessing 背景：深灰 + ambient */
.bg-pp {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #44403c 0%, #292524 100%);
}
.bg-pp::after {
  content: '';
  position: absolute;
  width: 50%; height: 50%;
  left: 25%; top: 25%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  animation: vcard-ambient 5s ease-in-out infinite;
}

/* generating 背景：深色 + 双色 ambient 流光 */
.bg-gen {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #27272a 0%, #18181b 100%);
}
.bg-gen::before {
  content: '';
  position: absolute;
  width: 70%; height: 70%;
  left: -10%; top: 10%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.32) 0%, transparent 70%);
  animation: vcard-ambient 4.5s ease-in-out infinite;
}
.bg-gen::after {
  content: '';
  position: absolute;
  width: 60%; height: 60%;
  right: -5%; bottom: 5%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.20) 0%, transparent 70%);
  animation: vcard-ambient 6s ease-in-out infinite reverse;
}

/* fail 背景：红 tint */
.bg-fail {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(239, 68, 68, 0.36) 100%);
}

/* ===== 顶部 flag 行 ===== */
.vtop {
  position: absolute;
  top: var(--ds-space-2);
  left: var(--ds-space-2);
  right: var(--ds-space-2);
  display: flex;
  gap: 4px;
  align-items: center;
  z-index: 4;
}
.vflag {
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--ds-radius-pill);
  color: var(--ds-text-on-ink);
  display: inline-flex; align-items: center; gap: 3px;
}
.vflag.f-pp { background: rgba(255, 255, 255, 0.22); backdrop-filter: blur(8px); }
.vflag.f-gen { background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); }
.vflag.f-gen .live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ds-success);
  animation: vcard-pulse 1.4s infinite;
}
.vflag.f-success { background: var(--ds-warning); }
.vflag.f-pub { background: rgba(24, 24, 27, 0.85); }
.vflag.f-fail { background: var(--ds-danger); }
.veta {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--ds-text-on-ink);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  padding: 1px 6px;
  border-radius: var(--ds-radius-pill);
}

/* ===== 中央区域 ===== */
.vcenter {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  text-align: center;
  color: var(--ds-text-on-ink);
  z-index: 3;
  width: 88%;
}

/* preprocessing spinner */
.pp-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: vcard-spin 0.9s linear infinite;
  margin: 0 auto var(--ds-space-3);
}
.pp-text {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.pp-sub {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
}

/* generating ring */
.gen-ring {
  position: relative;
  width: 96px; height: 96px;
  margin: 0 auto var(--ds-space-2);
}
.gen-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gen-ring .track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 6;
}
/* 段内连续 grow：CSS animation 驱动，--seg-start / --seg-end 由 VRingProgress 设置 */
.gen-ring .progress {
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 251.3274;
  stroke-dashoffset: var(--seg-start, 251.3274);
  animation: ring-fill 20s linear forwards;
}
@keyframes ring-fill {
  from { stroke-dashoffset: var(--seg-start); }
  to   { stroke-dashoffset: var(--seg-end); }
}

/* Glyph 中心字符 */
.gen-ring-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  color: var(--ds-text-on-ink);
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.25));
  animation: glyph-breathe 2.4s ease-in-out infinite;
  z-index: 2;
}
@keyframes glyph-breathe {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* 步骤胶囊 第 N / M 步 — C2 layout */
.gen-step-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--ds-radius-pill);
  background: rgba(255, 255, 255, 0.16);
  color: var(--ds-text-on-ink);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  backdrop-filter: blur(6px);
}
.gen-step-chip b {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.gen-step-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ds-text-on-ink);
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

/* 思考行：current_step_summary 入场打字 + 渐隐切换 */
.gen-step-think {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  min-height: 14px;
  padding: 0 4px;
  animation: think-enter 0.3s ease-out;
}
@keyframes think-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 底部 5 步标签行（≤6 步显示）*/
.gen-seg-labels {
  position: absolute;
  bottom: 76px;
  left: var(--ds-space-3);
  right: var(--ds-space-3);
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  letter-spacing: 0.04em;
  z-index: 4;
  pointer-events: none;
}
.gen-seg-labels span { flex: 1; text-align: center; }
.gen-seg-labels span.active { color: rgba(255, 255, 255, 0.95); }

/* 底部分段 bar */
.gen-seg-bar {
  position: absolute;
  bottom: 60px;
  left: var(--ds-space-3);
  right: var(--ds-space-3);
  display: flex;
  gap: 4px;
  align-items: center;
  z-index: 4;
}
.gen-seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  position: relative;
  overflow: hidden;
}
.gen-seg.done { background: rgba(255, 255, 255, 0.78); }
.gen-seg.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.4) 100%);
  width: 55%;
  animation: seg-fill 2.4s ease-in-out infinite;
}
@keyframes seg-fill {
  0%   { width: 20%; }
  100% { width: 90%; }
}

/* success / published center: play 按钮 */
.play-btn {
  width: 44px; height: 44px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--ds-text);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.4);
  border: none;
  cursor: pointer;
}

/* fail center */
.fail-icon {
  font-size: 40px;
  color: var(--ds-danger);
  margin-bottom: var(--ds-space-2);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.fail-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-text-on-ink);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ===== 底部信息层 ===== */
.vbottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--ds-space-4) var(--ds-space-2) var(--ds-space-2);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
  color: var(--ds-text-on-ink);
  z-index: 4;
}
.vbottom.bg-fail-tint {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(239, 68, 68, 0.7) 100%);
}
.vtitle {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid transparent;
}
/* inline 编辑可点击态（spec §4.3，VSuccess 用；VPublished editable=false 不加）：
 * hover 浅白底 + 浅白边提示该字段可点改；颜色全程白色（vbottom 暗色 gradient 上）。 */
.vtitle--editable { cursor: text; }
.vtitle--editable:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}
.vtitle-input {
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-text-on-ink);
  padding: 1px 4px;
  border: 1px solid var(--ds-text-on-ink);
  border-radius: 4px;
  outline: none;
  background: rgba(0, 0, 0, 0.5);
  font-family: inherit;
}
.vdesc {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.4;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid transparent;
}
/* inline 编辑可点击态（spec §4.3，VSuccess 用；VPublished editable=false 不加）。 */
.vdesc--editable { cursor: text; }
.vdesc--editable:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}
.vdesc--empty {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}
.vdesc-input {
  width: 100%;
  font-size: 9px;
  color: var(--ds-text-on-ink);
  padding: 3px 6px;
  border: 1px solid var(--ds-text-on-ink);
  border-radius: 4px;
  outline: none;
  background: rgba(0, 0, 0, 0.5);
  font-family: inherit;
  resize: none;
  line-height: 1.4;
}
.vmeta {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 4px;
}
.vkpi {
  display: flex;
  gap: 6px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 4px;
}
.vkpi b {
  color: var(--ds-text-on-ink);
  font-weight: 800;
}
.fail-msg {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 4px;
  line-height: 1.4;
}

/* tags 编辑器 */
.vtags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.vtag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 600;
  border-radius: var(--ds-radius-pill);
  background: rgba(255, 255, 255, 0.18);
  color: var(--ds-text-on-ink);
  backdrop-filter: blur(4px);
}
.vtag-label {
  line-height: 1.2;
  cursor: text;
  padding: 0 1px;
  border-radius: 3px;
  outline: none;
}
.vtag-label:hover,
.vtag-label:focus-visible { background: rgba(255, 255, 255, 0.15); }
.vtag-x {
  cursor: pointer;
  font-weight: 700;
  opacity: 0.7;
}
.vtag-x:hover { opacity: 1; }
.vtag-x--disabled { cursor: default; opacity: 0.35; pointer-events: none; }
.vtag-add {
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: var(--ds-radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: var(--ds-text-on-ink);
  border: 1px dashed rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.vtag-add:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.7);
}
.vtag-add--empty { padding: 2px 8px; }

/* 内联输入态（新增） */
.vtag-input {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--ds-radius-pill);
  background: rgba(255, 255, 255, 0.22);
  color: var(--ds-text-on-ink);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}
/* 编辑现有 chip：复用 .vtag 的尺寸，叠加聚焦框 */
.vtag.vtag-editing {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
  padding: 0 5px;
}
.vtag-hash { color: rgba(255, 255, 255, 0.8); user-select: none; }
.vtag-input-el {
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ds-text-on-ink);
  font: inherit;
  width: 64px;
  max-width: 140px;
  padding: 0;
  caret-color: #fff;
}
.vtag-input-el::placeholder { color: rgba(255, 255, 255, 0.45); }
.vtag-input.is-error,
.vtag.vtag-editing.is-error {
  border-color: var(--ds-danger);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}
.vtag-err {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: 9px;
  color: #fca5a5;
  line-height: 1.2;
}

/* 操作按钮行 */
.vactions {
  display: flex;
  gap: var(--ds-space-1);
  align-items: stretch;
}

/* 主按钮：卡底深色渐变上的实心白底按钮（对比足、一眼可点）。
   .vbtn 同时用于 <Link>（success/published）与 <button>（VFailCTA），
   故 box-sizing / 行高 / 居中显式声明，确保两种标签视觉一致。 */
.vbtn {
  flex: 1 1 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 var(--ds-space-3);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--ds-radius-sm);
  border: none;
  cursor: pointer;
  background: var(--ds-bg);
  color: var(--ds-text);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.45);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.vbtn:hover {
  background: var(--ds-bg-alt);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.55);
}
.vbtn:active {
  transform: translateY(1px);
  background: var(--ds-bg-deep);
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.5);
}

/* 重试按钮 in-flight：disabled + 转圈反馈，覆盖 disabled 默认 UA 样式 */
.vbtn:disabled,
.vbtn-loading {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}
.vbtn-loading:hover,
.vbtn-loading:active {
  background: var(--ds-bg);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.45);
  transform: none;
}
.vbtn-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -1px;
  animation: vbtn-spin 0.7s linear infinite;
}
@keyframes vbtn-spin {
  to { transform: rotate(360deg); }
}

/* ⋯ icon 按钮：与主按钮同高的方形玻璃态按钮 */
.vbtn.ghost {
  flex: 0 0 26px;
  width: 26px;
  min-height: 26px;
  padding: 0;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--ds-text-on-ink);
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.vbtn.ghost:hover {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}
.vbtn.ghost:active {
  transform: translateY(1px);
  background: rgba(255, 255, 255, 0.38);
  box-shadow: none;
}

/* ⋯ 菜单（VMoreMenu）— antd Dropdown 容器，仅微调间距 */
.v-more-menu .ant-dropdown-menu {
  min-width: 96px;
}

/* 错误详情弹层（VErrorDetailModal）— 业务说明 + 主操作按钮，不展示 raw message */
.v-error-detail-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v-error-detail-main {
  font-size: 14px;
  font-weight: 500;
  color: var(--ds-text);
  line-height: 1.6;
}
.v-error-detail-muted {
  font-size: 13px;
  color: var(--ds-text-muted);
  line-height: 1.6;
}

/* Modal 走 antd portal，跳出 .dp-revamp 包装，antd-overrides.css 的全局
   ink-on-ink 选择器够不到。这里在 modal className scope 内 local override，
   与 design.md §12 console no-azure 规则对齐。 */
.v-error-detail-modal .ant-btn-primary {
  background: var(--ds-text) !important;
  border-color: var(--ds-text) !important;
  color: var(--ds-text-on-ink) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}
.v-error-detail-modal .ant-btn-primary:hover,
.v-error-detail-modal .ant-btn-primary:focus {
  background: #000000 !important;
  border-color: #000000 !important;
  color: var(--ds-text-on-ink) !important;
  filter: none !important;
  box-shadow: var(--ds-shadow-cta-primary) !important;
}
.v-error-detail-modal .ant-btn-primary:disabled,
.v-error-detail-modal .ant-btn-primary[disabled] {
  background: var(--ds-bg-deep) !important;
  border-color: var(--ds-bg-deep) !important;
  color: var(--ds-text-subtle) !important;
}

/* ===== Pending skeleton card（spec §3 — 创建反馈三连 阶段 A）=====
 * 与真实视频卡同尺寸（width 240），整卡 pointer-events: none。
 * 缩略图区为 shimmer + spinner；下半区为骨架文本条；左上角 "生成中" 胶囊角标。
 * 颜色全部 ink 风格，无 azure；shimmer 用 --ds-bg-alt / --ds-bg-deep 渐变。 */
.vpending {
  width: 240px;
  background: var(--ds-bg);
  border: 1px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  position: relative;
}
.vpending-thumb {
  aspect-ratio: 9 / 12;
  background: linear-gradient(110deg, var(--ds-bg-alt) 30%, var(--ds-bg-deep) 50%, var(--ds-bg-alt) 70%);
  background-size: 220% 100%;
  animation: vpending-shimmer 1.6s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vpending-spin {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid var(--ds-border-strong);
  border-top-color: var(--ds-text);
  animation: vpending-spin 1s linear infinite;
}
.vpending-bottom {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--ds-border);
}
.vpending-skel {
  background: linear-gradient(110deg, var(--ds-bg-alt) 30%, var(--ds-bg-deep) 50%, var(--ds-bg-alt) 70%);
  background-size: 220% 100%;
  animation: vpending-shimmer 1.6s linear infinite;
  border-radius: 4px;
  height: 10px;
  margin-bottom: 6px;
}
.vpending-skel--title { width: 70%; }
.vpending-skel--desc  { width: 50%; }
.vpending-label {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(24, 24, 27, 0.72);
  color: var(--ds-text-on-ink);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
}
@keyframes vpending-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes vpending-spin {
  to { transform: rotate(360deg); }
}

/* 禁点态（spec §4.5）：VFail / VGenerating / VPreprocessing 整卡不响应预览，
   VFail 仅 .vactions 内的按钮 (VFailCTA / VMoreMenu) 仍可点。
   .vcard--disabled 直接挂在外层 .vcard 上（VideoCard.tsx），
   .vthumb pointer-events: none 防止 hover 状态污染光标；.vactions 恢复 auto
   让 "重新生成" 按钮保留可点。 */
.vcard--disabled {
  cursor: default;
  user-select: none;
}
.vcard--disabled .vthumb {
  cursor: default !important;
  pointer-events: none;
}
.vcard--disabled .vactions {
  pointer-events: auto;
}
/*
 * S9 矩阵账号管理 · MatrixAccountCard 局部样式
 *
 * Plan: docs/superpowers/plans/2026-05-25-s9-matrix-account-inline-card.md
 * 视觉范本: docs/design/console-redesign/2026-05-14-product-canvas/s9-account-inline-card.html
 *
 * 本文件按 Task 1.1 -> 1.2 -> 2.x -> 3.x 累加；本次仅追加 PlatformTileGrid 段。
 */

/* ============ PlatformTileGrid (Task 1.1) ============ */
._platTileGrid_kx2zq_11 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-space-3);
}

._platTile_kx2zq_11 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-4) var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

._platTile_kx2zq_11:hover:not(:disabled) {
  border-color: var(--ds-text);
  background: var(--ds-bg-alt);
  transform: translateY(-1px);
}

._platTileEmoji_kx2zq_37 {
  width: 44px;
  height: 44px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

._platTileName_kx2zq_48 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-text);
  letter-spacing: -0.01em;
}

._platTileCta_kx2zq_55 {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text-muted);
}

._platTile_kx2zq_11:hover:not(:disabled) ._platTileCta_kx2zq_55 {
  color: var(--ds-text);
}

._platTilePending_kx2zq_65 {
  cursor: not-allowed;
  background: var(--ds-bg-alt);
}

._platTilePending_kx2zq_65 ._platTileEmoji_kx2zq_37 {
  filter: grayscale(1);
  opacity: 0.6;
}

._platTilePending_kx2zq_65 ._platTileName_kx2zq_48,
._platTilePending_kx2zq_65 ._platTileCta_kx2zq_55 {
  color: var(--ds-text-subtle);
}

/* ============ Card 骨架（自 _base.css .canvas-card 翻译，Task 1.2） ============ */
/* 作为 ReactFlow node 内容渲染：尺寸由内部内容决定，定位由 MindmapCanvas
 * nodes 数组的 position 控制。卡内部需要明确宽度（empty/expanded 540 /
 * collapsed 280），见 .cardCollapsed / .cardExpanded。 */
._card_kx2zq_83 {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-deep);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

._cardExpanded_kx2zq_83 {
  border-color: var(--ds-border-strong);
  box-shadow: var(--ds-shadow-deep);
  width: 540px;
}

._cardHead_kx2zq_101 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border);
}

._cardEmoji_kx2zq_109 {
  font-size: 15px;
  flex-shrink: 0;
}

._cardTitle_kx2zq_114 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._cardTypeTag_kx2zq_123 {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text-subtle);
  padding: 2px var(--ds-space-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
}

._expandCollapseBtn_kx2zq_134 {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  height: 28px;
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg);
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text-muted);
  cursor: pointer;
}

/* ============ ex-body / ex-block / ex-label（Task 1.2） ============ */
._exBody_kx2zq_150 {
  padding: var(--ds-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
}

/* Module section · Kicker + 左 strip 风格（option 1）：
 * 每个 .exBlock 是一个模块段（授权概览 / 平台与账号 / 授权事件），
 * 顶部 3px ink left-strip + UPPERCASE kicker，content 自然展开无 bg 包。 */
._exBlock_kx2zq_158 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  padding-left: var(--ds-space-4);
  position: relative;
}

._exBlock_kx2zq_158::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 3px;
  height: 14px;
  background: var(--ds-text);
  border-radius: var(--ds-radius-pill);
}

._exLabel_kx2zq_179 {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-text);
}

/* labelLink: section header 右侧 inline action（"刷新所有 →" / "+ 新增授权"）。
 * 按 design.md §12 console scope no-azure：用 ink-text link 风格，不带 button
 * 边框/底色（reset 浏览器 <button> 默认 user-agent style）。hover 时 ink 加深。 */
._labelLink_kx2zq_193 {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-text-muted);
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s;
}

._labelLink_kx2zq_193:hover {
  color: var(--ds-text);
}

/* ============ empty-block 引导块（Task 1.2） ============ */
._emptyBlock_kx2zq_213 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3);
  background: var(--ds-bg-alt);
  border: 1px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
}

._emptyTitle_kx2zq_223 {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-text);
}

._emptyDesc_kx2zq_229 {
  font-size: 11px;
  color: var(--ds-text-muted);
  line-height: 1.6;
}

/* ============ card-actions 底部按钮行（Task 1.2，expanded 卡含 top border） ============ */
._cardActions_kx2zq_236 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-5);
  border-top: 1px solid var(--ds-border);
}

._cardAction_kx2zq_236 {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text-muted);
  padding: var(--ds-space-1) var(--ds-space-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

._cardAction_kx2zq_236:hover {
  border-color: var(--ds-border-strong);
  color: var(--ds-text);
  background: var(--ds-bg-alt);
}

/* 主 CTA 按钮（同预览稿 §12 console scope · .card-action--primary） */
._cardActionPrimary_kx2zq_263 {
  border: none;
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  font-weight: 700;
}

._cardActionPrimary_kx2zq_263:hover {
  opacity: 0.85;
  /* primary 按钮 hover 不走 .cardAction:hover 的边框/颜色变化 */
  border-color: transparent;
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
}

/* ============ collapsed 280px 卡（Task 3.2） ============ */
._cardCollapsed_kx2zq_83 {
  width: 280px;
}

/* card-body：collapsed 内部排版（区别于 expanded 的 ex-body） */
._cardBody_kx2zq_284 {
  padding: var(--ds-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}

/* ---- 概览数字行 .acct-summary（C-collapsed 砍掉「即将过期」，只剩 2 stat） ---- */
._summary_kx2zq_292 {
  display: flex;
  gap: var(--ds-space-3);
}

._summaryItem_kx2zq_297 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._summaryNum_kx2zq_304 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
}

._summaryLabel_kx2zq_312 {
  font-size: 11px;
  color: var(--ds-text-subtle);
}

/* ---- 平台 logo 行 .platform-row ---- */
._platformRow_kx2zq_318 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
}

._platformChip_kx2zq_324 {
  width: 28px;
  height: 28px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--ds-text);
  position: relative;
}

._platformChipDim_kx2zq_337 {
  opacity: 0.35;
  filter: grayscale(1);
}

._chipDot_kx2zq_342 {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border-radius: var(--ds-radius-pill);
  border: 1.5px solid var(--ds-bg);
}

._chipDotOk_kx2zq_352 { background: var(--ds-success); }
._chipDotWarn_kx2zq_353 { background: var(--ds-warning); }

/* ---- 最新动态迷你列表 .acct-activity ---- */
._activity_kx2zq_356 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  padding-top: var(--ds-space-1);
}

._activityRow_kx2zq_363 {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-2);
  font-size: 11px;
  line-height: 1.5;
}

._activityDot_kx2zq_371 {
  width: 6px;
  height: 6px;
  border-radius: var(--ds-radius-pill);
  margin-top: 6px;
  flex-shrink: 0;
}

._activityDotOk_kx2zq_379   { background: var(--ds-success); }
._activityDotInfo_kx2zq_380 { background: var(--ds-text); }
._activityDotWarn_kx2zq_381 { background: var(--ds-warning); }

._activityText_kx2zq_383 {
  flex: 1;
  min-width: 0;
  color: var(--ds-text);
}

._activityText_kx2zq_383 strong { font-weight: 700; }

._activityTime_kx2zq_391 {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--ds-text-subtle);
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}

/* ============ expanded 540px 卡内部布局（Task 3.3） ============ */

/* ---- 顶部概览 4 数 .acct-summary ---- */
._acctSummary_kx2zq_402 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-space-3);
}

._statItem_kx2zq_408 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._statNum_kx2zq_414 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
}

._statLabel_kx2zq_422 {
  font-size: 11px;
  color: var(--ds-text-subtle);
}

._statNumWarn_kx2zq_427 { color: var(--ds-warning); }

/* ---- 平台 × 账号 上下布局：tab bar + 全宽 list ---- */
._tabBar_kx2zq_430 {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ds-border);
  margin-bottom: var(--ds-space-3);
  overflow-x: auto;
}

._tabItem_kx2zq_438 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--ds-space-2) var(--ds-space-3);
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  font: inherit;
  color: var(--ds-text-subtle);
  white-space: nowrap;
  transition: color 0.15s;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

._tabItem_kx2zq_438:hover {
  color: var(--ds-text);
}

._tabItemSelected_kx2zq_460 {
  color: var(--ds-text);
  font-weight: 700;
}

._tabItemSelected_kx2zq_460::after {
  content: '';
  position: absolute;
  left: var(--ds-space-2);
  right: var(--ds-space-2);
  bottom: -1px;
  height: 2px;
  background: var(--ds-text);
  border-radius: var(--ds-radius-pill);
}

._tabIcon_kx2zq_476 {
  width: 22px;
  height: 22px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

._tabName_kx2zq_488 {
  font-size: 13px;
}

._tabCount_kx2zq_492 {
  font-size: 10px;
  font-weight: 700;
  color: var(--ds-text-subtle);
  background: var(--ds-bg-alt);
  padding: 0 6px;
  border-radius: var(--ds-radius-pill);
  font-variant-numeric: tabular-nums;
}

._tabItemSelected_kx2zq_460 ._tabCount_kx2zq_492 {
  background: var(--ds-text);
  color: var(--ds-bg);
}

._tabPanelHead_kx2zq_507 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-3);
  font-size: 12px;
  color: var(--ds-text-subtle);
}

._tabPanelHead_kx2zq_507 ._platDetailName_kx2zq_516 {
  font-size: 13px;
  color: var(--ds-text);
}

/* 左：mini 平台列表 */
._miniPlatformList_kx2zq_522 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg);
  overflow: hidden;
}

._miniPlatRow_kx2zq_532 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-3);
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
  border: none;
  background: var(--ds-bg);
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}

._miniPlatRow_kx2zq_532 + ._miniPlatRow_kx2zq_532 { border-top: 1px solid var(--ds-border); }

._miniPlatRow_kx2zq_532:hover { background: var(--ds-bg-alt); }

._miniPlatRowSelected_kx2zq_552 {
  background: var(--ds-bg-alt);
  font-weight: 700;
}

._miniPlatRowSelected_kx2zq_552::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 var(--ds-radius-pill) var(--ds-radius-pill) 0;
  background: var(--ds-text);
}

._miniPlatRowSelected_kx2zq_552::after {
  content: "›";
  position: absolute;
  right: calc(var(--ds-space-3) * -1 - 4px);
  top: 50%;
  transform: translateY(-55%);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--ds-text);
  pointer-events: none;
}

._miniPlatIcon_kx2zq_582 {
  width: 22px;
  height: 22px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

._miniPlatName_kx2zq_594 {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._miniPlatCount_kx2zq_605 {
  font-size: 10px;
  font-weight: 700;
  color: var(--ds-text-subtle);
  font-variant-numeric: tabular-nums;
}

._miniPlatDot_kx2zq_612 {
  width: 6px;
  height: 6px;
  border-radius: var(--ds-radius-pill);
  flex-shrink: 0;
}

._miniPlatDotOk_kx2zq_619      { background: var(--ds-success); }
._miniPlatDotWarn_kx2zq_620    { background: var(--ds-warning); }
._miniPlatDotPending_kx2zq_621 { background: var(--ds-border-strong); }

/* 右：选中平台 detail panel —— framed bg-alt 包整个右侧，与左侧 selected row 视觉对照 */
._acctDetailPanel_kx2zq_624 {
  background: var(--ds-bg-alt);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-3);
}

._platDetailHead_kx2zq_631 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-3);
  padding-bottom: var(--ds-space-2);
  border-bottom: 1px dashed var(--ds-border);
}

._platDetailIcon_kx2zq_640 {
  width: 22px;
  height: 22px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

._platDetailName_kx2zq_516 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-text);
}

._platDetailSub_kx2zq_658 {
  font-size: 11px;
  color: var(--ds-text-subtle);
}

/* 右：账号 mini 行列表 */
._acctMiniList_kx2zq_664 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

._acctMiniRow_kx2zq_670 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg);
}

._acctAvatar_kx2zq_680 {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

._acctId_kx2zq_692 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

._acctName_kx2zq_700 {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
}

._acctSub_kx2zq_707 {
  font-size: 10px;
  color: var(--ds-text-subtle);
  font-variant-numeric: tabular-nums;
}

._acctCookie_kx2zq_713 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  flex-shrink: 0;
}

._cookieBarMini_kx2zq_720 {
  width: 56px;
  height: 4px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-bg-deep);
  overflow: hidden;
}

._cookieBarMini_kx2zq_720 > i {
  display: block;
  height: 100%;
  background: var(--ds-success);
}

._cookieBarMiniWarn_kx2zq_734 { background: var(--ds-warning); }

._cookieTextMini_kx2zq_736 {
  font-size: 10px;
  font-weight: 600;
  color: var(--ds-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

._acctRowAdd_kx2zq_744 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-1);
  padding: var(--ds-space-2);
  border: 1px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg);
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text-muted);
  cursor: pointer;
  width: 100%;
}

._acctRowAdd_kx2zq_744:hover {
  border-color: var(--ds-text);
  color: var(--ds-text);
  background: var(--ds-bg-alt);
}

/* ---- 授权事件 timeline .event-mini-list ---- */
._eventMiniList_kx2zq_767 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

._eventMiniRow_kx2zq_773 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  font-size: 11px;
  line-height: 1.5;
}

._eventMiniTime_kx2zq_781 {
  flex-shrink: 0;
  width: 64px;
  font-size: 10px;
  color: var(--ds-text-subtle);
  font-variant-numeric: tabular-nums;
}

._eventMiniDot_kx2zq_789 {
  width: 6px;
  height: 6px;
  border-radius: var(--ds-radius-pill);
  flex-shrink: 0;
}

._eventMiniDotOk_kx2zq_796   { background: var(--ds-success); }
._eventMiniDotWarn_kx2zq_797 { background: var(--ds-warning); }
._eventMiniDotInfo_kx2zq_798 { background: var(--ds-text); }

._eventMiniText_kx2zq_800 {
  flex: 1;
  color: var(--ds-text);
}

._eventMiniText_kx2zq_800 strong { font-weight: 700; }
/*
 * S9 矩阵账号管理 · ExtensionInstallWizardCard 局部样式
 *
 * Plan: docs/superpowers/plans/2026-05-25-s9-matrix-account-inline-card.md
 * 视觉范本: docs/design/console-redesign/2026-05-14-product-canvas/s9-account-inline-card.html
 *
 * 本文件按 Task 2.1 -> 2.2 -> 2.3 累加。
 */

/* ============ WizardProgress 顶部 3 段进度条 (Task 2.1) ============ */
/* 翻译自预览稿 `.wizard-progress` / `.wizard-progress-step` /
 * `.wizard-progress-step::after` / `.wizard-dot` / `.wizard-dot--current|done|pending` /
 * `.wizard-label` / `.wizard-progress-step--current .wizard-label` /
 * `.wizard-progress-step--done .wizard-label` 段。
 * 全部 color / spacing / radius 使用 --ds-* token，无裸值。
 */
._wizardProgress_1h8nu_17 {
  display: flex;
  align-items: flex-start;
  padding: 0 var(--ds-space-2);
}

._wizardProgressStep_1h8nu_23 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  position: relative;
}

._wizardProgressStep_1h8nu_23:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 13px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: var(--ds-border-strong);
}

._wizardProgressStep_done_1h8nu_42:not(:last-child)::after {
  background: var(--ds-success);
}

._wizardDot_1h8nu_46 {
  width: 28px;
  height: 28px;
  border-radius: var(--ds-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

._wizardDot_current_1h8nu_60 {
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  box-shadow: 0 0 0 4px var(--ds-bg-deep);
}

._wizardDot_done_1h8nu_66 {
  background: var(--ds-success);
  color: var(--ds-text-on-ink);
}

._wizardDot_pending_1h8nu_71 {
  background: var(--ds-bg);
  border: 1.5px solid var(--ds-border-strong);
  color: var(--ds-text-subtle);
}

._wizardLabel_1h8nu_77 {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text-subtle);
  letter-spacing: 0.02em;
}

._wizardProgressStep_current_1h8nu_84 ._wizardLabel_1h8nu_77 {
  color: var(--ds-text);
  font-weight: 700;
}

._wizardProgressStep_done_1h8nu_42 ._wizardLabel_1h8nu_77 {
  color: var(--ds-text-muted);
}

/* ============ WizardStepFocus 当前步骤焦点块 (Task 2.2) ============ */
/* 翻译自预览稿 `.step-focus` / `.step-focus-icon` / `.step-focus-title` /
 * `.step-focus-sub` / `.step-cta` / `.step-cta:hover` / `.step-hint` 段。
 * 大圆 icon + 大标题 + 副文 + 大主按钮 + hint 一整块。
 * color / spacing / radius 使用 --ds-* token；几何裸值（icon 64px / cta 高 44px /
 * sub max-width 380px / font-size 11-18px / line-height 1.7）照搬预览稿。
 */
._stepFocus_1h8nu_100 {
  text-align: center;
  padding: var(--ds-space-6) var(--ds-space-5) var(--ds-space-5);
  background: var(--ds-bg-alt);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
}

._stepFocusIcon_1h8nu_108 {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--ds-space-3);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--ds-text);
}

._stepFocusTitle_1h8nu_122 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ds-text);
  margin-bottom: var(--ds-space-2);
}

._stepFocusSub_1h8nu_130 {
  font-size: 12px;
  color: var(--ds-text-muted);
  line-height: 1.7;
  max-width: 380px;
  margin: 0 auto var(--ds-space-5);
}

._stepCta_1h8nu_138 {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  height: 44px;
  padding: 0 var(--ds-space-6);
  border-radius: var(--ds-radius-md);
  border: none;
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.15s;
}

._stepCta_1h8nu_138:hover {
  opacity: 0.85;
}

._stepHint_1h8nu_158 {
  margin-top: var(--ds-space-3);
  font-size: 11px;
  color: var(--ds-text-subtle);
  text-align: center;
}

/* ============ Card 骨架 + cardHead + exBody (Task 2.3) ============ */
/* 翻译自预览稿 `.canvas-card` / `.canvas-card--expanded` / `.card-head` /
 * `.card-emoji` / `.card-title` / `.expand-collapse-btn` / `.ex-body` /
 * `.step-counter` / `.install-intro` / `code` 段。
 * width: 540px 跟预览稿 `.canvas-card--expanded` 1:1。
 */
/* 作为 ReactFlow node 内容渲染：尺寸由 .cardExpanded(540px) 决定，
 * 定位由 MindmapCanvas nodes 数组的 position 控制。 */
._card_1h8nu_166 {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-deep);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._cardExpanded_1h8nu_171 {
  border-color: var(--ds-border-strong);
  box-shadow: var(--ds-shadow-deep);
  width: 540px;
  flex-shrink: 0;
}

._cardHead_1h8nu_190 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border);
}

._cardEmoji_1h8nu_198 {
  font-size: 15px;
  flex-shrink: 0;
}

._cardTitle_1h8nu_203 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._stepCounter_1h8nu_212 {
  margin-left: var(--ds-space-2);
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-text-muted);
  padding: 2px var(--ds-space-2);
  background: var(--ds-bg-deep);
  border-radius: var(--ds-radius-pill);
  font-variant-numeric: tabular-nums;
}

._collapseBtn_1h8nu_223 {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  height: 28px;
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg);
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text-muted);
  cursor: pointer;
}

._exBody_1h8nu_239 {
  padding: var(--ds-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
}

._installIntro_1h8nu_246 {
  font-size: 12px;
  color: var(--ds-text-muted);
  line-height: 1.6;
}

._installIntro_1h8nu_246 strong {
  color: var(--ds-text);
  font-weight: 700;
}

._exBody_1h8nu_239 code {
  font-family: var(--ds-font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-text);
  background: var(--ds-bg-deep);
  padding: 1px var(--ds-space-1);
  border-radius: var(--ds-radius-sm);
}
/*
 * console s4a v2 · mindmap 画布视觉
 * 视觉权威源（spec §19.J 优先级 7-9）：
 *   docs/design/console-redesign/2026-05-19-s4a-template-card-ui.html（root 节点）
 *   docs/design/console-redesign/2026-05-19-s4a-child-draft-card-ui.html（child 工作区）
 *   docs/design/console-redesign/2026-05-19-s4a-mindmap-canvas-ui.html（画布整体 + 空态 A）
 * Token 全用 --ds-*（global-design.css 权威）；design.md §12 console no-azure
 * （主 CTA ink-on-ink，无 azure 大渐变）。
 */

/* ===== 画布容器 ===== */
.mm-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--ds-bg);
}
.mm-canvas .react-flow__background {
  background: var(--ds-bg);
}
/* dot-grid 颜色用极淡 ink */
.mm-canvas .react-flow__background path,
.mm-canvas .react-flow__background circle {
  color: rgba(24, 24, 27, 0.10);
}
/* minimap / controls 收紧到 ink，不用 azure */
/* 尺寸（168×96 小卡，视觉档案 ⑳）由 <MiniMap style={{width,height}}> 经 prop 传入——
   reactflow 的 elementWidth/Height 只认 style prop，不读此处 CSS；这里仅管视觉外观。 */
.mm-canvas .react-flow__minimap {
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--ds-shadow-card);
}
.mm-canvas .react-flow__controls button {
  background: var(--ds-bg);
  border-bottom: 1px solid var(--ds-border);
  color: var(--ds-text);
}

/* ===== 父-子连线 ===== */
.mm-canvas .react-flow__edge.mm-edge--idle .react-flow__edge-path {
  stroke: var(--ds-border-strong);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}
.mm-canvas .react-flow__edge.mm-edge--active .react-flow__edge-path {
  stroke: var(--ds-text);
  stroke-width: 2;
  stroke-dasharray: none;
}

/* ===== root 模板节点 ===== */
.mm-root {
  width: 720px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-deep);
  padding: var(--ds-space-5);
}
.mm-root-head { margin-bottom: var(--ds-space-4); }
.mm-root-title {
  font-size: 18px; font-weight: 800; color: var(--ds-text);
}
.mm-root-sub {
  font-size: 12px; color: var(--ds-text-muted); margin-top: 4px;
}
.mm-tpl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-space-3);
}
.mm-tpl-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.mm-tpl-tile:hover {
  border-color: var(--ds-border-strong);
  box-shadow: 0 4px 12px -6px rgba(24, 24, 27, 0.18);
}
.mm-tpl-tile--selected {
  border-color: var(--ds-text);
  box-shadow: 0 0 0 1px var(--ds-text);
  background: var(--ds-bg);
}
.mm-tpl-tile--dim { opacity: 0.42; }
.mm-tpl-icon { font-size: 18px; color: var(--ds-text); }
.mm-tpl-name { font-size: 13px; font-weight: 700; color: var(--ds-text); }
.mm-tpl-desc {
  font-size: 11px; color: var(--ds-text-muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mm-root-foot {
  margin-top: var(--ds-space-4);
  display: flex; justify-content: flex-end;
}
.mm-confirm-btn {
  padding: 8px 22px;
  font-size: 13px; font-weight: 700;
  border: none; border-radius: var(--ds-radius-sm);
  background: var(--ds-text); color: var(--ds-text-on-ink);
  cursor: pointer;
}
.mm-confirm-btn:disabled {
  background: var(--ds-border-strong); color: var(--ds-text-on-ink);
  cursor: not-allowed; opacity: 0.6;
}

/* ===== child 节点 ===== */
.mm-child { width: 240px; }

/* reactflow handle 极简化（不显眼） */
.mm-handle {
  width: 6px; height: 6px;
  background: var(--ds-border-strong);
  border: none;
}

/* custom workspace */
.mm-custom-workspace { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.mm-custom-actions { display: flex; gap: var(--ds-space-2); justify-content: flex-end; }

/* ai_smart workspace */
.mm-ai-smart-workspace--center {
  display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-3);
  padding: var(--ds-space-6) 0;
}
.mm-ai-smart-actions { display: flex; gap: var(--ds-space-2); }

/* workspace 主 CTA — ink-on-ink（design.md §12.2 console scope 收紧 azure） */
.mm-cta-ink.ant-btn,
.mm-cta-ink.ant-btn:focus {
  background: var(--ds-text);
  border-color: var(--ds-text);
  color: var(--ds-text-on-ink);
}
.mm-cta-ink.ant-btn:hover {
  background: var(--ds-text);
  border-color: var(--ds-text);
  color: var(--ds-text-on-ink);
  opacity: 0.88;
}
.mm-cta-ink.ant-btn:disabled,
.mm-cta-ink.ant-btn:disabled:hover {
  background: var(--ds-border-strong);
  border-color: var(--ds-border-strong);
  color: var(--ds-text-on-ink);
  opacity: 0.6;
}

/* ===== root 下方内联素材卡节点（去弹窗版素材 gate）=====
   素材未齐时挂在 root 模板节点正下方，复用 s2a 的 MaterialOnboardingCard。
   MaterialOnboardingCard 自带 .onboard-banner / .onboard-card（max-width:920 居中），
   此处只给画布节点一个固定宽度容器，让素材卡在点阵画布上成块、可被 fitView 框住。 */
.mm-material-node {
  width: 760px;
}
/* 节点内 banner / 卡片去掉自身居中外边距，由节点容器统一定宽。 */
.mm-material-node .onboard-banner,
.mm-material-node .onboard-card {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ===== dh-picker 节点容器（spec §4-§5）：和素材节点同宽，挂在其正下方。 ===== */
.mm-dh-picker-node {
  width: 760px;
}
.mm-dh-picker-node .dh-picker {
  margin: 0;
  max-width: 100%;
}

/* ===== dh-create 节点容器：同宽 760，包 DigitalHumanCreateForm。 ===== */
.mm-dh-create-node {
  width: 760px;
  padding: var(--ds-space-5);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-deep);
}

/* ===== chat embed 模板卡（Task 39）===== */
.mm-embed {
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg);
  padding: var(--ds-space-3);
}
.mm-embed-title {
  font-size: 13px; font-weight: 700; color: var(--ds-text);
  margin-bottom: var(--ds-space-3);
}
.mm-embed-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-space-2);
}
.mm-embed-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--ds-space-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mm-embed-tile:hover { border-color: var(--ds-border-strong); }
.mm-embed-tile--selected {
  border-color: var(--ds-text);
  box-shadow: 0 0 0 1px var(--ds-text);
  background: var(--ds-bg);
}
.mm-embed-icon { font-size: 16px; color: var(--ds-text); }
.mm-embed-name {
  font-size: 11px; font-weight: 600; color: var(--ds-text);
  text-align: center; line-height: 1.3;
}
.mm-embed-confirm {
  margin-top: var(--ds-space-3);
  width: 100%;
  padding: 7px 0;
  font-size: 12px; font-weight: 700;
  border: none; border-radius: var(--ds-radius-sm);
  background: var(--ds-text); color: var(--ds-text-on-ink);
  cursor: pointer;
}
.mm-embed-confirm:disabled {
  background: var(--ds-border-strong); color: var(--ds-text-on-ink);
  cursor: not-allowed; opacity: 0.6;
}

/* ===== language selection node ===== */
.mm-language-node {
  width: 360px;
  padding: var(--ds-space-4);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-bg);
  box-shadow: var(--ds-shadow-card);
}
.mm-language-head {
  margin-bottom: var(--ds-space-3);
}
.mm-language-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ds-text);
}
.mm-language-template {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ds-text-muted);
}
.mm-language-subtitle,
.mm-language-hint {
  font-size: 12px;
  color: var(--ds-text-muted);
  line-height: 1.5;
}
.mm-language-subtitle {
  margin-top: 4px;
}
.mm-language-hint {
  margin-top: var(--ds-space-3);
}
.mm-language-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ds-space-2);
}
.mm-language-option {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 8px 10px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.mm-language-option input {
  margin: 0;
  accent-color: var(--ds-text);
}
.mm-language-error {
  margin-top: var(--ds-space-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-danger, #b42318);
}
.mm-language-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-4);
}
.mm-language-secondary {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg);
  color: var(--ds-text);
  cursor: pointer;
}

/* ===== 视频卡 ⋯「确认删除」二次确认弹窗 =====
   Modal.confirm({ rootClassName: 'mm-delete-confirm' }) 经此类作用域化。
   背景：App.css 全局 `.ant-modal-confirm .ant-btn-default` 是旧深色主题遗留，
   用 `background:#2b2b2b !important` 把所有 confirm 弹窗的「取消」按钮染成
   突兀的深色实心块。此处仅在本弹窗作用域内反制，不动那条全局规则。
   v1 亮色系统下：取消 = 白底浅描边 secondary；确认删除 = 干净 danger 红。 */
.mm-delete-confirm .ant-modal-confirm-btns {
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-space-2);
}
.mm-delete-confirm .ant-modal-confirm-btns .ant-btn {
  height: 36px;
  padding: 0 18px;
  border-radius: var(--ds-radius-sm);
  font-weight: 600;
  letter-spacing: normal;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mm-delete-confirm .ant-modal-confirm-btns .ant-btn + .ant-btn {
  margin-inline-start: 0;
}

/* 取消 — 次要按钮：白底 + 浅描边，明显轻于 danger */
.mm-delete-confirm .ant-modal-confirm-btns .ant-btn-default {
  background: var(--ds-bg) !important;
  border-color: var(--ds-border-strong) !important;
  color: var(--ds-text) !important;
}
.mm-delete-confirm .ant-modal-confirm-btns .ant-btn-default:hover,
.mm-delete-confirm .ant-modal-confirm-btns .ant-btn-default:focus-visible {
  background: var(--ds-bg-alt) !important;
  border-color: var(--ds-text-subtle) !important;
  color: var(--ds-text) !important;
}

/* 确认删除 — 危险操作：干净 danger 红实心 */
.mm-delete-confirm .ant-modal-confirm-btns .ant-btn-dangerous,
.mm-delete-confirm .ant-modal-confirm-btns .ant-btn-dangerous.ant-btn-primary {
  background: var(--ds-danger) !important;
  border-color: var(--ds-danger) !important;
  color: var(--ds-text-on-accent) !important;
}
.mm-delete-confirm .ant-modal-confirm-btns .ant-btn-dangerous:hover,
.mm-delete-confirm .ant-modal-confirm-btns .ant-btn-dangerous.ant-btn-primary:hover,
.mm-delete-confirm .ant-modal-confirm-btns .ant-btn-dangerous:focus-visible,
.mm-delete-confirm .ant-modal-confirm-btns .ant-btn-dangerous.ant-btn-primary:focus-visible {
  background: #dc3a3a !important;
  border-color: #dc3a3a !important;
  color: var(--ds-text-on-accent) !important;
}

/* ===== layoutSolver-driven 位置变化让位/回弹动画 =====
   layoutSolver 驱动的 card 位置变化用 200ms ease-out 过渡平滑移动。
   仅对 transform 加 transition；ReactFlow 内部用 transform 改 position。
   用户拖动时 ReactFlow 自己会跳过 transition（dragging className），无需特殊处理。 */
.react-flow__node:not(.dragging) {
  transition: transform 200ms ease-out;
}

/* === workspace 内联卡（取代原 mm-workspace-overlay） === */
.mm-workspace-node {
  width: 760px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-deep);
  overflow: hidden;
}
.mm-workspace-node-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ds-border);
}
.mm-workspace-node-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-text);
}
.mm-workspace-node-close {
  width: 28px;
  height: 28px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  background: var(--ds-bg);
  color: var(--ds-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.mm-workspace-node-close:hover {
  border-color: var(--ds-border-strong);
  background: var(--ds-bg-alt);
}
.mm-workspace-node-body {
  padding: var(--ds-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}
/**
 * GEO 卡 canvas 样式
 * 覆盖 GeoTemplateNode / ChildArticleNode / ArticleExpandDrawer 所用 CSS 类。
 * Token 全用 --ds-*（global-design.css 权威）；console scope no-azure：
 * CTA ink-on-ink（--ds-text 黑底 + --ds-text-on-ink 白字），无 azure 大面积色块。
 */

/* ===== ribbon 标签胶囊 ===== */
.geo-ribbon {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--ds-radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.6;
}

/* ink 实心（主 badge） — ink-on-ink: 黑底白字 */
.geo-ribbon--ink {
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
}

/* outline 线框（次级）*/
.geo-ribbon--outline {
  background: transparent;
  border: 1px solid var(--ds-border-strong);
  color: var(--ds-text-muted);
}

/* warning 态（生成中）*/
.geo-ribbon--warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--ds-warning);
}

/* success 态（已完成）*/
.geo-ribbon--success {
  background: rgba(34, 197, 94, 0.12);
  color: var(--ds-success);
}

/* ===== ReactFlow Handle — 父子连线圆点 ===== */
.geo-handle {
  width: 8px;
  height: 8px;
  background: var(--ds-text);
  border: 2px solid var(--ds-bg);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--ds-border-strong);
}

/* ===== GeoTemplateNode 容器 ===== */
.geo-tpl-node {
  font-family: var(--ds-font);
}

/* ===== 动画 ===== */
/* generating 态进度点脉冲 */
@keyframes geo-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

/* streaming 光标闪烁 */
@keyframes geo-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ===== ArticleExpandDrawer 图片容器 ===== */
/* hover 显示重生按钮 */
.geo-img-wrap .geo-img-regen {
  opacity: 0;
  transition: opacity 0.15s;
}
.geo-img-wrap:hover .geo-img-regen {
  opacity: 1;
}

/* ===== ArticleExpandDrawer 段落容器 ===== */
/* hover 显示段落操作按钮 */
.geo-para-wrap .geo-para-actions {
  opacity: 0;
  transition: opacity 0.15s;
}
.geo-para-wrap:hover .geo-para-actions {
  opacity: 1;
}

/* ===== ds-shadow-card (mindmap.css 引用但未在 global-design 定义的补丁) ===== */
:root {
  --ds-shadow-card: 0 1px 4px rgba(24, 24, 27, 0.06), 0 4px 12px rgba(24, 24, 27, 0.04);
}

/* ===== 展开式文章卡 ChildArticleNode（流式 + 原地编辑） ===== */
.geo-acard { background: var(--ds-bg); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  box-shadow: 0 1px 0 rgba(24,24,27,0.02); display: flex; flex-direction: column; overflow: hidden; }
.geo-acard[data-state="draft"], .geo-acard[data-state="published"] { border-color: var(--ds-border-strong); }
.geo-acard-top { display: flex; align-items: center; gap: 8px; padding: 14px 18px 0; flex-wrap: wrap; }
.geo-acard-meta { font-size: 11px; color: var(--ds-text-muted); }
.geo-chip { display: inline-block; padding: 2px 8px; border-radius: var(--ds-radius-pill);
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.geo-chip-platform { background: var(--ds-accent-bg); color: var(--ds-accent-text); }
.geo-chip-streaming { background: rgba(245,158,11,0.12); color: var(--ds-warning); }
.geo-chip-draft, .geo-chip-published { background: rgba(34,197,94,0.12); color: var(--ds-success); }
.geo-cover { position: relative; margin: 14px 18px 0; height: 200px; border-radius: var(--ds-radius-sm);
  background-size: cover; background-position: center; }
.geo-cover-empty { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ds-bg-alt), var(--ds-bg-deep));
  color: var(--ds-text-subtle); font-size: 12px; font-weight: 600; }
.geo-acard-body { padding: 18px 24px 8px; max-height: 420px; overflow-y: auto; }
.geo-acard-body::-webkit-scrollbar { width: 8px; }
.geo-acard-body::-webkit-scrollbar-thumb { background: var(--ds-border-strong); border-radius: 8px; }
.geo-art-title { font-size: 22px; font-weight: 700; line-height: 1.4; margin: 0 0 18px; outline: none; }
.geo-art-h { font-size: 16px; font-weight: 700; margin: 18px 0 8px; outline: none; }
.geo-art-p { font-size: 14px; line-height: 1.8; color: var(--ds-text); margin: 0 0 6px; outline: none; }
.geo-art-title[contenteditable="true"]:focus, .geo-art-h[contenteditable="true"]:focus,
.geo-art-p[contenteditable="true"]:focus { box-shadow: var(--ds-focus-ring); border-radius: 6px; }
.geo-para { position: relative; border-radius: var(--ds-radius-sm); margin: 0 -10px 14px; padding: 6px 10px; }
.geo-para:hover { background: var(--ds-bg-alt); }
.geo-para-actions { display: flex; gap: 6px; margin-top: 6px; opacity: 0; transition: opacity .12s; }
.geo-para:hover .geo-para-actions { opacity: 1; }
.geo-pbtn { padding: 3px 9px; font-size: 11px; font-weight: 600; border-radius: 4px;
  border: 1px solid var(--ds-border); background: var(--ds-bg-alt); color: var(--ds-text); cursor: pointer; }
.geo-pbtn:disabled { opacity: .4; cursor: not-allowed; }
.geo-inline-img { position: relative; margin: 8px 0; height: 150px; border-radius: var(--ds-radius-sm);
  background-size: cover; background-position: center; }
.geo-img-regen { position: absolute; bottom: 8px; right: 8px; padding: 4px 10px; font-size: 11px;
  font-weight: 600; border-radius: 6px; border: none; background: var(--ds-text); color: var(--ds-text-on-ink);
  cursor: pointer; opacity: 0; transition: opacity .15s; }
.geo-img-wrap:hover .geo-img-regen { opacity: 1; }
.geo-img-regen:disabled { opacity: .6; cursor: not-allowed; }
.geo-acard-foot, .geo-stream-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-top: 1px solid var(--ds-border); }
.geo-foot-status { font-size: 11px; color: var(--ds-text-muted); }
.geo-pub-link { font-size: 11px; color: var(--ds-accent-text); text-decoration: none; }
.geo-fbtn { padding: 6px 14px; font-size: 12px; font-weight: 600; border-radius: 6px; cursor: pointer; }
.geo-fbtn:disabled { opacity: .5; cursor: not-allowed; }
.geo-fbtn-ghost { border: 1px solid var(--ds-border); background: var(--ds-bg-alt); color: var(--ds-text); }
.geo-fbtn-primary { border: none; background: var(--ds-text); color: var(--ds-text-on-ink); }
.geo-progress { flex: 1; height: 4px; border-radius: var(--ds-radius-pill); background: var(--ds-bg-alt); overflow: hidden; }
.geo-progress > i { display: block; height: 100%; width: 42%; background: var(--ds-text);
  border-radius: inherit; animation: geo-grow 2.4s ease-in-out infinite alternate; }
@keyframes geo-grow { from { width: 30%; } to { width: 72%; } }
.geo-cursor { display: inline-block; width: 2px; height: 1em; background: var(--ds-text);
  vertical-align: -2px; margin-left: 2px; animation: geo-blink .9s infinite step-end; }
/*
 * console s1 React 还原 · 局部 layout
 * 视觉 source: docs/design/console-redesign/2026-05-14-product-canvas/s1-first-empty.html
 * 所有数值用 --ds-* token；§12 console azure 收紧（按钮 ink 而非 azure）。
 */

/* ===== 三段 shell ===== */
.console-shell {
  display: grid;
  grid-template-rows: var(--ds-header-height) 1fr;
  height: 100vh;
  background: var(--ds-bg);
  color: var(--ds-text);
}

.console-body {
  display: grid;
  grid-template-columns: 1fr 440px;
  min-height: 0;
  overflow: hidden;
}

/* ===== Topbar ===== */
.console-topbar {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  padding: 0 var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-surface);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
}

.topbar-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-text);
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  font-size: 12px;
  font-weight: 800;
}

.topbar-divider {
  width: 1px;
  height: 20px;
  background: var(--ds-border);
}

.product-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-1) var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg);
  font-size: 13px;
  color: var(--ds-text);
  cursor: pointer;
}

.product-switcher--empty {
  color: var(--ds-text-subtle);
  font-weight: 500;
  border-style: dashed;
  cursor: default;
}

.product-switcher .caret {
  font-size: 10px;
  color: var(--ds-text-subtle);
}

.topbar-spacer {
  flex: 1;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
}

/* §12 console azure 收紧：所有 topbar 按钮 ghost ink，不用 azure */
.topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-1) var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg);
  font-size: 13px;
  color: var(--ds-text);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.topbar-btn:hover {
  border-color: var(--ds-border-strong);
  background: var(--ds-bg-alt);
}

.topbar-btn--icon {
  padding: var(--ds-space-1);
  width: 32px;
  height: 32px;
  justify-content: center;
  font-size: 14px;
  color: var(--ds-text-muted);
}

.topbar-btn--icon:disabled,
.product-switcher:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.topbar-btn--icon:disabled:hover,
.product-switcher:disabled:hover {
  background: var(--ds-bg);
  border-color: var(--ds-border);
}

/* ===== Canvas ===== */
.console-canvas {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--ds-bg);
}

.canvas-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-6);
  overflow: auto;
}

.canvas-placeholder {
  text-align: center;
  color: var(--ds-text-muted);
  max-width: 360px;
}

.ph-icon {
  font-size: 48px;
  margin-bottom: var(--ds-space-3);
}

.ph-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ds-text);
  letter-spacing: -0.01em;
  margin-bottom: var(--ds-space-2);
}

.ph-sub {
  font-size: 14px;
  color: var(--ds-text-muted);
}

.canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-2) var(--ds-space-5);
  border-top: 1px solid var(--ds-border);
  background: var(--ds-surface);
}

.canvas-toolbar--idle .zoom-group {
  opacity: 0.55;
  pointer-events: none;
}

.zoom-group {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg);
  padding: 2px var(--ds-space-1);
}

.zoom-group button {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--ds-text-muted);
  font-size: 14px;
  cursor: pointer;
  border-radius: var(--ds-radius-sm);
}

.zoom-group button:hover {
  background: var(--ds-bg-alt);
  color: var(--ds-text);
}

.zoom-value {
  min-width: 40px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text-muted);
}

/* ===== Dock ===== */
.console-dock {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--ds-border);
  background: var(--ds-surface);
  /* 切换器面板 / 确认气泡是 absolute 浮层，需 .console-dock 当 positioning ancestor */
  position: relative;
}

/* 消息流：可滚动区，agent 起始 + chips 入口 + user/agent 消息气泡 */
.dock-stream {
  flex: 1;
  overflow-y: auto;
  padding: var(--ds-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  min-height: 0;
}

/* 自动接管衔接点分隔线（素材上传完成） */
.dock-sys-divider {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin: var(--ds-space-1) 0;
}
.dock-sys-divider .line {
  flex: 1;
  height: 1px;
  background: var(--ds-border);
}
.dock-sys-divider .label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text-muted);
  letter-spacing: 0.03em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
}
.dock-sys-divider .label .ok {
  color: var(--ds-success);
}

/* ===== 让位提示条（Plan 2b；独立系统条目，与气泡区分） ===== */
.dock-defer {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 9px 11px;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  font-size: 12.5px;
}
.dock-defer__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.dock-defer__label {
  flex: 1;
  color: var(--ds-text);
  font-weight: 500;
}
.dock-defer__meta {
  color: var(--ds-text-subtle);
  font-size: 11px;
  font-weight: 400;
}
.dock-defer__act {
  flex: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  /* design.md §12：console scope 内用 ink，不用 azure */
  color: var(--ds-text);
  border: none;
  background: none;
  padding: 2px 4px;
  border-radius: 6px;
}
.dock-defer__act:hover {
  background: var(--ds-bg-deep);
}

/* actionable：运行琥珀点 */
.dock-defer--actionable {
  border-color: rgba(245, 158, 11, 0.30);
  background: #fffdf7;
}
.dock-defer--actionable .dock-defer__dot {
  background: var(--ds-warning);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}

/* viewed：静态灰 + success 勾，不可点 */
.dock-defer--viewed {
  background: var(--ds-bg);
  border-style: dashed;
}
.dock-defer--viewed .dock-defer__label {
  color: var(--ds-text-muted);
  font-weight: 400;
}
.dock-defer--viewed .dock-defer__dot {
  width: 11px;
  height: 11px;
  background: transparent;
  position: relative;
}
.dock-defer--viewed .dock-defer__dot::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 4px;
  height: 7px;
  border: solid var(--ds-success);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

/* 消息气泡 */
.dock-msg {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  font-size: 13px;
  line-height: 1.6;
}

.dock-msg .msg-role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ds-text-subtle);
}

.dock-msg--user .msg-body {
  align-self: flex-end;
  max-width: 88%;
  padding: var(--ds-space-3);
  border-radius: var(--ds-radius-md);
  /* §12：用户气泡用 ink 实色，不用 azure */
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
}

.dock-msg--agent .msg-body {
  max-width: 95%;
  padding: var(--ds-space-3);
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg-alt);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  line-height: 1.7;
  /* 切到 ReactMarkdown 渲染后，段落 / 列表 / 表格等由 <p><ul><table> 表达，
     不再依赖 pre-wrap 保留源码换行；遗留单 \n 走 markdown spec 合并为空格。 */
}

.dock-msg--agent .msg-body > :first-child { margin-top: 0; }
.dock-msg--agent .msg-body > :last-child { margin-bottom: 0; }

.dock-msg--agent .msg-body p {
  margin: 0 0 12px;
}

.dock-msg--agent .msg-body strong {
  font-weight: 600;
  color: var(--ds-text);
}

.dock-msg--agent .msg-body em {
  font-style: italic;
}

.dock-msg--agent .msg-body h1,
.dock-msg--agent .msg-body h2,
.dock-msg--agent .msg-body h3,
.dock-msg--agent .msg-body h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 16px 0 8px;
  color: var(--ds-text);
  line-height: 1.4;
}

.dock-msg--agent .msg-body ul,
.dock-msg--agent .msg-body ol {
  margin: 10px 0 14px;
  padding-left: 24px;
}

.dock-msg--agent .msg-body li {
  margin: 4px 0;
}

.dock-msg--agent .msg-body li > p {
  margin: 0;
}

.dock-msg--agent .msg-body a {
  color: var(--ds-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dock-msg--agent .msg-body a:hover {
  color: var(--ds-accent-deep);
}

.dock-msg--agent .msg-body blockquote {
  margin: 12px 0;
  padding: 10px 14px;
  border-left: 3px solid var(--ds-text);
  background: var(--ds-bg);
  color: var(--ds-text);
  border-radius: 0 6px 6px 0;
}
.dock-msg--agent .msg-body blockquote > :last-child { margin-bottom: 0; }

.dock-msg--agent .msg-body code {
  font-family: var(--ds-font-mono);
  font-size: 12.5px;
  background: var(--ds-bg);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--ds-border);
}

.dock-msg--agent .msg-body pre {
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 12px 14px;
  overflow-x: auto;
  margin: 12px 0;
}
.dock-msg--agent .msg-body pre code {
  background: transparent;
  padding: 0;
  border: none;
  font-size: 12.5px;
}

.dock-msg--agent .msg-body hr {
  border: none;
  border-top: 1px solid var(--ds-border);
  margin: 16px 0;
}

.dock-msg--agent .msg-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 12px 0 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  overflow: hidden;
  font-size: 12.5px;
  background: var(--ds-bg);
}

.dock-msg--agent .msg-body thead th {
  text-align: left;
  font-weight: 600;
  color: var(--ds-text);
  padding: 10px 14px;
  background: var(--ds-bg-alt);
  border-bottom: 1px solid var(--ds-border-strong);
}

.dock-msg--agent .msg-body tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ds-border);
  vertical-align: top;
  line-height: 1.65;
}

.dock-msg--agent .msg-body tbody tr:last-child td { border-bottom: none; }

.dock-msg--agent .msg-body tbody tr:nth-child(even) td {
  background: var(--ds-bg-alt);
}

/* 扁平活动块（偏差 #1/#2）：工具调用作为 agent 消息的延续，无外框、无「执行过程」
   折叠头；动作行 + 结果明细子行两层。dock 专用，不复用主聊天 ProcessBlock。 */
.dock-activity {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
}
.dock-act-step + .dock-act-step {
  margin-top: var(--ds-space-1);
}

/* 工具行 / 步骤标题行：状态点 + 文字 */
.dock-act-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 3px 0;
  font-size: 12.5px;
  line-height: 1.5;
}
.dock-act-row .dot {
  flex-shrink: 0;
  width: 11px;
  text-align: center;
  font-size: 10px;
  position: relative;
  top: -1px;
}
.dock-act-row .lbl {
  color: var(--ds-text-muted);
}
.dock-act-row .suffix {
  color: var(--ds-text-subtle);
  font-weight: 500;
}

/* 状态色（沿用 SubActionChip 语义；console 收紧 azure，状态语义色不受限）*/
.dock-act-row--success .dot { color: var(--ds-success); }
.dock-act-row--fail .dot { color: var(--ds-danger); }
.dock-act-row--stopped .dot { color: var(--ds-text-subtle); }
.dock-act-row--running .dot {
  color: var(--ds-warning);
  animation: dock-act-pulse 1.2s ease-in-out infinite;
}
.dock-act-row--running .lbl {
  color: var(--ds-text);
  font-weight: 500;
}

/* 步骤标题（steps 路径）：始终 ink 加粗，置于状态色规则之后以胜出 */
.dock-act-row .lbl--step {
  color: var(--ds-text);
  font-weight: 600;
}

@keyframes dock-act-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.28; }
}

/* steps 路径：步骤标题下的子动作缩进，与动作标签文字对齐（dot 11 + gap 7） */
.dock-act-step .dock-act-item {
  padding-left: 18px;
}

/* 结果明细子行（偏差 #2 两层）— 缩进对齐动作标签 */
.dock-act-detail {
  margin: 0 0 4px 18px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ds-text-muted);
}

/* 失败行的重试 / 跳过（仅 steps 路径传入回调时出现）*/
.dock-act-btns {
  display: flex;
  gap: var(--ds-space-2);
  margin: 4px 0 6px 18px;
}
.dock-act-btn {
  font-size: 12px;
  line-height: 1.4;
  padding: 4px 12px;
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  font-family: inherit;
}
.dock-act-btn--primary {
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  border: 1px solid var(--ds-text);
}
.dock-act-btn--secondary {
  background: var(--ds-surface);
  color: var(--ds-text-muted);
  border: 1px solid var(--ds-border-strong);
}

/* chips 组（s1 欢迎态品类 chips；Loading 占位 chips 也复用）*/
.dock-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-1);
}

.dock-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  height: 30px;
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-bg);
  color: var(--ds-text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.dock-chip:hover {
  border-color: var(--ds-border-strong);
  background: var(--ds-bg-alt);
}

.dock-chip:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.dock-chip:disabled:hover {
  background: var(--ds-bg);
  border-color: var(--ds-border);
}

/* 输入区 */
.dock-input-area {
  padding: var(--ds-space-4);
  flex-shrink: 0;
}

.dock-input-box {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg);
  padding: var(--ds-space-3);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.dock-input-box:focus-within {
  border-color: var(--ds-border-strong);
}

.dock-input-box textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ds-text);
  /* auto-grow：JS 写 height（1-6 行），超过 max 后内部滚动 */
  min-height: 24px;
  max-height: 140px;
  overflow-y: auto;
  display: block;
}

.dock-input-box textarea::-webkit-scrollbar {
  width: 4px;
}

.dock-input-box textarea::-webkit-scrollbar-thumb {
  background: var(--ds-border-strong);
  border-radius: 2px;
}

.dock-input-box textarea::placeholder {
  color: var(--ds-text-subtle);
}

.dock-input-box textarea:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.dock-input-actions {
  display: flex;
  align-items: center;
  margin-top: var(--ds-space-2);
}

/* §12：send btn ink 实色，不用 azure */
.dock-send-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  height: 30px;
  padding: 0 var(--ds-space-4);
  border: none;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.dock-send-btn:hover {
  opacity: 0.85;
}

.dock-send-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* 流式中用户上滑后的「↓ 回到最新」浮按钮，sticky 定位在 dock-stream 底部居中 */
.dock-jump-to-bottom {
  position: sticky;
  bottom: var(--ds-space-3);
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  border: none;
  border-radius: var(--ds-radius-pill);
  padding: 4px 12px;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(24, 24, 27, 0.35);
  z-index: 5;
  margin-top: -28px;
}

.dock-jump-to-bottom:hover {
  opacity: 0.92;
}

/* ===== Task 6 (s2): 4 态 placeholder / switcher / retry ===== */

/* skeleton shimmer 通用 */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}

.skeleton {
  display: inline-block;
  background: var(--ds-bg-alt);
  background-image: linear-gradient(
    90deg,
    var(--ds-bg-alt) 0%,
    var(--ds-border) 50%,
    var(--ds-bg-alt) 100%
  );
  background-size: 400px 100%;
  background-repeat: no-repeat;
  border-radius: 4px;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

/* product-switcher loading: skeleton 替代文字内容 */
.product-switcher--skeleton {
  background: var(--ds-bg-alt);
  border-color: var(--ds-border);
  cursor: default;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* product-switcher error: 红字 + 不显 caret */
.product-switcher--error {
  border-color: var(--ds-border);
  color: var(--ds-danger);
  background: var(--ds-bg-alt);
  cursor: not-allowed;
}

.product-switcher--error:hover {
  border-color: var(--ds-border);
}

/* canvas-placeholder loading: 3 件 skeleton 垂直居中 */
.canvas-placeholder--loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-3);
}

/* canvas-placeholder error: ⚠ icon 红 + retry CTA */
.canvas-placeholder--error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
}

.ph-icon--danger {
  color: var(--ds-danger);
}

/* §12 主 CTA: ink-on-ink 实色 */
.canvas-retry-btn {
  margin-top: var(--ds-space-3);
  background: var(--ds-text);
  color: var(--ds-text-on-ink, var(--ds-bg));
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}

.canvas-retry-btn:hover {
  background: var(--ds-text);
  opacity: 0.88;
}

.canvas-retry-btn:active {
  transform: translateY(1px);
}

/* ==========================================================================
 * s2a Task 11 / F2 — MaterialOnboarding + DigitalHumanPicker + DockTabBar
 * 视觉源：docs/design/console-redesign/2026-05-14-product-canvas/s2a-states.html
 * （phase0-1 worktree）。完整 ds-* token 见 global-design.css。
 *
 * tint 本地化：global-design.css 没声明 --ds-warning-tint / --ds-success-tint
 * （mockup _base.css 才有），这里 fallback 到原值；保持 console 不引入额外全局 token。
 * ======================================================================== */

:root {
  --ds-warning-tint: rgba(245, 158, 11, 0.12);
  --ds-success-tint: rgba(34, 197, 94, 0.12);
}

/* ---- canvas stage 切到 onboarding 时的容器 ----
   覆盖 .canvas-stage 的 flex 居中：onboarding 态需要 card + picker 垂直堆叠
   （spec §5「数字人 picker 大卡下方追加」），不是横向 flex item 互相挤。 */
.canvas-stage--onboarding {
  display: block;
  padding: var(--ds-space-5) var(--ds-space-4);
  overflow-y: auto;
}

/* ---- onboard banner（baseline / ready 双态） ---- */
.onboard-banner {
  max-width: 920px;
  margin: 0 auto var(--ds-space-4);
  padding: var(--ds-space-4) var(--ds-space-5);
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-text);
  border-radius: var(--ds-radius-md);
  display: flex;
  gap: var(--ds-space-3);
  align-items: flex-start;
}
.onboard-banner .banner-emoji {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1.4;
}
.onboard-banner .banner-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ds-text);
}
.onboard-banner .banner-text strong {
  color: var(--ds-text);
  font-weight: 700;
}
.onboard-banner .banner-sub {
  color: var(--ds-text-muted);
}
/* ready 态：ink-only 收紧（mockup line 511-514） */
.onboard-banner--ready {
  border-left-color: var(--ds-text);
  background: var(--ds-bg);
}
/* banner 的 ✓ 圆 — ink 圆白对勾 */
.banner-emoji--done {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

/* ---- MaterialOnboardingCard ---- */
.onboard-card {
  max-width: 920px;
  margin: 0 auto;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-deep);
  overflow: hidden;
}
.onboard-card--ready { border-color: var(--ds-border); }
.onboard-card--loading {
  padding: var(--ds-space-5);
  text-align: center;
  color: var(--ds-text-muted);
  font-size: 13px;
}

.onboard-head {
  padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border);
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
}
.head-emoji { font-size: 22px; flex-shrink: 0; }
.head-emoji--done {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
}
.head-title-wrap { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.head-title {
  font-size: 15px; font-weight: 800; color: var(--ds-text);
  letter-spacing: -0.01em;
}
.head-title--ready { color: var(--ds-text); }
.head-sub { font-size: 12px; color: var(--ds-text-muted); }
.head-progress {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.progress-num {
  font-size: 13px; font-weight: 800; color: var(--ds-text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.progress-num--ready { color: var(--ds-text); }
.progress-label { font-size: 11px; color: var(--ds-text-subtle); }

.onboard-body {
  padding: var(--ds-space-5);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--ds-space-4);
}

/* ---- todo-card（每张 todo） ---- */
.todo-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg-alt);
  cursor: pointer;
  text-align: left;
  font: inherit;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.todo-card--required {
  border-style: dashed;
  border-color: var(--ds-border-strong);
  background: var(--ds-bg);
}
.todo-card--optional {
  border-color: var(--ds-border);
  background: var(--ds-bg-alt);
}
/* done 态：ink-only override（mockup line 451-454） */
.todo-card--done {
  border-color: var(--ds-border-strong);
  background: var(--ds-bg);
}
.todo-card:hover {
  border-color: var(--ds-text);
  background: var(--ds-bg);
}
.todo-card--done:hover {
  border-color: var(--ds-border-strong);
  background: var(--ds-bg);
}
/* picker 展开中：数字人 todo 强调态（mockup demo 4 style 内联） */
.todo-card--picking {
  border-color: var(--ds-text);
  background: var(--ds-bg);
}

.todo-row1 {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
}
.todo-emoji {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.todo-title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-text);
  letter-spacing: -0.005em;
}
.todo-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 1px var(--ds-space-2);
  border-radius: var(--ds-radius-pill);
}
.todo-tag--required {
  color: var(--ds-warning);
  background: var(--ds-warning-tint);
}
.todo-tag--optional {
  color: var(--ds-text-muted);
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
}
/* done tag：ink-only（mockup line 459-464） */
.todo-tag--done {
  color: var(--ds-text);
  background: var(--ds-bg-alt);
  border: 1px solid var(--ds-border);
  font-weight: 700;
}

.todo-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ds-text-muted);
  min-height: calc(1.6em * 3);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ---- todo-drop（dropzone 区） ---- */
.todo-drop {
  flex: 1;
  min-height: 96px;
  border: 1.5px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-1);
  padding: var(--ds-space-3);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.todo-drop:hover {
  border-color: var(--ds-text);
  background: var(--ds-bg-alt);
}
.todo-drop--solid {
  border-style: solid;
  background: var(--ds-bg-alt);
}
/* done 态 dropzone：ink-only（mockup line 465-469） */
.todo-drop--done {
  border-style: solid;
  border-color: var(--ds-border-strong);
  background: var(--ds-bg-alt);
}
.drop-icon {
  font-size: 20px;
  color: var(--ds-text);
}
.drop-icon--muted {
  color: var(--ds-text-subtle);
}
.drop-icon--dh {
  font-size: 28px;
}
/* done dropzone 的 ✓ 圆 — ink 圆白对勾 36×36（mockup line 470-482） */
.drop-icon--success {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.drop-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-text);
}
.drop-text--success {
  color: var(--ds-text);
  font-weight: 700;
}
.drop-text--muted {
  color: var(--ds-text-muted);
}
.drop-spec {
  font-size: 10px;
  color: var(--ds-text-subtle);
  text-align: center;
}

/* ---- todo-actions（计数 + 链接） ---- */
.todo-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
}
.todo-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-text-subtle);
  font-variant-numeric: tabular-nums;
}
/* done count：ink + ✓ 圆 ::before（mockup line 487-507） */
.todo-count--done {
  color: var(--ds-text);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.todo-count--done::before {
  content: '✓';
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  line-height: 16px;
  flex-shrink: 0;
}
.todo-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text-muted);
  cursor: pointer;
  transition: color 0.15s;
}
.todo-link:hover {
  color: var(--ds-text);
}

/* ---- CTA ---- */
.commit-cta-wrap {
  display: flex; justify-content: center;
  padding: 0 var(--ds-space-5) var(--ds-space-5);
}
.commit-cta {
  height: 44px; padding: 0 var(--ds-space-6);
  border: none; border-radius: var(--ds-radius-md);
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: opacity 0.15s;
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  box-shadow: var(--ds-shadow-cta-primary, none);
}
.commit-cta:hover { opacity: 0.88; }
.commit-cta--disabled {
  background: var(--ds-text-subtle);
  color: var(--ds-text-on-ink);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.85;
}

/* ---- DigitalHumanPickerPanel ---- */
.dh-picker {
  max-width: 920px;
  margin: var(--ds-space-4) auto 0;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-deep);
  overflow: hidden;
}
.dh-picker-head {
  padding: var(--ds-space-4) var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border);
  display: flex; align-items: center; gap: var(--ds-space-3);
}
.dh-picker-head .h-emoji { font-size: 20px; }
.dh-picker-head .h-title-wrap {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
}
.dh-picker-head .h-title {
  font-size: 14px; font-weight: 800; color: var(--ds-text);
  letter-spacing: -0.005em;
}
.dh-picker-head .h-sub { font-size: 11px; color: var(--ds-text-muted); }
.dh-picker-head .h-close {
  width: 28px; height: 28px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--ds-text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.dh-picker-head .h-close:hover {
  color: var(--ds-text);
  border-color: var(--ds-border-strong);
}
/* picker tab：胶囊 pill（spec §4.3 方案 3），ink-on-ink 反白。 */
.dh-picker-tabs {
  padding: var(--ds-space-3) var(--ds-space-5) 0;
  border-bottom: 1px solid var(--ds-border);
}
.dh-picker-tabs-inner {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: var(--ds-space-3);
  border-radius: 12px;
  background: var(--ds-bg-alt);
  border: 1px solid var(--ds-border);
}
.dh-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text-muted);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s, background 0.15s;
}
.dh-tab:hover {
  color: var(--ds-text);
}
.dh-tab--active {
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  font-weight: 700;
}
.dh-tab--active:hover {
  color: var(--ds-text-on-ink);
}
.dh-tab .count {
  font-size: 11px;
  padding: 0 6px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-bg);
  color: var(--ds-text-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dh-tab--active .count {
  background: rgba(255, 255, 255, 0.18);
  color: var(--ds-text-on-ink);
}
.dh-picker-body {
  padding: var(--ds-space-5);
  display: flex; gap: var(--ds-space-4);
  overflow-x: auto;
  scrollbar-width: thin;
}
.dh-picker-body::-webkit-scrollbar { height: 6px; }
.dh-picker-body::-webkit-scrollbar-thumb {
  background: var(--ds-border-strong);
  border-radius: 999px;
}
.dh-item {
  flex: 0 0 200px;
  display: flex; flex-direction: column;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dh-item:hover {
  border-color: var(--ds-border-strong);
  box-shadow: 0 4px 16px rgba(24, 24, 27, 0.08);
}
.dh-item--selected {
  border: 2px solid var(--ds-text);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.06);
}
.dh-avatar {
  width: 100%;
  height: 240px;
  background: linear-gradient(180deg, var(--ds-bg-alt) 0%, var(--ds-bg-deep) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ds-border);
}
.dh-portrait-emoji {
  font-size: 108px;
  line-height: 1;
}
.dh-item--selected .dh-avatar {
  background: linear-gradient(180deg, var(--ds-bg) 0%, var(--ds-bg-alt) 100%);
}
.dh-item--selected .dh-meta {
  color: var(--ds-text-muted);
  font-weight: 600;
}
.dh-info {
  padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-2);
  display: flex; flex-direction: column; gap: 2px;
}
.dh-name {
  font-size: 14px; font-weight: 800;
  color: var(--ds-text);
  letter-spacing: -0.005em;
}
.dh-meta { font-size: 11px; color: var(--ds-text-subtle); line-height: 1.5; }
.dh-actions {
  display: flex; gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-3);
}
.dh-listen {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg);
  font-size: 11px; font-weight: 700; color: var(--ds-text-muted);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.dh-listen:hover {
  color: var(--ds-text);
  border-color: var(--ds-border-strong);
  background: var(--ds-bg-alt);
}
.dh-listen .play-ico {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px;
}
.dh-select {
  flex: 1;
  height: 32px;
  border: 1px solid var(--ds-text);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.dh-select:hover { opacity: 0.88; }
.dh-select--selected,
.dh-item--selected .dh-select {
  background: var(--ds-bg);
  color: var(--ds-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* ---- dh-picker-foot（已选反馈 + 自建数字人入口） ---- */
.dh-picker-foot {
  padding: var(--ds-space-3) var(--ds-space-5);
  border-top: 1px solid var(--ds-border);
  background: var(--ds-bg-alt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
}
.dh-foot-text {
  font-size: 12px;
  color: var(--ds-text-muted);
}
.dh-foot-text strong {
  color: var(--ds-text);
  font-weight: 700;
}
.dh-foot-actions {
  display: flex;
  gap: var(--ds-space-2);
}
.dh-link-create {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px var(--ds-space-2);
}
.dh-link-create:hover {
  color: var(--ds-text);
}

/* ---- 我的 tab 空态创建引导（spec §4.5） ---- */
.dh-empty-create {
  flex: 1; min-width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--ds-space-4); padding: var(--ds-space-6) var(--ds-space-5);
  text-align: center;
}
.dh-ec-emoji {
  width: 56px; height: 56px;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-bg-alt);
  border: 1px solid var(--ds-border-strong);
  color: var(--ds-text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.dh-ec-title { font-size: 16px; font-weight: 800; color: var(--ds-text); }
.dh-ec-sub {
  font-size: 12px; color: var(--ds-text-muted);
  max-width: 360px; line-height: 1.7;
}
.dh-ec-cta {
  padding: 10px 22px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  border: 0; cursor: pointer;
  font-size: 13px; font-weight: 800;
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  transition: opacity 0.15s;
}
.dh-ec-cta:hover { opacity: 0.88; }
.dh-ec-meta {
  display: flex; gap: 18px; margin-top: 6px;
  font-size: 11px; color: var(--ds-text-subtle);
}
.dh-ec-meta span::before {
  content: '✓'; display: inline-block; margin-right: 4px;
  color: var(--ds-text); font-weight: 800;
}

/* ---- DockTabBar (A5 — minimal text-only tabs + 「+ 新对话」+ 右键 contextmenu) ---- */
.dock-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--ds-space-2);
  padding: 0 var(--ds-space-3);
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-bg);
  min-height: 48px;
  position: relative;
}
.dock-tabs-scroller {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.dock-tabs-scroller::-webkit-scrollbar { display: none; }

.dock-tab {
  flex: 0 0 auto;
  max-width: 170px;
  padding: 0 12px;
  border: none;
  background: transparent;
  color: var(--ds-text-muted);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.dock-tab:hover { color: var(--ds-text); }
.dock-tab.active {
  color: var(--ds-text);
  font-weight: 600;
  border-bottom-color: var(--ds-text);
}
.dock-tab-input {
  font-weight: 600;
  font-size: 12.5px;
  background: transparent;
  border: none;
  outline: 1px solid var(--ds-text);
  border-radius: 3px;
  padding: 0 4px;
  font-family: inherit;
  color: var(--ds-text);
  max-width: 150px;
  margin: 0;
}

.dock-new-chat-btn {
  align-self: center;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border: 1px solid var(--ds-text);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s ease;
  white-space: nowrap;
}
.dock-new-chat-btn:hover { opacity: .85; }
.dock-new-chat-btn .plus {
  font-size: 13px;
  line-height: 1;
  margin-top: -1px;
}

/* 右键 contextmenu — fixed 位置，由组件 inline style 设 top/left */
.dock-tab-ctx-menu {
  position: fixed;
  min-width: 130px;
  padding: 4px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-deep);
  z-index: 60;
}
.dock-tab-ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ds-text);
}
.dock-tab-ctx-menu-item:hover { background: var(--ds-bg-alt); }
.dock-tab-ctx-menu-item--danger { color: var(--ds-danger); }

/* ---- ConsoleConfirmPopover (Task 4.1) ---- */
.dock-confirm-popover {
  position: absolute;
  width: 240px;
  padding: 12px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-deep);
  z-index: 50;
}
.dock-confirm-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--ds-text);
  margin-bottom: 4px;
}
.dock-confirm-msg {
  font-size: 12px;
  color: var(--ds-text-muted);
  margin-bottom: 10px;
  line-height: 1.5;
}
.dock-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.dock-confirm-cancel {
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid var(--ds-border);
  background: var(--ds-bg);
  color: var(--ds-text);
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  font-family: inherit;
}
.dock-confirm-cancel:hover { background: var(--ds-bg-alt); }
.dock-confirm-danger {
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid var(--ds-danger);
  background: var(--ds-danger);
  color: #fff;
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  font-family: inherit;
}
.dock-confirm-danger:hover { opacity: 0.9; }

/* ===== ProductSwitcher popover (plan v2 Task 3) ===== */
.product-switcher-popover {
  position: absolute;
  top: calc(var(--ds-header-height, 64px) - 6px);
  left: 50%;
  transform: translateX(-30%);
  width: 280px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-deep);
  padding: 6px;
  z-index: 50;
}
.psp-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 10px 4px;
}
.psp-empty {
  padding: 16px 10px;
  text-align: center;
  color: var(--ds-text-muted);
  font-size: 13px;
}
.psp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: var(--ds-radius-sm);
  font-family: inherit;
  color: var(--ds-text);
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
}
.psp-item:hover { background: var(--ds-bg-alt); }
.psp-item--current { background: var(--ds-bg-alt); }
.psp-swatch {
  width: 22px;
  height: 22px;
  border-radius: var(--ds-radius-sm);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--ds-bg-deep);
  color: var(--ds-text);
  flex-shrink: 0;
}
.psp-name { flex: 1; font-size: 13px; font-weight: 600; }
.psp-check { color: var(--ds-text); font-weight: 700; }
.psp-divider {
  height: 1px;
  background: var(--ds-border);
  margin: 6px 4px;
}
.psp-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: none;
  background: transparent;
  border-radius: var(--ds-radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
}
.psp-action:hover { background: var(--ds-bg-alt); }
.psp-action-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-alt);
  display: grid;
  place-items: center;
  color: var(--ds-text-muted);
  flex-shrink: 0;
}
.psp-action--primary .psp-action-icon {
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
}
.psp-action--manage { color: var(--ds-text-muted); }
.psp-arrow { margin-left: auto; color: var(--ds-text-subtle); }

/* ---- ColdStartCard wrap（2026-05-26）
   .canvas-stage 是 flex row 容器；MaterialOnboardingCard 返回 Fragment（banner + card），
   不套一层 column wrapper 时 banner / card 会变成 2 个并排 flex item 且被压窄。
   本 wrapper 强制纵向堆叠 + 限定 920px 最大宽度。 ---- */
.coldstart-wrap {
  width: 100%;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}
.coldstart-wrap .onboard-banner,
.coldstart-wrap .onboard-card {
  margin: 0;
  max-width: none;
}

/* ---- ColdStartCard product step（2026-05-26）
   预览源：docs/preview-coldstart-card-2026-05-26.html
   遵循 console scope no-azure / global-design.css 亮色 v1 ink-only。 ---- */
.onboard-product {
  padding: var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border);
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
}
.step-num {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--ds-radius-md);
  background: var(--ds-text);
  color: var(--ds-text-on-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.step-num--done {
  background: var(--ds-bg-alt);
  color: var(--ds-text);
  border: 1px solid var(--ds-border-strong);
}
.product-text-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ds-text);
  letter-spacing: -0.01em;
}
.product-sub {
  font-size: 12px;
  color: var(--ds-text-muted);
  margin-top: 2px;
}
.product-input-wrap {
  flex: 0 0 320px;
  position: relative;
}
.product-input {
  width: 100%;
  height: 40px;
  padding: 0 var(--ds-space-4);
  font: inherit;
  font-size: 13px;
  color: var(--ds-text);
  background: var(--ds-bg);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.product-input::placeholder { color: var(--ds-text-subtle); }
.product-input:hover { border-color: var(--ds-text); }
.product-input:focus {
  border-color: var(--ds-text);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.08);
}
.product-input[readonly] {
  background: var(--ds-bg-alt);
  color: var(--ds-text-muted);
  cursor: not-allowed;
}
.product-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 1px var(--ds-space-2);
  border-radius: var(--ds-radius-pill);
  color: var(--ds-warning);
  background: #fef3c7;
}
.product-tag--done {
  color: var(--ds-text);
  background: var(--ds-bg-alt);
  border: 1px solid var(--ds-border);
}

/* ---- onboard-head 适配 step-num（40×40，原 head-emoji 是 22px 字符）---- */
.onboard-head .step-num + .head-title-wrap { margin-left: 0; }

/* spec 2026-05-27 §7.4 — dock tab 未读红点（非当前 tab 收到 step.append 时显示） */
.dock-tab { position: relative; }
.dock-tab-unread-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ds-danger);
  margin-left: 6px;
  vertical-align: middle;
}

/* spec 2026-05-27 §7.5 — 画布新生成中卡 200ms 高亮 */
.vcard.is-new-card {
  box-shadow: 0 0 0 2px var(--ds-text), 0 12px 28px rgba(24, 24, 27, 0.16);
  transition: box-shadow 0.2s ease-out;
}
.product-tab:hover .product-tab-close {
  opacity: 1 !important;
}
.video-card {
  /* tsx 内 inline border 已设 ds-border；此处保留规则以承载 hover/transition */
  position: relative;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s ease;
}

.video-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(77,166,255,0.4), rgba(99,102,241,0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.video-card:hover {
  border-color: transparent;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.35),
    0 0 40px rgba(77,166,255,0.06);
  transform: translateY(-4px);
}

.video-card:hover::before {
  opacity: 1;
}

.video-card-preview-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
}

.video-card:hover .video-card-preview-overlay {
  opacity: 1;
}

.video-card-more {
  transition: color 0.2s ease, transform 0.2s ease;
}

.video-card-more:hover {
  color: #4da6ff !important;
  transform: scale(1.2);
}

/* Stagger entrance animation */
@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.video-list-grid .video-card {
  animation: cardFadeIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.video-list-grid .video-card:nth-child(1) { animation-delay: 0ms; }
.video-list-grid .video-card:nth-child(2) { animation-delay: 50ms; }
.video-list-grid .video-card:nth-child(3) { animation-delay: 100ms; }
.video-list-grid .video-card:nth-child(4) { animation-delay: 150ms; }
.video-list-grid .video-card:nth-child(5) { animation-delay: 200ms; }
.video-list-grid .video-card:nth-child(6) { animation-delay: 250ms; }
.video-list-grid .video-card:nth-child(7) { animation-delay: 300ms; }
.video-list-grid .video-card:nth-child(8) { animation-delay: 350ms; }
.video-list-grid .video-card:nth-child(n+9) { animation-delay: 400ms; }
/* ---- Grid: auto-fill responsive ---- */
.video-list-page .video-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

/* ---- Input & Select — unified toolbar look ---- */
.video-list-page .ant-input,
.video-list-page .ant-input-affix-wrapper {
  background: var(--ds-bg-alt) !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--ds-text) !important;
  font-size: 14px !important;
  box-shadow: inset 0 0 0 1px var(--ds-border) !important;
  transition: box-shadow 0.2s ease !important;
}

.video-list-page .ant-input-affix-wrapper .ant-input {
  box-shadow: none !important;
  background: transparent !important;
}

.video-list-page .ant-input-affix-wrapper:hover {
  box-shadow: inset 0 0 0 1px var(--ds-border) !important;
}

.video-list-page .ant-input:focus,
.video-list-page .ant-input-focused,
.video-list-page .ant-input-affix-wrapper:focus,
.video-list-page .ant-input-affix-wrapper-focused {
  box-shadow: inset 0 0 0 1px rgba(77,166,255,0.4), 0 0 0 3px rgba(77,166,255,0.06) !important;
}

.video-list-page .ant-input::placeholder {
  color: var(--ds-border) !important;
}

/* ---- Filter Select — no-label style, B.2 pattern ---- */
.video-list-page .vlp-filter-select .ant-select-selector,
.video-list-page .vlp-filter-select.ant-select-single .ant-select-selector,
.video-list-page .vlp-filter-select.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
  background: var(--ds-bg-alt) !important;
  background-color: var(--ds-bg-alt) !important;
  border: none !important;
  border-color: transparent !important;
  border-radius: 10px !important;
  color: var(--ds-text-muted) !important;
  font-size: 13px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: inset 0 0 0 1px var(--ds-border) !important;
  transition: box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease !important;
}

.video-list-page .vlp-filter-select:not(.ant-select-disabled):hover .ant-select-selector {
  box-shadow: inset 0 0 0 1px var(--ds-border) !important;
}

.video-list-page .vlp-filter-select.ant-select-focused .ant-select-selector {
  box-shadow: inset 0 0 0 1px rgba(77,166,255,0.4), 0 0 0 3px rgba(77,166,255,0.06) !important;
}

.video-list-page .vlp-filter-select .ant-select-selection-item {
  color: var(--ds-text-muted) !important;
  font-size: 13px !important;
}

.video-list-page .vlp-filter-select .ant-select-arrow {
  color: var(--ds-border) !important;
  font-size: 10px !important;
}

/* Non-default (active) filter — accent highlight */
.video-list-page .vlp-filter-active .ant-select-selector {
  background: rgba(77,166,255,0.08) !important;
  background-color: rgba(77,166,255,0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(77,166,255,0.25) !important;
}

.video-list-page .vlp-filter-active .ant-select-selection-item {
  color: #4da6ff !important;
}

.video-list-page .vlp-filter-active .ant-select-arrow {
  color: rgba(77,166,255,0.5) !important;
}

/* ---- Pagination — 34×34 square, accent glow ---- */
.video-list-page .ant-pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: var(--ds-bg-alt);
  border: 1px solid var(--ds-border);
  border-radius: 12px;
}

.video-list-page .ant-pagination-item {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  min-width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  transition: all 0.2s ease !important;
}

.video-list-page .ant-pagination-item:hover {
  background: rgba(77,166,255,0.08) !important;
  border-color: rgba(77,166,255,0.2) !important;
}

.video-list-page .ant-pagination-item a {
  color: var(--ds-text-subtle) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.video-list-page .ant-pagination-item:hover a {
  color: #4da6ff !important;
}

.video-list-page .ant-pagination-item-active {
  background: rgba(77,166,255,0.15) !important;
  border-color: rgba(77,166,255,0.35) !important;
  box-shadow: 0 0 12px rgba(77,166,255,0.2) !important;
}

.video-list-page .ant-pagination-item-active a {
  color: #4da6ff !important;
  font-weight: 700 !important;
}

.video-list-page .ant-pagination-prev .ant-pagination-item-link,
.video-list-page .ant-pagination-next .ant-pagination-item-link {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--ds-text-subtle) !important;
  min-width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.video-list-page .ant-pagination-prev:hover .ant-pagination-item-link,
.video-list-page .ant-pagination-next:hover .ant-pagination-item-link {
  color: #4da6ff !important;
  background: rgba(77,166,255,0.08) !important;
}

.video-list-page .ant-pagination-total-text {
  color: var(--ds-text-subtle) !important;
  font-size: 12px !important;
  margin-right: 8px !important;
}

/* Size changer */
.video-list-page .ant-pagination-options .ant-select .ant-select-selector {
  min-height: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  background: var(--ds-bg-alt) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px var(--ds-border) !important;
  color: var(--ds-text-muted) !important;
}

/* ---- Preview Modal ---- */
.vlp-preview-modal .ant-modal-content {
  background: var(--ds-surface-2) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6) !important;
  padding: 28px !important;
}

.vlp-preview-modal .ant-modal-close {
  color: var(--ds-text-subtle) !important;
}

.vlp-preview-modal .ant-modal-close:hover {
  color: var(--ds-text-muted) !important;
}

/* ---- Upload CTA button — design.md blue gradient ---- */
.video-list-page .ant-btn-primary,
.video-list-page .ant-btn-primary:not(:disabled) {
  background: var(--ds-text) !important;
  border: none !important;
  box-shadow: 0 4px 24px rgba(77,166,255,0.35) !important;
  border-radius: 12px !important;
  height: 44px !important;
  padding-inline: 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.video-list-page .ant-btn-primary:hover:not(:disabled) {
  /* P2: ink-on-ink hover 用更深 ds-text-muted */
  background: var(--ds-text-muted) !important;
  box-shadow: 0 6px 28px rgba(0,0,0,0.18) !important;
}

/* ---- Spin ---- */
.video-list-page .ant-spin-dot-item {
  background-color: #4da6ff !important;
}
.dr-entry {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dr-entry__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dr-entry-btn {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dr-entry-btn--primary {
  background: var(--ds-text);
  color: #fff;
}

.dr-entry-btn--primary::before {
  content: '✦';
  font-size: 11px;
}

.dr-entry-btn--ghost {
  background: var(--ds-bg-alt);
  color: var(--ds-text);
  border: 1px solid var(--ds-border);
}

.dr-entry-btn--neutral {
  background: var(--ds-bg);
  color: var(--ds-text);
  border: 1px solid var(--ds-border-strong);
}

.dr-entry-btn--quiet {
  background: var(--ds-bg);
  color: var(--ds-text-muted);
  border: 1px solid var(--ds-border);
}

.dr-entry-spin {
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--ds-border-strong);
  border-top-color: var(--ds-text);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: inline-block;
  margin-right: 4px;
}

.dr-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 6px;
}

.dr-status-row--neutral {
  background: var(--ds-bg-alt);
  color: var(--ds-text-muted);
}

.dr-status-row--warn {
  background: rgba(217, 119, 6, 0.08);
  color: #92400e;
  border: 1px solid rgba(217, 119, 6, 0.2);
}

.dr-status-row--success {
  background: var(--ds-bg-alt);
  color: var(--ds-text-muted);
}

.dr-status-row__ico {
  width: 16px;
  height: 16px;
  background: var(--ds-text-muted);
  color: #fff;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}

.dr-status-row__ico--warn {
  background: #d97706;
}

.dr-status-row__ico--success {
  background: #10b981;
}

.dr-status-row a,
.dr-status-row__link {
  color: var(--ds-text);
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
}

.dr-status-row--warn a,
.dr-status-row--warn .dr-status-row__link {
  color: #92400e;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* ===== ProductsHomePage layout (plan v2 Task 5) ===== */
.products-home {
  overflow-y: auto;
  padding: 28px 32px 64px;
  background: var(--ds-bg);
}
.back-to-canvas-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--ds-border);
  color: var(--ds-text-muted);
  padding: 6px 12px;
  border-radius: var(--ds-radius-sm);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 14px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.back-to-canvas-btn:hover {
  background: var(--ds-bg-alt);
  color: var(--ds-text);
  border-color: var(--ds-border-strong);
}
.back-to-canvas-arrow {
  font-size: 14px;
  line-height: 1;
}
.products-home-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.products-home-sub {
  font-size: 13px;
  color: var(--ds-text-muted);
  margin: 0 0 24px;
}

/* ===== Enterprise info card (Task 6) ===== */
.ent-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  margin-bottom: 24px;
}
.ent-logo {
  width: 56px;
  height: 56px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-bg-deep);
  border: 1px solid var(--ds-border);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--ds-text);
  flex-shrink: 0;
}
.ent-info { flex: 1; min-width: 0; }
.ent-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-text);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.ent-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ds-text-muted);
}
.ent-pin {
  background: var(--ds-bg-alt);
  border-radius: var(--ds-radius-sm);
  padding: 2px 8px;
  font-weight: 500;
}
.ent-stats {
  display: flex;
  gap: 24px;
  padding-left: 24px;
  border-left: 1px solid var(--ds-border);
}
.ent-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
}
.ent-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--ds-text);
  letter-spacing: -0.02em;
}
.ent-stat-label {
  font-size: 11px;
  color: var(--ds-text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ===== Product picker row (Task 7) ===== */
.product-picker {
  margin-bottom: 28px;
}
.product-picker-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-text-subtle);
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.product-picker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.product-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font: inherit;
  color: var(--ds-text);
  position: relative;
}
.product-pill:hover {
  background: var(--ds-bg-alt);
  border-color: var(--ds-border-strong);
}
.product-pill--active {
  background: var(--ds-text);
  border-color: var(--ds-text);
  color: var(--ds-text-on-ink);
}
.product-pill--active:hover {
  background: var(--ds-text);
}
.product-pill--active .pill-swatch {
  background: var(--ds-text-on-ink);
  color: var(--ds-text);
}
.product-pill--active .pill-meta {
  color: rgba(255,255,255,0.6);
}
.pill-swatch {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--ds-bg-deep);
  color: var(--ds-text);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.pill-swatch--new {
  background: transparent;
  border: 1px dashed var(--ds-border-strong);
  color: var(--ds-text-subtle);
}
.pill-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
.pill-name {
  font-size: 13px;
  font-weight: 600;
}
.pill-meta {
  font-size: 10px;
  color: var(--ds-text-subtle);
  letter-spacing: 0.02em;
  margin-top: 1px;
}
.product-pill--new {
  border-style: dashed;
  color: var(--ds-text-muted);
  background: transparent;
}
.product-pill--new:hover {
  background: var(--ds-bg-alt);
  color: var(--ds-text);
}

/* ===== Pill ⋯ menu + rename inline (Task 8) ===== */
.pill-more-btn {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: transparent;
  border: none;
  color: var(--ds-text-subtle);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  margin-left: 4px;
  padding: 0;
}
.pill-more-btn:hover {
  background: var(--ds-bg-alt);
  color: var(--ds-text);
}
.pill-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-deep);
  padding: 4px;
  z-index: 60;
  min-width: 132px;
}
.pill-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--ds-radius-sm);
  font: inherit;
  font-size: 13px;
  color: var(--ds-text);
  cursor: pointer;
  text-align: left;
}
.pill-menu-item:hover { background: var(--ds-bg-alt); }
.pill-menu-item--danger { color: var(--ds-danger); }
.pill-rename-input {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
  padding: 1px 6px;
  outline: none;
  color: var(--ds-text);
  width: 120px;
}

/* ===== Section blocks (Task 11/12/13) ===== */
.section {
  margin-bottom: 32px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 22px 24px;
}
.section-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}
.section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-text);
  margin: 0;
  letter-spacing: -0.01em;
}
.section-sub {
  font-size: 12px;
  color: var(--ds-text-muted);
}
.section-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  padding: 6px 12px;
  border-radius: var(--ds-radius-sm);
  font: inherit;
  font-size: 12px;
  color: var(--ds-text);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--ds-bg-alt); }
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ds-text-muted);
}
.btn-ghost:hover { color: var(--ds-text); background: var(--ds-bg-alt); }
.skeleton-row {
  padding: 24px;
  text-align: center;
  color: var(--ds-text-subtle);
  font-size: 13px;
}
.scroll-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.scroll-row > * { flex: 0 0 auto; width: 220px; }

/* ===== Doc card (Task 12) ===== */
.doc-card {
  display: flex;
  gap: 12px;
  width: 220px;
  padding: 14px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  cursor: pointer;
  font: inherit;
  color: var(--ds-text);
  text-align: left;
  align-items: flex-start;
}
.doc-card:hover {
  border-color: var(--ds-border-strong);
  background: var(--ds-bg-alt);
}
.doc-card--add {
  border-style: dashed;
  background: transparent;
  align-items: center;
  justify-content: center;
}
.doc-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-deep);
  color: var(--ds-text);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.doc-card-icon--add {
  background: transparent;
  border: 1px dashed var(--ds-border-strong);
  color: var(--ds-text-subtle);
  font-size: 16px;
  font-weight: 600;
}
.doc-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.doc-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-card-meta {
  font-size: 11px;
  color: var(--ds-text-muted);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* ===== Digital human stats (Task 13) ===== */
.digital-row {
  display: flex;
  gap: 14px;
}
.digital-card,
.digital-card-secondary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--ds-bg-alt);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  flex: 1;
}
.digital-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ds-bg-deep);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-text);
}
.digital-num {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ds-text);
}
.digital-label,
.digital-pref-meta {
  font-size: 11px;
  color: var(--ds-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 2px;
}
.digital-pref-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: var(--ds-text-subtle);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
}
.digital-pref-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
}
/* 全局容器：提供 20px 的安全缩进，创造“悬浮”感 */
.geo-layout-wrapper {
  display: flex;
  height: 100vh;
  padding: 20px;
  gap: 20px;
  background: var(--geo-bg-primary);
  overflow: hidden;
  position: relative;
}

/* 动态背景网格 */
.geo-layout-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(139, 92, 246, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
  pointer-events: none;
}

/* 侧边悬浮岛 */
.geo-sider-island {
  width: 260px;
  height: 100%;
  background: var(--geo-glass-bg) !important;
  backdrop-filter: blur(var(--geo-glass-blur)) !important;
  border: 1px solid var(--geo-glass-border) !important;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  flex-shrink: 0;
}

.geo-sider-island.collapsed {
  width: 80px;
}

.geo-logo-container {
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--ds-border);
}

.geo-logo-icon {
  width: 32px;
  height: 32px;
  background: var(--geo-primary-gradient);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}

.geo-logo-text {
  margin-left: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* 导航菜单 */
.geo-menu-pro {
  flex: 1;
  background: transparent !important;
  padding: 20px 12px !important;
  border: none !important;
}

.geo-menu-pro .ant-menu-item {
  height: 44px !important;
  line-height: 44px !important;
  margin-bottom: 8px !important;
  border-radius: 12px !important;
  transition: all 0.2s !important;
}

.geo-menu-pro .ant-menu-item-selected {
  background: rgba(139, 92, 246, 0.15) !important;
  color: var(--geo-primary-light) !important;
}

/* 主舞台容器 */
.geo-main-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0; /* 修复 flex 子元素溢出 */
  z-index: 1;
}

/* 整合式命令条 (Floating Bar) */
.geo-command-bar {
  height: 72px;
  background: var(--geo-glass-bg);
  backdrop-filter: blur(var(--geo-glass-blur));
  border: 1px solid var(--geo-glass-border);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.geo-header-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ds-text);
}

.geo-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.geo-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-bg-alt);
  border: 1px solid var(--ds-border);
  cursor: pointer;
  transition: all 0.2s;
  color: var(--geo-text-secondary);
}

.geo-icon-btn:hover {
  background: var(--ds-bg-deep);
  color: var(--ds-text);
  transform: translateY(-2px);
}

.geo-user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  background: var(--ds-bg-alt);
  border: 1px solid var(--ds-border);
  border-radius: 30px;
  cursor: pointer;
}

/* 内容核心区 */
.geo-content-stage {
  flex: 1;
  background: var(--geo-bg-surface);
  border: 1px solid var(--geo-border-default);
  border-radius: 24px;
  overflow-y: auto;
  padding: 24px;
  position: relative;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}

/* 响应式适配 */
@media (max-width: 768px) {
  .geo-layout-wrapper {
    padding: 10px;
    gap: 10px;
  }
  .geo-sider-island {
    display: none; /* 移动端靠 Drawer */
  }
}
/**
 * GEO Marketing - Onboarding Page Styles
 * Hero 启动页 + 品牌入驻 + 关键词设置
 */

/* ============= Hero 全屏启动页 ============= */
.onboarding-hero {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
              radial-gradient(ellipse at 50% 100%, rgba(168, 85, 247, 0.08) 0%, transparent 50%),
              var(--ds-bg);
  overflow: hidden;
  padding: 40px 24px;
}

/* 浮动光斑粒子 */
.onboarding-hero::before,
.onboarding-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: float 12s ease-in-out infinite;
  pointer-events: none;
}

.onboarding-hero::before {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
  top: -120px;
  left: -100px;
  animation-delay: 0s;
}

.onboarding-hero::after {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, transparent 70%);
  bottom: -80px;
  right: -60px;
  animation-delay: -6s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
}

/* 第三个光斑 */
.onboarding-orb {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, transparent 70%);
  filter: blur(60px);
  top: 40%;
  left: 55%;
  animation: float 15s ease-in-out infinite;
  animation-delay: -3s;
  pointer-events: none;
}

/* 网格背景 */
.onboarding-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* 主体内容容器 */
.onboarding-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  width: 100%;
}

/* Logo / 品牌标识 */
.onboarding-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto 32px;
  border-radius: 24px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4), 0 0 60px rgba(139, 92, 246, 0.2);
  animation: logo-glow 3s ease-in-out infinite alternate;
}

@keyframes logo-glow {
  0% { box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4), 0 0 60px rgba(139, 92, 246, 0.15); }
  100% { box-shadow: 0 8px 32px rgba(99, 102, 241, 0.6), 0 0 80px rgba(139, 92, 246, 0.3); }
}

/* 主标题 */
.onboarding-title {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 25%, #a78bfa 50%, #8b5cf6 75%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 副标题 */
.onboarding-subtitle {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ds-text-muted);
  max-width: 520px;
  margin: 0 auto 48px;
  font-weight: 400;
}

.onboarding-subtitle em {
  font-style: normal;
  color: #a78bfa;
  font-weight: 500;
}

/* CTA 核心按钮 */
.onboarding-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 48px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.4);
  letter-spacing: 0.5px;
}

.onboarding-cta:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 40px rgba(99, 102, 241, 0.5), 0 0 60px rgba(139, 92, 246, 0.2);
}

.onboarding-cta:active {
  transform: translateY(-1px) scale(0.99);
}

/* CTA 脉冲光环动画 */
.onboarding-cta::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 18px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa, #6366f1);
  background-size: 300% 300%;
  z-index: -1;
  opacity: 0;
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.04); }
}

/* 底部承诺条 */
.onboarding-promise {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ds-text-subtle);
  font-size: 14px;
}

.onboarding-promise-icon {
  color: #22c55e;
  font-size: 16px;
}

/* 底部特性卡片 */
.onboarding-features {
  display: flex;
  gap: 24px;
  margin-top: 64px;
  width: 100%;
  max-width: 700px;
}

.onboarding-feature-card {
  flex: 1;
  padding: 24px 20px;
  background: var(--ds-bg-alt);
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.onboarding-feature-card:hover {
  background: var(--ds-bg-deep);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-4px);
}

.onboarding-feature-icon {
  font-size: 28px;
  margin-bottom: 12px;
  display: block;
}

.onboarding-feature-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-text);
  margin-bottom: 6px;
}

.onboarding-feature-desc {
  font-size: 13px;
  color: var(--ds-text-subtle);
  line-height: 1.5;
}

/* ============= 关键词设置页 ============= */
.keyword-setup-page {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  background: radial-gradient(ellipse at 30% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
              var(--ds-bg);
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.keyword-setup-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
}

/* 顶部进度指示 */
.keyword-setup-header {
  text-align: center;
  margin-bottom: 48px;
}

.keyword-setup-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ds-text-subtle);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.keyword-setup-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8b5cf6;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.5);
}

.keyword-setup-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--ds-text);
  margin-bottom: 12px;
}

.keyword-setup-desc {
  color: var(--ds-text-subtle);
  font-size: 15px;
  line-height: 1.6;
}

/* 推荐关键词区域 */
.keyword-section {
  background: var(--ds-bg-alt);
  border: 1px solid var(--ds-border);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
}

.keyword-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--ds-text-muted);
  font-size: 14px;
  font-weight: 500;
}

.keyword-section-label-icon {
  font-size: 16px;
  color: #8b5cf6;
}

.keyword-section-count {
  margin-left: auto;
  color: var(--ds-text-subtle);
  font-size: 13px;
}

/* 关键词 Tag 样式 */
.keyword-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.keyword-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  color: var(--ds-text);
  font-size: 14px;
  transition: all 0.2s ease;
  cursor: default;
  animation: tag-appear 0.3s ease-out both;
}

.keyword-tag:hover {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.4);
}

@keyframes tag-appear {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.keyword-tag-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ds-border-strong);
  color: var(--ds-text-subtle);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  padding: 0;
  line-height: 1;
}

.keyword-tag-close:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* 手动添加关键词输入框 */
.keyword-add-input {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.keyword-add-input .ant-input {
  background: var(--ds-bg-alt) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: 12px !important;
  color: var(--ds-text) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

.keyword-add-input .ant-input:focus {
  border-color: rgba(139, 92, 246, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
}

.keyword-add-input .ant-input::placeholder {
  color: var(--ds-text-subtle) !important;
}

.keyword-add-btn {
  padding: 12px 20px !important;
  border-radius: 12px !important;
  background: rgba(139, 92, 246, 0.15) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  color: #a78bfa !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.keyword-add-btn:hover {
  background: rgba(139, 92, 246, 0.25) !important;
  border-color: rgba(139, 92, 246, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* 底部按钮区域 */
.keyword-actions {
  display: flex;
  gap: 16px;
  margin-top: 40px;
}

.keyword-back-btn {
  flex: 0 0 auto;
  padding: 16px 32px !important;
  border-radius: 14px !important;
  background: var(--ds-bg-alt) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-text-muted) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.keyword-back-btn:hover {
  background: var(--ds-bg-deep) !important;
  border-color: var(--ds-border-strong) !important;
  color: var(--ds-text) !important;
}

.keyword-submit-btn {
  flex: 1;
  padding: 16px 32px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%) !important;
  border: none !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.keyword-submit-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.45), 0 0 40px rgba(139, 92, 246, 0.15) !important;
}

/* 加载态骨架屏 */
.keyword-skeleton {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.keyword-skeleton-item {
  width: 100px;
  height: 38px;
  border-radius: 12px;
  /* skeleton shimmer: subtle ink-tint variants on light bg */
  background: linear-gradient(90deg, rgba(24, 24, 27, 0.04) 25%, rgba(24, 24, 27, 0.08) 50%, rgba(24, 24, 27, 0.04) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.keyword-skeleton-item:nth-child(2) { width: 130px; }
.keyword-skeleton-item:nth-child(3) { width: 90px; }
.keyword-skeleton-item:nth-child(4) { width: 140px; }
.keyword-skeleton-item:nth-child(5) { width: 110px; }
.keyword-skeleton-item:nth-child(6) { width: 120px; }

@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ============= 成功动画 ============= */
.onboarding-success {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ds-bg);
  z-index: 1000;
  animation: success-fade-in 0.5s ease-out;
}

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

.success-check {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: #fff;
  margin-bottom: 32px;
  box-shadow: 0 8px 40px rgba(34, 197, 94, 0.4);
  animation: success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes success-pop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.success-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--ds-text);
  margin-bottom: 12px;
  animation: success-slide-up 0.5s ease-out 0.4s both;
}

.success-desc {
  color: var(--ds-text-subtle);
  font-size: 16px;
  margin-bottom: 40px;
  animation: success-slide-up 0.5s ease-out 0.5s both;
}

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

.success-action-btn {
  padding: 16px 48px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  border: none !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.4) !important;
  animation: success-slide-up 0.5s ease-out 0.6s both;
}

/* ============= Modal 弹窗样式覆盖 ============= */
/* 彻底清除可能导致尖角的容器背景 */
.onboarding-modal,
.onboarding-modal .ant-modal-content,
.onboarding-modal .ant-modal-wrap,
.onboarding-modal .ant-modal-header,
.onboarding-modal .ant-modal-body,
.onboarding-modal .ant-modal-footer {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important; /* 移除可能存在的边框导致的阴影感 */
}

/* 重新在 content 层级应用样式 */
.onboarding-modal .ant-modal-content {
  background: var(--ds-surface) !important;
  border: 1px solid rgba(139, 92, 246, 0.15) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8), 0 0 60px rgba(139, 92, 246, 0.1) !important;
  padding: 40px !important;
  overflow: hidden !important; /* 强制裁剪圆角 */
}

.onboarding-modal .ant-modal-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin-bottom: 32px !important;
}

.onboarding-modal .ant-modal-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--ds-text) !important;
}

.onboarding-modal .ant-modal-close {
  color: var(--ds-text-subtle) !important;
  top: 20px !important;
  right: 20px !important;
}

.onboarding-modal .ant-modal-close:hover {
  color: var(--ds-text) !important;
}

.onboarding-modal .ant-modal-footer {
  border-top: none !important;
  padding: 0 !important;
  margin-top: 32px !important;
}

.onboarding-modal .ant-form-item-label > label {
  color: var(--ds-text-muted) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

.onboarding-modal .ant-input {
  background: var(--ds-bg-alt) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: 12px !important;
  color: var(--ds-text) !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
}

.onboarding-modal .ant-input:focus {
  border-color: rgba(139, 92, 246, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
}

.onboarding-modal .ant-input::placeholder {
  color: var(--ds-text-subtle) !important;
}

/* 确保字数统计在所有状态下都清晰可见 */
.onboarding-modal .ant-input-data-count,
.onboarding-modal .ant-input-show-count-suffix {
  color: var(--ds-text-subtle) !important;
  font-size: 13px !important;
}

.modal-submit-btn {
  width: 100% !important;
  padding: 14px 32px !important;
  height: auto !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%) !important;
  border: none !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.modal-submit-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.45) !important;
}

.modal-subtitle {
  color: var(--ds-text-subtle);
  font-size: 14px;
  margin-bottom: 28px;
  line-height: 1.5;
}

/* ============= 响应式 ============= */
@media (max-width: 768px) {
  .onboarding-title {
    font-size: 32px;
  }

  .onboarding-subtitle {
    font-size: 15px;
    margin-bottom: 32px;
  }

  .onboarding-cta {
    padding: 16px 36px;
    font-size: 16px;
    border-radius: 14px;
  }

  .onboarding-features {
    flex-direction: column;
    gap: 16px;
    margin-top: 48px;
  }

  .onboarding-feature-card {
    padding: 20px 16px;
  }

  .keyword-setup-title {
    font-size: 24px;
  }
  
  .keyword-section {
    padding: 24px 20px;
  }

  .keyword-actions {
    flex-direction: column;
  }

  .keyword-back-btn {
    order: 1;
  }

  .onboarding-modal .ant-modal-content {
    padding: 28px 20px !important;
    border-radius: 20px !important;
  }

  .onboarding-logo {
    width: 64px;
    height: 64px;
    font-size: 28px;
    border-radius: 18px;
    margin-bottom: 24px;
  }
}

/* ============= 嵌入 MainLayout 时的覆盖样式 ============= */
.geo-onboarding-embedded {
  position: relative;
  width: 100%;
  min-height: 100%;
}

.geo-onboarding-embedded .onboarding-hero,
.geo-onboarding-embedded .keyword-setup-page {
  width: 100%;
  min-height: calc(100vh - 120px);
}

.geo-onboarding-embedded .onboarding-success {
  position: absolute;
  inset: 0;
  min-height: calc(100vh - 120px);
}
/**
 * GEO Marketing - Content & Knowledge Base Styles
 */

.content-page-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Tab 切换重构 */
.geo-tabs-premium .ant-tabs-nav {
  margin-bottom: 24px !important;
}

.geo-tabs-premium .ant-tabs-tab {
  padding: 12px 0 !important;
  margin-right: 32px !important;
  font-size: 16px !important;
  transition: all 0.3s !important;
}

.geo-tabs-premium .ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--geo-primary-light) !important;
  font-weight: 600 !important;
  text-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

.geo-tabs-premium .ant-tabs-ink-bar {
  background: var(--geo-primary-gradient) !important;
  height: 3px !important;
  border-radius: 3px !important;
}

/* 知识库上传区 */
.knowledge-upload-zone {
  background: rgba(139, 92, 246, 0.03);
  border: 2px dashed var(--geo-glass-border);
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
  margin-bottom: 24px;
}

.knowledge-upload-zone:hover {
  background: rgba(139, 92, 246, 0.06);
  border-color: var(--geo-primary);
  transform: translateY(-2px);
}

.upload-icon {
  font-size: 48px;
  color: var(--geo-primary);
  margin-bottom: 16px;
  display: block;
}

/* 内容列表项强化 */
.content-list-card {
  background: var(--geo-bg-card);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--geo-border-light);
  transition: all 0.2s;
}

.content-list-card:hover {
  border-color: var(--geo-primary-light);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* 解析状态标签 */
.status-parsing {
  color: #f59e0b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-success {
  color: #10b981;
}

.status-failed {
  color: #ef4444;
}

/* 生成按钮连招点缀 */
.btn-generate-premium {
  background: var(--geo-primary-gradient) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4) !important;
  height: 40px !important;
  border-radius: 10px !important;
}
/**
 * GEO Marketing - Platform Authorization Styles
 */

.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.platform-card-premium {
  background: var(--geo-glass-bg);
  backdrop-filter: blur(var(--geo-glass-blur));
  border: 1px solid var(--geo-glass-border);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.platform-card-premium:hover {
  transform: translateY(-8px);
  border-color: var(--geo-primary-light);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* 品牌光影 */
.platform-glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.1;
  z-index: 0;
}

.glow-toutiao { background: #ff4d4f; }
.glow-tiktok { background: #00f2ea; }
.glow-baijiahao { background: #1890ff; }

.platform-card-content {
  position: relative;
  z-index: 1;
}

.platform-icon-wrapper {
  width: 64px;
  height: 64px;
  background: var(--ds-bg-alt);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 24px;
  border: 1px solid var(--ds-border);
}

.platform-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--ds-text);
  margin-bottom: 8px;
}

.auth-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  box-shadow: 0 0 10px currentColor;
}

.status-online { color: #10b981; }
.status-offline { color: #6b7280; }
.status-warning { color: #fadb14; }
.status-error { color: #ff4d4f; }

.account-info {
  background: var(--ds-bg-alt);
  border-radius: 12px;
  padding: 12px;
  margin: 20px 0;
}

.auth-btn-group {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
/**
 * GEO Marketing - 全局统一样式
 * 基于 ui-ux-pro-max 技能设计的视觉规范
 */

/* ============= 全局 CSS 变量（P2 切到全局 ds-token，alias 保留兼容下游 var(--geo-*) 引用） ============= */
:root {
  /* 背景色 — alias 到 ds-token 白底体系 */
  --geo-bg-primary: var(--ds-bg);
  --geo-bg-secondary: var(--ds-bg-alt);
  --geo-bg-tertiary: var(--ds-bg-alt);
  --geo-bg-surface: var(--ds-surface);
  --geo-bg-surface-hover: var(--ds-bg-alt);
  --geo-bg-surface-active: var(--ds-bg-deep);

  /* 主色 — 用 ds-accent（azure brand）替代原紫色，遵循 v1 白色 design system */
  --geo-primary: var(--ds-accent);
  --geo-primary-light: var(--ds-accent);
  --geo-primary-dark: var(--ds-accent-deep);
  --geo-primary-gradient: linear-gradient(135deg, var(--ds-accent) 0%, var(--ds-accent-deep) 100%);

  /* 功能色 */
  --geo-success: var(--ds-success);
  --geo-warning: var(--ds-warning);
  --geo-error: var(--ds-danger);
  --geo-info: var(--ds-accent);

  /* 文字 — alias 到 ds-token ink-on-white 层级 */
  --geo-text-primary: var(--ds-text);
  --geo-text-secondary: var(--ds-text-muted);
  --geo-text-tertiary: var(--ds-text-subtle);
  --geo-text-disabled: var(--ds-text-subtle);

  /* 边框 — alias 到 ds-border */
  --geo-border-default: var(--ds-border);
  --geo-border-hover: var(--ds-border-strong);
  --geo-border-active: var(--ds-accent);

  /* 间距 */
  --geo-spacing-xs: var(--ds-space-1);
  --geo-spacing-sm: var(--ds-space-2);
  --geo-spacing-md: var(--ds-space-4);
  --geo-spacing-lg: var(--ds-space-5);
  --geo-spacing-xl: var(--ds-space-6);
  --geo-spacing-xxl: var(--ds-space-7);

  /* 圆角 — 对齐 ds-radius 14/18 大圆角风格 */
  --geo-radius-sm: var(--ds-radius-sm);
  --geo-radius-md: var(--ds-radius-md);
  --geo-radius-lg: var(--ds-radius-lg);
  --geo-radius-xl: var(--ds-radius-xl);
  --geo-radius-xxl: var(--ds-radius-xl);
  --geo-radius-full: var(--ds-radius-pill);

  /* 阴影 — 切到 ds-shadow（白底专用，深度更浅） */
  --geo-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.06);
  --geo-shadow-md: 0 4px 8px rgba(24, 24, 27, 0.08);
  --geo-shadow-lg: var(--ds-shadow-cta-nav);
  --geo-shadow-xl: var(--ds-shadow-deep);
  --geo-shadow-glow: 0 0 0 3px rgba(77, 166, 255, 0.18);
  --geo-shadow-glow-strong: 0 0 0 3px rgba(77, 166, 255, 0.28);

  /* 动效 */
  --geo-transition-fast: 0.15s ease;
  --geo-transition-normal: 0.2s ease;
  --geo-transition-slow: 0.3s ease;
  --geo-transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 玻璃态效果（白底体系下退化为浅 surface） */
  --geo-glass-bg: rgba(255, 255, 255, 0.65);
  --geo-glass-border: var(--ds-border);
  --geo-glass-blur: 20px;
}

/* ============= 基础样式重置 ============= */
.geo-page-container {
  background: transparent !important;
  min-height: auto !important;
  padding: 0;
  box-sizing: border-box;
}

/* ============= Ant Design 全局样式覆盖 ============= */
/* 布局组件 */
.ant-layout {
  background: var(--geo-bg-primary) !important;
}

.ant-layout-header {
  background: var(--geo-bg-secondary) !important;
  border-bottom: 1px solid var(--geo-border-default) !important;
}

.ant-layout-sider {
  background: var(--geo-bg-secondary) !important;
  border-right: 1px solid var(--geo-border-default) !important;
}

.ant-layout-sider-trigger {
  background: var(--geo-bg-surface) !important;
  color: var(--geo-text-secondary) !important;
  border-top: 1px solid var(--geo-border-default) !important;
}

.ant-layout-sider-trigger:hover {
  color: var(--geo-primary-light) !important;
  background: var(--geo-bg-surface-hover) !important;
}

.ant-layout-content {
  background: var(--geo-bg-primary) !important;
}

.ant-layout-footer {
  background: var(--geo-bg-secondary) !important;
  border-top: 1px solid var(--geo-border-default) !important;
  color: var(--geo-text-secondary) !important;
}

/* 卡片组件 */
.ant-card {
  background: var(--geo-bg-surface) !important;
  border-color: var(--geo-border-default) !important;
  color: var(--geo-text-primary) !important;
}

.ant-card-head,
.ant-card-head-wrapper,
.ant-card-head-title {
  background: transparent !important;
  border-bottom: 1px solid var(--geo-border-default) !important;
  color: var(--geo-text-primary) !important;
}

/* 移除特定卡片的头部边框以实现全融合感 */
.geo-data-card .ant-card-head {
  border-bottom: none !important;
}

.geo-data-card .ant-card-body {
  background: transparent !important;
}

.ant-card-bordered {
  border-color: var(--geo-border-default) !important;
}

/* 表格组件 */
.ant-table {
  background: transparent !important;
  color: var(--geo-text-primary) !important;
}

.ant-table-thead > tr > th {
  background: var(--geo-bg-surface) !important;
  border-bottom-color: var(--geo-border-default) !important;
  color: var(--geo-text-primary) !important;
}

.ant-table-tbody > tr > td {
  background: transparent !important;
  border-bottom-color: var(--geo-border-default) !important;
  color: var(--geo-text-primary) !important;
}

.ant-table-tbody > tr:hover > td {
  background: var(--geo-bg-surface-hover) !important;
}

.ant-table-tbody > tr.ant-table-row-selected > td {
  background: rgba(139, 92, 246, 0.1) !important;
}

.ant-table-placeholder {
  background: transparent !important;
  color: var(--geo-text-secondary) !important;
}

.ant-table-column-sorter {
  color: var(--geo-text-secondary) !important;
  opacity: 0.5;
}

.ant-table-column-sorter-up.active,
.ant-table-column-sorter-down.active {
  color: var(--geo-primary-light) !important;
  opacity: 1;
}

/* 按钮组件 */
.ant-btn-default {
  background: transparent !important;
  border-color: var(--geo-border-default) !important;
  color: var(--geo-text-primary) !important;
}

.ant-btn-default:hover {
  background: var(--geo-bg-surface-hover) !important;
  border-color: var(--geo-primary) !important;
  color: var(--geo-text-primary) !important;
}

.ant-btn-primary {
  background: var(--geo-primary-gradient) !important;
  border: none !important;
  color: #fff !important;
}

.ant-btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: var(--geo-shadow-glow) !important;
}

/* 输入框组件 */
.ant-input,
.ant-select-selector,
.ant-picker {
  background: var(--geo-bg-secondary) !important;
  border-color: var(--geo-border-default) !important;
  color: var(--geo-text-primary) !important;
}

.ant-input:hover,
.ant-select-selector:hover,
.ant-picker:hover {
  border-color: var(--geo-primary) !important;
}

.ant-input:focus,
.ant-select-focused .ant-select-selector,
.ant-picker-focused {
  border-color: var(--geo-primary) !important;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2) !important;
}

.ant-input::placeholder {
  color: var(--geo-text-disabled) !important;
}

/* 下拉菜单 */
.ant-select-dropdown {
  background: var(--geo-bg-surface) !important;
  border-color: var(--geo-border-default) !important;
}

.ant-select-item {
  color: var(--geo-text-primary) !important;
}

.ant-select-item:hover {
  background: var(--geo-bg-surface-hover) !important;
}

.ant-select-item-option-selected {
  background: rgba(139, 92, 246, 0.15) !important;
  color: var(--geo-primary-light) !important;
}

/* 日期选择器下拉容器：彻底肃清外层残留影音/背景/轮廓 */
/* 日期选择器下拉容器：彻底肃清外层残留阴影/背景/轮廓，解决圆角背后的尖角问题 */
div[class*="ant-picker-dropdown"] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

.ant-picker-dropdown .ant-picker-panel-container {
  background: var(--geo-bg-surface) !important;
  border: 1px solid var(--geo-border-default) !important;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.9) !important;
  border-radius: var(--geo-radius-lg) !important;
  margin-top: -1px !important;
  outline: none !important;
  overflow: hidden !important; /* 强制裁剪内部可能溢出的尖角或背景 */
}

/* 输入框交互逻辑：移除紫色活跃条，恢复标准边框感 */
.ant-picker-range.ant-picker-focused {
  border-color: var(--geo-primary) !important;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2) !important;
}

.ant-picker-range .ant-picker-active-bar {
  display: none !important;
}

.ant-picker-panel {
  background: transparent !important;
  border: none !important;
}

/* 头部操作区域 */
.ant-picker-header {
  color: var(--geo-text-primary) !important;
  border-bottom: 1px solid var(--geo-border-default) !important;
}

.ant-picker-header button {
  color: var(--geo-text-secondary) !important;
}

.ant-picker-header button:hover {
  color: var(--geo-primary-light) !important;
}

.ant-picker-header-view {
  color: var(--geo-text-primary) !important;
  font-weight: 600 !important;
}

/* 日期单元格状态 */
.ant-picker-cell {
  color: var(--geo-text-disabled) !important;
}

.ant-picker-cell-in-view {
  color: var(--geo-text-primary) !important;
}

.ant-picker-cell-in-view .ant-picker-cell-inner {
  color: inherit !important;
}

/* 范围选中的背景 - 柔和紫色蒙层 */
.ant-picker-cell-in-view.ant-picker-cell-in-range::before {
  background: rgba(139, 92, 246, 0.12) !important;
}

/* 仅在当前视图内的日期（in-view）应用选中/范围起点终点高亮 */
.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner,
.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
  background: var(--geo-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* 范围连接处的圆角与背景平滑处理 - 同样限定 in-view */
.ant-picker-cell-in-view.ant-picker-cell-range-start::before,
.ant-picker-cell-in-view.ant-picker-cell-range-end::before {
  background: rgba(139, 92, 246, 0.12) !important;
}

.ant-picker-cell-range-start::before {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}

.ant-picker-cell-range-end::before {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

/* 悬停行为 */
.ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner {
  background: var(--geo-bg-surface-hover) !important;
}

.ant-picker-today-btn {
  color: var(--geo-primary) !important;
  font-weight: 500 !important;
}

/* 彻底移除小三角（Arrow），响应用户建议并解决可见性瑕疵 */
.ant-picker-dropdown .ant-picker-range-arrow,
.ant-picker-dropdown .ant-picker-arrow,
.ant-picker-range-arrow {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 解决浮窗顶部边缘溢光 */
.ant-picker-panel-container {
  overflow: hidden !important;
}

.ant-picker-header {
  border-top: none !important;
}

/* 标签组件 */
.ant-tag {
  background: var(--ds-bg-alt) !important;
  border-color: var(--ds-border) !important;
  color: var(--geo-text-primary) !important;
}

/* 模态框容器必须透明，否则会露出尖角 */
.ant-modal {
  background: transparent !important;
}

.ant-modal-header {
  background: transparent !important;
  border-bottom-color: var(--geo-border-default) !important;
}

.ant-modal-title {
  color: var(--geo-text-primary) !important;
}

.ant-modal-content {
  background: var(--geo-bg-surface) !important;
  color: var(--geo-text-primary) !important;
}

.ant-modal-footer {
  border-top-color: var(--geo-border-default) !important;
}

/* 消息提示 */
.ant-message {
  color: var(--geo-text-primary) !important;
}

/* 步骤条 */
.ant-steps-item-process .ant-steps-item-icon {
  background: var(--geo-primary) !important;
  border-color: var(--geo-primary) !important;
}

.ant-steps-item-process .ant-steps-item-title {
  color: var(--geo-text-primary) !important;
}

.ant-steps-item-wait .ant-steps-item-title {
  color: var(--geo-text-secondary) !important;
}

.ant-steps-item-icon {
  background: var(--geo-bg-secondary) !important;
  border-color: var(--geo-border-default) !important;
}

.ant-steps-item-icon > .ant-steps-icon {
  color: var(--geo-text-secondary) !important;
}

/* 菜单组件 */
.ant-menu {
  background: var(--geo-bg-secondary) !important;
  color: var(--geo-text-primary) !important;
  border-right: none !important;
}

.ant-menu-item {
  color: var(--geo-text-secondary) !important;
  background: transparent !important;
}

.ant-menu-item:hover {
  color: var(--geo-text-primary) !important;
  background: rgba(139, 92, 246, 0.1) !important;
}

.ant-menu-item-selected {
  color: var(--geo-primary-light) !important;
  background: rgba(139, 92, 246, 0.15) !important;
}

.ant-menu-item-selected::after {
  border-right-color: var(--geo-primary) !important;
}

.ant-menu-item-active {
  background: rgba(139, 92, 246, 0.1) !important;
}

.ant-menu-submenu-title {
  color: var(--geo-text-secondary) !important;
  background: transparent !important;
}

.ant-menu-submenu-title:hover {
  color: var(--geo-text-primary) !important;
  background: rgba(139, 92, 246, 0.1) !important;
}

.ant-menu-submenu-selected .ant-menu-submenu-title {
  color: var(--geo-primary-light) !important;
}

.ant-menu-sub {
  background: var(--geo-bg-tertiary) !important;
}

.ant-menu-submenu-popup {
  background: var(--geo-bg-surface) !important;
  border-color: var(--geo-border-default) !important;
}

.ant-menu-dark .ant-menu-item:hover {
  background: rgba(139, 92, 246, 0.1) !important;
}

.ant-menu-light {
  color: var(--geo-text-primary) !important;
}

/* 分割线 */
.ant-divider {
  border-color: var(--geo-border-default) !important;
}

.ant-divider-inner-text {
  color: var(--geo-text-secondary) !important;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.5);
}

/* ============= 更多 Ant Design 组件样式覆盖 ============= */
/* 文字排版 */
.ant-typography,
.ant-typography * {
  color: var(--geo-text-primary) !important;
}

.ant-typography-secondary {
  color: var(--geo-text-secondary) !important;
}

.ant-typography-disabled {
  color: var(--geo-text-disabled) !important;
}

/* 开关 */
.ant-switch {
  background: var(--geo-bg-tertiary) !important;
}

.ant-switch-checked {
  background: var(--geo-primary) !important;
}

/* 复选框 */
.ant-checkbox-wrapper {
  color: var(--geo-text-primary) !important;
}

.ant-checkbox-input:focus + .ant-checkbox-inner {
  border-color: var(--geo-primary) !important;
}

.ant-checkbox-checked .ant-checkbox-inner {
  background: var(--geo-primary) !important;
  border-color: var(--geo-primary) !important;
}

/* 单选框 */
.ant-radio-wrapper {
  color: var(--geo-text-primary) !important;
}

.ant-radio-input:focus + .ant-radio-inner {
  border-color: var(--geo-primary) !important;
}

.ant-radio-checked .ant-radio-inner {
  border-color: var(--geo-primary) !important;
}

.ant-radio-checked .ant-radio-inner::after {
  background: var(--geo-primary) !important;
}

/* 滑块 */
.ant-slider-track {
  background: var(--geo-primary) !important;
}

.ant-slider-rail {
  background: var(--geo-bg-tertiary) !important;
}

.ant-slider-handle {
  border-color: var(--geo-primary) !important;
}

/* 进度条 */
.ant-progress-text {
  color: var(--geo-text-primary) !important;
}

.ant-progress-inner {
  background: var(--geo-bg-tertiary) !important;
}

/* 警告框 */
.ant-alert {
  background: var(--geo-bg-surface) !important;
  border: 1px solid var(--geo-border-default) !important;
}

.ant-alert-message {
  color: var(--geo-text-primary) !important;
}

.ant-alert-description {
  color: var(--geo-text-secondary) !important;
}

/* 通知 */
.ant-notification-notice {
  background: var(--geo-bg-surface) !important;
  border: 1px solid var(--geo-border-default) !important;
}

.ant-notification-notice-message {
  color: var(--geo-text-primary) !important;
}

.ant-notification-notice-description {
  color: var(--geo-text-secondary) !important;
}

/* 工具提示 */
.ant-tooltip-inner {
  background: var(--geo-bg-surface) !important;
  color: var(--geo-text-primary) !important;
}

.ant-tooltip-arrow::before {
  background: var(--geo-bg-surface) !important;
}

/* 弹出框 */
.ant-popover {
  background: var(--geo-bg-surface) !important;
}

.ant-popover-inner {
  background: var(--geo-bg-surface) !important;
}

.ant-popover-title {
  color: var(--geo-text-primary) !important;
  border-bottom-color: var(--geo-border-default) !important;
}

.ant-popover-inner-content {
  color: var(--geo-text-primary) !important;
}

/* 下拉菜单：彻底肃清外层残留阴影/背景/轮廓，包含内容级容器及任何包装 div */
.ant-dropdown,
div[class*="ant-dropdown-placement"],
.ant-dropdown-content,
.ant-dropdown > div,
div:has(> .ant-dropdown-menu) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* 内部菜单板赋予背景沉浸感、高雅圆角及强投影分离度 */
.ant-dropdown-menu {
  background: var(--geo-bg-surface) !important;
  border: 1px solid var(--geo-border-default) !important;
  border-radius: var(--geo-radius-lg) !important;
  padding: 8px !important;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.9) !important;
  margin-top: -1px !important;
  outline: none !important;
  overflow: hidden !important; /* 强制裁剪内部可能溢出的尖角或背景 */
}

/* 彻底移除下拉菜单小三角（Arrow），避免透明背板穿帮瑕疵 */
.ant-dropdown-arrow {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.ant-dropdown-menu-item {
  color: var(--geo-text-primary) !important;
  border-radius: var(--geo-radius-md) !important;
  padding: 8px 12px !important;
  margin-bottom: 2px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ant-dropdown-menu-item:last-child {
  margin-bottom: 0 !important;
}

.ant-dropdown-menu-item:hover {
  background: var(--ds-bg-alt) !important;
}

/* 面包屑 */
.ant-breadcrumb a {
  color: var(--geo-text-secondary) !important;
}

.ant-breadcrumb a:hover {
  color: var(--geo-primary) !important;
}

.ant-breadcrumb-separator {
  color: var(--geo-text-disabled) !important;
}

.ant-breadcrumb > span:last-child {
  color: var(--geo-text-primary) !important;
}

/* 分页 */
.ant-pagination-item {
  background: var(--geo-bg-secondary) !important;
  border-color: var(--geo-border-default) !important;
}

.ant-pagination-item a {
  color: var(--geo-text-primary) !important;
}

.ant-pagination-item-active {
  background: var(--geo-primary) !important;
  border-color: var(--geo-primary) !important;
}

.ant-pagination-item-active a {
  color: #fff !important;
}

.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
  background: var(--geo-bg-secondary) !important;
  border-color: var(--geo-border-default) !important;
  color: var(--geo-text-primary) !important;
}

.ant-pagination-disabled .ant-pagination-item-link {
  color: var(--geo-text-disabled) !important;
}

.ant-pagination-total-text {
  color: var(--geo-text-secondary) !important;
  margin-right: 12px !important;
  font-weight: 500;
}

.ant-spin-dot-item {
  background-color: var(--geo-primary) !important;
}

.ant-spin-text {
  color: var(--geo-text-secondary) !important;
  margin-top: 12px !important;
  font-weight: 500 !important;
}

/* 加载蒙层优化：完全移除旧的蒙层逻辑，改为由页面控制显隐 */
.ant-spin-nested-loading > div > .ant-spin {
  display: none !important;
}

.geo-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  background: var(--ds-bg-alt);
  border-radius: var(--geo-radius-lg);
  border: 1px solid var(--geo-border-default);
  margin: 20px 0;
}

.geo-loading-icon {
  font-size: 40px;
  color: var(--geo-primary);
  margin-bottom: 16px;
  filter: drop-shadow(0 0 10px var(--geo-primary));
}

.geo-loading-text {
  color: var(--geo-text-secondary);
  font-size: 14px;
  letter-spacing: 1px;
}

/* 消息提示 (Message) 白底体系 */
.ant-message-notice-content {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  box-shadow: var(--ds-shadow-deep) !important;
  border-radius: var(--ds-radius-lg) !important;
}

.ant-message-custom-content span {
  color: var(--ds-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* 空状态 */
.ant-empty-description {
  color: var(--geo-text-secondary) !important;
}

/* 加载 */
.ant-spin-text {
  color: var(--geo-text-secondary) !important;
}

/* 徽标 */
.ant-badge-count {
  background: var(--geo-error) !important;
}

/* 头像 */
.ant-avatar {
  background: var(--geo-primary) !important;
  color: #fff !important;
}

/* 列表 */
.ant-list-item {
  border-bottom-color: var(--geo-border-default) !important;
}

.ant-list-item-meta-title {
  color: var(--geo-text-primary) !important;
}

.ant-list-item-meta-description {
  color: var(--geo-text-secondary) !important;
}

/* 时间线 */
.ant-timeline-item-head {
  background: var(--geo-bg-secondary) !important;
  border-color: var(--geo-primary) !important;
}

.ant-timeline-item-content {
  color: var(--geo-text-primary) !important;
}

/* 树形控件 */
.ant-tree {
  background: transparent !important;
  color: var(--geo-text-primary) !important;
}

.ant-tree-node-content-wrapper:hover {
  background: var(--geo-bg-surface-hover) !important;
}

.ant-tree-node-selected {
  background: rgba(139, 92, 246, 0.15) !important;
}

/* 折叠面板 */
.ant-collapse {
  background: transparent !important;
  border-color: var(--geo-border-default) !important;
}

.ant-collapse-item {
  border-color: var(--geo-border-default) !important;
}

.ant-collapse-header {
  background: var(--geo-bg-surface) !important;
  color: var(--geo-text-primary) !important;
}

.ant-collapse-content {
  background: var(--geo-bg-secondary) !important;
  border-color: var(--geo-border-default) !important;
}

.ant-collapse-content > .ant-collapse-content-box {
  color: var(--geo-text-primary) !important;
}

/* 标签页 */
.ant-tabs {
  color: var(--geo-text-primary) !important;
}

.ant-tabs-tab {
  color: var(--geo-text-secondary) !important;
  background: transparent !important;
}

.ant-tabs-tab:hover {
  color: var(--geo-text-primary) !important;
}

.ant-tabs-tab-active {
  color: var(--geo-primary) !important;
}

.ant-tabs-ink-bar {
  background: var(--geo-primary) !important;
}

.ant-tabs-content {
  color: var(--geo-text-primary) !important;
}

/* 表单 */
.ant-form-item-label > label {
  color: var(--geo-text-primary) !important;
}

.ant-form-item-explain-error {
  color: var(--geo-error) !important;
}

.ant-form-item-explain-warning {
  color: var(--geo-warning) !important;
}

/* 上传组件 */
.ant-upload {
  background: var(--geo-bg-secondary) !important;
  border-color: var(--geo-border-default) !important;
}

.ant-upload-drag {
  background: var(--geo-bg-secondary) !important;
  border-color: var(--geo-border-default) !important;
}

.ant-upload-text {
  color: var(--geo-text-primary) !important;
}

.ant-upload-hint {
  color: var(--geo-text-secondary) !important;
}

/* 描述列表 */
.ant-descriptions-title {
  color: var(--geo-text-primary) !important;
}

.ant-descriptions-item-label {
  color: var(--geo-text-secondary) !important;
}

.ant-descriptions-item-content {
  color: var(--geo-text-primary) !important;
}

/* 统计 */
.ant-statistic-title {
  color: var(--geo-text-secondary) !important;
}

.ant-statistic-content {
  color: var(--geo-text-primary) !important;
}

/* 评论 */
.ant-comment-author {
  color: var(--geo-text-secondary) !important;
}

.ant-comment-content-author-name {
  color: var(--geo-text-secondary) !important;
}

.ant-comment-content-author-time {
  color: var(--geo-text-disabled) !important;
}

.ant-comment-content-detail p {
  color: var(--geo-text-primary) !important;
}

/* 全局背景 */
body {
  background: var(--geo-bg-primary) !important;
  color: var(--geo-text-primary) !important;
}

#root,
#app {
  background: var(--geo-bg-primary) !important;
}

/* ============= 页面标题样式 ============= */
.geo-page-header {
  margin-bottom: var(--geo-spacing-xl);
}

.geo-page-title {
  color: var(--geo-text-primary);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 var(--geo-spacing-sm) 0;
  display: flex;
  align-items: center;
  gap: var(--geo-spacing-sm);
}

.geo-page-title-icon {
  font-size: 28px;
  background: var(--geo-primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.geo-page-subtitle {
  color: var(--geo-text-secondary);
  font-size: 14px;
  margin: 0;
}

/* ============= 统计卡片样式 ============= */
.geo-stat-card {
  background: linear-gradient(135deg, var(--geo-bg-surface) 0%, var(--geo-bg-tertiary) 100%);
  border: 1px solid var(--geo-border-default);
  border-radius: var(--geo-radius-xl);
  padding: var(--geo-spacing-lg);
  transition: all var(--geo-transition-normal);
  height: 100%;
}

.geo-stat-card:hover {
  border-color: var(--geo-primary);
  transform: translateY(-4px);
  box-shadow: var(--geo-shadow-glow);
}

.geo-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--geo-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: var(--geo-spacing-md);
  background: var(--geo-primary-gradient);
  box-shadow: var(--geo-shadow-md);
}

.geo-stat-label {
  color: var(--geo-text-secondary);
  font-size: 14px;
  margin-bottom: var(--geo-spacing-xs);
}

.geo-stat-value {
  color: var(--geo-text-primary);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

.geo-stat-suffix {
  color: var(--geo-text-tertiary);
  font-size: 14px;
  margin-left: var(--geo-spacing-xs);
}

/* ============= 数据卡片样式 ============= */
.geo-data-card {
  background: var(--geo-bg-surface);
  border: 1px solid var(--geo-border-default);
  border-radius: var(--geo-radius-lg);
  /* 移除外层 padding，避免头部与主体产生色差空隙 */
  padding: 0 !important;
  transition: all var(--geo-transition-normal);
  overflow: hidden;
}

.geo-data-card:hover {
  background: var(--geo-bg-surface-hover);
  border-color: var(--geo-border-hover);
  box-shadow: var(--geo-shadow-lg);
}

.geo-data-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--geo-border-default);
}

.geo-data-card-title {
  color: var(--geo-text-primary);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.geo-data-card-action {
  color: var(--geo-primary);
  cursor: pointer;
  transition: color var(--geo-transition-fast);
}

.geo-data-card-action:hover {
  color: var(--geo-primary-light);
}

/* ============= 表格样式增强 ============= */
.geo-table .ant-table {
  background: transparent !important;
  color: var(--geo-text-primary) !important;
}

.geo-table .ant-table-thead > tr > th {
  background: var(--geo-bg-surface) !important;
  color: var(--geo-text-primary) !important;
  border-bottom: 1px solid var(--geo-border-default) !important;
  font-weight: 600;
}

.geo-table .ant-table-tbody > tr > td {
  border-bottom: 1px solid var(--geo-border-default) !important;
  background: transparent !important;
  color: var(--geo-text-primary) !important;
}

.geo-table .ant-table-tbody > tr:hover > td {
  background: var(--geo-bg-surface-hover) !important;
}

.geo-table .ant-table-tbody > tr.ant-table-row-selected > td {
  background: rgba(139, 92, 246, 0.1) !important;
}

/* ============= 按钮样式增强 ============= */
.geo-btn-primary {
  background: var(--geo-primary-gradient) !important;
  border: none !important;
  border-radius: var(--geo-radius-md) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: var(--geo-shadow-md) !important;
  transition: all var(--geo-transition-normal) !important;
}

.geo-btn-primary:hover {
  filter: brightness(1.1) !important;
  box-shadow: var(--geo-shadow-glow) !important;
  transform: translateY(-2px) !important;
}

.geo-btn-default {
  background: transparent !important;
  border: 1px solid var(--geo-border-default) !important;
  border-radius: var(--geo-radius-md) !important;
  color: var(--geo-text-primary) !important;
  transition: all var(--geo-transition-fast) !important;
}

.geo-btn-default:hover {
  background: var(--geo-bg-surface-hover) !important;
  border-color: var(--geo-primary) !important;
  color: var(--geo-text-primary) !important;
}

/* 统一的危险/删除按钮样式 */
.geo-btn-danger {
  color: rgba(239, 68, 68, 0.7) !important;
  transition: all var(--geo-transition-fast) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.geo-btn-danger:hover {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.12) !important;
  transform: scale(1.1) !important;
}

.geo-btn-icon {
  color: var(--geo-text-secondary) !important;
  transition: all var(--geo-transition-fast) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.geo-btn-icon:hover {
  color: var(--geo-primary-light) !important;
  background: rgba(139, 92, 246, 0.12) !important;
  transform: scale(1.1) !important;
}

.geo-btn-secondary {
  background: transparent !important;
  border: 1px solid var(--geo-border-default) !important;
  border-radius: var(--geo-radius-md) !important;
  color: var(--geo-text-primary) !important;
  transition: all var(--geo-transition-fast) !important;
}

.geo-btn-secondary:hover {
  border-color: var(--geo-primary) !important;
  background: rgba(139, 92, 246, 0.05) !important;
  color: var(--geo-primary-light) !important;
}

/* 搜索框风格对齐：移除专用类名，由 geo-input 统一驱动 */
.geo-input .ant-input-search-button {
  background: var(--geo-bg-secondary) !important;
  border-color: var(--geo-border-default) !important;
  color: var(--geo-text-secondary) !important;
}

.geo-input .ant-input-search-button:hover {
  background: var(--geo-bg-surface-hover) !important;
  border-color: var(--geo-primary) !important;
  color: var(--geo-primary-light) !important;
}

/* ============= 搜索栏与聚合组件圆角修复 ============= */
/* 核心逻辑：在 Space.Compact 内部时，由 Antd 处理圆角，强制覆盖掉 .geo-xxx 类名的 !important */
.ant-space-compact-item.geo-select .ant-select-selector,
.ant-space-compact-item.geo-search .ant-input-affix-wrapper,
.ant-space-compact-item.geo-input .ant-input {
  border-radius: inherit !important;
}

/* 针对 Input.Search 内部的输入框与按钮连接处 */
.ant-input-search .ant-input-affix-wrapper {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.ant-input-search .ant-input-group-addon:last-child .ant-input-search-button {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: -1px !important;
}

/* 修正 Space.Compact 内部的边框重叠 */
.ant-space-compact-item:not(:last-child).geo-input .ant-select-selector,
.ant-space-compact-item:not(:last-child).geo-input .ant-input-affix-wrapper,
.ant-space-compact-item:not(:last-child).geo-input .ant-input {
  margin-right: -1px !important; /* 改用负边距实现重叠，确保悬停时 z-index 能显示完整边框 */
}

/* ============= 输入框样式增强 ============= */
.geo-input .ant-input,
.geo-input .ant-select-selector,
.geo-input .ant-picker,
.geo-input .ant-input-affix-wrapper {
  background: var(--geo-bg-secondary) !important;
  border: 1px solid var(--geo-border-default) !important;
  border-radius: var(--geo-radius-md); /* 移除 !important 以便 Space.Compact 覆盖 */
  color: var(--geo-text-primary) !important;
  padding-left: 12px !important;
}

/* 搜索栏与聚合组件圆角修复：强制抹平对接处 */
.ant-space-compact-item:not(:first-child):not(:last-child) .ant-select-selector,
.ant-space-compact-item:not(:first-child):not(:last-child) .ant-input-affix-wrapper,
.ant-space-compact-item:not(:first-child):not(:last-child) .ant-input {
  border-radius: 0 !important;
}

.ant-space-compact-item:first-child:not(:last-child) .ant-select-selector,
.ant-space-compact-item:first-child:not(:last-child) .ant-input-affix-wrapper,
.ant-space-compact-item:first-child:not(:last-child) .ant-input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.ant-space-compact-item:last-child:not(:first-child) .ant-select-selector,
.ant-space-compact-item:last-child:not(:first-child) .ant-input-affix-wrapper,
.ant-space-compact-item:last-child:not(:first-child) .ant-input,
.ant-space-compact-item:last-child:not(:first-child) .ant-input-search-button {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* 增强 Space.Compact 成员在悬停/聚焦时的层级 */
.ant-space-compact-item:hover,
.ant-space-compact-item:focus-within {
  z-index: 2 !important;
}

.ant-space-compact-item:hover .ant-select-selector,
.ant-space-compact-item:hover .ant-input-affix-wrapper,
.ant-space-compact-item:hover .ant-input,
.ant-space-compact-item:focus-within .ant-select-selector,
.ant-space-compact-item:focus-within .ant-input-affix-wrapper,
.ant-space-compact-item:focus-within .ant-input {
  border-color: var(--geo-primary) !important;
  background: var(--ds-bg-alt) !important; /* 仅微调背景提高互动感（白底浅灰） */
}

/* --- 新增：紧凑型弹窗按键强制拼合样式 (Geo Compact Button) --- */
.geo-compact-btn {
  background: linear-gradient(135deg, var(--geo-primary), var(--geo-secondary)) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 500 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: var(--geo-radius-md) !important;
  border-bottom-right-radius: var(--geo-radius-md) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: none !important;
}

.geo-compact-btn:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3) !important;
}

.geo-compact-btn-secondary {
  background: var(--ds-bg-alt) !important;
  border: 1px solid var(--geo-border-default) !important;
  border-left: none !important;
  color: var(--geo-text-primary) !important;
  font-weight: 500 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: var(--geo-radius-md) !important;
  border-bottom-right-radius: var(--geo-radius-md) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.geo-compact-btn-secondary:hover {
  background: var(--ds-bg-deep) !important;
  border-color: var(--geo-border-hover) !important;
}

/* 修复紧凑输入框最后子元素的右侧直角溢出 */
.ant-space-compact-item:not(:last-child).geo-input .ant-input,
.ant-space-compact-item:not(:last-child).geo-input .ant-input-affix-wrapper {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* 修复暗黑全局弹窗的右上角关闭按钮 */
.geo-modal .ant-modal-close {
  top: 24px !important;
  inset-inline-end: 24px !important;
  color: var(--geo-text-secondary) !important;
}
.geo-modal .ant-modal-close:hover {
  color: var(--geo-primary) !important;
  background: transparent !important;
}

/* Input.Search 内部连结处修复 */
.ant-input-search .ant-input-affix-wrapper {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.ant-input-search .ant-input-group-addon:last-child .ant-input-search-button {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: -1px !important;
}

/* 针对 Prefix 场景下 Antd 会自带图标，不需要额外 Padding */
.geo-input .ant-input-affix-wrapper-focused,
.geo-input .ant-input-affix-wrapper:hover {
  border-color: var(--geo-primary) !important;
}

.geo-input .ant-input-affix-wrapper .ant-input {
  padding-left: 8px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.geo-input .ant-input:hover,
.geo-input .ant-select-selector:hover,
.geo-input .ant-picker:hover {
  border-color: var(--geo-primary) !important;
}

.geo-input .ant-input:focus,
.geo-input .ant-select-focused .ant-select-selector,
.geo-input .ant-picker-focused {
  border-color: var(--geo-primary) !important;
}

/* 列表卡片悬停 - 彻底还原（仅保留 transition 确保点击等其他反馈平滑） */
.geo-data-card,
.content-list-card {
  transition: border-color var(--geo-transition-normal), background var(--geo-transition-normal) !important;
}

/* 移除大卡片悬停反差，回归基础质感 */
.geo-data-card:hover,
.content-list-card:hover {
  /* 显式重置为基础样式，确保无任何反差 */
  border-color: var(--geo-border-default) !important;
  background: var(--geo-bg-surface) !important;
  box-shadow: var(--geo-shadow-sm) !important;
}

/* 表格行悬停动效 */
.ant-table-tbody > tr.ant-table-row:hover > td {
  background: transparent !important; /* 彻底透明化，融入卡片背景 */
  transition: background 0.3s ease !important;
}

/* ============= Tag 样式增强 ============= */
.geo-tag {
  border-radius: var(--geo-radius-full) !important;
  padding: 2px 12px !important;
  font-weight: 500 !important;
  border: none !important;
}

.geo-tag-success {
  background: rgba(34, 197, 94, 0.15) !important;
  color: var(--geo-success) !important;
}

.geo-tag-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--geo-warning) !important;
}

.geo-tag-error {
  background: rgba(239, 68, 68, 0.15) !important;
  color: var(--geo-error) !important;
}

.geo-tag-info {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--geo-info) !important;
}

.geo-tag-primary {
  background: rgba(139, 92, 246, 0.15) !important;
  color: var(--geo-primary-light) !important;
}

/* ============= 图表容器样式 ============= */
.geo-chart-container {
  background: var(--geo-bg-surface);
  border: 1px solid var(--geo-border-default);
  border-radius: var(--geo-radius-lg);
  padding: var(--geo-spacing-lg);
}

/* ============= 加载状态样式 ============= */
.geo-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: var(--geo-spacing-md);
}

.geo-loading-text {
  color: var(--geo-text-secondary);
  font-size: 14px;
}

/* ============= 空状态样式 ============= */
.geo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  gap: 16px;
  padding: 40px;
  text-align: center;
}

.geo-empty-icon {
  font-size: 80px;
  line-height: 1;
  background: var(--geo-primary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 15px rgba(0, 242, 254, 0.4));
  margin-bottom: 8px;
  opacity: 0.85;
}

.geo-empty-title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.5px;
}

.geo-empty-description {
  color: var(--geo-text-secondary);
  font-size: 14px;
  max-width: 320px;
  line-height: 1.6;
  margin: 0;
}

/* ============= 报告页列表项样式 ============= */
.geo-report-item {
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  background: var(--ds-surface);
  border: 1px solid var(--geo-border-default);
  transition: all var(--geo-transition-normal) ease;
}

.geo-report-item:hover {
  background: var(--ds-bg-alt) !important;
  border-color: var(--geo-border-hover) !important;
}

.geo-report-item.active {
  background: var(--ds-accent-bg) !important;
  border-color: var(--ds-accent) !important;
  box-shadow: var(--ds-focus-ring);
}

/* ============= 响应式布局 ============= */
@media (max-width: 768px) {
  .geo-page-container {
    padding: var(--geo-spacing-md);
  }
  
  .geo-page-title {
    font-size: 20px;
  }
  
  .geo-stat-value {
    font-size: 24px;
  }
}

/* ============= 滚动条样式 ============= */
.geo-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.geo-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.geo-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: var(--geo-radius-full);
}

.geo-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.5);
}

/* ============= 工具类 ============= */
.geo-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.geo-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.geo-text-gradient {
  background: var(--geo-primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.geo-glow {
  box-shadow: var(--geo-shadow-glow);
}

.geo-glow-strong {
  box-shadow: var(--geo-shadow-glow-strong);
}
/* 全局样式 - 从 deep navy 暗色迁移到 v1 白底
   --color-* 全部 alias 到 --ds-*（在 global-design.css 中定义） */
:root {
  --color-bg: var(--ds-bg);
  --color-bg-2: var(--ds-bg);
  --color-bg-soft: var(--ds-bg);
  --color-surface: var(--ds-bg);
  --color-surface-2: var(--ds-bg-alt);
  --color-surface-3: var(--ds-bg-alt);
  --color-surface-4: var(--ds-bg-alt);
  --color-surface-5: var(--ds-bg-alt);
  --color-panel: var(--ds-bg-alt);
  --color-border: var(--ds-border);
  --color-border-strong: var(--ds-border-strong);
  --color-border-muted: var(--ds-border);
  --color-text: var(--ds-text);
  --color-text-muted: var(--ds-text-muted);
  --color-text-dim: var(--ds-text-subtle);
  --color-primary: var(--ds-accent);
  --color-primary-accent: var(--ds-accent);
  --color-primary-deep: var(--ds-accent-deep);
  --color-primary-tint: var(--ds-accent);
  --color-primary-rgb: 77, 166, 255;
  --color-primary-accent-rgb: 77, 166, 255;
  --color-primary-deep-rgb: 0, 120, 212;
  --color-success: var(--ds-success);
  --color-warning: var(--ds-warning);
  --color-danger: var(--ds-danger);
  --color-info: var(--ds-accent);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--ds-bg);
}

body {
  font-family: var(--ds-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  background: var(--ds-bg);
  color: var(--ds-text);
}

#root {
  height: 100vh;
  overflow: hidden;
  background: var(--ds-bg);
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* 自定义滚动条 - 默认样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* 深色背景滚动条 */
.dark-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.dark-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.dark-scrollbar::-webkit-scrollbar-thumb {
  background: var(--ds-border);
  border-radius: 3px;
}

.dark-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--ds-text-subtle);
}

/* Ant Design 自定义样式 */
.ant-layout {
  min-height: auto;
}

.ant-layout-sider {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.ant-menu-item a {
  color: inherit;
}

.ant-menu-item-selected a {
  color: inherit;
}

/* 卡片阴影效果 */
.ant-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px rgba(0, 0, 0, 0.02);
  transition: box-shadow 0.3s ease;
}

.ant-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* 视频hover效果 */
.video-overlay {
  transition: opacity 0.2s ease;
}

.ant-card:hover .video-overlay {
  opacity: 1 !important;
}

/* Loading状态 */
.ant-spin-nested-loading {
  min-height: 200px;
}

/* 深色表格样式 */
.dark-table .ant-table {
  background: transparent !important;
  color: var(--ds-text) !important;
}

.dark-table .ant-table-thead > tr > th {
  background: var(--color-surface-2) !important;
  color: var(--ds-text) !important;
  border-bottom: 1px solid var(--color-border-strong) !important;
  font-weight: 600;
}

.dark-table .ant-table-tbody > tr > td {
  border-bottom: 1px solid var(--color-surface-4) !important;
  background: var(--color-bg) !important;
  color: var(--ds-text) !important;
}

.dark-table .ant-table-tbody > tr:hover > td {
  background: var(--color-surface-2) !important;
}

.dark-table .ant-table-tbody > tr.ant-table-row-selected > td {
  background: rgba(var(--color-primary-rgb), 0.1) !important;
}

/* 表格内文字颜色 */
.dark-table .ant-table-cell {
  color: var(--ds-text) !important;
}

.dark-table .ant-typography {
  color: var(--ds-text) !important;
}

.dark-table .ant-space {
  color: var(--ds-text) !important;
}

/* 分页器样式 */
.dark-table .ant-pagination {
  color: var(--ds-text-muted) !important;
}

.dark-table .ant-pagination-item {
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border-strong) !important;
}

.dark-table .ant-pagination-item a {
  color: var(--ds-text) !important;
}

.dark-table .ant-pagination-item-active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.dark-table .ant-pagination-item-active a {
  color: var(--ds-text) !important;
}

.dark-table .ant-pagination-prev .ant-pagination-item-link,
.dark-table .ant-pagination-next .ant-pagination-item-link {
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border-strong) !important;
  color: var(--ds-text-muted) !important;
}

.dark-table .ant-pagination-disabled .ant-pagination-item-link {
  color: var(--ds-border) !important;
}

.dark-table .ant-pagination-options {
  color: var(--ds-text-muted) !important;
}

.dark-table .ant-select-selector {
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border-strong) !important;
  color: var(--ds-text) !important;
}

.dark-table .ant-select-arrow {
  color: var(--ds-text-subtle) !important;
}

.dark-table .ant-select-selection-item {
  color: var(--ds-text) !important;
}

/* 筛选器样式 */
.dark-table .ant-table-filter-trigger {
  color: var(--ds-text-subtle) !important;
}

.dark-table .ant-table-filter-trigger:hover {
  color: var(--ds-text) !important;
}

.dark-table .ant-table-filter-trigger-container-open {
  background: var(--color-surface-2) !important;
}

/* 排序图标 */
.dark-table .ant-table-column-sorter {
  color: var(--ds-text-subtle) !important;
}

.dark-table .ant-table-column-sorter-up.active,
.dark-table .ant-table-column-sorter-down.active {
  color: var(--color-primary) !important;
}

/* 空状态 */
.dark-table .ant-empty-description {
  color: var(--ds-text-subtle) !important;
}

.dark-table .ant-empty-image svg {
  fill: var(--ds-border) !important;
}

/* 深色标签页样式 */
.ant-tabs {
  color: var(--ds-text);
}

.ant-tabs .ant-tabs-tab {
  color: var(--ds-text-muted);
  background: transparent;
  border: none;
}

.ant-tabs .ant-tabs-tab:hover {
  color: var(--ds-text);
}

.ant-tabs .ant-tabs-tab.ant-tabs-tab-active {
  background: var(--color-primary);
  color: var(--ds-text);
  border-radius: 8px 8px 0 0;
}

.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--ds-text);
}

.ant-tabs .ant-tabs-ink-bar {
  background: var(--color-primary);
}

.ant-tabs .ant-tabs-nav {
  margin-bottom: 0;
}

.ant-tabs .ant-tabs-nav::before {
  border-bottom: 1px solid var(--ds-border);
}

/* 深色Modal样式 */
.ant-modal-mask {
  background: rgba(0, 0, 0, 0.75) !important;
}

.ant-modal-content {
  background: var(--color-surface-3) !important;
  border: 1px solid var(--color-surface-4) !important;
}

.ant-modal-header {
  background: var(--color-surface-3) !important;
  border-bottom: 1px solid var(--color-surface-4) !important;
}

.ant-modal-title {
  color: var(--ds-text) !important;
}

.ant-modal-body {
  color: var(--ds-text) !important;
}

.ant-modal-footer {
  background: var(--color-surface-3) !important;
  border-top: 1px solid var(--color-surface-4) !important;
}

.ant-modal .ant-modal-close {
  color: var(--ds-text-muted) !important;
}

.ant-modal .ant-modal-close:hover {
  color: var(--ds-text) !important;
}

/* 深色 Confirm 弹窗增强对比度 */
.ant-modal-confirm .ant-modal-confirm-title {
  color: var(--ds-text) !important;
}

.ant-modal-confirm .ant-modal-confirm-content {
  color: var(--ds-text-muted) !important;
}

.ant-modal-confirm .ant-modal-confirm-body .anticon {
  color: var(--color-warning) !important;
}

.ant-modal-confirm .ant-btn-default {
  background: #2b2b2b !important;
  border-color: #3a3a3a !important;
  color: var(--ds-text) !important;
}

.ant-modal-confirm .ant-btn-default:hover {
  background: #383838 !important;
  border-color: #4a4a4a !important;
}

.ant-modal-confirm .ant-btn-dangerous,
.ant-modal-confirm .ant-btn-dangerous.ant-btn-primary {
  background: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: var(--ds-text) !important;
}

.ant-modal-confirm .ant-btn-dangerous:hover,
.ant-modal-confirm .ant-btn-dangerous.ant-btn-primary:hover {
  background: #ff6b6d !important;
  border-color: #ff6b6d !important;
}

/* 深色Input和TextArea样式 */
.ant-input[style*="background: #1a1a2e"],
.ant-input-textarea[style*="background: #1a1a2e"] textarea {
  color: var(--ds-text) !important;
}

.ant-input[style*="background: #1a1a2e"]::placeholder,
.ant-input-textarea[style*="background: #1a1a2e"] textarea::placeholder {
  color: var(--ds-text-subtle) !important;
}

.ant-input[style*="background: #1a1a2e"]:focus,
.ant-input-textarea[style*="background: #1a1a2e"] textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2) !important;
}

/* 深色上传组件样式 */
.ant-upload-drag[style*="background: #1a1a2e"] {
  background: #1a1a2e !important;
}

.ant-upload-drag[style*="background: #1a1a2e"]:hover {
  border-color: var(--color-primary) !important;
}

.ant-upload-drag-icon {
  margin-bottom: 16px !important;
}

.ant-upload.ant-upload-drag p.ant-upload-text {
  color: var(--ds-text) !important;
  margin-bottom: 4px !important;
}

.ant-upload.ant-upload-drag p.ant-upload-hint {
  color: var(--ds-text-subtle) !important;
}

/* 深色按钮悬停效果 */
.ant-btn[style*="background: transparent"]:hover {
  background: rgba(var(--color-primary-rgb), 0.1) !important;
  border-color: var(--color-primary) !important;
  color: var(--ds-text) !important;
}

.ant-btn[style*="background: var(--color-primary)"]:hover {
  background: #7b8ff5 !important;
  border-color: #7b8ff5 !important;
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.4) !important;
}

/* 深色Checkbox样式 */
.ant-checkbox-wrapper {
  color: var(--ds-text);
}

.ant-checkbox-inner {
  background-color: var(--color-surface-4) !important;
  border-color: var(--color-border-strong) !important;
}

.ant-checkbox-checked .ant-checkbox-inner {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.ant-checkbox-wrapper:hover .ant-checkbox-inner {
  border-color: var(--color-primary) !important;
}

/* Swiper 自定义样式 */
.swiper {
  width: 100% !important;
  height: 100% !important;
}

.swiper-slide {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.swiper-slide section {
  width: 100% !important;
}

/* 隐藏默认分页器 */
.swiper-pagination {
  display: none !important;
}

/* Swiper 滚动条优化 */
.swiper-wrapper {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 深色折叠面板样式 */
.ant-collapse {
  background: transparent !important;
  border: none !important;
}

.ant-collapse > .ant-collapse-item {
  border-bottom: none !important;
}

.ant-collapse-header {
  color: white !important;
  padding: 16px 24px !important;
}

.ant-collapse-content {
  background: transparent !important;
  border-top: none !important;
}

.ant-collapse-content-box {
  padding: 16px 24px !important;
}

.ant-collapse-arrow {
  color: white !important;
}

/* 首页最后一页滚动条样式 */
.swiper-slide section::-webkit-scrollbar {
  width: 6px;
}

.swiper-slide section::-webkit-scrollbar-track {
  background: var(--ds-border);
}

.swiper-slide section::-webkit-scrollbar-thumb {
  background: rgba(var(--color-primary-rgb), 0.5);
  border-radius: 3px;
}

.swiper-slide section::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-primary-rgb), 0.7);
}

/* 视频卡片hover效果 */
.play-overlay {
  opacity: 0;
  transition: opacity 0.3s;
}

.ant-card:hover .play-overlay {
  opacity: 1 !important;
}

/* 自定义Tab按钮hover效果 */
.custom-tab-button {
  padding: 12px 32px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  user-select: none;
}

.custom-tab-button:hover {
  background: rgba(var(--color-primary-rgb), 0.2) !important;
  transform: translateY(-2px);
}

.custom-tab-button.active {
  background: var(--color-primary) !important;
  color: var(--ds-text) !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.4);
}

.custom-tab-button.inactive {
  background: transparent;
  color: var(--ds-text-muted);
  font-weight: 400;
}

.custom-tab-button.inactive:hover {
  color: var(--ds-text);
}

/* 产品Tab按钮样式（浅色主题） */
.product-tab-button {
  padding: 10px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  user-select: none;
}

.product-tab-button:hover {
  background: rgba(var(--color-primary-rgb), 0.1) !important;
  transform: translateY(-2px);
}

.product-tab-button.active {
  background: var(--color-primary) !important;
  color: var(--ds-text) !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.4);
}

.product-tab-button.inactive {
  background: transparent;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 400;
}

.product-tab-button.inactive:hover {
  color: rgba(0, 0, 0, 0.85);
}

/* 矩阵发布页面深色主题 */
.ant-card-body::-webkit-scrollbar {
  width: 6px;
}

.ant-card-body::-webkit-scrollbar-track {
  background: rgba(42, 42, 42, 0.3);
  border-radius: 3px;
}

.ant-card-body::-webkit-scrollbar-thumb {
  background: var(--ds-border);
  border-radius: 3px;
}

.ant-card-body::-webkit-scrollbar-thumb:hover {
  background: var(--ds-text-subtle);
}

/* 深色Input样式 */
.ant-input[style*="background: var(--color-bg-2)"],
.ant-input[type="datetime-local"][style*="background: var(--color-bg-2)"] {
  color: var(--ds-text) !important;
  color-scheme: dark;
}

.ant-input[style*="background: var(--color-bg-2)"]::placeholder {
  color: var(--ds-text-subtle) !important;
}

.ant-input[style*="background: var(--color-bg-2)"]:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2) !important;
}

/* 深色Spin加载样式 */
.ant-spin-dot-item {
  background-color: var(--color-primary) !important;
}

/* ============= 全局深色主题样式 ============= */

/* 深色Card样式 */
.ant-card {
  background: var(--color-surface) !important;
  border-color: var(--color-surface-4) !important;
  color: var(--ds-text) !important;
}

.ant-card-head {
  background: var(--color-surface) !important;
  border-bottom-color: var(--color-surface-4) !important;
  color: var(--ds-text) !important;
}

.ant-card-head-title {
  color: var(--ds-text) !important;
}

.ant-card-bordered {
  border: 1px solid var(--color-surface-4) !important;
}

/* 深色Typography样式 */
.ant-typography {
  color: var(--ds-text) !important;
}

.ant-typography-secondary {
  color: var(--ds-text-subtle) !important;
}

/* 深色Dropdown和Menu样式 */
.ant-dropdown {
  background: var(--color-surface-3) !important;
}

.ant-dropdown-menu {
  background: var(--color-surface-3) !important;
  border: 1px solid var(--color-surface-4) !important;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.2) !important;
}

.ant-dropdown-menu-item,
.ant-dropdown-menu-submenu-title {
  color: var(--ds-text) !important;
}

.ant-dropdown-menu-item:hover,
.ant-dropdown-menu-submenu-title:hover {
  background: var(--ds-border) !important;
}

.ant-dropdown-menu-item-divider {
  background: var(--color-surface-4) !important;
}

.ant-dropdown-menu-title-content a {
  color: var(--ds-text) !important;
}

/* 深色Select样式 */
.ant-select-dropdown {
  background: var(--color-surface-3) !important;
  border: 1px solid var(--color-surface-4) !important;
}

.ant-select-item {
  color: var(--ds-text) !important;
}

.ant-select-item-option-selected {
  background: rgba(var(--color-primary-rgb), 0.2) !important;
}

.ant-select-item-option:hover {
  background: var(--ds-border) !important;
}

/* 深色Cascader样式（省/市级联选择） */
.ant-cascader-dropdown {
  background: var(--color-surface-3) !important;
  border: 1px solid var(--color-surface-4) !important;
}

.ant-cascader-menu {
  background: transparent !important;
  border-right: 1px solid var(--color-surface-4) !important;
}

.ant-cascader-menu:last-child {
  border-right: none !important;
}

.ant-cascader-menu-item {
  color: var(--ds-text) !important;
}

.ant-cascader-menu-item-content {
  color: var(--ds-text) !important;
}

.ant-cascader-menu-item:hover {
  background: var(--ds-border) !important;
}

.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled),
.ant-cascader-menu-item-active:hover:not(.ant-cascader-menu-item-disabled) {
  background: rgba(var(--color-primary-rgb), 0.2) !important;
}

.ant-cascader-menu-item-disabled {
  color: var(--ds-border) !important;
}

.ant-cascader-menu-item-expand-icon,
.ant-cascader-menu-item-loading-icon {
  color: var(--ds-text-subtle) !important;
}

/* 深色DatePicker样式 */
.ant-picker-dropdown {
  background: var(--color-surface-3) !important;
}

.ant-picker-panel-container {
  background: var(--color-surface-3) !important;
  border: 1px solid var(--color-surface-4) !important;
}

.ant-picker-header,
.ant-picker-content th,
.ant-picker-cell {
  color: var(--ds-text) !important;
}

.ant-picker-cell:hover .ant-picker-cell-inner {
  background: var(--ds-border) !important;
}

.ant-picker-cell-selected .ant-picker-cell-inner {
  background: var(--color-primary) !important;
}

.ant-picker-time-panel {
  background: var(--color-surface-3) !important;
}

.ant-picker-time-panel-column {
  background: var(--color-surface-3) !important;
}

.ant-picker-time-panel-column > li .ant-picker-time-panel-cell-inner {
  color: var(--ds-text) !important;
}

.ant-picker-time-panel-cell:hover .ant-picker-time-panel-cell-inner {
  background: var(--ds-border) !important;
}

.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
  background: rgba(var(--color-primary-rgb), 0.2) !important;
  color: var(--ds-text) !important;
}

.ant-picker-time-panel-cell-disabled .ant-picker-time-panel-cell-inner {
  color: var(--ds-text-subtle) !important;
}

.ant-picker-footer {
  border-top: 1px solid var(--color-surface-4) !important;
  background: var(--color-surface-3) !important;
}

.ant-picker-ok .ant-btn {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--ds-text) !important;
}

/* 深色Badge样式 */
.ant-badge-count {
  background: #ff4d4f !important;
  color: var(--ds-text) !important;
  box-shadow: 0 0 0 1px var(--color-surface) !important;
}

/* 深色Button样式优化 */
.ant-btn-default {
  background: transparent !important;
  border-color: var(--color-surface-4) !important;
  color: var(--ds-text) !important;
}

.ant-btn-default:hover {
  background: var(--ds-border) !important;
  border-color: var(--color-primary) !important;
  color: var(--ds-text) !important;
}

/* 深色Tag样式 */
.ant-tag {
  border-color: var(--color-surface-4) !important;
}

/* 深色Divider样式 */
.ant-divider {
  border-color: var(--color-surface-4) !important;
}

/* 深色Statistic样式 */
.ant-statistic-title {
  color: var(--ds-text-muted) !important;
}

.ant-statistic-content {
  color: var(--ds-text) !important;
}

/* 深色Alert样式 */
.ant-alert {
  background: rgba(var(--color-primary-rgb), 0.1) !important;
  border: 1px solid rgba(var(--color-primary-rgb), 0.3) !important;
}

.ant-alert-message {
  color: var(--ds-text) !important;
}

.ant-alert-description {
  color: var(--ds-text-muted) !important;
}

.ant-alert-info {
  background: rgba(var(--color-primary-rgb), 0.1) !important;
  border-color: rgba(var(--color-primary-rgb), 0.3) !important;
}

.ant-alert-warning {
  background: rgba(250, 173, 20, 0.1) !important;
  border-color: rgba(250, 173, 20, 0.3) !important;
}

.ant-alert-success {
  background: rgba(82, 196, 26, 0.1) !important;
  border-color: rgba(82, 196, 26, 0.3) !important;
}

.ant-alert-error {
  background: rgba(255, 77, 79, 0.1) !important;
  border-color: rgba(255, 77, 79, 0.3) !important;
}

/* 深色Empty样式 */
.ant-empty-description {
  color: var(--ds-text-subtle) !important;
}

.ant-empty-img-simple-path {
  fill: var(--ds-border) !important;
}

/* 深色Form样式 */
.ant-form-item-label > label {
  color: var(--ds-text) !important;
}

.ant-form-item-explain-error {
  color: #ff4d4f !important;
}

/* 深色Image样式 */
.ant-image-preview-wrap {
  background: rgba(0, 0, 0, 0.85) !important;
}

.ant-image-preview-operations {
  background: rgba(0, 0, 0, 0.1) !important;
}

/* 深色Tooltip样式 */
.ant-tooltip-inner {
  background: rgba(0, 0, 0, 0.85) !important;
  color: var(--ds-text) !important;
}

.ant-tooltip-arrow-content {
  background: rgba(0, 0, 0, 0.85) !important;
}

/* 深色Popover样式 */
.ant-popover-inner {
  background: var(--color-surface-3) !important;
  border: 1px solid var(--color-surface-4) !important;
}

.ant-popover-title {
  color: var(--ds-text) !important;
  border-bottom-color: var(--color-surface-4) !important;
}

.ant-popover-inner-content {
  color: var(--ds-text) !important;
}

/* 日志筛选行换行 */
.log-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

/* 日志详情抽屉深色样式 */
.admin-logs-drawer .ant-drawer-title {
  color: var(--ds-text) !important;
}

.admin-logs-drawer .ant-drawer-close {
  color: var(--ds-text-muted) !important;
}

.admin-logs-drawer .ant-descriptions-item-label {
  color: var(--ds-text-muted) !important;
}

.admin-logs-drawer .ant-descriptions-item-content {
  color: var(--ds-text) !important;
}

.admin-logs-drawer .ant-divider {
  border-color: var(--ds-border) !important;
}

.admin-logs-drawer .ant-btn-link {
  color: rgba(var(--color-primary-rgb), 0.95) !important;
}

.admin-logs-drawer .ant-btn-link[disabled] {
  color: var(--ds-text-subtle) !important;
}

/* 深色Progress样式 */
.ant-progress-text {
  color: var(--ds-text) !important;
}

/* 深色Steps样式 */
.ant-steps-item-title {
  color: var(--ds-text) !important;
}

.ant-steps-item-description {
  color: var(--ds-text-muted) !important;
}

.ant-steps-item-wait .ant-steps-item-icon {
  background: var(--color-surface) !important;
  border-color: var(--color-surface-4) !important;
}

.ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon {
  color: var(--ds-text-subtle) !important;
}

/* 深色Input全局样式 */
.ant-input,
.ant-input-affix-wrapper,
.ant-input-number,
.ant-picker {
  background: var(--color-surface) !important;
  border-color: var(--color-surface-4) !important;
  color: var(--ds-text) !important;
}

.ant-picker .ant-picker-input > input {
  color: var(--ds-text) !important;
}

.ant-picker .ant-picker-input > input::placeholder {
  color: var(--ds-text-subtle) !important;
}

.ant-picker .ant-picker-range-separator,
.ant-picker .ant-picker-suffix,
.ant-picker .ant-picker-clear {
  color: var(--ds-text-subtle) !important;
}

.ant-input::placeholder,
.ant-input-affix-wrapper input::placeholder {
  color: var(--ds-text-subtle) !important;
}

.ant-input:hover,
.ant-input-affix-wrapper:hover,
.ant-input-number:hover,
.ant-picker:hover {
  border-color: var(--color-primary) !important;
}

.ant-input:focus,
.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused,
.ant-input-number:focus,
.ant-picker:focus,
.ant-picker-focused {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2) !important;
}

.ant-input-prefix,
.ant-input-suffix {
  color: var(--ds-text-subtle) !important;
}

.ant-input-number-input {
  color: var(--color-text) !important;
  background: transparent !important;
}

.ant-input-number-input::placeholder {
  color: var(--ds-text-subtle) !important;
}

.ant-input-number-disabled {
  background: var(--color-surface-3) !important;
  border-color: var(--color-surface-4) !important;
}

.ant-input-number-disabled .ant-input-number-input {
  color: var(--color-text-dim) !important;
}

/* 深色TextArea样式 */
.ant-input-textarea {
  background: var(--color-surface) !important;
  border-color: var(--color-surface-4) !important;
}

.ant-input-textarea textarea {
  background: transparent !important;
  color: var(--ds-text) !important;
}

.ant-input-textarea textarea::placeholder {
  color: var(--ds-text-subtle) !important;
}

.ant-input-textarea:hover {
  border-color: var(--color-primary) !important;
}

.ant-input-textarea-focused {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2) !important;
}

.ant-input-textarea-show-count::after {
  color: var(--ds-text-subtle) !important;
}

/* 深色Select全局样式 */
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
  background: var(--color-surface) !important;
  border-color: var(--color-surface-4) !important;
  color: var(--ds-text) !important;
}

.ant-select-arrow,
.ant-select-clear {
  color: var(--ds-text-subtle) !important;
}

.ant-select:hover .ant-select-selector {
  border-color: var(--color-primary) !important;
}

.ant-select-focused .ant-select-selector {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2) !important;
}

.ant-select-selection-placeholder {
  color: var(--ds-text-subtle) !important;
}

.ant-select-selection-item {
  color: var(--ds-text) !important;
}

.ant-select-selection-search-input {
  color: var(--ds-text) !important;
}

/* 深色Switch样式 */
.ant-switch {
  background: var(--ds-border) !important;
}

.ant-switch-checked {
  background: var(--color-primary) !important;
}

.ant-switch:focus,
.ant-switch:focus-visible {
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2) !important;
}

/* 深色Radio样式 */
.ant-radio-wrapper {
  color: var(--ds-text) !important;
}

.ant-radio-inner {
  background: var(--color-surface) !important;
  border-color: var(--color-surface-4) !important;
}

.ant-radio-checked .ant-radio-inner {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.ant-radio:hover .ant-radio-inner {
  border-color: var(--color-primary) !important;
}

/* 深色Slider样式 */
.ant-slider-rail {
  background: var(--color-surface-4) !important;
}

.ant-slider-track {
  background: var(--color-primary) !important;
}

.ant-slider-handle {
  border-color: var(--color-primary) !important;
  background: #fff !important;
}

/* 深色Upload样式 */
.ant-upload.ant-upload-drag {
  background: var(--color-surface) !important;
  border-color: var(--color-surface-4) !important;
}

.ant-upload.ant-upload-drag:hover {
  border-color: var(--color-primary) !important;
}

.ant-upload.ant-upload-drag p.ant-upload-drag-icon .anticon {
  color: var(--color-primary) !important;
}

.ant-upload.ant-upload-drag p.ant-upload-text {
  color: var(--ds-text) !important;
}

.ant-upload.ant-upload-drag p.ant-upload-hint {
  color: var(--ds-text-subtle) !important;
}

.upload-video-card .ant-upload.ant-upload-drag,
.upload-doc-card .ant-upload.ant-upload-drag,
.upload-video-card .ant-upload.ant-upload-drag .ant-upload-btn,
.upload-doc-card .ant-upload.ant-upload-drag .ant-upload-btn {
  background: transparent !important;
  border: none !important;
}

.ant-upload-list-item {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-surface-4) !important;
}

.ant-upload-list-item-name {
  color: var(--ds-text) !important;
}

.ant-upload-list-item:hover {
  background: var(--ds-bg-alt) !important;
}

/* ============= 侧边栏导航菜单对齐样式 ============= */

/* 侧边栏菜单整体样式 */
.ant-layout-sider .ant-menu {
  padding: 0 12px !important;
}

/* 一级菜单项（如首页）样式 */
.ant-layout-sider .ant-menu > .ant-menu-item {
  margin: 4px 0 !important;
  padding-left: 16px !important;
  border-radius: 8px !important;
  height: 44px !important;
  line-height: 44px !important;
}

/* 菜单分组标题样式 */
.ant-layout-sider .ant-menu-item-group-title {
  padding-left: 16px !important;
  padding-right: 16px !important;
  font-size: 12px !important;
  color: var(--ds-text-subtle) !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  margin-top: 16px !important;
  margin-bottom: 4px !important;
}

/* 分组内的子菜单项样式 */
.ant-layout-sider .ant-menu-item-group-list .ant-menu-item {
  margin: 2px 0 !important;
  padding-left: 16px !important;
  border-radius: 8px !important;
  height: 44px !important;
  line-height: 44px !important;
}

/* 菜单项图标样式 */
.ant-layout-sider .ant-menu-item .anticon {
  font-size: 16px !important;
  margin-right: 12px !important;
  width: 20px !important;
  text-align: center !important;
}

/* 选中状态的菜单项 */
.ant-layout-sider .ant-menu-item-selected {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%) !important;
}

.ant-layout-sider .ant-menu-item-selected::after {
  display: none !important;
}

/* 菜单项悬停效果 */
.ant-layout-sider .ant-menu-item:not(.ant-menu-item-selected):hover {
  background: rgba(var(--color-primary-rgb), 0.15) !important;
}

/* 菜单项文字颜色 */
.ant-layout-sider .ant-menu-item {
  color: var(--ds-text) !important;
}

.ant-layout-sider .ant-menu-item a {
  color: inherit !important;
}

/* 分组展开/收起图标对齐 */
.ant-layout-sider .ant-menu-item-group {
  margin-bottom: 8px !important;
}

/* ============= Payment Pages (Gateway / Success) ============= */

.payment-page {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background:
    radial-gradient(900px circle at 50% 15%, rgba(var(--color-primary-rgb), 0.22) 0%, transparent 60%),
    radial-gradient(700px circle at 85% 80%, rgba(var(--color-primary-accent-rgb), 0.18) 0%, transparent 55%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
}

.payment-panel.ant-card {
  width: 100%;
  max-width: 720px;
  background: rgba(20, 20, 20, 0.78) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(12px);
}

.payment-panel > .ant-card-body {
  padding: 34px 32px !important;
}

.payment-section {
  padding: 16px 16px;
  border-radius: 14px;
  border: 1px solid var(--ds-border);
  background: var(--ds-bg-alt);
}

.payment-success-badge,
.payment-warning-badge {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-success-badge {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.07), 0 18px 55px rgba(0, 0, 0, 0.55);
}

.payment-warning-badge {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.07), 0 18px 55px rgba(0, 0, 0, 0.55);
}

.payment-benefit-tag.ant-tag {
  margin-inline-end: 0 !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  background: rgba(var(--color-primary-accent-rgb), 0.14) !important;
  border: 1px solid rgba(var(--color-primary-accent-rgb), 0.35) !important;
  color: var(--ds-text) !important;
}

.payment-primary-btn.ant-btn-primary {
  height: 44px !important;
  padding-inline: 18px !important;
  border-radius: 12px !important;
  border: none !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-accent)) !important;
  box-shadow: 0 10px 30px rgba(var(--color-primary-accent-rgb), 0.22);
}

.payment-primary-btn.ant-btn-primary:hover {
  filter: brightness(1.05);
}

.payment-secondary-btn.ant-btn-default {
  height: 44px !important;
  padding-inline: 18px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  background: var(--ds-bg-alt) !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-text) !important;
}

.payment-secondary-btn.ant-btn-default:hover {
  background: var(--ds-border) !important;
  border-color: rgba(var(--color-primary-accent-rgb), 0.55) !important;
}

.payment-qr-wrap {
  padding: 12px;
  border-radius: 14px;
  background: var(--ds-border);
  border: 1px solid var(--ds-border);
}

@media (max-width: 480px) {
  .payment-page {
    padding: 32px 16px;
  }

  .payment-panel > .ant-card-body {
    padding: 26px 20px !important;
  }

  .payment-success-badge,
  .payment-warning-badge {
    width: 68px;
    height: 68px;
  }
}

/* ===== Video Creation Page — 青蓝色系覆盖 ===== */
.vc-page {
  /* P2: 切到 ds-light token 体系（原硬编码 navy 已迁出） */
  --color-primary: #4da6ff;
  --color-primary-rgb: 77, 166, 255;
  --color-primary-deep: #0078d4;
  --color-primary-deep-rgb: 0, 120, 212;
  --color-primary-accent: #7bd0ff;
  --color-primary-accent-rgb: 123, 208, 255;
  --color-bg: var(--ds-bg);
  --color-surface: var(--ds-surface);
  --color-surface-2: var(--ds-surface-2);
  --color-surface-3: var(--ds-bg-alt);
  --color-surface-4: var(--ds-bg-deep);
  background: var(--ds-bg);
}

/* ===== UI Revamp pages — design.md 蓝色系覆盖 ===== */
.dp-revamp {
  /* azure brand 引用层（保留：antd-overrides + video_*/comic_* 老页面引用） */
  --color-primary: #4da6ff;
  --color-primary-rgb: 77, 166, 255;
  --color-primary-deep: #0078d4;
  --color-primary-deep-rgb: 0, 120, 212;
  --color-primary-accent: #4da6ff;
  --color-primary-accent-rgb: 77, 166, 255;
  --color-primary-tint: #7bd0ff;
  /* P2 Task 8.2: 删除 --color-bg/--color-surface* 5 条暗色赋值；
     残留引用方在白底场景下回退到 ds-bg 白（按 Phase 1.2 dp-revamp-deps.md 决策） */
  --color-bg: var(--ds-bg);
  --color-surface: var(--ds-surface);
  --color-surface-2: var(--ds-surface-2);
  --color-surface-3: var(--ds-bg-alt);
  --color-surface-4: var(--ds-bg-deep);
}

/* .dp-revamp .ant-btn-primary 反制规则已迁移到 src/styles/antd-overrides.css
   并对齐 design.md ink-on-ink 主 CTA 规范（原 azure 渐变与 design.md 不符） */

/* ===== Video Creation Page Styles ===== */

/* 玻璃拟态卡片 */
.vc-glass {
  background: var(--ds-bg-alt);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--color-primary-rgb), 0.1);
  border-top-color: rgba(var(--color-primary-rgb), 0.18);
  border-radius: 12px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.vc-glass:hover {
  background: var(--ds-surface-2);
}

/* 模板卡片 */
.vc-tpl-card {
  cursor: pointer;
  padding: 16px;
  height: 100%;
}
.vc-tpl-card:hover {
  transform: translateY(-4px);
}
.vc-tpl-card--active {
  border-color: transparent !important;
  box-shadow: 0 0 0 2px var(--color-primary), 0 8px 32px rgba(var(--color-primary-rgb), 0.18);
}

/* 16:9 缩略图 */
.vc-tpl-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ds-bg-alt);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.vc-tpl-thumb__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vc-tpl-thumb__play-btn {
  width: 48px;
  height: 48px;
  background: var(--ds-border);
  backdrop-filter: blur(12px);
  border: 1px solid var(--ds-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: all 0.3s;
}
.vc-tpl-card:hover .vc-tpl-thumb__play-btn {
  opacity: 1;
  transform: scale(1.1);
}

/* 标签徽章 */
.vc-tag {
  font-size: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  /* P2 视觉收尾：azure chip → ink-on-light（spec §5 azure 仅作 hover/highlight 稀疏） */
  background: var(--ds-bg-alt);
  color: var(--ds-text-muted);
  border: 1px solid var(--ds-border);
  white-space: nowrap;
  line-height: 18px;
}

/* Hero */
.vc-hero {
  position: relative;
  margin-bottom: 48px;
}
.vc-hero::before {
  content: '';
  position: absolute;
  top: -96px;
  left: -80px;
  width: 384px;
  height: 384px;
  background: rgba(var(--color-primary-rgb), 0.06);
  filter: blur(120px);
  border-radius: 50%;
  pointer-events: none;
}
.vc-hero__title {
  font-size: 40px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
  color: var(--ds-text) !important;
  margin-bottom: 16px !important;
}
.vc-hero__sub {
  font-size: 18px;
  color: var(--ds-text-subtle);
  max-width: 640px;
}

/* 区域标题 */
.vc-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
}
.vc-section-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ds-text) !important;
  margin: 0 0 4px 0 !important;
}
.vc-section-sub {
  font-size: 12px;
  color: var(--ds-text-subtle);
}

/* 竖向步骤时间线 */
.vc-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.vc-timeline-step {
  display: grid;
  grid-template-columns: 80px 1fr;
}
.vc-timeline-step__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.vc-timeline-step__num {
  font-size: 28px;
  font-weight: 800;
  color: var(--ds-border);
  line-height: 1;
  transition: color 0.3s;
  position: relative;
  z-index: 1;
}
.vc-timeline-step--active .vc-timeline-step__num,
.vc-timeline-step--done .vc-timeline-step__num {
  /* P2 视觉收尾：active step 数字 azure → ink（spec §5 azure 稀疏） */
  color: var(--ds-text);
}
.vc-timeline-step__line {
  flex: 1 1 0;
  width: 2px;
  background: var(--ds-border);
  margin: 12px 0 0;
  min-height: 24px;
}
.vc-timeline-step--done .vc-timeline-step__line,
.vc-timeline-step--active .vc-timeline-step__line {
  background: var(--color-primary);
  opacity: 0.3;
}
.vc-timeline-step:last-child .vc-timeline-step__line {
  min-height: 48px;
}
.vc-timeline-step__content {
  padding-bottom: 32px;
}
/* 让 Ant Spin 包裹器不撑高 */
.vc-timeline-step__content .ant-spin-nested-loading,
.vc-timeline-step__content .ant-spin-container {
  display: block !important;
}
.vc-timeline-step__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ds-border);
  margin-bottom: 4px;
  transition: color 0.3s;
}
.vc-timeline-step--active .vc-timeline-step__title,
.vc-timeline-step--done .vc-timeline-step__title {
  color: var(--ds-text);
}
.vc-timeline-step__desc {
  font-size: 14px;
  color: var(--ds-text-subtle);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Bento 编辑器面板 */
.vc-editor-outer {
  background: var(--color-surface-2, var(--ds-surface-2));
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  padding: 4px;
}
.vc-editor-inner {
  background: rgba(7, 13, 31, 0.9);
  border: 1px solid rgba(var(--color-primary-rgb), 0.06);
  border-radius: 14px;
  padding: 24px;
  height: 100%;
}
.vc-editor-inner .ant-input {
  background: rgba(var(--color-primary-rgb), 0.03) !important;
  border: none !important;
  border-radius: 12px !important;
  color: var(--ds-text) !important;
  padding: 16px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  resize: none;
}
.vc-editor-inner .ant-input:focus {
  box-shadow: 0 0 0 1px rgba(var(--color-primary-rgb), 0.3) !important;
}
.vc-editor-inner .ant-input::placeholder {
  color: var(--ds-border) !important;
}

/* 产品面板 */
.vc-product-panel {
  background: var(--color-surface-2, var(--ds-surface-2));
  border-radius: 16px;
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 底部操作栏 */
.vc-action-bar {
  background: var(--ds-surface-2);
  backdrop-filter: blur(24px);
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  box-shadow: 0 -8px 48px rgba(0, 0, 0, 0.4);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vc-action-bar__meta {
  display: flex;
  align-items: center;
  gap: 24px;
}
.vc-action-bar__meta-item {
  display: flex;
  flex-direction: column;
}
.vc-action-bar__meta-label {
  font-size: 10px;
  color: var(--ds-text-subtle);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2px;
  letter-spacing: 0.05em;
}
.vc-action-bar__meta-value {
  font-size: 14px;
  color: var(--ds-text);
  font-weight: 700;
}
.vc-action-bar__divider {
  width: 1px;
  height: 32px;
  background: var(--ds-border);
}

/* CTA 按钮 */
.vc-cta-btn.ant-btn {
  height: 48px !important;
  padding: 0 40px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.vc-cta-btn--ready.ant-btn {
  /* P2 视觉收尾：spec §5 主 CTA = ink-on-ink */
  background: var(--ds-text) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  color: var(--ds-bg) !important;
}
.vc-cta-btn--disabled.ant-btn {
  background: var(--ds-border) !important;
  color: var(--ds-text-subtle) !important;
}

/* 分镜场景行 */
.storyboard-scene {
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  padding: 16px;
  background: rgba(12, 12, 24, 0.72);
  transition: border-color 0.3s;
}
.storyboard-scene:hover {
  border-color: rgba(var(--color-primary-rgb), 0.2);
}

/* 分镜缩略图 */
.storyboard-thumb {
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s;
}
.storyboard-scene:hover .storyboard-thumb {
  transform: scale(1.05);
}

/* 分镜间插入按钮 — hover 显示 */
.sb-insert-zone:hover .sb-insert-btn {
  opacity: 1 !important;
}
.sb-insert-btn:hover {
  background: var(--color-primary) !important;
  color: var(--ds-text) !important;
  border-color: var(--color-primary) !important;
}

/* 提示条 */
.vc-hint-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(var(--color-primary-rgb), 0.05);
  border: 1px solid rgba(var(--color-primary-rgb), 0.1);
  border-radius: 12px;
  margin-top: 20px;
  font-size: 12px;
  color: var(--ds-text-subtle);
}

/* P2 视觉收尾：vc-page 内 antd primary button → ink-on-ink（spec §5 azure 稀疏） */
.vc-page .ant-btn-primary {
  background: var(--ds-text) !important;
  border-color: var(--ds-text) !important;
  color: var(--ds-bg) !important;
}
.vc-page .ant-btn-primary:hover {
  background: var(--ds-text-muted) !important;
  border-color: var(--ds-text-muted) !important;
  color: var(--ds-bg) !important;
}

/* 环境光晕 — 固定装饰 */
.vc-ambient {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.vc-ambient--tr {
  top: 25%;
  right: -96px;
  width: 400px;
  height: 400px;
  background: rgba(var(--color-primary-rgb), 0.04);
  filter: blur(150px);
}
.vc-ambient--bl {
  bottom: 25%;
  left: -96px;
  width: 300px;
  height: 300px;
  background: rgba(var(--color-primary-deep-rgb), 0.04);
  filter: blur(120px);
}

/* 文档详情页 - 覆盖全局深色 Input/TextArea 背景 */
.doc-detail-page .ant-input,
.doc-detail-page .ant-input-affix-wrapper {
  background: var(--ds-bg-alt) !important;
  border-color: var(--ds-border) !important;
}
.doc-detail-page .ant-input-textarea {
  background: var(--ds-bg-alt) !important;
  border-color: var(--ds-border) !important;
}
.doc-detail-page .ant-input-textarea textarea {
  background: transparent !important;
}

/* 文档详情页 - Markdown 预览样式 */
.doc-markdown-preview h1,
.doc-markdown-preview h2,
.doc-markdown-preview h3,
.doc-markdown-preview h4,
.doc-markdown-preview h5,
.doc-markdown-preview h6 {
  color: var(--ds-text);
  margin-top: 1.4em;
  margin-bottom: 0.6em;
  font-weight: 700;
  line-height: 1.4;
}
.doc-markdown-preview h1 { font-size: 28px; }
.doc-markdown-preview h2 { font-size: 22px; }
.doc-markdown-preview h3 { font-size: 18px; }
.doc-markdown-preview h4 { font-size: 16px; }
.doc-markdown-preview p {
  margin-bottom: 0.8em;
  color: var(--ds-text);
}
.doc-markdown-preview ul,
.doc-markdown-preview ol {
  padding-left: 1.5em;
  margin-bottom: 0.8em;
}
.doc-markdown-preview li {
  margin-bottom: 0.3em;
  color: var(--ds-text);
}
.doc-markdown-preview strong {
  color: var(--ds-text);
  font-weight: 700;
}
.doc-markdown-preview blockquote {
  border-left: 3px solid rgba(77, 166, 255, 0.4);
  padding-left: 12px;
  margin: 0.8em 0;
  color: var(--ds-text-muted);
}
.doc-markdown-preview code {
  background: var(--ds-border);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}
.doc-markdown-preview pre {
  background: var(--ds-bg-alt);
  padding: 12px 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 0.8em;
}
.doc-markdown-preview pre code {
  background: none;
  padding: 0;
}
.doc-markdown-preview table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.8em;
}
.doc-markdown-preview th,
.doc-markdown-preview td {
  border: 1px solid var(--ds-border);
  padding: 8px 12px;
  text-align: left;
}
.doc-markdown-preview th {
  background: var(--ds-bg-alt);
  font-weight: 700;
}
.doc-markdown-preview hr {
  border: none;
  border-top: 1px solid var(--ds-border);
  margin: 1.2em 0;
}

/* MDEditor 编辑模式 — 隐藏工具栏，只保留渲染预览区域 */
.doc-md-editor-clean .w-md-editor {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.doc-md-editor-clean .w-md-editor-toolbar {
  display: none !important;
}
.doc-md-editor-clean .w-md-editor-preview {
  padding: 24px 28px !important;
  background: transparent !important;
}
.doc-md-editor-clean .wmde-markdown {
  background: transparent !important;
  color: var(--ds-text) !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}
.doc-md-editor-clean .wmde-markdown h1,
.doc-md-editor-clean .wmde-markdown h2,
.doc-md-editor-clean .wmde-markdown h3,
.doc-md-editor-clean .wmde-markdown h4 {
  color: var(--ds-text) !important;
  border-bottom: none !important;
}
.doc-md-editor-clean .wmde-markdown strong {
  color: var(--ds-text) !important;
}
.doc-md-editor-clean .wmde-markdown li {
  color: var(--ds-text) !important;
}
.doc-md-editor-clean .wmde-markdown blockquote {
  border-left-color: rgba(77, 166, 255, 0.4) !important;
  color: var(--ds-text-muted) !important;
}
.doc-md-editor-clean .wmde-markdown code {
  background: var(--ds-border) !important;
}
.doc-md-editor-clean .wmde-markdown pre {
  background: var(--ds-bg-alt) !important;
}

/* Light scrollbar — v1 白底配套 */
.light-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.light-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.light-scrollbar::-webkit-scrollbar-thumb {
  background: var(--ds-border-strong);
  border-radius: 3px;
}
.light-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--ds-text-subtle);
}
/* Global design tokens — v1 system (2026-05-06)
   Source of truth: docs/design/design.md
   Scope: :root global, 所有 console + 静态页共用
   命名约定：--ds-* 前缀（design system），与 --m-*（marketing legacy）/ --ant-* 解耦 */

:root {
  /* ===== Surfaces ===== */
  --ds-bg: #ffffff;
  --ds-bg-alt: #f5f5f4;
  --ds-bg-deep: #e7e5e4;
  --ds-surface: #ffffff;

  /* ===== Text ===== */
  --ds-text: #18181b;
  --ds-text-muted: #6b7280;
  --ds-text-subtle: #a1a1aa;
  --ds-text-on-accent: #ffffff;
  --ds-text-on-ink: #ffffff;

  /* ===== Brand accent (single Microsoft Azure blue) ===== */
  --ds-accent: #4da6ff;
  --ds-accent-deep: #0078d4;
  --ds-accent-bg: #f2f9ff;
  --ds-accent-text: #097fe8;

  /* ===== Borders ===== */
  --ds-border: rgba(24, 24, 27, 0.08);
  --ds-border-strong: rgba(24, 24, 27, 0.16);

  /* ===== Status (matches design.md ops/admin palette) ===== */
  --ds-success: #22c55e;
  --ds-warning: #f59e0b;
  --ds-danger: #ef4444;

  /* ===== Radii (5 档 only: 8/10/14/18/pill) ===== */
  --ds-radius-sm: 8px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 14px;
  --ds-radius-xl: 18px;
  --ds-radius-pill: 999px;

  /* ===== Spacing (与 marketing-tokens.css 同步) ===== */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 64px;
  --ds-space-9: 96px;

  /* ===== Layout / fluid rhythm ===== */
  --ds-pad-x: clamp(28px, 4vw, 64px);
  --ds-section-y: clamp(72px, 9vw, 128px);
  --ds-header-height: 64px;        /* console header（首页 marketing 是 80px，这里是 console 紧凑） */
  --ds-sidebar-width: 256px;

  /* ===== Type ===== */
  --ds-font: "Geist", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ===== Shadows (only on CTA hover / modal — flat at-rest) ===== */
  --ds-shadow-cta-primary: 0 14px 28px -12px rgba(24, 24, 27, 0.55);
  --ds-shadow-cta-nav: 0 8px 22px -8px rgba(24, 24, 27, 0.45);
  --ds-shadow-deep: 0 24px 48px -24px rgba(24, 24, 27, 0.20);

  /* ===== Focus ring (a11y) ===== */
  --ds-focus-ring: 0 0 0 3px rgba(77, 166, 255, 0.18);
}
/* Marketing surface tokens — v1 redesign (2026-05-04)
   Source of truth: docs/design/design.md
   Scope: pages/components rendered with className="marketing-scope" only.
   Product-internal pages keep using design.md sections 1-8 (deep navy). */

.marketing-scope {
  /* ===== Surfaces (v1) ===== */
  --m-bg: #ffffff;
  --m-bg-alt: #f5f5f4;
  --m-bg-deep: #e7e5e4;
  --m-surface: #ffffff;

  /* ===== Text (v1) ===== */
  --m-text: #18181b;
  --m-text-muted: #6b7280;
  --m-text-subtle: #a1a1aa;
  --m-text-faint: #a39e98;            /* legacy compat */
  --m-text-on-accent: #ffffff;
  --m-text-on-ink: #ffffff;
  --m-text-on-dark: rgba(255, 255, 255, 0.7); /* legacy compat */

  /* ===== Brand accent (single Microsoft Azure blue) ===== */
  --m-accent: #4da6ff;
  --m-accent-deep: #0078d4;
  --m-accent-bg: #f2f9ff;
  --m-accent-text: #097fe8;
  --m-pricing-highlight-bg: var(--m-text);   /* v1: highlighted plan = full ink */

  /* ===== Borders / rules (v1) ===== */
  --m-border: rgba(24, 24, 27, 0.08);
  --m-border-strong: rgba(24, 24, 27, 0.16);
  --m-header-bg: rgba(255, 255, 255, 0.92);
  --m-hero-fade: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0) 60%, var(--m-bg) 100%);

  /* ===== Shadows (used only on CTA hover, not at-rest) ===== */
  --m-shadow-cta-primary: 0 14px 28px -12px rgba(24, 24, 27, 0.55);
  --m-shadow-cta-nav: 0 8px 22px -8px rgba(24, 24, 27, 0.45);
  --m-shadow-card: 0 0 0 transparent;                          /* legacy compat (v1 flat) */
  --m-shadow-deep: 0 24px 48px -24px rgba(24, 24, 27, 0.20);   /* legacy compat */

  /* ===== Radii (v1) ===== */
  --m-radius-sm: 8px;
  --m-radius-md: 10px;
  --m-radius-lg: 14px;
  --m-radius-xl: 18px;
  --m-radius-pill: 999px;

  /* ===== Spacing 8px scale (legacy compat) ===== */
  --m-space-1: 4px;
  --m-space-2: 8px;
  --m-space-3: 12px;
  --m-space-4: 16px;
  --m-space-5: 24px;
  --m-space-6: 32px;
  --m-space-7: 48px;
  --m-space-8: 64px;
  --m-space-9: 96px;

  /* ===== Layout & section rhythm (v1 fluid) ===== */
  --m-pad-x: clamp(28px, 4vw, 64px);
  --m-section-y: clamp(72px, 9vw, 128px);
  --m-stats-y: clamp(48px, 5vw, 64px);
  --m-hero-y-top: clamp(56px, 8vw, 96px);
  --m-hero-y-bottom: clamp(72px, 9vw, 120px);
  --m-footer-y: clamp(56px, 6vw, 80px);
  --m-header-height: 80px;                  /* v1: 64 → 80 (anchored scroll-margin-top auto-adapts) */

  /* ===== Letter-spacing scale ===== */
  --m-letter-display: -3px;             /* legacy compat (LandingPage stat-tile big number) */
  --m-letter-tightest: -1.5px;          /* legacy compat (LandingPage hero h1) */
  --m-letter-tighter: -0.04em;          /* v1 */
  --m-letter-tight: -0.025em;           /* v1 */
  --m-letter-snug: -0.015em;            /* v1 */
  --m-letter-normal: 0;                 /* v1 */
  --m-letter-uppercase: 0.18em;         /* v1 (eyebrow / kicker) */
  --m-letter-badge: 0.22em;             /* v1 (footer-col-title) */

  /* ===== Type (v1: Geist + Noto Sans SC) ===== */
  --m-font: "Geist", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --m-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --m-font-feature: "lnum", "locl";

  /* ===== Marketing mock colors (legacy compat — kept until Task 13-18 重写 LandingPage 引用方) ===== */
  --m-platform-douyin: #000000;
  --m-platform-xiaohongshu: #ff5252;
  --m-platform-wechat-video: #07c160;
  --m-platform-tiktok: #ff0050;
  --m-platform-youtube: #ff0000;
  --m-platform-instagram: linear-gradient(135deg, #feda77, #f58529 50%, #dd2a7b 75%, #8134af);
  --m-platform-facebook: #1877f2;
  --m-avatar-warm: #18181b;
  --m-avatar-blue: #18181b;
  --m-editor-bg: #fafaf9;
  --m-editor-dot-red: #f08e8e;
  --m-editor-dot-yellow: #e8c065;
  --m-editor-dot-green: #7ec48c;
  --m-editor-preview-bg: linear-gradient(135deg, #1a3656 0%, #0c1324 100%);
  --m-editor-clip-primary: #4da6ff;
  --m-editor-clip-deep: #2563eb;
  --m-editor-clip-mid: #6093d2;
  --m-editor-clip-audio-1: #c8d8ec;
  --m-editor-clip-audio-2: #aac0dd;
  --m-editor-clip-audio-3: #d6e3f3;
  --m-chart-secondary: #a3c8ee;
}

.marketing-scope section[id] {
  scroll-margin-top: var(--m-header-height);
}
/* Marketing component class styles — v1 redesign (2026-05-04)
   Source of truth: docs/design/homepage-hero-v1.html
   All classes are .m-* prefixed and scoped under .marketing-scope to avoid
   polluting product/console surfaces (spec §1.2 red line). Tokens come from
   marketing-tokens.css (also scoped to .marketing-scope). */

/* ===== reset (scoped) ===== */
.marketing-scope,
.marketing-scope * {
  box-sizing: border-box;
}
.marketing-scope * {
  margin: 0;
  padding: 0;
}

/* The marketing scope itself defines body-equivalent typography, replacing the
   v1 HTML `body { font-family ... }` rule (which we cannot apply globally). */
.marketing-scope {
  font-family: var(--m-font);
  color: var(--m-text);
  background: var(--m-bg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* ─── nav ─────────────────────────────────────── */
.m-nav {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 24px var(--m-pad-x);
  border-bottom: 1px solid var(--m-border);
}

.m-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--m-text);
  justify-self: start;
  text-decoration: none;
}
.m-brand-mark {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--m-text);
}
.m-brand-rule {
  width: 1px;
  height: 16px;
  background: var(--m-border-strong);
  display: inline-block;
}
.m-brand-cn {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--m-text-muted);
  letter-spacing: 0.04em;
}

.m-nav-links {
  display: flex;
  gap: 40px;
  font-size: 14px;
  letter-spacing: 0.005em;
  justify-self: center;
}
.m-nav-links a {
  color: var(--m-text);
  text-decoration: none;
  position: relative;
  padding: 6px 2px;
  transition: color 0.2s;
}
.m-nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--m-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.m-nav-links a:hover { color: var(--m-text); opacity: 0.78; }
.m-nav-links a:hover::after { transform: scaleX(1); }

.m-nav-cta {
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: var(--m-text);
  color: var(--m-bg);
  padding: 12px 22px;
  border: none;
  border-radius: var(--m-radius-pill);
  cursor: pointer;
  justify-self: end;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}
.m-nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -8px rgba(24, 24, 27, 0.45);
}

/* ─── hero ─────────────────────────────────────── */
.m-hero {
  position: relative;
  padding: clamp(56px, 8vw, 96px) var(--m-pad-x) clamp(72px, 9vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  min-height: calc(100vh - 80px);
}

/* shared atmospheric backdrop — bridges left text and right globe */
.m-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 78% 50%, rgba(24, 24, 27, 0.045), rgba(24, 24, 27, 0) 70%),
    radial-gradient(ellipse 80% 100% at 100% 50%, rgba(24, 24, 27, 0.025), rgba(24, 24, 27, 0) 60%);
  z-index: 0;
}
.m-hero > * { position: relative; z-index: 1; }

/* ─── hero left ─────────────────────────────────── */
.m-hero-left { position: relative; max-width: 720px; }

.m-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--m-text);
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--m-border-strong);
  border-radius: 999px;
  margin-bottom: 40px;
  background: var(--m-bg-alt);
  letter-spacing: 0.005em;
  animation: m-fadeUp 0.7s cubic-bezier(.2,.7,.2,1) both;
}
.m-kicker .m-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--m-text);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.10);
  display: inline-block;
}
.m-kicker em {
  font-family: 'Geist', sans-serif;
  font-style: normal;
  color: var(--m-text-muted);
  margin-right: 2px;
  font-size: 13.5px;
  line-height: 1;
}

.m-headline {
  font-family: 'Noto Sans SC', 'Geist', sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--m-text);
  margin-bottom: 36px;
  animation: m-fadeUp 0.85s cubic-bezier(.2,.7,.2,1) 0.08s both;
}
.m-headline .m-line { display: block; }
.m-headline .m-end-dot {
  display: inline-block;
  width: 0.14em;
  height: 0.14em;
  border-radius: 50%;
  background: var(--m-text);
  vertical-align: 0.06em;
  margin-left: 0.04em;
}

.m-subhead {
  font-family: 'Geist', 'Noto Sans SC', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--m-text-muted);
  max-width: 480px;
  margin-bottom: 48px;
  animation: m-fadeUp 0.85s cubic-bezier(.2,.7,.2,1) 0.16s both;
}

.m-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  animation: m-fadeUp 0.85s cubic-bezier(.2,.7,.2,1) 0.24s both;
}

.m-btn {
  font-family: 'Geist', 'Noto Sans SC', sans-serif;
  font-size: 17px;
  font-weight: 500;
  padding: 21px 38px;
  border: 1px solid transparent;
  border-radius: var(--m-radius-lg);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.005em;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease;
  position: relative;
}
.m-btn-primary {
  background: var(--m-text);
  color: var(--m-bg);
}
.m-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -12px rgba(24, 24, 27, 0.55);
}

.m-btn-ghost {
  background: transparent;
  color: var(--m-text);
  border-color: var(--m-border-strong);
}
.m-btn-ghost:hover {
  border-color: var(--m-text);
  background: rgba(24, 24, 27, 0.035);
}
.m-btn .m-arrow {
  transition: transform 0.25s ease;
  font-family: 'Geist', sans-serif;
  font-size: 19px;
  font-weight: 400;
}
.m-btn:hover .m-arrow {
  transform: translateX(5px);
}

/* ─── hero right (language globe) ───────────────── */
.m-hero-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  animation: m-fadeIn 1.2s ease 0.3s both;
}

.m-earth {
  position: relative;
  width: min(560px, 96%);
  aspect-ratio: 1;
  /* nudge left so the globe crosses the gutter and shares space with the text column */
  transform: translateX(clamp(-56px, -3.5vw, -28px));
}

.m-earth svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 24px 56px rgba(24, 24, 27, 0.05));
}

.m-earth .m-sphere {
  fill: url(#earthSphereFill);
}
.m-earth .m-sphere-stroke {
  fill: none;
  stroke: rgba(24, 24, 27, 0.06);
  stroke-width: 1;
}
.m-earth .m-graticule {
  fill: none;
  stroke: rgba(24, 24, 27, 0.06);
  stroke-width: 0.6;
}
.m-earth .m-country {
  fill: var(--m-text);
  fill-opacity: 0.85;
  stroke: var(--m-bg);
  stroke-width: 0.35;
  vector-effect: non-scaling-stroke;
}
.m-earth .m-city {
  fill: var(--m-text);
}
.m-earth .m-city-glow {
  fill: var(--m-text);
  fill-opacity: 0.14;
}
.m-earth .m-city-pulse {
  fill: none;
  stroke: var(--m-text);
  stroke-opacity: 0.5;
  animation: m-cityPulse 2.6s ease-out infinite;
}
@keyframes m-cityPulse {
  0%   { r: 2; stroke-opacity: 0.55; }
  100% { r: 14; stroke-opacity: 0; }
}

/* origin marker (China) — emphasized vs destinations */
.m-earth .m-origin-core {
  fill: var(--m-text);
}
.m-earth .m-origin-ring {
  fill: none;
  stroke: var(--m-text);
  stroke-width: 1.2;
}
.m-earth .m-origin-pulse {
  fill: none;
  stroke: var(--m-text);
  stroke-width: 1.4;
  animation: m-originPulse 2.4s ease-out infinite;
}
@keyframes m-originPulse {
  0%   { r: 5;  stroke-opacity: 0.7; }
  100% { r: 26; stroke-opacity: 0;   }
}

/* radiating arcs from origin to destinations */
.m-earth .m-arc {
  fill: none;
  stroke: var(--m-text);
  stroke-opacity: 0.55;
  stroke-width: 1.1;
  stroke-linecap: round;
}
.m-earth .m-arc-head {
  fill: var(--m-text);
}

.m-markets-badge {
  position: absolute;
  top: 4%;
  right: 0;
  text-align: left;
  animation: m-fadeUp 0.9s cubic-bezier(.2,.7,.2,1) 0.5s both;
}
.m-markets-badge .m-num {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--m-text);
  letter-spacing: -0.04em;
}
.m-markets-badge .m-num sup {
  font-size: 0.4em;
  vertical-align: super;
  margin-left: 1px;
  font-weight: 500;
  color: var(--m-text-muted);
}
.m-markets-badge .m-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--m-text-subtle);
  margin-top: 6px;
}

/* ─── section primitives (shared by all blocks below hero) ─── */
.m-section {
  position: relative;
  padding: clamp(72px, 9vw, 128px) var(--m-pad-x);
  border-top: 1px solid var(--m-border);
}
.m-section-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.m-section-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--m-text-muted);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.m-section-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--m-text-muted);
}
.m-section-h2 {
  font-family: 'Noto Sans SC', 'Geist', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--m-text);
  margin: 0;
}
.m-section-sub {
  font-family: 'Geist', 'Noto Sans SC', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--m-text-muted);
  margin-top: 16px;
  max-width: 640px;
}

/* ─── stats strip ────────────────────────────────── */
.m-stats {
  padding: clamp(48px, 5vw, 64px) var(--m-pad-x);
  border-top: 1px solid var(--m-border);
  border-bottom: 1px solid var(--m-border);
}
.m-stats-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.m-stat-cell {
  padding: 8px 28px;
  border-left: 1px solid var(--m-border);
}
.m-stat-cell:first-child { border-left: none; padding-left: 0; }
.m-stat-num {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--m-text);
  display: block;
}
.m-stat-label {
  font-family: 'Noto Sans SC', 'Geist', sans-serif;
  font-size: 14px;
  color: var(--m-text-muted);
  margin-top: 12px;
  display: block;
  letter-spacing: 0.005em;
}

/* ─── bento grid ─────────────────────────────────── */
.m-bento {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.m-tile {
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: 18px;
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 320px;
  transition: border-color 0.25s ease, transform 0.25s ease;
  position: relative;
  overflow: hidden;
}
.m-tile:hover {
  border-color: var(--m-border-strong);
  transform: translateY(-2px);
}
.m-tile.wide { grid-column: span 8; }
.m-tile.narrow { grid-column: span 4; }
.m-tile.split-vis {
  flex-direction: row;
  align-items: stretch;
  gap: 28px;
}
.m-tile.split-vis > .m-tile-copy { flex: 1.05; display: flex; flex-direction: column; gap: 14px; }
.m-tile.split-vis > .m-tile-vis  { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.m-tile-kicker {
  font-family: 'Noto Sans SC', 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--m-accent);
}
.m-num-accent { color: var(--m-accent); }
.m-tile-h3 {
  font-family: 'Noto Sans SC', 'Geist', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--m-text);
  margin: 0;
}
.m-tile-body {
  font-family: 'Geist', 'Noto Sans SC', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--m-text-muted);
  margin: 0;
}

/* tile: warm quote variant */
.m-tile-quote .m-quote-mark {
  font-family: 'Noto Serif SC', Georgia, serif;
  font-size: 64px;
  line-height: 0.8;
  font-weight: 700;
  color: var(--m-text);
  margin-bottom: -10px;
}
.m-tile-quote blockquote {
  font-family: 'Noto Sans SC', 'Geist', sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--m-text);
  margin: 0;
}
.m-tile-quote cite {
  display: flex;
  align-items: center;
  gap: 10px;
  font-style: normal;
  font-size: 12.5px;
  color: var(--m-text-muted);
  margin-top: auto;
}
.m-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--m-text);
  color: var(--m-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 600;
  font-size: 12px;
}
.m-cite-name { color: var(--m-text); font-weight: 600; }

/* platform chip grid (matrix tile) */
.m-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 4px 0 6px;
}
.m-chip {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Sans SC', 'Geist', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--m-bg);
  background: var(--m-text);
  letter-spacing: 0.02em;
}
.m-chip.dashed { background: transparent; color: var(--m-text-muted); border: 1px dashed var(--m-border-strong); }
.m-chip.active {
  box-shadow: 0 0 0 2px var(--m-accent), 0 0 0 5px var(--m-accent-bg);
  position: relative;
}

/* mock editor visual (AI video tile) */
.m-mock-editor {
  width: 100%;
  background: var(--m-bg-alt);
  border: 1px solid var(--m-border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--m-text-muted);
}
.m-mock-editor .m-me-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: 8px;
}
.m-mock-editor .m-me-row .m-lang { width: 28px; font-weight: 600; color: var(--m-text); }
.m-mock-editor .m-me-row .m-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--m-text) var(--p, 60%), var(--m-border) var(--p, 60%));
}
.m-mock-editor .m-me-row.active .m-lang { color: var(--m-accent); }
.m-mock-editor .m-me-row.active .m-bar {
  background: linear-gradient(to right, var(--m-accent) var(--p, 60%), var(--m-accent-bg) var(--p, 60%));
}
.m-mock-editor .m-me-row .m-pct { color: var(--m-text); font-weight: 500; min-width: 32px; text-align: right; }

/* mock chart (retail tile) */
.m-mock-chart-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--m-bg-alt);
  border: 1px solid var(--m-border);
  border-radius: 12px;
}
.m-mock-chart {
  width: 100%;
  flex: 1;
  min-height: 160px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  position: relative;
}
.m-mock-chart .m-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
  position: relative;
}
.m-mock-chart .m-col .m-b1 { background: var(--m-border-strong); border-radius: 3px; }
.m-mock-chart .m-col .m-b2 { background: var(--m-text);          border-radius: 3px; }
.m-mock-chart .m-col.featured { gap: 0; }
.m-mock-chart .m-col.featured .m-b1,
.m-mock-chart .m-col.featured .m-b2 { background: var(--m-accent); }
.m-mock-chart .m-col.featured .m-b1 { border-radius: 3px 3px 0 0; }
.m-mock-chart .m-col.featured .m-b2 { border-radius: 0 0 3px 3px; }
.m-mock-chart-tip {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translate(-50%, -100%);
  padding: 4px 10px;
  background: var(--m-accent);
  color: #FFFFFF;
  border-radius: 6px;
  font-family: 'Noto Sans SC', 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.m-mock-chart-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--m-accent);
}
.m-mock-chart-icons {
  display: flex;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--m-border);
}
.m-mock-chart-icons .m-ic {
  flex: 1;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--m-text-muted);
}
.m-mock-chart-icons .m-ic svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.m-mock-chart-icons .m-ic.active { color: var(--m-accent); }

/* ─── logo wall ──────────────────────────────────── */
.m-logos-inner {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}
.m-logos-heading {
  font-family: 'Noto Sans SC', 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--m-text-muted);
  letter-spacing: 0.02em;
  margin: 0 0 32px;
}
.m-logos-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px 56px;
  align-items: center;
}
.m-logos-row li {
  list-style: none;
  font-family: 'Geist', 'Noto Sans SC', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--m-text);
  letter-spacing: 0.01em;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.m-logos-row li:hover { opacity: 1; }
.m-logos-row li.muted { opacity: 0.45; font-weight: 500; font-size: 14px; font-family: 'Noto Sans SC', sans-serif; }

/* ─── testimonial ────────────────────────────────── */
.m-testimonial-inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.m-testimonial-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--m-text-muted);
  margin: 0 0 22px;
}
.m-testimonial-quote {
  font-family: 'Noto Sans SC', 'Geist', sans-serif;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--m-text);
  margin: 0 0 28px;
}
.m-testimonial-cite {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-style: normal;
  color: var(--m-text-muted);
  font-size: 14px;
}

/* ─── pricing ────────────────────────────────────── */
.m-pricing-head {
  text-align: center;
  margin-bottom: 56px;
}
.m-pricing-h2 {
  font-family: 'Noto Sans SC', 'Geist', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--m-text);
  margin: 0 0 12px;
}
.m-pricing-sub {
  font-family: 'Geist', 'Noto Sans SC', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--m-text-muted);
  margin: 0 auto;
  max-width: 640px;
}
.m-pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.m-plan {
  border: 1px solid var(--m-border);
  border-radius: 18px;
  padding: 36px 32px 32px;
  background: var(--m-bg);
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: border-color 0.2s ease, transform 0.25s ease;
}
.m-plan:hover { border-color: var(--m-border-strong); transform: translateY(-2px); }
.m-plan.featured {
  background: var(--m-text);
  color: var(--m-bg);
  border-color: var(--m-text);
}
.m-plan.featured .m-plan-name,
.m-plan.featured .m-plan-price,
.m-plan.featured .m-plan-feature { color: var(--m-bg); }
.m-plan.featured .m-plan-period,
.m-plan.featured .m-plan-tag,
.m-plan.featured .m-plan-divider { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.18); }
.m-plan-name {
  font-family: 'Noto Sans SC', 'Geist', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--m-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.m-plan-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--m-bg-alt);
  color: var(--m-text-muted);
}
.m-plan.featured .m-plan-tag { background: rgba(255,255,255,0.12); color: var(--m-bg); }
.m-plan-price {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--m-text);
}
.m-plan-period {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--m-text-muted);
  font-weight: 400;
  margin-left: 4px;
  letter-spacing: 0;
}
.m-plan-divider {
  height: 1px;
  background: var(--m-border);
  width: 100%;
}
.m-plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.m-plan-feature {
  font-family: 'Noto Sans SC', 'Geist', sans-serif;
  font-size: 14px;
  color: var(--m-text);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.m-plan-feature::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--m-text);
  border-radius: 50%;
  margin-top: 8px;
  flex: none;
}
.m-plan.featured .m-plan-feature::before { background: var(--m-bg); }
.m-plan-cta {
  margin-top: auto;
  padding: 14px 22px;
  border-radius: 12px;
  font-family: 'Geist', 'Noto Sans SC', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--m-text);
  background: var(--m-bg);
  color: var(--m-text);
  transition: background 0.2s, color 0.2s;
}
.m-plan-cta:hover { background: var(--m-text); color: var(--m-bg); }
.m-plan.featured .m-plan-cta {
  background: var(--m-bg);
  color: var(--m-text);
  border-color: var(--m-bg);
}
.m-plan.featured .m-plan-cta:hover { background: rgba(255,255,255,0.85); }
.m-pricing-foot {
  text-align: center;
  margin-top: 36px;
}
.m-pricing-foot a {
  font-family: 'Geist', 'Noto Sans SC', sans-serif;
  color: var(--m-text);
  font-size: 14.5px;
  text-decoration: none;
  border-bottom: 1px solid var(--m-border-strong);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.m-pricing-foot a:hover { border-color: var(--m-text); }

/* pricing — skeleton + error states */
.m-plan-skeleton {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 28px;
}
.m-pricing-error-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--m-accent-bg);
  color: var(--m-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}
.m-pricing-error-msg {
  color: var(--m-text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: var(--m-letter-normal);
}

/* ─── footer ─────────────────────────────────────── */
.m-footer {
  border-top: 1px solid var(--m-border);
  padding: clamp(56px, 6vw, 80px) var(--m-pad-x) 32px;
}
.m-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 56px 40px;
}
.m-footer-brand-cell .m-footer-brand {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--m-text);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.m-footer-brand-cell .m-footer-brand .m-rule {
  width: 1px;
  height: 16px;
  background: var(--m-border-strong);
}
.m-footer-brand-cell .m-footer-brand .m-cn {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--m-text-muted);
  letter-spacing: 0.04em;
}
.m-footer-tagline {
  font-family: 'Noto Sans SC', 'Geist', sans-serif;
  font-size: 14px;
  color: var(--m-text-muted);
  margin-top: 14px;
  line-height: 1.6;
  max-width: 280px;
}
.m-footer-col-title {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--m-text-subtle);
  margin: 0 0 18px;
}
.m-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.m-footer-list a {
  font-family: 'Noto Sans SC', 'Geist', sans-serif;
  font-size: 14px;
  color: var(--m-text);
  text-decoration: none;
  transition: opacity 0.2s;
}
.m-footer-list a:hover { opacity: 0.65; }
.m-footer-bottom {
  max-width: 1240px;
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--m-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--m-text-subtle);
  text-transform: uppercase;
}

/* ─── reveal animations ─────────────────────────── */
@keyframes m-fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes m-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── responsive ────────────────────────────────── */
@media (max-width: 980px) {
  .m-nav { grid-template-columns: 1fr auto; }
  .m-nav-links { display: none; }
  .m-hero {
    grid-template-columns: 1fr;
    gap: 56px;
    padding-top: 48px;
    min-height: auto;
  }
  .m-hero::after { display: none; }
  .m-hero-right { min-height: 360px; }
  .m-earth { width: min(380px, 90%); transform: none; }
  .m-headline { font-size: clamp(42px, 11vw, 72px); }

  .m-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .m-stat-cell { padding: 8px 20px; }
  .m-stat-cell:nth-child(odd) { border-left: none; padding-left: 0; }
  .m-stat-cell:nth-child(even) { border-left: 1px solid var(--m-border); }
  .m-stat-cell:nth-child(3) { padding-top: 24px; border-top: 1px solid var(--m-border); }
  .m-stat-cell:nth-child(4) { padding-top: 24px; border-top: 1px solid var(--m-border); }

  .m-bento { grid-template-columns: 1fr; }
  .m-tile.wide, .m-tile.narrow { grid-column: auto; }
  .m-tile.split-vis { flex-direction: column; }

  .m-pricing-cards { grid-template-columns: 1fr; }

  .m-footer-inner { grid-template-columns: 1fr 1fr; }
  .m-footer-brand-cell { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .m-ctas { flex-direction: column; align-items: stretch; }
  .m-btn { justify-content: center; }
  .m-footer-bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
}
/* Ant Design overrides — v1 design system
   仅承载 ConfigProvider 实测覆盖不到的角落（component-level token 缺口）。
   每条 override 必须有 [盲区证据] 注释，说明 Phase 几在哪个页面截图发现 ConfigProvider 失效。
   未实测验证的 selector 不允许写入本文件。 */

/* [盲区证据] Phase 2 截图 /console/video-creation 时 .ant-layout-sider 计算样式仍为
   rgb(15,15,15)，根因：src/modules/geo/styles/global.css 第 85-97 行用 !important 全局
   覆写 .ant-layout / .ant-layout-header / .ant-layout-sider / .ant-layout-content 为
   geo-bg-primary/secondary（深色），且该 css 通过 5 个 GeoPage 的 import 在 App.tsx 启动
   时即被加载，污染所有 console 页面。
   修复方案：dp-revamp（MainLayout 根 className）作用域内强制覆盖 — 同样使用 !important
   提升优先级（geo css 用了 !important，必须 !important 反制）。
   长期修复：Phase 9 把 geo global.css 全部 selector 加 .geo-page-container 前缀，去除
   全局污染。本块在 Phase 9 完成后可删除。 */
.dp-revamp.ant-layout,
.dp-revamp .ant-layout {
  background: var(--ds-bg) !important;
}

.dp-revamp .ant-layout-header {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--ds-border) !important;
}

.dp-revamp .ant-layout-sider {
  background: var(--ds-bg) !important;
  border-right: 1px solid var(--ds-border) !important;
}

.dp-revamp .ant-layout-content {
  background: var(--ds-bg) !important;
}

/* [盲区证据] Phase 3 截图 AuthModal 时发现：
   1. 5 个主/副 CTA（登录/注册/重置密码/获取验证码/发送验证码）仍渲染紫色渐变
   2. modal 标题（欢迎登陆 / 创建您的账户 / 找回密码）变白字几乎不可见
   3. 表单 label（账号/密码）色弱
   根因：src/modules/geo/styles/global.css 第 203-207 行 `.ant-btn-primary` 用
   `var(--geo-primary-gradient)` + !important 全局覆盖；第 401-408 行 `.ant-modal-content`
   / `.ant-modal-title` 用 geo 暗色 + !important；第 533-536 行 `.ant-typography *` 用
   geo 浅白文字 + !important；第 929-931 行 `.ant-form-item-label > label` 用 geo 浅白。
   AuthModal 渲染在 React Portal（body 直挂），不在 .dp-revamp 树内，无法靠 .dp-revamp
   反制，必须给 modal portal 加 wrapClassName="dp-auth-modal" 作 hook。
   长期修复：Phase 9 把 geo global.css 全部 selector 加 .geo-page-container 前缀去全局
   污染。本块在 Phase 9 完成后可删除。 */

/* AuthModal portal 内 modal 容器 + 标题 + 表单文字反制
   注：antd Modal 在 .ant-modal-body 上单独设了一个 colorText（实测 rgba(255,255,255,0.85)
   暗色 token），导致 inherit 链断在 body 级别 → 标题/链接/checkbox label 全成白色。
   解法：显式把 .ant-modal-content 和 .ant-modal-body 都强制为 ds-text。 */
.dp-auth-modal .ant-modal-content,
.dp-auth-modal .ant-modal-body {
  background: var(--ds-bg) !important;
  color: var(--ds-text) !important;
}

.dp-auth-modal .ant-modal-title {
  color: var(--ds-text) !important;
}

.dp-auth-modal .ant-typography,
.dp-auth-modal .ant-typography * {
  color: inherit !important;
}

/* Checkbox / Radio label 文字（"记住我"、"我已阅读并同意"、"个人/企业"） */
.dp-auth-modal .ant-checkbox-wrapper,
.dp-auth-modal .ant-radio-wrapper {
  color: var(--ds-text-muted) !important;
}

/* Typography Link 必须用 accent，不要被 inherit 抹平 */
.dp-auth-modal .ant-typography-link,
.dp-auth-modal a.ant-typography {
  color: var(--ds-accent-text) !important;
}

.dp-auth-modal .ant-form-item-label > label {
  color: var(--ds-text-muted) !important;
}

/* AuthModal portal 内主 CTA = ink-on-ink（design.md 主按钮规范） */
.dp-auth-modal .ant-btn-primary {
  background: var(--ds-text) !important;
  border-color: var(--ds-text) !important;
  color: var(--ds-text-on-ink) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.dp-auth-modal .ant-btn-primary:hover,
.dp-auth-modal .ant-btn-primary:focus {
  background: #000000 !important;
  border-color: #000000 !important;
  color: var(--ds-text-on-ink) !important;
  filter: none !important;
  box-shadow: var(--ds-shadow-cta-primary) !important;
}

.dp-auth-modal .ant-btn-primary:disabled,
.dp-auth-modal .ant-btn-primary[disabled] {
  background: var(--ds-bg-deep) !important;
  border-color: var(--ds-bg-deep) !important;
  color: var(--ds-text-subtle) !important;
}

/* MainLayout 内主 CTA：同样 ink-on-ink，与 design.md 对齐
   （此前 App.css 1447-1458 用 azure 渐变，与 design.md 主按钮规范不符，由本块替换） */
.dp-revamp .ant-btn-primary {
  background: var(--ds-text) !important;
  border-color: var(--ds-text) !important;
  color: var(--ds-text-on-ink) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.dp-revamp .ant-btn-primary:hover,
.dp-revamp .ant-btn-primary:focus {
  background: #000000 !important;
  border-color: #000000 !important;
  color: var(--ds-text-on-ink) !important;
  filter: none !important;
  box-shadow: var(--ds-shadow-cta-primary) !important;
}

.dp-revamp .ant-btn-primary:disabled,
.dp-revamp .ant-btn-primary[disabled] {
  background: var(--ds-bg-deep) !important;
  border-color: var(--ds-bg-deep) !important;
  color: var(--ds-text-subtle) !important;
}

/* [盲区证据] s4a Phase F2 截图 /console mindmap 工作区时发现：
   CustomWorkspace「生成分镜」、AiSmartWorkspace「开始生成」/「重试」主 CTA
   仍渲染 azure 渐变。/console（ConsoleCanvasPage）不经 MainLayout，DOM 树上没有
   .dp-revamp，故上面的 .dp-revamp 反制够不到；geo global.css 第 203-207 行
   `.ant-btn-primary` azure 渐变 + !important 直接漏到工作区。
   对策：给 mindmap 工作区 overlay（.mm-workspace-panel）加同款 ink-on-ink 反制，
   满足 design.md §12 console scope no-azure。 */
.mm-workspace-panel .ant-btn-primary {
  background: var(--ds-text) !important;
  border-color: var(--ds-text) !important;
  color: var(--ds-text-on-ink) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.mm-workspace-panel .ant-btn-primary:hover,
.mm-workspace-panel .ant-btn-primary:focus {
  background: #000000 !important;
  border-color: #000000 !important;
  color: var(--ds-text-on-ink) !important;
  filter: none !important;
  box-shadow: var(--ds-shadow-cta-primary) !important;
}

.mm-workspace-panel .ant-btn-primary:disabled,
.mm-workspace-panel .ant-btn-primary[disabled] {
  background: var(--ds-bg-deep) !important;
  border-color: var(--ds-bg-deep) !important;
  color: var(--ds-text-subtle) !important;
}

/* [盲区证据] Phase 7 截图 /console/data-dashboard 时发现：
   KPI 6 卡 + 3 趋势图 Card 仍渲染深 navy 底，inline `style={{ background: 'var(--ds-surface)' }}`
   被 src/modules/geo/styles/global.css 第 121-125 行 `.ant-card { background: var(--geo-bg-surface)
   !important; color: var(--geo-text-primary) !important }` 全局污染压住。
   对策：dp-revamp 树内 .ant-card 强制白底 + ink 文字（用 inherit 让 inline style 生效；
   border 用 ds-border 反制 geo border）。表格组件 .ant-table 也同样，但 DataDashboardPage 用
   `.ddp-table` scope override 已覆盖 geo .ant-table，此处不再追加。
   长期修复：Phase 9 把 geo global.css 全部 selector 加 .geo-page-container 前缀，去除全局污染。
   本块在 Phase 9 完成后可删除。 */
.dp-revamp .ant-card {
  background: var(--ds-surface) !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-text) !important;
}

.dp-revamp .ant-card-head,
.dp-revamp .ant-card-head-wrapper,
.dp-revamp .ant-card-head-title {
  background: transparent !important;
  border-bottom: 1px solid var(--ds-border) !important;
  color: var(--ds-text) !important;
}

/* [盲区证据] Phase 8 截图 /console/account-settings + /console/membership 时发现：
   Form.Item label / Title h4 / Text 等所有 antd Typography 组件渲染为白色不可见文字。
   根因：src/modules/geo/styles/global.css 第 533-535 行
     `.ant-typography, .ant-typography * { color: var(--geo-text-primary) !important; }`
   `--geo-text-primary` = rgba(255,255,255,0.95)（暗主题白字），全局 !important 压过 inline
   style 和组件自身 color，导致白底页面所有 Typography 文字消失。
   对策：dp-revamp 树和 .account-settings (AccountSettingsPage 独立布局) 内 antd Typography
   强制改回 ink + ds-text-muted（inherit 配合 inline style 让二级语义文字也可视）。
   长期修复：Phase 9 给 geo global.css 全 selector 加 .geo-page-container 前缀。
   本块在 Phase 9 完成后可删除。 */
.dp-revamp .ant-typography,
.dp-revamp .ant-typography *,
.account-settings .ant-typography,
.account-settings .ant-typography * {
  color: inherit !important;
}

.dp-revamp .ant-typography-secondary,
.account-settings .ant-typography-secondary {
  color: var(--ds-text-muted) !important;
}

.dp-revamp .ant-typography-disabled,
.account-settings .ant-typography-disabled {
  color: var(--ds-text-subtle) !important;
}

/* 默认 antd Title h1-h4 渲染走 .ant-typography，inherit 后用 currentColor，但
   AccountSettingsPage 大量在父 div 没 set color 时直接 <Title>，需要兜个 ink 默认 */
.dp-revamp h1.ant-typography,
.dp-revamp h2.ant-typography,
.dp-revamp h3.ant-typography,
.dp-revamp h4.ant-typography,
.dp-revamp h5.ant-typography,
.account-settings h1.ant-typography,
.account-settings h2.ant-typography,
.account-settings h3.ant-typography,
.account-settings h4.ant-typography,
.account-settings h5.ant-typography {
  color: var(--ds-text) !important;
}

/* [盲区证据] Phase 8 截图 /console/account-settings 时发现：
   语言偏好 / 主题偏好 Select 渲染为黑色实心条（看不到选项文字）。
   根因：src/modules/geo/styles/global.css 第 215-220 行
     `.ant-input, .ant-select-selector, .ant-picker { background: #0f0f0f !important; ... }`
   全局 !important 把 Select 控件填成深色。AccountSettingsPage 内联 <style> 已用
   `.account-settings .ant-select-selector` 覆盖（specificity 2-class），但 geo CSS 加载
   顺序在后（geo modules lazy），同 specificity + !important 时后者赢。
   对策：在 antd-overrides 末尾再追加 .dp-revamp 树内 Select / Input / Picker 反制（用
   3-class selector 提升 specificity，确保不被 geo 后续注入压住）。
   本块在 Phase 9 完成后可删除。 */
.dp-revamp .ant-select .ant-select-selector,
.dp-revamp .ant-form .ant-input,
.dp-revamp .ant-form .ant-input-affix-wrapper,
.account-settings .ant-select .ant-select-selector,
.account-settings .ant-form .ant-input,
.account-settings .ant-form .ant-input-affix-wrapper {
  background: var(--ds-surface) !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-text) !important;
}

.dp-revamp .ant-select .ant-select-selection-item,
.dp-revamp .ant-select .ant-select-selection-placeholder,
.dp-revamp .ant-select .ant-select-arrow,
.account-settings .ant-select .ant-select-selection-item,
.account-settings .ant-select .ant-select-selection-placeholder,
.account-settings .ant-select .ant-select-arrow {
  color: var(--ds-text) !important;
}

.dp-revamp .ant-form .ant-input::placeholder,
.account-settings .ant-form .ant-input::placeholder {
  color: var(--ds-text-subtle) !important;
}

/* [盲区证据] Phase 8 截图 /console/account-settings 时发现：
   "退出登录" / "删除账户" / "上传新头像" 等 default Button 文字看不见。
   根因：src/modules/geo/styles/global.css 第 191-194 行
     `.ant-btn-default { background: transparent !important; color: rgba(255,255,255,0.95) !important; }`
   暗主题白字 !important 全局应用，default 按钮文字消失。
   对策：dp-revamp / .account-settings 树内 default 按钮反制为 ds-text + ds-border。
   .ant-btn-text（无 border 透明按钮）跟着同样处理；danger button 让 antd 自身的 danger
   class 走 antd 默认（红字）—— 不在此处覆盖 .ant-btn-dangerous。
   本块在 Phase 9 完成后可删除。 */
.dp-revamp .ant-btn-default,
.account-settings .ant-btn-default {
  background: var(--ds-surface) !important;
  border-color: var(--ds-border-strong) !important;
  color: var(--ds-text) !important;
}

.dp-revamp .ant-btn-default:hover,
.account-settings .ant-btn-default:hover {
  background: var(--ds-bg-alt) !important;
  border-color: var(--ds-text) !important;
  color: var(--ds-text) !important;
}

.dp-revamp .ant-btn-text:not(.ant-btn-dangerous),
.account-settings .ant-btn-text:not(.ant-btn-dangerous) {
  color: var(--ds-text) !important;
}

.dp-revamp .ant-btn-link,
.account-settings .ant-btn-link {
  color: var(--ds-accent-text) !important;
}

/* design.md §12.2: console scope Radio.Button buttonStyle="solid" 选中 → ink-on-ink */
.dp-revamp .ant-radio-button-wrapper-checked,
.account-settings .ant-radio-button-wrapper-checked,
.dp-revamp .ant-radio-button-wrapper-checked:not([class*='ant-radio-button-wrapper-disabled']) {
  background: var(--ds-text) !important;
  border-color: var(--ds-text) !important;
  color: var(--ds-bg) !important;
}
.dp-revamp .ant-radio-button-wrapper-checked:hover,
.account-settings .ant-radio-button-wrapper-checked:hover {
  background: var(--ds-text-muted) !important;
  border-color: var(--ds-text-muted) !important;
  color: var(--ds-bg) !important;
}
.dp-revamp .ant-radio-button-wrapper-checked::before,
.account-settings .ant-radio-button-wrapper-checked::before {
  background-color: var(--ds-text) !important;
}

/* design.md §12.2: console scope antd Tabs 选中 → ink；底部 underline → ink */
.dp-revamp .ant-tabs .ant-tabs-tab.ant-tabs-tab-active,
.account-settings .ant-tabs .ant-tabs-tab.ant-tabs-tab-active {
  background: transparent !important;
  color: var(--ds-text) !important;
}
.dp-revamp .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn,
.account-settings .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--ds-text) !important;
}
.dp-revamp .ant-tabs .ant-tabs-ink-bar,
.account-settings .ant-tabs .ant-tabs-ink-bar {
  background: var(--ds-text) !important;
}

/* [盲区证据] plan v2 Task 9/10 Phase F2 截图发现：
   DeleteConfirmModal「确认删除」+ NewProductModal「创建」按钮渲染 azure 蓝，
   不符 design.md §12 console scope no-azure。根因同 dp-auth-modal 段：
   geo/global.css 第 203-207 行 .ant-btn-primary azure 渐变 + !important 全局污染，
   而 antd Modal 渲染在 React Portal（不在 .dp-revamp 树内），dp-revamp 反制够不到。
   解：给 ProductsHomePage 的 Modal 加 wrapClassName="dp-console-modal" 作 portal hook。 */
.dp-console-modal .ant-btn-primary {
  background: var(--ds-text) !important;
  border-color: var(--ds-text) !important;
  color: var(--ds-text-on-ink) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}
.dp-console-modal .ant-btn-primary:hover,
.dp-console-modal .ant-btn-primary:focus {
  background: #000000 !important;
  border-color: #000000 !important;
  color: var(--ds-text-on-ink) !important;
  filter: none !important;
}
.dp-console-modal .ant-btn-primary:disabled,
.dp-console-modal .ant-btn-primary[disabled] {
  background: var(--ds-bg-deep) !important;
  border-color: var(--ds-bg-deep) !important;
  color: var(--ds-text-subtle) !important;
}

/* danger primary（如「确认删除」）保留 danger 语义红色，覆盖上面的 ink ink */
.dp-console-modal .ant-btn-primary.ant-btn-dangerous,
.dp-console-modal .ant-btn-color-dangerous.ant-btn-variant-solid {
  background: var(--ds-danger) !important;
  border-color: var(--ds-danger) !important;
  color: #ffffff !important;
  background-image: none !important;
}
.dp-console-modal .ant-btn-primary.ant-btn-dangerous:hover,
.dp-console-modal .ant-btn-color-dangerous.ant-btn-variant-solid:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* [盲区证据] Phase F2 第 2 轮截图发现：ProductsHomePage canvas 内
   VideoUploader「上传视频」/「上传」按钮渲染 azure 蓝（design.md §12 console scope no-azure 违反）。
   ProductsHomePage / ProductVideosPage / ProductDocsPage 都是 console-shell（不进 MainLayout），
   不在 .dp-revamp 反制 scope 内，geo/global.css 的 azure 渐变 + !important 直接漏到 canvas 主 CTA。
   解：给三个 page 顶层 div 加 dp-products-shell scope class + 本块同款 ink-on-ink 反制。 */
.dp-products-shell .ant-btn-primary {
  background: var(--ds-text) !important;
  border-color: var(--ds-text) !important;
  color: var(--ds-text-on-ink) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}
.dp-products-shell .ant-btn-primary:hover,
.dp-products-shell .ant-btn-primary:focus {
  background: #000000 !important;
  border-color: #000000 !important;
  color: var(--ds-text-on-ink) !important;
}
.dp-products-shell .ant-btn-primary:disabled,
.dp-products-shell .ant-btn-primary[disabled] {
  background: var(--ds-bg-deep) !important;
  border-color: var(--ds-bg-deep) !important;
  color: var(--ds-text-subtle) !important;
}