._jumpButton_1g9ic_1 {
  position: sticky;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto;
  padding: 0;
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container-high);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 50%;
  box-shadow: var(--ds-elevation-2);
  cursor: pointer;
  z-index: 5;
}

._jumpButton_1g9ic_1:hover {
  background: var(--ds-color-surface-container-highest);
}

._jumpButton_1g9ic_1:active {
  transform: scale(0.96);
}

._jumpButton_1g9ic_1:focus-visible {
  outline: 2px solid var(--ds-color-on-surface);
  outline-offset: 2px;
}

._jumpArrow_1g9ic_33 {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

._jumpDots_1g9ic_42 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

._jumpDot_1g9ic_42 {
  width: 3px;
  height: 3px;
  background: currentColor;
  border-radius: 50%;
  animation: _jumpDotPulse_1g9ic_1 1.2s ease-in-out infinite;
}

._jumpDot_1g9ic_42:nth-child(2) {
  animation-delay: 160ms;
}

._jumpDot_1g9ic_42:nth-child(3) {
  animation-delay: 320ms;
}

@keyframes _jumpDotPulse_1g9ic_1 {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: scale(0.75);
  }

  40% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._jumpDot_1g9ic_42 {
    animation: none;
    opacity: 0.75;
    transform: none;
  }

  ._jumpButton_1g9ic_1:active {
    transform: none;
  }
}
._shell_yqaa9_1 {
  width: 100%;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  padding: 12px 10px 8px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 24px;
  background: var(--ds-color-surface);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ds-color-on-surface) 4%, transparent),
    0 12px 32px color-mix(in srgb, var(--ds-color-on-surface) 8%, transparent);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

html[data-theme='dark'] ._shell_yqaa9_1 {
  border-color: rgba(255, 255, 255, 0.07);
  background: #2a2a2e;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 12px 36px rgba(0, 0, 0, 0.38),
    0 2px 8px rgba(0, 0, 0, 0.22);
}

._input_yqaa9_28 {
  width: 100%;
}

._input_yqaa9_28 > [data-compact='true'] {
  background: transparent !important;
}

._input_yqaa9_28 > [data-compact='true'] > div {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ds-color-on-surface) !important;
  box-shadow: none !important;
}

._input_yqaa9_28 > [data-compact='true'] > div:focus-within {
  border: none !important;
  box-shadow: none !important;
}

._input_yqaa9_28 textarea {
  min-height: 36px !important;
  max-height: 96px !important;
  padding: 4px 8px 8px 10px !important;
  color: var(--ds-color-on-surface) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
}

._input_yqaa9_28 textarea::placeholder {
  color: var(--ds-color-on-surface-variant) !important;
}

._input_yqaa9_28 [data-testid='compact-composer-actions'] {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 2px 2px !important;
}

._input_yqaa9_28 .chat-compact-attach {
  position: static !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--ds-color-on-surface-variant) !important;
}

._input_yqaa9_28 .chat-compact-attach:hover {
  background: color-mix(in srgb, var(--ds-color-on-surface) 6%, transparent) !important;
  color: var(--ds-color-on-surface) !important;
}

._input_yqaa9_28 .chat-send-btn {
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  border-radius: 999px !important;
}

._input_yqaa9_28 .chat-send-btn:disabled {
  border: none !important;
  background: color-mix(in srgb, var(--ds-color-on-surface) 8%, transparent) !important;
  color: var(--ds-color-on-surface-variant) !important;
  opacity: 1 !important;
}

._input_yqaa9_28 .chat-send-btn:not(:disabled) {
  border: none !important;
  background: var(--create-lite-primary-bg, var(--ds-color-on-surface)) !important;
  color: var(--create-lite-primary-fg, var(--ds-color-surface)) !important;
}

html[data-theme='dark'] ._input_yqaa9_28 .chat-send-btn:not(:disabled) {
  background: #f4f4f5 !important;
  color: #18181b !important;
}
/* U3 P3 — auto 全类型上传卡，对齐 prototypes/U3-attach-entries.html §3 .drop-demo */
.upload-dropzone-auto {
  border: 2px dashed var(--ds-color-on-surface, );
  border-radius: 14px;
  padding: 22px 30px;
  text-align: center;
  background: var(--ds-color-surface, );
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.upload-dropzone-auto.is-dragover {
  background: var(--ds-color-primary-container, );
  border-color: var(--ds-color-on-primary, );
}

.upload-dropzone-auto.is-busy {
  cursor: progress;
  opacity: 0.85;
}

.upload-dropzone-auto__big {
  font-weight: 800;
  font-size: 14px;
  color: var(--ds-color-on-surface, );
  line-height: 1.4;
}

.upload-dropzone-auto__sm {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant, );
  margin-top: 3px;
  line-height: 1.4;
}

.upload-dropzone-auto__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-dropzone-auto__input:disabled {
  cursor: progress;
}

.upload-dropzone-auto__status {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant, );
}

.upload-dropzone-auto__error {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ds-color-error, );
}

/* legacy 单 scope 保留简洁布局 */
.upload-dropzone-legacy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upload-dropzone-legacy__error {
  font-size: 12px;
  color: var(--ds-color-error, );
}

.upload-dropzone-legacy__status {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant, );
}
.overwrite-confirm-card {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgb(24 24 27 / 16%);
  border-radius: 14px;
  background: #fff;
  padding: 12px 14px;
  color: #18181b;
}

.overwrite-confirm-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.overwrite-confirm-card__header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
}

.overwrite-confirm-card__header span {
  flex: none;
  border-radius: 999px;
  border: 1px solid #18181b;
  background: #fff;
  color: #18181b;
  padding: 1px 8px;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
}

.overwrite-confirm-card dl {
  margin: 0;
}

.overwrite-confirm-card dl > div {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.55;
}

.overwrite-confirm-card dt { min-width: 48px; color: #a1a1aa; }
.overwrite-confirm-card dd { margin: 0; color: #18181b; }

.overwrite-confirm-card footer {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.overwrite-confirm-card button {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.overwrite-confirm-card button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.overwrite-confirm-card__primary {
  border: 1px solid #18181b;
  background: #18181b;
  color: #fff;
}

.overwrite-confirm-card__ghost {
  border: 1px solid rgb(24 24 27 / 16%);
  background: #fff;
  color: #6b7280;
}
/* 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)
   配色：数据 Tab 全域 ink 灰阶（no-azure）；Signal #e8590c 仅 AI 洞察重点卡，负向 #b04141 */

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

._compactSpark_u70db_7 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-xs);
}

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

._csTitle_u70db_24 {
  color: var(--ds-color-on-surface-variant);
  font-weight: 600;
}

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

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

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

._csAxis_u70db_48 {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--ds-color-on-surface-variant);
  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_u70db_57 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._kpiMiniLabel_u70db_68 {
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 600;
  letter-spacing: 0.02em;
}

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

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

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

._kpiMiniDeltaPlaceholder_u70db_96 {
  font-size: 10px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
}

/* expanded-row variant */
._kpiCell_u70db_57 {
  padding: var(--ds-sys-space-lg);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-xs);
}

._kpiHead_u70db_113 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-sm);
  color: var(--ds-color-on-surface);
}

._kpiIcon_u70db_121 {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
  border-radius: var(--ds-corner-small);
}

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

._kpiLabel_u70db_142 {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 600;
}

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

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

._kpiDeltaPlaceholder_u70db_160 {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
}

/* skeleton variant */
._skeletonBar_u70db_57 {
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container-high);
}

._kpiCellSkeleton_u70db_172 {
  gap: var(--ds-sys-space-sm);
}

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

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

._filterBar_u70db_181 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-lg);
  background: var(--ds-color-surface-container);
  border-bottom: 1px solid var(--ds-color-outline-variant);
  flex-wrap: wrap;
  min-height: 40px;
}

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

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

._fbSpacer_u70db_210 {
  flex: 1;
}

._filterBarCta_u70db_214 {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-xs);
  padding: 3px 10px;
  border: 1px solid var(--ds-color-on-surface);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-surface);
  cursor: pointer;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

._filterBarCta_u70db_214:hover {
  opacity: 0.88;
}

._filterBarExport_u70db_234 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
  cursor: pointer;
  transition: border-color 0.15s;
  flex-shrink: 0;
}

._filterBarExport_u70db_234:hover {
  border-color: var(--ds-color-on-surface);
}

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

._fbDisabledHint_u70db_259 {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  font-style: italic;
}

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

._compactStatus_u70db_267 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-xs);
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
  flex-wrap: wrap;
}

._csChip_u70db_280 {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  font-size: 10px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
}

._csUpdated_u70db_292 {
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
}

._csSyncBtn_u70db_297 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  font-size: 10px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
  cursor: pointer;
  transition: border-color 0.15s;
}

._csSyncBtn_u70db_297:hover {
  border-color: var(--ds-color-on-surface);
}

._csSyncIcon_u70db_316 {
  font-size: 11px;
}

._statusStrip_u70db_267 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-lg);
  background: var(--ds-color-surface-container);
  border-bottom: 1px solid var(--ds-color-outline-variant);
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  flex-wrap: wrap;
}

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

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

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

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

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

._syncProgressCell_u70db_366 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-sm);
  padding: var(--ds-sys-space-md) var(--ds-sys-space-lg);
  background: var(--ds-color-surface-container);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

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

._spPct_u70db_388 {
  color: var(--ds-color-on-surface);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

._spEta_u70db_394 {
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 500;
}

._syncBar_u70db_400 {
  height: 6px;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container-high);
  overflow: hidden;
}

._syncBarFill_u70db_407 {
  height: 100%;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  transition: width 0.3s ease;
}

._syncStats_u70db_414 {
  display: flex;
  gap: var(--ds-sys-space-md);
  flex-wrap: wrap;
}

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

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

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

._syncStatFail_u70db_427 ._ssNum_u70db_434 {
  color: var(--ds-color-error);
}

._ssLabel_u70db_446 {
  font-size: 9px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 600;
  letter-spacing: 0.02em;
}

._syncCurrentStep_u70db_453 {
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.4;
}

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

._chartCell_u70db_460 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-xs);
}

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

._chartTitle_u70db_460 {
  color: var(--ds-color-on-surface);
  font-weight: 700;
}

._chartSub_u70db_461 {
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 500;
}

._chartLegend_u70db_461 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
}

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

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

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

._chartSvg_u70db_461 {
  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_u70db_523 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-sm);
  overflow-x: auto;
}

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

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

._detailTable_u70db_523 tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
  vertical-align: middle;
}

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

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

._platCell_u70db_524 {
  white-space: nowrap;
  color: var(--ds-color-on-surface-variant);
}

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

._linkCell_u70db_524 {
  white-space: nowrap;
}

._linkCell_u70db_524 a {
  color: var(--ds-color-on-surface);
  text-decoration: none;
  font-size: 11px;
  cursor: pointer;
}

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

._unsyncChip_u70db_524 {
  display: inline-block;
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container, );
  border-radius: 3px;
  padding: 1px 4px;
  font-weight: 500;
}

._sortGlyph_u70db_525 {
  margin-left: 3px;
  font-size: 9px;
  color: var(--ds-color-on-surface-variant);
}

._tableFoot_u70db_524 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  padding: 0 2px;
}

._tablePager_u70db_525 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-xs);
}

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

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

._pagerPage_u70db_525 {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

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

._vidInlineCard_u70db_649 {
  display: flex;
  gap: var(--ds-sys-space-lg);
  padding: var(--ds-sys-space-lg);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
}

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

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

._vicDur_u70db_685 {
  position: absolute;
  top: var(--ds-sys-space-sm);
  right: var(--ds-sys-space-sm);
  padding: 2px var(--ds-sys-space-sm);
  background: rgba(0, 0, 0, 0.6);
  color: var(--ds-color-on-surface);
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--ds-corner-full);
  font-variant-numeric: tabular-nums;
  z-index: 2;
}

._vicPlay_u70db_699 {
  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-color-on-surface);
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

._vicBottom_u70db_717 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--ds-sys-space-lg) var(--ds-sys-space-sm) var(--ds-sys-space-sm);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
  color: var(--ds-color-on-surface);
  z-index: 1;
}

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

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

._vicHead_u70db_746 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-sm);
}

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

._vicMeta_u70db_760 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

._vicChip_u70db_769 {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--ds-sys-space-sm);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-weight: 600;
}

._vicChipPlat_u70db_779 {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

._vicStatsRow_u70db_784 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-md) 0;
  border-top: 1px solid var(--ds-color-outline-variant);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

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

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

._vicStatLabel_u70db_808 {
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 600;
}

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

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

._vicDerived_u70db_826 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-lg);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

._vdKey_u70db_835 {
  color: var(--ds-color-on-surface-variant);
  margin-right: 4px;
}

._vdPending_u70db_840 {
  color: var(--ds-color-on-surface-variant);
  font-style: italic;
}

._vicActions_u70db_845 {
  display: flex;
  gap: var(--ds-sys-space-sm);
  margin-top: auto;
  flex-wrap: wrap;
}

._vicBtn_u70db_852 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

._vicBtn_u70db_852:hover {
  border-color: var(--ds-color-on-surface-variant);
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
}

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

._vicBtnIcon_u70db_879 {
  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_u70db_891 {
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  box-shadow: var(--ds-elevation-4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._canvasCardGenerating_u70db_901 {
  border-style: dashed;
  border-color: var(--ds-color-on-surface-variant);
  box-shadow: none;
}

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

._cardHead_u70db_913 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  padding: var(--ds-sys-space-md) var(--ds-sys-space-lg);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

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

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

._cardBody_u70db_935 {
  padding: var(--ds-sys-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-md);
}

/* 2×2 KPI grid */
._kpi2x2_u70db_943 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-sys-space-sm) var(--ds-sys-space-md);
}

/* generating state */
._genPreview_u70db_950 {
  height: 132px;
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sys-space-sm);
}

._genIcon_u70db_961 {
  font-size: 30px;
  color: var(--ds-color-on-surface-variant);
}

._genHint_u70db_966 {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
}

._genProgress_u70db_972 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-sm);
}

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

._genEta_u70db_987 {
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
}

._genBar_u70db_992 {
  height: 6px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container-high);
  overflow: hidden;
}

._genBarFill_u70db_999 {
  height: 100%;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-secondary);
}

._cardMeta_u70db_1005 {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.6;
}

/* failed state */
._failPreview_u70db_1012 {
  height: 132px;
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-error-container);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sys-space-sm);
}

._failIcon_u70db_1023 {
  font-size: 28px;
  color: var(--ds-color-error);
}

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

._failReason_u70db_1034 {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.6;
}

/* CTA wrap + full-width button */
._cardCtaWrap_u70db_1041 {
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-lg) var(--ds-sys-space-lg);
}

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

._cardCtaFull_u70db_1045:hover {
  opacity: 0.85;
}

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

._cardCtaFull_u70db_1045:hover ._ctaArrow_u70db_1067 {
  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_u70db_1084 {
  width: 100%;
  min-width: 760px;
}

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

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

._statusBadgeFail_u70db_1115 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-error-container);
  color: var(--ds-color-error);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

._expandCollapseBtn_u70db_1128 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

._expandCollapseBtn_u70db_1128:hover {
  border-color: var(--ds-color-on-surface-variant);
  color: var(--ds-color-on-surface);
}

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

._exBlock_u70db_1156 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-lg);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

._exLabel_u70db_1164 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-sys-space-sm);
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-color-on-surface-variant);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

._labelCount_u70db_1176 {
  font-size: 10px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  text-transform: none;
  letter-spacing: 0;
}

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

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

._chartEmpty_u70db_1196 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container-high);
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  text-align: center;
  padding: var(--ds-sys-space-lg);
}

._errorBox_u70db_1210 {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-md) var(--ds-sys-space-lg);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-error-container);
  border: 1px solid color-mix(in srgb, var(--ds-color-error) 20%, transparent);
  font-size: 12px;
  color: var(--ds-color-on-surface);
  line-height: 1.5;
}

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

._metaGrid_u70db_1238 {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--ds-sys-space-sm) var(--ds-sys-space-lg);
  margin: 0;
  font-size: 12px;
}

._metaGrid_u70db_1238 dt {
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
}

._metaGrid_u70db_1238 dd {
  color: var(--ds-color-on-surface);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

._cardActions_u70db_1258 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  padding: var(--ds-sys-space-md) var(--ds-sys-space-lg);
  border-top: 1px solid var(--ds-color-outline-variant);
  flex-wrap: wrap;
}

._cardAction_u70db_1258 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
}

._cardAction_u70db_1258:hover {
  border-color: var(--ds-color-on-surface-variant);
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
}

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

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

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

._cardActionDanger_u70db_1302:hover {
  background: var(--ds-color-error-container);
  border-color: var(--ds-color-error);
  color: var(--ds-color-error);
}

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

._statusBadgeNeutral_u70db_1319 {
  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-color-on-surface-variant) 10%, transparent);
  color: var(--ds-color-on-surface-variant);
  border: 1px solid color-mix(in srgb, var(--ds-color-on-surface-variant) 20%, transparent);
  flex-shrink: 0;
}

._vdBreadcrumb_u70db_1333 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 6px;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

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

._vdBreadcrumbBack_u70db_1344:hover {
  color: var(--ds-color-on-surface);
  text-decoration: underline;
}

._vdBreadcrumbSep_u70db_1363 {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}

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

._vdPreview_u70db_1376 {
  position: relative;
  width: 140px;
  min-width: 140px;
  aspect-ratio: 9 / 16;
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

._vdFlag_u70db_1390 {
  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_u70db_1407 {
  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_u70db_1421 {
  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_u70db_1421:hover {
  background: color-mix(in srgb, #000 65%, transparent);
  transform: translate(-50%, -50%) scale(1.08);
}

._vdBottom_u70db_1445 {
  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_u70db_1455 {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 2px;
}

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

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

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

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

._vdDesc_u70db_1490 {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.5;
}

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

._vdTag_u70db_1496 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
}

._vdTagPlat_u70db_1514 {
  border-color: var(--ds-color-on-surface-variant);
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
}

._vdMetaGrid_u70db_1520 {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 0;
  padding: 10px 12px;
  background: var(--ds-color-surface-container);
  border-radius: var(--ds-corner-small);
  border: 1px solid var(--ds-color-outline-variant);
}

._vdMetaGrid_u70db_1520 dt {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
}

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

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

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

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

._vdKpi_u70db_1559 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
}

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

._vdKpiLabel_u70db_1583 {
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 500;
}

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

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

._vdKpiDeltaPlaceholder_u70db_1601 {
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 600;
}

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

._vdPlatformRow_u70db_1613 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  flex-wrap: wrap;
}

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

._vdPlatformIcon_u70db_1635 {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
  flex-shrink: 0;
}

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

._vdPlatformLabel_u70db_1658 {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

._vdPlatformStats_u70db_1664 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  flex: 1;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

._vdPlatformStats_u70db_1664 b {
  color: var(--ds-color-on-surface);
  font-weight: 700;
}

._vdPlatformLink_u70db_1678 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: var(--ds-corner-small);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

._vdPlatformLink_u70db_1678:hover {
  background: var(--ds-color-surface-container);
  border-color: var(--ds-color-on-surface);
}

._vdActions_u70db_1699 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--ds-color-outline-variant);
}

._gaugeNum_u70db_1707 {
  font-family: var(--ds-typeface-code);
  font-size: 30px;
  font-weight: 700;
  fill: var(--ds-color-on-surface);
}

._gaugeSub_u70db_1714 {
  font-size: 11px;
  fill: var(--ds-color-on-surface-variant);
}

/* ============================================================
   Task 4: KpiBento (Hero + 5 KPI bento) — .kpiBento family
   Source: docs/design/2026-06-23-data-tab-dashboard.html §2 + §7b
   Colours: ink only (no azure). `--ds-shadow-card` token absent → shadow inlined.
   ============================================================ */

._card_u70db_913 {
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 4px 12px rgba(24, 24, 27, 0.04);
}

._mono_u70db_1544 {
  font-family: var(--ds-typeface-code);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

._cardEyebrow_u70db_1738 {
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-color-on-surface-variant);
}

._delta_u70db_1747 {
  font-family: var(--ds-typeface-code);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}

._deltaUp_u70db_1757 {
  color: var(--ds-color-on-surface);
}

._deltaDown_u70db_1761 {
  color: #b04141;
}

._kpiBento_u70db_1720 {
  display: grid;
  grid-template-columns: 1.25fr 2.6fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* ── Task 3：dense 8 列变体（仅 dashboard 内 .shell 作用域；小卡无此 class → 原 .kpiBento 不变）── */
/* 必须紧跟 .kpiBento 之后，同特异性下靠源序覆盖 grid-template-columns。*/
._kpiBentoDense_u70db_1774 {
  grid-template-columns: repeat(8, 1fr);
}

/* compact 断点（spec §3 / 设计稿 lyt1）：窄屏 KPI 8→4 列，与外层 .chartGrid 降 2 列对齐；
   hero 保持 span2。仅 dense（看板 .shell）作用域，小卡非 dense 不受影响。 */
@media (max-width: 1200px) {
  ._kpiBentoDense_u70db_1774 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* dense 下让 .kpiRight 透明化，其 6 个子单元（5 KPI + GEO 第 6 格）直接铺进根 8 列网格，
   组成 hero(span2) + 5 KPI + GEO = 8 列。不改原 .kpiRight 规则（仅 dense 作用域覆盖 display）。*/
._kpiBentoDense_u70db_1774 ._kpiRight_u70db_1786 {
  display: contents;
}

._heroDense_u70db_1792 {
  grid-column: span 2;
}

/* dense 单元：每指标左边条（var(--kpi-accent) 由单元 inline style 注入，回退 ink） */
._kpiBentoDense_u70db_1774 ._kpiCard_u70db_1797 {
  position: relative;
  overflow: hidden;
}

/* dense 单元：每指标图标着色（回退 ink） */
._kpiBentoDense_u70db_1774 ._kcIc_u70db_1803 {
  background: color-mix(in srgb, var(--kpi-accent, var(--ds-color-on-surface)) 15%, transparent);
  border-color: var(--ds-color-surface)) 32%, transparent);
  color: var(--kpi-accent, var(--ds-color-on-surface));
}

._hero2_u70db_1809 {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 0;
}

._heroTop_u70db_1817 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

._big_u70db_1824 {
  font-size: clamp(40px, 4.4vw, 60px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 16px;
}

._heroSub_u70db_1832 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  flex-wrap: wrap;
}

._heroPrev_u70db_1842 {
  color: var(--ds-color-on-surface-variant);
}

._heroSpark_u70db_1846 {
  margin-top: 14px;
  height: 90px;
}

._heroSpark_u70db_1846 svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

._kpiRight_u70db_1786 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
}

._kpiCard_u70db_1797 {
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  min-height: 104px;
}

._kcTop_u70db_1872 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

._kcLabel_u70db_1879 {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 600;
}

._kcIc_u70db_1803 {
  width: 23px;
  height: 23px;
  border-radius: 7px;
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  flex-shrink: 0;
}

._kcNum_u70db_1899 {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 12px;
  line-height: 1;
}

._kcFt_u70db_1907 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}

._kcFt_u70db_1907 ._spark_u70db_1916 {
  width: 62px;
  height: 22px;
  flex-shrink: 0;
}

/* ── finetune 紧凑卡内胆（dense 专用，仅 dashboard .shell 作用域）──
   目标稿 docs/design/2026-06-30-data-dashboard-tailwind-finetune.html .kpi/.kpi--wide：
   竖排 [label·icon] / [数字 + 内联 ▲delta] / [底部满宽迷你面积图（margin-top:auto 贴底）]。
   小卡（DataCardExpanded 非 dense）不带这些 class → 原 kcNum/kcFt 布局与 ink 完全不变。
   必须排在 .kpiCard 之后：同为单类特异性，靠源序覆盖 padding。 */
._kpiCardDense_u70db_1927 {
  padding: 11px 13px 10px;
  gap: 4px;
  min-height: 104px;
}

._kcFigure_u70db_1933 {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

._kpiCardDense_u70db_1927 ._kcNum_u70db_1899 {
  margin-top: 0;
  font-size: 25px;
}

/* dense hero 数字更大（对齐 .kpi--wide .kpi-val=38，收紧到 34 适配 console 密度）；
   紧跟 .kpiCardDense .kcNum 之后，同特异性靠源序对 hero 覆盖字号。 */
._kpiCardDense_u70db_1927 ._heroNum_u70db_1947 {
  font-size: 34px;
}

._kcSpark_u70db_1951 {
  margin-top: auto;
  padding-top: 6px;
  width: 100%;
}

._kcSpark_u70db_1951 ._spark_u70db_1916 {
  display: block;
  width: 100%;
  height: 30px;
}

._heroCompact_u70db_1963 ._kcSpark_u70db_1951 ._spark_u70db_1916 {
  height: 42px;
}

/* dense 趋势图：在 ops lineBox 内拉满宽高；非 dense 小卡仍固定 80px。 */
._chartCellDense_u70db_1968 {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

._chartCellDense_u70db_1968 ._chartCanvas_u70db_461 {
  flex: 1 1 auto;
  min-height: 140px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 看板趋势：无内置标题，X 轴日期行贴底 */
._chartCellHeadless_u70db_1989 {
  gap: 0;
}

._chartCellHeadless_u70db_1989 ._chartCanvas_u70db_461 {
  display: flex;
  flex-direction: column;
  min-height: 140px;
}

/* 绘图区 = Y 轴 + plot；X 轴在下方 */
._chartBody_u70db_2000 {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
}

._chartYAxis_u70db_2010 {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  min-width: 36px;
  max-width: 56px;
  padding: 6px 0 4px;
  font-size: 10px;
  line-height: 1.2;
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  user-select: none;
  pointer-events: none;
}

._chartYTick_u70db_2028 {
  white-space: nowrap;
  text-align: right;
}

._chartPlot_u70db_2033 {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  cursor: crosshair;
}

._chartCellDense_u70db_1968 ._chartPlot_u70db_2033 {
  min-height: 120px;
}

._chartCellDense_u70db_1968 ._chartSvg_u70db_461 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
}

._chartCellHeadless_u70db_1989 ._chartSvg_u70db_461 {
  position: absolute;
  inset: 0;
  flex: none;
  min-height: 0;
  height: 100%;
}

/* 非 dense 小卡：无 chartBody 时 svg 仍走旧布局 */
._chartCanvas_u70db_461 > ._chartSvg_u70db_461 {
  display: block;
  width: 100%;
}

._chartXAxis_u70db_2067 {
  position: relative;
  flex-shrink: 0;
  margin-top: 4px;
  min-height: 16px;
  height: 16px;
  font-size: 10px;
  line-height: 1.2;
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  user-select: none;
  pointer-events: none;
  z-index: 1;
}

/* dense + Y 轴：X 轴左缩进对齐 plot，避免日期压在 Y 轴下 */
._chartXAxisWithY_u70db_2084 {
  margin-left: 42px;
}

/* 绝对定位稀疏刻度：按数据索引百分比，不再 flex 均分裁切 */
._chartXTickPos_u70db_2089 {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  max-width: none;
  overflow: visible;
}

._chartXTickPos_u70db_2089[data-edge='start'] {
  transform: translateX(0);
  text-align: left;
}

._chartXTickPos_u70db_2089[data-edge='end'] {
  transform: translateX(-100%);
  text-align: right;
}

/* 兼容旧 class（小卡若仍引用） */
._chartXTick_u70db_2089 {
  flex: 1 1 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  min-width: 0;
}

/* hover 数据提示：常规看板气泡 */
._chartTooltip_u70db_2120 {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -100%);
  pointer-events: none;
  min-width: 96px;
  max-width: 180px;
  padding: 8px 10px;
  border-radius: var(--ds-corner-small, 8px);
  /* 浮层走 M3 抬升容器：container-high 底 + outline-variant 边 + elevation-3 阴影 */
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface);
  border: 1px solid var(--ds-color-outline-variant);
  box-shadow: var(--ds-elevation-3);
  font-size: 12px;
  line-height: 1.35;
}

._chartTooltipDate_u70db_2138 {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

._chartTooltipRow_u70db_2146 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

._chartTooltipDot_u70db_2153 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

._chartTooltipLabel_u70db_2160 {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}

._chartTooltipVal_u70db_2167 {
  flex-shrink: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ds-color-on-surface);
  font-size: 12px;
}

/* AI insight strip (Plan A Task 5) — Signal #e8590c only here, else ink */
._insightStrip_u70db_2176 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

._insight_u70db_2176 {
  padding: 13px 15px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

._ico_u70db_2189 {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

._insight_u70db_2176._sig_u70db_2202 ._ico_u70db_2189 {
  background: rgba(232, 89, 12, 0.1);
  border-color: rgba(232, 89, 12, 0.32);
  color: #e8590c;
}

._insightBody_u70db_2208 {
  min-width: 0;
}

._eyebrow_u70db_2212 {
  font-family: var(--ds-typeface-code);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-color-on-surface-variant);
  margin-bottom: 4px;
}

._it_u70db_2222 {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ds-color-on-surface-variant);
}

._itB_u70db_2228 {
  color: var(--ds-color-on-surface);
  font-weight: 600;
}

._itPos_u70db_2233 {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

._itNeg_u70db_2240 {
  color: #b04141;
  font-family: var(--ds-typeface-code);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

._itSig_u70db_2247 {
  color: #e8590c;
  font-weight: 700;
}

/* ============================================================
   Task 7: 展开态 P0 看板 section header + 趋势行卡片
   (.secH / .shT / .shM / .rowP0 / .ccHead / .ccT / .ccM / .ccChart)
   Source: docs/design/2026-06-23-data-tab-dashboard.html §1 row-main + §7b
   Colours: ink only (no azure).
   ============================================================ */

._secH_u70db_2254 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 13px;
}

._shT_u70db_2254 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

._shM_u70db_2254 {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

._rowP0_u70db_2254 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

._ccHead_u70db_2254 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 16px 0;
}

._ccT_u70db_2254 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

._ccM_u70db_2254 {
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
}

._ccChart_u70db_2254 {
  position: relative;
  width: 100%;
  padding: 12px 16px 16px;
}
._ring_1y04t_1 {
  --rate-track: var(--ds-color-surface-container-high);
  width: var(--rate-size);
  height: var(--rate-size);
  margin: 0 auto var(--ds-sys-space-sm);
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(
    var(--rate-color, var(--ds-color-primary)) 0 var(--rate-progress),
    var(--rate-track) var(--rate-progress) 100%
  );
}

._ring_1y04t_1::after {
  content: '';
  position: absolute;
  inset: var(--rate-hole);
  border-radius: 50%;
  background: var(--rate-hole-bg, var(--ds-color-surface));
  border: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 60%, transparent);
}

._muted_1y04t_26 {
  background: conic-gradient(
    var(--rate-color-muted, var(--ds-color-tertiary)) 0 var(--rate-progress),
    var(--rate-track) var(--rate-progress) 100%
  );
}

._missing_1y04t_33 {
  background: repeating-conic-gradient(
    var(--rate-track) 0 7deg,
    transparent 7deg 12deg
  );
}

._value_1y04t_40 {
  position: relative;
  z-index: 1;
  color: var(--ds-color-on-surface, var(--ds-color-on-surface));
  font-family: var(--ds-typeface-code);
  font-size: var(--ds-font-body-medium-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
._card_tukfh_1 {
  --dashboard-line: rgba(24, 24, 27, 0.085);
  --dashboard-line-strong: rgba(24, 24, 27, 0.15);
  --dashboard-good: #16805a;
  --ops-sep: var(--dashboard-line);
  --ops-ink: var(--ds-color-on-surface);
  width: min(100%, 880px);
  min-width: 0;
  margin: 10px 0 0 16px;
  overflow: hidden;
  border: 1px solid var(--dashboard-line);
  border-radius: 18px;
  background: var(--ds-color-surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ds-color-on-surface) 4%, transparent) inset;
  color: var(--ds-color-on-surface);
  font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", sans-serif;
  -webkit-font-smoothing: antialiased;
}

[data-theme='dark'] ._card_tukfh_1 {
  --dashboard-line: rgba(255, 255, 255, 0.075);
  --dashboard-line-strong: rgba(255, 255, 255, 0.14);
  --dashboard-good: #43d59c;
}

._dashboardHead_tukfh_26 {
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid var(--dashboard-line);
}

._filters_tukfh_36,
._headStatus_tukfh_37 {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

._headStatus_tukfh_37 {
  justify-content: flex-end;
}

._filterChip_tukfh_48,
._rangeChip_tukfh_49,
._freshChip_tukfh_50 {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid var(--dashboard-line-strong);
  border-radius: 999px;
  color: var(--ds-color-on-surface-variant);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

._filterChip_tukfh_48 {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

._filterChip_tukfh_48 strong {
  overflow: hidden;
  color: var(--ds-color-on-surface-variant);
  font-weight: 700;
  text-overflow: ellipsis;
}

._rangeChip_tukfh_49 {
  gap: 2px;
  padding: 3px;
  overflow: hidden;
}

._rangeChip_tukfh_49 button {
  height: 20px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 650;
  white-space: nowrap;
}

._rangeChip_tukfh_49 button[aria-pressed='true'] {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

._rangeChip_tukfh_49 button:hover:not([aria-pressed='true']) {
  color: var(--ds-color-on-surface);
}

._freshChip_tukfh_50 {
  border-color: color-mix(in srgb, var(--dashboard-good) 22%, transparent);
  background: color-mix(in srgb, var(--dashboard-good) 8%, transparent);
  color: var(--dashboard-good);
}

._freshChip_tukfh_50 i,
._sourceState_tukfh_113 i {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

._freshEmpty_tukfh_121 {
  color: var(--ds-color-on-surface-variant);
  border-color: var(--dashboard-line-strong);
  background: var(--ds-color-surface-container-low);
}

._dashboardTitle_tukfh_127 {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
}

._kpiStrip_tukfh_137 {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: 8px;
  padding: 14px;
  background: var(--ds-color-surface-container-low);
}

._kpi_tukfh_137 {
  min-height: 102px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--dashboard-line);
  border-radius: 11px;
  background: var(--ds-color-surface);
  transition: transform 0.16s ease, border-color 0.16s ease;
}

._kpi_tukfh_137:hover {
  transform: translateY(-2px);
  border-color: var(--dashboard-line-strong);
}

._kpiName_tukfh_163 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ds-color-on-surface-variant);
  font-size: 9px;
  font-weight: 650;
}

._kpiGlyph_tukfh_173 {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  line-height: 1;
}

._kpiGlyph_tukfh_173 svg {
  width: 10px;
  height: 10px;
}

._kpiValue_tukfh_190 {
  color: var(--ds-color-on-surface);
  font-family: "DIN Alternate", "SFMono-Regular", monospace;
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

._kpiPrimaryValue_tukfh_200 {
  font-size: 38px;
}

._kpiMeta_tukfh_204 {
  color: var(--ds-color-outline);
  font-size: 8px;
  line-height: 1.35;
}

._kpiPrimary_tukfh_200 ._kpiMeta_tukfh_204 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

._rate_tukfh_216 {
  color: var(--dashboard-good);
  font-weight: 700;
}

._dataSection_tukfh_221 {
  padding: 17px 18px 18px;
  border-top: 1px solid var(--dashboard-line);
}

._sectionHead_tukfh_226 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}

._sectionTitle_tukfh_234 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 700;
}

._sectionTitle_tukfh_234::before {
  content: '';
  width: 2px;
  height: 11px;
  border-radius: 2px;
  background: var(--ds-color-primary);
}

._sectionMeta_tukfh_251 {
  color: var(--ds-color-outline);
  font-family: "DIN Alternate", "SFMono-Regular", monospace;
  font-size: 8px;
}

._chartTable_tukfh_257 {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(310px, 0.96fr);
  gap: 14px;
}

._chartPanel_tukfh_263,
._ratePanel_tukfh_264 {
  min-width: 0;
  padding: 14px;
  border-radius: 11px;
  background: var(--ds-color-surface-container-low);
}

._panelLabel_tukfh_271 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--ds-color-on-surface-variant);
  font-size: 9px;
  font-weight: 650;
}

._panelLabel_tukfh_271 span:last-child {
  color: var(--ds-color-outline);
  font-family: "DIN Alternate", "SFMono-Regular", monospace;
  font-weight: 500;
}

._bars_tukfh_287 {
  display: grid;
  gap: 15px;
}

._barRow_tukfh_292 {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  gap: 9px;
  align-items: center;
}

._barLabel_tukfh_299 {
  overflow: hidden;
  color: var(--ds-color-on-surface-variant);
  font-size: 9px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._barTrack_tukfh_308 {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ds-color-surface-container);
}

._barFill_tukfh_315 {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--ds-color-primary);
  transform-origin: left;
  transition: width 0.2s ease;
}

._barZero_tukfh_325 {
  width: 2px !important;
  opacity: 0.3;
}

._barValue_tukfh_330 {
  color: var(--ds-color-on-surface);
  font-family: "DIN Alternate", "SFMono-Regular", monospace;
  font-size: 10px;
  font-weight: 650;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

._chartFoot_tukfh_339 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--dashboard-line);
  color: var(--ds-color-outline);
  font-size: 8px;
}

._chartLegend_tukfh_351 {
  display: inline-flex;
  gap: 10px;
}

._chartLegend_tukfh_351 span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

._chartLegend_tukfh_351 i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--ds-color-primary);
}

._chartLegend_tukfh_351 span:nth-child(2) i {
  background: var(--ds-color-surface-container);
}

._rateGrid_tukfh_373 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

._rateCard_tukfh_379 {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 8px 8px;
  border: 1px solid var(--dashboard-line);
  border-radius: 9px;
  background: var(--ds-color-surface);
}

._rateTitle_tukfh_392 {
  overflow: hidden;
  color: var(--ds-color-on-surface-variant);
  font-size: 8px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._rateMissing_tukfh_401 .rate-ring {
  opacity: 0.8;
}

/* P13 card parity: the frozen HTML uses a flat cutout; Data Tab keeps its own ring. */
._card_tukfh_1 .rate-ring::after {
  border: 0;
}

._card_tukfh_1 .rate-ring strong {
  font-family: "DIN Alternate", "SFMono-Regular", monospace;
}

._rateCaption_tukfh_414 {
  overflow: hidden;
  max-width: 100%;
  color: var(--ds-color-outline);
  font-size: 7px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._dashboardFoot_tukfh_424 {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px;
  border-top: 1px solid var(--dashboard-line);
  color: var(--ds-color-outline);
  font-size: 8px;
}

._sourceState_tukfh_113 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  ._card_tukfh_1,
  ._card_tukfh_1 *,
  ._card_tukfh_1 *::before,
  ._card_tukfh_1 *::after {
    animation: none !important;
    transition: none !important;
  }

  ._card_tukfh_1 {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 760px) {
  ._card_tukfh_1 {
    margin-left: 0;
  }

  ._dashboardHead_tukfh_26 {
    grid-template-columns: 1fr auto;
    min-height: auto;
    padding: 13px;
  }

  ._dashboardTitle_tukfh_127 {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 5px;
  }

  ._filters_tukfh_36 {
    grid-column: 1;
    grid-row: 2;
    overflow-x: auto;
  }

  ._headStatus_tukfh_37 {
    grid-column: 2;
    grid-row: 2;
    overflow-x: auto;
  }

  ._rangeChip_tukfh_49 {
    display: none;
  }

  ._kpiStrip_tukfh_137 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._kpiPrimary_tukfh_200 {
    grid-column: span 2;
  }

  ._kpi_tukfh_137 {
    min-height: 92px;
  }

  ._chartTable_tukfh_257 {
    grid-template-columns: 1fr;
  }

  ._ratePanel_tukfh_264 {
    min-width: 0;
  }

  ._dashboardFoot_tukfh_424 {
    align-items: flex-start;
    flex-direction: column;
    padding: 10px 14px;
    gap: 4px;
  }
}

@media (max-width: 430px) {
  ._filterChip_tukfh_48 {
    max-width: 144px;
  }

  ._dataSection_tukfh_221 {
    padding: 14px 12px;
  }

  ._chartPanel_tukfh_263,
  ._ratePanel_tukfh_264 {
    padding: 12px 10px;
  }

  ._barRow_tukfh_292 {
    grid-template-columns: 42px 1fr 42px;
  }
}
.tool-pattern-content {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
  font-size: 14px;
  line-height: 1.75;
  margin: 10px 0 0 16px;
}

/* long_text 结构化正文：白底卡片，自然撑开；动作在卡内 */
.tool-pattern-content__article-preview {
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 14px;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ds-color-surface) 85%, transparent) inset,
    0 1px 2px color-mix(in srgb, var(--ds-color-on-surface) 4%, transparent),
    0 8px 22px color-mix(in srgb, var(--ds-color-on-surface) 5%, transparent);
  color: var(--ds-color-on-surface);
  line-height: 1.7;
  padding: 18px 20px;
}

.tool-pattern-content__article-preview h3 {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0 0 12px;
}

.tool-pattern-content__article-preview h4 {
  color: var(--ds-color-on-surface);
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin: 16px 0 6px;
}

.tool-pattern-content__body {
  min-height: 1.5em;
  outline: none;
}

.tool-pattern-content__body--streaming {
  position: relative;
}

.tool-pattern-content__body--read-only {
  color: var(--ds-color-on-surface-variant);
}

.tool-pattern-content__body--editable {
  color: var(--ds-color-on-surface-variant);
  cursor: text;
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.tool-pattern-content__body--editable:focus {
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-color-primary) 35%, transparent);
}

.tool-pattern-content__stream-caret {
  animation: tool-pattern-stream-caret 1s steps(1) infinite;
  background: var(--ds-color-on-surface);
  display: inline-block;
  height: 1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  width: 2px;
}

@keyframes tool-pattern-stream-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.tool-pattern-content__markdown {
  color: var(--ds-color-on-surface-variant);
  display: inline;
  font-size: 13.5px;
  line-height: 1.7;
}

.tool-pattern-content__body--streaming .tool-pattern-content__markdown,
.tool-pattern-content__body--read-only .tool-pattern-content__markdown {
  display: block;
}

.tool-pattern-content__markdown > :first-child { margin-top: 0; }
.tool-pattern-content__markdown > :last-child { margin-bottom: 0; }

.tool-pattern-content__markdown p {
  margin: 0 0 10px;
}

.tool-pattern-content__markdown ul,
.tool-pattern-content__markdown ol {
  margin: 0 0 10px;
  padding-left: 1.2em;
}

.tool-pattern-content__markdown li {
  margin: 5px 0;
}

.tool-pattern-content__markdown li > p {
  margin: 0;
}

.tool-pattern-content__markdown strong {
  color: var(--ds-color-on-surface);
  font-weight: 650;
}

.tool-pattern-content__markdown h1,
.tool-pattern-content__markdown h2,
.tool-pattern-content__markdown h3,
.tool-pattern-content__markdown h4 {
  color: var(--ds-color-on-surface);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin: 16px 0 6px;
}

.tool-pattern-content__markdown h1 { font-size: 16px; }
.tool-pattern-content__markdown h2 { font-size: 14.5px; }
.tool-pattern-content__markdown h3 { font-size: 14px; }
.tool-pattern-content__markdown h4 { font-size: 13.5px; }

.tool-pattern-content--long-text .tool-pattern-content__actions {
  border-top: 1px solid var(--ds-color-outline-variant);
  margin-top: 14px;
  padding-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .tool-pattern-content__stream-caret {
    animation: none;
    opacity: 1;
  }
}

.tool-pattern-content__meta,
.tool-pattern-content__gaps {
  align-items: baseline;
  border-top: 1px solid var(--ds-color-outline-variant);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 16px;
  padding-top: 12px;
}

.tool-pattern-content__meta a {
  color: var(--ds-color-on-primary-container);
}

.tool-pattern-content__gaps ul {
  margin: 0;
  padding-left: 18px;
}

.tool-pattern-content__diff-card {
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.tool-pattern-content__diff-side {
  line-height: 1.65;
  min-width: 0;
  padding: 16px;
}

.tool-pattern-content__diff-side + .tool-pattern-content__diff-side {
  background: color-mix(in srgb, var(--ds-color-secondary) 12%, transparent);
  border-left: 1px solid var(--ds-color-outline-variant);
}

.tool-pattern-content__diff-side span {
  color: var(--ds-color-on-surface-variant);
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

.tool-pattern-content__diff-side p {
  color: var(--ds-color-on-surface-variant);
  margin: 0;
  white-space: pre-wrap;
}

.tool-pattern-content.tool-pattern-content--before-after
  .tool-pattern-content__diff-side p.tool-pattern-content__change {
  color: var(--ds-color-secondary) !important;
  font-size: 11px;
  margin-top: 10px;
}

.tool-pattern-content__actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.tool-pattern-content__actions button,
.tool-pattern-content__actions .tool-pattern-content__action {
  background: transparent;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 9px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 6px 12px;
  text-decoration: none;
}

.tool-pattern-content__actions button:first-child {
  background: var(--ds-color-primary-container);
  border-color: var(--ds-color-primary);
  color: var(--ds-color-on-primary-container);
}

.tool-pattern-content__actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.tool-pattern-content__actions .tool-pattern-content__action[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

/*
 * 调研完成卡 · C Quiet
 * 权威视觉：
 *   docs/design/2026-08-05-tool-pattern-summary-card-c-quiet.html
 *   docs/design/2026-08-05-tool-pattern-summary-card-c-quiet-themes.html
 * 仅 summary_card；不波及 article / before_after / data_dashboard。
 */
.tool-pattern-content--summary-card {
  margin-top: 12px;
}

.tool-pattern-summary-card {
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 16px;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ds-color-on-surface) 4%, transparent),
    0 10px 28px color-mix(in srgb, var(--ds-color-on-surface) 6%, transparent);
  color: var(--ds-color-on-surface);
  overflow: hidden;
}

[data-theme="dark"] .tool-pattern-summary-card {
  background: var(--ds-color-surface-container-low);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--ds-color-shadow) 56%, transparent);
}

.tool-pattern-summary-card__head {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 16px 20px 0;
}

.tool-pattern-summary-card__kicker {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.tool-pattern-summary-card__status {
  color: #16a34a;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

[data-theme="dark"] .tool-pattern-summary-card__status {
  color: #34d399;
}

.tool-pattern-summary-card__body {
  padding: 14px 20px 4px;
}

.tool-pattern-summary-card__title {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
  margin: 0;
}

.tool-pattern-summary-card__summary {
  color: var(--ds-color-on-surface-variant);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.65;
  margin: 10px 0 0;
}

.tool-pattern-summary-card__finds {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.tool-pattern-summary-card__finds li {
  border-top: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 70%, transparent);
  display: grid;
  gap: 12px;
  grid-template-columns: 52px 1fr;
  padding: 12px 0;
}

.tool-pattern-summary-card__finds li:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 70%, transparent);
}

.tool-pattern-summary-card__find-k {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding-top: 1px;
}

.tool-pattern-summary-card__find-v {
  color: var(--ds-color-on-surface-variant);
  font-size: 13.5px;
  line-height: 1.55;
}

.tool-pattern-summary-card__foot {
  display: grid;
  gap: 14px;
  padding: 16px 20px 18px;
}

.tool-pattern-summary-card__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.tool-pattern-summary-card__actions button,
.tool-pattern-summary-card__actions .tool-pattern-content__action {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  height: 34px;
  letter-spacing: -0.01em;
  padding: 0 14px;
  text-decoration: none;
}

.tool-pattern-summary-card__actions button.tool-pattern-summary-card__btn--primary {
  background: var(--ds-color-on-surface);
  border-color: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.tool-pattern-summary-card__actions button.tool-pattern-summary-card__btn--secondary,
.tool-pattern-summary-card__actions .tool-pattern-content__action.tool-pattern-summary-card__btn--secondary {
  background: transparent;
  border-color: var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
}

.tool-pattern-summary-card__actions button.tool-pattern-summary-card__btn--tertiary,
.tool-pattern-summary-card__actions .tool-pattern-content__action.tool-pattern-summary-card__btn--tertiary {
  background: transparent;
  border: 0;
  color: var(--ds-color-on-surface-variant);
  height: auto;
  padding: 0 6px;
}

.tool-pattern-summary-card__actions button:disabled,
.tool-pattern-summary-card__actions .tool-pattern-content__action[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

.tool-pattern-summary-card__adopt-error {
  color: var(--ds-color-error, #b42318);
  flex-basis: 100%;
  font-size: 12.5px;
  line-height: 1.4;
  margin: 2px 0 0;
}

/* 引用：3 预览 + 全部 N（卡内展开）——对齐 design sources-aggregate HTML */
.tool-pattern-summary-card__sources-row {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.tool-pattern-summary-card__sources-preview {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-width: 0;
}

/* chip：短 label + 硬截断，避免 SEO 长标题把「全部引用」挤换行 */
.tool-pattern-summary-card__sources-preview a,
.tool-pattern-summary-card__sources-preview > span {
  border-bottom: 1px solid transparent;
  color: var(--ds-color-on-surface-variant);
  flex: 0 1 auto;
  font-size: 12px;
  line-height: 1.35;
  max-width: 11em;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-pattern-summary-card__sources-preview a:hover {
  border-bottom-color: var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
}

.tool-pattern-summary-card__sources-more {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  gap: 6px;
  height: 28px;
  letter-spacing: -0.01em;
  padding: 0 10px;
  white-space: nowrap;
}

.tool-pattern-summary-card__sources-more em {
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.tool-pattern-summary-card__sources-more[aria-expanded='true'],
.tool-pattern-summary-card__sources-more:hover {
  border-color: color-mix(in srgb, var(--ds-color-outline-variant) 70%, var(--ds-color-on-surface));
  color: var(--ds-color-on-surface);
}

.tool-pattern-summary-card__sources-panel {
  background: color-mix(in srgb, var(--ds-color-on-surface) 2.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 70%, transparent);
  border-radius: 12px;
  min-width: 0;
  overflow: hidden;
}

.tool-pattern-summary-card__sources-panel-h {
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 70%, transparent);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 12px;
}

.tool-pattern-summary-card__sources-panel-h b {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  min-width: 0;
}

.tool-pattern-summary-card__sources-panel-h span {
  color: var(--ds-color-on-surface-variant);
  flex: 0 0 auto;
  font-family: var(--ds-typeface-code);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tool-pattern-summary-card .tool-pattern-summary-card__sources-list {
  list-style: none;
  margin: 0;
  max-height: 220px;
  overflow: auto;
  padding: 0;
}

/* 双栏：标题域可收缩 + 右侧「打开」固定，防止长标题把动作挤没 */
.tool-pattern-summary-card .tool-pattern-summary-card__sources-list > li {
  align-items: start;
  border-top: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 70%, transparent);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  list-style: none;
  margin: 0;
  padding: 10px 12px;
}

.tool-pattern-summary-card .tool-pattern-summary-card__sources-list > li:first-child {
  border-top: 0;
}

.tool-pattern-summary-card__sources-meta {
  min-width: 0;
  overflow: hidden;
}

.tool-pattern-summary-card__sources-title {
  color: var(--ds-color-on-surface);
  display: -webkit-box;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
}

.tool-pattern-summary-card__sources-host {
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 11.5px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-pattern-summary-card__sources-open {
  color: var(--ds-color-on-surface);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  justify-self: end;
  opacity: 0.72;
  padding-top: 1px;
  text-decoration: none;
  white-space: nowrap;
}

a.tool-pattern-summary-card__sources-open:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tool-pattern-summary-card__sources-open.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

@media (max-width: 640px) {
  .tool-pattern-content { margin-left: 0; }
  .tool-pattern-content__diff-card { grid-template-columns: 1fr; }
  .tool-pattern-content__diff-side + .tool-pattern-content__diff-side {
    border-left: 0;
    border-top: 1px solid var(--ds-color-outline-variant);
  }
}
/* 巨量投放 brief 主 CTA：console no-azure 的实心 ink-on-ink 按钮。
 *
 * 背景：geo/styles/global.css 的暗主题遗留规则 `.ant-btn-default{background:transparent!important}`
 * 会压过组件内联 style.background；又因 antd Modal 是 body 级 portal、逃出 antd-overrides.css 的
 * `.dp-revamp/.account-settings` 反制 scope，内联 ink 填充失效，CTA 在真机渲染成透明底近似纯文字态。
 *
 * 修法：用更高特异度（`.placement-brief-submit.ant-btn`，2 类 > `.ant-btn-default` 1 类）+ !important
 * 强制实心 ink 填充。仅作用于启用态（`:not(:disabled)`），禁用态保留 antd 默认置灰。全局规则，
 * 不依赖 portal 落点。 */
.placement-brief-submit.ant-btn:not(:disabled) {
  background: var(--ds-color-on-surface, ) !important;
  border-color: var(--ds-color-on-surface, ) !important;
  color: var(--ds-color-surface, ) !important;
  font-weight: 700;
}
/* 亮色 hover 压纯黑 + 白字（原行为）；暗色白底 CTA 保持白，文字走 token。 */
.placement-brief-submit.ant-btn:not(:disabled):hover,
.placement-brief-submit.ant-btn:not(:disabled):focus {
  background: #000 !important;
  border-color: #000 !important;
  color: #ffffff !important;
}
[data-theme="dark"] .placement-brief-submit.ant-btn:not(:disabled):hover,
[data-theme="dark"] .placement-brief-submit.ant-btn:not(:disabled):focus {
  background: var(--ds-color-on-surface, ) !important;
  border-color: var(--ds-color-on-surface, ) !important;
  color: var(--ds-color-on-primary, ) !important;
}
._card_1i0d2_1 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-extra-large);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
}

._header_1i0d2_13 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

._mark_1i0d2_19 {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

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

._headerText_1i0d2_30 h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

._headerText_1i0d2_30 p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.5;
}

._group_1i0d2_52 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._label_1i0d2_58 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-color-on-surface-variant);
}

._hint_1i0d2_67 {
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
}

._chips_1i0d2_72 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

._chip_1i0d2_72 {
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  height: 34px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

._chip_1i0d2_72:hover {
  border-color: var(--ds-color-on-surface);
}

._chipOn_1i0d2_96 {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

._check_1i0d2_102 {
  margin-right: 7px;
  font-size: 11px;
}

._customNote_1i0d2_107 {
  margin: 0;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

._rhythm_1i0d2_113 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._rhythmCard_1i0d2_119 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  cursor: pointer;
  text-align: left;
}

._rhythmCard_1i0d2_119:hover {
  border-color: var(--ds-color-on-surface);
}

._rhythmCardOn_1i0d2_135 {
  border-color: var(--ds-color-on-surface);
  box-shadow: inset 0 0 0 1px var(--ds-color-on-surface);
}

._radio_1i0d2_140 {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--ds-color-outline-variant);
  border-radius: 50%;
}

._rhythmCardOn_1i0d2_135 ._radio_1i0d2_140 {
  position: relative;
  border-color: var(--ds-color-on-surface);
}

._rhythmCardOn_1i0d2_135 ._radio_1i0d2_140::after {
  content: '';
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--ds-color-on-surface);
}

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

._rhythmTitle_1i0d2_169 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

._rhythmDesc_1i0d2_177 {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

._recommended_1i0d2_182 {
  padding: 2px 7px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-size: 10px;
  font-weight: 800;
}

._rhythmCount_1i0d2_191 {
  flex-shrink: 0;
  font-family: var(--ds-typeface-code);
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
  font-variant-numeric: tabular-nums;
}

._plan_1i0d2_200 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
}

._planMark_1i0d2_209 {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

._planText_1i0d2_220 {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
}

._mono_1i0d2_226 {
  font-family: var(--ds-typeface-code);
  font-variant-numeric: tabular-nums;
}

._success_1i0d2_231 {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--ds-corner-medium);
  background: color-mix(in srgb, var(--ds-color-surface) 78%, #dbeafe 22%);
  color: var(--ds-color-on-surface);
  font-size: 12.5px;
  line-height: 1.5;
}

._footer_1i0d2_241 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

._footerNote_1i0d2_248 {
  margin: 0;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

._primaryButton_1i0d2_254 {
  flex-shrink: 0;
  min-width: 112px;
  height: 38px;
  padding: 0 18px;
  border: none;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

._primaryButton_1i0d2_254:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  ._card_1i0d2_1 {
    padding: 18px;
  }

  ._header_1i0d2_13 {
    gap: 12px;
  }

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

  ._footer_1i0d2_241 {
    align-items: stretch;
    flex-direction: column;
  }

  ._primaryButton_1i0d2_254 {
    width: 100%;
  }
}
.omb-agent-card {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.omb-agent-copy h2 {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: 0;
}

.omb-agent-copy p {
  margin: 5px 0 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.5;
}

.omb-agent-default-option {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--ds-sys-space-sm);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
}

.omb-agent-default-option input {
  width: 14px;
  height: 14px;
  margin: 1px 0 0;
  accent-color: var(--ds-color-on-surface);
  flex: 0 0 auto;
}

.omb-agent-error {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ds-color-error, );
}

.omb-agent-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ds-sys-space-sm);
}

.omb-agent-btn {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sys-space-xs);
  padding: 7px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  white-space: normal;
  cursor: pointer;
}

.omb-agent-btn:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.omb-agent-btn--ghost {
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.omb-agent-btn--primary {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

@media (max-width: 720px) {
  .omb-agent-actions {
    flex-direction: column-reverse;
  }

  .omb-agent-btn {
    width: 100%;
  }
}
/**
 * 对话流剪辑预览轻卡样式（P1 场景①）。
 * 视觉基准：mclip 主仓 docs/design/2026-06-11-mclip-ui-scenarios.html 场景 01/02
 *   .preview-card / .ab-row / .frame-shot。
 * 浅色 token 与设计稿一一对齐：
 *   --paper #f7f8f4 · --ink #17201d · --muted #62716c · --line #cbd6cf
 *   --accent #0b6f61（改后 / 成功）· --accent-2 #a43f31（失败）
 * 仅覆盖 A/B 试听卡 + 字幕效果图卡两张卡的三态（pending / ready / failed·degraded）。
 */
.clip-card {
  --clip-paper: #f7f8f4;
  --clip-ink: #17201d;
  --clip-muted: #62716c;
  --clip-line: #cbd6cf;
  --clip-accent: #0b6f61;
  --clip-accent-soft: #f0f7f4;
  --clip-danger: #a43f31;
  --clip-warn: #a4632f;

  align-self: flex-start;
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  border: 1.5px solid var(--clip-ink);
  border-radius: 10px;
  background: var(--clip-paper);
  color: var(--clip-ink);
  padding: 12px;
  font-size: 12.5px;
  line-height: 1.5;
}

.clip-card[data-status='failed'] {
  border-color: var(--clip-danger);
}

.clip-card[data-status='degraded'] {
  border-style: dashed;
  border-color: var(--clip-warn);
  background: #fdf9f3;
}

/* ===== 卡头：标题 + 版本号 pill ===== */
.clip-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.clip-card-title {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.2px;
}

.clip-card[data-status='failed'] .clip-card-title {
  color: var(--clip-danger);
}

.clip-card[data-status='degraded'] .clip-card-title {
  color: var(--clip-warn);
}

.clip-card-rev {
  flex: none;
  border: 1px solid var(--clip-line);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--clip-muted);
  background: #fff;
}

/* ===== pending：占位骨架 ===== */
.clip-card-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clip-skeleton-bar {
  display: block;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    #e7ede9 25%,
    #f2f6f3 37%,
    #e7ede9 63%
  );
  background-size: 400% 100%;
  animation: clip-skeleton-shimmer 1.4s ease infinite;
}

.clip-skeleton-block {
  display: block;
  height: 120px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    #e7ede9 25%,
    #f2f6f3 37%,
    #e7ede9 63%
  );
  background-size: 400% 100%;
  animation: clip-skeleton-shimmer 1.4s ease infinite;
}

.clip-skeleton-hint {
  font-size: 11.5px;
  color: var(--clip-muted);
}

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

/* ===== ready (audio A/B)：改前 / 改后 双播放器 ===== */
.clip-ab-players {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.clip-ab-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  background: #fff;
}

.clip-ab-slot > span {
  font-size: 11px;
  font-weight: 850;
  color: var(--clip-muted);
}

.clip-ab-slot--after {
  border-color: var(--clip-accent);
  background: var(--clip-accent-soft);
}

.clip-ab-slot--after > span {
  color: var(--clip-accent);
}

.clip-ab-slot audio {
  width: 100%;
  height: 30px;
}

/* ===== ready (subtitle still)：单帧效果图（深色舞台） ===== */
.clip-still-frame {
  border-radius: 8px;
  overflow: hidden;
  background: #18221f;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clip-still-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ===== ready (timeline)：结构变更后的分镜列表 ===== */
.clip-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clip-timeline-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.clip-timeline-index {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--clip-accent-soft);
  color: var(--clip-accent);
  font-size: 11px;
  font-weight: 850;
}

.clip-timeline-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 750;
}

.clip-timeline-duration {
  color: var(--clip-muted);
  font-size: 11px;
  font-weight: 800;
}

/* ===== ready (asset replace)：原素材 / 新素材对比 ===== */
.clip-asset-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--clip-muted);
  font-size: 11px;
  font-weight: 800;
}

.clip-asset-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.clip-asset-slot {
  min-width: 0;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  padding: 9px;
  background: #fff;
}

.clip-asset-slot--after {
  border-color: var(--clip-accent);
  background: var(--clip-accent-soft);
}

.clip-asset-label {
  display: block;
  margin-bottom: 5px;
  color: var(--clip-muted);
  font-size: 11px;
  font-weight: 850;
}

.clip-asset-slot--after .clip-asset-label {
  color: var(--clip-accent);
}

.clip-asset-slot strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

/* ===== ready (canvas)：画布规格前后对比 ===== */
.clip-canvas-compare {
  display: grid;
  gap: 8px;
}

.clip-canvas-spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  padding: 9px;
  background: #fff;
  font-size: 12px;
}

.clip-canvas-spec-row span {
  color: var(--clip-muted);
  font-weight: 850;
}

.clip-canvas-spec-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clip-canvas-spec-row--after {
  border-color: var(--clip-accent);
  background: var(--clip-accent-soft);
}

/* ===== failed / degraded：固定文案 pill + 出口说明 ===== */
.clip-card-fallback {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ===== edit controls：右侧 agent 可操作控制卡 ===== */
.clip-control-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clip-control-scenes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clip-control-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.clip-control-row.is-selected {
  border-color: var(--clip-accent);
  background: var(--clip-accent-soft);
}

.clip-control-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 750;
}

.clip-control-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.clip-control-field > span {
  color: var(--clip-muted);
  font-size: 11px;
  font-weight: 850;
}

.clip-control-field textarea {
  min-height: 86px;
  resize: vertical;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  padding: 9px;
  background: #fff;
  color: var(--clip-ink);
  font: inherit;
  line-height: 1.55;
}

.clip-control-field input[type='range'] {
  width: 100%;
  accent-color: var(--clip-accent);
}

.clip-control-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.clip-choice-pill {
  border: 1px solid var(--clip-line);
  border-radius: 999px;
  background: #fff;
  color: var(--clip-ink);
  padding: 7px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.clip-choice-pill.is-selected {
  border-color: var(--clip-accent);
  background: var(--clip-accent-soft);
  color: var(--clip-accent);
}

.clip-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  font-weight: 800;
}

.clip-checkbox-row input {
  accent-color: var(--clip-accent);
}

.clip-current-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.clip-current-note span {
  color: var(--clip-muted);
  font-size: 11px;
  font-weight: 850;
}

.clip-current-note strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.clip-asset-candidate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.clip-asset-candidate {
  min-width: 0;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  padding: 7px;
  background: #fff;
  color: var(--clip-ink);
  font: inherit;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.clip-asset-candidate.is-selected {
  border-color: var(--clip-accent);
  background: var(--clip-accent-soft);
}

.clip-asset-candidate img,
.clip-asset-thumb-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: #e7ede9;
  color: var(--clip-muted);
  object-fit: cover;
  font-size: 11px;
}

.clip-asset-candidate span:last-child {
  display: block;
  min-width: 0;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.clip-control-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.clip-btn {
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  background: #fff;
  color: var(--clip-ink);
  padding: 8px 11px;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.clip-btn--primary {
  border-color: var(--clip-ink);
  background: var(--clip-ink);
  color: #fff;
}

.clip-btn:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.clip-pill {
  align-self: flex-start;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 850;
  border: 1px solid currentColor;
}

.clip-pill--failed {
  color: var(--clip-danger);
  background: #f9ebe8;
}

.clip-pill--degraded {
  color: var(--clip-warn);
  background: #fdf3e8;
}

.clip-fallback-text {
  margin: 0;
  font-size: 12px;
  color: var(--clip-ink);
}

/* =====================================================================
   画布节点（重卡）：成片预览 / 时间线 / 出片确认（Task 12，决策 4/5）。
   视觉基准：mclip 主仓 docs/design/2026-06-11-mclip-ui-scenarios.html
     场景 ⑤⑥ .mock-timeline/.tl-seg、⑦⑧ .video-stage/.pc-actions。
   命名空间 .clip-node*，与轻卡的 .clip-card* 不重叠；node 节点不在 .clip-card
   作用域内，故下方 token 落到 :root（轻卡 .clip-card 自带同名局部 token，两套
   互不覆盖：轻卡读局部、节点读 :root）。仅新增、不改动上方轻卡任何样式。
   ===================================================================== */
:root {
  --clip-ink: #1a1a1a;
  --clip-muted: #5c5c5c;
  --clip-line: rgba(0, 0, 0, 0.08);
  --clip-line-2: rgba(0, 0, 0, 0.12);
  --clip-panel: #ffffff;
  --clip-panel-soft: #fafafa;
  --clip-accent: #097fe8;
  --clip-warn: #c23b2c;
  --clip-info: #0066cc;
}

.clip-node {
  width: 680px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--clip-ink);
  padding: 0;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 32px -8px rgba(0, 0, 0, 0.14),
    0 24px 48px -16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.clip-edit-card {
  display: flex;
  flex-direction: column;
  max-height: 620px;
  overflow: hidden;
}

/* hifi：干净标题，无装饰图标 / 分辨率 / fps 堆砌 */
.clip-edit-card--hifi .clip-node-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--clip-line);
}

.clip-node-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.clip-node-title {
  font-weight: 650;
  color: var(--clip-ink);
  font-size: 13.5px;
  letter-spacing: -0.02em;
}

.clip-edit-card--hifi .clip-canvas-spec,
.clip-edit-card--hifi .clip-card-rev {
  display: none;
}

.clip-edit-card--hifi .clip-active-edit-badge {
  margin-left: auto;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  background: #ecfdf3;
  color: #0f7b46;
  border: 1px solid rgba(15, 123, 70, 0.12);
}

.clip-edit-card--hifi .clip-edit-compare {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 4px;
  margin: 0;
  border: none;
  background: transparent;
}

.clip-path-chip {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--clip-line-2);
  background: #fff;
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--clip-muted);
}

.clip-path-chip--on {
  background: var(--clip-ink);
  border-color: var(--clip-ink);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 14px -6px rgba(0, 0, 0, 0.3);
}

.clip-path-arrow {
  color: #8a8a8a;
  font-size: 12px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.clip-timeline-total--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== 成片预览节点：深色舞台 + 内嵌播放器 ===== */
.clip-draft-video {
  display: block;
  width: 100%;
  border-radius: 8px;
  background: #000;
}

/* 剪辑底稿「已出片」结果态：限制竖屏成片高度，避免整卡只剩一张大视频 */
.clip-draft-video--result {
  max-height: 280px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
}

.clip-done-result {
  display: grid;
  gap: 10px;
  padding: 4px 14px 14px;
}

.clip-done-meta {
  font-size: 12px;
  color: var(--clip-muted, #71717a);
  font-weight: 550;
}

.clip-draft-placeholder {
  height: 180px;
  display: grid;
  place-items: center;
  color: #9fb4ac;
  background: #18221f;
  border-radius: 8px;
  font-size: 12px;
}

/* 出片中：成片预览节点描边收紧到 accent，呼应「进行中」语义 */
.clip-draft-preview[data-status='finalizing'] {
  border-color: var(--clip-accent);
}

.clip-draft-preview[data-status='done'] {
  border-color: var(--clip-accent);
}

/* ===== 时间线节点：分镜条 ===== */
.clip-timeline-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.clip-timeline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--clip-panel-soft);
}

.clip-row-index {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #f4f4f5;
  color: var(--clip-ink);
  border: 1px solid var(--clip-line-2);
  font-size: 11px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.clip-edit-card--hifi .clip-scene-row:focus-within,
.clip-edit-card--hifi .clip-scene-row:hover {
  border-color: rgba(0, 0, 0, 0.14);
  background: #fff;
}

.clip-edit-card--hifi .clip-scene-row.is-dirty {
  border-color: rgba(9, 127, 232, 0.35);
  box-shadow: 0 0 0 3px rgba(9, 127, 232, 0.1);
  background: #fbfdff;
}

.clip-row-text-cell,
.clip-row-duration-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.clip-row-apply-btn {
  align-self: flex-start;
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

.clip-edit-history-head {
  font-size: 11px;
  font-weight: 650;
  color: var(--clip-muted, #71717a);
  margin-bottom: 4px;
}

.clip-edit-card--hifi .clip-btn--primary {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 6px 14px -6px rgba(0, 0, 0, 0.35);
}

.clip-edit-card--hifi .clip-btn {
  border-radius: 999px;
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 550;
}

.clip-edit-card--hifi .clip-row-link-btn {
  color: #097fe8;
  font-weight: 600;
}

.clip-edit-card--hifi .clip-scene-table {
  padding: 0 10px 8px;
}

/* ===== 复刻爆款：参考原片 + source-intent 审片面板 ===== */
.hit-imitation-review {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--clip-line);
  border-radius: 10px;
  background: #fbfcfd;
}

.hit-review-header,
.hit-review-section-head,
.hit-review-scene-head,
.hit-review-candidates-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hit-review-header > div,
.hit-review-section-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.hit-review-header strong,
.hit-review-section-head strong {
  color: var(--clip-ink);
  font-size: 12px;
}

.hit-review-header span,
.hit-review-section-head span,
.hit-review-count,
.hit-review-reference-meta {
  color: var(--clip-muted);
  font-size: 10.5px;
}

.hit-review-count {
  flex: none;
  padding: 3px 7px;
  border: 1px solid var(--clip-line-2);
  border-radius: 999px;
  background: #fff;
  font-variant-numeric: tabular-nums;
}

.hit-review-reference {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--clip-line-2);
  border-radius: 9px;
  background: #fff;
}

.hit-review-reference-media {
  min-height: 92px;
  overflow: hidden;
  border-radius: 7px;
  background: #171b19;
}

.hit-review-reference-media video,
.hit-review-reference-media img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}

.hit-review-reference-empty {
  display: grid;
  min-height: 92px;
  place-items: center;
  color: #b7c0bc;
  font-size: 11px;
}

.hit-review-scenes {
  display: grid;
  gap: 8px;
}

.hit-review-scene {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--clip-line-2);
  border-radius: 9px;
  background: #fff;
}

.hit-review-scene.is-missing {
  border-color: #e8b2ad;
  background: #fffafa;
}

.hit-review-scene-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--clip-muted);
  font-size: 10.5px;
}

.hit-review-scene-title strong {
  font-variant-numeric: tabular-nums;
}

.hit-review-scene-index {
  display: inline-grid;
  min-width: 24px;
  height: 21px;
  place-items: center;
  border-radius: 6px;
  background: #f2f4f3;
  color: var(--clip-ink);
  font-size: 10px;
  font-weight: 800;
}

.hit-review-status {
  flex: none;
  color: #0f7b46;
  font-size: 10.5px;
  font-weight: 700;
}

.hit-review-status.is-missing {
  color: #b33f34;
}

.hit-review-scene-grid {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 9px;
}

.hit-review-material-preview {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 76px;
  overflow: hidden;
  border: 1px solid var(--clip-line);
  border-radius: 7px;
  background: #eef4f1;
  color: var(--clip-muted);
  font-size: 9px;
  text-align: center;
}

.hit-review-material-preview img,
.hit-review-material-preview video {
  display: block;
  width: 100%;
  height: 76px;
  object-fit: cover;
}

.hit-review-material-preview small {
  position: absolute;
  right: 2px;
  bottom: 2px;
  left: 2px;
  overflow: hidden;
  padding: 2px 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hit-review-copy-block {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.hit-review-copy-block > div {
  display: grid;
  gap: 3px;
}

.hit-review-label {
  color: var(--clip-muted);
  font-size: 9.5px;
  font-weight: 800;
}

.hit-review-copy-block p {
  margin: 0;
  color: var(--clip-ink);
  font-size: 11px;
  line-height: 1.4;
}

.hit-review-copy-block textarea {
  min-height: 42px;
  resize: vertical;
  border: 1px solid var(--clip-line);
  border-radius: 6px;
  padding: 5px 6px;
  color: var(--clip-ink);
  font: inherit;
  font-size: 11px;
  line-height: 1.35;
}

.hit-review-apply,
.hit-review-link {
  width: fit-content;
  border: 0;
  padding: 0;
  background: transparent;
  color: #097fe8;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
}

.hit-review-error {
  border-left: 3px solid #c74c41;
  padding: 4px 6px;
  background: #fff0ee;
  color: #9e342b;
  font-size: 10.5px;
  line-height: 1.35;
}

.hit-review-candidates {
  display: grid;
  gap: 5px;
}

.hit-review-candidates-head {
  color: var(--clip-muted);
  font-size: 10px;
  font-weight: 800;
}

.hit-review-candidate-list {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 1px;
}

.hit-review-candidate {
  display: inline-flex;
  align-items: center;
  flex: 0 0 148px;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--clip-line);
  border-radius: 7px;
  padding: 4px;
  background: #fff;
  color: var(--clip-ink);
  cursor: pointer;
  text-align: left;
}

.hit-review-candidate.is-selected {
  border-color: rgba(15, 123, 70, 0.45);
  background: #f2fbf6;
}

.hit-review-candidate-thumb {
  display: grid;
  flex: none;
  width: 24px;
  height: 34px;
  place-items: center;
  overflow: hidden;
  border-radius: 4px;
  background: #eef4f1;
  color: var(--clip-muted);
  font-size: 8px;
}

.hit-review-candidate-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hit-review-candidate-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.hit-review-candidate-copy b,
.hit-review-candidate-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hit-review-candidate-copy b {
  font-size: 10px;
}

.hit-review-candidate-copy span {
  color: var(--clip-muted);
  font-size: 9px;
}

.clip-edit-card--hifi .clip-finalize-actions {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--clip-line);
  margin: 0;
}

.clip-row-text {
  flex: 1;
  color: var(--clip-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clip-row-duration {
  flex: none;
  color: var(--clip-muted);
}

.clip-scene-table {
  display: grid;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 430px;
  overflow: auto;
}

.clip-structure-lock-notice {
  border: 1px solid var(--clip-line);
  border-radius: 7px;
  background: #fff8e6;
  color: #795c11;
  font-size: 12px;
  line-height: 1.45;
  padding: 7px 9px;
}

.clip-scene-table-head,
.clip-scene-row {
  display: grid;
  grid-template-columns: 46px 108px minmax(180px, 1fr) 72px 34px;
  align-items: center;
  gap: 8px;
}

.clip-scene-table-head {
  color: var(--clip-muted);
  font-size: 11px;
  font-weight: 800;
  padding: 0 6px;
}

.clip-scene-block {
  display: grid;
  gap: 5px;
}

.clip-scene-row {
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  background: var(--clip-panel-soft);
  padding: 6px;
}

.clip-scene-row .clip-row-index {
  width: 42px;
  height: 24px;
  border-radius: 7px;
  cursor: grab;
  font-weight: 800;
}

.clip-row-material {
  display: grid;
  gap: 4px;
  min-width: 0;
}

/* List thumb: short-video 9:16, click opens top dock preview */
.clip-row-material-thumb {
  position: relative;
  display: block;
  width: 48px;
  aspect-ratio: 9 / 16;
  padding: 0;
  margin: 0;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  overflow: hidden;
  background: #eef4f1;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.clip-row-material-thumb.is-empty {
  cursor: default;
}

.clip-row-material-thumb.is-active {
  outline: 2px solid var(--ds-color-primary, );
  outline-offset: 1px;
}

.clip-row-material-thumb img,
.clip-row-material-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.clip-row-material-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--clip-muted);
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  padding: 4px;
}

.clip-row-material-dur {
  position: absolute;
  left: 3px;
  bottom: 3px;
  z-index: 1;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.clip-row-material-play {
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 8px;
  padding-left: 1px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.clip-row-material-thumb:hover .clip-row-material-play {
  background: rgba(77, 166, 255, 0.92);
  border-color: transparent;
}

.clip-scene-row.is-previewing {
  border-color: color-mix(in srgb, var(--ds-color-primary, ) 45%, var(--clip-line));
  background: color-mix(in srgb, var(--ds-color-primary, ) 8%, var(--clip-panel-soft));
}

/* Top standalone 9:16 preview above table header */
.clip-material-preview-dock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 12px;
  margin: 0 0 8px;
  border: 1px solid color-mix(in srgb, var(--ds-color-primary, ) 28%, var(--clip-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--ds-color-primary, ) 7%, var(--clip-panel-soft));
}

.clip-material-preview-dock-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--clip-muted);
  line-height: 1.35;
}

.clip-material-preview-dock-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.clip-material-preview-ratio {
  font-size: 9px;
  font-weight: 800;
  color: var(--ds-color-on-primary, );
  background: var(--ds-color-primary-container, );
  border-radius: 4px;
  padding: 1px 5px;
}

/* Player shell: 9:16 stage + controls bar below (controls must not be clipped) */
.clip-material-preview-player {
  width: 156px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--clip-line);
  background: #0a0a0c;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.45);
}

.clip-material-preview-phone {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #000;
  display: grid;
  place-items: center;
}

.clip-material-preview-video,
.clip-material-preview-still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  cursor: pointer;
}

.clip-material-preview-empty {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}

.clip-material-preview-big-play {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  padding: 0;
  padding-left: 3px;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s ease;
}

.clip-material-preview-phone.is-playing .clip-material-preview-big-play {
  opacity: 0;
  pointer-events: none;
}

.clip-material-preview-phone:hover .clip-material-preview-big-play {
  opacity: 1;
  pointer-events: auto;
}

.clip-material-preview-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: #111114;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.clip-material-preview-ctrl-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-family: inherit;
  padding: 0;
  padding-left: 1px;
  flex-shrink: 0;
}

.clip-material-preview-scrub {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.clip-material-preview-scrub > i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--ds-color-primary, );
  border-radius: 2px;
}

.clip-material-preview-time {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.65);
  font-variant-numeric: tabular-nums;
  min-width: 0;
  white-space: nowrap;
  text-align: right;
}

/* legacy empty cell still used elsewhere */
.clip-row-material > video,
.clip-row-material > img {
  width: 100%;
  height: 54px;
  object-fit: cover;
  border: 1px solid var(--clip-line);
  border-radius: 7px;
  background: #eef4f1;
}

.clip-row-link-btn,
.clip-insert-btn {
  border: 1px solid var(--clip-line);
  border-radius: 7px;
  background: #fff;
  color: var(--clip-accent);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 6px;
  cursor: pointer;
}

.clip-row-link-btn:disabled {
  color: var(--clip-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.clip-row-text-cell {
  position: relative;
  min-width: 0;
}

.clip-row-text-input {
  min-width: 0;
  height: 74px;
  resize: none;
  border: 1px solid var(--clip-line);
  border-radius: 7px;
  padding: 6px 8px;
  background: #fff;
  color: var(--clip-ink);
  font-size: 12px;
  line-height: 1.45;
}

.clip-row-text-input:disabled {
  opacity: 0.55;
  cursor: wait;
}

.clip-row-text-adapting {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--clip-muted);
  font-size: 12px;
  font-weight: 650;
  pointer-events: none;
}

.clip-row-text-adapting-spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(9, 127, 232, 0.25);
  border-top-color: var(--clip-accent, #097fe8);
  animation: clip-text-adapt-spin 0.7s linear infinite;
}

@keyframes clip-text-adapt-spin {
  to { transform: rotate(360deg); }
}

.clip-row-duration-input {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--clip-muted);
  font-size: 11px;
  font-weight: 800;
}

.clip-row-duration-input input {
  width: 52px;
  border: 1px solid var(--clip-line);
  border-radius: 7px;
  padding: 5px 4px;
  background: #fff;
  color: var(--clip-ink);
  font-size: 12px;
  font-weight: 800;
}

.clip-row-duration-input input:disabled {
  color: var(--clip-muted);
  cursor: not-allowed;
  opacity: 0.65;
}

.clip-row-delete {
  width: 26px;
  height: 26px;
  border: 1px solid var(--clip-line);
  border-radius: 50%;
  background: #fff;
  color: var(--clip-muted);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.clip-row-delete:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.clip-scene-insert {
  display: flex;
  justify-content: center;
}

.clip-insert-btn {
  min-width: 104px;
  border-style: dashed;
}

.clip-scene-insert-editor {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 64px 74px;
  gap: 6px;
  width: calc(100% - 48px);
  border: 1px dashed var(--clip-line);
  border-radius: 8px;
  padding: 6px;
  background: #fff;
}

.clip-scene-insert-editor input {
  min-width: 0;
  border: 1px solid var(--clip-line);
  border-radius: 7px;
  padding: 5px 7px;
  font-size: 12px;
}

.clip-timeline-total {
  margin-top: 8px;
  font-size: 12px;
  color: var(--clip-muted);
  text-align: right;
}

.clip-edit-last-change {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
  color: var(--clip-accent);
  font-size: 12px;
  font-weight: 700;
}

.clip-edit-history {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  max-height: 108px;
  overflow: auto;
  padding-right: 2px;
}

.clip-edit-history-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
  color: var(--clip-ink);
  font-size: 12px;
  font-weight: 700;
}

.clip-edit-history-row span:last-child {
  color: var(--clip-muted);
  font-weight: 800;
}

.clip-active-edit-badge {
  margin-left: auto;
  border: 1px solid rgba(15, 123, 70, 0.12);
  border-radius: 999px;
  padding: 1px 8px;
  background: #ecfdf3;
  color: #0f7b46;
  font-size: 11px;
  font-weight: 600;
}

.clip-edit-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
}

.clip-edit-compare span {
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
  text-align: center;
}

.clip-edit-compare span[data-testid='clip-compare-edge'] {
  border: 0;
  padding: 0;
  color: var(--clip-muted);
  background: transparent;
}

.clip-edit-compare span[data-testid='clip-pending-new-video-node'],
.clip-edit-compare span[data-testid='clip-finalized-new-video-node'] {
  border-color: var(--clip-accent);
  background: var(--clip-panel-soft);
  color: var(--clip-accent);
}

/* ===== 出片确认卡：四态（confirm / finalizing / done / failed） ===== */
.clip-finalize-summary p {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--clip-ink);
}

.clip-finalize-error {
  margin: 8px 0;
  font-size: 12px;
  color: var(--clip-warn);
  line-height: 1.5;
}

.clip-finalize-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.clip-btn {
  flex: 1;
  border: 1px solid var(--clip-ink);
  border-radius: 8px;
  background: var(--clip-panel);
  color: var(--clip-ink);
  font-size: 13px;
  padding: 7px 0;
  cursor: pointer;
}

.clip-btn--primary {
  background: var(--clip-accent);
  border-color: var(--clip-accent);
  color: #fff;
}

.clip-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 四态描边：confirm 黑框待确认 / finalizing accent 进行中 / done 成功 / failed 警示 */
.clip-finalize-card[data-phase='finalizing'] { border-color: var(--clip-accent); }
.clip-finalize-card[data-phase='done'] { border-color: var(--clip-accent); }
.clip-finalize-card[data-phase='failed'] { border-color: var(--clip-warn); }

/* ===== 画布内编辑意图卡：源视频 -> 编辑底稿旁的当前操作卡 ===== */
.clip-editing-intent-card {
  width: 560px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  border-color: var(--clip-info);
  box-shadow: 4px 4px 0 rgba(36, 82, 122, 0.14);
}

.clip-editing-intent-card[data-phase='failed'] {
  border-color: var(--clip-warn);
}

.clip-intent-target {
  margin-left: auto;
  border: 1px solid var(--clip-line);
  border-radius: 999px;
  padding: 1px 8px;
  background: #fff;
  color: var(--clip-muted);
  font-size: 11px;
  font-weight: 800;
}

.clip-intent-body {
  flex: 1;
  margin-top: 10px;
  min-height: 0;
}

.clip-intent-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.clip-intent-timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-top: 2px;
}

.clip-intent-timeline span {
  display: grid;
  place-items: center;
  height: 26px;
  border: 1px solid var(--clip-line);
  border-radius: 7px;
  background: #fff;
  color: var(--clip-ink);
  font-size: 11px;
  font-weight: 850;
}

.clip-intent-timeline .is-selected,
.clip-intent-timeline .is-moved {
  border-color: var(--clip-info);
  background: #eef6ff;
  color: var(--clip-info);
}

.clip-intent-timeline .is-removed {
  border-color: var(--clip-warn);
  background: #f9ebe8;
  color: var(--clip-warn);
  text-decoration: line-through;
}

.clip-intent-frame-pair,
.clip-intent-asset-pair,
.clip-intent-ratios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.clip-intent-style-stack {
  display: grid;
  gap: 8px;
}

.clip-intent-panels > .clip-intent-timeline,
.clip-intent-asset-pair > .clip-intent-timeline {
  grid-column: 1 / -1;
}

.clip-intent-video-panel {
  min-width: 0;
}

.clip-intent-video-panel strong {
  display: block;
  margin-top: 6px;
  color: var(--clip-muted);
  font-size: 11px;
  font-weight: 850;
}

.clip-intent-video-frame {
  position: relative;
  height: 138px;
  overflow: hidden;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), transparent 42%),
    linear-gradient(135deg, #d4dfda, #617f72);
}

.clip-intent-video-panel.is-after .clip-intent-video-frame {
  border-color: var(--clip-accent);
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), transparent 42%),
    linear-gradient(135deg, #d7e1db, #6b9586);
}

.clip-intent-video-frame::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(255, 255, 255, .82);
  border-radius: 7px;
}

.clip-intent-video-frame > span:first-child {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  color: rgba(255, 255, 255, .86);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .42);
}

.clip-intent-video-frame p {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  margin: 0;
  border-radius: 7px;
  padding: 7px 8px;
  background: rgba(18, 28, 24, .72);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.clip-intent-subtitle-line {
  position: absolute;
  left: 14px;
  right: 14px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}

.clip-intent-subtitle-line.is-mid { top: 60px; }
.clip-intent-subtitle-line.is-low { bottom: 18px; }

.clip-intent-audio-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.clip-intent-audio-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.clip-intent-audio-card.is-after {
  border-color: var(--clip-accent);
  background: var(--clip-panel-soft);
}

.clip-intent-audio-card strong {
  color: var(--clip-ink);
  font-size: 12px;
  font-weight: 900;
}

.clip-intent-audio-card div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
}

.clip-intent-audio-card b {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--clip-info), var(--clip-accent));
}

.clip-intent-audio-card em {
  color: var(--clip-muted);
  font-style: normal;
  text-align: right;
}

.clip-intent-audio-compare p {
  grid-column: 1 / -1;
}

.clip-intent-audio-compare p,
.clip-intent-note {
  margin: 0;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  color: var(--clip-muted);
  font-size: 12px;
  line-height: 1.45;
}

.clip-intent-diff-stack,
.clip-intent-trim-compare,
.clip-intent-canvas-compare {
  display: grid;
  gap: 8px;
}

.clip-intent-trim-bar {
  position: relative;
  height: 26px;
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ede9;
}

.clip-intent-trim-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 72%;
  border-right: 2px solid var(--clip-accent);
  background: var(--clip-panel-soft);
}

.clip-intent-trim-bar span.is-before {
  width: 100%;
  border-right: 0;
  background: #dfe7e2;
}

.clip-intent-ratios {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

.clip-intent-ratios span {
  display: grid;
  place-items: center;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  background: #fff;
  color: var(--clip-muted);
  font-size: 12px;
  font-weight: 850;
}

.clip-intent-ratios .r-916 { height: 112px; }
.clip-intent-ratios .r-11 { height: 82px; }
.clip-intent-ratios .r-169 {
  height: 56px;
  border-color: var(--clip-accent);
  background: var(--clip-panel-soft);
  color: var(--clip-accent);
}

.clip-intent-canvas-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.clip-intent-canvas-specs span {
  min-width: 0;
  overflow-wrap: anywhere;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  color: var(--clip-muted);
  font-size: 12px;
  font-weight: 850;
}

.clip-intent-canvas-specs span:last-child {
  border-color: var(--clip-accent);
  background: var(--clip-panel-soft);
  color: var(--clip-accent);
}

.clip-intent-finalize-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  height: 148px;
}

.clip-intent-finalize-flow span {
  display: grid;
  place-items: center;
  min-height: 58px;
  border: 1px solid var(--clip-line);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.clip-intent-finalize-flow span:last-child {
  border-color: var(--clip-accent);
  background: var(--clip-panel-soft);
  color: var(--clip-accent);
}

.clip-intent-finalize-flow b {
  color: var(--clip-muted);
}

.clip-intent-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  color: var(--clip-muted);
  font-size: 12px;
  font-weight: 800;
}
._card_1nto9_1 {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
}

._head_1nto9_12,
._foot_1nto9_13 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

._actions_1nto9_21 {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
}

._badge_1nto9_28 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
}

._card_1nto9_1 h4 {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

._reason_1nto9_46,
._status_1nto9_47,
._meta_1nto9_48 {
  margin: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.6;
}

._evidenceList_1nto9_55 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

._evidenceList_1nto9_55 span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  line-height: 1.4;
}

._foot_1nto9_13 {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

._meta_1nto9_48 {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}

._undo_1nto9_84,
._detail_1nto9_85 {
  flex-shrink: 0;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
}

._undo_1nto9_84 {
  min-height: 30px;
  padding: 0 12px;
}

._detail_1nto9_85 {
  min-height: 28px;
  padding: 0 10px;
}

._undo_1nto9_84:hover,
._detail_1nto9_85:hover {
  border-color: var(--ds-color-on-surface);
}
._card_1md4o_1 {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
}

._head_1md4o_12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

._badge_1md4o_20 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 800;
}

._status_1md4o_30,
._section_1md4o_31 p,
._publishItem_1md4o_32 small,
._publishItem_1md4o_32 em {
  margin: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.55;
}

._section_1md4o_31 {
  display: grid;
  gap: 7px;
  min-width: 0;
}

._section_1md4o_31 h4 {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 800;
}

._roleList_1md4o_53,
._itemList_1md4o_54 {
  display: grid;
  gap: 8px;
}

._roleItem_1md4o_59,
._publishItem_1md4o_32 {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
}

._roleMain_1md4o_69 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

._roleMain_1md4o_69 strong,
._publishItem_1md4o_32 strong {
  overflow-wrap: anywhere;
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 800;
}

._roleMain_1md4o_69 span,
._suggestion_1md4o_86 {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

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

._roleEvidence_1md4o_91 span {
  padding: 2px 6px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  line-height: 1.4;
}

._publishItem_1md4o_32 {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  cursor: pointer;
}

._publishItem_1md4o_32 input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--ds-color-on-surface);
}

._publishItem_1md4o_32 > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

._publishItem_1md4o_32 em {
  font-style: normal;
}

._evidenceList_1md4o_130 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

._evidenceList_1md4o_130 span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  line-height: 1.4;
}

._confirm_1md4o_149 {
  min-height: 34px;
  border: 1px solid var(--ds-color-on-surface);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
}

._confirm_1md4o_149:disabled {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  cursor: not-allowed;
}
.locate-card {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 7px;
  padding: 12px 14px;
  color: var(--ds-color-on-surface, );
  background: var(--ds-color-surface, );
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large, );
  font-family: var(--ds-typeface-plain);
}

.locate-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.locate-card__header h3 {
  min-width: 0;
  margin: 0;
  color: var(--ds-color-on-surface, );
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.45;
}

.candidate-select-card__candidate {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  margin-bottom: 6px;
  padding: 8px 10px;
  background: var(--ds-color-surface, );
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium, );
}

.candidate-select-card__candidate:last-child {
  margin-bottom: 0;
}

.candidate-select-card__candidate--picked {
  border-color: var(--ds-color-on-surface, );
  box-shadow: 0 0 0 1px var(--ds-color-on-surface, );
}

.candidate-select-card__thumb {
  width: 44px;
  height: 30px;
  flex: 0 0 44px;
  background: var(--ds-color-surface-container-high, );
  border-radius: 5px;
}

.candidate-select-card__meta {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
}

.candidate-select-card__meta strong {
  overflow: hidden;
  color: var(--ds-color-on-surface, );
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.candidate-select-card__meta small {
  overflow: visible;
  color: var(--ds-color-outline, );
  font-family: var(--ds-typeface-code, "Geist Mono", ui-monospace, monospace);
  font-size: 11px;
  line-height: 1.45;
  text-overflow: clip;
  white-space: normal;
}

.candidate-select-card__pick {
  flex: 0 0 auto;
  padding: 3px 11px;
  color: var(--ds-color-on-surface-variant, );
  background: var(--ds-color-surface, );
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full, );
  font: inherit;
  font-size: 11.5px;
  line-height: 1.45;
  cursor: pointer;
}

.candidate-select-card__pick:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.candidate-select-card__candidate--picked .candidate-select-card__pick {
  color: var(--ds-color-on-primary, );
  font-weight: 600;
  background: var(--ds-color-on-surface, );
  border-color: var(--ds-color-on-surface, );
}

.failure-explain-card__badge {
  margin-left: auto;
  padding: 1px 8px;
  color: var(--ds-color-error, );
  border: 1px solid var(--ds-color-error, );
  border-radius: var(--ds-corner-full, );
  font-family: var(--ds-typeface-code, "Geist Mono", ui-monospace, monospace);
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
}

.failure-explain-card__details {
  margin: 0;
}

.failure-explain-card__details > div {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.5;
}

.failure-explain-card__details dt {
  min-width: 40px;
  flex: 0 0 40px;
  color: var(--ds-color-outline, );
}

.failure-explain-card__details dd {
  margin: 0;
  color: var(--ds-color-on-surface, );
}
.publish-failure-card {
  display: grid;
  gap: var(--ds-sys-space-lg);
  padding: var(--ds-sys-space-lg);
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
}

.publish-failure-card__header {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-md);
}

.publish-failure-card__header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.publish-failure-card__badge {
  padding: 3px 8px;
  color: var(--ds-color-error);
  font-size: 12px;
  font-weight: 600;
  background: color-mix(in srgb, var(--ds-color-error) 8%, white);
  border-radius: var(--ds-corner-full);
}

.publish-failure-card__details {
  display: grid;
  gap: var(--ds-sys-space-md);
  margin: 0;
}

.publish-failure-card__details > div {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--ds-sys-space-sm);
}

.publish-failure-card__details dt {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 600;
}

.publish-failure-card__details dd {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 13px;
  line-height: 1.55;
}

.publish-failure-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sys-space-sm);
}

.publish-failure-card__actions button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  cursor: pointer;
}

.publish-failure-card__actions button.is-primary {
  color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  border-color: var(--ds-color-surface);
}

.publish-failure-card__actions button:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}
.command-confirm-card {
  background: var(--ds-color-surface-container-low, );
  border: 1px solid var(--ds-color-outline-variant, );
  border-radius: 12px;
  color: var(--ds-color-on-surface, );
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.command-confirm-card.risk-hi {
  border-color: color-mix(in srgb, var(--ds-color-error, ) 35%, var(--ds-color-on-surface-variant));
}

/* 发布确认卡与「发布作品」表单卡同边框（outline-variant），不套用红色风险描边 */
.command-confirm-card.risk-hi.command-confirm-card--publish-compact {
  border-color: var(--ds-color-outline-variant, );
}

.command-confirm-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.command-confirm-card__header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.command-confirm-card__badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-error, );
  background: color-mix(in srgb, var(--ds-color-error, ) 10%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
}

.command-confirm-card__publish-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ds-color-on-surface-variant, );
  font-size: 12px;
}

.command-confirm-card__publish-time strong {
  color: var(--ds-color-on-surface, );
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.command-confirm-card__body {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.command-confirm-card__body > div {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 8px;
  font-size: 13px;
}

.command-confirm-card__body dt {
  color: var(--ds-color-on-surface-variant, );
}

.command-confirm-card__body dd {
  margin: 0;
}

/* 确认后原地转「发布中」进度 */
.command-confirm-card__publish-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 2px;
}

.command-confirm-card__progress-ready {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-color-on-surface, );
}

.command-confirm-card__publish-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.command-confirm-card__publish-stage {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ds-color-on-surface-variant, );
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--ds-color-outline-variant, );
}

.command-confirm-card__publish-stage.is-current {
  color: var(--ds-color-primary, );
  border-color: var(--ds-color-primary, );
  background: color-mix(in srgb, var(--ds-color-primary, ) 10%, transparent);
  font-weight: 600;
}

.command-confirm-card__publish-stage.is-done {
  color: var(--ds-color-on-surface-variant, );
  text-decoration: line-through;
  opacity: 0.7;
}

.command-confirm-card__body strong {
  display: block;
}

.command-confirm-card__body small {
  display: block;
  margin-top: 2px;
  color: var(--ds-color-on-surface-variant, );
  font-size: 12px;
}

.command-confirm-card__softref ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--ds-color-on-surface-variant);
}

.command-confirm-card__softref-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant, );
}

.command-confirm-card__footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.command-confirm-card__primary,
.command-confirm-card__ghost {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}

.command-confirm-card__primary {
  background: var(--ds-color-error, );
  color: #fff;
}

.command-confirm-card__ghost {
  background: transparent;
  border-color: var(--ds-color-outline-variant, );
  color: var(--ds-color-on-surface, );
}

.command-confirm-card__accounts,
.command-confirm-card__tags,
.command-confirm-card__tag-entry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sys-space-sm, 8px);
}

.command-confirm-card__account,
.command-confirm-card__tag,
.command-confirm-card__tag-entry button {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full, );
  background: var(--ds-color-surface, );
  color: var(--ds-color-on-surface, );
  font-size: 12px;
  padding: 4px 9px;
}

.command-confirm-card__account.is-selected {
  background: var(--ds-color-on-surface, );
  border-color: var(--ds-color-on-surface, );
  color: var(--ds-color-surface, );
}

.command-confirm-card__account:disabled {
  color: var(--ds-color-outline, );
  cursor: not-allowed;
}

.command-confirm-card__caption,
.command-confirm-card__tag-entry input {
  width: 100%;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small, );
  background: var(--ds-color-surface, );
  color: var(--ds-color-on-surface, );
  font: inherit;
  padding: 8px 10px;
}

.command-confirm-card__caption {
  min-height: 72px;
  resize: vertical;
}

.command-confirm-card__tag button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  margin-left: 4px;
  padding: 0;
}

.command-confirm-card__tag-entry {
  margin-top: 8px;
}

.command-confirm-card__tag-entry input {
  flex: 1 1 120px;
}

.command-confirm-card__tag-entry button {
  cursor: pointer;
}

.command-confirm-card__primary--publish {
  background: var(--ds-color-on-surface, );
  color: var(--ds-color-surface, );
}

.command-confirm-card__primary--material-change {
  background: var(--ds-color-on-surface, );
  color: var(--ds-color-surface, );
}

.command-confirm-card__primary:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* Path A compact publish confirm: collapsible work pack, accounts always exposed */
.command-confirm-card--publish-compact {
  gap: 10px;
}

.command-confirm-card__workpack {
  border: 1px solid var(--ds-color-outline-variant, );
  border-radius: 10px;
  overflow: hidden;
  background: var(--ds-color-surface, );
}

.command-confirm-card__workline {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr auto 16px;
  gap: 8px;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}

.command-confirm-card__workpack.is-open .command-confirm-card__work-chev {
  transform: rotate(180deg);
}

.command-confirm-card__work-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #d4d4d8, #a1a1aa);
  overflow: hidden;
  display: inline-flex;
}

.command-confirm-card__work-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.command-confirm-card__work-title {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-confirm-card__work-dur {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant, );
  font-variant-numeric: tabular-nums;
}

.command-confirm-card__work-chev {
  display: inline-flex;
  color: var(--ds-color-on-surface-variant, );
  transition: transform 0.15s ease;
}

.command-confirm-card__workcue {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-top: 1px solid var(--ds-color-outline-variant, );
  background: color-mix(in srgb, var(--ds-color-surface-variant, ) 80%, transparent);
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}

.command-confirm-card__cue-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-color-on-surface-variant, );
  flex-shrink: 0;
}

.command-confirm-card__cue-label {
  flex: 1;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant, );
}

.command-confirm-card__cue-label b {
  color: var(--ds-color-on-surface, );
  font-weight: 600;
}

.command-confirm-card__cue-action {
  font-size: 12px;
  color: var(--ds-color-on-surface, );
  font-weight: 600;
}

.command-confirm-card__workdetail {
  border-top: 1px solid var(--ds-color-outline-variant, );
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.command-confirm-card__workmeta {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant, );
}

.command-confirm-card__flabel {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant, );
  font-weight: 500;
}

.command-confirm-card__collapse-bar {
  margin-top: 4px;
  border: 0;
  background: transparent;
  color: var(--ds-color-on-surface-variant, );
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
}

.command-confirm-card__accounts-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.command-confirm-card__slabel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant, );
  font-weight: 500;
}

.command-confirm-card__cnt {
  font-variant-numeric: tabular-nums;
  color: var(--ds-color-outline, );
}
.monitor-config-draft-card { border: 1px solid var(--ds-color-outline-variant, ); border-radius: 12px; background: #fff; color: var(--ds-color-on-surface); overflow: hidden; }
.monitor-config-draft-card > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--ds-color-outline-variant, ); }
.monitor-config-draft-card h3 { margin: 0; font-size: 15px; }
.monitor-config-draft-card header span { font-size: 12px; font-weight: 600; }
.monitor-config-draft-card.risk-ok header span { color: #18794e; }
.monitor-config-draft-card__meta { margin: 0; padding: 8px 16px; color: #687386; font: 11px/1.4 "Geist Mono", monospace; background: #f7f8fa; }
.monitor-config-draft-card dl { margin: 0; padding: 12px 16px; }
.monitor-config-draft-card dl div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 5px 0; }
.monitor-config-draft-card dt { color: #687386; }
.monitor-config-draft-card dd { margin: 0; font-weight: 600; }
.monitor-config-draft-card__impact { display: grid; gap: 5px; margin: 0 16px 12px; padding: 12px; border-left: 4px solid #d24b4b; background: #fff6f5; }
.monitor-config-draft-card footer { display: flex; gap: 8px; padding: 0 16px 16px; }
.monitor-config-draft-card button { border: 0; border-radius: 8px; padding: 8px 14px; background: #172033; color: #fff; cursor: pointer; }
.monitor-config-draft-card button.ghost { border: 1px solid #d9dee7; background: #fff; color: #172033; }
/*
 * agent-landing U1 gap-collect cards: AskOptionChips + ProfileConfirmCard.
 * Visual parity target: U1-gap-collect prototype. Tokens from global-design.
 * Classes namespaced with agp- to avoid global collisions.
 */

/* ---- AskOptionChips ------------------------------------------------------ */
.agp-ask {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ds-color-on-surface);
  font-size: 14px;
  line-height: 1.6;
}
.agp-ask__q {
  margin: 0;
  color: var(--ds-color-on-surface);
}
.agp-ask__q b {
  font-weight: 700;
}
.agp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.agp-chips--decision {
  display: grid;
  width: 100%;
  gap: 8px;
}
.agp-chip {
  font-size: 13px;
  padding: 8px 16px;
  border-radius: var(--ds-corner-full);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.agp-chip:hover {
  background: var(--ds-color-surface-container);
}
.agp-chip--decision {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
  border-radius: var(--ds-corner-medium);
  padding: 13px 14px;
  background: var(--ds-color-surface-container-low);
  text-align: left;
}
.agp-chip--decision:hover {
  border-color: rgba(77, 166, 255, 0.45);
  background: var(--ds-color-primary-container);
}
.agp-chip__content {
  display: block;
  min-width: 0;
}
.agp-chip__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
}
.agp-chip__description,
.agp-chip__reason {
  display: block;
  margin-top: 3px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11.5px;
  line-height: 1.5;
}
.agp-chip__reason {
  color: var(--ds-color-on-surface-variant);
}
.agp-chip__recommended {
  color: var(--ds-color-primary);
  font-size: 11px;
  font-weight: 600;
}
.agp-chip__action {
  color: var(--ds-color-primary);
  font-size: 11px;
  white-space: nowrap;
}
.agp-chip--free {
  border-style: dashed;
  color: var(--ds-color-on-surface-variant);
}
.agp-ask__free {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agp-ask__free-input {
  width: 100%;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 8px 10px;
  font: 400 13px/1.6 system-ui, sans-serif;
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
  resize: vertical;
  min-height: 44px;
}
.agp-ask__free-input:focus {
  outline: none;
  border-color: var(--ds-color-on-surface);
}
.agp-ask__answered {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 12.5px;
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 6px 12px;
}
.agp-ask__answered-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-color-secondary);
  flex: none;
}

/* ---- ProfileConfirmCard -------------------------------------------------- */
.agp-confirm {
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  box-shadow: var(--ds-elevation-1);
  padding: 16px;
  color: var(--ds-color-on-surface);
  font-size: 14px;
  line-height: 1.6;
}
.agp-confirm__k {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 10.5px/1 var(--ds-typeface-code);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-color-on-surface-variant);
  margin-bottom: 10px;
}
.agp-confirm__ic {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--ds-color-primary);
}
.agp-confirm__ic--done {
  background: var(--ds-color-secondary);
}
.agp-block {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  padding: 12px 14px;
  margin-top: 8px;
}
.agp-block__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.agp-block__title {
  font-weight: 700;
  font-size: 13px;
  color: var(--ds-color-on-surface);
}
.agp-block__src {
  font: 500 10.5px/1 var(--ds-typeface-code);
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  padding: 3px 7px;
  border-radius: 5px;
}
.agp-block__edit {
  margin-left: auto;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.agp-block__body {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
  overflow-wrap: anywhere;
}
.agp-block--taboo {
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.04);
}
.agp-block--taboo .agp-block__title {
  color: var(--ds-color-error);
}
.agp-block--editing {
  border-color: var(--ds-color-on-surface);
  border-width: 1.5px;
}
.agp-block__ta {
  width: 100%;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 8px 10px;
  font: 400 13px/1.6 system-ui, sans-serif;
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
  margin-top: 8px;
  resize: vertical;
  min-height: 52px;
}
.agp-block__ta:focus {
  outline: none;
}
.agp-btnrow {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}
.agp-btn {
  font-size: 13px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: var(--ds-corner-medium);
  border: none;
  cursor: pointer;
}
.agp-btn--sm {
  padding: 6px 14px;
}
.agp-btn--ink {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}
.agp-btn--ghost {
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
}
.agp-confirm__receipt {
  margin: 0;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
}
.agp-confirm__link {
  text-underline-offset: 3px;
  cursor: pointer;
  text-decoration: underline;
}
/* CandidatePickerCard — visual 1:1 with ui-preview §04, ds tokens only */

.cpc {
  border: 1px solid var(--ds-color-outline-variant);
  /* preview §04 uses 12px; closest token is large=14px */
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
  overflow: hidden;
  width: 100%;
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
  text-align: left;
}

.cpc__head {
  padding: 12px var(--ds-sys-space-lg) 10px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.cpc__title {
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ds-color-on-surface);
}

.cpc__context {
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  margin-top: 2px;
  line-height: 1.45;
}

.cpc__source {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-extra-small);
  padding: 0 5px;
  color: var(--ds-color-on-surface-variant);
  vertical-align: 1px;
}

.cpc__list {
  display: flex;
  flex-direction: column;
}

/* listitem wrapper: keep a11y list semantics without stealing button role */
.cpc__listitem {
  width: 100%;
}

.cpc__cand {
  display: flex;
  gap: 12px;
  padding: 11px var(--ds-sys-space-lg);
  align-items: flex-start;
  width: 100%;
  border: none;
  border-top: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.cpc__list .cpc__listitem:first-child .cpc__cand {
  border-top: none;
}

.cpc__cand:hover {
  background: var(--ds-color-surface-container-low);
}

.cpc__cand:focus-visible {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: -2px;
  z-index: 1;
}

.cpc__cand--recommended {
  background: var(--ds-color-surface-container-low);
}

.cpc__cand--recommended:hover {
  background: var(--ds-color-surface-container);
}

.cpc__rank {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 1px 6px;
  flex: none;
  margin-top: 1px;
  line-height: 1.4;
}

.cpc__rank--recommended {
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  border-color: var(--ds-color-primary);
}

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

.cpc__cand-title {
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.4;
}

.cpc__cand-name {
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

.cpc__cand-sub {
  font-style: normal;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
}

.cpc__badge {
  font-size: 10px;
  font-weight: 600;
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  border-radius: var(--ds-corner-extra-small);
  padding: 0 5px;
  line-height: 1.5;
}

.cpc__reason {
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.45;
}

.cpc__metrics {
  flex: none;
  text-align: right;
  font-family: var(--ds-typeface-code);
  font-size: 10.5px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;
}

.cpc__metric-line {
  display: block;
}

.cpc__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-sm);
  padding: 9px var(--ds-sys-space-lg);
  border-top: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container-low);
}

.cpc__hint {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

.cpc__refresh {
  font-size: 12px;
  font-family: inherit;
  border: 1px solid var(--ds-color-primary);
  background: var(--ds-color-surface);
  border-radius: var(--ds-corner-full);
  padding: 4px 14px;
  color: var(--ds-color-on-surface);
  cursor: pointer;
  line-height: 1.4;
  flex: none;
}

.cpc__refresh:hover {
  background: var(--ds-color-surface-container-low);
}

.cpc__refresh:focus-visible {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: 2px;
}

/* answered / collapsed one-line summary */
.cpc--answered {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
  padding: 10px var(--ds-sys-space-lg);
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 12.5px;
  width: 100%;
  overflow: hidden;
}

.cpc__answered-label {
  font-weight: 700;
  flex: none;
  color: var(--ds-color-on-surface);
}

.cpc__answered-value {
  color: var(--ds-color-on-surface);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* unsupported route — fail-closed non-interactive */
.cpc--unsupported {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface-container-low);
  padding: var(--ds-sys-space-md) var(--ds-sys-space-lg);
}

.cpc__unsupported-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

.cpc__unsupported-body {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}
/*
 * agent-landing U2 · UploadConfirmCard.
 * Visual parity target: U2-ingest-triage.html §2 四态.
 * Tokens: --ds-* from global-design. Namespace: ucc-
 */

.ucc {
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  box-shadow: var(--ds-elevation-1);
  padding: 16px;
  color: var(--ds-color-on-surface);
  font-size: 14px;
  line-height: 1.6;
}

.ucc__k {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 10.5px/1 var(--ds-typeface-code);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-color-on-surface-variant);
  margin-bottom: 10px;
}

.ucc__ic {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--ds-color-primary);
  flex: none;
}

.ucc__ic--success {
  background: var(--ds-color-secondary);
}

.ucc__status {
  margin: 0;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
}

.ucc__spin {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--ds-color-primary);
  border-top-color: transparent;
  animation: ucc-spin 1s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}

@keyframes ucc-spin {
  to {
    transform: rotate(360deg);
  }
}

.ucc__prog {
  height: 6px;
  border-radius: 999px;
  background: var(--ds-color-surface-container);
  overflow: hidden;
  margin-top: 10px;
}

.ucc__prog-bar {
  display: block;
  height: 100%;
  background: var(--ds-color-on-surface);
  border-radius: 999px;
  transition: width 0.2s ease;
}

.ucc__files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0;
}

.ucc__files--receipt {
  margin-top: 8px;
}

.ucc__file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 10px;
  background: var(--ds-color-surface);
}

.ucc__fic {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 10px/1 var(--ds-typeface-code);
}

.ucc__fic--img {
  background: #f0fdf4;
  color: #15803d;
}

.ucc__fic--vid {
  background: #eff6ff;
  color: #1d4ed8;
}

.ucc__fic--ppt {
  background: #fff7ed;
  color: #c2410c;
}

.ucc__fic--doc {
  background: #eef2ff;
  color: #4338ca;
}

.ucc__fic--unknown {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
}

.ucc__meta {
  min-width: 0;
  flex: 1;
}

.ucc__fn {
  font-weight: 600;
  font-size: 13px;
  color: var(--ds-color-on-surface);
  overflow-wrap: anywhere;
}

.ucc__fs {
  font: 500 11px/1.5 var(--ds-typeface-code);
  color: var(--ds-color-on-surface-variant);
  overflow-wrap: anywhere;
}

.ucc__ftag {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
  flex: none;
}

.ucc__ftag--reject {
  background: #fef2f2;
  color: var(--ds-color-error);
}

.ucc__ftag--retry {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
  margin-left: auto;
  flex: none;
}

.ucc__ftag--retry:hover {
  background: var(--ds-color-surface-container-high, );
}

.ucc__select {
  margin-left: auto;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  flex: none;
  max-width: 48%;
}

.ucc__btnrow {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

.ucc__btn {
  font-size: 13px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: var(--ds-corner-medium);
  border: none;
  cursor: pointer;
}

.ucc__btn--ink {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.ucc__btn--ghost {
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
}

.ucc__hint {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.ucc__receipt {
  margin: 0;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
}
/*
 * Component-scoped semantic tokens mirror the confirmed U1 authority prototype.
 * Global --ds-* values intentionally remain unchanged because this card's
 * border, status palette, surfaces, and elevation are stricter than the shell.
 */
.pm-readiness-card {
  --pm-readiness-surface: #ffffff;
  --pm-readiness-surface-2: #f3f3f1;
  --pm-readiness-text: #18181b;
  --pm-readiness-muted: #6b7280;
  --pm-readiness-subtle: #a1a1aa;
  --pm-readiness-border: rgba(24, 24, 27, 0.1);
  --pm-readiness-strong: rgba(24, 24, 27, 0.18);
  --pm-readiness-ink: #18181b;
  --pm-readiness-on-ink: #ffffff;
  --pm-readiness-warning: #9a6500;
  --pm-readiness-warning-bg: #fff6dc;
  --pm-readiness-danger: #b42318;
  --pm-readiness-danger-bg: #fff0ed;
  --pm-readiness-info: #175cd3;
  --pm-readiness-info-bg: #eff6ff;
  --pm-readiness-shadow: 0 18px 50px rgba(24, 24, 27, 0.12);

  width: 100%;
  max-width: 680px;
  margin: 18px auto 0;
  padding: 18px;
  border: 1px solid var(--pm-readiness-border);
  border-radius: 14px;
  background: var(--pm-readiness-surface);
  box-shadow: var(--pm-readiness-shadow);
  color: var(--pm-readiness-text);
  font-family: var(--ds-typeface-plain);
}

[data-theme="dark"] .pm-readiness-card {
  --pm-readiness-surface: #29292d;
  --pm-readiness-surface-2: #222226;
  --pm-readiness-text: #f4f4f5;
  --pm-readiness-muted: #c4c4c8;
  --pm-readiness-subtle: #8b8b93;
  --pm-readiness-border: rgba(255, 255, 255, 0.1);
  --pm-readiness-strong: rgba(255, 255, 255, 0.17);
  --pm-readiness-ink: #f4f4f5;
  --pm-readiness-on-ink: #18181b;
  --pm-readiness-warning: #f4c568;
  --pm-readiness-warning-bg: rgba(245, 158, 11, 0.12);
  --pm-readiness-danger: #ff9b94;
  --pm-readiness-danger-bg: rgba(239, 68, 68, 0.12);
  --pm-readiness-info: #86b7ff;
  --pm-readiness-info-bg: rgba(77, 166, 255, 0.12);
  --pm-readiness-shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
}

.pm-readiness-card,
.pm-readiness-card * {
  box-sizing: border-box;
}

.pm-readiness-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.pm-readiness-card__eyebrow {
  color: var(--pm-readiness-muted);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pm-readiness-card__title {
  margin: 5px 0 0;
  color: var(--pm-readiness-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.pm-readiness-card__chip {
  flex: none;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 760;
}

.pm-readiness-card--partial .pm-readiness-card__chip {
  background: var(--pm-readiness-warning-bg);
  color: var(--pm-readiness-warning);
}

.pm-readiness-card--block .pm-readiness-card__chip {
  background: var(--pm-readiness-danger-bg);
  color: var(--pm-readiness-danger);
}

.pm-readiness-card--error .pm-readiness-card__chip {
  background: var(--pm-readiness-info-bg);
  color: var(--pm-readiness-info);
}

.pm-readiness-card__summary {
  margin: 12px 0 0;
  color: var(--pm-readiness-muted);
  font-size: 13px;
  line-height: 1.65;
}

.pm-readiness-card__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 10px;
  margin-top: 15px;
}

.pm-readiness-card__panel {
  padding: 13px;
  border: 1px solid var(--pm-readiness-border);
  border-radius: 10px;
  background: var(--pm-readiness-surface-2);
}

.pm-readiness-card__panel h3 {
  margin: 0 0 9px;
  color: var(--pm-readiness-text);
  font-size: 12px;
}

.pm-readiness-card__evidence {
  padding: 8px 0;
  border-top: 1px solid var(--pm-readiness-border);
}

.pm-readiness-card__evidence:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.pm-readiness-card__source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--pm-readiness-subtle);
  font-size: 10px;
}

.pm-readiness-card__quote {
  margin-top: 5px;
  color: var(--pm-readiness-text);
  font-size: 12px;
  line-height: 1.5;
}

.pm-readiness-card__gaps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-readiness-card__gaps li {
  position: relative;
  padding-left: 13px;
  color: var(--pm-readiness-muted);
  font-size: 12px;
  line-height: 1.45;
}

.pm-readiness-card__gaps li::before {
  position: absolute;
  top: 0.52em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: 0.55;
}

.pm-readiness-card__guard {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--pm-readiness-warning);
  background: var(--pm-readiness-warning-bg);
  color: var(--pm-readiness-warning);
  font-size: 12px;
  line-height: 1.5;
}

.pm-readiness-card--block .pm-readiness-card__guard {
  border-left-color: var(--pm-readiness-danger);
  background: var(--pm-readiness-danger-bg);
  color: var(--pm-readiness-danger);
}

.pm-readiness-card__actions {
  display: flex;
  gap: 9px;
  margin-top: 16px;
}

.pm-readiness-card__button {
  padding: 9px 14px;
  border: 1px solid var(--pm-readiness-strong);
  border-radius: 8px;
  background: var(--pm-readiness-surface);
  color: var(--pm-readiness-text);
  font: inherit;
  font-size: 12px;
  font-weight: 680;
  cursor: pointer;
}

.pm-readiness-card__button--primary {
  border-color: var(--pm-readiness-ink);
  background: var(--pm-readiness-ink);
  color: var(--pm-readiness-on-ink);
}

.pm-readiness-card__button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.pm-readiness-card__button:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}
/* Video template recommendation card — light defaults + dark via --ds-* */

.vt-rec-card {
  --vt-ink: #172033;
  --vt-muted: #647086;
  --vt-tertiary: #8a93a5;
  --vt-line: #e5e8ef;
  --vt-line-soft: rgba(23, 32, 51, 0.08);
  --vt-surface: #ffffff;
  --vt-surface-raised: #ffffff;
  --vt-surface-hover: #f4f5f8;
  --vt-header-bg:
    radial-gradient(circle at 88% 12%, rgba(70, 116, 255, 0.1), transparent 30%),
    linear-gradient(145deg, #fbfcff 0%, #f6f8ff 100%);
  --vt-metric-bg: #fafbfc;
  --vt-fit-bg: #edf2ff;
  --vt-fit-ink: #3c5fb2;
  --vt-tag-border: #e4e7ee;
  --vt-tag-ink: #7b8495;
  --vt-btn-secondary-bg: #eef2ff;
  --vt-btn-secondary-ink: #3558ac;
  --vt-btn-primary-bg: #172033;
  --vt-btn-primary-ink: #ffffff;
  --vt-empty-border: #f0dcc2;
  --vt-empty-bg: #fffaf2;
  --vt-empty-ink: #7c6750;
  --vt-arrow-bg: rgba(23, 32, 51, 0.04);
  --vt-shadow: 0 1px 2px rgba(30, 41, 59, 0.04), 0 12px 28px rgba(30, 41, 59, 0.06);

  width: min(100%, 760px);
  overflow: hidden;
  border: 1px solid var(--vt-line);
  border-radius: 16px;
  background: var(--vt-surface);
  color: var(--vt-ink);
  box-shadow: var(--vt-shadow);
}

[data-theme="dark"] .vt-rec-card {
  --vt-ink: var(--ds-color-on-surface);
  --vt-muted: var(--ds-color-on-surface-variant);
  --vt-tertiary: var(--ds-color-outline);
  --vt-line: var(--ds-color-outline-variant);
  --vt-line-soft: rgba(244, 244, 245, 0.08);
  --vt-surface: var(--ds-color-surface-container-low);
  --vt-surface-raised: var(--ds-color-surface-container);
  --vt-surface-hover: var(--ds-color-surface-container-high);
  --vt-header-bg: transparent;
  --vt-metric-bg: color-mix(in srgb, var(--ds-color-surface-container-lowest) 70%, transparent);
  --vt-fit-bg: color-mix(in srgb, var(--ds-color-primary) 12%, transparent);
  --vt-fit-ink: var(--ds-color-primary);
  --vt-tag-border: rgba(244, 244, 245, 0.1);
  --vt-tag-ink: var(--ds-color-outline);
  --vt-btn-secondary-bg: transparent;
  --vt-btn-secondary-ink: var(--ds-color-on-surface-variant);
  --vt-btn-primary-bg: var(--ds-color-on-surface);
  --vt-btn-primary-ink: var(--ds-color-surface);
  --vt-empty-border: var(--ds-color-outline-variant);
  --vt-empty-bg: var(--ds-color-surface-container);
  --vt-empty-ink: var(--ds-color-on-surface-variant);
  --vt-arrow-bg: rgba(255, 255, 255, 0.04);
  --vt-shadow: none;
}

.vt-rec-card__header {
  padding: 22px 22px 18px;
  background: var(--vt-header-bg);
}

.vt-rec-card__header h2 {
  margin: 0;
  color: var(--vt-ink);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.vt-rec-card__header p {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--vt-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.vt-rec-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--vt-line-soft);
  border-bottom: 1px solid var(--vt-line-soft);
  background: var(--vt-metric-bg);
}

.vt-rec-card__metric {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 12px 18px;
}

.vt-rec-card__metric + .vt-rec-card__metric {
  border-left: 1px solid var(--vt-line-soft);
}

.vt-rec-card__metric > span {
  color: var(--vt-tertiary);
  font-size: 11.5px;
}

.vt-rec-card__metric-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.vt-rec-card__metric-value strong {
  color: var(--vt-ink);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

/* 偏少：纯文字后缀，不染色 */
.vt-rec-card__metric-hint {
  color: var(--vt-tertiary);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
}

.vt-rec-card__metric-hint::before {
  content: "·";
  margin-right: 6px;
  color: var(--vt-line);
}

.vt-rec-card__recommendations {
  padding: 16px 14px 8px;
}

.vt-rec-card__section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px 12px;
}

.vt-rec-card__section-heading > span {
  font-size: 13px;
  font-weight: 550;
}

.vt-rec-card__section-heading small {
  color: var(--vt-tertiary);
  font-size: 12px;
}

.vt-rec-card__grid {
  display: grid;
  gap: 8px;
}

.vt-rec-card__template {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 28px;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--vt-line);
  border-radius: 12px;
  background: var(--vt-surface-raised);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background 120ms ease,
    border-color 120ms ease;
}

.vt-rec-card__template:hover,
.vt-rec-card__template:focus-visible {
  background: var(--vt-surface-hover);
  border-color: color-mix(in srgb, var(--vt-ink) 22%, var(--vt-line));
  outline: none;
}

.vt-rec-card__template:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ds-color-primary, #4da6ff) 55%, transparent);
  outline-offset: 1px;
}

.vt-rec-card__cover {
  position: relative;
  display: block;
  width: 100%;
  min-height: 88px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(145deg, #6b8cff, #2a4ab8);
}

.vt-rec-card__cover--indigo { background: linear-gradient(145deg, #7a7ef0, #2f2480); }
.vt-rec-card__cover--amber { background: linear-gradient(145deg, #e0a85a, #8a3f0c); }
.vt-rec-card__cover--violet { background: linear-gradient(145deg, #b88ae8, #4a1f8a); }
.vt-rec-card__cover--slate { background: linear-gradient(145deg, #94a3b8, #1e293b); }
.vt-rec-card__cover--cyan { background: linear-gradient(145deg, #5ec8d8, #0d5a6e); }
.vt-rec-card__cover--emerald { background: linear-gradient(145deg, #5ecf9a, #0f5c42); }
.vt-rec-card__cover--rose { background: linear-gradient(145deg, #f0a0ab, #8a2040); }
.vt-rec-card__cover--blue { background: linear-gradient(145deg, #6b8cff, #2a4ab8); }

.vt-rec-card__cover-orbit {
  position: absolute;
  width: 72px;
  height: 72px;
  top: -20px;
  right: -22px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.05);
}

.vt-rec-card__cover-panel {
  position: absolute;
  inset: auto 8px 8px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.9);
}

.vt-rec-card__cover-kicker {
  width: 48px;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.35;
  opacity: 0.85;
}

.vt-rec-card__cover-number {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.08em;
  opacity: 0.82;
}

.vt-rec-card__template-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.vt-rec-card__template-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vt-rec-card__template-topline strong {
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 550;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vt-rec-card__template-topline > span {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--vt-fit-bg);
  color: var(--vt-fit-ink);
  font-size: 11px;
  font-weight: 550;
}

.vt-rec-card__template-description,
.vt-rec-card__template-reason {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: var(--vt-muted);
  font-size: 12px;
  line-height: 1.45;
}

.vt-rec-card__template-reason {
  color: var(--vt-tertiary);
  -webkit-line-clamp: 2;
}

.vt-rec-card__template-tags {
  display: flex;
  gap: 5px;
}

.vt-rec-card__template-tags > span {
  padding: 2px 7px;
  border: 1px solid var(--vt-tag-border);
  border-radius: 5px;
  color: var(--vt-tag-ink);
  font-size: 10.5px;
}

.vt-rec-card__arrow {
  display: grid;
  place-items: center;
  align-self: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--vt-arrow-bg);
  color: var(--vt-tertiary);
  font-size: 16px;
  line-height: 1;
  transition: background 120ms ease, color 120ms ease;
}

.vt-rec-card__template:hover .vt-rec-card__arrow,
.vt-rec-card__template:focus-visible .vt-rec-card__arrow {
  color: var(--vt-ink);
  background: color-mix(in srgb, var(--vt-ink) 8%, transparent);
}

.vt-rec-card__empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px;
  padding: 18px;
  border: 1px solid var(--vt-empty-border);
  border-radius: 12px;
  background: var(--vt-empty-bg);
}

.vt-rec-card__empty strong {
  font-size: 14px;
  color: var(--vt-ink);
}

.vt-rec-card__empty span {
  color: var(--vt-empty-ink);
  font-size: 13px;
  line-height: 1.55;
}

.vt-rec-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 18px;
}

.vt-rec-card__view-all,
.vt-rec-card__supplement {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 510;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.vt-rec-card__view-all {
  border-color: var(--vt-line);
  background: var(--vt-btn-secondary-bg);
  color: var(--vt-btn-secondary-ink);
}

.vt-rec-card__view-all:hover {
  background: var(--vt-surface-hover);
  color: var(--vt-ink);
}

.vt-rec-card__supplement {
  border-color: transparent;
  background: var(--vt-btn-primary-bg);
  color: var(--vt-btn-primary-ink);
}

.vt-rec-card__supplement:hover {
  filter: brightness(1.05);
}

@media (max-width: 640px) {
  .vt-rec-card__header { padding: 18px 16px 14px; }
  .vt-rec-card__header h2 { font-size: 17px; }
  .vt-rec-card__metric { padding: 10px 12px; }
  .vt-rec-card__template {
    grid-template-columns: 72px minmax(0, 1fr) 24px;
    min-height: 96px;
  }
  .vt-rec-card__cover { min-height: 72px; }
  .vt-rec-card__section-heading small { display: none; }
}
._detailInner_ong61_1 {
  padding: 26px 32px 36px;
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
}

._edit_ong61_7 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 372px);
  gap: var(--ds-sys-space-xxl);
  align-items: start;
}

._prev_ong61_14 {
  width: 100%;
  max-width: 248px;
  margin: 0 auto;
}

._prevMedia_ong61_20 {
  width: 100%;
  border: 0;
  padding: 0;
  aspect-ratio: 9 / 16;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--ds-corner-large);
  background: linear-gradient(145deg, var(--ds-color-surface-container-high), var(--ds-color-outline-variant));
  background-position: center;
  background-size: cover;
  color: var(--ds-color-on-surface);
  cursor: pointer;
}

._prevVideo_ong61_36 {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface-container-high);
  object-fit: cover;
}

._play_ong61_47 {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ds-color-on-surface);
}

._prevLab_ong61_57 {
  margin-top: 13px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 700;
}

._coverRow_ong61_64 {
  display: flex;
  gap: var(--ds-sys-space-sm);
  margin-top: 9px;
}

._cover_ong61_64,
._coverAdd_ong61_71 {
  width: 44px;
  height: 57px;
  flex-shrink: 0;
  border-radius: 7px;
}

._cover_ong61_64 {
  border: 2px solid var(--ds-color-on-surface);
  background: var(--ds-color-surface-container-high);
  background-position: center;
  background-size: cover;
}

._coverAdd_ong61_71 {
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

._coverAdd_ong61_71:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

._coverPicker_ong61_102 {
  margin-top: 12px;
}

._coverPickerVideo_ong61_106 {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: block;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container-high);
  object-fit: cover;
}

._coverPicker_ong61_102 input[type='range'] {
  width: 100%;
  margin-top: 8px;
}

._coverPickerActions_ong61_120 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}

._coverPickerActions_ong61_120 button {
  min-height: 26px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 3px 9px;
}

._form_ong61_142 {
  min-width: 0;
}

._block_ong61_146 {
  margin-bottom: 18px;
}

._block_ong61_146 label {
  display: block;
  margin-bottom: 8px;
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 700;
}

._count_ong61_158 {
  float: right;
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  font-weight: 500;
}

._input_ong61_166,
._textarea_ong61_167 {
  width: 100%;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 9px 11px;
  outline: none;
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 13px;
}

._textarea_ong61_167 {
  min-height: 78px;
  resize: none;
}

._input_ong61_166:focus,
._textarea_ong61_167:focus {
  border-color: var(--ds-color-on-surface);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.06);
}

._input_ong61_166:disabled,
._textarea_ong61_167:disabled {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  cursor: not-allowed;
}

._topics_ong61_196 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

._topic_ong61_196,
._topicAdd_ong61_203 {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
}

._topicRemove_ong61_218,
._topicAdd_ong61_203 {
  cursor: pointer;
}

._topicRemove_ong61_218 {
  border: 0;
  background: none;
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  line-height: 1;
  padding: 0;
}

._topicRemove_ong61_218:hover,
._topicAdd_ong61_203:hover {
  color: var(--ds-color-on-surface);
}

._topicAdd_ong61_203 {
  border-style: dashed;
}

._topicEditor_ong61_241 {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  padding: 2px 6px 2px 9px;
}

._topicInput_ong61_252 {
  width: 92px;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
}

._topicIconButton_ong61_264 {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  padding: 0;
}

._topicIconButton_ong61_264:hover {
  color: var(--ds-color-on-surface);
}

._group_ong61_281 {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  margin-top: 6px;
  padding: 2px 14px;
}

._group_ong61_281[aria-disabled='true'] {
  color: var(--ds-color-on-surface-variant);
}

._opt_ong61_292 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-md);
  padding: 12px 0;
}

._opt_ong61_292 + ._opt_ong61_292 {
  border-top: 1px solid var(--ds-color-outline-variant);
}

._optLeft_ong61_304 b {
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 600;
}

._optLeft_ong61_304 span,
._soon_ong61_311 {
  display: block;
  margin-top: 1px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}

._soon_ong61_311 {
  flex-shrink: 0;
  margin-top: 0;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  padding: 2px 8px;
}

@media (max-width: 880px) {
  ._detailInner_ong61_1 {
    padding: var(--ds-sys-space-xl);
  }

  ._edit_ong61_7 {
    grid-template-columns: 1fr;
  }

  ._prev_ong61_14 {
    max-width: 248px;
  }
}
.pf-card {
  background: var(--ds-color-surface-container-low, );
  border: 1px solid var(--ds-color-outline-variant, );
  border-radius: 12px;
  color: var(--ds-color-on-surface, );
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pf-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-card__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.pf-card__badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-primary, );
  background: color-mix(in srgb, var(--ds-color-primary, ) 10%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
}

.pf-card__answered {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ds-color-on-surface-variant, );
  font-size: 13px;
}

.pf-card__answered-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ds-color-primary, );
}

.pf-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.pf-block--row {
  flex-direction: row;
  gap: 12px;
}

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

.pf-block__label {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant, );
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pf-block__count {
  font-size: 11px;
}

.pf-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.pf-video {
  border: 1px solid var(--ds-color-outline-variant, );
  border-radius: 8px;
  background: transparent;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  cursor: pointer;
}

.pf-video--selected {
  border-color: var(--ds-color-primary, );
  box-shadow: 0 0 0 1px var(--ds-color-primary, );
}

.pf-video__cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.pf-video__cover--placeholder {
  background: color-mix(in srgb, var(--ds-color-on-surface, ) 8%, transparent);
}

.pf-video__title {
  font-size: 12px;
  line-height: 1.35;
  padding: 0 6px 6px;
  color: var(--ds-color-on-surface, );
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pf-accounts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pf-account {
  border: 1px solid var(--ds-color-outline-variant, );
  border-radius: 999px;
  background: transparent;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ds-color-on-surface, );
}

.pf-account--selected {
  border-color: var(--ds-color-primary, );
  background: color-mix(in srgb, var(--ds-color-primary, ) 10%, transparent);
}

.pf-account--unauthorized {
  opacity: 0.55;
  cursor: not-allowed;
}

.pf-account__platform {
  font-weight: 600;
}

.pf-account__status {
  color: var(--ds-color-on-surface-variant, );
  font-size: 11px;
}

.pf-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--ds-color-outline-variant, );
  border-radius: 8px;
  background: var(--ds-color-surface, );
  color: var(--ds-color-on-surface, );
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.4;
}

.pf-input--area {
  min-height: 64px;
  resize: vertical;
}

.pf-input::placeholder {
  color: var(--ds-color-on-surface-variant, );
}

.pf-card__actions {
  display: flex;
  justify-content: flex-end;
}

.pf-btn {
  border: none;
  border-radius: var(--ds-corner-small);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.pf-btn--primary {
  min-height: 36px;
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.pf-btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pf-cover-row {
  display: flex;
  gap: var(--ds-sys-space-sm);
  margin-top: 9px;
}

.pf-cover-thumb,
.pf-cover-select {
  width: 44px;
  height: 57px;
  flex-shrink: 0;
  border-radius: 7px;
}

.pf-cover-thumb {
  border: 2px solid var(--ds-color-on-surface);
  background: var(--ds-color-surface-container-high);
  background-position: center;
  background-size: cover;
}

.pf-cover-select {
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.pf-cover-select:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.asc-card {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium, 10px);
  background: var(--ds-color-surface-container-low);
  padding: 14px 16px;
  min-width: 0;
}

.asc-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.asc-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

.asc-card__text {
  margin: 8px 0 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ds-color-on-surface-variant);
}

.asc-card__actions {
  display: flex;
  justify-content: flex-end;
}

.asc-btn {
  min-height: 30px;
  border: 1px solid var(--ds-color-outline);
  border-radius: var(--ds-corner-small, 8px);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 14px;
}

.asc-btn:hover:not(:disabled) {
  background: var(--ds-color-surface-container-high);
}

.asc-card__answered {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.asc-card__error {
  color: var(--ds-color-error);
}
.hosting-config-confirm-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container-low);
  color: var(--ds-color-on-surface);
}

.hosting-config-confirm-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.hosting-config-confirm-card header > div {
  min-width: 0;
}

.hosting-config-confirm-card header span {
  color: var(--ds-color-primary);
  font-size: 11px;
  font-weight: 750;
}

.hosting-config-confirm-card h3 {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.hosting-config-confirm-card em {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-primary-container);
  color: var(--ds-color-on-primary-container);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.hosting-config-confirm-card dl {
  display: flex;
  margin: 0;
  flex-direction: column;
}

.hosting-config-confirm-card dl > div {
  display: grid;
  padding: 9px 0;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  border-top: 1px solid var(--ds-color-outline-variant);
}

.hosting-config-confirm-card dt {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

.hosting-config-confirm-card dd {
  display: grid;
  min-width: 0;
  margin: 0;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  font-size: 12px;
}

.hosting-config-confirm-card dd span {
  overflow: hidden;
  color: var(--ds-color-on-surface-variant);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hosting-config-confirm-card dd b {
  color: var(--ds-color-outline);
}

.hosting-config-confirm-card dd strong {
  overflow-wrap: anywhere;
}

.hosting-config-confirm-card footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.hosting-config-confirm-card footer button {
  padding: 7px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.hosting-config-confirm-card footer .hosting-config-confirm-card__primary {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}
/**
 * conversation-tool-display — 1:1 对齐
 * docs/design/2026-07-21-conversation-tool-display/prototypes/A0-base.html
 * 主轴 720 · 零厚重卡壳 · hairline 左轴 · 11px 圆点 · 分类软 pill
 */

/* —— Plan —— */
.ps-plan {
  margin: 0 0 10px;
  padding: 4px 0 2px;
  border: none;
  background: transparent;
}

.ps-plan-h {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  margin: 0 -8px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
  width: calc(100% + 16px);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  border: none;
  background: transparent;
  font-family: inherit;
}

.ps-plan-h:hover {
  background: var(--ds-color-surface-container);
}

.ps-plan-h .ps-t {
  color: var(--ds-color-on-surface);
  font-weight: 550;
}

.ps-plan-h .ps-meta {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: var(--ds-font-body-medium-weight);
}

.ps-plan-h .ps-caret {
  margin-left: auto;
  font-size: 9px;
  color: var(--ds-color-on-surface-variant);
  transition: transform 0.15s ease;
}

.ps-plan-h[aria-expanded='true'] .ps-caret {
  transform: rotate(180deg);
}

.ps-plan-body {
  margin: 2px 0 6px 6px;
  padding: 2px 0 2px 16px;
  border-left: 1px solid var(--ds-color-outline-variant);
}

.ps-plan-step {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
  font-weight: var(--ds-font-body-medium-weight);
}

.ps-plan-step.is-now {
  color: var(--ds-color-on-surface);
  font-weight: 550;
}

.ps-plan-step.is-err {
  color: var(--ds-color-error);
  font-weight: 550;
}

/* A0 .dot — 11px ring */
.ps-dot {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--ds-color-outline-variant);
  background: transparent;
  box-sizing: border-box;
  position: relative;
}

.ps-dot.is-now {
  border-color: var(--ds-color-primary, );
  background: radial-gradient(
    circle,
    var(--ds-color-primary, ) 0 3px,
    transparent 3px
  );
}

.ps-dot.is-ok {
  border-color: var(--ds-color-secondary);
  background: var(--ds-color-secondary);
}

.ps-dot.is-ok::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 1.2px;
  width: 3px;
  height: 5.5px;
  border: solid var(--ds-color-surface, );
  border-width: 0 1.4px 1.4px 0;
  transform: rotate(42deg);
}

html[data-theme='dark'] .ps-dot.is-ok::after {
  border-color: var(--ds-color-surface, );
}

.ps-dot.is-err {
  border-color: var(--ds-color-error);
  background: var(--ds-color-error);
}

/* —— Step / ProcessBlock —— */
.ps-step {
  margin: 8px 0 12px;
  border: none;
  background: transparent;
}

.ps-step-h {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin: 0 -8px;
  padding: 4px 8px;
  border-radius: 8px;
  width: calc(100% + 16px);
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  box-sizing: border-box;
  border: none;
  background: transparent;
  font-family: inherit;
  color: inherit;
}

.ps-step-h:hover {
  background: var(--ds-color-surface-container);
}

.ps-step-h .ps-title {
  font-weight: 550;
  color: var(--ds-color-on-surface);
}

.ps-step-h .ps-meta {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  font-weight: var(--ds-font-body-medium-weight);
}

.ps-step-h .ps-caret {
  margin-left: auto;
  font-size: 9px;
  color: var(--ds-color-on-surface-variant);
  transition: transform 0.15s ease;
}

.ps-step-h[aria-expanded='true'] .ps-caret {
  transform: rotate(180deg);
}

.ps-step-body {
  margin: 2px 0 4px 6px;
  padding: 4px 0 4px 16px;
  border-left: 1px solid var(--ds-color-outline-variant);
}

/* —— Hi-fi tool segment (V2 independent tool row) ——
 * 对齐 docs/design/2026-07-30-pattern-ui-reveal-motion.html 共享壳视觉
 * 父/子嵌套对齐 docs/design/2026-07-27-v2-tool-pattern-final.html P08 flow-stream
 */
.ps-lifecycle-list {
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 根级 Tool 组：父壳 + 可选子步骤 */
.ps-tool-group {
  margin: 0 0 14px;
  max-width: 100%;
}

.ps-tool-group:last-child {
  margin-bottom: 0;
}

/* media_grid 结果卡：Toast 在卡外；soft ring 外框（design.md §7 --ds-elevation-soft） */
.ps-media-result-card {
  overflow: hidden;
  margin-left: 17px;
  border: none;
  border-radius: var(--ds-corner-large);
  background:
    linear-gradient(
      180deg,
      var(--ds-color-surface) 0%,
      color-mix(in srgb, var(--ds-color-surface-container-low) 55%, var(--ds-color-surface)) 100%
    );
  box-shadow: var(--ds-elevation-soft);
}

.ps-media-result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-md) var(--ds-sys-space-lg);
}

.ps-media-result-head-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.ps-media-result-count {
  color: var(--ds-color-on-surface);
  font-size: var(--ds-font-label-large-size);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ps-media-result-count em {
  font-style: normal;
  font-family: var(--ds-typeface-code);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.ps-media-result-hint {
  color: var(--ds-color-on-surface-variant);
  font-size: var(--ds-font-label-small-size);
  font-weight: var(--ds-font-label-small-weight);
}

.ps-media-result-rule {
  height: 1px;
  margin: 0 var(--ds-sys-space-lg);
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--ds-color-on-surface) 8%, transparent) 12%,
    color-mix(in srgb, var(--ds-color-on-surface) 8%, transparent) 88%,
    transparent 100%
  );
}

.ps-media-result-card > .ps-tool-mount {
  margin-top: 0;
  padding: 0;
  border-top: none;
}

/* media_grid · 加载更多（方案 A：同查询累加下一页） */
.ps-media-load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-lg) var(--ds-sys-space-lg);
  border-top: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 70%, transparent);
  background: color-mix(in srgb, var(--ds-color-surface) 70%, var(--ds-color-surface-container-low));
}

.ps-media-load-more-copy {
  margin: 0;
  text-align: center;
  color: var(--ds-color-on-surface-variant);
  font-size: var(--ds-font-body-small-size);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.ps-media-load-more-copy strong {
  color: var(--ds-color-on-surface);
  font-weight: 600;
}

.ps-media-load-more-btn {
  min-width: 148px;
  height: 36px;
  padding: 0 18px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: var(--ds-font-label-large-size);
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ds-color-shadow) 16%, transparent);
  transition:
    background var(--ds-motion-short-4) var(--ds-easing-standard),
    border-color var(--ds-motion-short-4) var(--ds-easing-standard);
}

.ps-media-load-more-btn:hover {
  background: var(--ds-color-surface-container-low);
  border-color: var(--ds-color-outline);
}

.ps-media-load-more-btn:active {
  background: var(--ds-color-surface-container);
}

/* media_grid 画廊 + 相框格子 */
.ps-media-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-md);
  background: transparent;
}

.ps-media-cell {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.ps-media-digital-human-upload-btn {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sys-space-md);
  margin: 0;
  padding: var(--ds-sys-space-lg);
  border: 1px dashed var(--ds-color-outline);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container-lowest);
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-font-body-small-family);
  font-size: var(--ds-font-body-small-size);
  font-weight: 550;
  line-height: var(--ds-font-body-small-line-height);
  cursor: pointer;
  transition:
    transform var(--ds-motion-short-4) var(--ds-easing-standard),
    border-color var(--ds-motion-short-3) var(--ds-easing-standard),
    background var(--ds-motion-short-3) var(--ds-easing-standard),
    color var(--ds-motion-short-3) var(--ds-easing-standard);
}

.ps-media-digital-human-upload-btn:hover {
  transform: translateY(-1px);
  border-color: var(--ds-color-primary);
  background: color-mix(in srgb, var(--ds-color-primary) 6%, var(--ds-color-surface));
  color: var(--ds-color-primary);
}

.ps-media-digital-human-upload-btn:focus-visible {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: 2px;
}

.ps-media-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--ds-corner-medium);
  overflow: hidden;
  background: var(--ds-color-on-surface);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ds-color-surface) 8%, transparent),
    0 1px 2px color-mix(in srgb, var(--ds-color-shadow) 40%, transparent);
  cursor: pointer;
  transition:
    transform var(--ds-motion-short-4) var(--ds-easing-standard),
    box-shadow var(--ds-motion-short-4) var(--ds-easing-standard);
}

.ps-media-cell:hover .ps-media-frame {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ds-color-surface) 10%, transparent),
    var(--ds-elevation-2);
}

.ps-media-cell.is-selected .ps-media-frame {
  box-shadow:
    inset 0 0 0 1.5px var(--ds-color-primary),
    0 0 0 3px color-mix(in srgb, var(--ds-color-primary) 18%, transparent),
    0 4px 12px color-mix(in srgb, var(--ds-color-primary) 12%, transparent);
}

.ps-media-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ds-color-scrim) 30%, transparent) 0%,
    transparent 22%,
    transparent 58%,
    color-mix(in srgb, var(--ds-color-scrim) 85%, transparent) 100%
  );
}

.ps-media-preview-btn {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.ps-media-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.ps-media-dur {
  position: absolute;
  right: var(--ds-sys-space-sm);
  bottom: var(--ds-sys-space-sm);
  z-index: 2;
  min-height: 18px;
  padding: 0 6px;
  border-radius: var(--ds-corner-extra-small);
  background: color-mix(in srgb, var(--ds-color-scrim) 80%, transparent);
  color: var(--ds-color-surface);
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.ps-media-del {
  position: absolute;
  top: var(--ds-sys-space-sm);
  right: var(--ds-sys-space-sm);
  z-index: 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border-radius: var(--ds-corner-small);
  border: 1px solid color-mix(in srgb, var(--ds-color-surface) 14%, transparent);
  background: color-mix(in srgb, var(--ds-color-scrim) 70%, transparent);
  color: var(--ds-color-surface);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px) scale(0.96);
  transition:
    opacity var(--ds-motion-short-4) var(--ds-easing-standard),
    transform var(--ds-motion-short-4) var(--ds-easing-standard),
    background var(--ds-motion-short-3) var(--ds-easing-standard);
}

.ps-media-cell:hover .ps-media-del,
.ps-media-cell:focus-within .ps-media-del,
.ps-media-del:focus-visible {
  opacity: 1;
  transform: none;
}

.ps-media-del:hover {
  background: var(--ds-color-error);
  border-color: transparent;
  color: var(--ds-color-on-error);
}

.ps-media-play {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: var(--ds-corner-full);
  background: color-mix(in srgb, var(--ds-color-surface) 94%, transparent);
  box-shadow: var(--ds-elevation-2);
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  transition:
    opacity var(--ds-motion-short-4) var(--ds-easing-standard),
    transform var(--ds-motion-short-4) var(--ds-easing-standard);
}

.ps-media-cell:hover .ps-media-play {
  opacity: 1;
  transform: scale(1);
}

.ps-media-play::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -6px 0 0 -3px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--ds-color-on-surface);
}

.ps-media-check {
  position: absolute;
  top: var(--ds-sys-space-sm);
  left: var(--ds-sys-space-sm);
  z-index: 3;
  width: 22px;
  height: 22px;
  display: none;
  place-items: center;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-primary);
  color: var(--ds-color-surface);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ds-color-primary) 40%, transparent);
}

.ps-media-cell.is-selected .ps-media-check {
  display: grid;
}

.ps-media-caption {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  min-height: 28px;
  padding: 0 var(--ds-sys-space-xs);
}

.ps-media-title {
  flex: 1;
  min-width: 0;
  color: var(--ds-color-on-surface);
  font-size: var(--ds-font-body-small-size);
  font-weight: 550;
  letter-spacing: -0.01em;
  line-height: var(--ds-font-body-small-line-height);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-media-pick {
  flex-shrink: 0;
  height: 28px;
  padding: 0 var(--ds-sys-space-md);
  border-radius: var(--ds-corner-full);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: var(--ds-font-label-small-size);
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--ds-motion-short-3) var(--ds-easing-standard),
    border-color var(--ds-motion-short-3) var(--ds-easing-standard),
    color var(--ds-motion-short-3) var(--ds-easing-standard),
    box-shadow var(--ds-motion-short-3) var(--ds-easing-standard),
    filter var(--ds-motion-short-3) var(--ds-easing-standard),
    transform var(--ds-motion-short-3) var(--ds-easing-standard);
}

.ps-media-pick:hover {
  border-color: var(--ds-color-outline);
  background: color-mix(
    in srgb,
    var(--ds-color-on-surface) calc(var(--ds-state-hover-opacity) * 100%),
    var(--ds-color-surface)
  );
}

.ps-media-cell.is-selected .ps-media-pick {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ds-color-shadow) 70%, transparent);
}

.ps-media-cell.is-selected .ps-media-pick:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .ps-media-frame,
  .ps-media-del,
  .ps-media-play,
  .ps-media-pick,
  .ps-media-digital-human-upload-btn {
    transition: none;
  }

  .ps-media-cell:hover .ps-media-frame {
    transform: none;
  }

  .ps-media-digital-human-upload-btn:hover {
    transform: none;
  }
}

/* 子步骤容器：indent 一行（15px），对齐 final HTML .flow-stream */
.ps-tool-children {
  margin: 4px 0 0 15px;
}

/* 子步骤：hairline + 垂直节奏，对齐 final HTML .flow-step */
.ps-tool-child {
  padding: 18px 0;
  border-top: 1px solid var(--ds-color-outline-variant, rgba(24, 24, 27, 0.09));
}

.ps-tool-child:first-child {
  padding-top: 4px;
  border-top: 0;
}

/* 模型自然语言（骨架 04 槽）：收在 Tool 段尾，hairline 分隔后用对话正文字号。
 * 1:1 对齐 final HTML / reveal-motion HTML 的 .model-response。 */
.ps-agent-prose {
  margin: 24px 0 0 17px;
  padding-top: 18px;
  border-top: 1px solid var(--ds-color-outline-variant, rgba(24, 24, 27, 0.09));
  color: var(--ds-color-on-surface, #18181b);
  font-size: 15px;
  line-height: 1.8;
  white-space: normal;
  word-break: break-word;
}

/* 子步骤内的模型话：ps-tool-child 自身已有 hairline，这里不再叠一条 */
.ps-agent-prose.is-child {
  margin: 8px 0 0 17px;
  padding-top: 0;
  border-top: 0;
  font-size: 13.5px;
  line-height: 1.65;
}

/* 1:1 对齐 docs/design/2026-07-30-pattern-ui-reveal-motion.html
 * 无行底色、无胶囊底、透明壳 */
.ps-tool-seg {
  margin: 0;
  max-width: 100%;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.ps-tool-seg.is-in {
  opacity: 1;
  transform: none;
}

/* 子步骤字号/状态更轻（flow-step-name 13px / status 11px） */
.ps-tool-seg.is-child .ps-tool-head {
  min-height: 22px;
}

.ps-tool-seg.is-child .ps-act-label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.ps-tool-seg.is-child .ps-act-status {
  font-size: 11px;
}

.ps-tool-seg.is-child .ps-act-detail {
  margin: 7px 0 0 17px;
  font-size: 12.5px;
  line-height: 1.65;
}

.ps-tool-head {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 24px;
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ds-color-on-surface-variant);
}

.ps-tool-head-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  min-width: 0;
  flex: 1;
}

.ps-status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ds-color-outline-variant);
}

/* running 呼吸：对齐 HTML status-breathe（仅点，无行底） */
@keyframes ps-status-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-primary, #4da6ff) 18%, transparent);
    transform: scale(1);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--ds-color-primary, #4da6ff) 8%, transparent);
    transform: scale(1.18);
    opacity: 0.92;
  }
}

.ps-tool-head.is-running .ps-status-dot,
.ps-tool-seg.is-running .ps-status-dot {
  background: var(--ds-color-primary, #4da6ff);
  animation: ps-status-breathe 1.5s ease-in-out infinite;
  will-change: transform, box-shadow, opacity;
}

.ps-tool-head.is-ok .ps-status-dot,
.ps-tool-seg.is-ok .ps-status-dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 12%, transparent);
}

/* fail：仅状态点可辨，不加重光晕——Tool 失败常见，避免整行像系统告警 */
.ps-tool-head.is-err .ps-status-dot,
.ps-tool-seg.is-err .ps-status-dot {
  background: var(--ds-color-error);
  box-shadow: none;
}

.ps-tool-head.is-stopped .ps-status-dot,
.ps-tool-seg.is-stopped .ps-status-dot {
  background: var(--ds-color-outline-variant);
}

@media (prefers-reduced-motion: reduce) {
  .ps-tool-seg {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ps-tool-head.is-running .ps-status-dot,
  .ps-tool-seg.is-running .ps-status-dot {
    animation: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-color-primary, #4da6ff) 28%, transparent);
    transform: none;
  }

}

/* —— Action row (merged group / legacy nested) —— */
.ps-act {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ds-color-on-surface-variant);
  border: none;
  background: transparent;
}

.ps-act .ps-ico {
  width: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  text-align: center;
  font-size: 11px;
  line-height: 1;
}

.ps-act.is-running .ps-ico {
  color: var(--ds-color-warning, );
}

.ps-act.is-ok .ps-ico {
  color: var(--ds-color-secondary);
}

.ps-act.is-err .ps-ico {
  color: var(--ds-color-error);
}

.ps-act.is-stopped .ps-ico {
  color: var(--ds-color-on-surface-variant);
}

/* A0 .act .cat — 软 pill，有细边，无厚重色块 */
.ps-act-cat {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  margin-right: 2px;
  border-radius: 999px;
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  vertical-align: 1px;
  line-height: 1;
}

.ps-act-label {
  color: var(--ds-color-on-surface-variant);
  font-weight: var(--ds-font-body-medium-weight);
}

.ps-tool-head .ps-act-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.01em;
  color: var(--ds-color-on-surface);
}

.ps-act.is-running .ps-act-label,
.ps-tool-seg.is-running .ps-act-label {
  color: var(--ds-color-on-surface);
  font-weight: 700;
}

/* fail 名与成功同级（标题色），不染 error 红；语义由点 +「失败」状态文案承担 */
.ps-act.is-err .ps-act-label,
.ps-tool-seg.is-err .ps-act-label {
  color: var(--ds-color-on-surface);
}

/* 状态文案：HTML .tool-status — 右对齐纯文字，无胶囊底 */
.ps-act-status {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.ps-activity-toggle {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.ps-activity-toggle:hover {
  color: var(--ds-color-on-surface);
}

.ps-activity-items {
  margin: 7px 0 0 17px;
  padding-left: 12px;
  border-left: 1px solid var(--ds-color-outline-variant);
}

.ps-activity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12.5px;
  line-height: 1.5;
}

.ps-act-status.is-live,
.ps-tool-seg.is-running .ps-act-status {
  color: var(--ds-color-primary, #0078d4);
  font-weight: 600;
  /* 明确禁止胶囊/底色（1:1 HTML） */
  display: inline;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  letter-spacing: normal;
}

.ps-tool-seg.is-ok .ps-act-status {
  color: var(--ds-color-on-surface-variant);
  font-weight: 400;
}

.ps-act-detail {
  margin: 8px 0 0 17px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--ds-color-on-surface-variant);
  font-weight: 400;
  white-space: pre-wrap;
  min-height: 0;
}

/* deep-research / agent-landing U4 — explored_urls under tool or progress step */
.ps-explored {
  margin: 10px 0 0 17px;
  border-left: 2px solid var(--ds-color-outline-variant, rgba(24, 24, 27, 0.14));
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ps-explored-row {
  font: 500 11.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ds-color-on-surface-variant);
  word-break: break-all;
}

.ps-explored-count {
  margin: 6px 0 0 17px;
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
}

/* 根级 Tool 组内产物/inline 跟在父壳后，与子步骤同 indent 节奏 */
.ps-tool-group > .ps-tool-mount {
  margin: 14px 0 0 17px;
}

.ps-tool-seg.is-err .ps-act-detail,
.ps-act.is-err .ps-act-detail {
  color: var(--ds-color-on-surface-variant);
}

.ps-act-suffix {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
}

.ps-fail-actions {
  display: flex;
  gap: 8px;
  margin: 2px 0 8px 16px;
}

.ps-btn {
  font-size: 12px;
  line-height: 1.4;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}

.ps-btn-primary {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  border: 1px solid var(--ds-color-on-surface);
}

.ps-btn-ghost {
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  border: 1px solid var(--ds-color-outline-variant);
}

/* —— 手绘课件 long_run 逐页进度（B2）· 仅新增 .cw-*，不改既有 .ps-* —— */
.cw-pages {
  margin: 10px 0 0 17px;
  padding-left: 11px;
  border-left: 2px solid var(--ds-color-outline-variant);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cw-page {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 21px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ds-color-on-surface-variant);
}

.cw-page .idx {
  font-family: var(--ds-typeface-code);
  font-size: 10.5px;
  width: 13px;
  flex-shrink: 0;
  color: var(--ds-color-outline);
  font-variant-numeric: tabular-nums;
}

.cw-page .nm {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cw-page .st {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--ds-color-outline);
}

.cw-page.is-done .nm {
  color: var(--ds-color-on-surface);
}

.cw-page.is-done .st {
  color: #22c55e;
  font-weight: 600;
}

.cw-page.is-now .nm {
  color: var(--ds-color-on-surface);
  font-weight: 650;
}

.cw-page.is-now .st {
  color: var(--ds-color-primary);
  font-weight: 600;
}

.cw-page.is-err .st {
  color: var(--ds-color-error);
  font-weight: 600;
}

.cw-strip {
  display: flex;
  gap: 6px;
  margin: 11px 0 0 17px;
  flex-wrap: wrap;
}

.cw-th {
  width: 32px;
  height: 48px;
  border-radius: var(--ds-corner-extra-small);
  overflow: hidden;
  background: var(--ds-color-surface);
  box-shadow: inset 0 0 0 1px var(--ds-color-outline-variant);
  flex-shrink: 0;
}

.cw-th img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cw-th.is-pending {
  background: var(--ds-color-surface-container-low);
  box-shadow: inset 0 0 0 1px var(--ds-color-outline-variant);
  opacity: 0.55;
}

.cw-th.is-now {
  box-shadow:
    inset 0 0 0 1.5px var(--ds-color-primary),
    0 0 0 3px color-mix(in srgb, var(--ds-color-primary) 15%, transparent);
}

.cw-cap {
  margin: 8px 0 0 17px;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

/* —— PPT 转视频 long_run 逐页进度 · 仅新增 .ppt-*（+ .cw-page.is-wait 修饰），不改既有 .ps-* / .cw-* —— */
/* 权威：docs/design/2026-08-07-ppt-longrun-progress-reveal.html 第 3 段 */

/* 页图 16:9。课件是竖版页 32×48,这里只覆盖尺寸,其余全继承 .cw-th */
.ppt-th{width:48px;height:27px}

/* 行内页图:.cw-page 本身只是 flex+gap,多一个子元素不影响它 */
.ppt-page-th{width:26px;height:15px;flex-shrink:0;border-radius:2px;
  background:var(--ds-color-surface-container-low);
  box-shadow:inset 0 0 0 1px var(--ds-color-outline-variant)}
.ppt-page-th img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px}
.ppt-page-th.is-wait{opacity:.5}
/* 给 .cw-page 加修饰类，不改 .cw-page 既有规则；课件不传 is-wait 不受影响 */
.cw-page.is-wait{opacity:.55}

/* 讲稿摘录:PPT 独有。课件文稿是用户给的,PPT 讲稿是 AI 现写的 */
.ppt-peek{margin:11px 0 0 17px;padding:9px 11px;border-radius:var(--ds-corner-medium);
  background:var(--ds-color-surface-container-low);font-size:12.5px;line-height:1.65;
  color:var(--ds-color-on-surface-variant)}
.ppt-peek b{display:block;margin-bottom:3px;font-family:var(--ds-typeface-code);
  font-size:10.5px;font-weight:400;letter-spacing:.04em;color:var(--ds-color-outline)}
/* 讲稿摘录固定 2 行,超出省略号 */
.ppt-peek-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis}

/* 进度条 */
.ppt-meter{height:2px;margin:11px 0 0 17px;border-radius:2px;overflow:hidden;
  background:var(--ds-color-outline-variant)}
.ppt-meter i{display:block;height:100%;background:var(--ds-color-primary)}

/* —— 视频分镜 long_run 逐镜进度（variant=shot）· 仅新增 .shot-* / .cw-page.is-sel —— */
/* 权威：.codex-tmp/exec-plan-20260808-0156/preview.html 阶段 3 */

button.cw-page.is-shot{
  width:100%;
  border:0;
  background:transparent;
  font:inherit;
  text-align:left;
  cursor:pointer;
  border-radius:5px;
  padding:1px 6px 1px 0;
  transition:background .15s ease;
}
button.cw-page.is-shot:hover{
  background:var(--ds-color-surface-container-low);
}
/* 选中行：比 hover 再高一级，深浅主题都可辨 */
.cw-page.is-sel{
  background:var(--ds-color-surface-container-high);
}

/* 行内镜缩略图：约 22×13 横条，视频首帧 cover */
.shot-page-th{
  width:22px;
  height:13px;
  flex-shrink:0;
  border-radius:2px;
  background:var(--ds-color-surface-container-high);
  box-shadow:inset 0 0 0 1px var(--ds-color-outline-variant);
  overflow:hidden;
  position:relative;
}
.shot-page-th.is-wait{opacity:.5}
.shot-page-th.is-filled{
  background:var(--ds-color-surface-container-highest, var(--ds-color-surface-container-high));
}
.shot-page-th img,
.shot-page-th video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* 过程中小预览：左 9:16 画面 + 右整句文案 */
.shot-peek{
  margin:12px 0 0 28px;
  display:flex;
  gap:12px;
  border:1px solid var(--ds-color-outline-variant);
  border-radius:10px;
  padding:11px;
  background:var(--ds-color-surface-container-low);
}
.shot-peek-frame{
  width:74px;
  height:132px;
  border-radius:6px;
  flex-shrink:0;
  overflow:hidden;
  position:relative;
  background:var(--ds-color-surface-container-high);
}
.shot-peek-frame.is-empty{
  background:repeating-linear-gradient(
    45deg,
    var(--ds-color-surface-container-high),
    var(--ds-color-surface-container-high) 6px,
    var(--ds-color-surface-container) 6px,
    var(--ds-color-surface-container) 12px
  );
}
.shot-peek-frame img,
.shot-peek-frame video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.shot-peek-body{min-width:0}
.shot-peek-k{
  font-family:var(--ds-typeface-code);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--ds-color-outline);
  margin-bottom:5px;
}
.shot-peek-text{
  font-size:13px;
  line-height:1.65;
  color:var(--ds-color-on-surface);
}
.shot-peek-hint{
  margin-top:9px;
  font-size:11px;
  color:var(--ds-color-outline);
}


/* —— User progress channel (scene recall) · 1:1 preview HTML —— */
@keyframes ps-progress-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Indented to the Tool's own body axis (.ps-act-detail is `0 0 0 17px`), so the
   stages read as steps inside that Tool rather than a second list beside it. */
.ps-progress-phases {
  list-style: none;
  margin: 9px 0 0 17px;
  padding: 0;
}

.ps-progress-phase {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ds-color-on-surface);
  padding: 1.5px 0;
  animation: ps-progress-in 0.28s ease both;
}

/* Same status vocabulary as .ps-tool-head, one size down: the row is a step
   inside a Tool, so it must not read as another Tool. */
.ps-progress-phase__ic {
  position: relative;
  flex: none;
  width: 5px;
  height: 5px;
  margin: 8px 3px 0 1px;
  border-radius: 50%;
  background: var(--ds-color-outline-variant);
}

.ps-progress-phase.is-ok .ps-progress-phase__ic {
  background: #22c55e;
}

.ps-progress-phase.is-run .ps-progress-phase__ic {
  background: var(--ds-color-primary, #4da6ff);
  animation: ps-status-breathe 1.5s ease-in-out infinite;
  will-change: transform, box-shadow, opacity;
}

.ps-progress-phase.is-fail .ps-progress-phase__ic {
  background: var(--ds-color-error);
}

.ps-progress-phase__tx {
  flex: 1;
  min-width: 0;
}

.ps-progress-phase__line {
  display: flex;
  align-items: center;
  gap: 0 8px;
  min-width: 0;
  /* Applied to every row, not just tappable ones — otherwise the hover padding
     would shift the right rail by 6px between the two kinds. */
  margin-left: -6px;
  padding: 0 6px;
  border-radius: 6px;
  transition: background 0.12s ease;
}

.ps-progress-phase__title {
  flex: 1;
  min-width: 0;
  font-weight: 550;
  letter-spacing: -0.005em;
  color: var(--ds-color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-progress-phase__title b {
  font-weight: 650;
  color: var(--ds-color-on-surface);
}

/* Right rail — 1:1 with .ps-act-status, one size down. */
.ps-progress-phase__status {
  flex: none;
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
}

.ps-progress-phase.is-run .ps-progress-phase__status {
  color: var(--ds-color-primary, #0078d4);
  font-weight: 600;
}

.ps-progress-phase__meta {
  flex: none;
  color: var(--ds-color-outline);
  font-size: 11.5px;
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

/* Scene original sentence — independent block (not inline meta). */
.ps-progress-phase__detail {
  margin-top: 6px;
  margin-bottom: 2px;
  font-size: 12px;
  color: var(--ds-color-tertiary);
  line-height: 1.6;
  border-left: 2px solid var(--ds-color-outline-variant);
  padding-left: 10px;
  max-width: 476px;
}

/* Script-stage full text block (carries_script settle). */
.ps-progress-body {
  margin-top: 9px;
  margin-bottom: 5px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  background: var(--ds-color-surface-container-low);
  padding: 12px 14px;
  max-width: 476px;
  /* >12 lines: self-scroll so the conversation stream is not pushed away. */
  max-height: 320px;
  overflow-y: auto;
}

.ps-progress-body__title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--ds-color-outline-variant);
}

.ps-progress-body__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ln;
}

.ps-progress-body__line {
  counter-increment: ln;
  display: flex;
  gap: 9px;
  font-size: 12px;
  color: var(--ds-color-tertiary);
  line-height: 1.62;
  padding: 2.5px 0;
}

.ps-progress-body__line::before {
  content: counter(ln);
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  color: var(--ds-color-outline);
  flex: none;
  width: 13px;
  text-align: right;
  line-height: 1.75;
}

.ps-progress-phase.is-tap {
  cursor: pointer;
}

/* Tint the sentence only. Tinting the <li> would also wash the media grid —
   and, for the group row, every shot row nested inside it. */
.ps-progress-phase.is-tap
  > .ps-progress-phase__tx
  > .ps-progress-phase__line:hover,
.ps-progress-phase__line[role='button']:hover {
  background: var(--ds-color-surface-container-low);
}

/* Caret and its empty twin share one width: the status word above and below a
   row with no expand hook still lands on the same edge. */
.ps-progress-phase__caret,
.ps-progress-phase__caret-slot {
  flex: none;
  width: 42px;
  margin-left: 2px;
  box-sizing: border-box;
}

.ps-progress-phase__caret {
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 9.5px;
  color: var(--ds-color-outline);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 3px;
  padding: 0 4px;
  text-align: center;
  white-space: nowrap;
}

.ps-progress-phase.is-tap:hover .ps-progress-phase__caret,
.ps-progress-phase__line[role='button']:hover .ps-progress-phase__caret {
  color: var(--ds-color-tertiary);
  border-color: var(--ds-color-outline);
}

.ps-progress-phase.is-open > .ps-progress-phase__tx
  > .ps-progress-phase__line .ps-progress-phase__caret {
  color: var(--ds-color-on-surface);
  border-color: var(--ds-color-on-surface);
}

.ps-progress-phase.is-fail
  > .ps-progress-phase__tx
  > .ps-progress-phase__line
  > .ps-progress-phase__title {
  color: var(--ds-color-on-surface-variant);
}

/* —— Shot loop: one group row, shot rows nested one register lighter —— */
.ps-progress-scenes {
  list-style: none;
  margin: 3px 0 2px 2px;
  padding: 1px 0 1px 12px;
  border-left: 1px solid var(--ds-color-outline-variant);
}

.ps-progress-phase.is-scene {
  font-size: 12px;
  line-height: 1.5;
  padding: 1px 0;
}

/* Ordinal comes off phase_key, so the list stays scannable without repeating
   「第 N 镜」 in every sentence. */
.ps-progress-phase__idx {
  flex: none;
  width: 15px;
  margin-top: 2px;
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  text-align: right;
  color: var(--ds-color-outline);
  font-variant-numeric: tabular-nums;
}

.ps-progress-phase.is-scene .ps-progress-phase__title {
  font-weight: 400;
  color: var(--ds-color-tertiary);
}

.ps-progress-phase.is-scene.is-run .ps-progress-phase__title {
  font-weight: 550;
  color: var(--ds-color-on-surface);
}

.ps-progress-phase__res {
  flex: none;
  margin-left: auto;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* A shot that ended with nothing is the one row the user has to act on — it
   must not read the same as a shot that got pictures. */
.ps-progress-phase.is-scene.is-fail .ps-progress-phase__res,
.ps-progress-phase.is-scene:not(.is-tap):not(.is-run) .ps-progress-phase__res {
  color: var(--ds-color-outline);
}

.ps-progress-phase.is-scene.is-run .ps-progress-phase__res {
  color: var(--ds-color-primary, #0078d4);
  font-weight: 600;
}

.ps-progress-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 9px;
  margin-bottom: 4px;
  /* 3 columns are fixed, but the conversation column is far wider than the
     design surface (~900px vs ~549px). Without a ceiling each cell renders
     ~260px and the pictures take over the row they are supposed to support.
     476px = 3 x 154 + 2 x 7, i.e. the cell size the visual spec was drawn at. */
  max-width: 476px;
}

.ps-progress-media-cell {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  animation: ps-progress-in 0.28s ease both;
}

.ps-progress-media-cell__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ps-progress-media-cell__no {
  position: absolute;
  left: 6px;
  top: 5px;
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  color: #fff;
  opacity: 0.85;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.ps-progress-media-cell__cap {
  position: absolute;
  right: 6px;
  bottom: 5px;
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 9.5px;
  color: #fff;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

@media (prefers-reduced-motion: reduce) {
  .ps-progress-phase,
  .ps-progress-phase__ic,
  .ps-progress-media-cell {
    animation: none;
  }
}
._bubble_1523b_1 {
  margin: var(--ds-sys-space-md, 12px) 0;
  border-left: 2px solid var(--ds-color-outline-variant, );
  padding-left: var(--ds-sys-space-md, 12px);
}

._head_1523b_7 {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-sm, 8px);
  background: none;
  border: 0;
  padding: var(--ds-sys-space-sm, 8px) 0;
  cursor: pointer;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant, );
}

._head_1523b_7:disabled {
  cursor: default;
}

._caret_1523b_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_1523b_23 {
  transform: rotate(90deg);
}

/* Streaming: static marker only — no pulse/blink (process-state flash fix). */
[data-state="streaming"] ._caret_1523b_23 {
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  background: var(--ds-color-on-surface-variant, );
  opacity: 0.85;
}

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

._title_1523b_51 {
  color: var(--ds-color-on-surface, );
}

._duration_1523b_47 {
  font-variant-numeric: tabular-nums;
  color: var(--ds-color-on-surface-variant, );
}

._body_1523b_60 {
  margin-top: var(--ds-sys-space-sm, 8px);
  padding: var(--ds-sys-space-md, 12px);
  background: var(--ds-color-surface-container, );
  border-radius: var(--ds-corner-medium, );
  color: var(--ds-color-on-surface-variant, );
  font-size: 12px;
  white-space: pre-wrap;
  line-height: 1.6;
}

/* Soft static ellipsis — still reads as in-progress without flashing. */
[data-state="streaming"] ._body_1523b_60::after {
  content: "\2026";
  display: inline-block;
  margin-left: 2px;
  color: var(--ds-color-on-surface-variant, );
  opacity: 0.7;
}
/* 对话列表视频任务卡 — 过程态 B + 完成态 S1 */

.task-card {
  background: var(--ds-color-surface, );
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large, );
  padding: 14px 16px;
  margin: 0 0 8px;
  color: var(--ds-color-on-surface, );
}

.task-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.task-card-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.35;
}

.task-card-status-ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: #16a34a;
  white-space: nowrap;
}

.task-card-status-ok-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.task-card-status-fail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-color-error, );
  white-space: nowrap;
}

.task-card-status-fail-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}



.task-card--publish .task-card-head {
  margin-bottom: 12px;
  align-items: center;
}

.task-card--publish .task-card-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.task-card-publish-badge {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-primary, );
  background: color-mix(in srgb, var(--ds-color-primary, ) 10%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
}

.task-card--publish .task-card-result {
  margin-bottom: 10px;
}

.task-card--publish .task-card-result-meta {
  gap: 4px;
}

.task-card-publish-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--ds-color-outline-variant, );
}

.task-card-publish-stage {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ds-color-on-surface-variant, );
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--ds-color-outline-variant, );
}

.task-card-publish-stage.is-current {
  color: var(--ds-color-primary, );
  border-color: var(--ds-color-primary, );
  background: color-mix(in srgb, var(--ds-color-primary, ) 10%, transparent);
  font-weight: 600;
}

.task-card-publish-stage.is-done {
  color: var(--ds-color-on-surface-variant, );
  text-decoration: line-through;
  opacity: 0.7;
}

/* —— 过程态进度区（白底 + 左细条，无大灰底） —— */
.task-card-progress {
  margin-bottom: 4px;
}

.task-card-progress-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--ds-color-primary, );
}

.task-card-progress-body {
  flex: 1;
  min-width: 0;
}

.task-card-step-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.task-card-step-n,
.task-card-step-name {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ds-color-on-surface, );
  line-height: 1.3;
}

.task-card-think {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ds-color-on-surface, );
  max-height: calc(1.55em * 2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.task-card-think.muted {
  color: var(--ds-color-outline, );
}

.task-card-think.live::after {
  content: '';
  display: inline-block;
  width: 1.5px;
  height: 0.95em;
  margin-left: 1px;
  vertical-align: -0.12em;
  background: var(--ds-color-primary, );
  animation: task-card-caret 1s step-end infinite;
}

@keyframes task-card-caret {
  50% {
    opacity: 0;
  }
}

.task-card-ring {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: conic-gradient(var(--ds-color-primary, ) 0 120deg, rgba(24, 24, 27, 0.08) 120deg);
}

.task-card-ring.fail {
  background: none;
  border: 2px solid var(--ds-color-error, );
}

.task-card-ring-inner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ds-color-surface, );
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ds-typeface-code, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  color: var(--ds-color-on-surface, );
}

.task-card-ring.fail .task-card-ring-inner {
  color: var(--ds-color-error, );
}

.task-card-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
  padding: 8px 0 0;
  border: none;
  border-top: 1px solid var(--ds-color-outline-variant);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant, );
  cursor: pointer;
}

.task-card-chev {
  color: var(--ds-color-outline, );
  font-size: 11px;
}

/* 步骤时间线（展开） */
.task-stages {
  margin: 8px 0 2px;
}

.task-stage {
  display: flex;
  gap: 10px;
  padding: 3px 0;
}

.task-rail {
  width: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.task-sdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface, );
  margin-top: 5px;
}

.task-stage.done .task-sdot {
  background: var(--ds-color-on-surface, );
  border-color: var(--ds-color-on-surface, );
}

.task-stage.now .task-sdot {
  background: var(--ds-color-primary, );
  border-color: var(--ds-color-primary, );
  box-shadow: 0 0 0 3px rgba(77, 166, 255, 0.18);
}

.task-stage.fail .task-sdot {
  background: var(--ds-color-error, );
  border-color: var(--ds-color-error, );
}

.task-line {
  width: 1.5px;
  flex: 1;
  background: var(--ds-color-outline-variant);
  margin-top: 2px;
}

.task-stage:last-child .task-line {
  display: none;
}

.task-stage-body {
  flex: 1;
  padding-bottom: 4px;
}

.task-stage-name {
  font-size: 12.5px;
  font-weight: 600;
}

.task-stage.pending .task-stage-name {
  color: var(--ds-color-outline, );
  font-weight: 500;
}

.task-stage.done .task-stage-name {
  color: var(--ds-color-on-surface-variant, );
  font-weight: 500;
}

.task-flow {
  margin-top: 3px;
  border-left: 2px solid var(--ds-color-outline-variant);
  padding: 1px 0 1px 10px;
}

.task-flow-line {
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant, );
  padding: 1.5px 0;
}

.task-flow-line.live {
  color: var(--ds-color-on-surface, );
}

.task-flow-line.live::after {
  content: '▍';
  color: var(--ds-color-primary, );
  animation: task-blink 1s infinite;
}

@keyframes task-blink {
  50% {
    opacity: 0;
  }
}

/* ppt 逐页配音：N 页节点（未开始 / 进行中 / 已完成） */
.task-page-list {
  margin-top: 6px;
  padding: 0 0 2px 12px;
  border-left: 1px solid var(--ds-color-outline-variant);
  max-height: 280px;
  overflow-y: auto;
}

.task-page-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--ds-color-outline, );
}

.task-page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid var(--ds-color-outline-variant);
  background: transparent;
}

.task-page-label {
  flex: 1;
  min-width: 0;
}

.task-page-state {
  font-size: 11px;
  color: var(--ds-color-outline, );
}

.task-page-node.is-todo .task-page-dot {
  background: transparent;
}

.task-page-node.is-run {
  color: var(--ds-color-on-surface, );
  font-weight: 550;
}

.task-page-node.is-run .task-page-dot {
  border-color: var(--ds-color-primary, );
  background: var(--ds-color-primary, );
  box-shadow: 0 0 0 3px rgba(77, 166, 255, 0.2);
}

.task-page-node.is-run .task-page-state {
  color: var(--ds-color-on-primary, );
}

.task-page-node.is-done {
  color: var(--ds-color-on-surface-variant, );
}

.task-page-node.is-done .task-page-dot {
  border-color: var(--ds-color-secondary, );
  background: var(--ds-color-secondary, );
}

.task-page-node.is-done .task-page-state {
  color: var(--ds-color-secondary, );
}

/* 动作 */
.task-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ds-color-outline-variant);
}

.task-card-actions--success,
.task-card-actions--fail {
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.task-card-actions--success .task-card-btn-ghost,
.task-card-actions--fail .task-card-btn-ghost {
  margin-left: auto;
}

.task-card-actions--lite .task-card-btn-ghost {
  margin-left: 0;
}

.task-card-actions--lite button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.task-card-btn-link {
  font-size: 12px;
  color: var(--ds-color-on-primary, );
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.task-card-btn-stop {
  font-size: 12px;
  color: var(--ds-color-error, );
  background: var(--ds-color-surface, );
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: var(--ds-corner-small, );
  padding: 4px 10px;
  font-family: inherit;
  cursor: pointer;
}

.task-card-btn-ink {
  font-size: 12px;
  color: var(--ds-color-on-primary, );
  background: var(--ds-color-on-surface, );
  border: 1px solid var(--ds-color-on-surface, );
  border-radius: var(--ds-corner-small, );
  padding: 6px 14px;
  font-family: inherit;
  cursor: pointer;
}

.task-card-btn-soft {
  font-size: 12px;
  color: var(--ds-color-on-surface, );
  background: rgba(24, 24, 27, 0.04);
  border: 1px solid transparent;
  border-radius: var(--ds-corner-small, );
  padding: 6px 12px;
  font-family: inherit;
  cursor: pointer;
}

.task-card-btn-ghost {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant, );
  background: var(--ds-color-surface, );
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small, );
  padding: 6px 12px;
  font-family: inherit;
  cursor: pointer;
}

/* —— 完成态 S1 —— */
.task-card-result {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.task-card-thumb {
  width: 64px;
  height: 84px;
  border-radius: 10px;
  background: linear-gradient(165deg, #1a1a1c 0%, #3a3a40 55%, #2a2a2e 100%);
  border: 1px solid var(--ds-color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

/* 横版成片：相框转宽，比例取落库真实画幅 */
.task-card-thumb[data-orientation='landscape'] {
  width: 112px;
  height: auto;
  aspect-ratio: var(--media-aspect, 16 / 9);
}

.task-card-thumb.has-cover {
  background: #111;
}

.task-card-thumb--fail {
  background: linear-gradient(165deg, #2a1515 0%, #3a2020 55%, #241414 100%);
}

.task-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.task-card-thumb-play {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ds-color-on-surface, );
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.task-card-thumb-fail-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.2);
  color: #fecaca;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.task-card-result-step {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant, );
  margin-bottom: 4px;
}

.task-card-result-hint--fail {
  color: var(--ds-color-error, );
}

.task-card-result-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.task-card-result-ready {
  font-size: 14px;
  font-weight: 650;
  margin-bottom: 4px;
}

.task-card-result-hint {
  font-size: 12.5px;
  color: var(--ds-color-on-surface-variant, );
  line-height: 1.45;
}

/* 兼容旧 class 名（若别处引用） */
.task-timeline-card {
  /* 已迁移到 .task-card */
}

/* create-lite open timeline — 进行中步骤摊在对话轴，无视频卡壳 */
.task-open-flow {
  margin: 2px 0 10px;
  max-width: 420px;
}

.task-open-flow__meta {
  font-size: 12px;
  color: var(--ds-color-outline, );
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.task-open-flow__think {
  color: var(--ds-color-on-surface-variant, );
}

.task-open-flow__think.is-live {
  color: var(--ds-color-on-primary, );
}

.task-open-flow__axis {
  position: relative;
  margin: 0;
  padding: 0 0 0 18px;
}

.task-open-flow__axis::before {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 8px;
  bottom: 12px;
  width: 1px;
  background: var(--ds-color-outline-variant);
}

.task-open-flow__node {
  position: relative;
  padding: 5px 0 10px;
}

.task-open-flow__dot {
  position: absolute;
  left: -18px;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--ds-color-outline, );
  background: var(--ds-color-surface, );
  box-sizing: border-box;
}

.task-open-flow__node.is-done > .task-open-flow__dot {
  border-color: var(--ds-color-secondary, );
  background: var(--ds-color-secondary, );
  box-shadow: inset 0 0 0 2px var(--ds-color-surface, );
}

.task-open-flow__node.is-now > .task-open-flow__dot {
  border-color: var(--ds-color-primary, );
  background: radial-gradient(
    circle at center,
    var(--ds-color-primary, ) 0 38%,
    transparent 42%
  );
}

.task-open-flow__node.is-fail > .task-open-flow__dot {
  border-color: var(--ds-color-error, );
  background: var(--ds-color-error, );
}

.task-open-flow__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 20px;
}

.task-open-flow__lbl {
  font-size: 13px;
  color: var(--ds-color-on-surface-variant, );
  font-weight: var(--ds-font-body-medium-weight);
}

.task-open-flow__node.is-now .task-open-flow__lbl,
.task-open-flow__node.is-done .task-open-flow__lbl {
  color: var(--ds-color-on-surface, );
  font-weight: 550;
}

.task-open-flow__status {
  margin-left: auto;
  font-size: 12px;
  color: var(--ds-color-on-primary, );
}

.task-open-flow__status.is-done {
  color: var(--ds-color-secondary, );
}

.task-open-flow__status.is-fail {
  color: var(--ds-color-error, );
}

.task-open-flow__sub {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-open-flow__chip {
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant, );
  background: var(--ds-color-surface-container, );
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 999px;
  padding: 2px 8px;
}

.task-open-flow__chip.is-live {
  color: var(--ds-color-on-primary, );
  border-color: rgba(77, 166, 255, 0.35);
}

.task-open-flow__actions {
  margin-top: 4px;
  padding-left: 18px;
}

/* stage redeploy: chat-video-task-card fail-parity */
.failure-explain-card { background: var(--ds-color-surface); border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-large); padding: 14px 16px; margin-top: 8px; }
.failure-kv { display: flex; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.failure-kv span { color: var(--ds-color-on-surface-variant); min-width: 42px; }
.failure-kv strong { font-weight: 400; color: var(--ds-color-on-surface); }
.failure-actions { display: flex; gap: 8px; margin-top: 10px; }
.failure-actions button { font-size: 12.5px; padding: 6px 14px; border-radius: var(--ds-corner-small); border: 1px solid var(--ds-color-outline-variant); background: var(--ds-color-surface); color: var(--ds-color-on-surface); cursor: pointer; }
.failure-actions .primary { background: var(--ds-color-on-surface); color: var(--ds-color-surface); font-weight: 600; }
.failure-actions .ghost { color: var(--ds-color-on-surface-variant); }
/*
 * LiteVideoCard — 设计稿 docs/design/2026-08-08-conversation-video-card-unification.html
 * 的 .vc 前缀换 .lvc。颜色一律消费 --ds-color-* 标准 token（design.md §2.3），
 * 暗色由 token 自身反相，不写 data-theme 分支。
 * 例外：叠在封面图上的播放键 / 时长角标 / 压暗渐变用固定色 —— 它们盖在真实视频帧上，
 * 跟随主题反相反而会在深色封面上不可读。
 */
.lvc {
  --lvc-r-card: 14px;
  --lvc-r-thumb: 10px;
  --lvc-shade: color-mix(in srgb, var(--ds-color-on-surface) 5%, transparent);

  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--lvc-r-card);
  background: var(--ds-color-surface);
  width: 100%;
  max-width: 520px;
  color: var(--ds-color-on-surface);
  box-sizing: border-box;
}

.lvc[data-orientation='landscape'] {
  grid-template-columns: 172px minmax(0, 1fr);
}

/* --- 封面 --- */
.lvc-thumb {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--lvc-r-thumb);
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
}

.lvc[data-orientation='landscape'] .lvc-thumb {
  aspect-ratio: 16 / 9;
}

.lvc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 压暗封面底部托住时长角标；盖在图上，固定色（见文件头例外说明） */
.lvc-thumb--cover::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.52));
}

.lvc-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s ease;
}

.lvc-thumb--cover:hover::after {
  background: rgba(0, 0, 0, 0.18);
}

/* 盖在封面图上，固定白底 ink 三角（见文件头例外说明） */
.lvc-play {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #101012;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  padding-left: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
  z-index: 2;
}

.lvc-thumb--cover:hover /* 盖在封面图上，固定白底 ink 三角（见文件头例外说明） */
.lvc-play {
  transform: scale(1.1);
}

/* 盖在封面图上，固定黑底白字（见文件头例外说明） */
.lvc-dur {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 2;
  height: 17px;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.66);
  color: #fff;
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
}

.lvc-thumb--empty {
  cursor: default;
  background:
    repeating-linear-gradient(135deg, transparent 0 6px, var(--lvc-shade) 6px 7px),
    var(--ds-color-surface-container);
}

.lvc-thumb--fail {
  cursor: default;
  border-color: var(--ds-color-on-surface);
  background:
    repeating-linear-gradient(135deg, transparent 0 6px, var(--lvc-shade) 6px 7px),
    var(--ds-color-surface-container);
}

.lvc-mark {
  color: var(--ds-color-on-surface);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.lvc-prog {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.lvc-ring {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--ds-color-surface-container-highest);
  border-top-color: var(--ds-color-on-surface);
  animation: lvc-spin 0.9s linear infinite;
}

.lvc-prog-n {
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ds-color-outline);
}

@keyframes lvc-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- 右列 --- */
.lvc-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lvc-titlerow {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.lvc-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.008em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lvc-status {
  flex-shrink: 0;
  font-family: var(--ds-typeface-code);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ds-color-outline);
  white-space: nowrap;
}

.lvc[data-status='failed'] .lvc-status {
  color: var(--ds-color-on-surface);
}

.lvc-sub {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ds-color-on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lvc-meta {
  margin-top: 1px;
  font-family: var(--ds-typeface-code);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.035em;
  color: var(--ds-color-outline);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lvc-meta .lvc-sep {
  opacity: 0.4;
  padding: 0 5px;
}

.lvc-lang {
  display: inline-flex;
  align-items: center;
  height: 17px;
  padding: 0 6px;
  margin-right: 7px;
  border-radius: 4px;
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.lvc-reason {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ds-color-on-surface-variant);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* --- 动作 --- */
.lvc-acts {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 -4px -8px;
}

.lvc-btn {
  height: 27px;
  padding: 0 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}

.lvc-btn:hover {
  background: var(--lvc-shade);
  color: var(--ds-color-on-surface);
}

.lvc-btn:focus-visible {
  outline: 2px solid var(--ds-color-on-surface);
  outline-offset: 1px;
}

.lvc-btn--lead {
  color: var(--ds-color-on-surface);
}

.lvc-video-meta {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .lvc-ring {
    animation: none;
  }

  .lvc-thumb--cover:hover /* 盖在封面图上，固定白底 ink 三角（见文件头例外说明） */
.lvc-play {
    transform: none;
  }
}
._card_1wcqe_1 {
  width: min(100%, 640px);
  margin: 10px 0 14px;
  padding: 16px;
  border: 1px solid var(--ds-color-border, #e5e7eb);
  border-radius: 14px;
  background: var(--ds-color-surface, #fff);
  color: var(--ds-color-text, #111827);
}

._header_1wcqe_11,
._phaseLine_1wcqe_12,
._badges_1wcqe_13 {
  display: flex;
  align-items: center;
}

._header_1wcqe_11 {
  justify-content: space-between;
  gap: 16px;
}

._heading_1wcqe_23 {
  min-width: 0;
}

._heading_1wcqe_23 strong {
  display: block;
  overflow: hidden;
  font-size: 16px;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._heading_1wcqe_23 p,
._error_1wcqe_37,
._hint_1wcqe_38 {
  margin: 0;
}

._heading_1wcqe_23 p {
  margin-top: 3px;
  color: var(--ds-color-text-secondary, #6b7280);
  font-size: 13px;
  line-height: 20px;
}

._badges_1wcqe_13 {
  flex: none;
  gap: 6px;
}

._mode_1wcqe_54,
._status_1wcqe_55 {
  padding: 3px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 12px;
  line-height: 18px;
}

._card_1wcqe_1[data-state='running'] ._status_1wcqe_55 {
  background: #eff6ff;
  color: #2563eb;
}

._card_1wcqe_1[data-state='completed'] ._status_1wcqe_55 {
  background: #ecfdf5;
  color: #047857;
}

._card_1wcqe_1[data-state='failed'] ._status_1wcqe_55 {
  background: #fef2f2;
  color: #dc2626;
}

._card_1wcqe_1[data-state='video-unavailable'] ._status_1wcqe_55 {
  background: #fffbeb;
  color: #b45309;
}

._phases_1wcqe_84 {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ds-color-border, #e5e7eb);
}

._phase_1wcqe_12 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

._dot_1wcqe_98 {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  flex: none;
  border-radius: 50%;
  background: #d1d5db;
}

._phase_1wcqe_12[data-status='running'] ._dot_1wcqe_98 {
  background: #3b82f6;
  box-shadow: 0 0 0 3px #dbeafe;
}

._phase_1wcqe_12[data-status='completed'] ._dot_1wcqe_98 {
  background: #22c55e;
}

._phase_1wcqe_12[data-status='failed'] ._dot_1wcqe_98 {
  background: #ef4444;
}

._phaseBody_1wcqe_120 {
  min-width: 0;
  flex: 1;
}

._phaseLine_1wcqe_12 {
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  line-height: 22px;
}

._phaseState_1wcqe_132 {
  flex: none;
  color: var(--ds-color-text-secondary, #6b7280);
  font-size: 13px;
}

._error_1wcqe_37 {
  margin-top: 2px;
  color: #dc2626;
  font-size: 13px;
  line-height: 20px;
}

._hint_1wcqe_38 {
  margin-top: 14px;
  color: var(--ds-color-text-secondary, #6b7280);
  font-size: 13px;
  line-height: 20px;
}

._video_1wcqe_152 {
  margin-top: 14px;
}

@media (max-width: 640px) {
  ._card_1wcqe_1 {
    padding: 14px;
  }

  ._header_1wcqe_11 {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}
/* 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 隐藏 */
/* Island 内状态行：无大红框；中文单行标题 */
.current-task-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  box-sizing: border-box;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.04),
    0 8px 24px -12px rgba(0, 0, 0, 0.12);
}

.current-task-main {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-color-on-surface, );
  cursor: pointer;
  gap: 10px;
  font: inherit;
  text-align: left;
}

.current-task-mark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.current-task-mark.run {
  background: var(--ds-color-primary-container, );
  color: var(--ds-color-primary, );
}

.current-task-mark.fail {
  background: #fdf2f1;
  color: #c23b2c;
}

.current-task-message {
  flex: 1;
  overflow: hidden;
  color: var(--ds-color-on-surface, );
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-task-pill.fail .current-task-message {
  color: #9a2e22;
}

.current-task-go {
  flex-shrink: 0;
  color: var(--ds-color-on-surface-variant, );
  font-size: 12px;
  font-weight: 500;
}

.current-task-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.current-task-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: var(--ds-color-on-surface, );
  cursor: pointer;
  font-size: 12px;
  font-weight: 550;
  font-family: inherit;
}

.current-task-btn.quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ds-color-on-surface-variant, );
}

.current-task-btn.primary {
  background: var(--ds-color-on-surface, );
  border-color: var(--ds-color-on-surface, );
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.35);
}

/* 旧 class 兼容（测试 / 残留） */
.current-task-dot {
  display: none;
}
.current-task-step {
  display: none;
}
.current-task-actions button {
  /* fallback if not using current-task-btn */
}
/**
 * 底部上下文行动槽 — Island 壳（对标 Figma 浮层 + Claude 选项气质）
 * 设计稿: docs/design/2026-07-16-context-action-slot-research-hifi.html
 * 表面/边框/选项一律走 --ds-*，亮暗主题由 F1 token 分流。
 */

.context-action-island {
  width: 100%;
  margin-bottom: 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ds-color-surface, ) 92%, transparent);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  border: 1px solid var(--ds-color-outline-variant);
  box-shadow:
    0 0 0 0.5px color-mix(in srgb, var(--ds-color-on-surface, ) 6%, transparent),
    0 1px 2px color-mix(in srgb, var(--ds-color-on-surface, ) 4%, transparent),
    0 12px 32px -8px color-mix(in srgb, var(--ds-color-on-surface, ) 14%, transparent),
    0 24px 48px -16px color-mix(in srgb, var(--ds-color-on-surface, ) 8%, transparent);
  overflow: hidden;
  box-sizing: border-box;
}

.context-action-island.is-fused {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

/* —— 状态行 —— */
.cai-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px 8px 12px;
  box-sizing: border-box;
}

.cai-status:has(.cai-choice-hint) {
  align-items: flex-start;
}

.cai-status:has(.cai-choice-hint) .cai-mark {
  margin-top: 1px;
}

.cai-status + .cai-composer,
.cai-status + .context-action-island__composer,
.cai-choices + .cai-composer,
.cai-choices + .context-action-island__composer {
  border-top: 1px solid var(--ds-color-outline-variant);
}

.cai-mark {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.cai-mark--run {
  background: var(--ds-color-primary-container, );
  color: var(--ds-color-primary, );
}

.cai-mark--fail {
  background: color-mix(in srgb, var(--ds-color-error, ) 14%, var(--ds-color-surface));
  color: var(--ds-color-error, );
}

.cai-mark--ask {
  background: var(--ds-color-primary-container, );
  color: var(--ds-color-primary-container, );
}

.cai-mark--ok {
  background: color-mix(in srgb, var(--ds-color-secondary, ) 14%, var(--ds-color-surface));
  color: var(--ds-color-secondary, );
}

.cai-mark--guide {
  background: var(--ds-color-surface-container, );
  color: var(--ds-color-on-surface-variant, );
}

.cai-copy {
  flex: 1;
  min-width: 0;
}

.cai-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-color-on-surface, );
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cai-status--fail .cai-title {
  color: var(--ds-color-error, );
}

.cai-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Claude 式选项胶囊 */
.cai-opt {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface, );
  font-size: 12px;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: var(--ds-color-on-surface, );
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.cai-opt:hover {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container, );
}

.cai-opt--primary {
  background: var(--ds-color-on-surface, );
  border-color: var(--ds-color-on-surface, );
  color: var(--ds-color-surface, );
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ds-color-on-primary, ) 12%, transparent) inset,
    0 6px 14px -6px color-mix(in srgb, var(--ds-color-on-surface, ) 35%, transparent);
}

.cai-opt--primary:hover {
  background: color-mix(in srgb, var(--ds-color-on-surface, ) 88%, var(--ds-color-surface));
  border-color: color-mix(in srgb, var(--ds-color-on-surface, ) 88%, var(--ds-color-surface));
}

.cai-opt--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ds-color-on-surface-variant, );
  font-weight: 500;
}

.cai-opt--quiet:hover {
  color: var(--ds-color-on-surface, );
  background: color-mix(in srgb, var(--ds-color-on-surface, ) 6%, transparent);
}

.cai-opt:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* 开放素材 Claude 双选项列表 */
.cai-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
}

.cai-choices-heading {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-color-on-surface, );
  padding: 2px 2px 4px;
}

.cai-choice {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container, );
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.cai-choice:hover:not(:disabled) {
  background: var(--ds-color-surface, );
  border-color: var(--ds-color-on-surface-variant);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ds-color-on-surface, ) 4%, transparent);
}

.cai-choice--preferred {
  background: var(--ds-color-surface, );
  border-color: color-mix(in srgb, var(--ds-color-on-primary, ) 45%, var(--ds-color-on-surface-variant));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-primary, ) 14%, transparent);
}

.cai-choice:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cai-choice-body {
  flex: 1;
  min-width: 0;
}

.cai-choice-label {
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -0.015em;
  color: var(--ds-color-on-surface, );
}

.cai-choice-hint {
  font-size: 11.5px;
  color: var(--ds-color-outline, );
  margin-top: 2px;
  line-height: 1.35;
}

.cai-choice-arrow {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ds-color-on-surface, );
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
}

.cai-choice-arrow::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 6px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--ds-color-on-primary, );
  border-top: 1.5px solid var(--ds-color-on-primary, );
  transform: rotate(45deg);
}

.cai-choice-arrow--muted {
  background: var(--ds-color-outline, );
}

/* 「以后都」嵌在「用开放素材」选项内 */
.cai-nested-remember {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ds-color-outline-variant);
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant, );
  line-height: 1.4;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.cai-nested-remember input {
  margin: 1px 0 0;
  width: 13px;
  height: 13px;
  accent-color: var(--ds-color-on-surface, );
  flex-shrink: 0;
}

/* 输入区并入 island */
.context-action-island__composer {
  /* 子节点保留原 inputContainerStyle 外观时，去掉外层双层边框 */
}

.context-action-island:not(.is-fused) .context-action-island__composer > [data-cai-input] {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--ds-color-surface, ) 55%, transparent) !important;
}

/* CurrentTaskPill 嵌入 island 时去重外壳 */
.context-action-island .current-task-pill {
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 8px 10px 8px 12px;
  min-height: 44px;
}

.context-action-island .current-task-pill.fail {
  border: none;
}

.context-action-island .current-task-actions button {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 550;
}

/* CurrentTaskPill 使用 .primary / .quiet（非 .cai-primary） */
.context-action-island .current-task-actions button.primary {
  background: var(--ds-color-on-surface, );
  border-color: var(--ds-color-on-surface, );
  color: var(--ds-color-on-primary, );
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ds-color-on-primary, ) 12%, transparent) inset,
    0 6px 14px -6px color-mix(in srgb, var(--ds-color-on-surface, ) 35%, transparent);
}

.context-action-island .current-task-actions button.quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ds-color-on-surface-variant, );
  font-weight: 500;
}

/* 状态行与输入之间的分割线（hifi status + composer） */
.context-action-island:not(.is-fused) .cai-status + .context-action-island__composer,
.context-action-island:not(.is-fused) .cai-choices + .context-action-island__composer,
.context-action-island:not(.is-fused) .current-task-pill + .context-action-island__composer {
  border-top: 1px solid var(--ds-color-outline-variant);
}

/* 空状态（仅输入）时 composer 仍是 island 主体 */
.context-action-island:not(.is-fused) .context-action-island__composer > [data-cai-input] {
  min-height: 48px;
  padding-left: 14px !important;
}
/**
 * U33 pure document renderer styles.
 * No 300px card shell, no internal overflow scroller — scroll lives on U32 #articleDocument.
 */

.article-stream-doc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  width: 100%;
  /* 不可收缩：阅读器是 column flex + overflow-y:auto，本块与 #publishJob 是它的
     两个 flex item。允许收缩时正文会被压到比内容矮（实测 507px vs 内容约 600px），
     而本块 overflow 是 visible —— 正文直接画到发布时间线上，滚动条也只认被压后的
     高度，到不了真正的底。grow 保留，内容不足时仍撑满阅读器。 */
  flex: 1 0 auto;
  color: var(--ds-color-on-surface-variant);
}

.article-stream-doc__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
}

.article-stream-doc__title {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.4;
  overflow-wrap: anywhere;
  min-height: 1.4em;
}

.article-stream-doc__title.is-edit-affordance,
.article-stream-doc__paragraph.is-edit-affordance,
.article-stream-doc__heading.is-edit-affordance {
  cursor: pointer;
}

.article-stream-doc__title.is-edit-affordance:focus-visible,
.article-stream-doc__paragraph.is-edit-affordance:focus-visible,
.article-stream-doc__heading.is-edit-affordance:focus-visible {
  outline: 2px solid rgba(24, 24, 27, 0.28);
  outline-offset: 2px;
}

/* FP2: local failure / confirmation affordances (no width constant changes) */
.article-stream-doc__title-wrap,
.article-stream-doc__para-wrap,
.article-stream-doc__image-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.article-stream-doc__heading {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.article-stream-doc__target-error {
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid color-mix(in srgb, var(--ds-color-error) 30%, var(--ds-color-outline-variant));
  background: color-mix(in srgb, var(--ds-color-error) 8%, var(--ds-color-surface));
  color: var(--ds-color-error);
}

.article-stream-doc__target-error.is-unsaved {
  cursor: pointer;
  font-weight: 600;
  border-color: color-mix(in srgb, var(--ds-color-warning, #f59e0b) 40%, var(--ds-color-outline-variant));
  background: color-mix(in srgb, var(--ds-color-warning, #f59e0b) 12%, var(--ds-color-surface));
  color: var(--ds-color-on-surface);
}

.article-stream-doc__target-error.is-needs-input,
.article-stream-doc__target-error.is-consumed {
  border-color: var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
}

.article-stream-doc__confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
}

.article-stream-doc__confirm-shell {
  font-size: 12px;
  font-weight: 650;
  color: var(--ds-color-on-surface);
}

.article-stream-doc__confirm-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.article-stream-doc__confirm-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  border: 1px dashed var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}

.article-stream-doc__confirm-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
}

.article-stream-doc__confirm-text {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ds-color-on-surface);
  overflow-wrap: anywhere;
}

.article-stream-doc__confirm-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.article-stream-doc__confirm-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.article-stream-doc__confirm-btn.is-ghost {
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.article-stream-doc__para-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.article-stream-doc__pbtn {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  cursor: pointer;
}

.article-stream-doc__pbtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.article-stream-doc__empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 12px;
  border-radius: 10px;
  border: 1px dashed var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.55;
}

.article-stream-doc__empty strong {
  color: var(--ds-color-on-surface);
  font-size: 14px;
}

.article-stream-doc__cursor {
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -0.12em;
  animation: article-stream-doc-blink 1s steps(1, end) infinite;
}

.article-stream-doc__outline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: 8px;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.5;
}

.article-stream-doc__outline.is-placeholder {
  border-style: dashed;
  opacity: 0.7;
}

.article-stream-doc__outline-item {
  overflow-wrap: anywhere;
}

.article-stream-doc__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article-stream-doc__paragraph {
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.article-stream-doc__image {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  margin: 4px 0;
  border-radius: 10px;
  background: linear-gradient(150deg, #eef2f7, #e2e8f0);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  overflow: hidden;
}

.article-stream-doc__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-stream-doc__image span {
  position: relative;
  z-index: 1;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.78);
}

.article-stream-doc__image.is-pending {
  border: 1px dashed var(--ds-color-outline-variant);
  background: transparent;
  min-height: 72px;
}

.article-stream-doc__image.is-failed {
  border: 1px solid color-mix(in srgb, var(--ds-color-error) 35%, var(--ds-color-outline-variant));
  background: color-mix(in srgb, var(--ds-color-error) 7%, var(--ds-color-surface));
  color: var(--ds-color-error);
  min-height: 88px;
}

.article-stream-doc__image-retry {
  position: relative;
  z-index: 1;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  cursor: pointer;
}

.article-stream-doc__image-retry:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

html[data-theme='dark'] .article-stream-doc__image {
  background: linear-gradient(
    150deg,
    var(--ds-color-surface-container),
    var(--ds-color-surface-container-high)
  );
}

html[data-theme='dark'] .article-stream-doc__image span {
  background: rgba(18, 18, 20, 0.72);
}

html[data-theme='dark'] .article-stream-doc__image.is-pending {
  background: transparent;
}

/* Document-inline placeholders — no second paper card. */
.article-stream-doc__skeleton {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 2px 0 4px;
}

.article-stream-doc__skeleton-line {
  height: 11px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ds-color-on-surface) 7%, transparent);
  animation: article-stream-skeleton-pulse 1.4s ease-in-out infinite;
}

.article-stream-doc__skeleton-line.is-title {
  height: 18px;
  width: 68%;
}

.article-stream-doc__skeleton-line.is-short {
  width: 42%;
}

html[data-theme='dark'] .article-stream-doc__skeleton-line {
  background: color-mix(in srgb, var(--ds-color-on-surface) 12%, transparent);
}

@keyframes article-stream-skeleton-pulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* Writing-head dock: subtle strip, not a nested result card. */
.article-stream-doc__writing-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 0 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--ds-color-outline-variant);
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

.article-stream-doc__writing-head-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ds-color-on-surface);
  font-weight: 600;
}

.article-stream-doc__writing-head-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-color-primary, #70a9ff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-primary, #70a9ff) 16%, transparent);
  flex-shrink: 0;
}

.article-stream-doc[data-mode='complete_readonly'] .article-stream-doc__writing-head-label::before {
  background: var(--ds-color-success, #43cc83);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-success, #43cc83) 14%, transparent);
}

.article-stream-doc[data-mode='interrupted'] .article-stream-doc__writing-head-label::before {
  background: var(--ds-color-error, #e68b8b);
  box-shadow: none;
}

.article-stream-doc__transport {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--ds-color-outline-variant);
  background: color-mix(in srgb, var(--ds-color-warning, #f59e0b) 10%, var(--ds-color-surface));
  color: var(--ds-color-on-surface);
  font-size: 12px;
}

/* F3: match .rnote mute-ink chrome — no pink fill; only err accent on left edge */
.article-stream-doc__interrupt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--wb-line);
  border-left: 2px solid var(--wb-err);
  background: var(--wb-panel);
  color: var(--wb-mut);
  font-size: 12px;
}

.article-stream-doc__interrupt-actions {
  display: flex;
  gap: 8px;
}

.article-stream-doc__continue {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-size: 12px;
  cursor: pointer;
}

.article-stream-doc__continue:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.article-stream-doc__follow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--ds-color-outline-variant);
  background: color-mix(in srgb, var(--ds-color-surface-container) 70%, transparent);
}

.article-stream-doc__follow-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.article-stream-doc__follow-btn:hover {
  filter: brightness(1.05);
}

@keyframes article-stream-doc-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

/* Legacy class kept for any residual test selectors during migration — no card shell. */
.create-lite-article-live {
  width: 100%;
  max-height: none;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.create-lite-article-live__body {
  max-height: none;
  padding: 0;
  overflow: visible;
}
.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; }
/* Research doc workbench: thin chrome on top of shared 05-B reader classes. */

.create-lite-research-doc-panel.article-workbench {
  position: relative;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.create-lite-research-doc-panel .create-lite-panel-shell {
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.create-lite-research-doc-panel .create-lite-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.create-lite-research-doc-panel .article-workbench__document {
  flex: 1 1 auto;
  min-height: 0;
}

.create-lite-research-doc-save-state {
  margin-top: 4px;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--wb-dim, var(--ds-color-on-surface-variant));
  letter-spacing: .02em;
}

.create-lite-research-doc-block + .create-lite-research-doc-block {
  /* 块间距全部交给 05-B 的 .reader h4 (22px) + 段落 (14px)，与成稿一致。 */
  margin-top: 0;
}

.create-lite-research-doc-panel .ed {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  /* 就地编辑：不露 textarea 把手，高度由 rows 跟着内容走。 */
  resize: none;
  padding: 4px 6px;
  margin: 0;
}

.create-lite-research-doc-panel .rt .tx.ed {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.02em;
  min-width: 0;
  flex: 1;
}

.create-lite-research-doc-panel .create-lite-research-doc-block-title.ed {
  margin: 22px 0 10px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--wb-ink, var(--ds-color-on-surface));
  resize: none;
}

.create-lite-research-doc-panel .create-lite-research-doc-block-body.ed {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--wb-ink2, var(--ds-color-on-surface-variant));
  min-height: 4.5em;
}

.create-lite-research-doc-panel .ed:focus,
.create-lite-research-doc-panel .ed.focus {
  outline: none;
  border-color: color-mix(in srgb, var(--wb-ink, #18181b) 18%, transparent);
  box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.12);
  background: color-mix(in srgb, var(--wb-panel, #fff) 92%, var(--wb-line, #e4e4e7));
}

.create-lite-research-doc-panel .ml-editor-markdown-preview {
  /* 素材库那份给独立页面留了 min-height:120px，在 420 读体里会把每块之间
     撑出一大段空白，节奏比 05-B 松。读体按内容真实高度排。 */
  min-height: 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--wb-ink2, var(--ds-color-on-surface-variant));
}

.create-lite-research-doc-panel .ml-editor-markdown-preview p {
  margin: 0 0 14px;
}


/* 每段悬浮出的「AI 润色」：贴在该段上方右侧，不占常驻位、不推动正文。 */
.create-lite-research-doc-block {
  position: relative;
}

.create-lite-research-doc-block-tools {
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

.create-lite-research-doc-block:hover .create-lite-research-doc-block-tools,
.create-lite-research-doc-block:focus-within .create-lite-research-doc-block-tools {
  opacity: 1;
  pointer-events: auto;
}

.create-lite-research-doc-polish {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid var(--wb-line, #e8e8ec);
  background: var(--wb-panel, #fff);
  color: var(--wb-ink, #18181b);
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
}

.create-lite-research-doc-polish:disabled {
  color: var(--wb-dim, #a1a1aa);
  cursor: not-allowed;
  box-shadow: none;
}

/* 润色进行中要一直可见，否则鼠标一移开就看不到状态。 */
.create-lite-research-doc-panel[data-polishing='true'] .create-lite-research-doc-block-tools {
  opacity: 1;
  pointer-events: auto;
}
.material-asset-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  color: var(--ds-color-on-surface);
}

.material-asset-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.material-asset-detail__head span {
  color: var(--ds-color-outline, );
  font-size: 11px;
}

.material-asset-detail__head h3 {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.45;
}

.material-asset-detail__head .material-asset-detail__ready {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  color: #72d39a;
  background: rgba(70, 197, 126, 0.1);
}

.material-asset-detail__video {
  width: 100%;
  max-height: 430px;
  border-radius: 12px;
  background: #090a0d;
}

.material-asset-detail__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.material-asset-detail__meta > div {
  padding: 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 9px;
  background: var(--ds-color-surface-container);
}

.material-asset-detail__meta dt {
  color: var(--ds-color-outline, );
  font-size: 10px;
}

.material-asset-detail__meta dd {
  margin: 4px 0 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

.material-asset-detail__empty {
  padding: 28px 12px;
  color: var(--ds-color-outline, );
  text-align: center;
  font-size: 12px;
}
/* 右栏「编辑作品」— 主成片(full) + 多语言(light) 同壳。
 * 主题自适应（--ds-* 明暗自动翻转）+ 融入右侧工作台（去独立卡壳、与「成片预览」同视觉语言）。
 * 作用域限定 .create-lite-edit-work：不影响 console_canvas 画布里同组件 ClipEditNode。 */

.create-lite-edit-work.stage-body--edit {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.create-lite-edit-work-scroll {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.create-lite-edit-work-fill-notice {
  flex: 0 0 auto;
  margin: 0 0 8px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--ds-color-primary) 34%, var(--ds-color-outline-variant));
  border-radius: 9px;
  background: color-mix(in srgb, var(--ds-color-primary) 12%, var(--ds-color-surface-container));
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 650;
  text-align: center;
}

.create-lite-edit-work .clip-u70-editor-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  background: var(--ds-color-surface);
  font-size: 11px;
}

.create-lite-edit-work .clip-u70-editor-summary > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.create-lite-edit-work .clip-u70-editor-summary span {
  color: var(--ds-color-on-surface-variant);
}

.create-lite-edit-work .clip-u70-editor-summary b {
  overflow: hidden;
  color: var(--ds-color-on-surface);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-lite-edit-work .clip-u70-terminal-summary {
  display: grid;
  gap: 4px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ds-color-primary) 32%, var(--ds-color-outline-variant));
  border-radius: 8px;
  background: color-mix(in srgb, var(--ds-color-primary) 8%, var(--ds-color-surface));
  color: var(--ds-color-on-surface);
  font-size: 12px;
}

.create-lite-edit-work .clip-u70-terminal-summary span {
  color: var(--ds-color-on-surface-variant);
}

/* ClipEditNode 在右栏内占满宽度，不依赖 ReactFlow 节点尺寸 */
.create-lite-edit-work-scroll .clip-edit-card,
.create-lite-edit-work-scroll .clip-node.clip-edit-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ── shell 卡（loading / error / skeleton 态）：主题自适应、扁平融入 ── */
.create-lite-edit-work-card.clip-edit-card {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
  flex: 1;
  border-radius: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  box-shadow: none;
  overflow: hidden;
}

.create-lite-edit-work-head.clip-node-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  flex-shrink: 0;
}

.create-lite-edit-work-head .clip-node-title {
  font-weight: 650;
  font-size: 13.5px;
  letter-spacing: -0.02em;
  color: var(--ds-color-on-surface);
}

.create-lite-edit-work-error,
.create-lite-edit-work-loading,
.create-lite-edit-work-light-stub {
  margin: 12px;
  color: var(--ds-color-on-surface-variant);
}

.create-lite-edit-work-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 16px;
  min-height: 0;
  overflow: auto;
  flex: 1;
}

.create-lite-edit-work-skeleton-row {
  height: 72px;
  border-radius: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ds-color-on-surface) 3%, transparent) 0%,
    color-mix(in srgb, var(--ds-color-on-surface) 8%, transparent) 50%,
    color-mix(in srgb, var(--ds-color-on-surface) 3%, transparent) 100%
  );
  background-size: 200% 100%;
}

/* ==========================================================================
 * ClipEditNode 主题重映射 + 融入工作台
 * clip-cards.css 为 console_canvas 画布（浅色纸面）硬编码浅色、无明暗主题；
 * 塞进 create-lite 主题自适应工作台里，暗色下是刺眼白框、亮色下是独立白卡。
 * 此处仅在 .create-lite-edit-work 作用域内把硬编码色重映射到设计系统 --ds-*
 * token，并去掉独立卡壳，使之与「成片预览」融为一体。画布侧同组件不受影响。
 * ========================================================================== */

/* 去卡壳：ClipEditNode 铺满右栏，无独立卡的边框/圆角/阴影/白底/内部滚动 */
.create-lite-edit-work .clip-node.clip-edit-card {
  max-height: none;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  color: var(--ds-color-on-surface);
}

/* 卡头：细分隔线 + 主题标题/徽章（不再是白卡头） */
.create-lite-edit-work .clip-edit-card--hifi .clip-node-head {
  min-height: 40px;
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}
.create-lite-edit-work .clip-node-title {
  color: var(--ds-color-on-surface);
}
.create-lite-edit-work .clip-edit-card--hifi .clip-active-edit-badge {
  background: color-mix(in srgb, var(--ds-color-primary) 16%, transparent);
  color: var(--ds-color-on-primary);
  border: 1px solid color-mix(in srgb, var(--ds-color-primary) 30%, var(--ds-color-outline-variant));
}

/* 音频固定提示（结构锁）：柔和 warning，随主题 */
.create-lite-edit-work .clip-structure-lock-notice {
  background: color-mix(in srgb, var(--ds-color-warning) 12%, var(--ds-color-surface));
  border: 1px solid color-mix(in srgb, var(--ds-color-warning) 30%, var(--ds-color-outline-variant));
  color: var(--ds-color-on-surface-variant);
}

/* 分镜表：单一滚动（交给外层 scroll），表头主题化
 * 580px 编辑栏：四列主轴 + 操作列（序号 / 素材 / 文案 / 时长 / 删） */
.create-lite-edit-work .clip-scene-table {
  max-height: none;
  overflow: visible;
  padding: 0 2px 8px;
}
.create-lite-edit-work .clip-scene-table-head,
.create-lite-edit-work .clip-scene-row {
  grid-template-columns: 40px 112px minmax(0, 1fr) 56px 32px;
  gap: 10px;
  align-items: start;
}
.create-lite-edit-work .clip-scene-table-head {
  color: var(--ds-color-on-surface-variant);
  padding: 0 10px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 分镜行：--ds-bg-alt 分层，主题边框/文字 */
.create-lite-edit-work .clip-scene-row {
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 14px;
  padding: 10px;
}
.create-lite-edit-work .clip-edit-card--hifi .clip-scene-row:hover,
.create-lite-edit-work .clip-edit-card--hifi .clip-scene-row:focus-within {
  background: var(--ds-color-surface-container);
  border-color: var(--ds-color-on-surface-variant);
}
.create-lite-edit-work .clip-edit-card--hifi .clip-scene-row.is-dirty {
  border-color: var(--ds-color-primary);
  background: color-mix(in srgb, var(--ds-color-primary) 8%, var(--ds-color-surface-container));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-primary) 14%, transparent);
}

/* 序号块 */
.create-lite-edit-work .clip-scene-row .clip-row-index {
  width: 36px;
  height: 26px;
  margin-top: 4px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 750;
}

/* 素材：9:16 短视频缩略图 + 更换按钮分行 */
.create-lite-edit-work .clip-row-material {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  align-items: flex-start;
}
.create-lite-edit-work .clip-row-material-thumb {
  width: 56px;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 10px;
  background: var(--ds-color-surface-container-high);
}
.create-lite-edit-work .clip-row-material-thumb.is-active {
  outline-color: var(--ds-color-primary);
}
.create-lite-edit-work .clip-row-material-thumb img,
.create-lite-edit-work .clip-row-material-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.create-lite-edit-work .clip-row-material-empty {
  color: var(--ds-color-on-surface-variant);
  font-size: 10px;
  font-weight: 650;
}
.create-lite-edit-work .clip-scene-row.is-previewing {
  border-color: color-mix(in srgb, var(--ds-color-primary) 40%, var(--ds-color-on-surface-variant));
  background: color-mix(in srgb, var(--ds-color-primary) 8%, var(--ds-color-surface-container));
}

/* 顶部独立 9:16 预览（表头上方） */
.create-lite-edit-work .clip-material-preview-dock {
  border-color: color-mix(in srgb, var(--ds-color-primary) 28%, var(--ds-color-on-surface-variant));
  background: color-mix(in srgb, var(--ds-color-primary) 8%, var(--ds-color-surface-container));
}
.create-lite-edit-work .clip-material-preview-dock-head {
  color: var(--ds-color-on-surface-variant);
}
.create-lite-edit-work .clip-material-preview-ratio {
  color: var(--ds-color-on-primary);
  background: var(--ds-color-primary-container);
}
.create-lite-edit-work .clip-material-preview-player {
  border-color: var(--ds-color-on-surface-variant);
}
.create-lite-edit-work .clip-material-preview-phone {
  border: 0;
}
/* 素材列宽适配竖缩略图 */
.create-lite-edit-work .clip-scene-table-head,
.create-lite-edit-work .clip-scene-row {
  grid-template-columns: 40px 64px minmax(0, 1fr) 56px 32px;
}

/* 链接按钮 / 新增按钮 */
.create-lite-edit-work .clip-row-link-btn,
.create-lite-edit-work .clip-insert-btn,
.create-lite-edit-work .clip-edit-card--hifi .clip-row-link-btn {
  height: 26px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-primary);
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}
.create-lite-edit-work .clip-row-link-btn:disabled {
  color: var(--ds-color-on-surface-variant);
}

/* 「应用文案 / 应用时长」按钮：accent 底 */
.create-lite-edit-work .clip-row-apply-btn,
.create-lite-edit-work .clip-edit-card--hifi .clip-row-link-btn.clip-row-apply-btn {
  background: color-mix(in srgb, var(--ds-color-primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--ds-color-primary) 30%, var(--ds-color-on-surface-variant));
  color: var(--ds-color-on-primary);
}

/* 文案输入：加宽栏下可多行阅读 */
.create-lite-edit-work .clip-row-text-cell {
  position: relative;
  min-width: 0;
}
.create-lite-edit-work .clip-row-text-input {
  min-height: 64px;
  height: 72px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  background: color-mix(in srgb, var(--ds-color-surface-container-high) 55%, var(--ds-color-surface));
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
}
.create-lite-edit-work .clip-row-text-input:focus {
  outline: none;
  border-color: var(--ds-color-primary);
  outline: 3px solid var(--ds-color-secondary);
  background: color-mix(in srgb, var(--ds-color-surface-container-high) 70%, var(--ds-color-surface));
}
.create-lite-edit-work .clip-row-text-input:disabled {
  opacity: 0.55;
  cursor: wait;
}
/* 应用时长：文案区转圈覆盖 */
.create-lite-edit-work .clip-row-text-adapting {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ds-color-surface-container) 72%, transparent);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 650;
  pointer-events: none;
}
.create-lite-edit-work .clip-row-text-adapting-spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ds-color-primary) 30%, transparent);
  border-top-color: var(--ds-color-primary);
  animation: clip-text-adapt-spin 0.7s linear infinite;
}
@keyframes clip-text-adapt-spin {
  to { transform: rotate(360deg); }
}

/* 时长输入 */
.create-lite-edit-work .clip-row-duration-cell {
  align-items: flex-end;
  padding-top: 2px;
}
.create-lite-edit-work .clip-row-duration-input {
  color: var(--ds-color-on-surface-variant);
}
.create-lite-edit-work .clip-row-duration-input input {
  width: 48px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  color: var(--ds-color-on-surface);
  font-variant-numeric: tabular-nums;
}

/* 删除按钮 */
.create-lite-edit-work .clip-row-delete {
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ds-color-on-surface-variant);
}
.create-lite-edit-work .clip-row-delete:hover:not(:disabled) {
  color: var(--ds-color-error);
  border-color: color-mix(in srgb, var(--ds-color-error) 35%, var(--ds-color-on-surface-variant));
  background: color-mix(in srgb, var(--ds-color-error) 8%, transparent);
}

/* 段间「+ 新增分镜」居中轻提示 */
.create-lite-edit-work .clip-scene-insert {
  display: flex;
  justify-content: center;
  margin: 0;
}
.create-lite-edit-work .clip-insert-btn {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--ds-color-primary) 35%, var(--ds-color-on-surface-variant));
  background: transparent;
  opacity: 0.85;
}
.create-lite-edit-work .clip-insert-btn:hover {
  opacity: 1;
}

/* 段间新增编辑器 */
.create-lite-edit-work .clip-scene-insert-editor {
  background: var(--ds-color-surface-container);
  border: 1px dashed var(--ds-color-outline-variant);
}
.create-lite-edit-work .clip-scene-insert-editor input {
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

/* 编辑历史 */
.create-lite-edit-work .clip-edit-history {
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
}
.create-lite-edit-work .clip-edit-history-head {
  color: var(--ds-color-on-surface-variant);
}
.create-lite-edit-work .clip-edit-history-row {
  background: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface-variant);
  color: var(--ds-color-on-surface-variant);
}
.create-lite-edit-work .clip-edit-history-row span:last-child {
  color: var(--ds-color-on-surface-variant);
}

/* 出片完成态 */
.create-lite-edit-work .clip-done-meta {
  color: var(--ds-color-on-surface-variant);
}
.create-lite-edit-work .clip-draft-placeholder {
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
}

/* 失败文案 */
.create-lite-edit-work .clip-finalize-error {
  color: var(--ds-color-error);
}

/* 底部操作条：sticky，列表滚动时确认出片始终可达 */
.create-lite-edit-work .clip-finalize-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: auto;
  padding: 12px 4px 4px;
  border-top: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  backdrop-filter: blur(8px);
}
.create-lite-edit-work .clip-btn,
.create-lite-edit-work .clip-edit-card--hifi .clip-btn {
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
}
.create-lite-edit-work .clip-btn:hover,
.create-lite-edit-work .clip-edit-card--hifi .clip-btn:hover {
  background: var(--ds-color-surface-container);
}
.create-lite-edit-work .clip-btn--primary,
.create-lite-edit-work .clip-edit-card--hifi .clip-btn--primary {
  background: var(--create-lite-primary-bg);
  border-color: var(--create-lite-primary-border);
  color: var(--create-lite-primary-fg);
  box-shadow: none;
}
.create-lite-edit-work .clip-btn--primary:disabled {
  opacity: 0.5;
}

/* ==========================================================================
 * 换素材：素材选择卡（ClipAssetPickerCard）就地渲染 + 主题化
 * 该卡是独立 .clip-card，自带一套局部 clip token（--clip-paper/-ink/-line/
 * -accent/-accent-soft）+ 部分硬编码 #fff/#e7ede9。整体把局部 token 重映射到
 * --ds-*（边框/文字/accent/is-selected 靠继承一次搞定），再补硬编码白底。
 * ========================================================================== */
.create-lite-edit-work .clip-card {
  max-width: 100%;
  --clip-paper: var(--ds-color-surface-container);
  --clip-ink: var(--ds-color-on-surface);
  --clip-muted: var(--ds-color-outline-variant);
  --clip-line: var(--ds-color-outline-variant);
  --clip-accent: var(--ds-color-primary);
  --clip-accent-soft: color-mix(in srgb, var(--ds-color-primary) 12%, var(--ds-color-surface));
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
}
.create-lite-edit-work .clip-card-title {
  color: var(--ds-color-on-surface);
}
.create-lite-edit-work .clip-card-rev {
  background: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface-variant);
  color: var(--ds-color-on-surface-variant);
}
.create-lite-edit-work .clip-current-note {
  background: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface-variant);
}
.create-lite-edit-work .clip-current-note strong {
  color: var(--ds-color-on-surface);
}
.create-lite-edit-work .clip-control-row {
  background: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface-variant);
}
.create-lite-edit-work .clip-control-row.is-selected {
  border-color: var(--ds-color-primary);
  background: color-mix(in srgb, var(--ds-color-primary) 12%, var(--ds-color-surface));
}
.create-lite-edit-work .clip-asset-candidate {
  background: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface-variant);
}
.create-lite-edit-work .clip-asset-candidate.is-selected {
  border-color: var(--ds-color-primary);
  background: color-mix(in srgb, var(--ds-color-primary) 12%, var(--ds-color-surface));
}
.create-lite-edit-work .clip-asset-candidate img,
.create-lite-edit-work .clip-asset-thumb-placeholder {
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface-variant);
}

/* picker 在编辑面板内的落位：滚动区顶部一段，与下方分镜表用分隔线区隔 */
.create-lite-edit-work-picker {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}
.create-lite-edit-work-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.create-lite-edit-work-picker-eyebrow {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--ds-color-on-surface-variant);
}
.create-lite-edit-work-picker-cancel {
  height: 26px;
  padding: 0 10px;
  border-radius: var(--ds-corner-small, );
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.create-lite-edit-work-picker-cancel:hover {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
}
.video-template-workbench {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  background: #fafaf8;
  color: #202124;
}

.video-template-workbench__content {
  display: grid;
  grid-template-columns: minmax(132px, 42%) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 20px 18px 28px;
}

.video-template-workbench__preview { position: sticky; top: 20px; min-width: 0; }

.video-template-workbench__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 6px solid #111;
  border-radius: 18px;
  background: linear-gradient(145deg, #9fb8ff 0%, #2449bd 58%, #122560 100%);
  box-shadow: 0 15px 30px rgba(23, 29, 39, .2);
}

.video-template-workbench__preview.is-indigo .video-template-workbench__stage { background: linear-gradient(145deg, #b4b8ff, #4434b8 58%, #21166e); }
.video-template-workbench__preview.is-amber .video-template-workbench__stage { background: linear-gradient(145deg, #ffd7a3, #bd651b 58%, #6f310b); }
.video-template-workbench__preview.is-violet .video-template-workbench__stage { background: linear-gradient(145deg, #d8b9ff, #7440c4 58%, #391a75); }
.video-template-workbench__preview.is-slate .video-template-workbench__stage { background: linear-gradient(145deg, #cbd5e1, #475569 58%, #1e293b); }
.video-template-workbench__preview.is-cyan .video-template-workbench__stage { background: linear-gradient(145deg, #b4f5fb, #16869d 58%, #064d5c); }
.video-template-workbench__preview.is-emerald .video-template-workbench__stage { background: linear-gradient(145deg, #aff1d3, #1a8060 58%, #0b4938); }
.video-template-workbench__preview.is-rose .video-template-workbench__stage { background: linear-gradient(145deg, #ffd0d8, #c33b59 58%, #731c32); }

.video-template-workbench__stage-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom right, #000, transparent 74%);
}

.video-template-workbench__stage::before,
.video-template-workbench__stage::after {
  position: absolute;
  content: '';
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
}

.video-template-workbench__stage::before {
  width: 180px;
  height: 180px;
  top: -62px;
  right: -80px;
  box-shadow: 0 0 0 30px rgba(255,255,255,.06), 0 0 0 58px rgba(255,255,255,.04);
}

.video-template-workbench__stage::after { width: 62px; height: 62px; left: -26px; bottom: 38px; }

.video-template-workbench__stage-copy {
  position: absolute;
  right: 12px;
  bottom: 20px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #fff;
}

.video-template-workbench__stage-copy span { font-size: 7px; font-weight: 700; letter-spacing: .16em; opacity: .8; }
.video-template-workbench__stage-copy strong { font-size: clamp(17px, 4vw, 24px); line-height: 1.12; letter-spacing: -.035em; }
.video-template-workbench__stage-copy small { font-size: 9px; opacity: .76; }

.video-template-workbench__play {
  position: absolute;
  top: 46%;
  left: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.video-template-workbench__play span {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #191a1d;
}

.video-template-workbench__stage-progress {
  position: absolute;
  right: 11px;
  bottom: 9px;
  left: 11px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
}
.video-template-workbench__stage-progress span { display: block; width: 34%; height: 100%; background: #fff; }

.video-template-workbench__detail { min-width: 0; }
.video-template-workbench__summary { padding-bottom: 14px; border-bottom: 1px solid #e2e2df; }
.video-template-workbench__fit { display: inline-flex; padding: 4px 7px; border-radius: 999px; background: #eaf6ef; color: #25835d; font-size: 10px; font-weight: 650; }
.video-template-workbench__summary h2 { margin: 8px 0 4px; font-size: 18px; line-height: 1.22; letter-spacing: -.025em; }
.video-template-workbench__summary > p { margin: 0; color: #7b7d82; font-size: 10.5px; line-height: 1.45; }
.video-template-workbench__specs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.video-template-workbench__specs span { padding: 2px 5px; border-radius: 4px; background: #f0f1ef; color: #777a80; font-size: 9px; }

.video-template-workbench__section { padding: 15px 0; border-bottom: 1px solid #e2e2df; }
.video-template-workbench__section h3 { margin: 0 0 9px; font-size: 12px; }
.video-template-workbench__reasons { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.video-template-workbench__reasons li { display: grid; grid-template-columns: 16px 1fr; gap: 6px; align-items: start; }
.video-template-workbench__reasons li > span { display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: #e9f5ee; color: #25835d; font-size: 9px; }
.video-template-workbench__reasons p { margin: 0; color: #595c62; font-size: 10px; line-height: 1.5; }

.video-template-workbench__structure { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.video-template-workbench__structure li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; align-items: center; }
.video-template-workbench__structure li > span { display: block; width: 42px; height: 38px; border-radius: 6px; background: linear-gradient(145deg, #e5dbbb, #6f8790); }
.video-template-workbench__structure li:nth-child(3n + 2) > span { background: linear-gradient(145deg, #eef2ed, #90aab1); }
.video-template-workbench__structure li:nth-child(3n) > span { background: linear-gradient(145deg, #26383f, #84969b); }
.video-template-workbench__structure li div { display: grid; gap: 2px; min-width: 0; }
.video-template-workbench__structure li small { color: #8a8d93; font-size: 8px; }
.video-template-workbench__structure li strong { overflow: hidden; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }

.video-template-workbench__sticky-action {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 12px 18px 14px;
  border-top: 1px solid #e1e1de;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
}

.video-template-workbench__sticky-action button {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: #202124;
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(30, 31, 34, .13);
}
.video-template-workbench__sticky-action button:disabled { cursor: not-allowed; opacity: .55; }
.video-template-workbench__sticky-action p { margin: 7px 0 0; color: #9a9ca1; font-size: 9px; text-align: center; }

@media (max-width: 360px) {
  .video-template-workbench__content { grid-template-columns: 1fr; }
  .video-template-workbench__preview { position: relative; top: auto; width: min(190px, 72%); margin: 0 auto; }
}
._root_1ep5p_1 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-xl);
}

._wizardProgress_1ep5p_7 {
  display: flex;
  align-items: flex-start;
  padding: 0 var(--ds-sys-space-sm);
}

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

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

._wizardProgressStep_done_1ep5p_32:not(:last-child)::after {
  background: var(--ds-color-secondary);
}

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

._wizardDot_current_1ep5p_50 {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  box-shadow: 0 0 0 4px var(--ds-color-surface-container-high);
}

._wizardDot_done_1ep5p_56 {
  background: var(--ds-color-success);
  color: var(--ds-color-on-success);
}

._wizardDot_pending_1ep5p_61 {
  background: var(--ds-color-surface);
  border: 1.5px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
}

._wizardLabel_1ep5p_67 {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  letter-spacing: 0;
}

._wizardProgressStep_current_1ep5p_74 ._wizardLabel_1ep5p_67 {
  color: var(--ds-color-on-surface);
  font-weight: 700;
}

._wizardProgressStep_done_1ep5p_32 ._wizardLabel_1ep5p_67 {
  color: var(--ds-color-on-surface-variant);
}

._stepClickable_1ep5p_83 {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

._stepClickable_1ep5p_83 ._wizardDot_1ep5p_36 {
  transition: box-shadow 0.15s;
}

._stepClickable_1ep5p_83:hover ._wizardDot_1ep5p_36 {
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}

._stepClickable_1ep5p_83 ._wizardLabel_1ep5p_67 {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

._stepFocus_1ep5p_104 {
  text-align: center;
  padding: var(--ds-sys-space-xxl) var(--ds-sys-space-xl) var(--ds-sys-space-xl);
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
}

._stepFocusIcon_1ep5p_112 {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--ds-sys-space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--ds-color-on-surface);
}

._stepFocusTitle_1ep5p_123 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--ds-color-on-surface);
  margin-bottom: var(--ds-sys-space-sm);
}

._stepFocusSub_1ep5p_131 {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.7;
  max-width: 380px;
  margin: 0 auto var(--ds-sys-space-xl);
}

._stepHint_1ep5p_139 {
  margin-top: var(--ds-sys-space-md);
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  text-align: center;
}

._gifStage_1ep5p_146 {
  position: relative;
  margin: 0 auto var(--ds-sys-space-lg);
  width: 100%;
  max-width: 440px;
  border-radius: var(--ds-corner-medium);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

._gifImg_1ep5p_158 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

._gifBadge_1ep5p_165 {
  position: absolute;
  bottom: var(--ds-sys-space-sm);
  right: var(--ds-sys-space-sm);
  font-family: var(--ds-typeface-code);
  font-size: var(--ds-font-label-small-size);
  font-weight: var(--ds-font-label-small-weight);
  padding: 3px var(--ds-sys-space-sm);
  border-radius: var(--ds-corner-full);
  background: color-mix(in srgb, var(--ds-color-on-surface) 75%, transparent);
  color: var(--ds-color-surface);
}

._miniSteps_1ep5p_178 {
  text-align: left;
  max-width: 420px;
  margin: 0 auto var(--ds-sys-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-sm);
}

._miniStep_1ep5p_178 {
  display: flex;
  gap: var(--ds-sys-space-sm);
  align-items: baseline;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.65;
}

._miniStep_1ep5p_178 b {
  color: var(--ds-color-on-surface);
  font-weight: 700;
}

._miniNum_1ep5p_201 {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface);
  font-size: 10.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(2px);
}

._copyCode_1ep5p_216 {
  font-family: var(--ds-typeface-code);
  font-size: var(--ds-font-label-small-size);
  font-weight: var(--ds-font-label-small-weight);
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container-high);
  padding: 1px var(--ds-sys-space-xs);
  border-radius: var(--ds-corner-small);
  border: none;
  cursor: pointer;
  position: relative;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  transition: background 0.15s;
}

._copyCode_1ep5p_216:hover {
  background: var(--ds-color-outline-variant);
}

._copyCode_1ep5p_216::after {
  content: ' ⧉';
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
}

._copyCodeCopied_1ep5p_242::before {
  content: '已复制';
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  padding: 3px var(--ds-sys-space-sm);
  border-radius: var(--ds-corner-small);
  white-space: nowrap;
}

._ctaRow_1ep5p_257 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sys-space-md);
}

._spinner_1ep5p_264 {
  width: 14px;
  height: 14px;
  border-radius: var(--ds-corner-full);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--ds-color-on-surface);
  animation: _spin_1ep5p_264 0.8s linear infinite;
}

@keyframes _spin_1ep5p_264 {
  to {
    transform: rotate(360deg);
  }
}

._failNote_1ep5p_279 {
  margin-top: var(--ds-sys-space-md);
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-xs);
  color: var(--ds-color-error);
  font-size: 11px;
  font-weight: 600;
}

._failDot_1ep5p_289 {
  width: 7px;
  height: 7px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-warning);
}

._backLink_1ep5p_296 {
  margin-top: var(--ds-sys-space-md);
  font-size: var(--ds-font-body-small-size);
  color: var(--ds-color-on-surface-variant);
}

/* 返回链接：去掉 button UA 外框，颜色交给 ds-link（主 link） */
._backLink_1ep5p_296 button {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
/* 授权等待中的圆形倒数（业务场景专用，不进全局设计系统） */
._countdown_1mw1v_2 {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: var(--ds-sys-space-lg) auto;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 50%;
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/**
 * V4 publish stage host layout.
 * Visual tokens for .vstrip / .acct / .fld / … live in create-lite.css
 * under `.create-lite-canvas` (CSS contract ownership).
 */

.publish-stage-workbench {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.publish-stage-workbench > .create-lite-panel-shell {
  flex: 1;
  min-height: 0;
}

.publish-stage-workbench .create-lite-panel-body.scroll .acct {
  padding: 6px 0;
}

.publish-stage-workbench .create-lite-panel-body.scroll .addacct {
  height: 32px;
  flex: 0 0 32px;
}
/* 逐条头像已移除：会话只有一个 AI 说话人，重复标识只是噪音；
   AI 靠左、用户靠右气泡已足够区分，两侧 28px 头像与其 38px 让位一并去掉。 */
._segmented_1896p_3 .ai-message {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-bottom: 14px !important;
}

._segmented_1896p_3 .user-message {
  position: relative;
  width: 100%;
  /* 与 .ai-message 同宽：头像让位去掉后，两侧内容必须共用一条左右边界 */
  max-width: 100%;
  margin-bottom: 14px !important;
}

._segmented_1896p_3 .ai-message > div {
  max-width: 100%;
}

._segmented_1896p_3 .ai-message > div[style*='line-height: 1.75'] {
  width: 100%;
  max-width: 100%;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

._segmented_1896p_3 .ai-message > div[style*='line-height: 1.75']:empty {
  display: none;
}

._segmented_1896p_3 .ai-message,
._segmented_1896p_3 .user-message,
._segmented_1896p_3 .system-label,
._segmented_1896p_3 .ai-message > div,
._segmented_1896p_3 .ai-message p:not(.create-lite-consent-card > p),
._segmented_1896p_3 .ai-message li,
._segmented_1896p_3 .ai-message strong {
  color: var(--ds-color-on-surface) !important;
}

/* 悬浮操作条移出文档流：它常态 opacity:0，却仍占着 marginTop 8 + 高 28 = 36px，
   把相邻两条消息的实际空隙从视觉稿的 14px 顶到 54px。改成绝对定位浮在消息下方留白上，
   显隐不再牵动布局；代价是 hover 时浮层会盖住下一条约 14px，所以要给实底。 */
._segmented_1896p_3 .user-message > .msg-actions,
._segmented_1896p_3 .ai-message > .msg-actions {
  position: absolute;
  top: 100%;
  left: 0;
  /* 内联 marginTop: 8 只有 !important 压得住 */
  margin-top: 0 !important;
  z-index: 2;
  /* 隐形时不吃点击，否则下一条消息顶部 14px 点不动 */
  pointer-events: none;
  /* 实底 + 内衬 + 投影：浮层会压住下一条约 14px，没有这层它看起来像下一行被截断，
     有了就读成一条悬浮工具条 */
  padding: 3px 5px;
  background: var(--ds-color-surface);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

._segmented_1896p_3 .user-message > .msg-actions {
  left: auto;
  right: 0;
}

._segmented_1896p_3 .ai-message:hover > .msg-actions,
._segmented_1896p_3 .ai-message:focus-within > .msg-actions,
._segmented_1896p_3 .user-message:hover > .msg-actions,
._segmented_1896p_3 .user-message:focus-within > .msg-actions {
  pointer-events: auto;
}

._segmented_1896p_3 .user-message > div:first-child {
  max-width: min(70%, 560px) !important;
  padding: 10px 14px !important;
  border: 1px solid var(--ds-color-outline-variant) !important;
  border-radius: 16px !important;
  background: var(--ds-color-surface-container) !important;
  color: var(--ds-color-on-surface) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  letter-spacing: -0.002em !important;
}
/* Island 壳样式来自 ContextActionIsland.css；此处仅 create-lite 多选行与底栏 */

.create-lite-lang-choices > .cai-choices,
.create-lite-lang-choices-list {
  max-height: 240px;
  overflow-y: auto;
  border-top: 1px solid var(--ds-color-outline-variant);
  padding: 4px 12px 12px;
}

.create-lite-lang-choices > .cai-choices .cai-choices-heading {
  padding: 6px 2px 4px;
}

.create-lite-lang-choice {
  position: relative;
  display: flex;
  min-height: 42px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 12px;
  background: var(--ds-color-surface-container, );
  color: var(--ds-color-on-surface);
  cursor: pointer;
  text-align: left;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.create-lite-lang-choice:hover {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface, );
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ds-color-on-surface, ) 4%, transparent);
}

.create-lite-lang-choice.is-selected {
  border-color: color-mix(in srgb, var(--ds-color-primary, ) 45%, var(--ds-color-on-surface-variant));
  background: var(--ds-color-surface, );
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-primary, ) 14%, transparent);
}

.create-lite-lang-choice-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.create-lite-lang-choice-label {
  color: var(--ds-color-on-surface, );
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -0.015em;
}

.create-lite-lang-choice-hint {
  margin-top: 2px;
  color: var(--ds-color-outline, );
  font-size: 11.5px;
  line-height: 1.35;
}

.create-lite-lang-choice-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.create-lite-lang-choice-check {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1.5px solid var(--ds-color-outline-variant);
  border-radius: 50%;
  background: var(--ds-color-surface, );
}

.create-lite-lang-choice.is-selected .create-lite-lang-choice-check {
  border-color: var(--ds-color-on-surface, );
  background: var(--ds-color-on-surface, );
}

.create-lite-lang-choice.is-selected .create-lite-lang-choice-check::after {
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border-right: 1.5px solid var(--ds-color-on-primary, );
  border-bottom: 1.5px solid var(--ds-color-on-primary, );
  content: '';
  transform: rotate(45deg);
}

.create-lite-lang-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 12px 12px;
}

.create-lite-lang-actions-hint {
  margin-right: auto;
  color: var(--ds-color-outline, );
  font-size: 11px;
  line-height: 1.35;
}

/* 任务卡等仍使用 create-lite-localize-btn */
.create-lite-localize-btn {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.create-lite-localize-btn.is-primary {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.create-lite-localize-btn.is-primary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.create-lite-localize-btn.is-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font-weight: 500;
}

.create-lite-localize-btn:focus-visible,
.create-lite-lang-choice:has(.create-lite-lang-choice-input:focus-visible),
.create-lite-lang-choices .cai-opt:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-localize-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.create-lite-localize-submit-state,
.create-lite-localize-submit-error {
  margin: 0;
  padding: 6px 10px;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

.create-lite-localize-submit-error,
.create-lite-localize-error {
  color: var(--ds-color-error);
}

.create-lite-localize-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

/* U2: one-click language cards as peer-level TaskTimeline siblings (not nested mini cards) */
.create-lite-localize-peer-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.create-lite-localize-peer-item {
  display: block;
  min-width: 0;
}

.create-lite-localize-peer-item .task-card {
  margin-bottom: 0;
}

.create-lite-localize-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
}

.create-lite-localize-card-head,
.create-lite-localize-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.create-lite-localize-card-head h4 {
  margin: 2px 0 0;
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 650;
}

.create-lite-localize-kicker {
  color: var(--ds-color-on-surface-variant);
  font-size: 10.5px;
  font-weight: 600;
}

.create-lite-localize-status {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 600;
}

.create-lite-localize-status.is-completed {
  color: var(--ds-color-secondary);
}

.create-lite-localize-status.is-failed,
.create-lite-localize-status.is-script_failed,
.create-lite-localize-status.is-synthesis_failed {
  color: var(--ds-color-error);
}

.create-lite-localize-script {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.create-lite-localize-script label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 600;
}

.create-lite-localize-script textarea,
.create-lite-localize-script input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 12px;
}

.create-lite-localize-script textarea {
  min-height: 92px;
  padding: 8px 10px;
  resize: vertical;
}

.create-lite-localize-script input {
  height: 34px;
  padding: 0 10px;
}

.create-lite-localize-script textarea:focus,
.create-lite-localize-script input:focus {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-localize-suggestion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
}

.create-lite-localize-suggestion > span {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 600;
}

.create-lite-localize-suggestion p {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.create-lite-localize-result {
  padding: 8px 10px;
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
}

.create-lite-localize-result > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.create-lite-localize-result strong {
  color: var(--ds-color-on-surface);
  font-size: 12px;
}

.create-lite-localize-result span {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}

.create-lite-localize-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.create-lite-localize-error {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
}

.create-lite-localize-history {
  margin: 0;
  padding: 8px 8px 8px 24px;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 11.5px;
}
.lite-task-axis .task-open-flow__axis::before {
  top: 11px;
  bottom: 11px;
}

.lite-task-axis .task-open-flow__node {
  padding: 2px 0;
}

.lite-task-axis .task-open-flow__dot {
  top: 6px;
}

.lite-task-axis .task-open-flow__row {
  min-height: 0;
}

.lite-task-axis .task-open-flow__lbl {
  font-size: 11px;
  line-height: 1.65;
}

.lite-task-axis .task-open-flow__status {
  margin-left: 0;
  font-size: 11px;
  line-height: 1.65;
}

.task-open-flow__status.lite-task-axis__duration {
  color: var(--ds-color-outline, );
  font-family: var(--ds-typeface-code, ui-monospace, monospace);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.create-lite-workspace {
  /* XL 默认 dock 宽；L/M 由 media 收窄；S/XS 叠层由 .is-overlay / .is-sheet 处理 */
  --create-lite-canvas-width: 420px;
  --create-lite-canvas-confirm-width: min(720px, 52vw);
  /* 编辑作品专用加宽（视觉稿 2026-07-23）：向左跨出，成片预览仍用默认宽 */
  --create-lite-canvas-edit-width: 580px;
  /* 对话区滚动条槽宽。scrollbar-gutter 预留多少由平台决定（macOS 覆盖式 0、
     Windows 经典 ~17px），输入框不是滚动容器拿不到同样的槽，只能显式补偿；
     所以先把槽宽钉死成一个数，两处共用它才恒等对齐。 */
  --create-lite-chat-gutter: 8px;
  --create-lite-primary-bg: #18181b;
  --create-lite-primary-fg: #ffffff;
  --create-lite-primary-border: #18181b;
  --create-lite-template-primary-bg: #18181b;
  --create-lite-template-primary-fg: #ffffff;
  --create-lite-rail-active: rgba(24, 24, 27, 0.08);
  --create-lite-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

html[data-theme='dark'] .create-lite-workspace {
  --create-lite-primary-bg: #18181b;
  --create-lite-primary-fg: #f4f4f5;
  --create-lite-primary-border: rgba(255, 255, 255, 0.28);
  --create-lite-template-primary-bg: #f4f4f5;
  --create-lite-template-primary-fg: #18181b;
  --create-lite-rail-active: rgba(255, 255, 255, 0.11);
  --create-lite-card-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 4px 16px rgba(0, 0, 0, 0.25);
}

.create-lite-chat-column {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  background: var(--ds-color-surface);
}

/* C4 right fixed canvas — prototype .canvas / .canvas-inner / .canvas-rail */
.create-lite-canvas.canvas {
  width: 0;
  flex: 0 0 auto;
  flex-shrink: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--ds-color-surface);
  border-left: 0 solid var(--ds-color-outline-variant);
  transition:
    width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-width 0.28s;
}

.create-lite-canvas.canvas.open {
  width: var(--create-lite-canvas-width);
  border-left-width: 1px;
}

.create-lite-canvas.canvas.open.is-confirm {
  width: var(--create-lite-canvas-confirm-width);
}

.create-lite-canvas.canvas.open.is-edit-work {
  width: var(--create-lite-canvas-edit-width);
}

/* S 窄窗：右栏叠层抽屉，不抢中区 flex 宽度 */
.create-lite-canvas.canvas.open.is-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  width: var(--create-lite-canvas-width);
  flex: 0 0 auto;
  box-shadow: -16px 0 40px -18px rgba(0, 0, 0, 0.4);
}

/* XS：右栏全屏 sheet */
.create-lite-canvas.canvas.open.is-sheet {
  position: absolute;
  inset: 0;
  z-index: 30;
  width: 100%;
  flex: 0 0 auto;
  border-left-width: 0;
  box-shadow: none;
}

.create-lite-canvas.canvas.open.is-confirm.is-overlay,
.create-lite-canvas.canvas.open.is-confirm.is-sheet {
  width: min(100%, var(--create-lite-canvas-confirm-width));
  max-width: 100%;
}

.create-lite-canvas.canvas.open.is-edit-work.is-overlay,
.create-lite-canvas.canvas.open.is-edit-work.is-sheet {
  width: min(100%, var(--create-lite-canvas-edit-width));
  max-width: 100%;
  box-shadow: -18px 0 48px -20px rgba(0, 0, 0, 0.55);
}

.create-lite-canvas.canvas.open.is-sheet.is-confirm,
.create-lite-canvas.canvas.open.is-sheet.is-edit-work {
  width: 100%;
}

/* 叠层/全屏时的遮罩（仅 open + overlay/sheet 时由 React 挂载） */
.create-lite-canvas-backdrop {
  position: absolute;
  inset: 0;
  z-index: 25;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.create-lite-canvas-inner.canvas-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Product (artifact) tabs — pinned above canvas chrome; no close. */
.create-lite-artifact-tabs {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container, );
}

.create-lite-artifact-tabs__scroll {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 6px 4px 6px 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.create-lite-artifact-tabs__create {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 6px 8px 6px 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-color-on-surface-variant, );
  font: inherit;
  cursor: pointer;
}

.create-lite-artifact-tabs__create:hover {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface, );
  color: var(--ds-color-on-surface, );
}

.create-lite-artifact-tabs__create:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-artifact-tabs__create.is-active {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface, );
  color: var(--ds-color-on-surface, );
  box-shadow: var(--create-lite-card-shadow);
}

.create-lite-artifact-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 160px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-color-on-surface-variant, );
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.create-lite-artifact-tab:hover {
  background: var(--ds-color-surface, );
  color: var(--ds-color-on-surface, );
}

.create-lite-artifact-tab.is-active {
  background: var(--ds-color-surface, );
  border-color: var(--ds-color-on-surface-variant);
  color: var(--ds-color-on-surface, );
  font-weight: 600;
  box-shadow: var(--create-lite-card-shadow);
}

.create-lite-artifact-tab__kind {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.72;
  flex-shrink: 0;
}

.create-lite-artifact-tab__label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.create-lite-artifact-tab__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ds-color-warning, );
}

/* Completion/failure nudge (attention); generating uses is-generating style only. */
.create-lite-artifact-tab__dot--attention {
  background: var(--ds-color-primary, );
}

.create-lite-artifact-tab.is-failed .create-lite-artifact-tab__dot--attention {
  background: var(--ds-color-error, );
}

.create-lite-artifact-tab.is-generating {
  opacity: 0.9;
}

html[data-theme='dark'] .create-lite-artifact-tabs {
  background: var(--ds-color-surface-container-high, );
}

html[data-theme='dark'] .create-lite-artifact-tab.is-active {
  background: var(--ds-color-surface, );
}

/* 使用此模板后：生成中 / 失败（无成片 id 时） */
.create-lite-artifact-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 280px;
  padding: 24px 16px;
  text-align: center;
}

.create-lite-artifact-progress__phone {
  width: 120px;
  aspect-ratio: 9 / 14;
  border-radius: 14px;
  background: linear-gradient(160deg, #3a3a44 0%, #1c1c22 100%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
}

.create-lite-artifact-progress__ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: var(--ds-color-primary, );
  animation: create-lite-artifact-spin 0.9s linear infinite;
}

@keyframes create-lite-artifact-spin {
  to {
    transform: rotate(360deg);
  }
}

.create-lite-artifact-progress__label {
  font-size: 12px;
  font-weight: 600;
}

.create-lite-artifact-progress__fail-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.2);
  color: var(--ds-color-error, );
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}

.create-lite-artifact-progress__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-color-on-surface, );
}

.create-lite-artifact-progress__hint {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant, );
  line-height: 1.5;
  max-width: 240px;
}

/* v3 F5：本地模板过程轴附注（准备文案可区分，不另起专用成功/准备面板） */
.create-lite-template-process {
  margin: 8px 0 12px;
}

.create-lite-template-process__note {
  margin: 8px 0 0;
  color: var(--ds-color-on-surface-variant, );
  font-size: 12px;
  line-height: 1.6;
}

/* U13 遗留样式保留；v3 右栏已统一走 artifact-progress，不换壳。 */
.create-lite-dh-loop-preparation {
  min-height: 280px;
  margin: 16px;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 18px;
  background: var(--ds-color-surface-container, );
  color: var(--ds-color-on-surface);
  text-align: center;
}

.create-lite-dh-loop-preparation__ring {
  width: 38px;
  height: 38px;
  border: 3px solid color-mix(in srgb, var(--ds-color-primary) 12%, transparent);
  border-top-color: var(--ds-color-primary);
  border-radius: 50%;
  animation: create-lite-artifact-spin 0.9s linear infinite;
}

.create-lite-dh-loop-preparation__title {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 14px;
  font-weight: 700;
}

.create-lite-dh-loop-preparation__hint,
.create-lite-dh-loop-preparation__error {
  margin: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.6;
}

.create-lite-dh-loop-preparation__fail-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ds-color-error) 10%, transparent);
  color: var(--ds-color-error);
  font-size: 20px;
  font-weight: 700;
}

.create-lite-dh-loop-preparation.is-failed {
  background: color-mix(in srgb, var(--ds-color-error) 3%, var(--ds-color-surface-container));
}

.create-lite-dh-loop-preparation__error {
  max-width: 260px;
  color: var(--ds-color-error);
}

.create-lite-dh-loop-status {
  margin: 8px 0;
  padding: 10px 12px;
  color: var(--ds-color-on-surface);
}

.create-lite-dh-loop-status__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.create-lite-dh-loop-status__dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ds-color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-color-primary) 12%, transparent);
}

.create-lite-dh-loop-status__badge {
  color: var(--ds-color-primary);
  font-size: 11px;
  font-weight: 700;
}

.create-lite-dh-loop-status p {
  margin: 8px 0 0 17px;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.6;
}

.create-lite-dh-loop-status.is-ready {
  border-left-color: var(--ds-color-secondary, );
}

.create-lite-dh-loop-status.is-ready .create-lite-dh-loop-status__dot {
  background: var(--ds-color-secondary, );
}

.create-lite-dh-loop-status.is-ready .create-lite-dh-loop-status__badge {
  color: var(--ds-color-secondary, );
}

.create-lite-dh-loop-status.is-failed {
  border-left-color: var(--ds-color-error);
}

.create-lite-dh-loop-status.is-failed .create-lite-dh-loop-status__dot {
  background: var(--ds-color-error);
}

.create-lite-dh-loop-status.is-failed .create-lite-dh-loop-status__badge {
  color: var(--ds-color-error);
}

html[data-theme='dark'] .create-lite-artifact-progress__title {
  color: var(--ds-color-on-surface, );
}

.create-lite-canvas-head.canvas-head {
  height: 46px;
  padding: 0 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}

.create-lite-canvas-head-left {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.create-lite-canvas-nav-back {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-color-on-surface);
  cursor: pointer;
}

.create-lite-canvas-nav-back:hover {
  background: var(--ds-color-surface-container);
}

.create-lite-canvas-nav-back:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-canvas-breadcrumb {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2;
}

.create-lite-canvas-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.create-lite-canvas-breadcrumb-sep {
  flex-shrink: 0;
  margin: 0 5px;
  color: var(--ds-color-on-surface-variant);
}

.create-lite-canvas-breadcrumb-link {
  max-width: 7.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: none;
  border-radius: 4px;
  padding: 1px 2px;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.create-lite-canvas-breadcrumb-link:hover {
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
}

.create-lite-canvas-breadcrumb-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ds-color-on-surface);
  font-weight: 650;
}

.create-lite-canvas-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
  color: var(--ds-color-on-surface);
}

.create-lite-canvas-publish-host {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.create-lite-leave-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(24, 24, 27, 0.36);
}

.create-lite-leave-dialog {
  width: 100%;
  max-width: 340px;
  padding: 20px 20px 16px;
  border-radius: 14px;
  background: var(--ds-color-surface);
  box-shadow: var(--ds-elevation-4);
  border: 1px solid var(--ds-color-outline-variant);
}

.create-lite-leave-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 650;
  color: var(--ds-color-on-surface);
  letter-spacing: -0.01em;
}

.create-lite-leave-desc {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ds-color-on-surface-variant);
}

.create-lite-leave-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.create-lite-leave-btn {
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
}

.create-lite-leave-btn.primary {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.create-lite-leave-btn:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-canvas-collapse {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
}

.create-lite-canvas-collapse:hover {
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.create-lite-canvas-collapse:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-canvas-body.canvas-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Flex host between canvas-body and mode panel (preview / article…).
   Without this, display:block content-height div breaks flex fill → footer floats. */
.create-lite-canvas-panel-host {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.create-lite-canvas-body.canvas-body.create-lite-canvas-body--dh-library {
  overflow: hidden;
  padding: 0;
  gap: 0;
}

/* 文章工作台整块铺满：这层 14px 内边距会让面板列比上方 artifact tab 行右缩
   14px，两条左边界对不齐。与 dh-library 同一处理。 */
.create-lite-canvas-body.canvas-body.create-lite-canvas-body--article {
  padding: 0;
  gap: 0;
}

.create-lite-canvas-panel--dh-library {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.create-lite-dh-library-panel {
  flex: 1;
  min-height: 0;
  height: 100%;
}

.create-lite-script-review-panel {
  gap: 14px;
  overflow: auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.create-lite-script-review-panel__head {
  align-items: flex-start;
}

.create-lite-script-review-panel__eyebrow {
  margin-bottom: 4px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}

/* v3 三源同栏 · 对齐 courseware.html cw-way token */
.create-lite-script-review-panel__ways {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.create-lite-script-review-panel .cw-way {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 14px;
  background: var(--ds-color-surface, );
  padding: 14px;
  box-shadow: var(--ds-elevation-1, );
}

.create-lite-script-review-panel .cw-way-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.create-lite-script-review-panel .cw-way-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f4f4f5;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 700;
}

.create-lite-script-review-panel .cw-way-head h4 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 650;
}

.create-lite-script-review-panel .cw-way-desc {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.45;
}

.create-lite-script-review-panel .cw-way-error {
  margin-top: 8px;
  color: var(--ds-color-error, );
  font-size: 12px;
}

.create-lite-script-review-panel .cw-field {
  margin-top: 10px;
}

.create-lite-script-review-panel .cw-field--flush {
  margin-top: 0;
}

.create-lite-script-review-panel .cw-field label {
  display: block;
  margin-bottom: 5px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 650;
}

.create-lite-script-review-panel .cw-field textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--ds-color-surface, );
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
}

.create-lite-script-review-panel .cw-field textarea:focus {
  outline: none;
  border-color: var(--ds-color-on-surface-variant);
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-script-review-panel .cw-upload {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  cursor: pointer;
  border: 1.5px dashed var(--ds-color-outline-variant);
  border-radius: 12px;
  background: var(--ds-color-surface-container, );
  padding: 20px 12px;
  text-align: center;
  font: inherit;
  color: inherit;
  overflow-wrap: anywhere;
}

.create-lite-script-review-panel .cw-upload:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.create-lite-script-review-panel .cw-upload strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.create-lite-script-review-panel .cw-upload span {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.create-lite-script-review-panel .cw-upload.is-done {
  border-color: #86efac;
  background: #f0fdf4;
}

.create-lite-script-review-panel .cw-btn {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  height: auto;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #18181b;
  background: #18181b;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
}

.create-lite-script-review-panel .cw-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.create-lite-script-review-panel .cw-btn--secondary {
  margin-top: 0;
  min-height: 36px;
  border-color: var(--ds-color-on-surface-variant);
  background: #fff;
  color: var(--ds-color-on-surface);
  font-size: 12.5px;
}

.create-lite-script-review-panel [hidden] {
  display: none !important;
}

/* FP2 panels — phone / mat-grid / voice-list / shot-list / param-list */
.create-lite-canvas-panel.canvas-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.create-lite-panel-head.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.create-lite-panel-head h4 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ds-color-on-surface);
}

.create-lite-panel-head .count {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

.create-lite-panel-empty {
  padding: 16px 12px;
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  text-align: center;
}

.create-lite-coming-soon {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--ds-corner-small);
  background: color-mix(in srgb, var(--ds-color-warning) 14%, var(--ds-color-surface));
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.create-lite-canvas-hint.canvas-hint {
  margin: 0;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.5;
  text-align: left;
  padding: 0 2px;
}

.create-lite-canvas-apply {
  margin-top: auto;
}

.create-lite-panel-btn {
  width: 100%;
  height: 40px;
  border-radius: var(--ds-corner-medium);
  border: 1px solid var(--create-lite-primary-border);
  background: var(--create-lite-primary-bg);
  color: var(--create-lite-primary-fg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.create-lite-panel-btn:hover {
  filter: brightness(1.06);
}

.create-lite-panel-btn:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

/* phone 9:16 */
.create-lite-phone.phone {
  width: 100%;
  max-width: 160px;
  margin: 0 auto;
  border-radius: var(--ds-corner-large);
  overflow: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  aspect-ratio: 9 / 16;
  position: relative;
  box-shadow: var(--ds-elevation-4);
  background: #111;
  cursor: default;
}

/* 成片预览：更大 phone（相对右栏 440 再放大） */
.create-lite-phone.phone.create-lite-phone--lg {
  max-width: 288px;
  border-radius: var(--ds-corner-extra-large);
}

.create-lite-phone.phone[role='button'] {
  cursor: pointer;
}

.create-lite-phone-fill.fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, #cbd5e1, #64748b 55%, #334155);
}

.create-lite-phone-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  z-index: 1;
}

.create-lite-phone-empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  pointer-events: none;
}

.create-lite-phone-title.title {
  position: absolute;
  top: 28%;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  padding: 0 10px;
  pointer-events: none;
}

.create-lite-phone-play.play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
}

.create-lite-phone-play.play span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.create-lite-phone-play.play span::after {
  content: '';
  border-left: 11px solid #18181b;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 2px;
}

.create-lite-phone.is-playing .create-lite-phone-play {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.create-lite-phone-cap.cap {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.create-lite-phone-auto-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--ds-corner-full);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 10px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}

.create-lite-phone-auto-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-color-secondary);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}

.create-lite-phone-mute {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--ds-corner-full);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
}

/* 成片预览：元信息 + 主动操作 */
.create-lite-preview-panel {
  gap: 14px;
}

.create-lite-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface-container);
}

.create-lite-preview-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.create-lite-preview-field label,
.create-lite-preview-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 650;
  color: var(--ds-color-on-surface-variant);
  letter-spacing: 0.02em;
}

.create-lite-preview-field-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
}

.create-lite-preview-field :is(input, textarea) {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  resize: vertical;
}

.create-lite-preview-field input {
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
}

.create-lite-preview-field textarea {
  min-height: 72px;
  font-weight: var(--ds-font-body-medium-weight);
  color: var(--ds-color-on-surface-variant);
}

.create-lite-preview-field :is(input, textarea)::placeholder {
  color: var(--ds-color-on-surface-variant);
}

.create-lite-preview-field :is(input, textarea):focus {
  outline: none;
  border-color: var(--ds-color-primary);
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-preview-field :is(input, textarea):disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.create-lite-preview-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 8px;
  box-sizing: border-box;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
}

.create-lite-preview-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.create-lite-preview-tag-text {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-lite-preview-tag-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 1;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 50%;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ds-color-on-surface) 8%, transparent);
  transition: opacity 0.12s ease;
}

.create-lite-preview-tag:hover .create-lite-preview-tag-remove,
.create-lite-preview-tag:focus-within .create-lite-preview-tag-remove,
.create-lite-preview-tag-remove:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.create-lite-preview-tag-remove:hover:not(:disabled) {
  color: var(--ds-color-error, );
  border-color: color-mix(in srgb, var(--ds-color-error, ) 35%, var(--ds-color-on-surface-variant));
}

.create-lite-preview-tag-remove:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

.create-lite-preview-tag-add {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: 50%;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.create-lite-preview-tag-add:hover:not(:disabled) {
  border-color: var(--ds-color-primary);
  color: var(--ds-color-primary);
  background: color-mix(in srgb, var(--ds-color-primary) 8%, transparent);
}

.create-lite-preview-tag-add:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-preview-tag-add:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.create-lite-preview-tag-input {
  width: 96px;
  height: 26px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--ds-color-primary);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-preview-tag-input:focus {
  outline: none;
}

.create-lite-preview-tag-input:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.create-lite-preview-meta-error {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ds-color-error, );
}

.create-lite-preview-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding-top: 2px;
}

.create-lite-preview-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 500;
}

.create-lite-preview-meta-chip em {
  font-style: normal;
  font-weight: 650;
  color: var(--ds-color-on-surface-variant);
}

.create-lite-preview-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.create-lite-preview-actions-label {
  font-size: 11px;
  font-weight: 650;
  color: var(--ds-color-on-surface-variant);
  letter-spacing: 0.02em;
  padding-left: 2px;
}

.create-lite-preview-actions-primary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.create-lite-preview-btn-primary {
  height: 40px;
  border-radius: var(--ds-corner-medium);
  border: 1px solid var(--create-lite-primary-border);
  background: var(--create-lite-primary-bg);
  color: var(--create-lite-primary-fg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.create-lite-preview-btn-primary:hover {
  filter: brightness(1.06);
}

.create-lite-preview-btn-primary:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-preview-btn-secondary {
  height: 40px;
  border-radius: var(--ds-corner-medium);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.create-lite-preview-btn-secondary:hover {
  background: var(--ds-color-surface-container);
}

.create-lite-preview-btn-secondary:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-preview-actions-secondary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.create-lite-preview-btn-ghost {
  height: 34px;
  border-radius: var(--ds-corner-small);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.create-lite-preview-btn-ghost:hover:not(:disabled) {
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
}

.create-lite-preview-btn-ghost:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.create-lite-preview-btn-ghost:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-preview-title-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* mat-grid */
.create-lite-mat-grid.mat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.create-lite-mat-cell.mat-cell,
.create-lite-mat-cell-add.mat-cell {
  aspect-ratio: 1;
  border-radius: var(--ds-corner-small);
  border: 1.5px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container-high);
  position: relative;
  overflow: hidden;
  font: inherit;
  padding: 0;
}

.create-lite-mat-cell.mat-cell.selected {
  border-color: var(--create-lite-primary-border);
  box-shadow: 0 0 0 1px var(--create-lite-primary-border);
}

.create-lite-mat-cell .fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #94a3b8, #475569);
}

.create-lite-mat-cell .ck {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--create-lite-primary-bg);
  color: var(--create-lite-primary-fg);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.create-lite-mat-cell-add.mat-cell.add {
  border-style: dashed;
  background: var(--ds-color-surface-container);
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 500;
  cursor: pointer;
}

.create-lite-mat-cell-add.mat-cell.add:hover {
  color: var(--ds-color-on-surface);
  border-color: var(--ds-color-on-surface-variant);
}

.create-lite-mat-cell-add.mat-cell.add:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

/* voice / shot / param lists */
.create-lite-voice-list.voice-list,
.create-lite-shot-list.shot-list,
.create-lite-param-list.param-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.create-lite-voice-row.voice-row,
.create-lite-shot-row.shot-row,
.create-lite-param-row.param-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
  font: inherit;
  text-align: left;
  width: 100%;
  color: var(--ds-color-on-surface);
}

.create-lite-voice-row.voice-row,
.create-lite-shot-row.shot-row {
  cursor: pointer;
}

.create-lite-voice-row.voice-row:hover,
.create-lite-shot-row.shot-row:hover {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
}

.create-lite-voice-row.voice-row.selected {
  border-color: var(--create-lite-primary-border);
  background: var(--ds-color-surface);
  box-shadow: 0 0 0 1px var(--create-lite-primary-border);
}

.create-lite-voice-row .voice-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ds-color-surface-container-high);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-color-on-surface-variant);
  flex-shrink: 0;
}

.create-lite-voice-row .tx,
.create-lite-shot-row .tx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.create-lite-voice-row .n,
.create-lite-shot-row .n {
  font-size: 12.5px;
  font-weight: 600;
}

.create-lite-voice-row .d,
.create-lite-shot-row .d {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

.create-lite-shot-row .shot-idx {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--create-lite-primary-bg);
  color: var(--create-lite-primary-fg);
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.create-lite-shot-row .shot-tag {
  font-size: 10px;
  color: var(--ds-color-secondary);
  background: color-mix(in srgb, var(--ds-color-secondary) 14%, var(--ds-color-surface));
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  flex-shrink: 0;
}

.create-lite-shot-row .shot-tag.warn {
  color: #b45309;
  background: color-mix(in srgb, var(--ds-color-warning) 16%, var(--ds-color-surface));
}

html[data-theme='dark'] .create-lite-shot-row .shot-tag.warn {
  color: #fbbf24;
}

.create-lite-param-row.param-row {
  cursor: default;
  justify-content: space-between;
}

.create-lite-param-row .k {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.create-lite-param-row .v {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
}

.create-lite-canvas-rail.canvas-rail {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 6;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  letter-spacing: 0.12em;
  padding: 12px 6px;
  border: 1px solid var(--ds-color-outline-variant);
  border-right: none;
  border-radius: 8px 0 0 8px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.create-lite-canvas-rail.canvas-rail:hover {
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
}

/* P0-4 / U4: collapsed-rail hint that something is generating. Never auto-opens. */
.create-lite-canvas-rail__dot {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.create-lite-canvas-rail.canvas-rail:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

/* retained for legacy selectors; placeholder no longer mounted */
.create-lite-canvas-placeholder {
  width: var(--create-lite-canvas-width);
  flex: 0 0 var(--create-lite-canvas-width);
  min-height: 0;
  border-left: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ds-color-on-surface-variant);
}

.create-lite-canvas-placeholder__label {
  font-size: 13px;
  font-weight: 650;
  color: var(--ds-color-on-surface-variant);
}

.create-lite-canvas-placeholder__hint {
  font-size: 12px;
}

.create-lite-chat-pane {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

/* 对话标题 — 左上角，与 ChatPaneView header 对齐 */
.create-lite-chat-header {
  flex-shrink: 0;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: transparent;
  border-bottom: 1px solid transparent;
}

.create-lite-chat-header__title {
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  line-height: 32px;
  color: var(--ds-color-on-surface);
}

/* U3 P2 whole-pane drag hotzone overlay (prototype 2a). Positioning context is the pane's position:relative. */
.create-lite-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* translucent scrim so the dashed box stands out; pointer-events:none keeps drag events on the container (depth counting stays clean). */
  background: color-mix(in srgb, var(--ds-color-surface) 84%, transparent);
  pointer-events: none;
}

.create-lite-drop-overlay__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 24px;
  border: 2px dashed var(--ds-color-on-surface);
  border-radius: 14px;
  background: var(--ds-color-surface);
  text-align: center;
}

.create-lite-drop-overlay__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ds-color-on-surface);
}

.create-lite-drop-overlay__hint {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

/* Scheme A — sent user message attachment cards (non-image docs)
 * Aligns with composer AttachChip: 34px type badge + name + type·size. */
.create-lite-user-attachments {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.create-lite-user-attach-pills {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 6px;
}

.create-lite-user-attach-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  padding: 8px 12px 8px 8px;
  border-radius: 14px;
  background: var(--ds-color-surface);
  border: 1px solid color-mix(in srgb, var(--ds-color-on-surface) 10%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ds-color-shadow) 20%, transparent);
  color: var(--ds-color-on-surface);
  font-size: 13px;
}

.create-lite-user-attach-pill__badge {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-family: var(--ds-typeface-code);
  border: 1px solid transparent;
}

.create-lite-user-attach-pill__badge--pdf {
  color: #f87171;
  background: color-mix(in srgb, #ef4444 12%, var(--ds-color-surface));
  border-color: color-mix(in srgb, #ef4444 22%, transparent);
}

.create-lite-user-attach-pill__badge--ppt {
  color: #ea580c;
  background: color-mix(in srgb, #fb923c 12%, var(--ds-color-surface));
  border-color: color-mix(in srgb, #fb923c 24%, transparent);
}

.create-lite-user-attach-pill__badge--doc {
  color: #2563eb;
  background: color-mix(in srgb, #3b82f6 12%, var(--ds-color-surface));
  border-color: color-mix(in srgb, #3b82f6 22%, transparent);
}

.create-lite-user-attach-pill__badge--xls {
  color: #059669;
  background: color-mix(in srgb, #10b981 12%, var(--ds-color-surface));
  border-color: color-mix(in srgb, #10b981 24%, transparent);
}

.create-lite-user-attach-pill__badge--zip,
.create-lite-user-attach-pill__badge--vid {
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  border-color: color-mix(in srgb, var(--ds-color-on-surface) 10%, transparent);
}

.create-lite-user-attach-pill__badge--img {
  color: #059669;
  background: color-mix(in srgb, #10b981 12%, var(--ds-color-surface));
  border-color: color-mix(in srgb, #10b981 22%, transparent);
}

.create-lite-user-attach-pill__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.create-lite-user-attach-pill__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 210px;
}

.create-lite-user-attach-pill__sub {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.2;
}

.create-lite-chat-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* both-edges：滚动条槽两侧对称预留，否则消息块相对输入框左移半个槽宽 */
  scrollbar-gutter: stable both-edges;
  /* 左右 18px；两侧另各让出一个 --create-lite-chat-gutter 给滚动条槽，
     输入框在 .create-lite-composer-sticky 用同一个变量补回来 */
  padding: 20px 18px 8px;
}

/* 钉死槽宽，让 scrollbar-gutter 的预留跨平台恒定（约定同 .reader /
   .create-lite-panel-body.scroll）。常态透明、hover 才显形，避免 macOS 上
   凭空多出一条常驻滚动条。 */
.create-lite-chat-scroll::-webkit-scrollbar {
  width: var(--create-lite-chat-gutter);
}

.create-lite-chat-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.create-lite-chat-scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}

.create-lite-chat-scroll:hover::-webkit-scrollbar-thumb {
  background: var(--ds-color-outline-variant);
}

/* 1–2 条消息时加大顶留白（对齐对话页体验） */
.create-lite-chat-scroll--few {
  padding-top: 64px;
}

/* A0 .col max-width:720 — 正文 / 过程 / 输入同缘 */
.create-lite-chat-inner {
  width: 100%;
  max-width: 820px;
  min-height: 100%;
  margin: 0 auto;
  padding: 0;
}

.create-lite-chat-inner--cold {
  max-width: none;
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.create-lite-composer-sticky {
  position: sticky;
  bottom: 0;
  z-index: 10;
  flex-shrink: 0;
  /* 18px 与 .create-lite-chat-scroll 同值，再补一个滚动条槽宽：
     滚动区的 scrollbar-gutter 把内容盒两侧各缩掉一个槽，这里不是滚动容器拿不到 */
  padding: 8px calc(18px + var(--create-lite-chat-gutter)) 18px;
  /* 让胶囊阴影露出来，而不是被实色底切断 */
  background: linear-gradient(to top, var(--ds-color-surface) 55%, transparent);
}

/* 根：外层 meta 堆叠 + 内层输入胶囊（final visual 2026-07-26） */
.create-lite-composer-root {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.create-lite-composer-outer {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* 胶囊：仅正文 + 底行工具 */
.create-lite-composer-shell {
  width: 100%;
  max-width: 820px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 10px 8px;
  border-radius: 24px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ds-color-on-surface) 4%, transparent),
    0 12px 32px color-mix(in srgb, var(--ds-color-on-surface) 8%, transparent);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

html[data-theme='dark'] .create-lite-composer-shell {
  /* 比页面/列表面略亮，浮起感对齐参考胶囊 */
  background: #2a2a2e;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 12px 36px rgba(0, 0, 0, 0.38),
    0 2px 8px rgba(0, 0, 0, 0.22);
}

/* 素材门「去补充素材」：对齐原型 .composer.hot — 边框高亮拖拽热区（只高亮胶囊） */
.create-lite-composer-shell--upload-guide,
.create-lite-composer-shell.is-hot {
  border-radius: 24px;
  border: 1px solid #91caff;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
  background: #f8fbff;
  padding: 12px 10px 8px;
}

html[data-theme='dark'] .create-lite-composer-shell--upload-guide,
html[data-theme='dark'] .create-lite-composer-shell.is-hot {
  border-color: color-mix(in srgb, #91caff 70%, var(--ds-color-on-surface-variant));
  background: color-mix(in srgb, #1677ff 8%, #2a2a2e);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.18);
}

.create-lite-composer-upload-guide {
  max-width: 520px;
  margin: 8px 0 4px;
}

.create-lite-composer-upload-guide__bubble {
  color: var(--ds-color-on-surface);
  font-size: 13.5px;
}

.create-lite-composer-meta,
.create-lite-asset-intake,
.create-lite-geo-intake {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* 胶囊外 meta：与 final visual .outer-meta 对齐 */
.create-lite-composer-meta {
  margin-bottom: 0;
  padding: 2px 4px;
  min-height: 32px;
}

/* 状态行单行：产品 chip + 短文案 + 胶囊；对话框加宽后可舒展 */
.create-lite-composer-meta--status {
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}

.create-lite-composer-meta--status .create-lite-product-chip,
.create-lite-composer-meta--video-done .create-lite-product-chip {
  border: none;
  box-shadow: none;
  flex-shrink: 0;
  max-width: min(200px, 28vw);
}

.create-lite-meta-guide-hint {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: var(--ds-color-on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-lite-meta-guide-chips {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  margin-left: auto;
  flex-shrink: 0;
}

.create-lite-meta-guide-chips .cai-opt {
  height: 28px;
  padding: 0 12px;
  font-size: 12.5px;
  flex-shrink: 0;
  border: none;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ds-color-on-surface) 6%, transparent);
  color: var(--ds-color-on-surface);
  box-shadow: none;
}

.create-lite-meta-guide-chips .cai-opt:hover {
  background: color-mix(in srgb, var(--ds-color-on-surface) 10%, transparent);
  border: none;
}

.create-lite-meta-guide-chips .cai-opt--primary {
  background: var(--create-lite-primary-bg, #18181b);
  color: var(--create-lite-primary-fg, #ffffff);
  border: none;
  box-shadow: none;
}

.create-lite-meta-guide-chips .cai-opt--primary:hover {
  background: color-mix(in srgb, var(--create-lite-primary-bg, #18181b) 88%, var(--ds-color-surface));
  border: none;
}

/* 成片就绪下一步（对齐画布 card_done） */
.create-lite-meta-video-done-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ds-color-secondary, ) 14%, transparent);
  color: color-mix(in srgb, var(--ds-color-secondary, ) 72%, var(--ds-color-on-surface));
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.create-lite-meta-ok-mark {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--ds-color-secondary, );
  background: color-mix(in srgb, var(--ds-color-secondary, ) 22%, transparent);
}

/* 无产品：中性提示，不用危险红（避免焦虑） */
.create-lite-composer-meta--needs-product {
  flex-wrap: wrap;
  row-gap: 6px;
}

.create-lite-meta-empty-hint {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
}

.create-lite-meta-empty-cta {
  margin-left: auto;
  height: 28px;
  padding: 0 11px;
  font-size: 12px;
}

/* 无产品 chip：弱化而非告警红（保留虚线边，区别于正常 soft-fill） */
.create-lite-composer-meta--needs-product .create-lite-product-chip {
  color: var(--ds-color-on-surface-variant);
  border: 1px dashed var(--ds-color-outline-variant);
  background: color-mix(in srgb, var(--ds-color-on-surface) 4%, transparent);
  box-shadow: none;
}

.create-lite-composer-meta--needs-product .create-lite-product-chip__dot {
  background: var(--ds-color-outline-variant);
  opacity: 0.55;
}

.create-lite-asset-intake {
  align-items: flex-start;
  margin-bottom: 8px;
}

.create-lite-geo-intake {
  align-items: flex-start;
  margin-bottom: 8px;
}

.create-lite-geo-intake-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.create-lite-geo-intake-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.create-lite-geo-chip-toggle {
  min-width: 0;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, #0f766e 26%, var(--ds-color-outline-variant));
  border-radius: 12px;
  background: color-mix(in srgb, #f0fdfa 88%, var(--ds-color-surface));
  color: var(--ds-color-on-surface);
  text-align: left;
}

.create-lite-geo-chip-kicker {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, #0f766e 12%, transparent);
  color: #0f766e;
  font-size: 11px;
  font-weight: 700;
}

.create-lite-geo-chip-toggle b {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-lite-geo-chip-score {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
}

.create-lite-geo-chip-remove {
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 10px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  flex-shrink: 0;
}

.create-lite-geo-intel-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, #0f766e 18%, var(--ds-color-outline-variant));
  border-radius: 12px;
  background: color-mix(in srgb, #f8fffd 92%, var(--ds-color-surface));
}

.create-lite-geo-detail-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.create-lite-geo-detail-item span {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
}

.create-lite-geo-detail-item b {
  font-size: 13px;
  color: var(--ds-color-on-surface);
}

.create-lite-geo-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.create-lite-geo-detail-tags i {
  font-style: normal;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #0f766e 8%, var(--ds-color-surface-container));
  color: var(--ds-color-on-surface-variant);
  font-size: 11.5px;
}

.create-lite-geo-cited-open {
  align-self: flex-start;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 9px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 600;
}

.create-lite-geo-cited-open:hover {
  background: var(--ds-color-surface-container);
}

.create-lite-cited-article-panel {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.create-lite-cited-article-panel__head {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.create-lite-cited-article-panel__back {
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  font-size: 12px;
}

.create-lite-cited-article-panel__back:hover {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
}

.create-lite-cited-article-panel__title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.create-lite-cited-article-panel__title strong {
  font-size: 14px;
}

.create-lite-cited-article-panel__title span,
.create-lite-cited-article-panel__readonly {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}

.create-lite-cited-article-panel__readonly {
  margin-left: auto;
  padding: 3px 7px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
}

.create-lite-article-cited-layout {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(108px, 0.8fr) minmax(138px, 1fr) minmax(0, 2.2fr);
  gap: 1px;
  background: var(--ds-color-outline-variant);
}

.create-lite-cited-article-panel__keywords,
.create-lite-cited-article-panel__list,
.create-lite-cited-article-panel__detail {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--ds-color-surface);
}

.create-lite-cited-article-panel__keywords,
.create-lite-cited-article-panel__list {
  padding: 10px;
}

.create-lite-cited-article-panel__label {
  margin-bottom: 8px;
  color: var(--ds-color-on-surface-variant);
  font-size: 10.5px;
  font-weight: 700;
}

.create-lite-cited-article-panel__keywords button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  text-align: left;
  font: inherit;
  font-size: 11px;
}

.create-lite-cited-article-panel__keywords button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-lite-cited-article-panel__keywords button em {
  margin-left: auto;
  color: var(--ds-color-on-surface-variant);
  font-style: normal;
  font-size: 10px;
}

.create-lite-cited-article-panel__keywords button.is-active {
  border-color: color-mix(in srgb, #0f766e 28%, var(--ds-color-on-surface-variant));
  background: color-mix(in srgb, #0f766e 8%, var(--ds-color-surface-container));
  color: var(--ds-color-on-surface);
}

.create-lite-cited-article-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 10px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  text-align: left;
  font: inherit;
}

.create-lite-cited-article-card.is-selected {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  box-shadow: var(--create-lite-card-shadow);
}

.create-lite-cited-article-card__index,
.create-lite-cited-article-card__source {
  color: var(--ds-color-on-surface-variant);
  font-size: 10px;
}

.create-lite-cited-article-card strong {
  color: var(--ds-color-on-surface);
  font-size: 12px;
  line-height: 1.45;
}

.create-lite-cited-article-card > span:not(.create-lite-cited-article-card__index):not(.create-lite-cited-article-card__source) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 10.5px;
  line-height: 1.5;
}

.create-lite-cited-article-card time {
  color: var(--ds-color-on-surface-variant);
  font-size: 10px;
}

.create-lite-cited-article-panel__detail {
  padding: 16px;
}

.create-lite-cited-article-panel__detail-source {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
}

.create-lite-cited-article-panel__detail-source strong {
  color: var(--ds-color-on-surface);
  font-size: 12px;
}

.create-lite-cited-article-panel__detail-source span {
  color: var(--ds-color-on-surface-variant);
  font-size: 10.5px;
}

.create-lite-cited-article-panel__detail h2 {
  margin: 0 0 12px;
  color: var(--ds-color-on-surface);
  font-size: 17px;
  line-height: 1.45;
}

.create-lite-cited-article-panel__detail footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  font-size: 10.5px;
}

.create-lite-cited-article-panel__detail footer a {
  color: var(--ds-color-on-surface-variant);
  text-decoration: underline;
}

.create-lite-cited-article-panel__empty,
.create-lite-cited-article-panel__error {
  display: grid;
  min-height: 100%;
  place-items: center;
  padding: 20px;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  text-align: center;
}

.create-lite-cited-article-panel__error {
  color: var(--ds-color-error);
}

.create-lite-composer-label {
  flex-shrink: 0;
  padding-top: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
}

.create-lite-product-picker {
  position: relative;
  min-width: 0;
}

.create-lite-product-picker .product-switcher-popover {
  position: absolute;
  top: auto;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 50;
}

.create-lite-product-picker .psp-list {
  max-height: 168px;
  overflow-y: auto;
}

.create-lite-product-chip {
  height: 28px;
  max-width: min(280px, 48vw);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  box-shadow: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.create-lite-product-chip:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ds-color-on-surface) 82%, var(--ds-color-surface));
}

.create-lite-product-chip:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-product-chip:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.create-lite-product-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-color-surface);
}

.create-lite-product-chip__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-lite-product-chip__arrow {
  color: var(--ds-color-surface);
  font-size: 10px;
  opacity: 0.7;
}

.create-lite-asset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.create-lite-asset-chip {
  min-height: 28px;
  max-width: 220px;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.create-lite-context-action {
  margin-bottom: 0;
}

.create-lite-reply-input {
  width: 100%;
}

.create-lite-reply-input > [data-compact='true'] {
  background: transparent !important;
}

/* 输入层：正文独占 + 底行工具；表面/阴影由 shell 承担 */
.create-lite-reply-input > [data-compact='true'] > div {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ds-color-on-surface) !important;
  box-shadow: none !important;
}

.create-lite-reply-input > [data-compact='true'] > div:focus-within {
  border: none !important;
  box-shadow: none !important;
}

.create-lite-reply-input textarea {
  min-height: 36px !important;
  max-height: 96px !important;
  padding: 4px 8px 8px 10px !important;
  color: var(--ds-color-on-surface) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
}

.create-lite-reply-input textarea::placeholder {
  color: var(--ds-color-on-surface-variant) !important;
}

/* 底行：左 + · 右发送（与 placeholder 分层） */
.create-lite-reply-input [data-testid='compact-composer-actions'] {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 2px 2px !important;
}

.create-lite-reply-input .chat-compact-attach {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--ds-color-on-surface-variant) !important;
}

.create-lite-reply-input .chat-compact-attach:hover {
  background: color-mix(in srgb, var(--ds-color-on-surface) 6%, transparent) !important;
  color: var(--ds-color-surface) !important;
}

.create-lite-reply-input .chat-send-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  border: none !important;
}

/* 禁用态保持淡圆；启用才用 ink 实心（避免 !important 盖掉 disabled） */
.create-lite-reply-input .chat-send-btn:disabled {
  background: color-mix(in srgb, var(--ds-color-on-surface) 8%, transparent) !important;
  color: var(--ds-color-on-surface-variant) !important;
  border: none !important;
  opacity: 1 !important;
}

.create-lite-workspace .task-card-btn-ink,
.create-lite-workspace .current-task-btn.primary {
  background: var(--create-lite-primary-bg) !important;
  color: var(--create-lite-primary-fg) !important;
  border: 1px solid var(--create-lite-primary-border) !important;
}

.create-lite-reply-input .chat-send-btn:not(:disabled) {
  background: var(--create-lite-primary-bg) !important;
  color: var(--create-lite-primary-fg) !important;
  border: none !important;
}

/* 深色：胶囊偏深灰，启用发送用浅色实心圆（对齐 final visual） */
html[data-theme='dark'] .create-lite-reply-input .chat-send-btn:not(:disabled) {
  background: #f4f4f5 !important;
  color: #18181b !important;
}

html[data-theme='dark'] .create-lite-meta-guide-chips .cai-opt--primary {
  background: #f4f4f5;
  color: #18181b;
}

html[data-theme='dark'] .create-lite-meta-guide-chips .cai-opt--primary:hover {
  background: #e4e4e7;
  color: #18181b;
}

.create-lite-first-guide__article-panel {
  margin-top: 18px;
}

.create-lite-article-tab .geo-tpl-node {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 22px;
}

.create-lite-article-genre-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.create-lite-article-geo-context {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #0f766e 24%, var(--ds-color-outline-variant));
  border-radius: 14px;
  background: color-mix(in srgb, #f0fdfa 88%, var(--ds-color-surface));
}

.create-lite-article-geo-context__header,
.create-lite-article-geo-context__metrics,
.create-lite-article-geo-context__line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.create-lite-article-geo-context__header b {
  color: var(--ds-color-on-surface);
  font-size: 13px;
}

.create-lite-article-geo-context__header span,
.create-lite-article-geo-context__metrics span,
.create-lite-article-geo-context__line span {
  color: var(--ds-color-on-surface-variant);
  font-size: 11.5px;
}

.create-lite-article-geo-context__metrics span,
.create-lite-article-geo-context__line span {
  padding: 3px 8px;
  border-radius: var(--ds-corner-full);
  background: color-mix(in srgb, #0f766e 8%, var(--ds-color-surface-container));
}

.create-lite-article-geo-context__line b {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}

.create-lite-article-geo-context__line.is-danger span {
  background: color-mix(in srgb, var(--ds-color-error) 8%, var(--ds-color-surface-container));
}

.create-lite-article-tab .geo-genre-card {
  padding: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 14px;
  background: var(--ds-color-surface);
  box-shadow: var(--create-lite-card-shadow);
  color: var(--ds-color-on-surface);
  transition:
    border-color 120ms ease,
    background 120ms ease,
    box-shadow 120ms ease,
    opacity 120ms ease;
}

.create-lite-article-genre-title {
  margin-bottom: 4px;
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 700;
}

.create-lite-article-genre-description {
  min-height: 28px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  line-height: 1.5;
}

.create-lite-article-genre-example {
  margin-top: 6px;
  color: var(--ds-color-on-surface-variant);
  font-size: 10px;
  font-style: italic;
  line-height: 1.4;
}

.create-lite-article-tab .geo-genre-card:hover {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
}

.create-lite-article-tab .geo-genre-card--located {
  background: var(--ds-color-surface-container);
  border: 1.5px solid var(--ds-color-primary);
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-article-tab .geo-genre-card--primary {
  border-color: color-mix(in srgb, #0f766e 52%, var(--ds-color-on-surface-variant));
}

.create-lite-article-tab .geo-genre-card--recommended {
  border-color: color-mix(in srgb, #0f766e 32%, var(--ds-color-on-surface-variant));
}

.create-lite-article-tab .geo-genre-card--unavailable {
  opacity: 0.55;
  cursor: not-allowed;
}

.create-lite-article-tab .geo-genre-card:disabled:hover {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
}

.create-lite-article-tab .geo-genre-card__badge {
  float: right;
  padding: 2px 7px;
  border-radius: var(--ds-corner-full);
  background: color-mix(in srgb, #0f766e 12%, transparent);
  color: #0f766e;
  font-size: 10px;
  font-weight: 700;
}

.create-lite-article-tab .geo-genre-card--unavailable .geo-genre-card__badge {
  background: color-mix(in srgb, var(--ds-color-error) 12%, transparent);
  color: var(--ds-color-error);
}

.create-lite-article-tab .geo-genre-card__intent {
  margin-bottom: 5px;
  color: #0f766e;
  font-size: 10.5px;
  font-weight: 600;
}

.create-lite-article-geo-cta {
  width: 100%;
  min-height: 42px;
  margin-top: 14px;
  border: 1px solid var(--create-lite-template-primary-bg);
  border-radius: 10px;
  background: var(--create-lite-template-primary-bg);
  color: var(--create-lite-template-primary-fg);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.create-lite-article-geo-cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.create-lite-article-tab [data-testid^='geo-genre-compact-'] {
  border: 1px solid var(--ds-color-outline-variant) !important;
  border-radius: 14px !important;
  background: var(--ds-color-surface) !important;
  box-shadow: var(--create-lite-card-shadow);
}

.create-lite-article-tab [data-testid^='geo-genre-compact-']:hover {
  border-color: var(--ds-color-on-surface-variant) !important;
  background: var(--ds-color-surface-container) !important;
}

.create-lite-article-tab [data-testid^='geo-genre-compact-'][aria-pressed='true'] {
  border: 1.5px solid var(--ds-color-primary) !important;
  background: var(--ds-color-surface-container) !important;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-article-tab [data-testid='geo-genre-start-hint'] {
  border: 1px dashed var(--ds-color-outline-variant) !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--ds-color-on-surface-variant) !important;
  opacity: 0.5;
}

.create-lite-article-tab [data-testid='geo-cta-generate'] {
  border: 1px solid var(--ds-color-outline-variant) !important;
  border-radius: 14px !important;
  background: var(--ds-color-surface) !important;
  box-shadow: var(--create-lite-card-shadow);
  color: var(--ds-color-on-surface) !important;
}

.create-lite-article-tab [data-testid='geo-cta-generate']:disabled {
  border: 1px dashed var(--ds-color-outline-variant) !important;
  background: transparent !important;
  box-shadow: none;
  color: var(--ds-color-on-surface-variant) !important;
  opacity: 0.5;
}

.create-lite-article-tab [data-testid='geo-cta-generate']:not(:disabled):hover {
  border-color: var(--ds-color-on-surface-variant) !important;
  background: var(--ds-color-surface-container) !important;
}

.create-lite-first-guide__article-panel .geo-tpl-node,
.create-lite-first-guide__article-panel .geo-tpl-node * {
  box-sizing: border-box;
}

.create-lite-article-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 520px;
}

.create-lite-article-result__card.task-card {
  width: 100%;
  max-width: 520px;
}

.create-lite-article-result__card .task-card-result {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

/* Progress / unavailable cards carry no thumbnail — drop the 56px column. */
.create-lite-article-result__card .task-card-result--textonly {
  display: block;
  grid-template-columns: none;
}

/* Live progress line doubles as the right-rail entry (P0-3). */
.create-lite-article-result__progress-entry {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.create-lite-article-result-thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--ds-color-on-surface);
  font-size: 18px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.create-lite-cold-welcome {
  margin: 10px 0 12px;
  text-align: center;
}

.create-lite-cold-welcome h2 {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.create-lite-cold-templates {
  width: 100%;
  margin-bottom: 8px;
  color: var(--ds-color-on-surface);
}

.create-lite-cold-templates__inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

.create-lite-cold-templates__tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 0 auto 14px;
}

.create-lite-cold-templates__tabs button {
  position: relative;
  height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--ds-corner-full);
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition:
    color 150ms ease,
    background 150ms ease;
}

.create-lite-cold-templates__tabs button.is-active {
  background: var(--create-lite-rail-active);
  color: var(--ds-color-on-surface);
  font-weight: 600;
}

.create-lite-template-carousel {
  position: relative;
  width: 100%;
  max-width: 920px;
  margin: 8px auto 12px;
  padding: 0 36px;
}

.create-lite-template-carousel__track {
  width: 100%;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 4px 0 10px;
  scrollbar-width: none;
}

.create-lite-template-carousel__track::-webkit-scrollbar {
  display: none;
}

.create-lite-template-carousel__page {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  /* 默认 L/XL：4 列 × 2 行；更窄档位见下方 media queries */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 10px;
  padding: 0 2px;
  align-content: start;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.create-lite-template-card {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 108px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 14px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  box-shadow: var(--create-lite-card-shadow);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background 120ms ease,
    box-shadow 120ms ease,
    opacity 120ms ease;
}

.create-lite-template-card:hover {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
}

.create-lite-template-card.is-selected {
  background: var(--ds-color-surface-container);
  border: 1.5px solid var(--ds-color-primary);
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-template-card.is-dimmed {
  opacity: 0.42;
}

.create-lite-template-card.is-dimmed:hover {
  opacity: 0.7;
}

.create-lite-template-card:focus-visible {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: -3px;
}

.create-lite-template-card__pick {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--create-lite-template-primary-bg);
}

.create-lite-template-card.is-selected .create-lite-template-card__pick {
  display: inline-flex;
}

.create-lite-template-card__pick svg {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: var(--create-lite-template-primary-fg);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.create-lite-template-card__icon {
  width: 26px;
  height: 26px;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 7px;
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

.create-lite-article-result-thumb.has-cover {
  color: #fff;
  border-color: transparent;
}

.create-lite-article-result-thumb.has-cover span {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(24, 24, 27, 0.68);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.create-lite-article-result-thumb.is-hero-failed {
  border-color: color-mix(in srgb, var(--ds-color-warning) 38%, var(--ds-color-on-surface-variant));
  background: color-mix(in srgb, var(--ds-color-warning) 10%, var(--ds-color-surface-container));
  color: var(--ds-color-warning);
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  padding: 6px;
}

.create-lite-article-result__card .task-card-result-meta {
  min-width: 0;
}

.create-lite-article-result__card .task-card-result-ready,
.create-lite-article-result__card .task-card-result-hint {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: normal;
  word-break: break-word;
}

.create-lite-article-result__card .task-card-actions {
  flex-wrap: wrap;
  gap: 8px;
}

.create-lite-article-result__card .task-card-actions > button {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: nowrap;
}

.create-lite-article-canvas-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.create-lite-article-cancelled {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 260px;
  padding: 24px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 20px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.create-lite-article-cancelled__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.create-lite-article-cancelled__platform {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

.create-lite-article-cancelled h2 {
  margin: 6px 0 0;
  font-size: 18px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.create-lite-article-cancelled__head button {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 999px;
  padding: 6px 12px;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
}

.create-lite-article-cancelled__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 14px;
  background: var(--ds-color-surface-container);
}

.create-lite-article-cancelled__body span {
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.6;
}

.create-lite-article-canvas-panel .geo-dcard {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.create-lite-article-canvas-panel .geo-dcard-body,
.create-lite-article-canvas-panel .geo-dmeta,
.create-lite-article-canvas-panel .geo-dcard-foot {
  min-width: 0;
  overflow-x: hidden;
}

.create-lite-article-canvas-panel .geo-dtitle,
.create-lite-article-canvas-panel .geo-dh,
.create-lite-article-canvas-panel .geo-dp-read,
.create-lite-article-canvas-panel .geo-dcap,
.create-lite-article-canvas-panel .geo-foot-status {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.create-lite-template-card__icon svg {
  width: 13px;
  height: 13px;
}

.create-lite-template-card__meta {
  width: 100%;
  min-width: 0;
}

.create-lite-template-card__title {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--ds-color-on-surface);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-lite-template-card__description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ds-color-on-surface-variant);
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.create-lite-template-slot-empty {
  min-height: 108px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: 14px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11.5px;
  line-height: 1.4;
  text-align: center;
  opacity: 0.5;
}

.create-lite-template-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 50%;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  box-shadow: var(--create-lite-card-shadow);
  font: inherit;
  cursor: pointer;
  transform: translateY(-52%);
}

.create-lite-template-carousel__arrow.is-previous {
  left: 0;
}

.create-lite-template-carousel__arrow.is-next {
  right: 0;
}

.create-lite-template-carousel__arrow:disabled {
  opacity: 0.28;
  cursor: default;
  pointer-events: none;
}

.create-lite-template-carousel__arrow svg {
  width: 14px;
  height: 14px;
}

/* P0 工作台局部 token（亮色）；暗色见 html[data-theme='dark'] .create-lite-canvas */
.create-lite-canvas {
  --wb-bg: #ffffff;
  --wb-panel: #ffffff;
  --wb-ink: #18181b;
  --wb-ink2: #3f3f46;
  --wb-mut: #71717a;
  --wb-dim: #a1a1aa;
  --wb-line: #e8e8ec;
  --wb-line2: #f4f4f5;
  --wb-pri-bg: #18181b;
  --wb-pri-fg: #ffffff;
  --wb-chip: #f7f7f8;
  --wb-err: #b42318;
  width: 0;
  flex: 0 0 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  border-left: 0 solid var(--wb-line);
  background: var(--wb-panel);
  color: var(--wb-ink);
  font-family: var(--ds-typeface-plain);
  transition:
    width 160ms ease,
    flex-basis 160ms ease;
}

html[data-theme='dark'] .create-lite-canvas {
  --wb-bg: #121214;
  --wb-panel: #18181b;
  --wb-ink: #f4f4f5;
  --wb-ink2: #d4d4d8;
  --wb-mut: #a1a1aa;
  --wb-dim: #71717a;
  --wb-line: #2a2a2f;
  --wb-line2: #212125;
  --wb-pri-bg: #f4f4f5;
  --wb-pri-fg: #18181b;
  --wb-chip: #212125;
  --wb-err: #f97066;
}

/* ── P0 状态记号 .mk（作用域限定 .create-lite-canvas） ── */
.create-lite-canvas .mk {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: grid;
  place-items: center;
}

.create-lite-canvas .mk svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.create-lite-canvas .mk.ok {
  color: var(--wb-ink);
}

.create-lite-canvas .mk.run {
  border: 1.5px solid var(--wb-line);
  border-top-color: var(--wb-ink);
  border-radius: 50%;
  animation: mkspin .9s linear infinite;
}

.create-lite-canvas .mk.idle {
  border: 1.5px solid var(--wb-line);
  border-radius: 50%;
}

.create-lite-canvas .mk.err {
  color: var(--wb-err);
}

.create-lite-canvas .mk.big {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.create-lite-canvas .mk.big svg {
  width: 28px;
  height: 28px;
}

.create-lite-canvas .mk.run.big {
  border-width: 2px;
}

@keyframes mkspin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .create-lite-canvas .mk.run {
    animation: none;
  }
}

/* ── P0 按钮三档 .btn（作用域限定 .create-lite-canvas） ── */
.create-lite-canvas .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  border: 1px solid transparent;
}

.create-lite-canvas .btn svg {
  width: 14px;
  height: 14px;
}

.create-lite-canvas .btn.p {
  background: var(--wb-pri-bg);
  color: var(--wb-pri-fg);
  border-color: var(--wb-pri-bg);
  width: 100%;
}

.create-lite-canvas .btn.s {
  background: transparent;
  color: var(--wb-ink);
  border-color: var(--wb-line);
  font-weight: 550;
}

.create-lite-canvas .btn.sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 8px;
}

/* ── P0 面板骨架四槽（稿子 ptabs/phead/pbody/pfoot → create-lite-panel-*） ── */
/* Host .create-lite-canvas-inner is flex column + height:100%; shell fills it. */
.create-lite-panel-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--wb-panel);
  color: var(--wb-ink);
}

/* 稿子 .ptabs */
.create-lite-panel-tabs {
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--wb-line2);
  overflow: hidden;
  background: var(--wb-panel);
}

.create-lite-panel-tabs .ptab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--wb-mut);
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  cursor: pointer;
}

.create-lite-panel-tabs .ptab.on {
  background: var(--wb-chip);
  color: var(--wb-ink);
  font-weight: 600;
}

.create-lite-panel-tabs .ptab .tx {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.create-lite-panel-tabs .ptab-add {
  margin-left: auto;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 8px;
  border: 1px solid var(--wb-line);
  display: grid;
  place-items: center;
  color: var(--wb-mut);
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.create-lite-panel-tabs .ptab-add svg {
  width: 14px;
  height: 14px;
}

.create-lite-panel-tabs .ptab-add:hover,
.create-lite-panel-tabs .ptab-add.is-active {
  color: var(--wb-ink);
  border-color: var(--wb-ink);
}

.create-lite-panel-tabs .ptab .create-lite-artifact-tab__dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--wb-ink);
}

.create-lite-panel-tabs .ptab.has-attention .create-lite-artifact-tab__dot--attention {
  background: var(--wb-ink);
}

.create-lite-panel-tabs .ptab.is-failed .create-lite-artifact-tab__dot--attention {
  background: var(--wb-err);
}

/* 稿子 .phead */
.create-lite-panel-head {
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-bottom: 1px solid var(--wb-line2);
  background: var(--wb-panel);
}

.create-lite-panel-head .back {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--wb-mut);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.create-lite-panel-head .back svg {
  width: 15px;
  height: 15px;
}

.create-lite-panel-head .back:hover {
  background: var(--wb-chip);
  color: var(--wb-ink);
}

.create-lite-panel-head .tt {
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wb-ink);
}

.create-lite-panel-head .x {
  margin-left: auto;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--wb-dim);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.create-lite-panel-head .x svg {
  width: 15px;
  height: 15px;
}

.create-lite-panel-head .x:hover {
  background: var(--wb-chip);
  color: var(--wb-ink);
}

/* 文章头行：标题 + 正文/配图 + 关闭同一行，tab 与上方 artifact tab 同尺寸。 */
.create-lite-panel-head__tabs {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.create-lite-panel-head__tabs + .x {
  margin-left: 4px;
}

.create-lite-panel-head .ptab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--wb-mut);
  white-space: nowrap;
  min-width: 0;
  cursor: pointer;
}

.create-lite-panel-head .ptab.on {
  background: var(--wb-chip);
  color: var(--wb-ink);
  font-weight: 600;
}

.create-lite-panel-head .ptab .tx {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.create-lite-panel-body {
  flex: 1;
  min-height: 0;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.create-lite-panel-body.scroll {
  overflow-y: auto;
  gap: 10px;
}

.create-lite-panel-body.scroll::-webkit-scrollbar {
  width: 8px;
}

.create-lite-panel-body.scroll::-webkit-scrollbar-thumb {
  background: var(--wb-line);
  border-radius: 4px;
}

.create-lite-panel-body.scroll::-webkit-scrollbar-track {
  background: transparent;
}

.create-lite-panel-reader {
  flex: 1;
  min-height: 0;
  padding: 20px 22px 28px;
  overflow-y: auto;
}

/* V3 文章阅读体 —— 稿子 .reader / .rt / .writing / .rnote / .jump */
.reader {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 22px 28px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.reader::-webkit-scrollbar {
  width: 8px;
}

.reader::-webkit-scrollbar-thumb {
  background: var(--wb-line);
  border-radius: 4px;
}

.reader::-webkit-scrollbar-track {
  background: transparent;
}

.rt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.rt .tx {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.02em;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--wb-ink);
}

.rt .pen {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--wb-dim);
  margin-top: 2px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.rt .pen svg {
  width: 13px;
  height: 13px;
}

.rmeta {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--wb-dim);
  letter-spacing: .04em;
  margin-top: 8px;
}

.rtags {
  margin-top: 10px;
}

.rhr {
  height: 1px;
  background: var(--wb-line2);
  margin: 16px 0 18px;
  border: none;
}

.reader p {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--wb-ink2);
  overflow-wrap: anywhere;
}

.reader h4 {
  margin: 22px 0 10px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--wb-ink);
  overflow-wrap: anywhere;
}

.rfig {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 10px;
  overflow: hidden;
  margin: 4px 0 16px;
  background: linear-gradient(135deg, #8b929a, #c3c9cf);
  display: grid;
  place-items: center;
}

.rfig .lb {
  position: absolute;
  right: 10px;
  top: 10px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: #18181b;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 1;
}

.rfig .lb svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rfig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rcap {
  font-size: 11px;
  color: var(--wb-dim);
  margin: -10px 0 18px;
}

.writing {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--wb-mut);
  padding: 10px 0 2px;
}

.rnote {
  border: 1px solid var(--wb-line);
  border-left: 2px solid var(--wb-err);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 6px;
}

.rnote .h {
  font-size: 13px;
  font-weight: 600;
  color: var(--wb-err);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rnote .h .mk,
.rnote .h .mk svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.rnote p {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--wb-mut);
}

.readfade {
  position: absolute;
  left: 1px;
  right: 8px;
  bottom: 96px;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--wb-panel));
  z-index: 2;
}

.jump {
  position: absolute;
  right: 18px;
  bottom: 104px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--wb-line);
  background: var(--wb-panel);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  font-size: 12px;
  color: var(--wb-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
  cursor: pointer;
}

html[data-theme='dark'] .jump,
[data-theme='dark'] .jump {
  box-shadow: none;
}

.jump svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 文章 PanelShell：footer 替代 dock，禁止双底栏 */
/* 面板本体铺满右栏，不再套模板预览的 14px 内边距——那层内边距会把整块
   工作台变成一张内嵌卡，比上方 artifact tab 行右缩 14px，两条左边界对不齐。 */
.create-lite-article-canvas-panel.article-workbench {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* 头行文字左边缘对到 22px：与 artifact tab 文字、正文区左内边距同线。 */
.create-lite-article-canvas-panel .create-lite-panel-head {
  padding: 0 8px 0 22px;
}

.create-lite-article-canvas-panel .create-lite-panel-shell {
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.create-lite-article-canvas-panel .create-lite-panel-body {
  padding: 0;
  gap: 0;
  position: relative;
  overflow: hidden;
}

.create-lite-article-canvas-panel .article-workbench__document.reader {
  width: 100%;
  max-width: none;
}

.create-lite-panel-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--wb-line2);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.create-lite-panel-foot .create-lite-panel-subrow {
  display: flex;
  gap: 8px;
}

.create-lite-panel-foot .create-lite-panel-subrow .btn {
  flex: 1;
}

.create-lite-panel-foot .create-lite-panel-subrow .btn.more {
  flex: 0 0 44px;
  padding: 0;
}

.create-lite-panel-foot .create-lite-panel-hint {
  font-size: 11px;
  color: var(--wb-dim);
  text-align: center;
  line-height: 1.45;
}

/* 稿子 VIDEO_BOX / VIDEO_META — V1 成片态 */
.create-lite-canvas .vwrap {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

.create-lite-canvas .vbox {
  width: 236px;
  aspect-ratio: var(--media-aspect, 9/16);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: var(--wb-chip);
  border: 1px solid var(--wb-line);
  display: grid;
  place-items: center;
}

/* 横版成片：舞台铺满面板宽度，不再按竖版 236px 裁掉两侧 */
.create-lite-canvas .vbox[data-orientation='landscape'] {
  width: 100%;
}

/* pending / fail 自带 210px 且同为三类选择器，必须显式再压一次 */
.create-lite-canvas .vbox.pending[data-orientation='landscape'],
.create-lite-canvas .vbox.fail[data-orientation='landscape'] {
  width: 100%;
}

.create-lite-canvas .vbox .g {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.create-lite-canvas .vbox video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.create-lite-canvas .vbox .cap {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 2;
  pointer-events: none;
}

.create-lite-canvas .vbox .dur {
  position: absolute;
  right: 8px;
  top: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 6px;
  border-radius: 4px;
  z-index: 3;
}

.create-lite-canvas .vbox .mute {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
  color: #fff;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 3;
}

.create-lite-canvas .vbox .mute svg {
  width: 12px;
  height: 12px;
}

.create-lite-canvas .vbox .enlarge {
  position: absolute;
  right: 8px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  display: grid;
  place-items: center;
  color: #fff;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 4;
}

.create-lite-canvas .vbox .enlarge:hover {
  background: rgba(0, 0, 0, 0.72);
}

.create-lite-canvas .vbox .enlarge svg {
  width: 14px;
  height: 14px;
}

.create-lite-preview-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.create-lite-preview-lightbox-stage {
  position: relative;
  background: #000;
  border-radius: var(--ds-corner-large, 16px);
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  max-width: 96vw;
  max-height: 92vh;
}

.create-lite-preview-lightbox-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

.create-lite-preview-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  display: grid;
  place-items: center;
}

.create-lite-preview-lightbox-mute {
  position: absolute;
  left: 12px;
  top: 12px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  z-index: 5;
}

.create-lite-preview-lightbox-dur {
  position: absolute;
  right: 52px;
  top: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 5;
}

.create-lite-preview-lightbox-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.28);
  z-index: 5;
  pointer-events: none;
}

.create-lite-preview-lightbox-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: #fff;
}

.create-lite-canvas .vbox .bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.28);
  z-index: 3;
  pointer-events: none;
}

.create-lite-canvas .vbox .bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: #fff;
}

.create-lite-canvas .vbox .create-lite-phone-empty {
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: var(--wb-mut);
  text-align: center;
  padding: 0 16px;
}

/* V2 04-A / 04-C：生成中 / 失败 phone + 步骤
 * Contract tests match single-selector rules; keep pending/fail split. */
.create-lite-canvas .vbox.pending {
  width: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.create-lite-canvas .vbox.fail {
  width: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.create-lite-canvas .vbox.pending .t1 {
  font-size: 13px;
  font-weight: 600;
}

.create-lite-canvas .vbox.fail .t1 {
  font-size: 13px;
  font-weight: 600;
  color: var(--wb-err);
}

.create-lite-canvas .vbox.pending .t2 {
  font-size: 11px;
  color: var(--wb-mut);
}

.create-lite-canvas .vbox.fail .t2 {
  font-size: 11px;
  color: var(--wb-mut);
  text-align: center;
  padding: 0 20px;
  line-height: 1.5;
}

.create-lite-canvas .steps {
  display: flex;
  flex-direction: column;
}

.create-lite-canvas .steps .sp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--wb-line2);
  font-size: 12px;
}

.create-lite-canvas .steps .sp:first-child {
  border-top: none;
  padding-top: 0;
}

.create-lite-canvas .steps .sp .nm {
  color: var(--wb-mut);
}

.create-lite-canvas .steps .sp.done .nm,
.create-lite-canvas .steps .sp.run .nm {
  color: var(--wb-ink);
  font-weight: 550;
}

.create-lite-canvas .steps .sp .tm {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--wb-dim);
}

.create-lite-canvas .titlerow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.create-lite-canvas .titlerow .tv {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  min-width: 0;
  letter-spacing: -.01em;
  color: var(--wb-ink);
  flex: 1;
}

.create-lite-canvas .titlerow .tv-plain {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  min-width: 0;
  letter-spacing: -.01em;
  color: var(--wb-ink);
  flex: 1;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 0;
  background: transparent;
  font: inherit;
  width: 100%;
  cursor: text;
}

.create-lite-canvas .titlerow .tv-input {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  min-width: 0;
  letter-spacing: -.01em;
  color: var(--wb-ink);
  flex: 1;
  border: 1px solid var(--wb-line);
  border-radius: 8px;
  padding: 4px 8px;
  background: var(--wb-panel);
  font: inherit;
  width: 100%;
}

.create-lite-canvas .titlerow .tv-input:focus {
  outline: none;
  border-color: var(--wb-ink);
}

.create-lite-canvas .titlerow .pen {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--wb-dim);
  margin-top: 1px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.create-lite-canvas .titlerow .pen svg {
  width: 13px;
  height: 13px;
}

.create-lite-canvas .titlerow .pen:hover {
  background: var(--wb-chip);
  color: var(--wb-ink);
}

.create-lite-canvas .metarow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--wb-dim);
  letter-spacing: .04em;
}

/* 成片详情 · 简介（与发布台 .fld 同一套输入样式） */
.create-lite-canvas .descrow {
  display: flex;
  flex-direction: column;
}

.create-lite-canvas .descrow .lb {
  font-size: 12px;
  font-weight: 600;
  color: var(--wb-ink);
  margin-bottom: 5px;
}

.create-lite-canvas .descrow .in {
  width: 100%;
  min-height: 40px;
  resize: vertical;
  border: 1px solid var(--wb-line);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--wb-ink);
  background: var(--wb-panel);
}

.create-lite-canvas .descrow .in::placeholder {
  color: var(--wb-dim);
}

.create-lite-canvas .descrow .in:focus {
  outline: none;
  border-color: var(--wb-ink);
}

.create-lite-canvas .descrow .in:disabled {
  opacity: .6;
}

.create-lite-canvas .tagrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.create-lite-canvas .tagrow .tg {
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--wb-chip);
  font-size: 11px;
  color: var(--wb-mut);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.create-lite-canvas .tagrow .tg .x {
  color: var(--wb-dim);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.create-lite-canvas .tagrow .tg .x:hover {
  color: var(--wb-ink);
}

.create-lite-canvas .tagrow .add {
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px dashed var(--wb-line);
  font-size: 11px;
  color: var(--wb-dim);
  display: inline-flex;
  align-items: center;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.create-lite-canvas .tagrow .add:hover {
  color: var(--wb-ink);
  border-color: var(--wb-mut);
}

.create-lite-canvas .tagrow .add-input {
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--wb-line);
  font-size: 11px;
  color: var(--wb-ink);
  background: var(--wb-panel);
  font: inherit;
  min-width: 72px;
}

.create-lite-canvas .tagrow .add-input:focus {
  outline: none;
  border-color: var(--wb-ink);
}

/* ── V4 发布四态（稿子 06-A/B/C/D：.vstrip / .acct / .fld / .more / .notice / .pubdone / wizard） ── */
.create-lite-canvas .vstrip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--wb-line);
  border-radius: 10px;
  padding: 8px;
}

.create-lite-canvas .vstrip .th {
  width: 34px;
  height: 46px;
  flex: 0 0 34px;
  border-radius: 6px;
  background: var(--wb-chip);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.create-lite-canvas .vstrip .tx {
  min-width: 0;
}

.create-lite-canvas .vstrip .tx .n {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wb-ink);
}

.create-lite-canvas .vstrip .tx .d {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  color: var(--wb-dim);
  margin-top: 4px;
  letter-spacing: .04em;
}

.create-lite-canvas .vstrip .chg {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--wb-mut);
  padding-right: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--wb-mut);
}

.create-lite-canvas .vstrip .chg:hover {
  color: var(--wb-ink);
}

.create-lite-canvas .shrow {
  display: flex;
  align-items: baseline;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--wb-ink);
}

.create-lite-canvas .shrow .r {
  margin-left: auto;
  font-weight: 400;
  color: var(--wb-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.create-lite-canvas .acct {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--wb-line2);
  width: 100%;
  border-left: none;
  border-right: none;
  border-bottom: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}

.create-lite-canvas .pbody.scroll .acct {
  padding: 6px 0;
}

.create-lite-canvas .acct:first-child {
  border-top: none;
  padding-top: 2px;
}

.create-lite-canvas .acct.off {
  opacity: .6;
}

.create-lite-canvas .acct.is-pickable {
  cursor: pointer;
}

.create-lite-canvas .acct .ck {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 5px;
  border: 1.5px solid var(--wb-line);
  display: grid;
  place-items: center;
  color: transparent;
  background: transparent;
  box-sizing: border-box;
}

.create-lite-canvas .acct.on .ck {
  background: var(--wb-pri-bg);
  border-color: var(--wb-pri-bg);
  color: var(--wb-pri-fg);
}

.create-lite-canvas .acct .ck svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.create-lite-canvas .acct .plat {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 7px;
  background: var(--wb-chip);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--wb-mut);
}

.create-lite-canvas .acct .meta {
  min-width: 0;
  flex: 1;
}

.create-lite-canvas .acct .meta .n,
.create-lite-canvas .acct .meta .d {
  display: block;
}

.create-lite-canvas .acct .meta .n {
  font-size: 12.5px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wb-ink);
}

.create-lite-canvas .acct .meta .d {
  font-size: 11px;
  color: var(--wb-dim);
  margin-top: 2px;
}

.create-lite-canvas .acct .pill {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  color: var(--wb-mut);
  background: var(--wb-chip);
  border: none;
  font: inherit;
  font-size: 11px;
  cursor: default;
}

.create-lite-canvas .acct .pill.is-action {
  cursor: pointer;
}

.create-lite-canvas .acct .pill.is-action:hover {
  color: var(--wb-ink);
}

.create-lite-canvas .acct .pill.is-err {
  color: var(--wb-err);
  background: transparent;
  border: 1px solid var(--wb-line);
}

.create-lite-canvas .acct .pill .mk,
.create-lite-canvas .acct .pill .mk svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}

.create-lite-canvas .acct-empty {
  font-size: 12px;
  color: var(--wb-mut);
  line-height: 1.7;
  padding: 2px 0 10px;
}

.create-lite-canvas .addacct {
  height: 32px;
  flex: 0 0 32px;
  border: 1px dashed var(--wb-line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--wb-mut);
  background: transparent;
  width: 100%;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.create-lite-canvas .addacct:hover:not(:disabled) {
  color: var(--wb-ink);
  border-color: var(--wb-mut);
}

.create-lite-canvas .addacct:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.create-lite-canvas .addacct svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.create-lite-canvas .fld {
  display: flex;
  flex-direction: column;
}

.create-lite-canvas .fld .lb {
  display: flex;
  align-items: baseline;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--wb-ink);
}

.create-lite-canvas .pbody.scroll .fld .lb {
  margin-bottom: 5px;
}

.create-lite-canvas .fld .lb .c {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  color: var(--wb-dim);
  font-weight: 400;
}

.create-lite-canvas .fld .in {
  border: 1px solid var(--wb-line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--wb-ink);
  background: var(--wb-panel);
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  outline: none;
  resize: none;
}

.create-lite-canvas .fld .in:focus {
  border-color: var(--wb-ink);
}

.create-lite-canvas .fld .in:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.create-lite-canvas .fld .in.ta {
  min-height: 40px;
}

.create-lite-canvas .pbody.scroll .fld .in.ta {
  min-height: 40px;
}

.create-lite-canvas .more {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  flex: 0 0 36px;
  font-size: 12px;
  font-weight: 550;
  border-top: 1px solid var(--wb-line2);
  border-left: none;
  border-right: none;
  border-bottom: none;
  background: transparent;
  width: 100%;
  color: var(--wb-ink);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  padding: 0;
  text-align: left;
}

.create-lite-canvas .more .cv {
  margin-left: auto;
  font-weight: 400;
  color: var(--wb-dim);
  font-size: 11px;
}

.create-lite-canvas .more .ch {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  color: var(--wb-dim);
  display: grid;
  place-items: center;
  transition: transform .15s ease;
}

.create-lite-canvas .more.is-open .ch {
  transform: rotate(90deg);
}

.create-lite-canvas .more .ch svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.create-lite-canvas .more-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 4px;
}

.create-lite-canvas .notice {
  flex: 0 0 auto;
  border: 1px solid var(--wb-line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--wb-mut);
  display: flex;
  gap: 8px;
}

.create-lite-canvas .notice .mk {
  margin-top: 2px;
}

.create-lite-canvas .notice b {
  color: var(--wb-ink);
  font-weight: 600;
}

.create-lite-canvas .pubdone {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 0 2px;
  text-align: center;
}

.create-lite-canvas .pubdone .t1 {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--wb-ink);
}

.create-lite-canvas .pubdone .t2 {
  font-size: 11.5px;
  color: var(--wb-mut);
  line-height: 1.6;
}

.create-lite-canvas .wsteps {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
}

.create-lite-canvas .wstep {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.create-lite-canvas .wstep .n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--wb-line);
  display: grid;
  place-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--wb-dim);
  background: var(--wb-panel);
  position: relative;
  z-index: 1;
}

.create-lite-canvas .wstep .l {
  font-size: 11.5px;
  color: var(--wb-mut);
  text-align: center;
}

.create-lite-canvas .wstep.on .n {
  background: var(--wb-pri-bg);
  border-color: var(--wb-pri-bg);
  color: var(--wb-pri-fg);
}

.create-lite-canvas .wstep.on .l {
  color: var(--wb-ink);
  font-weight: 600;
}

.create-lite-canvas .wstep .bar {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--wb-line);
}

.create-lite-canvas .gifstage {
  flex: 0 0 auto;
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--wb-line);
  background: var(--wb-chip);
  display: grid;
  place-items: center;
}

.create-lite-canvas .gifstage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.create-lite-canvas .gifstage .ph {
  font-size: 11.5px;
  color: var(--wb-dim);
}

.create-lite-canvas .gifstage .bd {
  position: absolute;
  right: 8px;
  top: 8px;
  height: 20px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
}

.create-lite-canvas .mini {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.create-lite-canvas .mini .m {
  display: flex;
  gap: 9px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--wb-mut);
}

.create-lite-canvas .mini .m .n {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border-radius: 50%;
  background: var(--wb-chip);
  display: grid;
  place-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  color: var(--wb-mut);
  margin-top: 1px;
}

.create-lite-canvas .mini .m b {
  color: var(--wb-ink);
  font-weight: 600;
}

.create-lite-canvas .mini .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--wb-chip);
  color: var(--wb-ink);
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}

.create-lite-canvas .mini .code:hover {
  color: var(--wb-ink);
  filter: brightness(0.97);
}

.create-lite-canvas-publish-host {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.create-lite-canvas-publish-host > .create-lite-panel-shell,
.publish-stage-workbench > .create-lite-panel-shell {
  flex: 1;
  min-height: 0;
}

.publish-stage-workbench {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  background: var(--wb-panel);
  color: var(--wb-ink);
}

/* Ready / progress preview: PanelShell fills canvas-body without outer padding */
.create-lite-canvas-body:has(.create-lite-preview-panel--done),
.create-lite-canvas-body:has(.create-lite-preview-panel--progress) {
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.create-lite-preview-panel--done,
.create-lite-preview-panel--progress {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.create-lite-preview-panel--done > .create-lite-panel-shell,
.create-lite-preview-panel--progress > .create-lite-panel-shell {
  flex: 1;
  min-height: 0;
}

.create-lite-preview-meta-error {
  margin: 0;
  font-size: 12px;
  color: var(--wb-err);
  line-height: 1.45;
}

.create-lite-preview-more-menu {
  min-width: 140px;
  padding: 4px 0;
  border: 1px solid var(--wb-line);
  border-radius: 10px;
  background: var(--wb-panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.create-lite-preview-more-menu button,
.create-lite-preview-more-menu a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
  padding: 0 14px;
  border: none;
  background: transparent;
  color: var(--wb-ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.create-lite-preview-more-menu button:hover,
.create-lite-preview-more-menu a:hover {
  background: var(--wb-chip);
}

.create-lite-canvas.open {
  width: var(--create-lite-canvas-width);
  flex-basis: var(--create-lite-canvas-width);
  visibility: visible;
  border-left-width: 1px;
}

.create-lite-canvas.open.is-confirm {
  width: min(720px, 52vw);
  flex-basis: min(720px, 52vw);
}

.create-lite-canvas.open.is-edit-work {
  width: var(--create-lite-canvas-edit-width);
  flex-basis: var(--create-lite-canvas-edit-width);
}

.create-lite-canvas.open.is-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  flex-basis: auto;
  box-shadow: -16px 0 40px -18px rgba(0, 0, 0, 0.4);
}

.create-lite-canvas.open.is-sheet {
  position: absolute;
  inset: 0;
  z-index: 30;
  width: 100%;
  flex-basis: auto;
  border-left-width: 0;
  box-shadow: none;
}

.create-lite-canvas__inner {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.create-lite-canvas__header {
  min-height: 48px;
  padding: 0 14px 0 18px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}

.create-lite-canvas__header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
}

.create-lite-canvas__header button {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 50%;
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}

.create-lite-canvas__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.create-lite-canvas-rail {
  width: 30px;
  flex: 0 0 30px;
  min-height: 0;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 0;
  border-left: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  font-size: 10px;
  writing-mode: vertical-rl;
  cursor: pointer;
}

.create-lite-template-preview {
  min-height: 100%;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.create-lite-template-preview__phone {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 160px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 14px;
  background: #111111;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.create-lite-template-preview__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, #cbd5e1, #64748b 55%, #334155);
}

.create-lite-template-preview__title {
  position: absolute;
  top: 28%;
  right: 0;
  left: 0;
  padding: 0 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.create-lite-template-preview__play {
  position: absolute;
  inset: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.create-lite-template-preview__play span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.create-lite-template-preview__play span::after {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #18181b;
  content: '';
}

.create-lite-template-preview__caption {
  margin: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  text-align: center;
}

.create-lite-template-preview__hint {
  margin: 0;
  padding: 0 8px;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.create-lite-template-preview__use {
  width: 100%;
  height: 44px;
  margin-top: auto;
  flex-shrink: 0;
  border: 1px solid var(--create-lite-template-primary-bg);
  border-radius: 10px;
  background: var(--create-lite-template-primary-bg);
  color: var(--create-lite-template-primary-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.create-lite-template-preview__use:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.create-lite-article-template-preview {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* FP2: native article workbench — single scroll owner, B/W document chrome */
.article-workbench {
  min-height: 0;
  height: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

/* A7: document is the sole scroller — stop canvas-body from growing with content */
.create-lite-canvas-body:has(.article-workbench),
.create-lite-canvas-body--article {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.create-lite-canvas-body--article > [data-testid^="create-lite-canvas-panel"] {
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.create-lite-canvas-panel--article-template:has(.article-workbench),
.create-lite-article-canvas-panel.article-workbench {
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* FP1: same-document editing affordance only — width still owned by canvas is-confirm */
.article-workbench--editing .article-stream-doc__title.is-edit-affordance,
.article-workbench--editing .article-stream-doc__paragraph.is-edit-affordance {
  cursor: text;
  outline: none;
  border-radius: 4px;
}

.article-workbench--editing .article-stream-doc__title.is-edit-affordance:focus-visible,
.article-workbench--editing .article-stream-doc__paragraph.is-edit-affordance:focus-visible {
  box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.18);
}

.article-stream-doc__title.is-edit-affordance,
.article-stream-doc__paragraph.is-edit-affordance {
  cursor: pointer;
}

.article-workbench__expand-edit {
  width: 100%;
  height: 40px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 10px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.article-workbench__expand-edit:hover {
  background: var(--ds-color-surface-container);
}

.article-workbench > .create-lite-article-template-preview {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.article-workbench__document {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px 22px 28px;
  background: transparent;
  width: 100%;
  max-width: none;
}

/* V3: reader is the document scroller — no second wide column */
.article-workbench__document.reader {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 22px 28px;
  gap: 0;
}

.create-lite-article-template-geo-summary,
.article-workbench__geo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 10px;
  background: var(--ds-color-surface-container);
}

.create-lite-article-template-geo-summary__title {
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 700;
}

.create-lite-article-template-geo-summary__metrics,
.create-lite-article-template-geo-summary__line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}

.create-lite-article-template-geo-summary__metrics span,
.create-lite-article-template-geo-summary__line span {
  padding: 3px 7px;
  border-radius: var(--ds-corner-full);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
}

.create-lite-article-template-geo-summary__line b {
  color: var(--ds-color-on-surface-variant);
  font-size: 10.5px;
}

.create-lite-canvas-panel--article-template {
  min-height: 0;
  display: flex;
  flex: 1;
}

.create-lite-canvas-panel--article-template > .create-lite-template-preview {
  min-height: 0;
  height: 100%;
  flex: 1;
}

.create-lite-canvas-panel--article-template > .article-workbench {
  min-height: 0;
  height: 100%;
  flex: 1;
}

/* Template sample preview keeps a soft paper card. */
.create-lite-article-template-preview__body {
  min-height: 0;
  padding: 18px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 14px;
  background: var(--ds-color-surface);
  box-shadow: var(--create-lite-card-shadow);
}

/* Streaming / workbench document: native column — no nested white card shell. */
.article-workbench__body {
  min-height: 0;
  flex: 1 1 auto;
  padding: 4px 2px 20px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.create-lite-article-template-preview__body h4,
.article-workbench__body h4 {
  margin: 0 0 12px;
  color: var(--ds-color-on-surface);
  font-size: 18px;
  line-height: 1.45;
}

.create-lite-article-template-preview__body p,
.article-workbench__body p {
  margin: 0 0 14px;
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.85;
}

.create-lite-article-template-preview__body p:last-child,
.article-workbench__body p:last-child {
  margin-bottom: 0;
}

.article-workbench__summary {
  margin: 0 0 10px !important;
  color: var(--ds-color-on-surface-variant);
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

.article-workbench__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}

.article-workbench__tags span {
  padding: 2px 8px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  background: var(--ds-color-surface-container);
}

.article-workbench__hero {
  margin: 0 0 14px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
}

.article-workbench__hero-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: cover;
}

.article-workbench__hero-failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 88px;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

.article-workbench__hero-retry {
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  cursor: pointer;
}

.article-workbench__hero-retry:hover {
  border-color: var(--ds-color-outline);
}

/* 一行收起：同一篇文章各版本标题几乎总是相同，逐行重印标题只是把正文顶下去。
   真正能区分版本的是「什么时候存的」和「因为什么存的」，放进展开后的每一行。 */
.article-workbench__version {
  position: relative;
  margin: 0 0 14px;
}

.article-workbench__version-trigger {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font: inherit;
  cursor: pointer;
}

.article-workbench__version-trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.article-workbench__version-current {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ds-color-on-surface);
}

.article-workbench__version-summary {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-workbench__version-caret {
  font-size: 9px;
  color: var(--ds-color-on-surface-variant);
}

.article-workbench__version-list {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 9px;
  background: var(--ds-color-surface);
  box-shadow: 0 6px 20px rgb(17 18 20 / 9%);
  overflow: hidden;
}

.article-workbench__version-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 0;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: transparent;
  color: var(--ds-color-on-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.article-workbench__version-item:last-child {
  border-bottom: 0;
}

.article-workbench__version-item:hover:not(:disabled) {
  background: var(--ds-color-surface-container);
}

.article-workbench__version-item.is-current {
  background: var(--ds-color-surface-container);
}

.article-workbench__version-item:disabled {
  cursor: default;
}

.article-workbench__version-item-seq {
  width: 20px;
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  font-weight: 600;
}

.article-workbench__version-item-body {
  flex: 1;
  min-width: 0;
}

.article-workbench__version-item-reason {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
}

.article-workbench__version-item-time {
  display: block;
  margin-top: 3px;
  font-family: var(--ds-typeface-code);
  font-size: 10.5px;
  color: var(--ds-color-on-surface-variant);
}

.article-workbench__version-item-now {
  padding: 1px 5px;
  border: 1px solid var(--ds-color-outline);
  border-radius: 4px;
  font-size: 10.5px;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
}

.article-workbench__version-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.article-workbench__version-retry {
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 6px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  cursor: pointer;
}

/* In-document placeholder only — no nested card chrome. */
.article-workbench__skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 8px;
  border: none;
  border-radius: 0;
  background: transparent;
}

.article-workbench__skeleton-line {
  height: 11px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ds-color-on-surface) 7%, transparent);
  animation: article-workbench-skeleton-pulse 1.4s ease-in-out infinite;
}

.article-workbench__skeleton-line.is-title {
  height: 20px;
  width: 68%;
}

.article-workbench__skeleton-line.is-short {
  width: 42%;
}

@keyframes article-workbench-skeleton-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

.article-workbench__error,
.article-workbench__error-inline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 12px;
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font-size: 13px;
}

.article-workbench__error-inline {
  margin-bottom: 12px;
}

.article-workbench__error p {
  margin: 0;
}

.article-workbench__error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.article-workbench__error-actions button,
.article-workbench__change-genre {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  cursor: pointer;
}

.article-workbench__error-actions button:hover,
.article-workbench__change-genre:hover {
  background: var(--ds-color-surface-container);
}

.article-workbench__loading-hint {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  padding: 0 4px;
}

.workbench-dock,
.article-workbench__dock {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 0;
  border-top: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}

.article-workbench__dock-hint {
  margin: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  line-height: 1.45;
}

.article-workbench__dock-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.article-workbench__dock-actions--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.article-workbench__dock-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--ds-color-outline-variant);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.article-workbench__dock-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.article-workbench__dock-btn--ghost {
  background: transparent;
  color: var(--ds-color-on-surface);
}

.article-workbench__dock-btn--primary {
  border-color: transparent;
  background: var(--create-lite-template-primary-bg, var(--ds-color-primary));
  color: var(--create-lite-template-primary-fg, var(--ds-color-on-primary));
}

.article-workbench__publish-job {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.article-workbench__use.create-lite-template-preview__use,
.article-workbench .create-lite-template-preview__use {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--create-lite-template-primary-bg);
  color: var(--create-lite-template-primary-fg);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.article-workbench .create-lite-template-preview__use:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.create-lite-template-preview__empty {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}

.create-lite-confirm-panel {
  min-height: 100%;
}

.create-lite-confirm-notice,
.create-lite-confirm-error {
  margin: 12px;
  padding: 10px 12px;
  border: 1px solid var(--ds-color-warning);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-warning-container);
  color: var(--ds-color-on-surface);
  font-size: 12px;
}

.create-lite-confirm-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.create-lite-confirm-error button,
.create-lite-remix-link button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.create-lite-remix-link {
  padding: 18px;
}

.create-lite-remix-link label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 650;
}

.create-lite-remix-link > div {
  display: flex;
  gap: 8px;
}

.create-lite-remix-link input {
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  flex: 1;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 12px;
}

.create-lite-remix-link p {
  margin: 8px 0 0;
  color: var(--ds-color-error);
  font-size: 11px;
}

.create-lite-unknown-message {
  padding: 10px 12px;
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

.create-lite-process-step + .create-lite-process-step {
  margin-top: 8px;
}

/* create-lite 开放过程轴（无外框 / 无折叠） */
/* V2 hi-fi：父 Tool + 缩进子步骤（对齐 processStream.a0 共享壳 / final HTML P08） */
.lite-hifi-tool-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 12px;
}

.lite-hifi-tool-item {
  margin: 0;
  padding: 0;
  border-bottom: none;
}

/* 根组间距由 .ps-tool-group 统一控制（14px），避免 gap:2px 挤成清单感 */
.lite-hifi-tool-list .ps-tool-group {
  margin: 0 0 14px;
}

.lite-hifi-tool-list .ps-tool-group:last-child {
  margin-bottom: 0;
}

/* SubActionChip 嵌在 lite 列表时，宽度撑满；间距交给 group / children */
.lite-hifi-tool-list .ps-tool-seg {
  margin-bottom: 0;
  width: 100%;
}

.lite-open-process {
  margin: 2px 0 8px;
  /* 跟随消息容器宽度，与正文/气泡/输入框共用同一条右边界 */
  max-width: 100%;
}

.lite-open-process__axis {
  position: relative;
  padding: 0 0 0 18px;
}

.lite-open-process__axis::before {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 8px;
  bottom: 10px;
  width: 1px;
  background: var(--ds-color-outline-variant);
}

.lite-open-process__node {
  position: relative;
  padding: 5px 0 10px;
}

.lite-open-process__dot {
  position: absolute;
  left: -18px;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  box-sizing: border-box;
}

.lite-open-process__node.is-done > .lite-open-process__dot {
  border-color: var(--ds-color-secondary);
  background: var(--ds-color-secondary);
  box-shadow: inset 0 0 0 2px var(--ds-color-surface);
}

.lite-open-process__node.is-now > .lite-open-process__dot {
  border-color: var(--ds-color-primary, );
  background: radial-gradient(
    circle at center,
    var(--ds-color-primary, ) 0 38%,
    transparent 42%
  );
}

.lite-open-process__node.is-fail > .lite-open-process__dot {
  border-color: var(--ds-color-error);
  background: var(--ds-color-error);
}

.lite-open-process__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 20px;
}

.lite-open-process__lbl {
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
  font-weight: var(--ds-font-body-medium-weight);
}

.lite-open-process__node.is-now .lite-open-process__lbl,
.lite-open-process__node.is-done .lite-open-process__lbl,
.lite-open-process__node.is-fail .lite-open-process__lbl {
  color: var(--ds-color-on-surface);
  font-weight: 550;
}

.lite-open-process__status {
  margin-left: auto;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.lite-open-process__chips {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lite-open-process__chip {
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 999px;
  padding: 2px 8px;
}

.lite-open-process__chip.is-running {
  color: var(--ds-color-on-primary, );
}

.lite-open-process__chip.is-fail {
  color: var(--ds-color-error);
}

/* agent-landing U4 · 过程态已探索网站逐个罗列 + 计数（1:1 prototype §2b） */
.lite-open-process__explored {
  margin-top: 8px;
  border-left: 2px solid var(--ds-color-outline-variant);
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lite-open-process__explored-row {
  font: 500 11.5px/1.6 var(--ds-typeface-code);
  color: var(--ds-color-on-surface-variant);
  word-break: break-all;
}

.lite-open-process__explored-count {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  margin-top: 6px;
}

.lite-open-process__fail-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.lite-open-process__btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  padding: 4px 10px;
  border: 1px solid var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  cursor: pointer;
}

.lite-open-process__btn.is-ghost {
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  border-color: var(--ds-color-on-surface-variant);
}

/* conversation-tool-display U2 attempt 2 · A1 一棵树（计划项即步骤节点，同名不重复）。 */
.lite-open-process__tree {
  margin: 2px 0 8px;
}

.lite-open-process__tree-h {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  font-size: 13px;
}

.lite-open-process__tree-t {
  color: var(--ds-color-on-surface);
  font-weight: 550;
}

.lite-open-process__tree-meta {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

.lite-open-process__tree-body {
  position: relative;
  margin: 2px 0 4px 6px;
  padding: 2px 0 2px 18px;
  border-left: 1px solid var(--ds-color-outline-variant);
}

.lite-open-process__tree-body--flat {
  margin-left: 0;
  padding-left: 18px;
  border-left: none;
}

.lite-open-process__tnode + .lite-open-process__tnode {
  margin-top: 2px;
}

.lite-open-process__tnode {
  position: relative;
  padding: 1px 0;
}

.lite-open-process__tnode-h {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 26px;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.lite-open-process__tnode-h.is-static {
  cursor: default;
}

.lite-open-process__tnode.is-done > .lite-open-process__tnode-h .lite-open-process__tnode-t,
.lite-open-process__tnode.is-now > .lite-open-process__tnode-h .lite-open-process__tnode-t,
.lite-open-process__tnode.is-fail > .lite-open-process__tnode-h .lite-open-process__tnode-t {
  color: var(--ds-color-on-surface);
  font-weight: 550;
}

.lite-open-process__tnode.is-fail > .lite-open-process__tnode-h .lite-open-process__tnode-t {
  color: var(--ds-color-error);
}

.lite-open-process__tnode-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  box-sizing: border-box;
}

.lite-open-process__tnode.is-done .lite-open-process__tnode-dot {
  border-color: var(--ds-color-secondary);
  background: var(--ds-color-secondary);
}

.lite-open-process__tnode.is-now .lite-open-process__tnode-dot {
  border-color: var(--ds-color-primary, );
  background: radial-gradient(circle at center, var(--ds-color-primary, ) 0 38%, transparent 42%);
}

.lite-open-process__tnode.is-fail .lite-open-process__tnode-dot {
  border-color: var(--ds-color-error);
  background: var(--ds-color-error);
}

.lite-open-process__tnode-t {
  color: var(--ds-color-on-surface-variant);
  font-weight: var(--ds-font-body-medium-weight);
}

.lite-open-process__tnode-meta {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.lite-open-process__caret {
  margin-left: auto;
  font-size: 9px;
  color: var(--ds-color-on-surface-variant);
  flex-shrink: 0;
}

.lite-open-process__tnode-body {
  margin-left: 4px;
  padding: 3px 0 8px 19px;
  border-left: 1px solid var(--ds-color-outline-variant);
}

/* L1 子动作行：状态图标 + 粗分类 pill（可缺省）+ 能力名 */
.lite-open-process__act {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ds-color-on-surface-variant);
}

button.lite-open-process__act {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.lite-open-process__act-ico {
  width: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  text-align: center;
  font-size: 11px;
}

.lite-open-process__act.is-running .lite-open-process__act-ico {
  color: var(--ds-color-warning);
}

.lite-open-process__act.is-success .lite-open-process__act-ico {
  color: var(--ds-color-secondary);
}

.lite-open-process__act.is-fail .lite-open-process__act-ico {
  color: var(--ds-color-error);
}

.lite-open-process__cat {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  margin-right: 6px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  vertical-align: 1px;
}

.lite-open-process__act-label {
  color: var(--ds-color-on-surface-variant);
}

.lite-open-process__act.is-running .lite-open-process__act-label {
  color: var(--ds-color-on-surface);
  font-weight: 500;
}

.lite-open-process__act.is-fail .lite-open-process__act-label {
  color: var(--ds-color-error);
}

.lite-open-process__act-suffix,
.lite-open-process__act-count {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  margin-left: 4px;
}

.lite-open-process__act-detail {
  margin-left: 22px;
}

.lite-open-process__act-detail-row {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  font-size: 12.5px;
  color: var(--ds-color-on-surface-variant);
}

/* F10（改图 v5）生成阶段收进树：task_started/task_progress 六阶段子进度 */
.lite-open-process__stage {
  margin-top: 2px;
}

.lite-long-run-flow {
  margin: 4px 0 0 15px;
  padding: 0;
}

.lite-long-run-flow .lite-open-process__act {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 18px 0;
  border-top: 1px solid var(--ds-color-outline-variant);
}

.lite-long-run-flow .lite-open-process__act:first-child {
  padding-top: 4px;
  border-top: 0;
}

.lite-long-run-flow__dot {
  width: 7px;
  height: 7px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ds-color-outline-variant);
  box-shadow: none;
}

.lite-long-run-flow .lite-open-process__act.is-success .lite-long-run-flow__dot {
  background: #20b26b;
}

.lite-long-run-flow .lite-open-process__act.is-running .lite-long-run-flow__dot {
  background: #2684ff;
}

.lite-long-run-flow .lite-open-process__act.is-fail .lite-long-run-flow__dot {
  background: #e5484d;
}

.lite-long-run-flow__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.lite-long-run-flow .lite-open-process__act-label {
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.lite-long-run-flow__summary {
  color: var(--ds-color-on-surface-variant);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.65;
}

.lite-long-run-flow__status {
  padding-left: 16px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}

.lite-open-process__stage-cap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px 0 3px;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.lite-open-process__stage-cap::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ds-color-outline-variant);
}

.lite-open-process__act.is-wait .lite-open-process__act-ico {
  color: var(--ds-color-on-surface-variant);
  opacity: 0.55;
}

.lite-open-process__act.is-wait .lite-open-process__act-label {
  color: var(--ds-color-on-surface-variant);
  opacity: 0.7;
}

/* F7 失败人话原因框 */
.lite-open-process__fail-box {
  margin: 6px 0 4px;
  padding: 10px 12px;
  border-radius: var(--ds-corner-medium);
  background: color-mix(in srgb, var(--ds-color-error) 8%, var(--ds-color-surface-container));
  border: 1px solid color-mix(in srgb, var(--ds-color-error) 30%, var(--ds-color-outline-variant));
}

.lite-open-process__fail-reason {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ds-color-error);
}

/* F8 历史轮次收一行 */
.lite-open-process__history-line {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 30px;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.lite-open-process__history-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid var(--ds-color-secondary);
  background: var(--ds-color-secondary);
}

.lite-open-process__history-dot.is-fail {
  border-color: var(--ds-color-error);
  background: var(--ds-color-error);
}

.lite-open-process__history-t {
  color: var(--ds-color-on-surface);
  font-weight: 550;
}

.lite-open-process__history-meta {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

.lite-open-process__history-body {
  margin-top: 4px;
}

/* 消息头像、气泡与间距由共享 ChatThreadPresentation 统一承载。 */

/* 过程块 / 计划：与阅读栏同缘，不套气泡线框 */

.create-lite-chat-pane .ai-message > .ps-plan,
.create-lite-chat-pane .ai-message > .ps-step,
.create-lite-chat-pane .ai-message .ps-plan,
.create-lite-chat-pane .ai-message .ps-step {
  max-width: 700px;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.create-lite-chat-pane .task-card {
  width: 100%;
  max-width: 400px;
}

html[data-theme='dark'] .create-lite-workspace .task-card-thumb-play {
  background: var(--create-lite-primary-bg) !important;
  color: var(--create-lite-primary-fg) !important;
}

/* FP3: template browse list / detail + half-screen lib-overlay */
.create-lite-chat-pane .ai-message,
.create-lite-chat-pane .user-message,
.create-lite-chat-pane .system-label {
  color: var(--ds-color-on-surface) !important;
}

.create-lite-chat-pane .ai-message > div,
.create-lite-chat-pane .ai-message p:not(.create-lite-consent-card > p),
.create-lite-chat-pane .ai-message li,
.create-lite-chat-pane .ai-message strong {
  color: var(--ds-color-on-surface) !important;
}

/* F1 补漏：用户气泡与 AI 正文同字号；软底+描边，非实心黑胶囊 */
.create-lite-chat-pane .user-message > div:first-child {
  max-width: min(70%, 560px) !important;
  padding: 10px 14px !important;
  border-radius: 16px !important;
  border: 1px solid var(--ds-color-outline-variant) !important;
  background: var(--ds-color-surface-container) !important;
  color: var(--ds-color-on-surface) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  letter-spacing: -0.002em !important;
}

/* FP3: template browse list / detail (library grid lives under .lgrid) */
.create-lite-tpl-browse.canvas-tpl-browse,
.create-lite-tpl-detail.canvas-tpl-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.create-lite-browse-head.browse-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.create-lite-browse-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--ds-color-on-surface);
}

.create-lite-browse-head .sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

.create-lite-browse-head-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.create-lite-type-tabs.type-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  padding: 2px;
  border-radius: 8px;
  background: var(--ds-color-surface-container);
}

.create-lite-type-tab.type-tab {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.create-lite-type-tab.type-tab:hover {
  color: var(--ds-color-on-surface-variant);
}

.create-lite-type-tab.type-tab.active {
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ds-color-on-surface) 8%, transparent);
}

.create-lite-open-lib {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 6px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.create-lite-open-lib:hover {
  color: var(--ds-color-on-surface);
  border-color: var(--ds-color-on-surface-variant);
}

.create-lite-open-lib:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-tpl-list.canvas-tpl-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}

.create-lite-tpl-item.canvas-tpl-item {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 8px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 10px;
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.create-lite-tpl-item.canvas-tpl-item:hover {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
}

.create-lite-tpl-item.canvas-tpl-item.selected {
  border-color: var(--create-lite-primary-border);
  box-shadow: 0 0 0 1px var(--create-lite-primary-border);
}

.create-lite-tpl-item .thumb {
  width: 44px;
  height: 58px;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(165deg, #cbd5e1, #64748b);
  position: relative;
}

.create-lite-tpl-item .thumb.t2 {
  background: linear-gradient(165deg, #a8a29e, #57534e);
}

.create-lite-tpl-item .thumb.t3 {
  background: linear-gradient(165deg, #6ee7b7, #059669);
}

.create-lite-tpl-item .thumb.t4 {
  background: linear-gradient(165deg, #93c5fd, #2563eb);
}

.create-lite-tpl-item .thumb.t5 {
  background: linear-gradient(165deg, #fde68a, #d97706);
}

.create-lite-tpl-item .meta {
  flex: 1;
  min-width: 0;
}

.create-lite-tpl-item .n {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ds-color-on-surface);
}

.create-lite-tpl-item .d {
  margin-top: 2px;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.create-lite-tpl-item .go {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  flex-shrink: 0;
}

.create-lite-tpl-back-row.back-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.create-lite-tpl-back-row.back-row button {
  border: none;
  background: none;
  color: #2563eb;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}

html[data-theme='dark'] .create-lite-tpl-back-row.back-row button {
  color: #93c5fd;
}

.create-lite-use-tpl.canvas-use-tpl {
  margin-top: auto;
}

/* confirm flow mount stubs */
.create-lite-confirm-stub {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.create-lite-confirm-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.create-lite-confirm-cancel {
  width: 100%;
  height: 40px;
  border-radius: var(--ds-corner-medium);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.create-lite-confirm-cancel:hover {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
}

.create-lite-confirm-cancel:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

/* C8 · open-material consent card (authority #openmat .consent-card) */
.create-lite-open-material-message {
  position: relative;
  width: 100%;
  max-width: 558px;
  margin-bottom: 14px;
}

.create-lite-open-material-message .create-lite-consent-card {
  margin-top: 8px;
}

.create-lite-consent-card {
  width: min(400px, 100%);
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  background: #ffffff;
  color: #18181b;
}

.create-lite-consent-card h4 {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 650;
}

.create-lite-consent-card > p {
  margin: 0 0 12px;
  color: #52525b;
  font-size: 12.5px;
  line-height: 1.55;
}

.create-lite-consent-remember {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 12px;
  color: #52525b;
  font-size: 11.5px;
  line-height: 1.45;
}

.create-lite-consent-remember input {
  margin: 2px 0 0;
  accent-color: var(--create-lite-primary-bg);
}

.create-lite-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.create-lite-consent-actions button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.create-lite-consent-actions button.is-primary {
  border: 0;
  border-color: #18181b;
  background: #18181b;
  color: #ffffff;
  font-weight: 500;
}

html[data-theme='dark'] .create-lite-consent-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #1a1a1e;
  color: #f4f4f5;
}

html[data-theme='dark'] .create-lite-consent-card > p {
  color: #c4c4c8;
}

html[data-theme='dark'] .create-lite-consent-remember {
  color: #c4c4c8;
}

html[data-theme='dark'] .create-lite-consent-actions button.is-primary {
  border: 0;
  border-color: #f4f4f5;
  background: #f4f4f5;
  color: #18181b;
  font-weight: 500;
}

.create-lite-consent-actions button.is-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
}

.create-lite-consent-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.create-lite-consent-error {
  margin: 0 0 10px;
  color: var(--ds-color-error);
  font-size: 12px;
  line-height: 1.45;
}

/* L 标准：右栏 dock ≈ 340 */
@media (max-width: 1439px) {
  .create-lite-workspace {
    --create-lite-canvas-width: 340px;
  }
}

/* M 紧凑本：右栏 dock ≈ 300；3 列 × 2 行（与 templateCarouselPageSize 每页 6 张对齐） */
@media (max-width: 1279px) {
  .create-lite-workspace {
    --create-lite-canvas-width: 300px;
  }

  .create-lite-template-carousel {
    max-width: 760px;
    padding: 0 28px;
  }

  .create-lite-template-carousel__page {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .create-lite-template-card {
    min-height: 100px;
  }
}

/* S 窄窗 / 平板横：2 列 × 2 行（每页 4 张）；右栏改叠层（见 .is-overlay） */
@media (max-width: 1023px) {
  .create-lite-workspace {
    --create-lite-canvas-width: 300px;
  }

  .create-lite-template-carousel {
    max-width: 560px;
    padding: 0 24px;
  }

  .create-lite-template-carousel__page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .create-lite-template-card {
    min-height: 96px;
  }

  .create-lite-cold-welcome h2 {
    font-size: 16px;
  }

  .create-lite-chat-inner {
    padding-inline: 16px;
  }

  .create-lite-cold-templates {
    padding-inline: 20px;
  }

  /* 窄宽不再隐藏右栏：开态走叠层；关态保留「画布」窄条可点开 */
  .create-lite-canvas-rail,
  .create-lite-canvas-rail.canvas-rail {
    display: flex;
  }

}

/* XS 手机：单列列表（每页 3 张） */
@media (max-width: 767px) {
  .create-lite-template-carousel {
    max-width: 100%;
    padding: 0 12px;
  }

  .create-lite-template-carousel__page {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .create-lite-template-carousel__arrow {
    display: none;
  }

  .create-lite-template-card {
    min-height: 88px;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
  }

  .create-lite-template-card__icon {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .create-lite-template-card__description {
    -webkit-line-clamp: 1;
  }

  .create-lite-composer-shell {
    max-width: 100%;
  }
}

/* U0 · LiteChoiceCard — choice grammar, kept on the lite surface only. */
.create-lite-choice-card {
  --create-lite-choice-border: #cfe6ff;
  --create-lite-choice-shadow: 0 1px 3px rgba(77, 166, 255, 0.12);
  max-width: 420px;
  margin: 3px 0;
  padding: 9px 12px;
  border: 1px solid var(--create-lite-choice-border);
  border-radius: var(--ds-corner-medium, );
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  box-shadow: var(--create-lite-choice-shadow);
  font-size: 12.5px;
}

html[data-theme='dark'] .create-lite-choice-card {
  --create-lite-choice-border: rgba(77, 166, 255, 0.55);
  --create-lite-choice-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.create-lite-choice-card__tag {
  color: var(--ds-color-primary, );
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.create-lite-choice-card__title {
  margin: 4px 0;
  color: var(--ds-color-on-surface);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
}

.create-lite-choice-card__description,
.create-lite-choice-card__option-desc {
  margin: 0;
  color: var(--ds-color-on-surface-variant, );
  line-height: 1.45;
}

.create-lite-choice-card__options {
  display: flex;
  gap: 5px;
  margin-top: 7px;
}

.create-lite-choice-card__options.is-list {
  flex-direction: column;
}

.create-lite-choice-card__options.is-avatars {
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 2px;
}

.create-lite-choice-card__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 5px 9px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.create-lite-choice-card__options.is-avatars .create-lite-choice-card__option {
  flex: 0 0 54px;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  text-align: center;
}

.create-lite-choice-card__option:hover {
  border-color: var(--ds-color-on-surface-variant);
}

.create-lite-choice-card__option:focus-visible,
.create-lite-choice-card__action:focus-visible,
.create-lite-choice-card__editable textarea:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-choice-card__option.is-selected {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
  font-weight: 600;
}

.create-lite-choice-card__options.is-avatars .create-lite-choice-card__option.is-selected {
  border-color: transparent;
  background: transparent;
}

.create-lite-choice-card__radio {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  border: 1.5px solid var(--ds-color-outline-variant);
  border-radius: 50%;
}

.create-lite-choice-card__option.is-selected .create-lite-choice-card__radio {
  border-color: var(--ds-color-on-surface);
  background: radial-gradient(circle at center, var(--ds-color-on-surface) 40%, transparent 45%);
}

.create-lite-choice-card__avatar {
  display: grid;
  width: 44px;
  height: 56px;
  place-items: center;
  overflow: hidden;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: linear-gradient(160deg, var(--ds-color-surface-container), var(--ds-color-outline-variant));
  color: var(--ds-color-on-surface-variant);
  font-size: 14px;
}

.create-lite-choice-card__option.is-selected .create-lite-choice-card__avatar {
  border-color: var(--ds-color-on-surface);
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-choice-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.create-lite-choice-card__option-copy {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.create-lite-choice-card__option-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-lite-choice-card__recommended {
  flex-shrink: 0;
  color: var(--ds-color-primary, );
  font-size: 10px;
  font-weight: 700;
}

.create-lite-choice-card__options.is-avatars .create-lite-choice-card__option-copy {
  width: 100%;
  align-items: center;
}

.create-lite-choice-card__options.is-avatars .create-lite-choice-card__option-desc {
  display: none;
}

.create-lite-choice-card__options.is-avatars .create-lite-choice-card__recommended {
  position: absolute;
  top: 0;
  right: 0;
}

.create-lite-choice-card__editable {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 7px;
}

.create-lite-choice-card__editable label {
  color: var(--ds-color-on-surface-variant, );
  font-size: 11px;
}

.create-lite-choice-card__editable textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  padding: 6px 9px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 7px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  line-height: 1.45;
}

.create-lite-choice-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.create-lite-choice-card__action {
  min-height: 28px;
  padding: 3px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 7px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.create-lite-choice-card__action.is-primary {
  border-color: var(--create-lite-primary-bg, #18181b);
  background: var(--create-lite-primary-bg, #18181b);
  color: var(--create-lite-primary-fg, #fff);
}

.create-lite-choice-card__action:hover:not(:disabled) {
  border-color: var(--ds-color-on-surface);
}

.create-lite-choice-card__action.is-primary:hover:not(:disabled) {
  opacity: 0.88;
}

.create-lite-choice-card__action:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.create-lite-choice-card__sumline {
  display: flex;
  align-items: baseline;
  gap: 4px;
  max-width: 420px;
  margin: 4px 0;
  padding: 1px 0 1px 8px;
  border-left: 2px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant, );
  font-size: 11.5px;
  line-height: 1.45;
}

.create-lite-choice-card__sumline-status {
  font-size: 11px;
  font-weight: 600;
}

.create-lite-choice-card__sumline-status.is-resolved {
  color: var(--ds-color-secondary, );
}

.create-lite-choice-card__sumline-status.is-skipped {
  color: var(--ds-color-on-surface-variant, );
  font-weight: 500;
}

/* U0 · LiteGuideCard — guide grammar, kept on the lite surface only. */
.create-lite-guide-card {
  --create-lite-guide-border: rgba(24, 24, 27, 0.14);
  --create-lite-guide-surface: rgba(24, 24, 27, 0.02);
  --create-lite-guide-tag: #7e22ce;
  max-width: 420px;
  margin: 3px 0;
  padding: 9px 12px;
  border: 1px dashed var(--create-lite-guide-border);
  border-radius: var(--ds-corner-medium, );
  background: var(--create-lite-guide-surface);
  color: var(--ds-color-on-surface);
  font-size: 12.5px;
}

html[data-theme='dark'] .create-lite-guide-card {
  --create-lite-guide-border: var(--ds-color-outline-variant);
  --create-lite-guide-surface: color-mix(in srgb, var(--ds-color-on-surface) 2%, var(--ds-color-surface));
  --create-lite-guide-tag: #c084fc;
}

.create-lite-guide-card__tag {
  color: var(--create-lite-guide-tag);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.create-lite-guide-card__title {
  margin: 4px 0;
  color: var(--ds-color-on-surface);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
}

.create-lite-guide-card__note {
  margin: 0;
  color: var(--ds-color-on-surface-variant, );
  line-height: 1.45;
}

.create-lite-guide-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.create-lite-guide-card__action {
  min-height: 28px;
  padding: 3px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 7px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.create-lite-guide-card__action.is-primary {
  border-color: var(--create-lite-primary-bg, #18181b);
  background: var(--create-lite-primary-bg, #18181b);
  color: var(--create-lite-primary-fg, #fff);
}

.create-lite-guide-card__action.is-secondary {
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.create-lite-guide-card__action.is-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ds-color-on-surface-variant, );
}

.create-lite-guide-card__action:hover:not(:disabled) {
  border-color: var(--ds-color-on-surface);
}

.create-lite-guide-card__action.is-primary:hover:not(:disabled) {
  opacity: 0.88;
}

.create-lite-guide-card__action.is-ghost:hover:not(:disabled) {
  border-color: var(--ds-color-on-surface-variant);
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
}

.create-lite-guide-card__action:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-guide-card__action:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.create-lite-guide-card__sumline {
  display: flex;
  align-items: baseline;
  max-width: 420px;
  margin: 4px 0;
  padding: 1px 0 1px 8px;
  border-left: 2px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant, );
  font-size: 11.5px;
  line-height: 1.45;
}

/* Storyboard confirmation rail: intentionally scoped to the Lite panel. */
.create-lite-storyboard-panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.create-lite-storyboard-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
  padding: 24px;
  color: var(--ds-color-on-surface-variant, );
  font-size: 13px;
  text-align: center;
}

.create-lite-storyboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.create-lite-storyboard-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--ds-color-on-surface-variant, );
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.create-lite-storyboard-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.create-lite-storyboard-count,
.create-lite-storyboard-tag {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--ds-color-on-surface-variant, );
  font-size: 11px;
  white-space: nowrap;
}

.create-lite-storyboard-summary {
  margin: 0 24px;
  padding: 8px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 10px;
  background: var(--ds-color-surface-container, );
  color: var(--ds-color-on-surface-variant, );
  font-size: 12px;
  line-height: 1.45;
}

.create-lite-storyboard-summary.is-missing {
  border-color: #fecaca;
  background: #fffafa;
}

.create-lite-storyboard-summary-missing {
  color: #dc2626;
  font-weight: 700;
}

.create-lite-storyboard-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 16px 24px 24px;
  overflow: auto;
}

.create-lite-storyboard-scene {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 12px;
  padding: 14px;
  background: var(--ds-color-surface);
  box-shadow: var(--create-lite-card-shadow);
}

.create-lite-storyboard-scene.is-missing {
  border-color: #fca5a5;
  background: #fffafa;
}

.create-lite-storyboard-scene.is-missing .create-lite-storyboard-script-label textarea {
  border-color: #fca5a5;
}

.create-lite-storyboard-shot-alert {
  margin: 8px 0 0;
  color: #b91c1c;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
}

.create-lite-storyboard-scene-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.create-lite-storyboard-scene-number {
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 700;
}

.create-lite-storyboard-tag {
  border-radius: 5px;
  padding: 2px 6px;
  color: var(--ds-color-on-surface-variant, );
  font-size: 10px;
}

.create-lite-storyboard-state {
  margin-left: auto;
  color: #15803d;
  font-size: 11px;
  font-weight: 700;
}

.create-lite-storyboard-state.is-missing,
.create-lite-storyboard-footer-message.is-missing,
.create-lite-storyboard-error {
  color: #dc2626;
}

.create-lite-storyboard-script-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ds-color-on-surface-variant, );
  font-size: 11px;
  font-weight: 650;
}

.create-lite-storyboard-script-label textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--ds-color-surface, );
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

.create-lite-storyboard-script-label textarea:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-storyboard-material {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  padding: 8px;
  background: var(--ds-color-surface, );
}

.create-lite-storyboard-material.is-missing {
  border-color: #fca5a5;
  background: #fff1f2;
}

.create-lite-storyboard-material img,
.create-lite-storyboard-material-placeholder {
  width: 54px;
  height: 42px;
  flex: 0 0 54px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--ds-color-surface-container, );
}

.create-lite-storyboard-material-placeholder {
  display: grid;
  place-items: center;
  color: var(--ds-color-on-surface-variant, );
  font-size: 10px;
}

.create-lite-storyboard-material-info {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.create-lite-storyboard-material-label,
.create-lite-storyboard-material-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-lite-storyboard-material-label {
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 650;
}

.create-lite-storyboard-material-path {
  color: var(--ds-color-on-surface-variant, );
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10px;
}

.create-lite-storyboard-recall,
.create-lite-storyboard-synthesize {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 7px;
  padding: 6px 10px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.create-lite-storyboard-recall:hover:not(:disabled) {
  border-color: var(--ds-color-on-surface);
}

.create-lite-storyboard-recall.is-missing {
  border-color: #fecaca;
  background: #fff5f5;
  color: #b91c1c;
}

.create-lite-storyboard-recall:disabled,
.create-lite-storyboard-synthesize:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.create-lite-storyboard-recall:focus-visible,
.create-lite-storyboard-synthesize:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-storyboard-error,
.create-lite-storyboard-footer-message {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.45;
}

.create-lite-storyboard-footer {
  flex-shrink: 0;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}

.create-lite-storyboard-synthesize {
  width: 100%;
  border-color: var(--create-lite-primary-bg, #18181b);
  background: var(--create-lite-primary-bg, #18181b);
  color: var(--create-lite-primary-fg, #fff);
  padding: 10px 14px;
  font-size: 13px;
}

.create-lite-storyboard-synthesize:hover:not(:disabled) {
  opacity: 0.88;
}

/* Custom script right-rail paste panel (v3 custom.html cs-* structure) */
.create-lite-custom-script-input-panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.create-lite-custom-script-input-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.create-lite-custom-script-input-panel__header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.create-lite-custom-script-input-panel__sub {
  margin: 4px 0 0;
  color: var(--ds-color-on-surface-variant, );
  font-size: 12px;
  line-height: 1.4;
}

.create-lite-custom-script-input-panel__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 16px 24px 12px;
  overflow: auto;
}

.create-lite-cs-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.create-lite-cs-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 999px;
  background: #fff;
  color: var(--ds-color-outline, );
  font-size: 11px;
  font-weight: 650;
}

.create-lite-cs-step .n {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  background: #f4f4f5;
  color: var(--ds-color-on-surface-variant, );
  font-size: 10px;
  font-weight: 800;
}

.create-lite-cs-step.is-now {
  border-color: #bae0ff;
  background: #f2f9ff;
  color: #097fe8;
}

.create-lite-cs-step.is-now .n {
  background: #bae0ff;
  color: #097fe8;
}

.create-lite-cs-field label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--ds-color-outline, );
  font-size: 11px;
  font-weight: 650;
}

.create-lite-cs-field textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 12px;
  background: #fff;
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
}

.create-lite-cs-field textarea:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.create-lite-cs-field textarea:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.create-lite-cs-hint {
  margin: 0 2px;
  color: var(--ds-color-on-surface-variant, );
  font-size: 12px;
  line-height: 1.45;
}

.create-lite-cs-polish {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 12px;
  background: #fafafa;
}

.create-lite-cs-polish strong {
  font-size: 12.5px;
}

.create-lite-cs-polish span {
  color: var(--ds-color-on-surface-variant, );
  font-size: 12px;
  line-height: 1.45;
}

.create-lite-cs-error {
  margin: 0;
  color: #b91c1c;
  font-size: 12px;
  line-height: 1.45;
}

.create-lite-custom-script-input-panel__foot {
  flex-shrink: 0;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}

.create-lite-cs-btn-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.create-lite-cs-btn {
  width: 100%;
  height: 40px;
  border: 1px solid #18181b;
  border-radius: 10px;
  background: #18181b;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.create-lite-cs-btn.secondary {
  border-color: var(--ds-color-on-surface-variant);
  background: #fff;
  color: var(--ds-color-on-surface);
}

.create-lite-cs-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.create-lite-cs-btn:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

/* ═══════════════════════════════════════════════════════════
   V5 · 冷启动工作区一屏一模板 + 中栏开场
   稿子：.phead-main / .kind-tab / .tnav / .phone-body / .paper / …
   ═══════════════════════════════════════════════════════════ */

.create-lite-canvas .phead-main {
  height: 52px;
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
}

.create-lite-canvas .phead-title {
  font-size: 14px;
  font-weight: 600;
  padding: 0 8px;
  color: var(--wb-ink);
}

.create-lite-canvas .phead-count {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--wb-dim);
  letter-spacing: .08em;
  margin-left: auto;
  margin-right: 12px;
}

.create-lite-canvas .phead-main .create-lite-open-lib {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--wb-line);
  background: transparent;
  color: var(--wb-mut);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.create-lite-canvas .phead-note {
  font-size: 11px;
  color: var(--wb-dim);
  margin-left: auto;
  margin-right: 12px;
}

/* Grid view back (only when in-library grid, not root stage) */
.create-lite-canvas .phead-main .phead-back {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--wb-mut);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.create-lite-canvas .phead-main .phead-back svg {
  width: 15px;
  height: 15px;
}

.create-lite-canvas .phead-main .phead-back:hover {
  background: var(--wb-chip);
  color: var(--wb-ink);
}

/* V6 · 模板库网格（看全部） */
.create-lite-canvas .lgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.create-lite-canvas .lcard {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.create-lite-canvas .lcard .th {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 8px;
  overflow: hidden;
}

.create-lite-canvas .lcard .bd {
  position: absolute;
  left: 8px;
  bottom: 8px;
  height: 20px;
  padding: 0 7px;
  border-radius: 5px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  display: inline-flex;
  align-items: center;
}

.create-lite-canvas .lcard .bd:empty {
  display: none;
}

.create-lite-canvas .lcard .n {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--wb-ink);
}

.create-lite-canvas .lcard .d {
  font-size: 11px;
  color: var(--wb-mut);
  line-height: 16px;
  margin-top: 3px;
  height: 32px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.create-lite-canvas .create-lite-tpl-browse.is-lib-grid .create-lite-panel-body,
.create-lite-canvas .create-lite-panel-body.is-scroll {
  overflow: auto;
  min-height: 0;
}

/* F1: close merges into browse root phead-main (no second CanvasNavHeader row) */
.create-lite-canvas .phead-main > .x {
  margin-left: 0;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--wb-dim);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.create-lite-canvas .phead-main > .x svg {
  width: 15px;
  height: 15px;
}

.create-lite-canvas .phead-main > .x:hover {
  background: var(--wb-chip);
  color: var(--wb-ink);
}

.create-lite-canvas .kind-tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--wb-line2);
  flex: 0 0 auto;
}

.create-lite-canvas .kind-tab {
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--wb-mut);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.create-lite-canvas .kind-tab.on {
  background: var(--wb-chip);
  color: var(--wb-ink);
  font-weight: 550;
}

.create-lite-canvas .kind-tab .c {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--wb-dim);
}

.create-lite-canvas .kind-tab.on .c {
  color: var(--wb-mut);
}

.create-lite-canvas .tstage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
}

.create-lite-canvas .tnav {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 8px;
  border: 1px solid var(--wb-line);
  display: grid;
  place-items: center;
  color: var(--wb-mut);
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.create-lite-canvas .tnav svg {
  width: 16px;
  height: 16px;
}

.create-lite-canvas .tnav.is-disabled,
.create-lite-canvas .tnav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.create-lite-canvas .tnav.is-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.create-lite-canvas .phone-body {
  width: 260px;
  border: 4px solid #18181b;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 9/16;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

/* 窄窗右栏（≤1023px 时 canvas 收到 300px）：样片卡收窄，保证箭头+卡片一行不溢出 */
@media (max-width: 1023px) {
  .create-lite-canvas .phone-body {
    width: 180px;
  }
}

.create-lite-canvas .phone-body .g {
  position: absolute;
  inset: 0;
}

.create-lite-canvas .phone-body .tap {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.create-lite-canvas .phone-body .pl {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  place-items: center;
  color: #18181b;
  border: none;
  padding: 0;
  pointer-events: none;
  z-index: 3;
}

.create-lite-canvas .phone-body .pl svg {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  fill: currentColor;
}

.create-lite-canvas .phone-body video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.create-lite-canvas .phone-body .mute {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
  color: #fff;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 4;
}

.create-lite-canvas .phone-body .mute svg {
  width: 12px;
  height: 12px;
}

/* 与成片预览 .vbox 对齐：时长 / 放大 / 进度条 */
.create-lite-canvas .phone-body .dur {
  position: absolute;
  right: 8px;
  top: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 6px;
  border-radius: 4px;
  z-index: 3;
}

.create-lite-canvas .phone-body .enlarge {
  position: absolute;
  right: 8px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  display: grid;
  place-items: center;
  color: #fff;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 4;
}

.create-lite-canvas .phone-body .enlarge:hover {
  background: rgba(0, 0, 0, 0.72);
}

.create-lite-canvas .phone-body .enlarge svg {
  width: 14px;
  height: 14px;
}

.create-lite-canvas .phone-body .bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.28);
  z-index: 3;
  pointer-events: none;
}

.create-lite-canvas .phone-body .bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: #fff;
}

.create-lite-canvas .phone-body .pcap {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  color: #fff;
  z-index: 1;
}

.create-lite-canvas .phone-body .pcap .k {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .08em;
  opacity: 0.7;
}

.create-lite-canvas .phone-body .pcap .n {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 4px;
}

.create-lite-canvas .paper {
  width: 172px;
  aspect-ratio: 3/4;
  border: 1px solid var(--wb-line);
  border-radius: 4px;
  background: var(--wb-panel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  padding: 15px 14px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 0 0 auto;
}

html[data-theme='dark'] .create-lite-canvas .paper {
  box-shadow: none;
  background: #1d1d21;
}

.create-lite-canvas .paper .kicker {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 6.5px;
  letter-spacing: .14em;
  color: var(--wb-dim);
  text-transform: uppercase;
}

.create-lite-canvas .paper .ptitle {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--wb-ink);
}

.create-lite-canvas .paper .byline {
  font-size: 6.5px;
  color: var(--wb-dim);
}

.create-lite-canvas .paper .hr {
  height: 1px;
  background: var(--wb-line2);
}

.create-lite-canvas .paper .ln {
  height: 4px;
  border-radius: 2px;
  background: var(--wb-line2);
}

.create-lite-canvas .paper .ln.s {
  width: 62%;
}

.create-lite-canvas .paper .h2b {
  height: 6px;
  width: 44%;
  border-radius: 2px;
  background: var(--wb-line);
  margin-top: 3px;
}

.create-lite-canvas .paper .fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--wb-panel));
}

html[data-theme='dark'] .create-lite-canvas .paper .fade {
  background: linear-gradient(to bottom, transparent, #1d1d21);
}

.create-lite-canvas .tmeta .row1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.create-lite-canvas .tmeta h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--wb-ink);
  min-width: 0;
}

.create-lite-canvas .tmeta .badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--wb-chip);
  font-size: 11px;
  color: var(--wb-mut);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  flex: 0 0 auto;
}

.create-lite-canvas .tmeta .badge .mk,
.create-lite-canvas .tmeta .badge .mk svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}

.create-lite-canvas .tmeta .row2 {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--wb-dim);
  letter-spacing: .04em;
  margin-top: 4px;
  line-height: 1.5;
}

.create-lite-canvas .sh {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--wb-ink);
}

.create-lite-canvas .struct-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.create-lite-canvas .st {
  min-width: 0;
}

.create-lite-canvas .st .th {
  width: 100%;
  height: 44px;
  border-radius: 4px;
}

.create-lite-canvas .st .nm {
  font-size: 11px;
  font-weight: 550;
  margin-top: 4px;
  line-height: 1.3;
  color: var(--wb-ink);
}

.create-lite-canvas .st .nm b {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 400;
  color: var(--wb-dim);
  margin-right: 4px;
}

.create-lite-canvas .outline {
  display: flex;
  flex-direction: column;
}

.create-lite-canvas .outline .o {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--wb-line2);
  font-size: 12px;
  line-height: 1.5;
}

.create-lite-canvas .outline .o:first-child {
  border-top: none;
  padding-top: 0;
}

.create-lite-canvas .outline .o .no {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--wb-dim);
  flex: 0 0 auto;
  padding-top: 1px;
}

.create-lite-canvas .outline .o .tx b {
  font-weight: 600;
  font-size: 12px;
  color: var(--wb-ink);
}

.create-lite-canvas .outline .o .tx span {
  color: var(--wb-mut);
  font-size: 11px;
  margin-left: 6px;
}

.create-lite-canvas .why ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.create-lite-canvas .why li {
  display: flex;
  gap: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--wb-mut);
  list-style: none;
}

.create-lite-canvas .why .mk,
.create-lite-canvas .why .mk svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}

.create-lite-canvas .create-lite-tpl-browse,
.create-lite-canvas .video-template-workbench {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 中栏冷启动开场语 */
.create-lite-cold-open {
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-height: min(480px, 70vh);
  padding: 24px 8px 12px;
}

.create-lite-cold-open__mono {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ds-color-on-surface-variant, #a1a1aa);
  display: block;
  margin-bottom: 8px;
}

.create-lite-cold-open__main {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--ds-color-on-surface, #18181b);
}

.create-lite-cold-open__sub {
  color: var(--ds-color-on-surface-variant, #71717a);
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
}

.create-lite-cold-open__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.create-lite-cold-open__choice {
  border: 1px solid var(--ds-color-outline-variant, #e8e8ec);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ds-color-on-surface, #18181b);
  background: var(--ds-color-surface, #fff);
  font-family: inherit;
  cursor: pointer;
}

.create-lite-cold-open__choice.is-ghost {
  color: var(--ds-color-on-surface-variant, #71717a);
}

.create-lite-cold-open__choice:hover {
  border-color: var(--ds-color-outline, #a1a1aa);
}
/*
 * 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）。
 */

/*
 * 共享通知区：guide-panel + antd message 纵向排列，pointer-events 透传给下方画布
 * antd message 默认 position:fixed，在 strip 内重写为 relative 以参与 flex 布局。
 */
.canvas-notification-strip {
  z-index: 1050; /* 高于输入区(1000) 低于 popover(1030) */
}
.canvas-notification-strip .ant-message {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  pointer-events: auto;
}
.canvas-notification-strip .ant-message .ant-message-notice {
  margin-bottom: 0;
  padding: 0;
}
.console-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  height: 100vh;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.console-body {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* V1：画布/工作区左上角「默认操作 · 产品」挂载（非顶栏全局 scope） */
.canvas-product-mount {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 50; /* 高于 DataDashboardFullscreen(40)，避免数据/投放全屏盖住 */
  pointer-events: none;
}
.canvas-product-mount > * {
  pointer-events: auto;
}
/* 投放全屏 portal 盖住 body 时，挂载改为 fixed；让出左轨 */
.console-shell--placement-fullscreen .canvas-product-mount {
  position: fixed;
  top: 12px;
  left: calc(var(--app-rail-w, 248px) + 16px);
  z-index: 50;
}

.product-mount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(24, 24, 27, 0.03);
}
.product-mount:hover {
  background: var(--ds-color-surface-container);
}
.product-mount__label {
  color: var(--ds-color-on-surface-variant);
  font-weight: 500;
  font-size: 11px;
}
.product-mount__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-color-secondary);
  flex-shrink: 0;
}
.product-mount__name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-mount__change {
  color: var(--ds-color-on-surface-variant);
  font-weight: 500;
  border-left: 1px solid var(--ds-color-outline-variant);
  padding-left: 8px;
  margin-left: 2px;
  white-space: nowrap;
}
.product-mount--empty .product-mount__dot {
  background: var(--ds-color-outline-variant);
}
.product-mount--skeleton,
.product-mount--error {
  cursor: default;
}
.product-mount--error {
  color: var(--ds-color-error);
}
.product-mount:disabled {
  opacity: 0.7;
  cursor: default;
}
.product-mount:disabled:hover {
  background: var(--ds-color-surface);
}

/* 监控 tab 全屏大盘（!825）：console-body 收单列。 */
.console-body--full {
  grid-template-columns: 1fr;
}

/*
 * 投放 tab 整屏接管：PlacementCenterFullscreen 经 createPortal 挂 body。
 * 这里只做「去 dock 列 + 收画布装饰层」。数据 tab 已壳内化，不再使用 data-fullscreen。
 */
.console-shell--placement-fullscreen .console-body {
  grid-template-columns: 1fr;
}

.console-shell--publish-persona-dock [data-testid="publish-account-home"] {
  padding-right: min(420px, 28vw);
  transition: padding-right 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 监控全屏采集态 dock 带出：MonitorDashboard 让出 dock 宽度（复用发布 tab 让位机制，
   口径与 --publish-persona-dock 完全一致）。根容器已带 data-testid="monitor-dashboard"，
   直接套此机制，不新增 testid、不另造动画。 */
.console-shell--monitor-collect-dock [data-testid="monitor-dashboard"] {
  padding-right: min(420px, 28vw);
  transition: padding-right 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

.console-shell--placement-fullscreen .canvas-toolbar,
.console-shell--placement-fullscreen .react-flow__background,
.console-shell--placement-fullscreen .react-flow__minimap,
.console-shell--placement-fullscreen .react-flow__controls {
  display: none;
}

.console-entry-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  min-height: 360px;
  background: #ffffff;
  color: var(--ds-color-on-surface);
}

.console-entry-loading__status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.console-entry-loading__mark-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  animation: console-entry-logo-breathe 1.6s ease-in-out infinite;
}

.console-entry-loading__mark {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(24, 24, 27, 0.1));
}

.console-entry-loading__text {
  font-size: 15px;
  font-weight: 650;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--ds-color-on-surface);
}

@keyframes console-entry-logo-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.96;
  }

  48% {
    transform: translateY(1px) scale(0.965);
    opacity: 0.88;
  }

  68% {
    transform: translateY(-1px) scale(1.018);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .console-entry-loading__mark-wrap {
    animation: none;
  }
}

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

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

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

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

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

.product-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  padding: var(--ds-sys-space-xs) var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  font-size: 13px;
  color: var(--ds-color-on-surface);
  cursor: pointer;
}

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

.product-switcher .caret {
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
}

.topbar-spacer {
  flex: 1;
}

.topbar-module-nav.map-ttab-bar {
  align-self: stretch;
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: min(520px, 44vw);
  margin-left: var(--ds-sys-space-xs);
  flex: 0 1 auto;
}

.topbar-module-nav .map-ttab-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.topbar-module-nav .map-ttab-nav::-webkit-scrollbar {
  display: none;
}

.topbar-module-nav .map-ttab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 100%;
  padding: 0 13px;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
  transition: color 0.15s;
}

.topbar-module-nav .map-ttab .new-dot {
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--ds-color-on-primary-container);
  flex: 0 0 auto;
}

.topbar-module-nav .map-ttab:hover {
  color: var(--ds-color-on-surface);
}

.topbar-module-nav .map-ttab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(24, 24, 27, 0.14);
}

.topbar-module-nav .map-ttab--on {
  color: var(--ds-color-on-surface);
}

.topbar-module-nav .map-ttab--on::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ds-color-on-surface);
}

.topbar-module-nav .map-ttab--soon {
  color: var(--ds-color-on-surface-variant);
}

.topbar-module-nav .map-ttab--soon.map-ttab--on {
  color: var(--ds-color-on-surface);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-md);
  flex: 0 0 auto;
}

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

.topbar-btn:hover {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
}

.topbar-btn--feishu {
  height: 32px;
  border-color: var(--ds-color-on-surface-variant);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ds-color-secondary) 10%, transparent), transparent 48%),
    var(--ds-color-surface);
  font-weight: 700;
}

.topbar-btn--feishu svg {
  flex: 0 0 auto;
}

.product-switcher:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.product-switcher:disabled:hover {
  background: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface-variant);
}

.console-topbar .topbar-avatar.ant-avatar {
  background: var(--ds-color-on-surface) !important;
  color: var(--ds-color-surface) !important;
}

@media (max-width: 860px) {
  .topbar-module-nav.map-ttab-bar {
    max-width: 34vw;
  }

  .topbar-module-nav .map-ttab {
    padding: 0 11px;
  }
}

@media (max-width: 640px) {
  .console-topbar {
    gap: var(--ds-sys-space-sm);
    padding: 0 var(--ds-sys-space-md);
    overflow: hidden;
  }

  .topbar-left {
    flex: 0 1 auto;
    min-width: 0;
    gap: var(--ds-sys-space-sm);
  }

  .topbar-logo span:not(.logo-mark),
  .topbar-divider,
  .topbar-spacer,
  .topbar-btn--feishu span {
    display: none;
  }

  .product-switcher {
    max-width: 112px;
    min-width: 0;
    padding: var(--ds-sys-space-xs) var(--ds-sys-space-sm);
  }

  .product-switcher > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-module-nav.map-ttab-bar {
    flex: 1 1 112px;
    min-width: 112px;
    max-width: none;
    margin-left: 0;
  }

  .topbar-module-nav .map-ttab {
    padding: 0 var(--ds-sys-space-sm);
  }

  .topbar-right {
    flex: 0 0 auto;
    gap: var(--ds-sys-space-sm);
  }

  .topbar-btn--feishu {
    width: 32px;
    justify-content: center;
    padding: 0;
  }
}

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

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

.canvas-stage--mindmap {
  position: relative;
}

.agent-canvas-panel-host {
  position: absolute;
  right: var(--ds-sys-space-xl);
  bottom: var(--ds-sys-space-xl);
  z-index: 70;
  width: min(380px, calc(100% - var(--ds-sys-space-xl) * 2));
  pointer-events: none;
}

.agent-canvas-panel-hitbox {
  pointer-events: auto;
  width: 100%;
}

.agent-canvas-panel-host .agent-panel {
  pointer-events: auto;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: color-mix(in srgb, var(--ds-color-surface) 96%, transparent);
  color: var(--ds-color-on-surface);
  box-shadow: var(--ds-elevation-4);
}

@media (max-width: 720px) {
  .agent-canvas-panel-host {
    left: var(--ds-sys-space-md);
    right: var(--ds-sys-space-md);
    bottom: var(--ds-sys-space-md);
    width: auto;
  }
}

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

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

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

.ph-sub {
  font-size: 14px;
  color: var(--ds-color-on-surface-variant);
}

.canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-xl);
  border-top: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}

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

.zoom-group {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  padding: 2px var(--ds-sys-space-xs);
}

.zoom-group button {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font-size: 14px;
  cursor: pointer;
  border-radius: var(--ds-corner-small);
}

.zoom-group button:hover {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
}

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

/* ===== Dock ===== */
.console-dock {
  position: fixed;
  right: 24px;
  top: 12px;
  bottom: 100px;
  width: 380px;
  z-index: 1000;
  border-radius: 16px;
  border: 1px solid var(--ds-color-outline-variant, );
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  background: color-mix(in srgb, var(--ds-color-surface, ) 86%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
}
.console-dock.collapsed {
  transform: translateX(calc(100% + 24px));
}

.console-dock.console-dock--publish-persona {
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
}

.console-dock.console-dock--publish-persona:not(.collapsed) {
  transform: none;
}

/* 发布 tab 融合态：全局输入框(AgentInputBar)浮在对话坞内底(fixed)，消息流底部留出输入框高度，
   使最后一条消息不被融合的输入框遮挡（对应设计稿 .dmsgs padding-bottom）。 */
.console-dock--publish-persona:not(.collapsed) .dock-stream {
  padding-bottom: 80px;
}

@media (max-width: 900px) {
  .console-shell--publish-persona-dock [data-testid="publish-account-home"] {
    padding-right: 0;
  }
  .console-shell--monitor-collect-dock [data-testid="monitor-dashboard"] {
    padding-right: 0;
  }
}

.chat-handle {
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 90px;
  background: color-mix(in srgb, var(--ds-color-surface, ) 95%, transparent);
  border: 1px solid var(--ds-color-outline-variant);
  border-right: none;
  border-radius: 9px 0 0 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-color-on-surface-variant, );
  font-size: 11px;
  font-weight: 600;
  box-shadow: -4px 0 12px -4px rgba(24, 24, 27, 0.12);
  transition: color .15s, background .15s;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  outline: none;
  z-index: 1001;
}
.chat-handle:hover {
  color: var(--ds-color-on-surface, );
  background: var(--ds-color-surface-container, );
}

/* data-sync-batch C5 — 「同步数据中」busy 修饰：ink 单色，竖排 spinner 在文案上方 */
.chat-handle--busy {
  color: var(--ds-color-on-surface, );
  gap: 6px;
}
.chat-handle__spin {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.6px solid currentColor;
  border-right-color: transparent;
  display: inline-block;
  animation: dock-sync-spin 0.9s linear infinite;
}

/* 消息流外框：浮钮 overlay 不参与滚动内容高度，避免按钮自身触发 scrollHeight 抖动 */
.dock-stream-frame {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
}

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

/* 自动接管衔接点分隔线（素材上传完成） */
.dock-sys-divider {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  margin: var(--ds-sys-space-xs) 0;
}
.dock-sys-divider .line {
  flex: 1;
  height: 1px;
  background: var(--ds-color-outline-variant);
}
.dock-sys-divider .label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  letter-spacing: 0.03em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-xs);
}
.dock-sys-divider--mount .label {
  max-width: min(280px, 70vw);
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
.dock-sys-divider--mount .label strong {
  color: var(--ds-color-on-surface);
  font-weight: 700;
}
.dock-tab-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-sys-divider .label .ok {
  color: var(--ds-color-secondary);
}

/* 消息气泡 */
.dock-msg {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-xs);
  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-color-on-surface-variant);
}

.dock-msg--component {
  max-width: 95%;
}

.dock-msg--component .agent-panel {
  width: 100%;
  box-sizing: border-box;
  padding: var(--ds-sys-space-lg);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
}

.dock-msg--component .agent-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sys-space-md);
  margin-bottom: var(--ds-sys-space-md);
}

.dock-msg--component .agent-panel h2,
.dock-msg--component .agent-panel h3,
.dock-msg--component .agent-panel p {
  margin: 0;
}

.dock-msg--component .agent-panel h2 {
  font-size: 15px;
  font-weight: 700;
}

.dock-msg--component .agent-panel h3 {
  font-size: 13px;
  font-weight: 700;
}

.dock-msg--component .agent-panel-script-grid,
.dock-msg--component .agent-panel-draft,
.dock-msg--component .agent-panel-draft ol,
.dock-msg--component .agent-panel-draft li {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-sm);
}

.dock-msg--component .agent-panel label {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-xs);
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
}

.dock-msg--component .agent-panel textarea,
.dock-msg--component .agent-panel input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
}

.dock-msg--component .agent-panel textarea {
  min-height: 96px;
  padding: var(--ds-sys-space-sm);
  resize: vertical;
}

.dock-msg--component .agent-panel input {
  height: 32px;
  padding: 0 var(--ds-sys-space-sm);
}

.dock-msg--component .agent-panel-actions,
.dock-msg--component .agent-panel-draft footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  margin-top: var(--ds-sys-space-md);
}

.dock-msg--component .agent-panel button {
  height: 30px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.dock-msg--component .agent-panel button:disabled {
  color: var(--ds-color-on-surface-variant);
  cursor: not-allowed;
}

.dock-msg--component .agent-panel-alert {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-xs);
  margin-bottom: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-sm);
  border: 1px solid var(--ds-color-error, );
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-error-container, );
}

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

.dock-msg--agent .msg-body {
  max-width: 95%;
  padding: var(--ds-sys-space-md);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
  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-color-on-surface);
}

.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-color-on-surface);
  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-color-on-surface);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dock-msg--agent .msg-body a:hover {
  color: var(--ds-color-on-primary-container);
}

.dock-msg--agent .msg-body blockquote {
  margin: 12px 0;
  padding: 10px 14px;
  border-left: 3px solid var(--ds-color-on-surface);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  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-typeface-code);
  font-size: 12.5px;
  background: var(--ds-color-surface);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--ds-color-outline-variant);
}

.dock-msg--agent .msg-body pre {
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  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-color-outline-variant);
  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-color-outline-variant);
  border-radius: var(--ds-corner-small);
  overflow: hidden;
  font-size: 12.5px;
  background: var(--ds-color-surface);
}

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

.dock-msg--agent .msg-body tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  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-color-surface-container);
}

/* 扁平活动块（偏差 #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-sys-space-xs);
}

/* 工具行 / 步骤标题行：状态点 + 文字 */
.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-color-on-surface-variant);
}
.dock-act-row .suffix {
  color: var(--ds-color-on-surface-variant);
  font-weight: 500;
}

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

/* 步骤标题（steps 路径）：始终 ink 加粗，置于状态色规则之后以胜出 */
.dock-act-row .lbl--step {
  color: var(--ds-color-on-surface);
  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-color-on-surface-variant);
}

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

/* ===== 气泡内嵌微沙盒 (Mini Sandbox) — spec 2026-06-22 §3 ===== */

.mini-sandbox {
  margin: 8px 0 4px 0;
  border-radius: 8px;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.5;
}

/* — 进行中态：轻量单行 — */
.mini-sandbox--run {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  background: rgba(28, 126, 214, 0.06);
  border: 1px solid rgba(28, 126, 214, 0.15);
}

.mini-sandbox__dot--run {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ds-color-secondary, );
  animation: dock-act-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

.mini-sandbox__label {
  color: var(--ds-color-on-surface-variant);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mini-sandbox__progress {
  font-size: 11px;
  color: var(--ds-color-secondary, );
  font-variant-numeric: tabular-nums;
}

/* — 失败态：卡片式 — */
.mini-sandbox--fail {
  padding: 10px 12px;
  background: rgba(250, 82, 82, 0.04);
  border: 1px solid rgba(250, 82, 82, 0.2);
}

.mini-sandbox__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.mini-sandbox__icon {
  font-size: 11px;
  color: var(--ds-color-error, );
  flex-shrink: 0;
}

.mini-sandbox__title {
  font-weight: 600;
  color: var(--ds-color-error, );
  font-size: 12.5px;
}

.mini-sandbox__reason {
  margin: 0 0 8px 0;
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.5;
}

.mini-sandbox__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mini-sandbox__btn {
  font-size: 12px;
  line-height: 1.4;
  padding: 4px 12px;
  border-radius: var(--ds-corner-small, );
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s, background 0.15s;
}
.mini-sandbox__btn:hover { opacity: 0.85; }
.mini-sandbox__btn:active { opacity: 0.7; }

.mini-sandbox__btn--primary {
  background: var(--ds-color-secondary, );
  color: #fff;
  border: 1px solid var(--ds-color-secondary, );
}

.mini-sandbox__btn--secondary {
  background: var(--ds-color-surface, );
  color: var(--ds-color-on-surface-variant);
  border: 1px solid var(--ds-color-outline-variant, );
}

.mini-sandbox__btn--ghost {
  background: transparent;
  color: var(--ds-color-outline, );
  border: 1px solid transparent;
}
.mini-sandbox__btn--ghost:hover {
  background: rgba(0, 0, 0, 0.04);
  opacity: 1;
}

/* ===== 过程感新增（spec 2026-06-10）===== */

/* 打字机光标 */
.dock-stream-tail {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dock-caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--ds-color-on-surface);
  animation: dock-caret-blink 1s steps(1) infinite;
  margin-right: -8px;
}
@keyframes dock-caret-blink {
  50% { opacity: 0; }
}

/* dock 思考行（等待首字的内联反馈，无 avatar + 跳动省略号 + 内联跳秒）*/
.dock-thinking {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  font-size: 12.5px;
  color: var(--ds-color-on-surface-variant);
}
.dock-thinking .dots {
  animation: dock-think-pulse 1.4s ease-in-out infinite;
}
@keyframes dock-think-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* 步骤行右侧耗时（制式数字） */
.dock-act-row .t {
  margin-left: auto;
  padding-left: 10px;
  flex-shrink: 0;
}
.elapsed {
  font-family: var(--ds-typeface-code);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
}

/* 整轮过程收纳行 */
.dock-proc-fold {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  padding: 4px 0;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  user-select: none;
}
.dock-proc-fold:hover { color: var(--ds-color-on-surface); }
.dock-proc-fold .chev {
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
  transition: transform 0.18s ease;
}
.dock-proc-fold--open .chev { transform: rotate(90deg); }
.dock-proc-fold .ok { color: var(--ds-color-secondary); font-size: 11px; }

/* 过程区收起动画（spec 设计稿：整轮完成后平滑收纳，点 fold 头平滑展开/收起）。
   用 grid-template-rows 0fr↔1fr 自动测高，等价设计稿 max-height 0.28s 但更顺、无魔数。
   内容始终挂载（折叠动画必须保留 DOM），折叠时 grid 收到 0 行高 + 淡出 + clip。 */
.dock-proc-body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.28s ease, opacity 0.28s ease;
}
.dock-proc-body--folded {
  grid-template-rows: 0fr;
  opacity: 0;
}
.dock-proc-body > .dock-proc-body-inner {
  overflow: hidden;
  min-height: 0;
}

/* ===== 平台数据批量同步任务块（DockSyncTaskBlock，设计稿 2026-06-26）=====
   白底 ink 单色；折叠头 + 进度条 + 账号台账，镜像 dock-proc 折叠语义。
   console no-azure：状态/数字一律 ink，数字 Geist Mono；安静旋转环，无彩色脉冲。*/
.dock-sync-block {
  margin-top: 6px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  overflow: hidden;
  background: var(--ds-color-surface);
  /* .dock-stream 是 flex 列；本块带 overflow:hidden 会把 flex 自动最小高度降为 0，
     dock 内容多时被父容器压成只剩边框、台账行被裁掉（头部在、账号全没）。
     flex-shrink:0 锁住自身高度，让 .dock-stream（overflow-y:auto）改为滚动。 */
  flex-shrink: 0;
}
.dock-sync-head {
  display: grid;
  grid-template-columns: 13px auto 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.dock-sync-tri {
  font-size: 9px;
  color: var(--ds-color-on-surface-variant);
  transition: transform 0.18s ease;
}
.dock-sync-head--open .dock-sync-tri { transform: rotate(90deg); }
.dock-sync-lead {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}
.dock-sync-cnt {
  grid-column: 4;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
}
.dock-sync-num {
  font-family: var(--ds-typeface-code);
  font-weight: 800;
  color: var(--ds-color-on-surface);
}
.dock-sync-issue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ds-color-on-surface-variant);
}
.dock-sync-issue--fail { color: var(--ds-color-error); }
.dock-sync-issue--fail .dock-sync-num { color: var(--ds-color-error); }

/* 安静旋转环（设计稿 .spin）：currentColor 单色，非彩色脉冲点 */
.dock-sync-spin {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.6px solid currentColor;
  border-right-color: transparent;
  display: inline-block;
  animation: dock-sync-spin 0.9s linear infinite;
}
@keyframes dock-sync-spin { to { transform: rotate(360deg); } }

/* 完成徽标（设计稿 .mk.done / .mk.fail）：小号实心圆 + 白勾，非绿描边/绿字。
   done = 绿底白勾；fail = danger 底白叉。状态文案本身保持 muted ink（见 .dock-sync-state）。 */
.dock-sync-mk {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 900;
  background: var(--ds-color-secondary);
  color: var(--ds-color-on-primary);
}
.dock-sync-mk--fail { background: var(--ds-color-error); }
/* 每账号回写量数字（设计稿台账「回写 N 条」）：Geist Mono 制式数字，
   颜色继承 .dock-sync-state 的 muted ink，不抢色。 */
.dock-sync-writeback-num {
  font-family: var(--ds-typeface-code);
  font-weight: 700;
}

/* 进度条（设计稿 .tbBar）：ds-bg-deep 轨 + ink 填充，确定性、无 shimmer */
.dock-sync-bar {
  height: 3px;
  background: var(--ds-color-surface-container-high);
}
.dock-sync-bar > span {
  display: block;
  height: 100%;
  background: var(--ds-color-on-surface);
  transition: width 0.3s ease;
}

/* 台账折叠（镜像 dock-proc-body：grid-rows 0fr↔1fr 平滑收纳，内容常驻 DOM）*/
.dock-sync-body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.28s ease, opacity 0.28s ease;
}
.dock-sync-body--folded {
  grid-template-rows: 0fr;
  opacity: 0;
}
.dock-sync-body-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 12px;
}
.dock-sync-row {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-top: 1px solid var(--ds-color-outline-variant);
}
.dock-sync-row:first-child { border-top: none; }
.dock-sync-glyph {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-size: 9.5px;
  font-weight: 800;
}
.dock-sync-glyph--ghost {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  border: 1px solid var(--ds-color-outline-variant);
}
.dock-sync-name { min-width: 0; }
.dock-sync-name b {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-sync-name span {
  display: block;
  color: var(--ds-color-on-surface-variant);
  font-size: 9.5px;
  font-weight: 600;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-sync-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ds-color-on-surface-variant);
}
.dock-sync-state--running { color: var(--ds-color-on-surface); }
.dock-sync-state--failed { color: var(--ds-color-error); }
.dock-sync-reauth {
  height: 21px;
  padding: 0 9px;
  border-radius: var(--ds-corner-full);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}

/* 常驻状态条（输入框上方） */
.dock-statusline {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  margin-bottom: var(--ds-sys-space-sm);
  padding: 6px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  font-size: 12px;
  color: var(--ds-color-on-surface);
}
.dock-statusline .dot {
  color: var(--ds-color-warning);
  font-size: 9px;
  animation: dock-act-pulse 1.2s ease-in-out infinite;
}
.dock-statusline .nm {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-statusline .elapsed { margin-left: auto; flex-shrink: 0; }

/* 回到最新浮钮徽标 */
.dock-jump-badge {
  margin-left: 6px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--ds-corner-full);
  padding: 1px 7px;
}

/* dock 伴随解释行（spec P2 右栏伴随解释，2026-06-22）*/
.dock-explanation {
  padding: 6px 0 2px;
}
.dock-explanation__line {
  font-size: 13px;
  line-height: 1.72;
  color: var(--ds-color-on-surface);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.dock-explanation.swap .dock-explanation__line {
  opacity: 0;
  transform: translateY(-5px);
}

@media (prefers-reduced-motion: reduce) {
  .dock-caret,
  .dock-statusline .dot,
  .dock-thinking .dots,
  .dock-sync-spin,
  .chat-handle__spin { animation: none; }
  .dock-proc-fold .chev,
  .dock-proc-body { transition: none; }
  .dock-sync-tri,
  .dock-sync-body,
  .dock-sync-bar > span { transition: none; }
  .dock-explanation__line { transition: none; }
}

/* Task 2.4 — 一句话式 live 结果引导（DockResultGuide，流尾渲染）*/
.dock-result-guide {
  padding: 6px 0 2px;
  font-size: 13px;
  line-height: 1.72;
  color: var(--ds-color-on-surface-variant);
}
.dock-result-guide__text {
  display: inline;
}
.dock-result-guide__action {
  display: inline;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: var(--ds-color-on-surface);
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--ds-color-on-surface-variant);
  transition: color 0.12s, text-decoration-color 0.12s;
}
.dock-result-guide__action:hover {
  color: var(--ds-color-on-surface);
  text-decoration-color: var(--ds-color-on-surface);
}
.dock-result-guide__sep {
  color: var(--ds-color-on-surface-variant);
  user-select: none;
}

/* 监控采集收尾动作链接容器（布局用，颜色由 .dock-result-guide__action ink 提供，无 azure）。 */
.dock-collect-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: var(--ds-sys-space-sm, 8px);
}

/* Task 2.4 — 完成文字引导（committed，进会话历史）。视觉权威：原型 .botmsg + .guide/.gop
   （docs/design/2026-06-21-canvas-agent-three-track.html line 315-320 / 125-126,167-170）。
   引子句 .botmsg（13px/1.7 ink，b=700）；①②③ 用 .guide 列布局 + .gop（12.5px/1.6，b=700
   加粗小标题、说明保持正文色、内联动作链接 ink + border-strong 下划线）。 */
.dock-completion-guidance__lead {
  margin-top: var(--ds-sys-space-md);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ds-color-on-surface);
}
.dock-completion-guidance__lead b {
  font-weight: 700;
}
.dock-completion-guidance__guide {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-sm);
  margin-top: 11px;
}
.dock-completion-guidance__op {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ds-color-on-surface);
}
.dock-completion-guidance__op b {
  font-weight: 700;
}
/* 内联动作链接 —— 原型 .gop a：ink 色 + 600 + border-strong 下划线，nowrap。 */
.dock-completion-guidance__action {
  display: inline;
  padding: 0;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: none;
  color: var(--ds-color-on-surface);
  font-weight: 600;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s;
}
.dock-completion-guidance__action:hover {
  border-bottom-color: var(--ds-color-on-surface);
}

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

.dock-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-xs);
  height: 30px;
  padding: 0 var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.dock-chip:hover {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
}

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

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

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

/* Task 3.2 — scope 回显条（选中卡时显示在 statusline 与 input-box 之间）
   §12 no-azure：ink 文字、border-strong 边框，绝不用 azure 色 */
.dock-scope-bar {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  margin-bottom: var(--ds-sys-space-sm);
  padding: 5px var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  font-size: 12px;
  color: var(--ds-color-on-surface);
}
.dock-scope-bar__label {
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--ds-color-on-surface);
}
.dock-scope-bar__clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s;
}
.dock-scope-bar__clear:hover {
  color: var(--ds-color-on-surface);
}

/* T4.3 — 编辑态 scope 条（正在编辑·标题·v#·#id）
   §12 no-azure：ink 文字，白底，绝不用 azure；数字用 Geist Mono。
   编辑态优先渲染，T3.2 选中条在编辑态隐藏（互斥由 ConsoleDock 逻辑控制）。 */
.dock-scope-bar--editing {
  border-color: var(--ds-color-on-surface-variant);
}
.dock-scope-bar--editing .dock-scope-bar__label {
  font-weight: 600;
}
.dock-scope-bar__thumb {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--ds-corner-small);
  object-fit: cover;
}
.dock-scope-bar__ver {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}
.dock-scope-bar__id {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

.dock-input-box {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  padding: var(--ds-sys-space-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}

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

.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-color-on-surface);
  /* 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-color-outline-variant);
  border-radius: 2px;
}

.dock-input-box textarea::placeholder {
  color: var(--ds-color-on-surface-variant);
}

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

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

/* §12：send btn ink 实色，不用 azure */
.dock-send-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-xs);
  height: 30px;
  padding: 0 var(--ds-sys-space-lg);
  border: none;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  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;
}

/* 流式中用户上滑后的「↓ 回到最新」浮按钮，overlay 固定在阅读区底部居中 */
.dock-jump-to-bottom {
  position: absolute;
  left: 50%;
  bottom: var(--ds-sys-space-md);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  border: none;
  border-radius: var(--ds-corner-full);
  padding: 4px 12px;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(24, 24, 27, 0.35);
  z-index: 5;
}

.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-color-surface-container);
  background-image: linear-gradient(
    90deg,
    var(--ds-color-surface-container) 0%,
    var(--ds-color-outline-variant) 50%,
    var(--ds-color-surface-container) 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-color-surface-container);
  border-color: var(--ds-color-on-surface-variant);
  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-color-on-surface-variant);
  color: var(--ds-color-error);
  background: var(--ds-color-surface-container);
  cursor: not-allowed;
}

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

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

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

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

/* §12 主 CTA: ink-on-ink 实色 */
.canvas-retry-btn {
  margin-top: var(--ds-sys-space-md);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-on-primary);
  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-color-on-surface);
  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。
 * ======================================================================== */

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

/* ---- onboard banner（baseline / ready 双态） ---- */
.onboard-banner {
  max-width: 920px;
  margin: 0 auto var(--ds-sys-space-lg);
  padding: var(--ds-sys-space-lg) var(--ds-sys-space-xl);
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  display: flex;
  gap: var(--ds-sys-space-md);
  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-color-on-surface);
}
.onboard-banner .banner-text strong {
  color: var(--ds-color-on-surface);
  font-weight: 700;
}
.onboard-banner .banner-sub {
  color: var(--ds-color-on-surface-variant);
}
/* ready 态：ink-only 收紧（mockup line 511-514） */
.onboard-banner--ready {
  border-left-color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
}
/* banner 的 ✓ 圆 — ink 圆白对勾 */
.banner-emoji--done {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  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-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  box-shadow: var(--ds-elevation-4);
  overflow: hidden;
}
.onboard-card--ready { border-color: var(--ds-color-on-surface-variant); }
.onboard-card--loading {
  padding: var(--ds-sys-space-xl);
  text-align: center;
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
}

.onboard-head {
  padding: var(--ds-sys-space-xl) var(--ds-sys-space-xl) var(--ds-sys-space-lg);
  border-bottom: 1px solid var(--ds-color-outline-variant);
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-md);
}
.head-emoji { font-size: 22px; flex-shrink: 0; }
.head-emoji--done {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  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-color-on-surface);
  letter-spacing: -0.01em;
}
.head-title--ready { color: var(--ds-color-on-surface); }
.head-sub { font-size: 12px; color: var(--ds-color-on-surface-variant); }
.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-color-on-surface);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.progress-num--ready { color: var(--ds-color-on-surface); }
.progress-label { font-size: 11px; color: var(--ds-color-on-surface-variant); }

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

/* ---- todo-card（每张 todo） ---- */
.todo-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-lg);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
  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-color-on-surface-variant);
  background: var(--ds-color-surface);
}
.todo-card--optional {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
}
/* done 态：ink-only override（mockup line 451-454） */
.todo-card--done {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
}
.todo-card:hover {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
}
.todo-card--done:hover {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
}
/* picker 展开中：数字人 todo 强调态（mockup demo 4 style 内联） */
.todo-card--picking {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
}

.todo-row1 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
}
.todo-emoji {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  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-color-on-surface);
  letter-spacing: -0.005em;
}
.todo-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 1px var(--ds-sys-space-sm);
  border-radius: var(--ds-corner-full);
}
.todo-tag--required {
  color: var(--ds-color-warning);
  background: var(--ds-color-warning-container);
}
.todo-tag--optional {
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
}
/* done tag：ink-only（mockup line 459-464） */
.todo-tag--done {
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  font-weight: 700;
}

.todo-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ds-color-on-surface-variant);
  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-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sys-space-xs);
  padding: var(--ds-sys-space-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.todo-drop:hover {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
}
.todo-drop--solid {
  border-style: solid;
  background: var(--ds-color-surface-container);
}
/* done 态 dropzone：ink-only（mockup line 465-469） */
.todo-drop--done {
  border-style: solid;
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
}
.drop-icon {
  font-size: 20px;
  color: var(--ds-color-on-surface);
}
.drop-icon--muted {
  color: var(--ds-color-on-surface-variant);
}
.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-color-on-surface);
  color: var(--ds-color-surface);
  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-color-on-surface);
}
.drop-text--success {
  color: var(--ds-color-on-surface);
  font-weight: 700;
}
.drop-text--muted {
  color: var(--ds-color-on-surface-variant);
}
.drop-spec {
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
  text-align: center;
}

/* ---- todo-actions（计数 + 链接） ---- */
.todo-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-sm);
}
.todo-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}
/* done count：ink + ✓ 圆 ::before（mockup line 487-507） */
.todo-count--done {
  color: var(--ds-color-on-surface);
  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-color-on-surface);
  color: var(--ds-color-surface);
  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-color-on-surface-variant);
  cursor: pointer;
  transition: color 0.15s;
}
.todo-link:hover {
  color: var(--ds-color-on-surface);
}

/* ---- CTA ---- */
.commit-cta-wrap {
  display: flex; justify-content: center;
  padding: 0 var(--ds-sys-space-xl) var(--ds-sys-space-xl);
}
.commit-cta {
  height: 44px; padding: 0 var(--ds-sys-space-xxl);
  border: none; border-radius: var(--ds-corner-medium);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  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-sys-space-sm);
  box-shadow: var(--ds-elevation-4, );
}
.commit-cta:hover { opacity: 0.88; }
.commit-cta--disabled {
  background: var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.85;
}

/* ---- DigitalHumanPickerPanel ---- */
.dh-picker {
  width: 100%;
  max-width: 920px;
  box-sizing: border-box;
  margin: var(--ds-sys-space-lg) auto 0;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  box-shadow: var(--ds-elevation-4);
  overflow: hidden;
}
.dh-picker-head {
  padding: var(--ds-sys-space-lg) var(--ds-sys-space-xl);
  border-bottom: 1px solid var(--ds-color-outline-variant);
  display: flex; align-items: center; gap: var(--ds-sys-space-md);
}
.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-color-on-surface);
  letter-spacing: -0.005em;
}
.dh-picker-head .h-sub { font-size: 11px; color: var(--ds-color-on-surface-variant); }
.dh-picker-head .h-close {
  width: 28px; height: 28px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.dh-picker-head .h-close:hover {
  color: var(--ds-color-on-surface);
  border-color: var(--ds-color-on-surface-variant);
}
/* picker tab：胶囊 pill（spec §4.3 方案 3），ink-on-ink 反白。 */
.dh-picker-tabs {
  padding: var(--ds-sys-space-md) var(--ds-sys-space-xl) 0;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}
.dh-picker-tabs-inner {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: var(--ds-sys-space-md);
  border-radius: 12px;
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
}
.dh-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s, background 0.15s;
}
.dh-tab:hover {
  color: var(--ds-color-on-surface);
}
.dh-tab--active {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-weight: 700;
}
.dh-tab--active:hover {
  color: var(--ds-color-on-surface);
}
.dh-tab .count {
  font-size: 11px;
  padding: 0 6px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dh-tab--active .count {
  background: rgba(255, 255, 255, 0.18);
  color: var(--ds-color-on-surface);
}
.dh-picker-body {
  padding: var(--ds-sys-space-xl);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 12px;
  max-height: 520px;
  /* overflow-y: scroll（非 auto）+ nowheel/nodrag：滚动条常驻可拖，滚轮在 picker 内滚列表不缩放画布 */
  overflow-y: scroll;
  scrollbar-width: thin;
}
.dh-picker-body::-webkit-scrollbar { width: 8px; }
.dh-picker-body::-webkit-scrollbar-track { background: var(--ds-color-surface-container); border-radius: 999px; }
.dh-picker-body::-webkit-scrollbar-thumb {
  background: var(--ds-color-outline-variant);
  border-radius: 999px;
  border: 2px solid var(--ds-color-surface-container);
}

/* 开场确认门画布节点（DEE-165 卡片化）：复用共享 DigitalHumanPickerPanel，
   DH 网格滚动区在门卡内收紧封顶（对齐预览稿 444px），不影响 material 流的 dh-picker（保持 520px）。 */
.mm-opening-gate-node {
  position: relative;
}
.mm-opening-gate-node .dh-picker-body {
  /* 对齐预览稿：门卡内 DH 网格固定 5 列 + 滚动封顶（material 流的 dh-picker 不受影响）。 */
  grid-template-columns: repeat(5, 1fr);
  max-height: 280px;
  padding: 4px 2px 8px;
  gap: 10px;
}

/* gateMode：点卡即选，紧凑头像卡，对齐设计稿 */
.mm-opening-gate-node .dh-picker--gate .dh-avatar {
  height: 88px;
}
.mm-opening-gate-node .dh-picker--gate .dh-portrait-emoji {
  font-size: 40px;
  margin-bottom: 8px;
}
.mm-opening-gate-node .dh-picker--gate .dh-info {
  padding: 7px 8px 9px;
}
.mm-opening-gate-node .dh-picker--gate .dh-name {
  font-size: 12px;
}
.mm-opening-gate-node .dh-picker--gate .dh-meta {
  font-size: 10px;
}
.mm-opening-gate-node .dh-picker--gate .dh-item {
  cursor: pointer;
}
.mm-opening-gate-node .dh-picker--gate .dh-picker-tabs {
  padding: 0 2px 8px;
}
.mm-opening-gate-node .ocg-gate {
  width: 560px;
  max-width: 560px;
}

.dh-item {
  display: flex; flex-direction: column;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dh-item:hover {
  border-color: var(--ds-color-on-surface-variant);
  box-shadow: 0 4px 16px rgba(24, 24, 27, 0.08);
}
.dh-item--selected {
  border: 2px solid var(--ds-color-on-surface);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.06);
}
.dh-avatar {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 150px;
  background: linear-gradient(180deg, var(--ds-color-surface-container) 0%, var(--ds-color-surface-container-high) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}
.dh-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.dh-portrait-emoji {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 14px;
}
.dh-item--selected .dh-avatar {
  background: linear-gradient(180deg, var(--ds-color-surface) 0%, var(--ds-color-surface-container) 100%);
}
.dh-item--selected .dh-meta {
  color: var(--ds-color-on-surface-variant);
  font-weight: 600;
}
.dh-info {
  padding: var(--ds-sys-space-sm) 10px var(--ds-sys-space-xs);
  display: flex; flex-direction: column; gap: 1px;
}
.dh-name {
  font-size: 13px; font-weight: 800;
  color: var(--ds-color-on-surface);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-meta {
  font-size: 10px; color: var(--ds-color-on-surface-variant); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-actions {
  display: flex; gap: var(--ds-sys-space-sm);
  padding: var(--ds-sys-space-xs) 10px 10px;
}
.dh-listen {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(24, 24, 27, 0.62);
  color: var(--ds-color-on-surface);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3;
  transition: background 0.15s;
}
.dh-listen:hover { background: var(--ds-color-on-surface); }
.dh-listen .play-ico {
  font-size: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dh-select {
  flex: 1;
  height: 28px;
  border: 1px solid var(--ds-color-on-surface);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  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-color-surface);
  color: var(--ds-color-on-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.dh-viewport { position: relative; }
.dh-picker-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48px;
  pointer-events: none;
  background: linear-gradient(0deg, var(--ds-color-surface) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: opacity 0.2s;
}
.dh-picker-fade--show { opacity: 1; }

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

/* ---- 我的 tab 空态创建引导（spec §4.5） ---- */
.dh-empty-create {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--ds-sys-space-lg); padding: var(--ds-sys-space-xxl) var(--ds-sys-space-xl);
  text-align: center;
}
.dh-ec-emoji {
  width: 56px; height: 56px;
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.dh-ec-title { font-size: 16px; font-weight: 800; color: var(--ds-color-on-surface); }
.dh-ec-sub {
  font-size: 12px; color: var(--ds-color-on-surface-variant);
  max-width: 360px; line-height: 1.7;
}
.dh-ec-cta {
  padding: 10px 22px;
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  border: 0; cursor: pointer;
  font-size: 13px; font-weight: 800;
  display: inline-flex; align-items: center; gap: var(--ds-sys-space-sm);
  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-color-on-surface-variant);
}
.dh-ec-meta span::before {
  content: '✓'; display: inline-block; margin-right: 4px;
  color: var(--ds-color-on-surface); font-weight: 800;
}

/* ---- DockTabBar (A5 — minimal text-only tabs + 「+ 新对话」+ 右键 contextmenu) ---- */
.dock-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--ds-sys-space-sm);
  padding: 0 var(--ds-sys-space-md);
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  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 {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 200px;
  padding: 0 12px;
  border: none;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  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-color-on-surface); }
.dock-tab.active {
  color: var(--ds-color-on-surface);
  font-weight: 600;
  border-bottom-color: var(--ds-color-on-surface);
}
.dock-tab-input {
  font-weight: 600;
  font-size: 12.5px;
  background: transparent;
  border: none;
  outline: 1px solid var(--ds-color-on-surface);
  border-radius: 3px;
  padding: 0 4px;
  font-family: inherit;
  color: var(--ds-color-on-surface);
  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-color-on-surface);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  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-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  box-shadow: var(--ds-elevation-4);
  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-color-on-surface);
}
.dock-tab-ctx-menu-item:hover { background: var(--ds-color-surface-container); }
.dock-tab-ctx-menu-item--danger { color: var(--ds-color-error); }

/* ---- ConsoleConfirmPopover (Task 4.1) ---- */
.dock-confirm-popover {
  position: absolute;
  width: 240px;
  padding: 12px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  box-shadow: var(--ds-elevation-4);
  z-index: 50;
}
.dock-confirm-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--ds-color-on-surface);
  margin-bottom: 4px;
}
.dock-confirm-msg {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  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-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  border-radius: var(--ds-corner-small);
  cursor: pointer;
  font-family: inherit;
}
.dock-confirm-cancel:hover { background: var(--ds-color-surface-container); }
.dock-confirm-danger {
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid var(--ds-color-error);
  background: var(--ds-color-error);
  color: #fff;
  border-radius: var(--ds-corner-small);
  cursor: pointer;
  font-family: inherit;
}
.dock-confirm-danger:hover { opacity: 0.9; }

/* ===== ProductSwitcher popover (plan v2 Task 3) ===== */
/* 锚定触发器下方（V1 挂载控件 / 历史顶栏 chip 共用） */
.product-switcher-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  transform: none;
  width: 280px;
  /* 视口封顶：产品很多时不撑出屏外；列表区内部滚动，账号头/底部动作保持可见 */
  max-height: calc(100vh - 64px - 16px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  box-shadow: var(--ds-elevation-4);
  padding: 6px;
  z-index: 50;
}
.psp-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* 账号头 + 企业总计（Task 5.1，吸收 EnterpriseInfoCard 统计；no-azure → ink） */
.psp-acct {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 10px 12px;
}
.psp-acct-logo {
  width: 38px;
  height: 38px;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container-high);
  border: 1px solid var(--ds-color-outline-variant);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-family: var(--ds-typeface-code);
  color: var(--ds-color-on-surface);
  flex-shrink: 0;
}
.psp-acct-body {
  min-width: 0;
}
.psp-acct-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.psp-acct-totals {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  margin-top: 2px;
}
.psp-acct-num {
  color: var(--ds-color-on-surface-variant);
}
.psp-acct-dot {
  margin: 0 4px;
}
.psp-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 10px 4px;
}
.psp-empty {
  padding: 16px 10px;
  text-align: center;
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
}
.psp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: var(--ds-corner-small);
  font-family: inherit;
  color: var(--ds-color-on-surface);
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
}
.psp-item:hover { background: var(--ds-color-surface-container); }
.psp-item--current { background: var(--ds-color-surface-container); }
.psp-swatch {
  width: 22px;
  height: 22px;
  border-radius: var(--ds-corner-small);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface);
  flex-shrink: 0;
}
/* 名称区仅包文字：点名称改名；.psp-item-fill 吃掉剩余点击区用于切换 */
.psp-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  cursor: text;
}
.psp-item-fill {
  flex: 1 1 0;
  min-width: 12px;
  align-self: stretch;
}
.psp-check { color: var(--ds-color-on-surface); font-weight: 700; }
.psp-divider {
  height: 1px;
  background: var(--ds-color-outline-variant);
  margin: 6px 4px;
}
.psp-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: none;
  background: transparent;
  border-radius: var(--ds-corner-small);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
}
.psp-action:hover { background: var(--ds-color-surface-container); }
.psp-action-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  display: grid;
  place-items: center;
  color: var(--ds-color-on-surface-variant);
  flex-shrink: 0;
}
.psp-action--primary .psp-action-icon {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}
.psp-action--manage { color: var(--ds-color-on-surface-variant); }
.psp-action--brand { color: var(--ds-color-on-surface); }
.psp-action-sub {
  margin-left: auto;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 600;
}
.psp-arrow { margin-left: auto; color: var(--ds-color-on-surface-variant); }
.psp-action-sub + .psp-arrow { margin-left: 8px; }

/* ---- 行内 CRUD：⋯ 菜单 + inline rename（Task 5.2，搬自 products-home pill ⋯）---- */
.psp-item-wrap {
  position: relative;
}
/* ⋯ 浮在行右侧；默认隐藏，行 hover / 菜单展开时显现 */
.psp-more-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--ds-corner-small);
  background: transparent;
  border: none;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  padding: 0;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.psp-item-wrap:hover .psp-more-btn,
.psp-more-btn:focus-visible {
  opacity: 1;
}
.psp-more-btn:hover {
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface);
}
.psp-rename-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 2px 6px;
  outline: none;
  color: var(--ds-color-on-surface);
}
/* popover 内的 ⋯ 菜单跟随 .psp-item-wrap 定位（复用 .pill-menu 的视觉，
   但 products-home.css 不在本页加载，故在此重声明同款 token 化样式） */
.psp-item-wrap .pill-menu {
  position: absolute;
  top: calc(100% - 4px);
  right: 8px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  box-shadow: var(--ds-elevation-4);
  padding: 4px;
  z-index: 60;
  min-width: 128px;
}
.psp-item-wrap .pill-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--ds-corner-small);
  font: inherit;
  font-size: 13px;
  color: var(--ds-color-on-surface);
  cursor: pointer;
  text-align: left;
}
.psp-item-wrap .pill-menu-item:hover { background: var(--ds-color-surface-container); }
.psp-item-wrap .pill-menu-item--danger { color: var(--ds-color-error); }

.brand-profile-layer {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-profile-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(24, 24, 27, 0.34);
  cursor: default;
}

.brand-profile-panel {
  position: relative;
  width: min(580px, calc(100vw - 40px));
  max-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-extra-large);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-elevation-4);
}

.brand-profile-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 15px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.brand-profile-mark {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-size: 13px;
  font-weight: 800;
}

.brand-profile-title-block {
  min-width: 0;
  flex: 1;
}

.brand-profile-title-block h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ds-color-on-surface);
}

.brand-profile-title-block p {
  margin: 2px 0 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12.5px;
  line-height: 1.5;
}

.brand-profile-close {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}

.brand-profile-body {
  display: grid;
  gap: 12px;
  padding: 16px 20px;
  overflow: auto;
}

.brand-profile-status,
.brand-profile-success,
.brand-profile-error {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 9px 11px;
  font-size: 12.5px;
  font-weight: 650;
}

.brand-profile-status { color: var(--ds-color-on-surface-variant); background: var(--ds-color-surface-container); }
.brand-profile-success { color: var(--ds-color-secondary); background: var(--ds-color-surface); }
.brand-profile-error { color: var(--ds-color-error); background: var(--ds-color-surface); }

.brand-profile-fields {
  display: grid;
  gap: 12px;
}

.brand-profile-field {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
}

.brand-profile-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.brand-profile-field-label {
  color: var(--ds-color-on-surface);
  font-size: 12.5px;
  font-weight: 780;
}

.brand-profile-field-hint {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 640;
}

.brand-profile-value {
  min-height: 20px;
  color: var(--ds-color-on-surface);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.brand-profile-value.is-empty {
  color: var(--ds-color-on-surface-variant);
}

.brand-profile-field textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  padding: 9px 11px;
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
}

.brand-profile-field textarea:focus {
  outline: none;
  border-color: var(--ds-color-on-surface);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.10);
}

.brand-profile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}

.brand-profile-note {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

.brand-profile-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.brand-profile-btn {
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-weight: 740;
  font-size: 13px;
  cursor: pointer;
}

.brand-profile-btn--primary {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.brand-profile-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* ---- 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-sys-space-lg);
}
.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-sys-space-xl);
  border-bottom: 1px solid var(--ds-color-outline-variant);
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-lg);
}
.step-num {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  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-color-surface-container);
  color: var(--ds-color-on-surface);
  border: 1px solid var(--ds-color-outline-variant);
}
.product-text-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ds-color-on-surface);
  letter-spacing: -0.01em;
}
.product-sub {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  margin-top: 2px;
}
.product-input-wrap {
  flex: 0 0 320px;
  position: relative;
}
.product-input {
  width: 100%;
  height: 40px;
  padding: 0 var(--ds-sys-space-lg);
  font: inherit;
  font-size: 13px;
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.product-input::placeholder { color: var(--ds-color-on-surface-variant); }
.product-input:hover { border-color: var(--ds-color-on-surface); }
.product-input:focus {
  border-color: var(--ds-color-on-surface);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.08);
}
.product-input[readonly] {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  cursor: not-allowed;
}
.product-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 1px var(--ds-sys-space-sm);
  border-radius: var(--ds-corner-full);
  color: var(--ds-color-warning);
  background: #fef3c7;
}
.product-tag--done {
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
}

/* ---- 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-color-error);
  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-color-on-surface), 0 12px 28px rgba(24, 24, 27, 0.16);
  transition: box-shadow 0.2s ease-out;
}
/*
 * create-lite P0 · 左轨导航壳
 * 结构/视觉对齐 2026-07-17-create-chat-lite-dev-baseline.html .rail
 * 选择器：.app-rail / .app-rail.rail-collapsed（collapsed class 挂在 aside 自身）
 * 私有变量 --rail-* 绑定 F1 --ds-* tokens
 */

.app-rail {
  --rail-w: 248px;
  --rail-w-collapsed: 64px;
  --rail-bg: var(--ds-color-surface-container-high);
  --rail-elevated: var(--ds-color-surface-container);
  --rail-text: var(--ds-color-on-surface);
  --rail-text-2: var(--ds-color-on-surface-variant);
  --rail-text-3: var(--ds-color-on-surface-variant);
  --rail-border: var(--ds-color-outline-variant);
  --rail-hover: color-mix(in srgb, var(--ds-color-on-surface) 6%, transparent);
  --rail-active: color-mix(in srgb, var(--ds-color-on-surface) 10%, transparent);
  --rail-accent: var(--ds-color-primary);
  --rail-dur: 0.18s;
  --rail-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  width: var(--rail-w);
  flex-shrink: 0;
  background: var(--rail-bg);
  color: var(--rail-text);
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  border-right: 1px solid var(--rail-border);
  transition: width var(--rail-dur) var(--rail-ease);
  position: relative;
  /* 高于 AgentInputBar scrim(999)，低于/旁路输入条(1100)；底栏不被渐变层盖住 */
  z-index: 1000;
  box-sizing: border-box;
}

.app-rail.rail-collapsed {
  width: var(--rail-w-collapsed);
}

.app-rail.rail-collapsed .logo-name,
.app-rail.rail-collapsed .rail-item span:not(.ic):not(.dot):not(.anticon),
.app-rail.rail-collapsed .rail-section-h,
.app-rail.rail-collapsed .sess .s,
.app-rail.rail-collapsed .sess .sess-time,
.app-rail.rail-collapsed .sess .t .sess-pin-ic,
.app-rail.rail-collapsed .user-meta,
.app-rail.rail-collapsed .rail-item .dot,
.app-rail.rail-collapsed .rail-item .chev,
.app-rail.rail-collapsed .rail-search-input {
  display: none;
}

.app-rail.rail-collapsed .rail-search-wrap {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-rail.rail-collapsed .rail-search-icon {
  position: static;
  transform: none;
  cursor: pointer;
  pointer-events: auto;
}

.app-rail.rail-collapsed .logo {
  justify-content: center;
  padding: 6px;
  width: 100%;
}

.app-rail.rail-collapsed .rail-item {
  justify-content: center;
  padding: 0;
  width: 40px;
  height: 40px;
  margin: 0 auto 2px;
}

.app-rail.rail-collapsed .rail-item.primary {
  width: 40px;
}

.app-rail.rail-collapsed .sess {
  padding: 10px 0;
  text-align: center;
}

.app-rail.rail-collapsed .sess .t {
  font-size: 10px;
  max-width: 40px;
  margin: 0 auto;
}

.app-rail.rail-collapsed .user-row {
  justify-content: center;
  padding: 4px;
  flex: 0;
}

.app-rail.rail-collapsed .rail-top {
  justify-content: center;
  padding: 10px 8px 6px;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.app-rail.rail-collapsed .rail-collapse {
  display: grid;
  width: 40px;
  height: 32px;
}

.app-rail.rail-collapsed .rail-collapse svg {
  transform: scaleX(-1);
}

.app-rail.rail-collapsed .logo {
  cursor: pointer;
}

.app-rail.rail-collapsed .logo:hover .logo-mark {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rail-accent, #fff) 35%, transparent);
}

.app-rail.rail-collapsed .rail-actions {
  padding: 4px 8px;
}

.app-rail.rail-collapsed .rail-section {
  padding: 8px 6px;
}

.app-rail.rail-collapsed .rail-foot {
  padding: 6px;
  align-items: center;
}

.app-rail.rail-collapsed .rail-foot-bar {
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.app-rail.rail-collapsed .rail-more {
  display: none !important;
}

.app-rail.rail-collapsed .rail-item.on::before {
  display: none;
}

.app-rail.rail-collapsed .rail-feishu {
  margin-bottom: 4px;
}

/* ---- top ---- */
.app-rail .rail-top {
  padding: 12px 12px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-shrink: 0;
}

.app-rail .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  color: var(--rail-text);
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 8px;
  min-width: 0;
  font-family: inherit;
  transition: background var(--rail-dur) var(--rail-ease);
}

.app-rail .logo:hover {
  background: var(--rail-hover);
}

.app-rail .logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  object-fit: cover;
  /* brand SVG already has its own fill; drop text-mark square fill */
}

.app-rail img.logo-mark {
  background: transparent;
  color: inherit;
  display: block;
  padding: 0;
}

.app-rail .logo-name {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.app-rail .rail-collapse {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--rail-text-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.app-rail .rail-collapse:hover {
  background: var(--rail-hover);
  color: var(--rail-text);
}

.app-rail .rail-collapse svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

/* antd 图标是填充路径（fill=currentColor），不走上面的手绘描边规则 */
.app-rail .rail-collapse .anticon svg,
.app-rail .foot-icon-btn .anticon svg {
  fill: currentColor;
  stroke: none;
}

/* ---- actions ---- */
.app-rail .rail-actions {
  padding: 4px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.app-rail .rail-item {
  height: 36px;
  padding: 0 10px 0 11px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--rail-text-2);
  font-size: 13px;
  font-weight: var(--ds-font-body-medium-weight);
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
  position: relative;
  transition: background var(--rail-dur) var(--rail-ease), color var(--rail-dur) var(--rail-ease);
  box-sizing: border-box;
}

.app-rail .rail-item:hover {
  background: var(--rail-hover);
  color: var(--rail-text);
}

.app-rail .rail-item .ic {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  opacity: 0.9;
}

.app-rail .rail-item .ic svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* antd 图标是填充路径（fill=currentColor），不走上面的手绘描边规则 */
.app-rail .rail-item .ic .anticon svg {
  stroke: none;
  fill: currentColor;
}

.app-rail .rail-item.primary {
  background: var(--rail-elevated);
  border: 1px solid var(--rail-border);
  color: var(--rail-text);
  font-weight: 500;
  margin-bottom: 6px;
  height: 38px;
}

.app-rail .rail-item.primary:hover {
  background: var(--rail-active);
  border-color: var(--rail-border);
}

.app-rail .rail-item.on {
  background: var(--rail-hover);
  color: var(--rail-text);
  font-weight: 500;
}

.app-rail .rail-item .dot {
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rail-accent);
  flex-shrink: 0;
  display: block;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rail-accent) 25%, transparent);
}

.app-rail .rail-item .chev {
  margin-left: auto;
  width: 14px;
  height: 14px;
  opacity: 0.5;
  flex-shrink: 0;
  transition: transform var(--rail-dur);
}

.app-rail .rail-item .chev svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

/* antd 图标是填充路径（fill=currentColor），不走上面的手绘描边规则 */
.app-rail .rail-item .chev .anticon svg {
  fill: currentColor;
  stroke: none;
}

.app-rail .rail-item.more-open .chev {
  transform: rotate(180deg);
  opacity: 0.85;
}

.app-rail .rail-item.on .chev {
  display: none;
}

.app-rail .rail-item.soon,
.app-rail .rail-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.app-rail .rail-item.soon:hover,
.app-rail .rail-item:disabled:hover {
  background: transparent;
  color: var(--rail-text-2);
}

.app-rail .rail-more {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding: 0 0 4px;
  margin: 0 0 2px;
}

.app-rail .rail-more.open {
  display: flex;
}

.app-rail .rail-more .rail-item {
  height: 32px;
  padding-left: 40px;
  font-size: 12.5px;
  color: var(--rail-text-3);
}

.app-rail .rail-more .rail-item:hover {
  color: var(--rail-text);
}

.app-rail .rail-more .rail-item.on {
  color: var(--rail-text);
}

.app-rail .rail-divider {
  height: 1px;
  /* 暖瓷色板下 outline-variant 偏白；分割线用比侧栏背景深一级的灰色 token */
  background: var(--ds-color-surface-container-highest);
  margin: 2px 14px 8px;
  flex-shrink: 0;
}

.app-rail .rail-search-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.app-rail .rail-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rail-text-2);
  pointer-events: none;
  z-index: 1;
}

.app-rail .rail-search-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* antd 图标是填充路径（fill=currentColor），不走上面的手绘描边规则 */
.app-rail .rail-search-icon .anticon svg {
  fill: currentColor;
  stroke: none;
}

.app-rail .rail-search-input {
  height: 38px;
  margin: 0;
  padding: 0 10px 0 41px;
  border: 1px solid var(--rail-border);
  border-radius: 9px;
  background: var(--rail-elevated);
  color: var(--rail-text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.app-rail .rail-search-input:focus {
  border-color: color-mix(in srgb, var(--rail-accent) 55%, var(--rail-border));
}

/* ---- history ---- */
.app-rail .rail-section {
  padding: 0 10px 4px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.app-rail .rail-section-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 8px;
  font-size: 11px;
  color: var(--rail-text-3);
  font-weight: 550;
  flex-shrink: 0;
}

.app-rail .rail-section-h .count {
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: var(--ds-font-body-medium-weight);
}

.app-rail .session-list {
  flex: 1;
  overflow: auto;
  padding: 0 0 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--rail-text-3) transparent;
}

.app-rail .session-list::-webkit-scrollbar {
  width: 5px;
}

.app-rail .session-list::-webkit-scrollbar-thumb {
  background: var(--rail-text-3);
  border-radius: 999px;
  opacity: 0.5;
}

.app-rail .session-list-loading {
  padding: 10px 12px;
  color: var(--rail-text-3);
  font-size: 12px;
  text-align: center;
}

.app-rail .sess {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  border-radius: 9px;
  padding: 0;
  font-family: inherit;
  color: var(--rail-text-2);
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 1px;
  transition: background var(--rail-dur), color var(--rail-dur);
  box-sizing: border-box;
  position: relative;
}

.app-rail .sess:hover,
.app-rail .sess.actions-open,
.app-rail .sess.editing {
  background: var(--rail-hover);
  color: var(--rail-text);
}

.app-rail .sess.active {
  background: var(--rail-hover);
  color: var(--rail-text);
}

.app-rail .sess-main {
  flex: 1;
  min-width: 0;
  text-align: left;
  border: none;
  background: transparent;
  padding: 9px 11px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  border-radius: 9px;
}

.app-rail .sess .t {
  font-size: 12.5px;
  font-weight: var(--ds-font-body-medium-weight);
  display: block;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  color: inherit;
}

.app-rail .sess .t .sess-pin-ic {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  vertical-align: -1.5px;
  color: inherit;
  flex: none;
}

.app-rail .sess.active .t {
  font-weight: 500;
}

.app-rail .sess .s,
.app-rail .sess .sess-time {
  font-size: 11px;
  color: var(--rail-text-3);
  margin-top: 3px;
  display: block;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  line-height: 1.3;
}

.app-rail .sess.active .s,
.app-rail .sess.active .sess-time {
  color: var(--rail-text-2);
}

.app-rail .sess-actions {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 1px;
  padding: 6px 6px 0 0;
}

.app-rail .sess:hover .sess-actions,
.app-rail .sess.actions-open .sess-actions {
  display: flex;
}

.app-rail .sess-icon-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--rail-text-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.app-rail .sess-icon-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* antd 图标是填充路径（fill=currentColor），不走上面的手绘描边规则，
   否则 MoreOutlined 的三个点会被描边成糊状竖排。 */
.app-rail .sess-icon-btn .anticon svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.app-rail .sess-icon-btn:hover {
  background: var(--ds-color-surface-container-high);
  color: var(--rail-text);
}

.app-rail .sess-rename-input {
  flex: 1;
  margin: 6px 8px;
  font-size: 12.5px !important;
  font-family: inherit !important;
  font-weight: var(--ds-font-body-medium-weight);
}

/* 收起侧栏时隐藏历史操作区（会话本身已藏） */
.app-rail.rail-collapsed .sess-actions {
  display: none !important;
}

/* 会话 ⋯ 菜单：对齐左轨正文（--ds-typeface-plain），不用 antd 默认系统栈 */
.rail-session-menu.ant-dropdown,
.rail-session-menu .ant-dropdown-menu {
  font-family: var(--ds-typeface-plain) !important;
  background: var(--ds-color-surface-container-low) !important;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 10px !important;
  padding: 4px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  min-width: 112px;
}

.rail-session-menu .ant-dropdown-menu-item,
.rail-session-menu .ant-dropdown-menu-item .ant-dropdown-menu-title-content {
  font-family: var(--ds-typeface-plain) !important;
  font-size: 12.5px !important;
  font-weight: var(--ds-font-body-medium-weight) !important;
  line-height: 1.35 !important;
  color: var(--ds-color-on-surface) !important;
  border-radius: 7px !important;
  padding: 7px 10px !important;
  letter-spacing: normal;
}

.rail-session-menu .ant-dropdown-menu-item:hover,
.rail-session-menu .ant-dropdown-menu-item-active {
  background: color-mix(in srgb, var(--ds-color-on-surface, ) 8%, transparent) !important;
}

.rail-session-menu .ant-dropdown-menu-item-danger,
.rail-session-menu .ant-dropdown-menu-item-danger .ant-dropdown-menu-title-content {
  color: #f87171 !important;
}

.rail-session-menu .ant-dropdown-menu-item-danger:hover {
  background: color-mix(in srgb, #f87171 12%, transparent) !important;
}

/* ---- foot ---- */
.app-rail .rail-foot {
  /* 与 .rail-divider 一致：暖瓷色板下用比侧栏背景深一级的灰色 token */
  border-top: 1px solid var(--ds-color-surface-container-highest);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
  position: relative;
}

.app-rail .rail-foot-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
}

.app-rail .user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  background: transparent;
  flex: 1;
  min-width: 0;
  text-align: left;
  font-family: inherit;
  color: var(--rail-text);
}

.app-rail .user-row:hover {
  background: var(--rail-hover);
}

.app-rail .user-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ds-color-on-surface) 12%, transparent);
  border: 1px solid var(--rail-border);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--rail-text-2);
  flex-shrink: 0;
}

.app-rail .user-meta {
  min-width: 0;
  flex: 1;
}

.app-rail .user-meta .n {
  font-size: 12px;
  font-weight: 500;
  display: block;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-rail .user-meta .e {
  font-size: 10px;
  color: var(--rail-text-3);
  display: block;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0;
}

.app-rail .foot-icon-btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--rail-text-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background var(--rail-dur), color var(--rail-dur);
}

.app-rail .foot-icon-btn:hover,
.app-rail .foot-icon-btn.open {
  background: var(--rail-hover);
  color: var(--rail-text);
}

.app-rail .foot-icon-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* theme icons: dark → moon visible; light → sun visible (html[data-theme]) */
.app-rail .theme-icon-btn .i-sun {
  display: none;
}

.app-rail .theme-icon-btn .i-moon {
  display: block;
}

html[data-theme='light'] .app-rail .theme-icon-btn .i-sun {
  display: block;
}

html[data-theme='light'] .app-rail .theme-icon-btn .i-moon {
  display: none;
}

.app-rail .rail-feishu {
  margin-bottom: 6px;
  color: var(--rail-text-2);
  font-weight: var(--ds-font-body-medium-weight);
}

.app-rail .rail-feishu .ic {
  opacity: 0.85;
}

.app-rail .rail-feishu .ic svg {
  stroke-width: 1.6;
}

.app-rail .rail-feishu:hover {
  background: var(--rail-hover);
  color: var(--rail-text);
}

/* ===== 简易对话骨架（create-lite P0） ===== */
.create-lite-skeleton {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.create-lite-chat {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.create-lite-welcome h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.4;
  color: var(--ds-color-on-surface);
  text-align: center;
}

.create-lite-composer-wrap {
  flex-shrink: 0;
  padding: 12px 16px 20px;
}

.create-lite-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 16px;
  background: var(--ds-color-surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ds-color-on-surface) 4%, transparent);
}

.create-lite-composer textarea {
  flex: 1;
  min-height: 24px;
  max-height: 120px;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ds-color-on-surface);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.55;
  cursor: not-allowed;
}

.create-lite-composer textarea::placeholder {
  color: var(--ds-color-on-surface-variant);
  opacity: 0.9;
}

.create-lite-send {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ds-color-on-surface) 12%, transparent);
  color: var(--ds-color-on-surface-variant);
  font-size: 14px;
  line-height: 1;
  cursor: not-allowed;
  opacity: 0.55;
}

html[data-theme='light'] .app-rail {
  box-shadow: inset -1px 0 0 var(--rail-border);
}
.feishu-auth-node {
  width: 360px;
  overflow: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-elevation-3);
  color: var(--ds-color-on-surface);
}

.feishu-auth-node__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-xl) var(--ds-sys-space-xl) var(--ds-sys-space-lg);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.feishu-auth-node__brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--ds-sys-space-md);
}

.feishu-auth-node__mark {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
}

.feishu-auth-node h3 {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 850;
}

.feishu-auth-node p {
  margin: 4px 0 0;
  max-width: 240px;
  overflow: hidden;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feishu-auth-node__icon-btn,
.feishu-auth-node__primary,
.feishu-auth-node__secondary {
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  cursor: pointer;
}

.feishu-auth-node__icon-btn {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-corner-small);
}

.feishu-auth-node__body {
  display: grid;
  min-height: 252px;
  place-items: center;
  padding: var(--ds-sys-space-xl);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ds-color-on-surface) 3%, transparent), transparent 38%),
    var(--ds-color-surface);
}

.feishu-auth-node__loading,
.feishu-auth-node__error,
.feishu-auth-node__bound {
  display: grid;
  justify-items: center;
  gap: var(--ds-sys-space-md);
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  text-align: center;
}

.feishu-auth-node__spin {
  animation: feishu-auth-spin 0.8s linear infinite;
}

.feishu-auth-node__qr {
  display: inline-flex;
  padding: var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: #fff;
  box-shadow: var(--ds-elevation-1);
}

.feishu-auth-node__status {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  margin-top: var(--ds-sys-space-lg);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

.feishu-auth-node__bound {
  color: var(--ds-color-on-surface);
}

.feishu-auth-node__bound svg {
  color: var(--ds-color-secondary);
}

.feishu-auth-node__bound strong,
.feishu-auth-node__error strong {
  color: var(--ds-color-on-surface);
  font-size: 16px;
}

.feishu-auth-node__bound span {
  max-width: 250px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.55;
}

.feishu-auth-node__actions {
  display: flex;
  gap: var(--ds-sys-space-sm);
  padding: var(--ds-sys-space-lg) var(--ds-sys-space-xl) var(--ds-sys-space-xl);
  background: var(--ds-color-surface);
}

.feishu-auth-node__primary,
.feishu-auth-node__secondary {
  display: inline-flex;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sys-space-sm);
  border-radius: var(--ds-corner-medium);
  font-size: 13px;
  font-weight: 700;
}

.feishu-auth-node__primary {
  flex: 1;
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.feishu-auth-node__secondary {
  width: 76px;
}

.feishu-auth-node__icon-btn:hover,
.feishu-auth-node__secondary:hover {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
}

@keyframes feishu-auth-spin {
  to {
    transform: rotate(360deg);
  }
}
/* 居中弹窗壳；卡片本体样式仍在 FeishuAuthNode.css */
.feishu-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.feishu-auth-modal__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: var(--ds-color-scrim);
  cursor: pointer;
}

.feishu-auth-modal__panel {
  position: relative;
  z-index: 1;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  overflow: auto;
  animation: feishu-auth-modal-in 0.2s ease;
}

@keyframes feishu-auth-modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* 全屏素材管理页。挂在 console-body 早返回分支中，跨满右侧 dock 轨。 */

.ml-page {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
}

.ml-page-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 56px 424px 22px 28px;
  background: var(--ds-color-surface);
  transition: padding-right 0.42s cubic-bezier(0.45, 0, 0.25, 1);
}

.ml-page[data-dock='off'] .ml-page-head {
  padding-right: 52px;
}

.ml-page[data-dock='wide'] .ml-page-head {
  padding-right: min(60vw, 792px);
}

.ml-page-title-block {
  min-width: 0;
}

.ml-page-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--ds-color-on-surface);
}

.ml-page-desc {
  max-width: 760px;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ds-color-on-surface-variant);
}

.ml-page-upload {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 104px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--ds-color-on-surface);
  border-radius: 8px;
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ml-page-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0;
}

/* ===== 三栏工作区（Command Console）=====
   左栏(集合/筛选) | 中栏(命令条+网格) | 右栏(对话/详情)。
   右栏档位挂 .ml-page[data-dock]（素材页专属，不写 document.body）。 */
.ml-workspace {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  /* 右栏改 fixed 浮层：主区用 padding-right 给它让位（open）；收/展/加宽切档走 padding transition。 */
  padding: 16px 424px 60px 28px;
  transition: padding-right 0.42s cubic-bezier(0.45, 0, 0.25, 1);
}

.ml-page[data-dock='off'] .ml-workspace {
  padding-right: 52px;
}

.ml-page[data-dock='wide'] .ml-workspace {
  padding-right: min(60vw, 792px);
}

.ml-main {
  min-width: 0;
}

.ml-kb-search {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
}

.ml-kb-search--compact {
  flex: none;
  display: inline-flex;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.ml-kb-search--compact .ml-kb-search-btn {
  height: 32px;
  min-width: 0;
  padding-inline: 11px;
}

.ml-kb-search-head,
.ml-kb-search-bar,
.ml-kb-plan-top,
.ml-kb-running-line,
.ml-kb-revise {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ml-kb-search-head {
  justify-content: space-between;
}

.ml-kb-search-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 750;
  color: var(--ds-color-on-surface);
}

.ml-kb-search-title svg {
  flex: none;
  color: var(--ds-color-primary);
}

.ml-kb-search-state {
  flex: none;
  min-width: 58px;
  padding: 3px 8px;
  border-radius: var(--ds-corner-full);
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.ml-kb-search-state--running,
.ml-kb-search-state--plan_creating,
.ml-kb-search-state--saving {
  color: var(--ds-color-primary);
  border-color: color-mix(in srgb, var(--ds-color-primary) 35%, transparent);
  background: color-mix(in srgb, var(--ds-color-primary) 8%, transparent);
}

.ml-kb-search-state--done,
.ml-kb-search-state--saved {
  color: var(--ds-color-secondary);
  border-color: color-mix(in srgb, var(--ds-color-secondary) 32%, transparent);
  background: color-mix(in srgb, var(--ds-color-secondary) 8%, transparent);
}

.ml-kb-search-state--failed {
  color: var(--ds-color-error);
  border-color: color-mix(in srgb, var(--ds-color-error) 32%, transparent);
  background: color-mix(in srgb, var(--ds-color-error) 8%, transparent);
}

.ml-kb-search-bar {
  align-items: stretch;
}

.ml-kb-search-bar--single {
  justify-content: flex-start;
}

.ml-kb-search-copy {
  margin: -2px 0 0;
  max-width: 820px;
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.65;
}

.ml-kb-search-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
}

.ml-kb-search-input::placeholder,
.ml-kb-revise textarea::placeholder {
  color: var(--ds-color-on-surface-variant);
}

.ml-kb-search-input:focus,
.ml-kb-revise textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ds-color-primary) 46%, transparent);
}

.ml-kb-search-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 90px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.ml-kb-search-btn:hover:not(:disabled) {
  border-color: var(--ds-color-on-surface);
}

.ml-kb-search-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.ml-kb-search-btn--primary {
  min-width: 128px;
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.ml-kb-search-bar--single .ml-kb-search-btn--primary {
  min-width: 172px;
}

.ml-kb-search-error {
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--ds-color-error) 28%, transparent);
  border-radius: var(--ds-corner-small);
  background: color-mix(in srgb, var(--ds-color-error) 8%, transparent);
  color: var(--ds-color-error);
  font-size: 12.5px;
}

.ml-kb-search-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
}

.ml-kb-plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
}

.ml-kb-plan-top {
  justify-content: space-between;
  align-items: flex-start;
}

.ml-kb-plan-top h3 {
  margin: 0;
  min-width: 0;
  color: var(--ds-color-on-surface);
  font-size: 14px;
  line-height: 1.45;
}

.ml-kb-plan-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 21px;
}

.ml-kb-plan-steps li {
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.55;
}

.ml-kb-plan-steps strong {
  display: block;
  color: var(--ds-color-on-surface);
  font-weight: 700;
}

.ml-kb-plan-steps span {
  display: block;
  margin-top: 2px;
}

.ml-kb-revise {
  align-items: flex-end;
}

.ml-kb-revise textarea {
  flex: 1;
  min-width: 0;
  min-height: 54px;
  max-height: 100px;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
}

.ml-kb-running {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
}

.ml-kb-running-line {
  justify-content: space-between;
}

.ml-kb-running-line strong {
  color: var(--ds-color-on-surface);
  font-variant-numeric: tabular-nums;
}

.ml-kb-progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
}

.ml-kb-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ds-color-primary);
  transition: width 0.25s ease;
}

.ml-kb-output {
  position: relative;
  min-height: 520px;
  max-height: 720px;
  overflow: auto;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
}

.ml-kb-search-saved {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--ds-color-secondary) 24%, transparent);
  background: color-mix(in srgb, var(--ds-color-secondary) 9%, transparent);
  color: var(--ds-color-secondary);
  font-size: 13px;
}

.ml-kb-floating-save {
  position: sticky;
  bottom: 12px;
  left: calc(100% - 136px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 124px;
  height: 36px;
  margin: 0 12px 12px auto;
  border: 1px solid var(--ds-color-on-surface);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 860px) {
  .ml-page-head {
    flex-direction: column;
    gap: 14px;
    padding: 56px 16px 16px;
  }

  .ml-page-upload {
    width: 100%;
  }

  .ml-workspace,
  .ml-page[data-dock='off'] .ml-workspace,
  .ml-page[data-dock='open'] .ml-workspace,
  .ml-page[data-dock='wide'] .ml-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 12px 12px 84px;
  }

  .ml-rail-left {
    position: relative;
    top: auto;
  }

  .ml-rail-right {
    right: 10px;
    width: min(92vw, 380px);
  }

  .ml-kb-search-bar,
  .ml-kb-revise,
  .ml-kb-plan-top {
    align-items: stretch;
    flex-direction: column;
  }

  .ml-kb-search-btn,
  .ml-kb-search-btn--primary {
    width: 100%;
  }

  .ml-kb-output {
    min-height: 420px;
  }
}

.ml-rail-left {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 120px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
}

/* 右栏（展开态 open/wide）：fixed 浮层贴视口右缘（脱离栅格），加宽走 width transition。
   border / 圆角 / 底色由内部 .ml-rail2-full 提供，此层只做定位。 */
.ml-rail-right {
  position: fixed;
  top: 16px;
  right: 24px;
  width: 380px;
  height: calc(100vh - 40px);
  min-height: 220px;
  z-index: 900;
  transition: width 0.42s cubic-bezier(0.45, 0, 0.25, 1);
}

.ml-page[data-dock='wide'] .ml-rail-right {
  width: min(60vw, 760px);
}

/* ===== 左栏 集合/筛选（MaterialFiltersRail）=====
   集合单选(active 4px azure 条) / 状态多选(checkbox) / 时间单选。全 --ds-* ink，azure 仅 4px 条/状态点。 */
.ml-frail {
  padding: 6px;
}

.ml-frail-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  margin: 4px 4px 8px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
}

.ml-frail-search svg {
  flex: none;
  color: var(--ds-color-on-surface);
}

.ml-frail-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--ds-color-on-surface);
}

.ml-frail-search input::placeholder {
  color: var(--ds-color-on-surface-variant);
}

.ml-frail-group {
  margin-bottom: 6px;
}

.ml-frail-h {
  margin: 0;
  padding: 9px 10px 5px;
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ds-color-on-surface-variant);
}

.ml-frail-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px 7px 11px;
  border: none;
  border-radius: var(--ds-corner-small);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  text-align: left;
  cursor: pointer;
}

.ml-frail-item:hover {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
}

.ml-frail-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 15px;
  color: var(--ds-color-on-surface-variant);
}

.ml-frail-count {
  margin-left: auto;
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

.ml-frail-item--active {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font-weight: 600;
}

.ml-frail-item--active .ml-frail-icon {
  color: var(--ds-color-on-surface);
}

.ml-frail-item--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  background: var(--ds-color-primary);
  border-radius: var(--ds-corner-full);
}

.ml-frail-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
}

.ml-frail-check--on {
  background: var(--ds-color-on-surface);
  border-color: var(--ds-color-surface);
}

.ml-frail-check--on::after {
  content: '';
  width: 7px;
  height: 4px;
  border: 1.6px solid var(--ds-color-on-primary, );
  border-top: none;
  border-right: none;
  transform: translateY(-1px) rotate(-45deg);
}

.ml-frail-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.ml-frail-dot--done {
  background: color-mix(in srgb, var(--ds-color-secondary) 62%, #64748b);
}

.ml-frail-dot--pending {
  background: color-mix(in srgb, var(--ds-color-warning) 68%, #78716c);
}

.ml-frail-dot--fail {
  background: color-mix(in srgb, var(--ds-color-error) 72%, #78716c);
}

/* ===== 顶部命令条（MaterialCommandBar）=====
   ⌘K 搜索 + 密度切换(ink 选中) + 排序 + 筛选 chip + 实时计数。全 --ds-* ink。 */
.ml-cmdbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ml-cmdk {
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ml-cmdk:focus-within {
  border-color: var(--ds-color-on-surface);
  outline: 3px solid var(--ds-color-secondary);
}

.ml-cmdk svg {
  flex: none;
  color: var(--ds-color-on-surface);
}

.ml-cmdk input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ds-color-on-surface);
}

.ml-cmdk input::placeholder {
  color: var(--ds-color-on-surface-variant);
}

.ml-kbd {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--ds-color-outline-variant);
  border-bottom-width: 2px;
  border-radius: var(--ds-corner-small);
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  white-space: nowrap;
}

.ml-seg {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 42px;
  padding: 3px;
  flex: none;
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
}

.ml-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 13px;
  border: none;
  border-radius: var(--ds-corner-small);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ml-seg-btn:hover {
  color: var(--ds-color-on-surface);
}

.ml-seg-btn--active {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.ml-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 15px;
  flex: none;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-color-on-surface);
  cursor: pointer;
  transition: border-color 0.15s;
}

.ml-sort-btn:hover {
  border-color: var(--ds-color-on-surface);
}

.ml-mono {
  font-family: var(--ds-typeface-code);
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

.ml-filter-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.ml-filter-chips:empty {
  display: none;
}

.ml-chip2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 6px 0 11px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  font-size: 12.5px;
  font-weight: 500;
  background: var(--ds-color-surface);
}

.ml-chip2-ck {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  letter-spacing: 0.02em;
}

.ml-chip2-x {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.ml-chip2-x:hover {
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface);
}

.ml-chip-clear {
  padding: 0 6px;
  border: none;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ml-chip-clear:hover {
  color: var(--ds-color-on-surface);
}

.ml-result-count {
  margin-left: auto;
  font-family: var(--ds-typeface-code);
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

/* ===== 视频卡网格（MaterialVideoCard）— 宫格 + 列表 =====
   §12：静止无阴影；azure 仅 4px 选中条 / 2px 多选描边 / 状态点；主色 ink。 */
.ml-vgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  transition: gap 0.25s ease;
}

.ml-vcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.ml-vcard:hover {
  border-color: var(--ds-color-on-surface-variant);
  background: color-mix(in srgb, var(--ds-color-surface) 92%, var(--ds-color-surface-container));
}

.ml-vcard--multi {
  outline: 2px solid var(--ds-color-on-primary-container);
  outline-offset: -2px;
}

/* 成片右栏选中（A0 .card.is-selected）：左边线强调，走 --ds-* */
.ml-vcard.is-selected {
  border-color: var(--ds-color-on-surface);
}

.ml-vcard-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ds-color-surface-container-high);
}

.ml-vcard-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ml-vcard-video--fallback {
  background:
    linear-gradient(160deg, rgba(34, 34, 38, 0.2) 0%, transparent 42%),
    linear-gradient(135deg, var(--ds-color-surface-container) 0%, var(--ds-color-surface-container-high) 100%);
}

/* 无缩略图时仍给出「这是视频」的示意：弱播放钮常显 */
.ml-vcard-media:has(.ml-vcard-video--fallback) .ml-vcard-play {
  opacity: 0.42;
}

/* FIXED preview overlay: no multiply — soft darken only on media, theme-safe */
.ml-vcard-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 45%,
    color-mix(in srgb, var(--ds-color-surface-container-high) 55%, transparent) 100%
  );
  opacity: 0.7;
}

.ml-vcard-token {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 3;
  padding: 2px 7px;
  border-radius: var(--ds-corner-small);
  font-family: var(--ds-typeface-code);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(18, 18, 20, 0.52);
  backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: opacity 0.15s;
}

.ml-vcard:hover .ml-vcard-token {
  opacity: 0;
}

.ml-vcard-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.18s;
}

.ml-vcard:hover .ml-vcard-play {
  opacity: 1;
}

.ml-vcard-play::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 11px solid var(--ds-color-on-surface);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}

.ml-vcard-dur {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  padding: 1px 5px;
  border-radius: var(--ds-corner-small);
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  background: rgba(24, 24, 27, 0.72);
  backdrop-filter: blur(2px);
  font-variant-numeric: tabular-nums;
}

.ml-vcard-sel {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--ds-corner-small);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: rgba(24, 24, 27, 0.35);
  backdrop-filter: blur(2px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.ml-vcard:hover .ml-vcard-sel,
.ml-vcard-sel:focus-visible {
  opacity: 1;
}

.ml-vcard--multi .ml-vcard-sel {
  opacity: 1;
  background: var(--ds-color-on-primary-container);
  border-color: var(--ds-color-on-primary-container);
}

.ml-vcard--multi .ml-vcard-sel::after {
  content: '';
  width: 8px;
  height: 4.5px;
  border: 1.7px solid #fff;
  border-top: none;
  border-right: none;
  transform: translateY(-1px) rotate(-45deg);
}

.ml-vcard--multi .ml-vcard-token {
  opacity: 0;
}

/* 多选模式：全部露出 checkbox、隐藏 type token（data-selecting 在 .ml-page 上，Step 5 接） */
.ml-page[data-selecting='true'] .ml-vcard-sel {
  opacity: 1;
}

.ml-page[data-selecting='true'] .ml-vcard-token {
  opacity: 0;
}

.ml-vcard-body {
  padding: 11px 12px 12px;
}

.ml-vcard-name {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ds-color-on-surface);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ml-vcard-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  min-width: 0;
  font-family: var(--ds-typeface-code);
  font-size: 10.5px;
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

.ml-vcard-size,
.ml-vcard-date {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ml-vcard-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 2px 7px 2px 6px;
  border: 1px solid transparent;
  border-radius: var(--ds-corner-full);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.ml-vcard-badge--ok {
  color: color-mix(in srgb, var(--ds-color-secondary) 48%, var(--ds-color-on-surface-variant));
  background: color-mix(in srgb, var(--ds-color-secondary) 9%, transparent);
  border-color: color-mix(in srgb, var(--ds-color-secondary) 16%, var(--ds-color-on-surface-variant));
}

.ml-vcard-badge--err {
  color: color-mix(in srgb, var(--ds-color-error) 62%, var(--ds-color-on-surface-variant));
  background: color-mix(in srgb, var(--ds-color-error) 9%, transparent);
  border-color: color-mix(in srgb, var(--ds-color-error) 18%, var(--ds-color-on-surface-variant));
}

.ml-vcard-badge .ml-frail-dot {
  width: 5px;
  height: 5px;
  opacity: 0.85;
}

.ml-vcard-sep {
  color: var(--ds-color-on-surface-variant);
}

.ml-vcard-more {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0 2px;
  border: none;
  border-radius: var(--ds-corner-small);
  background: none;
  color: var(--ds-color-on-surface-variant);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 1px;
  cursor: pointer;
}

.ml-vcard-more:hover {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
}

/* 列表密度（对齐 mockup .gallery.list） */
.ml-vgrid--list {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
}

.ml-vgrid--list .ml-vcard {
  flex-direction: row;
  align-items: center;
  gap: 0;
  border: none;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  border-radius: 0;
}

.ml-vgrid--list .ml-vcard:last-child {
  border-bottom: none;
}

.ml-vgrid--list .ml-vcard:hover {
  background: var(--ds-color-surface-container);
}

.ml-vgrid--list .ml-vcard-media {
  width: 76px;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  margin: 8px 0 8px 14px;
  border-radius: var(--ds-corner-small);
}

.ml-vgrid--list .ml-vcard-play,
.ml-vgrid--list .ml-vcard-token,
.ml-vgrid--list .ml-vcard-dur,
.ml-vgrid--list .ml-vcard-sel {
  display: none;
}

.ml-vgrid--list .ml-vcard-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  min-width: 0;
}

.ml-vgrid--list .ml-vcard-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
}

.ml-vgrid--list .ml-vcard-meta {
  margin-top: 0;
  min-width: 140px;
  justify-content: flex-end;
}

/* ===== 多选批量条（MaterialBatchBar）— sticky 于滚动底部 ===== */
.ml-batchbar {
  position: sticky;
  bottom: 16px;
  z-index: 45;
  margin: 14px auto 0;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--ds-color-on-surface) 40%, transparent);
  animation: ml-batch-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ml-batch-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.ml-batch-count {
  font-family: var(--ds-typeface-code);
  font-size: 12px;
  color: var(--ds-color-on-surface);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ml-batch-sep {
  width: 1px;
  height: 20px;
  flex-shrink: 0;
  background: var(--ds-color-outline-variant);
}

.ml-batch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--ds-corner-medium);
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.ml-batch-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.ml-batch-btn--ink {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.ml-batch-btn--danger {
  border-color: var(--ds-color-on-surface-variant);
  color: var(--ds-color-error);
}

.ml-batch-btn--danger:hover:not(:disabled) {
  border-color: var(--ds-color-error);
  background: color-mix(in srgb, var(--ds-color-error) 6%, transparent);
}

.ml-batch-btn--ghost {
  padding: 0 10px;
  color: var(--ds-color-on-surface-variant);
}

.ml-batch-btn--ghost:hover:not(:disabled) {
  color: var(--ds-color-on-surface);
}

@media (prefers-reduced-motion: reduce) {
  .ml-batchbar {
    animation: none;
  }
}

@media (max-width: 1200px) {
  .ml-workspace {
    grid-template-columns: 200px minmax(0, 1fr);
    padding-right: 384px;
  }

  .ml-page[data-dock='off'] .ml-workspace {
    padding-right: 52px;
  }

  .ml-page[data-dock='wide'] .ml-workspace {
    padding-right: min(64vw, 700px);
  }

  .ml-rail-right {
    width: 340px;
  }
}

@media (max-width: 900px) {
  .ml-workspace,
  .ml-page[data-dock='off'] .ml-workspace,
  .ml-page[data-dock='wide'] .ml-workspace {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 28px;
  }

  .ml-rail-left {
    position: static;
    height: auto;
  }

  /* 移动端右栏：fixed 全宽抽屉（展开态 overlay 盖内容），收起态仍留竖标签贴右缘。 */
  .ml-rail-right,
  .ml-page[data-dock='wide'] .ml-rail-right {
    left: 12px;
    right: 12px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ml-workspace {
    transition: none;
  }
}

.ml-upload-host {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  background: var(--ds-color-surface);
}

/* 无边框 section（对齐 mockup）：header 下划线 stamp + 内容直排，不再是有边框卡。 */
.ml-section {
  overflow: visible;
  margin: 0 0 28px;
  border: none;
  border-radius: 0;
  background: transparent;
}

.ml-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: auto;
  padding: 0 0 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: transparent;
}

.ml-section-title {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ds-color-on-surface);
}

.ml-section-count {
  flex: none;
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

.ml-section-body {
  min-height: auto;
  padding: 0;
}

.ml-section .ml-grid-empty {
  min-height: 96px;
}

.ml-dh-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 12px;
  min-height: 84px;
}

.ml-dh-card--compact {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 13px;
  width: auto;
  min-height: 76px;
  padding: 14px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
}

.ml-dh-card--compact:hover,
.ml-dh-add-card:hover,
.ml-doc-row:hover {
  background: var(--ds-color-surface-container);
}

.ml-dh-compact-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 50%;
  background: radial-gradient(120% 120% at 35% 25%, var(--ds-color-surface-container) 0%, var(--ds-color-surface-container-high) 60%, var(--ds-color-outline-variant) 130%);
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

.ml-dh-compact-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ml-dh-compact-text {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ml-dh-compact-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  color: var(--ds-color-on-surface);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ml-dh-compact-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin-top: 6px;
  padding: 1px 8px 1px 6px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  font-family: var(--ds-typeface-code);
  font-size: 10.5px;
  color: var(--ds-color-on-surface-variant);
}

.ml-dh-pill-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.ml-dh-pill-dot--ready {
  background: color-mix(in srgb, var(--ds-color-secondary) 62%, #64748b);
}

.ml-dh-pill-dot--processing {
  background: color-mix(in srgb, var(--ds-color-warning) 68%, #78716c);
}

.ml-dh-add-card {
  flex: 0 0 156px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: 8px;
  background: var(--ds-color-surface);
  font: inherit;
  text-align: left;
  color: var(--ds-color-on-surface);
  cursor: pointer;
}

.ml-material-add-card,
.ml-doc-add-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 132px;
  padding: 18px;
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ml-material-add-card:hover,
.ml-doc-add-card:hover {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
}

.ml-material-add-card strong,
.ml-material-add-card small,
.ml-doc-add-card strong,
.ml-doc-add-card small { display: block; }
.ml-material-add-card strong,
.ml-doc-add-card strong { font-size: 13px; font-weight: 800; }
.ml-material-add-card small,
.ml-doc-add-card small { margin-top: 3px; font-size: 11px; color: var(--ds-color-on-surface-variant); }

.ml-doc-add-card {
  min-height: 72px;
  margin: 12px;
}

.ml-vgrid--list .ml-material-add-card { min-height: 72px; }

.ml-upload-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-extra-large);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-elevation-3);
}

.ml-dh-add-card strong,
.ml-dh-add-card small {
  display: block;
}

.ml-dh-add-card strong {
  font-size: 13px;
  font-weight: 800;
}

.ml-dh-add-card small {
  margin-top: 3px;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

.ml-dh-add-plus {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  font-size: 24px;
  line-height: 1;
  color: var(--ds-color-on-surface);
}

.ml-dh-loading,
.ml-doc-loading,
.ml-doc-empty {
  padding: 18px;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
}

.ml-doc-list {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
}

.ml-doc-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ml-doc-row:last-child {
  border-bottom: none;
}

.ml-doc-row--knowledge {
  grid-template-columns: 42px minmax(0, 1fr) auto 34px;
  cursor: default;
}

.ml-doc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 8px;
  font-weight: 900;
}

.ml-doc-icon--pdf {
  background: var(--ds-color-error);
  color: var(--ds-color-on-error);
}

.ml-doc-icon--doc {
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
}

.ml-doc-icon--xls {
  background: var(--ds-color-secondary);
  color: var(--ds-color-on-secondary);
}

.ml-doc-icon--md,
.ml-doc-icon--txt,
.ml-doc-icon--file,
.ml-doc-icon--kb {
  /* no purple --ds-* token; file-type chromatic kept intentional */
  background: #8b5cf6;
  color: #ffffff;
}

.ml-doc-title {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ml-doc-tag {
  margin-left: 8px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 600;
}

.ml-doc-meta {
  flex: none;
  font-family: var(--ds-typeface-code);
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

.ml-doc-delete,
.ml-kb-delete {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-color-error);
  cursor: pointer;
}

.ml-doc-delete:hover,
.ml-kb-delete:hover {
  border-color: color-mix(in srgb, var(--ds-color-error) 26%, transparent);
  background: color-mix(in srgb, var(--ds-color-error) 8%, transparent);
}

.mup-dh-create {
  max-width: 1040px;
}

.mup-dh-form {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

@media (max-width: 780px) {
  .ml-page-head {
    flex-direction: column;
    padding: 56px 16px 18px;
  }

  .ml-workspace {
    padding: 12px 12px 36px;
  }

  .ml-section-head,
  .ml-doc-row {
    padding-left: 12px;
    padding-right: 12px;
  }

  .ml-doc-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .ml-doc-meta {
    grid-column: 2;
    padding-bottom: 8px;
  }

  .ml-dh-list {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* 素材库画布节点卡：旧画布卡样式保留给历史入口/测试兜底。
   新素材页使用 .ml-page，不再以该卡作为主体验。 */

.ml-node-card {
  position: relative;
  width: min(1180px, calc(100vw - 480px));
  height: min(820px, calc(100vh - 64px - 96px));
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-extra-large);
  box-shadow: var(--ds-elevation-4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--ds-typeface-plain);
  color: var(--ds-color-on-surface);
}

.ml-node-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.ml-node-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 22px;
}

.ml-pcol {
  width: 218px;
  border-right: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  display: flex;
  flex-direction: column;
  padding: 15px 12px;
}

.ml-pcol-acct {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  letter-spacing: .04em;
  padding: 2px 8px 12px;
}

.ml-pcol-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ml-pitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 10px;
  border: none;
  background: transparent;
  border-radius: var(--ds-corner-medium);
  font: inherit;
  font-size: 13.5px;
  color: var(--ds-color-on-surface);
  text-align: left;
  cursor: pointer;
}

.ml-pitem-sw {
  width: 26px;
  height: 26px;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container-high);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.ml-pitem-nm {
  flex: 1;
}

.ml-pitem--active {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-weight: 600;
}

.ml-pitem--active .ml-pitem-sw {
  background: color-mix(in srgb, var(--ds-color-on-surface) 16%, var(--ds-color-on-surface));
  color: var(--ds-color-surface);
}

.ml-pcol-new {
  margin-top: 6px;
  padding: 9px 10px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--ds-color-on-surface-variant);
  text-align: left;
  cursor: pointer;
}

.ml-pcol-manage {
  margin-top: auto;
  padding: 10px;
  border: none;
  border-top: 1px solid var(--ds-color-outline-variant);
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--ds-color-on-surface-variant);
  text-align: left;
  cursor: pointer;
}

.ml-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.ml-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
}

.ml-chip--active {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface);
}

.ml-chip-count {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  opacity: .8;
}

.ml-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* 上传面板与网格之间的分隔（仅添加素材就地展开时出现，网格常驻于下方） */
.ml-up-divider {
  flex: none;
  height: 1px;
  margin: 10px 0;
  background: var(--ds-color-outline-variant);
}

.ml-up-label {
  flex: none;
  margin-bottom: 8px;
  font-family: var(--ds-typeface-code);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ds-color-on-surface-variant);
}

.ml-head {
  position: relative;
  padding: 24px 32px 0;
}

.ml-head-no {
  font-family: var(--ds-typeface-code);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ds-color-on-surface-variant);
}

.ml-head-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 6px 0 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
}

.ml-head-sub {
  font-family: var(--ds-typeface-code);
  font-size: 13px;
  font-weight: 400;
  color: var(--ds-color-on-surface-variant);
}

.ml-head-desc {
  max-width: 620px;
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ds-color-on-surface-variant);
}

.ml-head-actions {
  position: absolute;
  top: 54px;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ml-more {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
}

.ml-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--ds-color-on-surface);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
  cursor: pointer;
}

.ml-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 22px 0;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
}

.ml-guide-label {
  font-size: 12.5px;
  font-weight: 600;
}

.ml-guide-label > strong {
  margin-left: 6px;
  font-family: var(--ds-typeface-code);
  font-size: 12px;
  color: var(--ds-color-on-surface);
}

.ml-guide-btn {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--ds-color-on-surface);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-on-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
  cursor: pointer;
}

/* 数字人竖卡 (DigitalHumanTile, Task 3.1) + 共享标题 .ml-tile-name。
   视觉对齐 docs/design/2026-06-14-material-system-overview.html (.dh-card)。
   颜色全走 --ds-* token；状态色仅用在 chip 小元素（success 绿 / warning 橙），不整卡染色；
   console scope 主色 ink，无 azure。 */

.ml-tile-name {
  overflow: hidden;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ml-dh-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ml-dh-face {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ds-color-surface-container), var(--ds-color-surface-container-high));
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
}

.ml-dh-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ml-dh-avatar-placeholder {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 50%;
  font-size: 20px;
  color: var(--ds-color-on-surface-variant);
}

.ml-dh-chip {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: var(--ds-corner-full);
  font-size: 10px;
  font-weight: 700;
}

.ml-dh-chip--ready {
  background: color-mix(in srgb, var(--ds-color-secondary) 10%, transparent);
  color: color-mix(in srgb, var(--ds-color-secondary) 48%, var(--ds-color-on-surface-variant));
  border: 1px solid color-mix(in srgb, var(--ds-color-secondary) 16%, var(--ds-color-outline-variant));
}

.ml-dh-chip--processing {
  background: color-mix(in srgb, var(--ds-color-warning) 12%, transparent);
  color: color-mix(in srgb, var(--ds-color-warning) 55%, var(--ds-color-on-surface-variant));
  border: 1px solid color-mix(in srgb, var(--ds-color-warning) 18%, var(--ds-color-outline-variant));
}

.ml-tile-kb {
  display: flex;
  flex-direction: column;
  min-height: 178px;
  padding: 14px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
}

.ml-kb-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ml-kb-glyph {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  font-size: 12px;
  font-weight: 800;
  color: var(--ds-color-on-surface);
}

.ml-kb-delete {
  flex: none;
}

.ml-confirm-backdrop {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--ds-color-scrim);
}

.ml-confirm {
  position: relative;
  width: min(420px, 100%);
  padding: 22px 22px 18px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  background: var(--ds-color-surface);
  box-shadow: var(--ds-elevation-4);
}

.ml-confirm-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
}

.ml-confirm-title {
  margin: 0;
  padding-right: 34px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 800;
  color: var(--ds-color-on-surface);
}

.ml-confirm-copy {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ds-color-on-surface-variant);
}

.ml-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.ml-confirm-btn {
  min-width: 76px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ml-confirm-btn--danger {
  border-color: var(--ds-color-error);
  background: var(--ds-color-error);
  color: var(--ds-color-on-primary);
}

.ml-confirm-btn:disabled,
.ml-confirm-close:disabled {
  cursor: default;
  opacity: 0.62;
}

.ml-kb-meta {
  margin-top: 5px;
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

.ml-kb-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ds-color-on-surface-variant);
}

/* 统一网格 (MaterialGrid, Task 3.2)
   视觉对齐 docs/design/2026-06-14-material-system-overview.html (.grid / .dh-grid)。
   标准卡 4 列、数字人竖卡 5 列、gap 16；空态与「加载更多」走 --ds-* token，console scope 无 azure。 */

.ml-grid-wrap {
  flex: none;
}

.ml-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-content: start;
}

.ml-grid--dh {
  grid-template-columns: repeat(5, 1fr);
}

.ml-grid-empty {
  display: grid;
  place-items: center;
  min-height: 220px;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
}

.ml-grid-more {
  display: flex;
  justify-content: center;
  padding: 24px 0 8px;
}

.ml-grid-more-btn {
  padding: 8px 22px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
}

.ml-grid-more-btn:disabled {
  cursor: default;
  color: var(--ds-color-on-surface-variant);
}

/* 素材详情面板（MaterialDetailPanel, Task 4.1）— 右侧滑出。
   视觉对齐 docs/design/2026-06-14-material-system-overview.html (.detail*)。
   颜色全走 --ds-* token；状态点用语义色（ok 绿 / busy 橙 / bad 红），删除为中性描边、hover 危险色；
   console scope 主色 ink，无 azure。 */

.ml-detail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  width: 392px;
  padding: 22px 24px;
  overflow-y: auto;
  background: var(--ds-color-surface);
  border-left: 1px solid var(--ds-color-outline-variant);
  box-shadow: -24px 0 48px -28px color-mix(in srgb, var(--ds-color-on-surface) 28%, transparent);
}

.ml-detail-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
}

.ml-detail-prev {
  --ml-video-max-height: min(58vh, 520px);

  display: grid;
  place-items: center;
  width: min(100%, calc(var(--ml-video-max-height) * var(--ml-video-ratio, 1.777777)));
  aspect-ratio: var(--ml-video-aspect, 16 / 9);
  margin: 14px auto 18px;
  overflow: hidden;
  background: var(--ds-color-surface-container-high);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
}

/*
 * 固定舞台（S8）：ink 深色底 + contain。
 * 竖屏左右留黑、横屏顶满宽；画幅角标右上角。
 */
.ml-detail-prev--stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: min(320px, 42vh);
  max-width: 100%;
  margin: 0 auto 0;
  overflow: hidden;
  background: var(--ds-color-on-surface);
  border: none;
  border-radius: 11px;
}

.ml-detail-prev-ratio {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 2;
  padding: 3px 7px;
  border: none;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ds-color-surface) 14%, transparent);
  color: var(--ds-color-surface);
  font-family: var(--ds-typeface-code);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  pointer-events: none;
}

.ml-detail-prev--dh {
  aspect-ratio: 3 / 4;
}

.ml-detail-prev-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

.ml-detail-prev-unplayable {
  padding: 12px 16px;
  color: color-mix(in srgb, var(--ds-color-surface) 72%, transparent);
  font-size: 13px;
  text-align: center;
}

/* 元数据可读但视频轨解不出（如 iPhone HEVC）时的舞台内明示；压在原生控件之上、不挡进度条 */
.ml-detail-prev-undecodable {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  padding: 8px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ds-color-on-surface) 62%, transparent);
  color: color-mix(in srgb, var(--ds-color-surface) 92%, transparent);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}

.ml-detail-prev-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ml-detail-prev-avatar-placeholder {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 50%;
  font-size: 26px;
  color: var(--ds-color-on-surface-variant);
}

.ml-detail-title {
  padding-right: 34px;
  margin-bottom: 9px;
  overflow: hidden;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.012em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ds-color-on-surface);
}

/* 标题下 meta 行：状态 + 类型 pill */
.ml-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 16px;
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
}

.ml-detail-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--ds-color-on-surface-variant);
}

.ml-detail-status--inline {
  margin-top: 0;
  font-size: 11.5px;
}

.ml-detail-tpill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--ds-color-outline);
  border-radius: 999px;
  background: var(--ds-color-surface-container-low);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--ds-color-on-surface-variant);
}

.ml-detail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ds-color-outline-variant);
}

.ml-detail-dot--ok {
  background: var(--ds-color-secondary);
}

.ml-detail-dot--busy {
  background: var(--ds-color-warning);
}

.ml-detail-dot--bad {
  background: var(--ds-color-error);
}

/* 舞台下关键三项：时长 / 分辨率 / 大小 */
.ml-detail-keyfacts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
}

.ml-detail-keyfact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ml-detail-keyfact-k {
  color: color-mix(in srgb, var(--ds-color-on-surface-variant) 72%, var(--ds-color-outline));
}

.ml-detail-keyfact-v {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  color: var(--ds-color-on-surface);
}

/* 「更多信息」折叠 */
.ml-detail-more {
  margin-top: 16px;
  border-top: 1px solid var(--ds-color-outline);
  padding-top: 0;
}

.ml-detail-more-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 6px;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  list-style: none;
}

.ml-detail-more-summary::-webkit-details-marker {
  display: none;
}

.ml-detail-more-chevron {
  font-size: 11px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.ml-detail-more[open] .ml-detail-more-chevron {
  transform: rotate(180deg);
}

.ml-detail-rows {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ds-color-outline-variant);
}

.ml-detail-rows--fold {
  margin: 0;
  padding-top: 6px;
  border-top: 0;
  gap: 0;
}

.ml-detail-rows--fold .ml-detail-row {
  padding: 7px 0;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  font-size: 12px;
}

.ml-detail-rows--fold .ml-detail-row:last-child {
  border-bottom: 0;
}

.ml-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
}

.ml-detail-k {
  color: var(--ds-color-on-surface-variant);
}

.ml-detail-v {
  margin: 0;
  font-family: var(--ds-typeface-code);
  font-size: 11.5px;
  color: var(--ds-color-on-surface);
}

.ml-detail-actions {
  display: grid;
  gap: 8px;
  margin-top: 22px;
}

/* 并排动作：下载主 / 删除次 */
.ml-detail-actions--row {
  display: flex;
  gap: 9px;
  margin-top: 18px;
}

.ml-detail-actions--row .ml-detail-btn {
  flex: 1;
  padding: 9px 14px;
  font-size: 12.5px;
}

.ml-detail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  background: var(--ds-color-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
  text-decoration: none;
  cursor: pointer;
}

.ml-detail-btn--primary {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-weight: 700;
}

/* 次级动作（删除）：描边次级字色，不抢主路径 */
.ml-detail-btn--secondary {
  border-color: var(--ds-color-outline);
  background: var(--ds-color-surface-container-lowest);
  color: var(--ds-color-on-surface-variant);
  font-weight: 650;
}

.ml-detail-btn--secondary:hover {
  border-color: color-mix(in srgb, var(--ds-color-error) 40%, var(--ds-color-outline));
  background: color-mix(in srgb, var(--ds-color-error) 8%, transparent);
  color: var(--ds-color-error);
}

/* 删除：全宽中性描边，hover 再进入危险色（数字人等旧路径保留） */
.ml-detail-btn--danger {
  justify-content: center;
  border-color: var(--ds-color-on-surface-variant);
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font-weight: 500;
}

.ml-detail-btn--danger:hover {
  border-color: color-mix(in srgb, var(--ds-color-error) 40%, var(--ds-color-on-surface-variant));
  background: color-mix(in srgb, var(--ds-color-error) 10%, transparent);
  color: var(--ds-color-error);
}

/* 添加素材卡内上传面板 (MaterialUploadPanel)
   渲染在素材库卡右侧 .ml-content 内、素材网格上方就地展开（网格常驻于下方）。
   视觉对齐 docs/design/2026-06-16-add-material-incard-panel-B.html。
   console scope：Tab 选中 ink-on-ink、进度条填充 ink、拖拽区 ink 圆图标，无 azure。 */
.mup {
  display: flex;
  flex-direction: column;
  flex: none;
}

.mup-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.mup-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

.mup-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
}

.mup-tabs {
  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  margin-bottom: 14px;
  padding: 3px;
  background: var(--ds-color-surface-container);
  border-radius: var(--ds-corner-full);
}

.mup-tab {
  padding: 6px 18px;
  border: none;
  border-radius: var(--ds-corner-full);
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
}

.mup-tab--active {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.mup-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 172px;
  padding: 26px;
  text-align: center;
  border: 2px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: transparent;
  cursor: pointer;
}

.mup-drop--over {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
}

.mup-drop--over .mup-drop-ico {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.mup-drop--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.mup-drop-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ds-color-surface-container);
  font-size: 24px;
  color: var(--ds-color-on-surface);
}

.mup-drop-main {
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
}

.mup-drop-sub {
  font-family: var(--ds-typeface-code);
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
}

.mup-drop-input {
  display: none;
}

.mup-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.mup-type {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mup-type-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  font-size: 16px;
}

.mup-type-title,
.mup-type-sub {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mup-type-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

.mup-type-sub {
  margin-top: 3px;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

.mup-queue {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  min-height: 0;
  overflow-y: auto;
}

.mup-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mup-queue-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mup-queue-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
}

.mup-queue-clear {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
}

.mup-queue-clear:disabled {
  color: color-mix(in srgb, var(--ds-color-on-surface-variant) 55%, transparent);
  cursor: not-allowed;
}

.mup-queue-retry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--ds-color-error);
  cursor: pointer;
}

.mup-operation {
  padding: 10px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
}

.mup-operation-line,
.mup-operation-counts {
  display: flex;
  align-items: center;
}

.mup-operation-line {
  justify-content: space-between;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.mup-operation-line strong {
  font-family: var(--ds-typeface-code);
  font-size: 11.5px;
  color: var(--ds-color-on-surface);
}

.mup-operation-bar {
  height: 4px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container-high);
}

.mup-operation-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ds-color-on-surface);
}

.mup-operation-counts {
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--ds-color-on-surface-variant);
}

.mup-operation-failed {
  color: var(--ds-color-error);
}

.mup-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
}

.mup-row-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  font-size: 16px;
}

.mup-row-mid {
  flex: 1;
  min-width: 0;
}

.mup-row-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mup-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 3px;
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

.mup-row-error {
  max-width: 100%;
  margin-top: 5px;
  overflow: hidden;
  color: var(--ds-color-error);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mup-row-bar {
  margin-top: 7px;
  height: 4px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container-high);
  overflow: hidden;
}

.mup-row-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ds-color-on-surface);
}

.mup-row-right {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mup-row-pct {
  min-width: 34px;
  font-family: var(--ds-typeface-code);
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  text-align: right;
}

.mup-status {
  padding: 2px 9px;
  border-radius: var(--ds-corner-full);
  font-size: 11px;
  font-weight: 700;
}

.mup-status--done {
  color: color-mix(in srgb, var(--ds-color-secondary) 78%, var(--ds-color-on-surface));
  background: color-mix(in srgb, var(--ds-color-secondary) 14%, transparent);
}

.mup-status--err {
  color: color-mix(in srgb, var(--ds-color-error) 78%, var(--ds-color-on-surface));
  background: color-mix(in srgb, var(--ds-color-error) 12%, transparent);
}

.mup-status--pending,
.mup-status--running,
.mup-status--muted {
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container-high);
}

.mup-status--running {
  color: var(--ds-color-on-surface);
}

.mup-row-x {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
}

@media (max-width: 640px) {
  .mup-queue-head,
  .mup-row {
    align-items: flex-start;
  }

  .mup-queue-head {
    gap: 8px;
  }

  .mup-queue-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .mup-row-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 132px;
  }
}

.mup-dr {
  margin-top: 14px;
}

/* compact 主播卡必须放在旧竖卡样式之后，避免被 .ml-dh-card 基础规则覆盖。 */
.ml-page .ml-dh-card--compact {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 13px;
  width: auto;
  min-height: 76px;
  padding: 14px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
}

.ml-page .ml-dh-card--compact:hover {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
}

/* ===== 新建主播弹窗（CreatePresenterModal）— portal 到 body ===== */
.ml-cpm-layer {
  position: fixed;
  inset: 0;
  z-index: 1100;
}

.ml-cpm-scrim {
  position: absolute;
  inset: 0;
  background: var(--ds-color-scrim);
  backdrop-filter: saturate(140%) blur(2px);
}

.ml-cpm {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ml-cpm-card {
  display: flex;
  flex-direction: column;
  width: min(92vw, 480px);
  max-height: min(90vh, 760px);
  overflow: hidden;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-extra-large);
  box-shadow: var(--ds-elevation-4);
  animation: ml-cpm-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ml-cpm-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.ml-cpm-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px 14px;
}

.ml-cpm-head-text {
  min-width: 0;
}

.ml-cpm-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ds-color-on-surface);
}

.ml-cpm-sub {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ds-color-on-surface-variant);
}

.ml-cpm-close {
  flex: none;
  margin: -4px -4px 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--ds-corner-small);
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ml-cpm-close:hover {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
}

.ml-cpm-body {
  overflow-y: auto;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--ds-color-outline-variant);
}

.ml-cpm-form {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .ml-cpm-card {
    animation: none;
  }
}

@media (max-width: 560px) {
  .ml-cpm {
    padding: 12px;
  }

  .ml-cpm-head {
    padding: 16px 16px 12px;
  }

  .ml-cpm-body {
    padding: 12px 16px 16px;
  }
}

/* ===== 右栏文档详情（MaterialDocDetail）— compact #dDocBlock（azure→ink）===== */
.ml-docd {
  padding: 14px 16px 18px;
  overflow-y: auto;
}

.ml-docd-status {
  padding: 40px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
}

.ml-docd-title {
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ds-color-on-surface);
}

.ml-docd-meta {
  margin-top: 6px;
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

.ml-docd-id {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
}

.ml-docd-id-k {
  color: var(--ds-color-on-surface-variant);
}

.ml-docd-id-v {
  font-family: var(--ds-typeface-code);
  color: var(--ds-color-on-surface-variant);
  word-break: break-all;
}

.ml-docd-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 6px 8px;
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
}

.ml-docd-tb-label {
  margin-right: 2px;
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
}

.ml-docd-tb-btn {
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}

.ml-docd-tb-btn:hover {
  border-color: var(--ds-color-on-surface);
  color: var(--ds-color-on-surface);
}

.ml-docd-paper {
  margin-top: 10px;
  padding: 15px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ml-docd-paper--editing {
  border-color: var(--ds-color-on-surface-variant);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ds-color-primary) 14%, transparent);
}

.ml-docd-content {
  outline: none;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ds-color-on-surface);
}

.ml-docd-content h1 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
}

.ml-docd-content h2 {
  margin: 14px 0 2px;
  font-size: 13px;
  font-weight: 600;
}

.ml-docd-content h3 {
  margin: 12px 0 2px;
  font-size: 12.5px;
  font-weight: 600;
}

.ml-docd-content p {
  margin: 5px 0;
  color: var(--ds-color-on-surface-variant);
}

.ml-docd-content ul,
.ml-docd-content ol {
  margin: 5px 0;
  padding-left: 20px;
  color: var(--ds-color-on-surface-variant);
}

.ml-docd-empty {
  color: var(--ds-color-on-surface-variant);
}

.ml-docd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ds-color-outline-variant);
}

/* 详情操作按钮（视频/主播/文档右栏共享；对齐 mockup .act）。 */
.ml-act {
  flex: 1;
  min-width: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--ds-corner-medium);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.ml-act:disabled {
  opacity: 0.6;
  cursor: default;
}

.ml-act--primary {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.ml-act--secondary {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.ml-act--secondary:hover:not(:disabled) {
  border-color: var(--ds-color-on-surface);
}

.ml-act--danger {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-error);
}

.ml-act--danger:hover:not(:disabled) {
  border-color: var(--ds-color-error);
  background: color-mix(in srgb, var(--ds-color-error) 4%, transparent);
}

/* ===== 右栏容器（MaterialRail）— 对话/详情双 tab + 收起/加宽 ===== */
.ml-rail2 {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: visible;
  border: none;
  background: transparent;
}

/* .ml-rail2 is also the fixed outer rail. Keep its height inside the viewport;
   the generic height:100% above otherwise overrides .ml-rail-right and clips the composer. */
.ml-rail-right.ml-rail2 {
  height: calc(100vh - 40px);
}

/* 折叠只隐藏右栏，不卸载内部 ConversationShell。 */
.ml-rail-right.ml-rail2[hidden] {
  display: none;
}

.ml-rail2-collapse {
  position: absolute;
  left: -11px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: grid;
  place-items: center;
  width: 22px;
  height: 48px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.ml-rail2-collapse:hover {
  border-color: var(--ds-color-on-surface);
  color: var(--ds-color-on-surface);
}

/* 收起态使用固定图标点击目标，避免竖排中英文在窄条内拥挤。 */
.ml-rail2-handle {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--ds-color-outline-variant);
  border-right: none;
  border-radius: 12px 0 0 12px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  cursor: pointer;
  box-shadow: -8px 0 24px -10px color-mix(in srgb, var(--ds-color-on-surface) 24%, transparent);
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}

.ml-rail2-handle:hover {
  transform: translateY(-50%) translateX(-2px);
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
  border-color: var(--ds-color-on-surface);
}

/* 展开态 */
.ml-rail2-full {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
}

.ml-rail2-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 10px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.ml-rail2-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  width: 100%;
  padding: 1px 2px 3px;
}

.ml-rail2-identity > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.ml-rail2-identity strong {
  color: var(--ds-color-on-surface);
  font-size: 13px;
  line-height: 1.2;
}

.ml-rail2-identity small {
  overflow: hidden;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-rail2-identity-mark {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--ds-color-secondary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-secondary) 10%, transparent);
}

.ml-rail2-seg {
  flex: 1;
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
}

.ml-rail2-seg-btn {
  flex: 1;
  height: 30px;
  border: none;
  border-radius: var(--ds-corner-small);
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ml-rail2-seg-btn:hover {
  color: var(--ds-color-on-surface);
}

.ml-rail2-seg-btn--active {
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.ml-rail2-wide {
  flex: none;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}

.ml-rail2-wide:hover {
  border-color: var(--ds-color-on-surface);
  color: var(--ds-color-on-surface);
}

.ml-rail2-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ml-rail2-panel[hidden] {
  display: none;
}

.ml-rail2-panel--detail {
  overflow-y: auto;
}

.ml-rail2-panel--manage {
  overflow-y: auto;
  background: var(--ds-color-surface);
}

.ml-rail2-panel--chat .conversation-shell {
  flex: 1;
  min-height: 0;
}

.ml-rail2-chat-stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.ml-rail2-chat-dialog {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  margin: 10px;
  overflow: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 70%, transparent);
}

.ml-rail2-chat-stack > .conversation-shell,
.ml-rail2-chat-dialog > .conversation-shell {
  flex: 1;
  height: auto !important;
  min-height: 0;
}

.ml-rail2-chat-empty {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  color: var(--ds-color-on-surface-variant);
  text-align: center;
}

.ml-rail2-chat-empty strong {
  color: var(--ds-color-on-surface);
  font-size: 14px;
}

.ml-rail2-chat-empty span {
  max-width: 250px;
  font-size: 12px;
  line-height: 1.6;
}

.ml-rail2-chat-empty button {
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* 视频/主播详情正文（MaterialDetailContent）内边距——避免贴 rail 左右缘、按钮被裁。 */
.ml-rail2-detail-body {
  padding: 18px 18px 28px;
}

.ml-rail2-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 56px 24px;
  text-align: center;
  color: var(--ds-color-on-surface-variant);
}

.ml-rail2-detail-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
}

.ml-rail2-detail-empty-sub {
  max-width: 240px;
  font-size: 12.5px;
  line-height: 1.55;
}

.ml-rail2-chat-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
}

.ml-rail2-chat-notice {
  flex: none;
  align-self: flex-start;
  max-width: calc(100% - 24px);
  margin: 10px 12px 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ds-color-secondary) 22%, transparent);
  border-radius: 4px 12px 12px;
  background: color-mix(in srgb, var(--ds-color-secondary) 12%, var(--ds-color-surface));
  color: color-mix(in srgb, var(--ds-color-secondary) 72%, var(--ds-color-on-surface));
  font-size: 12.5px;
  line-height: 1.5;
}
.ml-rail2-chat-notice > strong { display: block; margin-bottom: 3px; color: var(--ds-color-on-surface); font-size: 11px; }
.ml-rail2-chat-notice-action { margin-left: 8px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; font-weight: 600; }

/* ===== M9 素材 Agent 管理（右栏 manage tab，scoped） ===== */
.msp-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--ds-color-surface);
}

.msp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.msp-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

.msp-subtitle {
  margin: 1px 0 0;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 18px;
  color: var(--ds-color-on-surface-variant);
}

.msp-icon-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
}

.msp-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.msp-primary-btn,
.msp-confirm-btn,
.msp-handoff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.msp-primary-btn {
  flex: none;
  height: 32px;
  padding: 0 10px;
  background: var(--ds-color-on-surface);
  border-color: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.msp-primary-btn:disabled,
.msp-confirm-btn:disabled,
.msp-handoff-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.msp-error,
.msp-empty {
  font-size: 12px;
  line-height: 18px;
  color: var(--ds-color-on-surface-variant);
}

.msp-error {
  color: var(--ds-color-error);
}

.msp-report {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.msp-management {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msp-readiness {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.msp-status {
  min-width: 58px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--ds-corner-full, );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 700;
}

.msp-status--ready {
  background: color-mix(in srgb, var(--ds-color-secondary) 14%, transparent);
  color: color-mix(in srgb, var(--ds-color-secondary) 72%, var(--ds-color-on-surface));
}

.msp-status--at_risk {
  background: color-mix(in srgb, var(--ds-color-warning) 16%, transparent);
  color: color-mix(in srgb, var(--ds-color-warning) 70%, var(--ds-color-on-surface));
}

.msp-status--warning,
.msp-status--processing,
.msp-status--degraded {
  background: color-mix(in srgb, var(--ds-color-warning) 16%, transparent);
  color: color-mix(in srgb, var(--ds-color-warning) 70%, var(--ds-color-on-surface));
}

.msp-status--attention {
  background: color-mix(in srgb, var(--ds-color-error) 14%, transparent);
  color: color-mix(in srgb, var(--ds-color-error) 72%, var(--ds-color-on-surface));
}

.msp-status--blocked {
  background: color-mix(in srgb, var(--ds-color-error) 14%, transparent);
  color: color-mix(in srgb, var(--ds-color-error) 72%, var(--ds-color-on-surface));
}

.msp-confidence,
.msp-inventory,
.msp-gap-meta {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.msp-inventory {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msp-scope-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.msp-scope-card {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.msp-scope-card svg {
  margin-top: 2px;
  color: var(--ds-color-on-surface-variant);
}

.msp-scope-card div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.msp-scope-card span {
  font-size: 12.5px;
  line-height: 18px;
  word-break: break-word;
}

.msp-scope-card small {
  font-size: 11.5px;
  line-height: 16px;
  color: var(--ds-color-on-surface-variant);
}

.msp-gap-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.msp-gap {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  color: var(--ds-color-on-surface);
}

.msp-gap svg {
  margin-top: 2px;
  color: var(--ds-color-on-surface-variant);
}

.msp-gap--ok svg {
  color: color-mix(in srgb, var(--ds-color-secondary) 72%, var(--ds-color-on-surface));
}

.msp-gap-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.msp-gap-reason {
  font-size: 12.5px;
  line-height: 18px;
  word-break: break-word;
}

.msp-section-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

.msp-section-head svg {
  flex: none;
  color: var(--ds-color-on-surface-variant);
}

.msp-skills,
.msp-danger {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid var(--ds-color-outline-variant);
}

.msp-skill-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.msp-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
}

.msp-skill-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.msp-skill-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--ds-color-on-surface);
}

.msp-skill-title svg {
  flex: none;
  color: var(--ds-color-on-surface-variant);
}

.msp-skill-meta {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  line-height: 15px;
  color: var(--ds-color-on-surface-variant);
  overflow-wrap: anywhere;
}

.msp-skill-desc {
  font-size: 11.5px;
  line-height: 16px;
  color: var(--ds-color-on-surface-variant);
}

.msp-skill-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--ds-color-on-surface);
  cursor: pointer;
}

.msp-skill-row input:disabled {
  cursor: not-allowed;
}

.msp-danger-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 8px;
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
}

.msp-danger-row span {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  color: var(--ds-color-on-surface);
}

.msp-danger-row small,
.msp-handoff-result {
  font-size: 12px;
  line-height: 17px;
  color: var(--ds-color-on-surface-variant);
}

.msp-confirm-btn {
  grid-column: 2;
  justify-self: start;
  min-height: 28px;
  padding: 0 9px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.msp-handoff-btn {
  width: 100%;
  min-height: 30px;
  padding: 0 10px;
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
}

.msp-analysis {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid var(--ds-color-outline-variant);
}

.msp-analysis-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

.msp-analysis-head svg {
  flex: none;
  color: var(--ds-color-on-surface-variant);
}

.msp-report-facts {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.msp-fact {
  font-size: 12.5px;
  line-height: 18px;
  color: var(--ds-color-on-surface);
  word-break: break-word;
}

/* ===== 收起态中间浮动输入条（MaterialCenterInput）— scoped 复刻 AgentInputBar 观感 =====
   §12 console scope：白底 ink 单色，pill 输入条，发送激活为 ink，无彩色脉冲。
   wrapper 定位/融合过渡在组件 inline barWrapperStyle（收起居中→展开飞右淡出）。 */
.ml-center-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 7px 7px 8px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full, );
  box-shadow: var(--ds-elevation-4);
}

.ml-center-input-ham {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ml-center-input-ham:hover {
  color: var(--ds-color-on-surface);
  border-color: var(--ds-color-on-surface);
}

.ml-center-input-ham-icon,
.ml-center-input-ham-icon::before,
.ml-center-input-ham-icon::after {
  display: block;
  width: 15px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}

.ml-center-input-ham-icon {
  position: relative;
}

.ml-center-input-ham-icon::before,
.ml-center-input-ham-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.ml-center-input-ham-icon::before {
  top: -5px;
}

.ml-center-input-ham-icon::after {
  top: 5px;
}

.ml-center-input-field {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 34px;
}

.ml-center-input-field textarea {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  resize: none;
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  color: var(--ds-color-on-surface);
  padding: 0 6px;
  margin: 0;
  height: 20px;
  min-height: 20px;
  max-height: 100px;
  overflow-y: auto;
}

.ml-center-input-field textarea::placeholder {
  color: var(--ds-color-on-surface-variant);
}

.ml-center-input-send {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  cursor: not-allowed;
  transition: background 0.15s, color 0.15s;
}

.ml-center-input-send--active {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  cursor: pointer;
}

/* ===== §12 / a11y 收口：overflow:hidden 容器内的可聚焦元素用 inset 描边，焦点环不被裁 ===== */
.ml-doc-row:focus-visible,
.ml-vcard-more:focus-visible,
.ml-vcard-sel:focus-visible,
.ml-rail2-seg-btn:focus-visible,
.ml-frail-item:focus-visible,
.ml-batch-btn:focus-visible,
.ml-act:focus-visible,
.ml-docd-tb-btn:focus-visible,
.msp-icon-btn:focus-visible,
.msp-primary-btn:focus-visible,
.msp-confirm-btn:focus-visible,
.msp-handoff-btn:focus-visible {
  outline: 2px solid var(--ds-color-on-primary-container);
  outline-offset: -2px;
  box-shadow: none;
}

/* Revisioned knowledge document: compact block editor in the material detail rail. */
.ml-docd--knowledge {
  gap: 14px;
}

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

.ml-kdoc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ml-kdoc-heading {
  min-width: 0;
}

.ml-kdoc-title {
  color: var(--ds-color-on-surface);
  font-size: 16px;
  line-height: 22px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.ml-kdoc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 5px;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

.ml-kdoc-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 7px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small, );
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}

.ml-kdoc-status--applied {
  border-color: color-mix(in srgb, var(--ds-color-secondary) 22%, transparent);
  color: color-mix(in srgb, var(--ds-color-secondary) 72%, var(--ds-color-on-surface));
}

.ml-kdoc-status--applying {
  border-color: color-mix(in srgb, var(--ds-color-primary) 22%, transparent);
  color: var(--ds-color-on-primary);
}

.ml-kdoc-status--failed,
.ml-kdoc-status--partial_failed,
.ml-kdoc-status--apply_failed,
.ml-kdoc-status--delete_failed {
  border-color: color-mix(in srgb, var(--ds-color-error) 22%, transparent);
  color: color-mix(in srgb, var(--ds-color-error) 80%, var(--ds-color-on-surface));
}

.ml-kdoc-apply-all {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ml-kdoc-notice,
.ml-kdoc-error {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small, );
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 18px;
}

.ml-kdoc-error {
  border-color: color-mix(in srgb, var(--ds-color-error) 22%, transparent);
  color: var(--ds-color-error);
}

.ml-kdoc-blocks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ml-kblock {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small, );
  background: var(--ds-color-surface);
}

.ml-kblock-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.ml-kblock-index {
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 11px;
}

.ml-kblock-title {
  min-width: 0;
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 13px;
  line-height: 19px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.ml-kblock-title-input,
.ml-kblock-editor {
  width: 100%;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small, );
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  outline: none;
}

.ml-kblock-title-input {
  min-height: 30px;
  padding: 4px 7px;
  font-size: 13px;
  font-weight: 700;
}

.ml-kblock-editor {
  min-height: 150px;
  margin-top: 10px;
  padding: 9px 10px;
  resize: vertical;
  font-size: 12.5px;
  line-height: 19px;
}

.ml-kblock-title-input:focus,
.ml-kblock-editor:focus {
  border-color: var(--ds-color-on-surface);
}

.ml-kblock-content {
  margin-top: 9px;
  color: var(--ds-color-on-surface-variant);
  font-size: 12.5px;
  line-height: 19px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ml-kblock-error {
  margin: 8px 0 0;
  color: var(--ds-color-error);
  font-size: 12px;
  line-height: 17px;
}

.ml-kblock-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.ml-kblock-actions .ml-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ml-spin {
  animation: ml-spin 0.9s linear infinite;
}

@keyframes ml-spin {
  to { transform: rotate(360deg); }
}

/* 极窄屏命令条：隐藏排序文案 / 密度文字，保留图标（对齐 mockup @560）。 */
@media (max-width: 560px) {
  .ml-sort-btn .ml-mono,
  .ml-seg-btn span {
    display: none;
  }
}
.mup-queue-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0 8px;
}

.mup-queue-filter {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small, );
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  cursor: pointer;
}

.mup-queue-filter--active {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.mup-row-task {
  max-width: 148px;
  overflow: hidden;
  color: var(--ds-color-on-surface-variant);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .mup-row-task {
    display: none;
  }
}

/* Knowledge document management and independent editor */
.ml-doc-row--managed {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 66px 88px 90px 300px;
  min-width: 740px;
  min-height: 60px;
  padding: 8px 12px;
  gap: 8px;
  cursor: default;
}

.ml-doc-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 66px 88px 90px 300px;
  min-width: 740px;
  min-height: 38px;
  padding: 0 12px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

.ml-doc-head > span:last-child { text-align: right; }

@media (max-width: 780px) {
  .ml-doc-head,
  .ml-doc-row--managed {
    grid-template-columns: minmax(140px, 1fr) 66px 88px 90px 300px;
  }

  .ml-doc-row--managed .ml-doc-meta {
    grid-column: auto;
    padding-bottom: 0;
  }
}

.ml-doc-name-cell {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.ml-doc-name-cell .ml-doc-title { flex: 1; }
.ml-doc-ai-badge {
  flex: none;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--ds-color-primary) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ds-color-primary) 8%, transparent);
  color: color-mix(in srgb, var(--ds-color-primary) 58%, var(--ds-color-on-surface));
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.ml-doc-status {
  justify-self: start;
  padding: 4px 9px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 999px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  white-space: nowrap;
}

.ml-doc-status--applied {
  border-color: color-mix(in srgb, var(--ds-color-secondary) 28%, transparent);
  background: color-mix(in srgb, var(--ds-color-secondary) 12%, transparent);
  color: color-mix(in srgb, var(--ds-color-secondary) 70%, var(--ds-color-on-surface));
}
.ml-doc-status--applying {
  border-color: color-mix(in srgb, var(--ds-color-warning) 32%, transparent);
  background: color-mix(in srgb, var(--ds-color-warning) 14%, transparent);
  color: color-mix(in srgb, var(--ds-color-warning) 70%, var(--ds-color-on-surface));
}
.ml-doc-status--failed {
  border-color: color-mix(in srgb, var(--ds-color-error) 28%, transparent);
  background: color-mix(in srgb, var(--ds-color-error) 12%, transparent);
  color: color-mix(in srgb, var(--ds-color-error) 72%, var(--ds-color-on-surface));
}
.ml-doc-status--changed {
  border-color: color-mix(in srgb, var(--ds-color-primary) 28%, transparent);
  background: color-mix(in srgb, var(--ds-color-primary) 12%, transparent);
  color: color-mix(in srgb, var(--ds-color-primary) 55%, var(--ds-color-on-surface));
}
.ml-doc-status--unpublished {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
}
.ml-doc-status--processing,
.ml-doc-status--pending {
  border-color: color-mix(in srgb, var(--ds-color-warning) 32%, transparent);
  background: color-mix(in srgb, var(--ds-color-warning) 14%, transparent);
  color: color-mix(in srgb, var(--ds-color-warning) 70%, var(--ds-color-on-surface));
}

.ml-doc-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ml-doc-action {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 7px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  cursor: pointer;
}
.ml-doc-action--primary { border-color: var(--ds-color-on-surface); background: var(--ds-color-on-surface); color: var(--ds-color-surface); }
.ml-doc-action--danger { color: var(--ds-color-error); }
.ml-doc-action:disabled { cursor: not-allowed; opacity: .5; }
.ml-doc-list--groups { margin-top: 10px; }
.ml-doc-search-options { display: flex; justify-content: flex-end; margin: 10px 2px 8px; color: var(--ds-color-on-surface-variant); font-size: 12px; }
.ml-doc-search-options label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.ml-editor-page { min-height: 100vh; background: var(--ds-color-surface-container); color: var(--ds-color-on-surface); }
.ml-editor-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 168px minmax(260px, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}
.ml-editor-back { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ds-color-on-surface-variant); cursor: pointer; }
.ml-editor-back:hover { background: var(--ds-color-surface-container); color: var(--ds-color-on-surface); }
.ml-editor-title-wrap { display: flex; align-items: center; min-width: 0; gap: 10px; }
.ml-editor-title-input { min-width: 0; width: min(560px, 100%); padding: 7px 8px; border: 1px solid transparent; border-radius: 8px; outline: 0; background: transparent; color: var(--ds-color-on-surface); font: 600 16px/1.25 inherit; }
.ml-editor-title-input:hover { background: var(--ds-color-surface-container); }
.ml-editor-title-input:focus { border-color: var(--ds-color-primary); background: var(--ds-color-surface); outline: 3px solid var(--ds-color-secondary); }
.ml-editor-status { flex: none; padding: 4px 8px; border-radius: 999px; background: var(--ds-color-surface-container); color: var(--ds-color-on-surface-variant); font-size: 11px; }
.ml-editor-failure-reason { display: block; margin-top: 3px; color: var(--ds-color-error); font-size: 12px; }
.ml-editor-preview-block-title { margin: 0 0 12px; color: var(--ds-color-on-surface); font-size: 18px; }
.ml-editor-markdown-preview { min-height: 120px; color: var(--ds-color-on-surface); font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.ml-editor-markdown-preview > :first-child { margin-top: 0; }
.ml-editor-markdown-preview > :last-child { margin-bottom: 0; }
.ml-editor-markdown-preview h1, .ml-editor-markdown-preview h2, .ml-editor-markdown-preview h3 { margin: 1.5em 0 .55em; color: var(--ds-color-on-surface); line-height: 1.35; text-wrap: balance; }
.ml-editor-markdown-preview h1 { font-size: 22px; }
.ml-editor-markdown-preview h2 { font-size: 19px; }
.ml-editor-markdown-preview h3 { font-size: 16px; }
.ml-editor-markdown-preview p, .ml-editor-markdown-preview ul, .ml-editor-markdown-preview ol, .ml-editor-markdown-preview blockquote, .ml-editor-markdown-preview pre, .ml-editor-markdown-preview table { margin: .75em 0; }
.ml-editor-markdown-preview ul, .ml-editor-markdown-preview ol { padding-left: 1.5em; }
.ml-editor-markdown-preview li + li { margin-top: .3em; }
.ml-editor-markdown-preview blockquote { padding: 10px 14px; border: 1px solid var(--ds-color-outline-variant); border-radius: 8px; background: var(--ds-color-surface-container); color: var(--ds-color-on-surface-variant); }
.ml-editor-markdown-preview a { color: var(--ds-color-on-primary); text-decoration: underline; text-underline-offset: 2px; }
.ml-editor-markdown-preview code { padding: 2px 5px; border-radius: 5px; background: var(--ds-color-surface-container); font: .9em/1.5 var(--ds-typeface-code); }
.ml-editor-markdown-preview pre { padding: 14px 16px; border-radius: 10px; background: var(--ds-color-surface-container); overflow: auto; }
.ml-editor-markdown-preview pre code { padding: 0; background: transparent; }
.ml-editor-markdown-preview table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ml-editor-markdown-preview th, .ml-editor-markdown-preview td { padding: 9px 11px; border: 1px solid var(--ds-color-outline-variant); text-align: left; }
.ml-editor-markdown-preview th { background: var(--ds-color-surface-container); font-weight: 650; }
.ml-editor-markdown-preview hr { margin: 24px 0; border: 0; border-top: 1px solid var(--ds-color-outline-variant); }
.ml-editor-status--applied {
  background: color-mix(in srgb, var(--ds-color-secondary) 10%, transparent);
  color: color-mix(in srgb, var(--ds-color-secondary) 48%, var(--ds-color-on-surface-variant));
}
.ml-editor-status--applying {
  background: color-mix(in srgb, var(--ds-color-warning) 12%, transparent);
  color: color-mix(in srgb, var(--ds-color-warning) 55%, var(--ds-color-on-surface-variant));
}
.ml-editor-head-actions { display: flex; align-items: center; gap: 8px; }
.ml-editor-save-state { margin-right: 4px; color: var(--ds-color-on-surface-variant); font-size: 11px; white-space: nowrap; }
.ml-editor-btn { min-height: 36px; padding: 0 14px; border: 1px solid var(--ds-color-outline-variant); border-radius: 8px; background: var(--ds-color-surface); color: var(--ds-color-on-surface); cursor: pointer; }
.ml-editor-btn--primary { border-color: var(--ds-color-surface); }
.ml-editor-layout { display: grid; grid-template-columns: 210px minmax(480px, 860px) 230px; justify-content: center; align-items: stretch; gap: 0; width: min(1300px, 100%); min-height: calc(100vh - 64px); margin: 0 auto; padding: 24px 20px 40px; }
.ml-editor-outline, .ml-editor-info { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 112px); padding: 20px 18px; background: transparent; overflow: auto; }
.ml-editor-outline { border-right: 1px solid var(--ds-color-outline-variant); }
.ml-editor-info { border-left: 1px solid var(--ds-color-outline-variant); }
.ml-editor-side-label { margin-bottom: 12px; color: var(--ds-color-on-surface-variant); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ml-editor-outline-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 7px; width: 100%; padding: 9px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--ds-color-on-surface-variant); text-align: left; cursor: pointer; }
.ml-editor-outline-item span { color: var(--ds-color-on-surface-variant); font: 10px ui-monospace, monospace; }
.ml-editor-outline-item.is-active { background: var(--ds-color-surface-container); color: var(--ds-color-on-surface); font-weight: 600; }
.ml-editor-canvas { min-width: 0; border-top: 1px solid var(--ds-color-outline-variant); border-bottom: 1px solid var(--ds-color-outline-variant); background: var(--ds-color-surface); overflow: hidden; }
.ml-editor-toolbar { position: sticky; top: 64px; z-index: 10; display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 8px 18px; border-bottom: 1px solid var(--ds-color-outline-variant); background: var(--ds-color-surface); }
.ml-editor-toolbar button, .ml-editor-toolbar select { min-height: 32px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ds-color-on-surface-variant); cursor: pointer; }
.ml-editor-toolbar button { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; }
.ml-editor-toolbar button:hover { border-color: var(--ds-color-on-surface-variant); background: var(--ds-color-surface-container); color: var(--ds-color-on-surface); }
.ml-editor-toolbar button:focus-visible, .ml-editor-toolbar select:focus-visible, .ml-editor-btn:focus-visible, .ml-editor-back:focus-visible, .ml-editor-outline-item:focus-visible { outline: 0; outline: 3px solid var(--ds-color-secondary); }
.ml-editor-toolbar button:disabled, .ml-editor-btn:disabled { cursor: not-allowed; opacity: .45; }
.ml-editor-mode-switch { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--ds-color-surface-container); }
.ml-editor-mode-switch button { min-height: 28px; padding-inline: 10px; }
.ml-editor-mode-switch button.is-active { border-color: var(--ds-color-on-surface-variant); background: var(--ds-color-surface); color: var(--ds-color-on-surface); }
.ml-editor-toolbar-rule { width: 1px; height: 22px; margin: 0 5px; background: var(--ds-color-outline-variant); }
.ml-editor-toolbar .ml-editor-polish {
  margin-left: auto;
  border-color: color-mix(in srgb, var(--ds-color-primary) 35%, transparent);
  background: color-mix(in srgb, var(--ds-color-primary) 8%, transparent);
  color: var(--ds-color-on-primary);
}
.ml-editor-custom-instruction { width: 150px; min-height: 32px; padding: 0 8px; border: 1px solid var(--ds-color-outline-variant); border-radius: 6px; outline: 0; }
.ml-editor-blocks { max-width: 760px; margin: 0 auto; padding: 48px clamp(32px, 7vw, 72px) 80px; }
.ml-editor-block { scroll-margin-top: 136px; padding: 6px 0 36px; border-bottom: 1px solid var(--ds-color-outline-variant); }
.ml-editor-block:last-child { border-bottom: 0; }
.ml-editor-block-title { width: 100%; margin: 0 0 14px; padding: 6px 8px; border: 1px solid transparent; border-radius: 7px; outline: 0; background: transparent; color: var(--ds-color-on-surface); font: 700 21px/1.35 inherit; }
.ml-editor-textarea { display: block; width: 100%; min-height: 112px; padding: 8px; resize: none; border: 1px solid transparent; border-radius: 8px; outline: 0; background: transparent; color: var(--ds-color-on-surface); caret-color: var(--ds-color-on-surface); field-sizing: content; overflow: hidden; font: 15px/1.85 inherit; }
.ml-editor-block-title:hover, .ml-editor-textarea:hover { background: var(--ds-color-surface-container); }
.ml-editor-block-title:focus, .ml-editor-textarea:focus { border-color: var(--ds-color-primary); background: var(--ds-color-surface); outline: 3px solid var(--ds-color-secondary); }
.ml-editor-info dl { margin: 0; }
.ml-editor-info dl div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ds-color-outline-variant); font-size: 12px; }
.ml-editor-info dt { color: var(--ds-color-on-surface-variant); }
.ml-editor-info dd { margin: 0; color: var(--ds-color-on-surface); text-align: right; }
.ml-editor-info-note { margin: 14px 0 0; color: var(--ds-color-on-surface-variant); font-size: 11px; line-height: 1.6; }
.ml-editor-info-action { width: 100%; margin-top: 12px; min-height: 32px; border: 1px solid var(--ds-color-outline-variant); border-radius: 7px; background: var(--ds-color-surface); cursor: pointer; }
.ml-editor-suggestion {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 40;
  width: min(380px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--ds-color-primary) 35%, transparent);
  border-radius: 12px;
  background: var(--ds-color-surface);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--ds-color-on-surface) 18%, transparent);
}
.ml-editor-suggestion-head { display: flex; align-items: center; gap: 7px; color: var(--ds-color-on-primary); font-weight: 700; }
.ml-editor-suggestion p { color: var(--ds-color-on-surface); line-height: 1.65; }
.ml-editor-suggestion-compare small { display: block; margin-top: 10px; color: var(--ds-color-on-surface-variant); font-weight: 700; }
.ml-editor-suggestion > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
.ml-editor-suggestion button { padding: 7px 10px; border: 1px solid var(--ds-color-outline-variant); border-radius: 6px; background: var(--ds-color-surface); cursor: pointer; }
.ml-editor-loading { display: grid; min-height: 70vh; place-items: center; color: var(--ds-color-on-surface-variant); }
.ml-editor-load-error { display: flex; min-height: 70vh; padding: 32px; align-items: center; justify-content: center; flex-direction: column; gap: 10px; background: var(--ds-color-surface); color: var(--ds-color-on-surface); text-align: center; }
.ml-editor-load-error strong { font-size: 18px; }
.ml-editor-load-error p { max-width: 520px; margin: 0; color: var(--ds-color-on-surface-variant); line-height: 1.6; }
.ml-editor-load-error > div { display: flex; gap: 8px; }
.ml-editor-load-error button { min-height: 36px; padding: 0 14px; border: 1px solid var(--ds-color-outline-variant); border-radius: 8px; background: var(--ds-color-surface); color: var(--ds-color-on-surface); cursor: pointer; }
.ml-editor-publish-error {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 45;
  padding: 10px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ds-color-error) 8%, transparent);
  color: var(--ds-color-error);
}
.ml-dh-detail-dialog { position: relative; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 24px; border-radius: 14px; background: var(--ds-color-surface); overflow: auto; }

/* U5 document rail: keep the existing editor logic, but compose its outline,
   toolbar, body and metadata as one scrollable master-detail column. */
.ml-page .mdetail--doc { padding: 0 0 24px; }
.ml-page .mdetail--doc .mdetail-document-body { min-height: 100%; }
.ml-page .mdetail--doc .ml-editor-page--rail {
  min-height: 100%;
  background: var(--ds-color-surface);
}
.ml-editor-page--rail .ml-editor-head {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-height: 0;
  padding: 14px 16px;
}
.ml-editor-page--rail .ml-editor-back { display: none; }
.ml-editor-page--rail .ml-editor-title-wrap { width: 100%; }
.ml-editor-page--rail .ml-editor-title-input { width: 100%; }
.ml-editor-page--rail .ml-editor-head-actions { flex-wrap: wrap; justify-content: flex-end; }
.ml-editor-page--rail .ml-editor-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 16px 32px;
}
.ml-editor-page--rail .ml-editor-outline {
  position: static;
  max-height: none;
  padding: 14px 0 10px;
  border-right: 0;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  overflow: visible;
  white-space: nowrap;
}
.ml-editor-page--rail .ml-editor-outline-item {
  display: inline-grid;
  width: auto;
  margin: 0 4px 4px 0;
  padding: 6px 9px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 999px;
}
.ml-editor-page--rail .ml-editor-outline-item.is-active { border-color: transparent; }
.ml-editor-page--rail .ml-editor-canvas { border: 0; background: transparent; overflow: visible; }
.ml-editor-page--rail .ml-editor-toolbar { position: static; flex-wrap: wrap; min-height: 0; padding: 10px 0; }
.ml-editor-page--rail .ml-editor-toolbar .ml-editor-polish { margin-left: 0; }
.ml-editor-page--rail .ml-editor-blocks { max-width: none; margin: 0; padding: 18px 0 10px; }
.ml-editor-page--rail .ml-editor-block-title { font-size: 18px; }
.ml-editor-page--rail .ml-editor-markdown-preview { min-height: 0; }
.ml-editor-page--rail .ml-editor-textarea { font-size: 14px; }
.ml-editor-page--rail .ml-editor-info {
  position: static;
  align-self: stretch;
  max-height: none;
  box-sizing: border-box;
  width: 100%;
  padding: 16px 0 0;
  border-top: 1px solid var(--ds-color-outline-variant);
  border-left: 0;
  overflow: visible;
}
.ml-editor-page--rail .ml-editor-loading { min-height: 240px; }
.ml-editor-page--rail .ml-editor-load-error { min-height: 240px; padding: 32px 16px; }
.ml-editor-page--rail .ml-editor-publish-error { position: static; margin: 12px 16px; }

@media (max-width: 1100px) {
  .ml-editor-layout { grid-template-columns: 180px minmax(420px, 1fr); }
  .ml-editor-info { display: none; }
}

@media (max-width: 700px) {
  .ml-editor-head { grid-template-columns: 1fr auto; padding: 10px 14px; }
  .ml-editor-title-wrap { grid-column: 1 / -1; grid-row: 2; }
  .ml-editor-head-actions .ml-editor-save-state { font-size: 10px; }
  .ml-editor-layout { display: block; padding: 12px; }
  .ml-editor-outline, .ml-editor-info { display: none; }
  .ml-editor-toolbar { position: static; flex-wrap: wrap; overflow: visible; }
  .ml-editor-toolbar { gap: 1px; padding-inline: 8px; }
  .ml-editor-toolbar button { flex: none; padding-inline: 5px; white-space: nowrap; }
  .ml-editor-toolbar select { flex: none; width: 72px; }
  .ml-editor-custom-instruction { flex: none; width: 110px; }
  .ml-editor-toolbar-rule { margin-inline: 2px; }
  .ml-editor-blocks { padding: 32px 20px 60px; }
  .ml-editor-btn { padding: 0 10px; }
}


/* M1-1 chrome: prototype .mod-materials shell (.mtop / .mtoolbar / .mworkspace / .mdetail / .mbatch) */
/* Maps prototype tokens to --ds-* design system variables. */

.ml-page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.ml-page .mtop {
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  background: var(--ds-color-surface);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.ml-page .mprod { position: relative; flex-shrink: 0; }
.ml-page .mprod-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 9px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
}
.ml-page .mprod-btn:hover { border-color: var(--ds-color-on-surface-variant); }
.ml-page .mprod-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ml-page .mprod-sw {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-color-on-surface-variant);
}
.ml-page .mprod-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ml-page .mprod-btn .cv { width: 14px; height: 14px; opacity: 0.6; display: grid; place-items: center; }
.ml-page .mprod-btn .cv svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.ml-page .msearch {
  flex: 1;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px 0 12px;
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 10px;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.ml-page .msearch:focus-within {
  border-color: color-mix(in srgb, var(--ds-color-primary) 48%, var(--ds-color-on-surface-variant));
  background: var(--ds-color-surface);
  outline: 3px solid var(--ds-color-secondary);
}
.ml-page .msearch svg { flex-shrink: 0; stroke: var(--ds-color-on-surface-variant); }
.ml-page .msearch input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--ds-color-on-surface);
}
.ml-page .msearch input::placeholder { color: var(--ds-color-on-surface-variant); }
.ml-page .kbd {
  font-family: var(--ds-typeface-code, var(--ds-mono, ui-monospace, monospace));
  font-size: 10.5px;
  color: var(--ds-color-on-surface-variant);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 5px;
  padding: 1px 5px;
  background: var(--ds-color-surface);
}

.ml-page .mtop-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.ml-page .btn-ink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: 9px;
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: filter 0.14s ease, transform 0.1s ease;
}
.ml-page .btn-ink:hover { filter: brightness(1.06); }
.ml-page .btn-ink:active { transform: translateY(1px); }
.ml-page .btn-ghost-ask {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 9px;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.ml-page .btn-ghost-ask:hover {
  color: var(--ds-color-on-surface);
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
}

/* Toolbar / filters — elevated segment (not hard invert), token-only surfaces */
.ml-page .mtoolbar {
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: color-mix(in srgb, var(--ds-color-surface) 88%, var(--ds-color-surface));
  min-width: 0;
}
.ml-page .mftabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 10px;
  flex-shrink: 0;
}
.ml-page .mftabs .mf-item {
  width: auto;
  height: 28px;
  padding: 0 12px;
  border: none;
  border-radius: 7px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ml-page .mftabs .mf-item:hover {
  color: var(--ds-color-on-surface);
  background: color-mix(in srgb, var(--ds-color-surface) 55%, transparent);
}
.ml-page .mftabs .mf-item.on {
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-weight: 600;
  box-shadow:
    0 0 0 1px var(--ds-color-outline-variant),
    0 1px 2px color-mix(in srgb, var(--ds-color-on-surface) 6%, transparent);
}
.ml-page .mftabs .mf-item .mf-count {
  margin-left: 1px;
  font-family: var(--ds-typeface-code, var(--ds-mono, ui-monospace, monospace));
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.ml-page .mftabs .mf-item.on .mf-count {
  color: var(--ds-color-on-surface-variant);
  opacity: 1;
}

.ml-page .mf-dropdown { position: relative; flex-shrink: 0; }
.ml-page .mf-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  background: var(--ds-color-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.ml-page .mf-dd-btn:hover {
  color: var(--ds-color-on-surface);
  border-color: var(--ds-color-on-surface-variant);
}
.ml-page .mf-dd-btn.on {
  color: var(--ds-color-on-primary);
  border-color: color-mix(in srgb, var(--ds-color-primary) 38%, var(--ds-color-on-surface-variant));
  background: var(--ds-color-primary-container);
}
.ml-page .mf-dd-btn[aria-expanded='true'] {
  color: var(--ds-color-on-surface);
  border-color: var(--ds-color-on-surface-variant);
}
.ml-page .mf-dd-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 188px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 12px;
  box-shadow: var(--ds-elevation-3);
  padding: 6px;
  z-index: 40;
}
.ml-page .mf-dd-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--ds-color-on-surface);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}
.ml-page .mf-dd-opt:hover { background: var(--ds-color-surface-container); }
.ml-page .mf-dd-opt.on { background: color-mix(in srgb, var(--ds-color-primary) 8%, transparent); }
.ml-page .mf-dd-opt .mf-count {
  margin-left: auto;
  font-family: var(--ds-typeface-code, var(--ds-mono, ui-monospace, monospace));
  font-size: 10.5px;
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}
.ml-page .mf-check {
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--ds-color-outline-variant);
  border-radius: 4px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--ds-color-surface);
}
.ml-page .mf-check.on {
  background: var(--ds-color-primary);
  border-color: var(--ds-color-primary);
}
.ml-page .mf-check.on::after {
  content: '';
  width: 7px;
  height: 4px;
  border: 1.6px solid var(--ds-color-on-primary, );
  border-top: none;
  border-right: none;
  transform: translateY(-0.5px) rotate(-45deg);
}
/* Status dots: desaturated so they read as status, not candy neon */
.ml-page .mf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.92;
}
.ml-page .mf-dot--done {
  background: color-mix(in srgb, var(--ds-color-secondary) 62%, #64748b);
}
.ml-page .mf-dot--pending {
  background: color-mix(in srgb, var(--ds-color-warning) 68%, #78716c);
}
.ml-page .mf-dot--fail {
  background: color-mix(in srgb, var(--ds-color-error) 72%, #78716c);
}

.ml-page .mchips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.ml-page .mchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 5px 0 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 999px;
  background: var(--ds-color-surface);
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
}
.ml-page .mchip b { color: var(--ds-color-on-surface); font-weight: 550; }
.ml-page .mchip-x {
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.ml-page .mchip-x:hover {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
}
.ml-page .mchip-clear {
  border: none;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ml-page .mchip-clear:hover { color: var(--ds-color-on-surface); }
.ml-page .mtool-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.ml-page .mcount {
  font-family: var(--ds-typeface-code, var(--ds-mono, ui-monospace, monospace));
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ml-page .mseg {
  display: inline-flex;
  height: 30px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  gap: 2px;
}
.ml-page .mseg-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.ml-page .mseg-btn:hover { color: var(--ds-color-on-surface); }
.ml-page .mseg-btn.on {
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-weight: 600;
  box-shadow:
    0 0 0 1px var(--ds-color-outline-variant),
    0 1px 2px color-mix(in srgb, var(--ds-color-on-surface) 6%, transparent);
}
.ml-page .msort {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  background: var(--ds-color-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease;
}
.ml-page .msort:hover {
  color: var(--ds-color-on-surface);
  border-color: var(--ds-color-on-surface-variant);
}
.ml-page .msort .mono {
  font-family: var(--ds-typeface-code, var(--ds-mono, ui-monospace, monospace));
  font-size: 11px;
  color: var(--ds-color-on-surface);
  font-variant-numeric: tabular-nums;
}

.ml-page .mworkspace {
  flex: 1;
  display: flex;
  min-height: 0;
  min-width: 0;
  position: relative;
}
.ml-page .mcontent {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 96px;
  min-width: 0;
  scrollbar-width: thin;
  background: var(--ds-color-surface);
}

/* A0 rail widths: standard 360 / dh min(420px,42vw) / document min(56vw,720px) */
.ml-page {
  --rail-w: 360px;
  --rail-w-dh: min(420px, 42vw);
  --rail-w-doc: min(56vw, 720px);
}

.ml-page .mdetail {
  width: var(--rail-w);
  flex-shrink: 0;
  background: var(--ds-color-surface);
  border-left: 1px solid var(--ds-color-outline-variant);
  overflow-y: auto;
  position: relative;
  padding: 16px 16px 24px;
  scrollbar-width: thin;
}
.ml-page .mdetail--dh,
.ml-page .mdetail[data-rail-kind='digitalHuman'] {
  width: var(--rail-w-dh);
}
.ml-page .mdetail--doc,
.ml-page .mdetail[data-rail-kind='document'] {
  width: var(--rail-w-doc);
}
.ml-page .mdetail-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 7px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  z-index: 2;
}
.ml-page .mdetail-empty {
  padding: 48px 12px;
  text-align: center;
  color: var(--ds-color-on-surface-variant);
}
.ml-page .mdetail-empty-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
  margin-bottom: 6px;
}
.ml-page .mdetail-empty-sub { font-size: 12px; line-height: 1.5; }

/* U4 digital-human edit rail: A0 #dh parity; theme-facing values stay on --ds tokens. */
.ml-page .mdetail-body { min-width: 0; }
.ml-page .mdetail--dh,
.ml-page .mdetail[data-rail-kind='digitalHuman'] { padding: 0 14px 24px; }
.ml-page .mdetail--dh .mdetail-close,
.ml-page .mdetail[data-rail-kind='digitalHuman'] .mdetail-close {
  border: 0;
  background: transparent;
  font-size: 20px;
}
.ml-page .ml-dh-edit-head {
  display: flex;
  align-items: center;
  min-height: 47px;
  margin: 0 -14px 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 700;
}
.ml-page .ml-dh-edit {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.ml-page .ml-dh-edit-preview-wrap { display: flex; flex-direction: column; gap: 26px; }
.ml-page .ml-dh-edit-preview {
  display: grid;
  place-items: center;
  width: min(100%, 180px);
  aspect-ratio: 3 / 4;
  max-height: 260px;
  margin: 0 auto;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface-variant);
  font-size: 28px;
  font-weight: 700;
}
.ml-page .ml-dh-edit-preview img,
.ml-page .ml-dh-edit-preview video { width: 100%; height: 100%; object-fit: cover; }
.ml-page .ml-dh-edit-statusline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}
.ml-page .ml-dh-edit-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
}
.ml-page .ml-dh-edit-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ds-color-warning); }
.ml-page .ml-dh-edit-status--ready .ml-dh-edit-status-dot { background: var(--ds-color-secondary); }
.ml-page .ml-dh-edit-block {
  padding: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 12px;
  background: var(--ds-color-surface);
}
.ml-page .ml-dh-edit > section.ml-dh-edit-block:nth-of-type(2) { min-height: 313px; }
.ml-page .ml-dh-edit-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--ds-color-on-surface);
  font-size: 12.5px;
  font-weight: 700;
}
.ml-page .ml-dh-edit-label small { color: var(--ds-color-on-surface-variant); font-size: 11px; font-weight: 500; }
.ml-page .ml-dh-edit-label--spaced { margin-top: 12px; }
.ml-page .ml-dh-edit-field {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 10px;
  outline: 0;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 13px;
}
.ml-page textarea.ml-dh-edit-field { min-height: 88px; resize: vertical; line-height: 1.55; }
.ml-page .ml-dh-edit-field:focus { border-color: var(--ds-color-on-surface-variant); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-color-primary) 18%, transparent); }
.ml-page .ml-dh-edit-pill-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
}
.ml-page .ml-dh-edit-pill-row button {
  min-height: 31px;
  border: 0;
  border-radius: var(--ds-corner-full);
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.ml-page .ml-dh-edit-pill-row button.is-on { background: var(--ds-color-on-surface); color: var(--ds-color-surface); font-weight: 700; }
.ml-page .ml-dh-edit-replace-zone { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ml-page .ml-dh-edit-replace-zone .ml-dh-edit-btn { min-height: 34px; }
.ml-page .ml-dh-edit-hint { margin-top: 6px; color: var(--ds-color-on-surface-variant); font-size: 11px; line-height: 1.45; }
.ml-page .ml-dh-edit-file { margin-top: 7px; color: var(--ds-color-on-surface-variant); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-page .ml-dh-edit-attachment {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: 10px;
  background: var(--ds-color-surface);
  min-height: 57px;
}
.ml-page .ml-dh-edit-attachment + .ml-dh-edit-attachment { min-height: 58px; margin-top: 8px; }
.ml-page .ml-dh-edit-attachment-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font-size: 14px;
}
.ml-page .ml-dh-edit-attachment-meta { flex: 1; min-width: 0; }
.ml-page .ml-dh-edit-attachment-meta strong { display: block; color: var(--ds-color-on-surface); font-size: 12.5px; }
.ml-page .ml-dh-edit-attachment-meta span { display: block; overflow: hidden; color: var(--ds-color-on-surface-variant); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ml-page .ml-dh-edit-attachment-meta audio { display: block; width: 100%; height: 28px; margin-top: 7px; }
.ml-page .ml-dh-edit-attachment-actions { display: flex; flex: none; gap: 6px; }
.ml-page .ml-dh-edit-btn {
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.ml-page .ml-dh-edit-btn:hover { border-color: var(--ds-color-on-surface-variant); background: var(--ds-color-surface-container); }
.ml-page .ml-dh-edit-btn:disabled { cursor: default; opacity: .55; }
.ml-page .ml-dh-edit-btn--small { min-height: 30px; padding-inline: 8px; font-size: 11.5px; }
.ml-page .ml-dh-edit-btn--primary { border-color: var(--ds-color-on-surface); background: var(--ds-color-on-surface); color: var(--ds-color-surface); font-weight: 700; }
.ml-page .ml-dh-edit-btn--danger { border-color: transparent; background: transparent; color: var(--ds-color-error); }
.ml-page .ml-dh-edit-actions { display: grid; gap: 8px; padding-bottom: 4px; }
.ml-page .ml-dh-edit-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ml-page .ml-dh-edit-actions > .ml-dh-edit-btn { width: 100%; min-height: 38px; }
.ml-page .ml-dh-edit-actions-row .ml-dh-edit-btn { width: 100%; }
.ml-page .ml-dh-edit-error { padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--ds-color-error) 32%, var(--ds-color-outline-variant)); border-radius: var(--ds-corner-small); background: color-mix(in srgb, var(--ds-color-error) 8%, var(--ds-color-surface)); color: var(--ds-color-error); font-size: 12px; line-height: 1.45; }
.ml-page .ml-dh-edit-state { display: flex; min-height: 180px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ds-color-on-surface-variant); font-size: 12px; text-align: center; }
.ml-page .ml-dh-edit-state strong { color: var(--ds-color-on-surface); font-size: 13px; }
.ml-page .ml-dh-edit-delete-confirm { display: grid; gap: 8px; padding: 10px; border: 1px solid color-mix(in srgb, var(--ds-color-error) 30%, var(--ds-color-outline-variant)); border-radius: var(--ds-corner-small); background: color-mix(in srgb, var(--ds-color-error) 7%, var(--ds-color-surface)); color: var(--ds-color-on-surface-variant); font-size: 12px; }
.ml-page .ml-dh-edit-delete-confirm > div { display: flex; gap: 8px; }
.ml-page .ml-dh-empty { display: grid; min-height: 76px; place-items: center; padding: 14px; border: 1px dashed var(--ds-color-outline-variant); border-radius: var(--ds-corner-medium); background: var(--ds-color-surface-container); color: var(--ds-color-on-surface-variant); font-size: 12px; text-align: center; }

@media (max-width: 640px) {
  .ml-page .ml-dh-edit-statusline { align-items: flex-start; flex-direction: column; }
  .ml-page .ml-dh-edit-attachment { flex-wrap: wrap; }
  .ml-page .ml-dh-edit-attachment-meta { min-width: calc(100% - 44px); }
  .ml-page .ml-dh-edit-attachment-actions { width: 100%; justify-content: flex-end; }
}

.ml-page .mbatch {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 0);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px 9px 16px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 12px;
  box-shadow: var(--ds-elevation-3);
}

.ml-page .ml-inline-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 10px;
  background: var(--ds-color-surface);
  font-size: 12.5px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.5;
}
.ml-page .ml-inline-notice strong {
  color: var(--ds-color-on-surface);
  font-weight: 650;
}
.ml-page .ml-inline-notice-action {
  border: none;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-color-on-primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}

/* Hide legacy page head if residual styles remain */
.ml-page .ml-page-head { display: none; }

/* Suppress old left filters rail / right dual-tab rail layout residuals */
.ml-page .ml-workspace { display: contents; }

/* ===== 已生成视频分区（复用 .ml-vgrid / .ml-vcard，仅补充说明条与成片角标） ===== */
.ml-page .ml-gen-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ds-color-warning) 28%, var(--ds-color-outline-variant));
  background: color-mix(in srgb, var(--ds-color-warning) 8%, transparent);
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ds-color-warning) 55%, var(--ds-color-on-surface));
}

/* 成片角标：在 Video token 基础上换色，不另起一套卡片 */
.ml-page .ml-vcard-token--gen {
  background: color-mix(in srgb, var(--ds-color-warning) 78%, transparent);
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 10px;
}
.ml-page .ml-vcard-token--gen.is-export { background: color-mix(in srgb, var(--ds-color-primary) 78%, transparent); }
.ml-page .ml-vcard-token--gen.is-busy { background: color-mix(in srgb, var(--ds-color-on-surface-variant) 78%, transparent); }
.ml-page .ml-vcard-token--gen.is-fail { background: color-mix(in srgb, var(--ds-color-error) 78%, transparent); }

/* 失败卡透传后端 message（list/get 已返回） */
.ml-page .ml-vcard-fail-msg {
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--ds-color-error) 72%, var(--ds-color-on-surface-variant));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========== G2 2026-08-10 assets/works split · 素材页 ========== */

/* 页面内边距：ModuleHeader + 控制行与视觉稿 main 对齐 */
.ml-page {
  padding: 22px 26px 0;
  box-sizing: border-box;
}

.ml-page .mtoolbar {
  height: auto;
  min-height: 46px;
  padding: 0 0 13px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: transparent;
}

.ml-page .msearch-slot .msearch {
  max-width: 100%;
  width: 100%;
  margin: 0;
  height: 34px;
}

.ml-page .msearch-slot .msearch input {
  min-width: 0;
}

/* 分区「全部 N ›」 */
.msec-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  margin-left: 8px;
  padding: 4px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 7px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
}

.msec-all:hover {
  color: var(--ds-color-on-surface);
  border-color: var(--ds-color-on-surface-variant);
}

.ml-section-head.msec-h {
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
}

.ml-section-head .ml-section-count {
  margin-left: auto;
}

/* 单类型汇总行 */
.msumrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 15px;
}

.msumrow-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.msumrow-back:hover {
  color: var(--ds-color-on-surface);
  border-color: var(--ds-color-on-surface-variant);
}

.msumrow-cnt {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

.msumrow-cnt em {
  font-style: normal;
  color: var(--ds-color-on-surface-variant);
  font-weight: 500;
  font-family: var(--ds-typeface-code, ui-monospace, monospace);
  font-size: 11px;
  margin-left: 7px;
}

/* 触底自动加载提示 */
.ml-grid-sentinel {
  width: 100%;
  height: 1px;
  pointer-events: none;
}

.ml-autoload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 22px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

.ml-autoload i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ds-color-on-surface-variant);
  display: inline-block;
}

/* 视频列表视图 */
.ml-vlist {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 10px;
  background: var(--ds-color-surface);
  overflow: hidden;
}

.ml-vlist-head,
.ml-vlist-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 116px 96px 84px 152px 168px;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
}

.ml-vlist-head {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 650;
  background: var(--ds-color-surface-container);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.ml-vlist-head > span:last-child {
  text-align: right;
}

.ml-vlist-row {
  border-bottom: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 70%, transparent);
  font-size: 12px;
  cursor: pointer;
  background: var(--ds-color-surface);
}

.ml-vlist-row:last-child {
  border-bottom: 0;
}

.ml-vlist-row:hover,
.ml-vlist-row--selected {
  background: var(--ds-color-surface-container);
}

.ml-vlist-thumb {
  position: relative;
  width: 64px;
  height: 38px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ds-color-surface-container-high);
}

.ml-vlist-thumb-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ml-vlist-thumb-media--fallback {
  background: linear-gradient(
    135deg,
    var(--ds-color-surface-container-high),
    var(--ds-color-surface-container)
  );
}

.ml-vlist-name {
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ds-color-on-surface);
}

.ml-vlist-meta {
  font-family: var(--ds-typeface-code, ui-monospace, monospace);
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

.ml-vlist-actions {
  display: flex;
  gap: 7px;
  justify-content: flex-end;
}

.ml-vlist .ml-material-add-card {
  grid-column: 1 / -1;
  min-height: 56px;
  margin: 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--ds-color-outline-variant);
}

/* 文档库：AI 全网调研首行 */
.ml-kb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--ds-color-surface-container);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.ml-kb-row-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex: none;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-color-on-surface);
}

.ml-kb-row-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ml-kb-row-title {
  font-size: 12.5px;
  font-weight: 750;
  color: var(--ds-color-on-surface);
}

.ml-kb-row-desc {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.5;
}

.ml-kb-row-btn {
  margin-left: auto;
  flex: none;
  border: 1px solid var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  border-radius: 7px;
  padding: 7px 14px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.ml-kb-row-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ml-kb-row-btn:hover:not(:disabled) {
  filter: brightness(1.06);
}

/* 文档上传行贴底 */
.ml-doc-list > .ml-doc-add-card {
  margin: 0;
  min-height: auto;
  padding: 15px;
  border: none;
  border-top: 1px solid var(--ds-color-outline-variant);
  border-radius: 0;
  justify-content: center;
  gap: 9px;
}

/* 解析失败行：浅红底 + 状态红点 */
.ml-doc-row--bad {
  background: color-mix(in srgb, var(--ds-color-error-container) 72%, var(--ds-color-surface));
}

.ml-doc-row--bad:hover {
  background: color-mix(in srgb, var(--ds-color-error-container) 88%, var(--ds-color-surface));
}

.ml-doc-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ml-doc-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ds-color-on-surface-variant);
  display: inline-block;
  flex: none;
}

.ml-doc-status--failed .ml-doc-status-dot,
.ml-doc-status--bad .ml-doc-status-dot,
.ml-doc-status--fail .ml-doc-status-dot {
  background: var(--ds-color-error);
}

.ml-doc-status--failed,
.ml-doc-status--bad,
.ml-doc-status--fail {
  color: var(--ds-color-on-error-container);
  border-color: color-mix(in srgb, var(--ds-color-error) 28%, var(--ds-color-outline-variant));
  background: color-mix(in srgb, var(--ds-color-error-container) 80%, var(--ds-color-surface));
}
/* MaterialTopFilterBar 本轮增量：插槽 / 细分隔线 / 窄屏 ⌘K
 * 既有 .mtoolbar / .mftabs 等仍由 material-library.css 提供（G4/G2 拥有，本文件不改）。
 * 颜色只用 --ds-* token。
 */

/* 不设 overflow：一旦裁剪，「排序」会被藏进不可视区（点不到），
 * 且 overflow-x:hidden 会把 overflow-y 计算成 auto、切掉状态/时间下拉浮层。
 * 空间不够时由下面两档容器查询让内容自己收窄，而不是隐藏溢出。 */
.mtoolbar {
  container-type: inline-size;
  container-name: mtoolbar;
  flex-wrap: nowrap;
}

.mf-vsep {
  width: 1px;
  height: 18px;
  background: var(--ds-color-outline-variant);
  flex: none;
  margin: 0 4px;
  align-self: center;
}

.mscope-slot {
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
}

.msearch-slot {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 340px;
  display: flex;
  align-items: center;
  position: relative;
}

.msearch-slot__full {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
}

/* 父级塞入的搜索框：吃满槽位宽度，避免撑破控制行 */
.msearch-slot__full > * {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.msearch-slot__cmdk {
  display: none;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
  background: var(--ds-color-surface-container-lowest);
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex: none;
}

.msearch-slot__cmdk:hover {
  color: var(--ds-color-on-surface);
  border-color: var(--ds-color-on-surface-variant);
}

.msearch-slot__kbd {
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 4px;
  padding: 1px 5px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
}

/* chips 在控制行内禁止换行，避免整行折行 */
.mtoolbar .mchips {
  flex-wrap: nowrap;
  overflow: hidden;
  flex: 0 1 auto;
  min-width: 0;
}

/* 第一档 · 容器 ≤ 1120px：搜索收成 ⌘K。
 * 阈值取 1120 而不是 1180：控制行除搜索外的固定内容实测 985px，
 * 容器 1140（窗口 1440）时仍能留出约 155px 可用输入框，不该在那个宽度就收起。 */
@container mtoolbar (max-width: 1120px) {
  .msearch-slot {
    flex: 0 0 auto;
    max-width: none;
    min-width: 0;
  }

  /* 保留 DOM 以便 ⌘K 点击后 focus 到真实 input，但不占布局 */
  .msearch-slot__full {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
  }

  .msearch-slot__cmdk {
    display: inline-flex;
  }
}

/* 第二档 · 容器 ≤ 1060px：视图/排序只留图标与排序取值，产品名进一步收窄。
 * 素材页 4 个 tab 时固定内容 1051px，容器 980 装不下，
 * 不收窄就会把「排序」挤出可视区。aria-label 仍在，可读性不受影响。 */
@container mtoolbar (max-width: 1060px) {
  .mseg-btn-label,
  .msort-label {
    display: none;
  }

  .mscope-slot {
    max-width: 180px;
  }
}
/* ModuleHeader — 排法 1 第一行：标题 + 定位文案 + 右侧主操作
 * 颜色 / 字号一律走 --ds-* token；不写入 material-library.css。
 */

.mhead {
  display: flex;
  align-items: baseline;
  gap: 13px;
  flex-wrap: wrap;
  margin-bottom: 15px;
  min-width: 0;
}

.mhead-main {
  display: flex;
  align-items: baseline;
  gap: 13px;
  flex-wrap: wrap;
  min-width: 0;
}

.mhead-title {
  margin: 0;
  font-family: var(--ds-font-headline-small-family);
  font-size: var(--ds-font-headline-small-size);
  font-weight: 800;
  letter-spacing: var(--ds-font-headline-small-tracking);
  line-height: var(--ds-font-headline-small-line-height);
  color: var(--ds-color-on-surface);
}

.mhead-tag {
  margin: 0;
  font-family: var(--ds-font-body-small-family);
  font-size: var(--ds-font-body-small-size);
  font-weight: var(--ds-font-body-small-weight);
  letter-spacing: var(--ds-font-body-small-tracking);
  line-height: var(--ds-font-body-small-line-height);
  color: var(--ds-color-on-surface-variant);
  min-width: 0;
}

.mhead-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* 作品页 WorksLibrary / ArticleCard / ArticleDetail — 颜色一律 --ds-* token */

/* —— 头部操作按钮 —— */
.w-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--ds-corner-medium);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
}

.w-btn--primary {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-weight: 700;
}

.w-btn:hover:not(:disabled) {
  border-color: var(--ds-color-on-surface);
  color: var(--ds-color-on-surface);
}

.w-btn--primary:hover:not(:disabled) {
  color: var(--ds-color-surface);
}

/* —— 文章卡 —— */
.w-agrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 12px;
}

.w-acard {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 156px;
  padding: 14px 15px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.w-acard.is-selected {
  border-color: var(--ds-color-on-surface);
  box-shadow: 0 0 0 1px var(--ds-color-on-surface);
}

.w-acard-type {
  align-self: flex-start;
  font-family: var(--ds-typeface-code);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--ds-color-on-surface-variant);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 4px;
  padding: 2px 6px;
}

.w-acard-title {
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ds-color-on-surface);
}

.w-acard-summary {
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.w-acard-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 70%, transparent);
  font-size: 10.5px;
  color: var(--ds-color-on-surface-variant);
}

.w-acard-st {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 600;
  flex: none;
}

.w-acard-st i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ds-color-on-surface-variant);
  display: inline-block;
}

.w-acard-st--ok i {
  background: var(--ds-color-on-surface-variant);
}

.w-acard-st--busy i {
  background: var(--ds-color-primary);
}

.w-acard-st--bad {
  color: var(--ds-color-error);
}

.w-acard-st--bad i {
  background: var(--ds-color-error);
}

.w-acard-wc {
  font-family: var(--ds-typeface-code);
  font-size: 10px;
}

.w-acard-date {
  margin-left: auto;
}

/* —— 单类型汇总行 —— */
.w-sumrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 15px;
}

.w-sumrow-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  border-radius: var(--ds-corner-medium);
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 650;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  font: inherit;
}

.w-sumrow-back:hover {
  border-color: var(--ds-color-on-surface);
  color: var(--ds-color-on-surface);
}

.w-sumrow-cnt {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

.w-sumrow-cnt em {
  font-style: normal;
  color: var(--ds-color-on-surface-variant);
  font-weight: 500;
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  margin-left: 7px;
}

/* —— 分区「全部 N ›」 —— */
.w-sec-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--ds-color-on-surface-variant);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  border-radius: 7px;
  padding: 4px 10px;
  cursor: pointer;
  font: inherit;
}

.w-sec-all:hover {
  border-color: var(--ds-color-on-surface);
  color: var(--ds-color-on-surface);
}

/* —— 触底续拉细提示 22px —— */
.w-autoload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 22px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

.w-autoload i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ds-color-on-surface-variant);
  display: inline-block;
}

/* —— 空态 —— */
.w-empty {
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  padding: 34px;
  text-align: center;
  background: var(--ds-color-surface);
}

.w-empty-t {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--ds-color-on-surface);
}

.w-empty-s {
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
}

/* —— 列表视图 —— */
.w-lv {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  overflow: hidden;
}

.w-lv-h,
.w-lv-r {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
}

.w-lv--video .w-lv-h,
.w-lv--video .w-lv-r {
  grid-template-columns: 64px minmax(0, 1fr) 116px 96px 84px 152px 168px;
}

.w-lv--article .w-lv-h,
.w-lv--article .w-lv-r {
  grid-template-columns: minmax(0, 1fr) 116px 92px 92px 152px 168px;
}

.w-lv-h {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 650;
  background: var(--ds-color-surface-container);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.w-lv-r {
  border-bottom: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 70%, transparent);
  font-size: 12px;
  cursor: pointer;
}

.w-lv-r:last-child {
  border-bottom: 0;
}

.w-lv-r.is-selected {
  background: var(--ds-color-surface-container);
}

.w-lv-th {
  width: 64px;
  height: 38px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ds-color-surface-container);
  position: relative;
}

.w-lv-th img,
.w-lv-th video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.w-lv-nm {
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ds-color-on-surface);
}

.w-lv-sub {
  font-size: 10.5px;
  color: var(--ds-color-on-surface-variant);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w-lv-mono {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

.w-lv-acts {
  display: flex;
  gap: 7px;
  justify-content: flex-end;
}

.w-lv-acts button {
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 650;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
  cursor: pointer;
  font: inherit;
}

.w-lv-acts button.primary {
  border-color: var(--ds-color-on-surface);
  color: var(--ds-color-on-surface);
}

.w-lv-acts button.danger {
  color: var(--ds-color-error);
  border-color: color-mix(in srgb, var(--ds-color-error) 35%, var(--ds-color-outline-variant));
}

/* —— 文章详情 —— */
.w-article-detail-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.w-detail-tpill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 650;
}

.w-article-paper {
  max-height: 392px;
  overflow: hidden;
  position: relative;
}

.w-article-paper::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(
    color-mix(in srgb, var(--ds-color-surface) 0%, transparent),
    color-mix(in srgb, var(--ds-color-surface) 96%, transparent)
  );
  pointer-events: none;
}

.w-article-body h4 {
  margin: 0 0 9px;
  font-size: 13.5px;
  font-weight: 780;
}

.w-article-body h5 {
  margin: 17px 0 7px;
  font-size: 12.5px;
  font-weight: 750;
}

.w-article-body p {
  margin: 0 0 11px;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ds-color-on-surface-variant);
}

.w-article-info {
  margin-top: 18px;
  border-top: 1px solid var(--ds-color-outline-variant);
  padding-top: 14px;
}

.w-article-info-k {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 650;
  margin-bottom: 9px;
  letter-spacing: 0.03em;
}

.w-article-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 70%, transparent);
  font-size: 12px;
}

.w-article-kv:last-child {
  border-bottom: 0;
}

.w-article-kv .kk {
  color: var(--ds-color-on-surface-variant);
}

.w-article-kv .vv {
  font-family: var(--ds-typeface-code);
  font-size: 11.5px;
  color: var(--ds-color-on-surface);
}

.w-article-kv .vv.link {
  font-family: inherit;
  color: var(--ds-color-on-surface);
  text-decoration: underline;
  font-size: 12px;
}

.w-article-foot {
  margin-top: 12px;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.6;
}
.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-color-on-surface);
  color: var(--ds-color-surface);
}

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

.dr-entry-btn--ghost {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  border: 1px solid var(--ds-color-outline-variant);
}

.dr-entry-btn--neutral {
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  border: 1px solid var(--ds-color-outline-variant);
}

.dr-entry-btn--quiet {
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  border: 1px solid var(--ds-color-outline-variant);
}

.dr-entry-spin {
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--ds-color-outline-variant);
  border-top-color: var(--ds-color-on-surface);
  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-color-surface-container);
  color: var(--ds-color-on-surface-variant);
}

.dr-status-row--warn {
  background: color-mix(in srgb, var(--ds-color-warning) 8%, transparent);
  color: var(--ds-color-warning);
  border: 1px solid color-mix(in srgb, var(--ds-color-warning) 20%, transparent);
}

.dr-status-row--success {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
}

.dr-status-row__ico {
  width: 16px;
  height: 16px;
  background: var(--ds-color-on-surface-variant);
  color: var(--ds-color-on-primary);
  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: var(--ds-color-warning);
}

.dr-status-row__ico--success {
  background: var(--ds-color-secondary);
}

.dr-status-row a,
.dr-status-row__link {
  color: var(--ds-color-on-surface);
  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: var(--ds-color-warning);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* MatrixProfileHero — 账号 Hero 样式
   复刻自 docs/design/2026-06-23-canvas-workbench-scheme-E.html § .hero 区段
   Off-grid 原型值（gap:34px, gap:28px 等）保持 verbatim；无对应 token 的颜色字面量同理。
*/

/* ===== Hero container ===== */

/* ===== Avatar ===== */
._heroAv_1kut4_9 {
  position: relative;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: var(--ds-color-surface-container-high);
  display: grid;
  place-items: center;
  font-size: 42px;
  font-weight: 800;
  color: var(--ds-color-on-surface);
  flex-shrink: 0;
}

._heroAvImg_1kut4_23 {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

/* Platform emoji badge */
._ic_1kut4_32 {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: 15px;
  border: 3px solid var(--ds-color-surface);
  display: grid;
  place-items: center;
}

._icImg_1kut4_45 {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

/* ===== Mid section ===== */

._heroName_1kut4_55 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

._heroHandle_1kut4_61 {
  font-family: var(--ds-typeface-code);
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
}

/* ===== Status badge ===== */

/* ok variant */

/* warn variant — no matching token; keep verbatim for 1:1 */

/* cool (danger) variant — analogous to warn, uses --ds-danger */

/* ===== Bio ===== */
._heroBio_1kut4_76 {
  margin-top: 11px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ds-color-on-surface-variant);
  max-width: 560px;
}

._heroUpdated_1kut4_84 {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ds-color-on-surface-variant);
}

/* ===== Stats ===== */

/* Placeholder value — subtle color, not a number */
._statPlaceholder_1kut4_94 {
  display: block;
  font-family: var(--ds-typeface-code);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: var(--ds-color-on-surface-variant);
}

/* ===== Right CTAs ===== */

/* ink-on-ink: --ds-text bg, --ds-text-on-ink color */

/* reauth = same ink style as btn-ink in prototype */

/* 解绑账号：低调次级按钮，hover 转 error 提示 */
/* ===== Agent 标记（与侧边栏 Deepege logo 一致）===== */
._agentMark_157td_2 {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

._agentMarkImg_157td_10 {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
}

/* ===== 未托管 · 运营 Agent 邀请 ===== */
/* 本场景面板底：surface-container-low（不动全局 ds-panel） */
.ds-panel._invitePanel_157td_19 {
  background: var(--ds-color-surface-container-low);
}

._inviteTop_157td_23 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 22px 20px;
}

._inviteMain_157td_30 {
  flex: 1;
  min-width: 0;
}

._inviteHead_157td_35 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-lg);
  flex-wrap: wrap;
}

._inviteTitle_157td_43 {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-family: var(--ds-font-title-medium-family);
  font-weight: var(--ds-font-title-medium-weight);
  font-size: var(--ds-font-title-medium-size);
  line-height: var(--ds-font-title-medium-line-height);
  letter-spacing: var(--ds-font-title-medium-tracking);
}

._inviteDesc_157td_53 {
  margin: 7px 0 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 13.5px;
  line-height: 1.6;
}

/* 三步流程 + 主按钮同排 */
._inviteMid_157td_61 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
}

._steps_157td_70 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

._step_157td_70 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
}

._step_157td_70 i {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 50%;
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
}

._stepArr_157td_99 {
  color: var(--ds-color-on-surface-variant);
}

/* ===== 运营中 · Agent 工位 ===== */
._runCard_157td_104 {
  padding: 20px 22px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface-container-low);
}

._runHead_157td_111 {
  display: flex;
  align-items: center;
  gap: 13px;
}

._runId_157td_117 {
  flex: 1;
  min-width: 0;
}

._runTitle_157td_122 {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ds-color-on-surface);
  font-size: 15px;
  font-weight: 800;
}

._runSub_157td_131 {
  overflow: hidden;
  margin-top: 4px;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 配置 + 暂停（右上角并排） */
._actions_157td_141 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* 头部内联 exec 指标行（vA-tree .hc-exec）：右对齐 klabel + mono 值 */
._execRow_157td_149 {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

._execItem_157td_156 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

._execK_157td_163 {
  font-family: var(--ds-typeface-code);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
}

._execV_157td_173 {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
._insightsGrid_1m8zf_1 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sys-space-lg);
  /* 与下方作品区拉开更大间距 */
  margin-bottom: var(--ds-sys-space-lg);
}

/* 特异性高于全局 .ds-panel，本场景才覆盖背景/内边距，不改全局 */
.ds-panel._insightPanel_1m8zf_10 {
  padding: var(--ds-sys-space-lg);
  background: var(--ds-color-surface-container-low);
}

/* 近期表现：三项指标均分面板宽度 */
._metricsGrid_1m8zf_16 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-sys-space-xl);
  margin-top: var(--ds-sys-space-md);
}

/* 相关待确认标题 + 计数 badge：同行垂直居中 */
._insightTitle_1m8zf_24 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-xs);
}

._metricPending_1m8zf_30 {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}
/* WorkGridItem 样式
   复刻 docs/design/2026-06-23-canvas-workbench-scheme-E.html
     § .work / .work-thumb / .work-grad / .work-dur / .work-bottom / .work-title / .work-stats
   .work 盒尺寸走单源 token var(--vcard-aspect)，禁写 9/16 字面量。
*/

._work_1cop4_3 {
  position: relative;
  border-radius: var(--ds-corner-large);
  overflow: hidden;
  background: var(--ds-color-surface-container-high);
  aspect-ratio: var(--vcard-aspect);
  box-shadow: var(--ds-elevation-soft);
  transition:
    transform var(--ds-motion-short-4) var(--ds-easing-standard),
    box-shadow var(--ds-motion-medium-1) var(--ds-easing-standard);
}

._interactive_1cop4_19 {
  cursor: pointer;
}

._interactive_1cop4_19:hover {
  transform: translateY(-3px);
  box-shadow: var(--ds-elevation-1);
}

._workThumb_1cop4_28 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ds-color-surface-container-high);
}

._workGrad_1cop4_36 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 42%);
}

._workDur_1cop4_42 {
  position: absolute;
  right: 8px;
  top: 8px;
  font-family: var(--ds-font-label-small-family);
  font-size: var(--ds-font-label-small-size);
  font-weight: var(--ds-font-label-small-weight);
  letter-spacing: var(--ds-font-label-small-tracking);
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 1px 6px;
}

._workBottom_1cop4_56 {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  color: #fff;
}

._workTitle_1cop4_64 {
  font-family: var(--ds-font-body-small-family);
  font-size: var(--ds-font-body-small-size);
  font-weight: 600;
  line-height: var(--ds-font-body-small-line-height);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

._workStats_1cop4_77 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 5px;
  font-family: var(--ds-typeface-code);
  font-size: var(--ds-font-label-small-size);
  font-weight: 600;
}

._workStat_1cop4_77 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

._workStat_1cop4_77 svg {
  flex: 0 0 auto;
  opacity: 0.9;
}
/* 事件流列表（作品墙「动态」tab 内容）。顶部间距与视频/文章网格对齐（20px）。 */
._list_ti0yu_2 {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  font-family: var(--ds-typeface-plain);
}

._item_ti0yu_9 {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
}

._itemWarning_ti0yu_21 {
  border-color: var(--ds-color-warning);
  background: var(--ds-color-surface-container);
}

._iconBox_ti0yu_26 {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--ds-corner-small);
  background: transparent;
  color: var(--ds-color-on-surface-variant);
}

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

._copy_ti0yu_40 {
  min-width: 0;
}

._copy_ti0yu_40 b {
  display: block;
  overflow: hidden;
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._copy_ti0yu_40 span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 3px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11.5px;
  min-width: 0;
}

._copy_ti0yu_40 strong {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._copy_ti0yu_40 i {
  flex-shrink: 0;
  color: var(--ds-color-on-surface-variant);
  font-style: normal;
}

._reason_ti0yu_79 {
  margin: 3px 0 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.45;
}

._pushMark_ti0yu_86 {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-warning);
  font-style: normal;
  font-weight: 700;
}
/* MatrixWorksGrid 样式
   复刻 docs/design/2026-06-23-canvas-workbench-scheme-E.html
     § .works-head / .works-tabs / .works-tab / .works-grid
   （.work* 卡内样式见 WorkGridItem.module.css）
   Off-grid 原型值（margin-top:34px、gap:16px、minmax(168px,…) 等）保持 verbatim。
*/

._n_l35e9_8 {
  font-family: var(--ds-typeface-code);
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  margin-left: 5px;
}

/* ===== works grid ===== */
._worksGrid_l35e9_16 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

._worksEmpty_l35e9_23 {
  margin-top: 20px;
  padding: 44px 0;
  text-align: center;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
}

._worksError_l35e9_31 {
  color: var(--ds-color-error, );
}

._worksRetry_l35e9_35 {
  margin-top: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
}

._worksRetry_l35e9_35:hover {
  border-color: var(--ds-color-on-surface-variant);
}

@media (max-width: 700px) {
  ._worksGrid_l35e9_16 {
    grid-template-columns: minmax(0, min(100%, 240px));
    justify-content: center;
  }
}
._pick_1t811_1 {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
}

._pickTop_1t811_12 {
  flex-shrink: 0;
  padding: 15px 14px 11px;
}

._seg_1t811_17 {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
}

._segButton_1t811_26 {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 0;
}

._segButton_1t811_26:hover {
  color: var(--ds-color-on-surface);
}

._segButton_1t811_26:focus-visible,
._pitem_1t811_45:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

._segButton_1t811_26._on_1t811_50 {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

._n_1t811_55 {
  margin-left: 4px;
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  opacity: 0.72;
}

._pickList_1t811_62 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px 14px;
}

._pickList_1t811_62::-webkit-scrollbar {
  width: 0;
}

._pitem_1t811_45 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 3px;
  padding: 8px;
  border: 1.5px solid transparent;
  border-radius: var(--ds-corner-medium);
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

._pitem_1t811_45:hover {
  background: var(--ds-color-surface);
}

._pitem_1t811_45._on_1t811_50 {
  background: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface);
}

._thumb_1t811_98 {
  width: 46px;
  height: 60px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 7px;
  background: linear-gradient(145deg, var(--ds-color-surface-container-high), var(--ds-color-outline-variant));
  color: var(--ds-color-on-surface);
  background-size: cover;
  background-position: center;
}

._pitemTx_1t811_112 {
  flex: 1;
  min-width: 0;
}

._pitemTx_1t811_112 b {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

._pitemTx_1t811_112 span {
  display: block;
  margin-top: 4px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}

._placeholder_1t811_134 {
  min-height: 240px;
  display: grid;
  place-items: center;
  padding: var(--ds-sys-space-xl);
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
._pubPage_1np1q_1 {
  position: fixed;
  top: 0;
  left: var(--app-rail-w, 248px);
  right: 0;
  bottom: 0;
  /* 盖住底层 MatrixAccountSidebar(z1000) 与 chat-handle(z1001)；对话坞(z1000)靠下方让位不重叠、
     输入框(z1100)更高浮其上。插件引导 ExtensionGuideModal 须显式 zIndex>1100（见
     EXTENSION_GUIDE_MODAL_Z_INDEX），否则引导会被本层压住导致整页点不了。 */
  z-index: 1005;
  display: flex;
  flex-direction: column;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
  animation: _ppFade_1np1q_1 0.22s ease;
  transition: right 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes _ppFade_1np1q_1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

._ppHead_1np1q_30 {
  flex-shrink: 0;
  height: 60px;
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-lg);
  padding: 0 22px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}

._ppBack_1np1q_41 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

._ppBack_1np1q_41:hover {
  color: var(--ds-color-on-surface);
}

._ppBack_1np1q_41:focus-visible,
._ppX_1np1q_61:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

._ppHtitle_1np1q_66 {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 800;
}

._ppTarget_1np1q_72 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(360px, 44vw);
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

._targetAvatar_1np1q_84 {
  position: relative;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ds-color-surface-container-high);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

._targetAvatarImg_1np1q_98 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

._targetText_1np1q_106 {
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}

._targetText_1np1q_106 b,
._targetText_1np1q_106 span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._targetText_1np1q_106 b {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

._targetText_1np1q_106 span {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  line-height: 1.2;
}

._targetText_1np1q_106 span::before {
  content: '· ';
  color: var(--ds-color-outline);
}

._ppX_1np1q_61 {
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: 0;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  display: grid;
  place-items: center;
}

._ppX_1np1q_61:hover {
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface);
}

._ppBody_1np1q_156 {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--ds-color-surface);
}

._ppSplit_1np1q_163 {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
}

._detailPane_1np1q_170 {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

._detailPane_1np1q_170::-webkit-scrollbar {
  width: 0;
}

._detailEmpty_1np1q_180 {
  height: 100%;
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: var(--ds-sys-space-xxl);
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

._ppFoot_1np1q_192 {
  flex-shrink: 0;
  min-height: 61px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-sys-space-md);
  padding: 14px 24px;
  border-top: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}

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

._saveError_1np1q_215 {
  max-width: 360px;
  color: #be123c;
  font-size: 12px;
  font-weight: 700;
}

._publishButton_1np1q_222,
._primaryAction_1np1q_223 {
  min-height: 36px;
  border: 0;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 0 16px;
}

._publishButton_1np1q_222:hover:not(:disabled),
._primaryAction_1np1q_223:hover {
  box-shadow: var(--ds-elevation-4);
}

._publishButton_1np1q_222:focus-visible,
._primaryAction_1np1q_223:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

._publishButton_1np1q_222:disabled {
  background: var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  cursor: not-allowed;
}

._ppCenter_1np1q_253 {
  height: 100%;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--ds-sys-space-xxl);
  text-align: center;
}

._ppCenter_1np1q_253 h2 {
  margin: 16px 0 0;
  color: var(--ds-color-on-surface);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: 0;
}

._ppCenter_1np1q_253 p {
  max-width: 420px;
  margin: 8px 0 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.7;
}

._primaryAction_1np1q_223 {
  margin-top: 22px;
}

._succMark_1np1q_284,
._errorMark_1np1q_285 {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

._succMark_1np1q_284 {
  background: rgba(20, 120, 74, 0.1);
  color: #14784a;
}

._errorMark_1np1q_285 {
  background: rgba(190, 18, 60, 0.1);
  color: #be123c;
}

._spin_1np1q_303 {
  width: 58px;
  height: 58px;
  border: 3px solid var(--ds-color-outline-variant);
  border-top-color: var(--ds-color-on-surface);
  border-radius: 50%;
  animation: _ppSpin_1np1q_1 0.9s linear infinite;
}

._progressNote_1np1q_312 {
  margin-top: 14px;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

@keyframes _ppSpin_1np1q_1 {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 720px) {
  ._ppHead_1np1q_30 {
    gap: var(--ds-sys-space-md);
    padding: 0 var(--ds-sys-space-lg);
  }

  ._ppTarget_1np1q_72 {
    max-width: 38vw;
  }

  ._ppHtitle_1np1q_66 {
    font-size: 14px;
  }

  ._ppSplit_1np1q_163 {
    grid-template-columns: 1fr;
  }
}
._root_4hw2h_1 {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
  font-family: var(--ds-typeface-plain);
}

._pick_4hw2h_11 {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
}

._seg_4hw2h_19 {
  display: flex;
  gap: 2px;
  margin: 15px 14px 0;
  padding: 3px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
}

._segButton_4hw2h_29 {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 0;
}

._segButton_4hw2h_29:hover {
  color: var(--ds-color-on-surface);
}

._segButton_4hw2h_29:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

._segButton_4hw2h_29 span {
  margin-left: 4px;
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  opacity: 0.72;
}

._segOn_4hw2h_59 {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

._pickTop_4hw2h_64 {
  flex-shrink: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--ds-sys-space-md);
  padding: 18px 14px 12px;
}

._eyebrow_4hw2h_73 {
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 800;
}

._count_4hw2h_79 {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 600;
}

._list_4hw2h_85 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px 14px;
}

._list_4hw2h_85::-webkit-scrollbar {
  width: 0;
}

._item_4hw2h_96 {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 3px;
  padding: 8px;
  border: 1.5px solid transparent;
  border-radius: var(--ds-corner-medium);
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

._item_4hw2h_96:hover,
._item_4hw2h_96._on_4hw2h_114 {
  background: var(--ds-color-surface);
}

._item_4hw2h_96._on_4hw2h_114 {
  border-color: var(--ds-color-on-surface);
}

._item_4hw2h_96:focus-visible,
._publish_4hw2h_123:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

._thumb_4hw2h_128 {
  width: 46px;
  height: 60px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 850;
}

._itemText_4hw2h_141 {
  flex: 1;
  min-width: 0;
}

._itemText_4hw2h_141 b {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--ds-color-on-surface);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
}

._itemText_4hw2h_141 span {
  display: block;
  margin-top: 4px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}

._empty_4hw2h_164 {
  min-height: 240px;
  display: grid;
  place-items: center;
  padding: var(--ds-sys-space-xl);
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

._detail_4hw2h_175 {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

._detail_4hw2h_175::-webkit-scrollbar {
  width: 9px;
}

._detail_4hw2h_175::-webkit-scrollbar-thumb {
  border: 2px solid var(--ds-color-surface);
  border-radius: 4px;
  background: var(--ds-color-outline-variant);
}

._inner_4hw2h_191 {
  max-width: 820px;
  margin: 0 auto;
  padding: 26px 32px 36px;
}

._edit_4hw2h_197 {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: var(--ds-sys-space-xxl);
}

._preview_4hw2h_203 {
  min-width: 0;
}

._cover_4hw2h_207 {
  aspect-ratio: 9 / 16;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  font-weight: 750;
}

._coverLabel_4hw2h_219 {
  margin-top: 13px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 700;
}

._coverAdd_4hw2h_226 {
  width: 72px;
  min-height: 32px;
  display: grid;
  place-items: center;
  margin-top: 9px;
  border: 1.5px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 650;
}

._form_4hw2h_239 {
  min-width: 0;
}

._block_4hw2h_243 {
  margin-bottom: 18px;
}

._block_4hw2h_243 label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-md);
  margin-bottom: 8px;
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 700;
}

._block_4hw2h_243 label span {
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  font-weight: 500;
}

._input_4hw2h_265,
._textarea_4hw2h_266 {
  width: 100%;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 9px 11px;
  outline: none;
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 13px;
}

._textarea_4hw2h_266 {
  min-height: 78px;
  resize: none;
}

._input_4hw2h_265:focus {
  border-color: var(--ds-color-on-surface);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.06);
}

._input_4hw2h_265[readonly],
._textarea_4hw2h_266:disabled {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
}

._group_4hw2h_293 {
  margin-top: 6px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  padding: 2px 14px;
}

._opt_4hw2h_300 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-md);
  padding: 12px 0;
}

._opt_4hw2h_300 + ._opt_4hw2h_300 {
  border-top: 1px solid var(--ds-color-outline-variant);
}

._opt_4hw2h_300 b {
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 650;
}

._opt_4hw2h_300 span {
  display: block;
  margin-top: 1px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}

._opt_4hw2h_300 em {
  flex-shrink: 0;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
  padding: 2px 8px;
}

._progress_4hw2h_336 {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-sys-space-md);
  margin-top: 18px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface-container);
  padding: 14px;
}

._progressIcon_4hw2h_347 {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

._progressText_4hw2h_358 {
  min-width: 0;
}

._progressText_4hw2h_358 b {
  display: block;
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 800;
}

._progressText_4hw2h_358 span,
._progressText_4hw2h_358 a {
  display: block;
  margin-top: 3px;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.5;
}

._progressText_4hw2h_358 a {
  color: var(--ds-color-on-surface);
  font-weight: 700;
  text-decoration: none;
}

._error_4hw2h_384 {
  margin-top: 10px;
  color: var(--ds-color-error);
  font-size: 12px;
  line-height: 1.5;
}

._publish_4hw2h_123 {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  border: 0;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 0 16px;
}

._publish_4hw2h_123:hover:not(:disabled) {
  box-shadow: var(--ds-elevation-4);
}

._publish_4hw2h_123:disabled {
  background: var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  cursor: not-allowed;
}

._detailEmpty_4hw2h_418 {
  height: 100%;
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: var(--ds-sys-space-xxl);
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 880px) {
  ._root_4hw2h_1 {
    grid-template-columns: 1fr;
  }

  ._pick_4hw2h_11 {
    max-height: 280px;
    border-right: 0;
    border-bottom: 1px solid var(--ds-color-outline-variant);
  }

  ._inner_4hw2h_191 {
    padding: var(--ds-sys-space-xl);
  }

  ._edit_4hw2h_197 {
    grid-template-columns: 1fr;
  }

  ._preview_4hw2h_203 {
    max-width: 248px;
  }
}
._picker_1x181_1 {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
}

._head_1x181_12 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-md);
  padding: 15px 14px 11px;
}

._head_1x181_12 h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

._head_1x181_12 span {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

._list_1x181_34 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px 14px;
}

._list_1x181_34::-webkit-scrollbar {
  width: 0;
}

._row_1x181_45 {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  margin-bottom: 3px;
  padding: 9px 10px;
  border: 1.5px solid transparent;
  border-radius: var(--ds-corner-medium);
  background: none;
  cursor: pointer;
}

._row_1x181_45:hover {
  background: var(--ds-color-surface);
}

._row_1x181_45:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

._row_1x181_45[data-selected='true'] {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
}

._avatar_1x181_72 {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface);
  font-size: 14px;
  font-weight: 800;
}

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

._copy_1x181_84 b,
._copy_1x181_84 span,
._copy_1x181_84 i {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._copy_1x181_84 b {
  font-size: 13px;
  font-weight: 800;
}

._copy_1x181_84 span {
  color: var(--ds-color-on-surface-variant);
  font-size: 11.5px;
  font-weight: 600;
}

._copy_1x181_84 i {
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 10.5px;
  font-style: normal;
}

._check_1x181_117 {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
  font-size: 12px;
  font-weight: 900;
}

._row_1x181_45[data-selected='true'] ._check_1x181_117 {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
}
._view_nylef_1 {
  height: 100%;
  min-height: 420px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
}

._header_nylef_11 {
  padding: var(--ds-sys-space-xxl) var(--ds-sys-space-xxl) var(--ds-sys-space-xl);
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}

._eyebrow_nylef_17 {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 800;
}

._header_nylef_11 h2 {
  margin: var(--ds-sys-space-lg) 0 0;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: 0;
}

._header_nylef_11 p {
  max-width: 480px;
  margin: var(--ds-sys-space-sm) 0 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.7;
}

._queue_nylef_45 {
  min-height: 0;
  overflow-y: auto;
  padding: var(--ds-sys-space-xl) var(--ds-sys-space-xxl);
}

._queue_nylef_45::-webkit-scrollbar {
  width: 0;
}

._row_nylef_55 {
  display: grid;
  grid-template-columns: 44px 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-sys-space-md);
  margin-bottom: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-lg);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface-container);
}

._row_nylef_55[data-status='current'] {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
}

._row_nylef_55[data-status='done'] {
  border-color: color-mix(in srgb, var(--ds-color-secondary) 36%, var(--ds-color-on-surface-variant));
}

._row_nylef_55[data-status='error'] {
  border-color: color-mix(in srgb, var(--ds-color-error) 46%, var(--ds-color-on-surface-variant));
}

._order_nylef_80 {
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 12px;
  font-weight: 800;
}

._avatar_nylef_87 {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container-high);
  font-size: 15px;
  font-weight: 900;
}

._copy_nylef_98 {
  min-width: 0;
  display: grid;
  gap: var(--ds-sys-space-xs);
}

._copy_nylef_98 b,
._copy_nylef_98 span,
._copy_nylef_98 i,
._copy_nylef_98 p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._copy_nylef_98 b {
  font-size: 14px;
  font-weight: 850;
}

._copy_nylef_98 span {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 650;
}

._copy_nylef_98 i {
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  font-style: normal;
}

._copy_nylef_98 p {
  margin: var(--ds-sys-space-xs) 0 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.4;
}

._row_nylef_55[data-status='current'] ._copy_nylef_98 p {
  color: var(--ds-color-on-surface);
  font-weight: 700;
}

._row_nylef_55[data-status='error'] ._copy_nylef_98 p {
  color: var(--ds-color-error);
  font-weight: 700;
}

._status_nylef_148 {
  min-width: 78px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-sys-space-sm);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 800;
}

._statusMark_nylef_159 {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 900;
}

._statusMark_nylef_159[data-status='done'] {
  border-color: var(--ds-color-secondary);
  background: var(--ds-color-secondary);
  color: var(--ds-color-on-surface);
}

._statusMark_nylef_159[data-status='current'] {
  border-color: var(--ds-color-on-surface);
  color: var(--ds-color-on-surface);
}

._statusMark_nylef_159[data-status='error'] {
  border-color: var(--ds-color-error);
  background: var(--ds-color-error);
  color: var(--ds-color-on-surface);
}

._spinner_nylef_189 {
  width: 12px;
  height: 12px;
  border: 2px solid var(--ds-color-outline-variant);
  border-top-color: var(--ds-color-on-surface);
  border-radius: var(--ds-corner-full);
  animation: _bevSpin_nylef_1 0.85s linear infinite;
}

._footer_nylef_198 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-xl);
  padding: var(--ds-sys-space-lg) var(--ds-sys-space-xxl);
  border-top: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}

._progressBlock_nylef_207 {
  flex: 1;
  min-width: 0;
}

._progressMeta_nylef_212 {
  display: flex;
  align-items: baseline;
  gap: var(--ds-sys-space-sm);
  margin-bottom: var(--ds-sys-space-sm);
}

._progressMeta_nylef_212 span {
  font-family: var(--ds-typeface-code);
  font-size: 14px;
  font-weight: 850;
}

._progressMeta_nylef_212 b {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 750;
}

._progressTrack_nylef_231 {
  height: 8px;
  overflow: hidden;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container-high);
}

._progressTrack_nylef_231 span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ds-color-on-surface);
  transition: width 0.2s ease;
}

._primaryAction_nylef_246,
._secondaryAction_nylef_247 {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 var(--ds-sys-space-lg);
  border-radius: var(--ds-corner-small);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

._primaryAction_nylef_246 {
  border: 0;
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

._secondaryAction_nylef_247 {
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
}

._primaryAction_nylef_246:hover {
  box-shadow: var(--ds-elevation-4);
}

._secondaryAction_nylef_247:hover {
  border-color: var(--ds-color-on-surface);
  color: var(--ds-color-on-surface);
}

._primaryAction_nylef_246:focus-visible,
._secondaryAction_nylef_247:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

@keyframes _bevSpin_nylef_1 {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 720px) {
  ._header_nylef_11,
  ._queue_nylef_45,
  ._footer_nylef_198 {
    padding-left: var(--ds-sys-space-lg);
    padding-right: var(--ds-sys-space-lg);
  }

  ._row_nylef_55 {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  ._order_nylef_80 {
    display: none;
  }

  ._avatar_nylef_87 {
    width: 36px;
    height: 36px;
  }

  ._status_nylef_148 {
    grid-column: 2;
    justify-content: flex-start;
  }

  ._footer_nylef_198 {
    align-items: stretch;
    flex-direction: column;
  }

  ._primaryAction_nylef_246,
  ._secondaryAction_nylef_247 {
    width: 100%;
  }
}
._page_xs0k5_1 {
  position: fixed;
  top: 0;
  left: var(--app-rail-w, 248px);
  right: 0;
  bottom: 0;
  /* 全屏分发页必须盖住：侧栏/对话坞(~1000)、指令栏 scrim(999)、
     以及 AgentInputBar 本体(1100)。画布视频点「发布」进入本页时，
     生成完成的 card_done 岛（「视频已生成，选择下一步」）不能再压住
     底栏「发布到 N 个账号」。插件引导 ExtensionGuideModal 仍为 2100。 */
  z-index: 1200;
  display: flex;
  flex-direction: column;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
  animation: _bdFade_xs0k5_1 0.22s ease;
}

._head_xs0k5_20 {
  flex-shrink: 0;
  height: 60px;
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-lg);
  padding: 0 22px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}

._back_xs0k5_31 {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
}

._back_xs0k5_31:hover {
  color: var(--ds-color-on-surface);
}

._back_xs0k5_31:focus-visible,
._close_xs0k5_51:focus-visible,
._publishButton_xs0k5_52:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

._title_xs0k5_57 {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 850;
}

._meta_xs0k5_63 {
  min-width: 0;
  overflow: hidden;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._close_xs0k5_51 {
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: 0;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  display: grid;
  place-items: center;
}

._close_xs0k5_51:hover {
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface);
}

._body_xs0k5_91 {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--ds-color-surface);
}

._split_xs0k5_98 {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 292px 300px minmax(0, 1fr);
}

._detailPane_xs0k5_105 {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

._detailPane_xs0k5_105::-webkit-scrollbar {
  width: 0;
}

._detailEmpty_xs0k5_115 {
  height: 100%;
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: var(--ds-sys-space-xxl);
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

._foot_xs0k5_127 {
  flex-shrink: 0;
  min-height: 61px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-sys-space-md);
  padding: 14px 24px;
  border-top: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}

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

._saveError_xs0k5_150 {
  max-width: 360px;
  color: #be123c;
  font-size: 12px;
  font-weight: 700;
}

._publishButton_xs0k5_52 {
  min-height: 36px;
  padding: 0 var(--ds-sys-space-lg);
  border: 0;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

._publishButton_xs0k5_52:hover:not(:disabled) {
  box-shadow: var(--ds-elevation-4);
}

._publishButton_xs0k5_52:disabled {
  background: var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  cursor: not-allowed;
}

@keyframes _bdFade_xs0k5_1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 980px) {
  ._split_xs0k5_98 {
    grid-template-columns: minmax(0, 1fr);
  }

  ._foot_xs0k5_127 {
    align-items: stretch;
    flex-direction: column;
  }

  ._publishButton_xs0k5_52 {
    width: 100%;
  }
}
/*
 * PublishAccountHomePage 全屏发布页结构样式。
 * 组件已迁移到 ds 设计语言；本文件只保留页面级结构类（布局/滚动/背景分层）。
 */

/* 发布页根容器：flex 列，内部各区独立滚动（外层容器 overflow:hidden，本根必须自持高度） */
._publishPage_1pr4v_7 {
  grid-column: 1 / -1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* 账号详情与 /publish 发布页对齐：纯 surface 底，内容区扁平无卡片分层 */
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

/* 账号详情区块容器：扁平区块（无卡片包裹），区块间统一留白 */
._accountDetailSections_1pr4v_19 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-xxl);
}

/* 账号详情列布局：标题区固定于滚动区外，内容区独立滚动 */
._detailBody_1pr4v_26 {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 详情页标题区已在滚动区外，profile 顶部留白收窄，避免双层间距 */
._detailBody_1pr4v_26 ._profile_1pr4v_35 {
  padding-top: var(--ds-sys-space-lg);
}

/* 方向 A：无侧栏，全宽内容滚动 */
._matrixBody_1pr4v_40 {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* 账号列表加载中 / 失败：不得渲染授权空态 */
._accountsState_1pr4v_47 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-xxxl) var(--ds-sys-space-xxl);
  color: var(--ds-color-on-surface-variant);
  font-size: var(--ds-font-body-medium-size);
}

._accountsStateMsg_1pr4v_60 {
  margin: 0;
  max-width: 420px;
  text-align: center;
  color: var(--ds-color-on-surface);
  line-height: 1.5;
}

._profileScroll_1pr4v_68 {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

/* profile 包裹：全宽铺满（design 右栏填满 / no max-width empty gutter）。 */
._profile_1pr4v_35 {
  width: 100%;
  max-width: none;
  padding: var(--ds-sys-space-xxxl) var(--ds-sys-space-xxl) 60px;
  box-sizing: border-box;
}

/* 页面头部穿透 .profile 内边距：顶到页面顶部、左右铺满（对齐 /data 标题区负 margin 方案） */
._profile_1pr4v_35 .ds-page-header {
  margin: calc(-1 * var(--ds-sys-space-xxxl)) calc(-1 * var(--ds-sys-space-xxl))
    var(--ds-sys-space-lg);
  /* 滚动时标题区固定：相对 profileScroll 吸顶 */
  position: sticky;
  top: 0;
  z-index: 10;
}

/* 亮色表面分层（仅 light）：页面底与 /publish 发布页一致 */
html:not([data-theme='dark']) ._publishPage_1pr4v_7 {
  background: var(--ds-color-surface);
}

html:not([data-theme='dark']) ._profile_1pr4v_35 {
  background: var(--ds-color-surface);
}

@media (max-width: 700px) {
  ._publishPage_1pr4v_7 {
    overflow-y: auto;
  }

  ._matrixBody_1pr4v_40 {
    flex: 0 0 auto;
    min-height: auto;
    flex-direction: column;
  }

  ._profileScroll_1pr4v_68 {
    flex: 0 0 auto;
    overflow: visible;
  }

  ._profile_1pr4v_35 {
    padding: var(--ds-sys-space-lg) 14px 48px;
  }
}
/* InstallOnboarding.module.css — 全屏工作台 ①②（仅 0 账号 + 未安装） */

._stage_1qlvw_3 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 0 40px;
  background: var(--ds-color-surface);
}

._masthead_1qlvw_15 {
  text-align: center;
  max-width: 640px;
}

._kicker_1qlvw_20 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-color-outline);
  margin-bottom: 16px;
}

._kicker_1qlvw_20 s {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ds-color-on-surface);
  display: block;
}

._masthead_1qlvw_15 h1 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.14;
  margin: 0 0 12px;
  color: var(--ds-color-on-surface);
}

._masthead_1qlvw_15 p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ds-color-on-surface-variant);
  margin: 0;
}

._card_1qlvw_57 {
  width: 100%;
  max-width: 720px;
}

._pane_1qlvw_62[data-anim='install-landing'] { animation: _pfadeInstallLanding_1qlvw_1 0.28s ease; }
._pane_1qlvw_62[data-anim='install-placing'] { animation: _pfadeInstallPlacing_1qlvw_1 0.28s ease; }

@keyframes _pfadeInstallLanding_1qlvw_1 {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes _pfadeInstallPlacing_1qlvw_1 {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  ._pane_1qlvw_62 { animation: none !important; }
  ._spinner_1qlvw_76 { animation: none; }
}

._benefits_1qlvw_79 {
  list-style: none;
  margin: 2px auto 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: fit-content;
}

._benefits_1qlvw_79 li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ds-color-on-surface);
  text-align: left;
}

._benefits_1qlvw_79 strong {
  font-weight: 600;
}

._ci_1qlvw_103 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: 0 0 18px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-color-surface-container-low);
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
}

._ci_1qlvw_103 svg {
  width: 10px;
  height: 10px;
}

._acts_1qlvw_122 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

._subacts_1qlvw_130 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
}

._ctaPrimary_1qlvw_139 {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  border: 0;
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-size: 13.5px;
  font-weight: 600;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--ds-corner-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;
}

._ctaPrimary_1qlvw_139:hover:not(:disabled) {
  box-shadow: 0 12px 24px -12px rgba(24, 24, 27, 0.5);
  transform: translateY(-1px);
}

._ctaPrimary_1qlvw_139:disabled {
  opacity: 0.6;
  cursor: default;
}

._ctaPrimary_1qlvw_139 svg {
  width: 15px;
  height: 15px;
}

._ctaGhost_1qlvw_173 {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font-size: 12.5px;
  font-weight: 500;
  border: 0;
  padding: 6px 2px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

._ctaGhost_1qlvw_173:hover {
  color: var(--ds-color-on-surface);
}

._ctaGhost_1qlvw_173 svg {
  width: 13px;
  height: 13px;
}
/* StepProgress.module.css — 移植自 docs/design/2026-06-25-publish-unauth-V2-refined.html .stepbar（token 换成真实名） */
._stepbar_1izgm_1 { display: flex; width: 396px; }
._sbstep_1izgm_3 { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
._sbnum_1izgm_4 {
  width: 27px; height: 27px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-family: var(--ds-typeface-code);
  background: var(--ds-color-surface); border: 1.5px solid var(--ds-color-on-surface-variant); color: var(--ds-color-on-surface-variant); z-index: 2;
}
._sbnum_1izgm_4 svg { width: 13px; height: 13px; }
._sblabel_1izgm_11 { font-size: 12px; font-weight: 600; color: var(--ds-color-on-surface-variant); white-space: nowrap; }
._sbbar_1izgm_12 { position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--ds-color-outline-variant); z-index: 1; }
._sbstep_1izgm_3._done_1izgm_13 ._sbnum_1izgm_4 { background: var(--ds-color-on-surface); border-color: var(--ds-color-on-surface); color: var(--ds-color-surface); }
._sbstep_1izgm_3._done_1izgm_13 ._sbbar_1izgm_12 { background: var(--ds-color-on-surface); }
._sbstep_1izgm_3._done_1izgm_13 ._sblabel_1izgm_11 { color: var(--ds-color-on-surface-variant); }
._sbstep_1izgm_3._current_1izgm_16 ._sbnum_1izgm_4 { background: var(--ds-color-on-surface); border-color: var(--ds-color-on-surface); color: var(--ds-color-surface); box-shadow: 0 0 0 4px rgba(24, 24, 27, 0.08); }
._sbstep_1izgm_3._current_1izgm_16 ._sblabel_1izgm_11 { color: var(--ds-color-on-surface); }
/* DemoReel.module.css — 移植自 install-wizard-flow.html .videoshow（lines 111-176），token 换真实名 */

/* hero：着陆屏紧凑预览 166px（权威 HTML 主推） */
._hero_18go6_4 {
  position: relative;
  height: 166px;
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container-low);
  border: 1px solid var(--ds-color-outline-variant);
  overflow: hidden;
  margin-bottom: 18px;
}
._hwin_18go6_13 {
  position: absolute;
  inset: 14px 14px 0;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium) var(--ds-corner-medium) 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 28px -20px rgba(24, 24, 27, 0.4);
}
._hbar_18go6_23 {
  height: 26px;
  flex: 0 0 26px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
}
._hbar_18go6_23 i { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-color-surface-container-high); }
._hbar_18go6_23 b { font-size: 9.5px; font-weight: 600; color: var(--ds-color-outline); margin-left: 7px; font-family: var(--ds-typeface-code); }
._hbody_18go6_34 { flex: 1; padding: 11px 12px 0; display: flex; flex-direction: column; gap: 9px; min-height: 0; }
._hsgrid_18go6_35 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
._hstile_18go6_36 {
  background: var(--ds-color-surface-container-low);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 7px;
  padding: 6px 8px;
}
._hsv_18go6_42 { font-family: var(--ds-typeface-code); font-size: 12.5px; font-weight: 600; letter-spacing: -0.02em; color: var(--ds-color-on-surface); }
._hsl_18go6_43 { font-size: 9px; color: var(--ds-color-on-surface-variant); margin-top: 1px; }
._hchart_18go6_44 { flex: 1; min-height: 50px; display: flex; align-items: flex-end; gap: 6px; }
._hchart_18go6_44 div { flex: 1; background: var(--ds-color-surface-container-high); border-radius: 3px 3px 0 0; }
._htag_18go6_46 {
  position: absolute;
  top: 11px;
  right: 11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline);
  border-radius: var(--ds-corner-full);
  padding: 4px 9px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
  z-index: 2;
}
._htag_18go6_46 s {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ds-color-on-surface);
  display: block;
}

._videoshow_18go6_1 { position: absolute; inset: 0; }
._demo_18go6_71 { position: absolute; inset: 0; display: flex; flex-direction: column; }
._dwin_18go6_72 { flex: 1; margin: 24px 24px 0; background: var(--ds-color-surface); border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-large) var(--ds-corner-large) 0 0; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 14px 36px -22px rgba(24, 24, 27, 0.28); }
._dbar_18go6_73 { height: 34px; flex: 0 0 34px; border-bottom: 1px solid var(--ds-color-outline-variant); display: flex; align-items: center; gap: 6px; padding: 0 13px; }
._dbar_18go6_73 i { width: 9px; height: 9px; border-radius: 50%; background: var(--ds-color-surface-container-high); }
._dbar_18go6_73 b { font-size: 11px; font-weight: 600; color: var(--ds-color-on-surface-variant); margin-left: 8px; font-family: var(--ds-typeface-code); }
._dstage_18go6_76 { flex: 1; position: relative; background: var(--ds-color-surface-container); }
._dscene_18go6_77 { position: absolute; inset: 0; opacity: 0; padding: 20px; }
._s1_18go6_78 { animation: _fadeS1_18go6_1 12s linear infinite; }
._s2_18go6_79 { animation: _fadeS2_18go6_1 12s linear infinite; }
._s3_18go6_80 { animation: _fadeS3_18go6_1 12s linear infinite; }
@keyframes _fadeS1_18go6_1 { 0% { opacity: 1 } 28% { opacity: 1 } 33% { opacity: 0 } 94% { opacity: 0 } 100% { opacity: 1 } }
@keyframes _fadeS2_18go6_1 { 0% { opacity: 0 } 30% { opacity: 0 } 35% { opacity: 1 } 61% { opacity: 1 } 66% { opacity: 0 } 100% { opacity: 0 } }
@keyframes _fadeS3_18go6_1 { 0% { opacity: 0 } 63% { opacity: 0 } 68% { opacity: 1 } 94% { opacity: 1 } 99% { opacity: 0 } 100% { opacity: 0 } }
._s1b_18go6_84 { height: 100%; display: flex; gap: 16px; }
._acol_18go6_85 { width: 46%; background: var(--ds-color-surface); border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-medium); padding: 12px 11px; display: flex; flex-direction: column; gap: 10px; }
._ct_18go6_86 { font-size: 11px; font-weight: 700; color: var(--ds-color-on-surface-variant); display: flex; justify-content: space-between; }
._ct_18go6_86 b { font-family: var(--ds-typeface-code); color: var(--ds-color-on-surface); }
._arow_18go6_88 { display: flex; align-items: center; gap: 9px; }
._av_18go6_89 { width: 26px; height: 26px; border-radius: 8px; background: var(--ds-color-surface-container-high); flex: 0 0 26px; }
._al_18go6_90 { flex: 1; display: flex; flex-direction: column; gap: 4px; }
._al_18go6_90 s { height: 7px; border-radius: 4px; background: var(--ds-color-surface-container-high); display: block; }
._dot_18go6_92 { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-color-secondary); flex: 0 0 7px; }
._s1side_18go6_93 { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; }
._okpill_18go6_94 { display: inline-flex; align-items: center; gap: 8px; background: var(--ds-color-surface); border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-full); padding: 9px 16px; font-size: 13px; font-weight: 600; }
._ok_18go6_94 { width: 18px; height: 18px; border-radius: 50%; background: var(--ds-color-secondary); color: #fff; display: flex; align-items: center; justify-content: center; }
._ok_18go6_94 svg { width: 11px; height: 11px; }
._s1cap_18go6_97 { font-size: 12px; color: var(--ds-color-on-surface-variant); max-width: 150px; line-height: 1.5; }
._s2b_18go6_98 { height: 100%; display: flex; flex-direction: column; gap: 16px; }
._ccard_18go6_99 { background: var(--ds-color-surface); border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-medium); padding: 12px; display: flex; gap: 12px; align-items: center; }
._thumb_18go6_100 { width: 64px; height: 42px; border-radius: 8px; background: linear-gradient(135deg, #d6d3d1, #a8a29e); flex: 0 0 64px; }
._cl_18go6_101 { flex: 1; display: flex; flex-direction: column; gap: 6px; }
._cl_18go6_101 s { height: 8px; border-radius: 5px; background: var(--ds-color-surface-container-high); display: block; }
._fan_18go6_103 { flex: 1; display: flex; flex-direction: column; gap: 9px; justify-content: center; }
._pdist_18go6_104 { display: flex; align-items: center; gap: 10px; background: var(--ds-color-surface); border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-medium); padding: 9px 13px; }
._pd_18go6_104 { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--ds-color-outline-variant); }
._pn_18go6_106 { font-size: 12.5px; font-weight: 500; flex: 1; }
._ck_18go6_107 { width: 18px; height: 18px; border-radius: 50%; background: var(--ds-color-on-surface); color: var(--ds-color-surface); display: flex; align-items: center; justify-content: center; }
._ck_18go6_107 svg { width: 10px; height: 10px; }
._s3b_18go6_109 { height: 100%; display: flex; flex-direction: column; gap: 13px; }
._sgrid_18go6_110 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
._stile_18go6_111 { background: var(--ds-color-surface); border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-medium); padding: 11px 12px; }
._sv_18go6_112 { font-family: var(--ds-typeface-code); font-size: 18px; font-weight: 600; color: var(--ds-color-on-surface-variant); }
._hi_18go6_113 ._sv_18go6_112 { color: var(--ds-color-on-surface); }
._sl_18go6_114 { font-size: 10.5px; color: var(--ds-color-on-surface-variant); margin-top: 2px; }
._chart_18go6_115 { flex: 1; background: var(--ds-color-surface); border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-medium); padding: 14px; display: flex; align-items: flex-end; gap: 10px; }
._bar_18go6_116 { flex: 1; background: var(--ds-color-surface-container-high); border-radius: 4px 4px 0 0; }
._bar_18go6_116:nth-child(1) { height: 40%; }
._bar_18go6_116:nth-child(2) { height: 62%; }
._bar_18go6_116:nth-child(3) { height: 48%; }
._bar_18go6_116:nth-child(4) { height: 80%; background: var(--ds-color-on-surface); }
._bar_18go6_116:nth-child(5) { height: 55%; }
._bar_18go6_116:nth-child(6) { height: 70%; }
._dcap_18go6_123 { flex: 0 0 auto; padding: 14px 24px 18px; background: var(--ds-color-surface); }
._dchaps_18go6_124 { display: flex; gap: 18px; margin-bottom: 11px; }
._dchaps_18go6_124 span { font-size: 12px; font-weight: 600; color: var(--ds-color-on-surface-variant); }
._c1_18go6_126 { animation: _ch1_18go6_1 12s linear infinite; }
._c2_18go6_127 { animation: _ch2_18go6_1 12s linear infinite; }
._c3_18go6_128 { animation: _ch3_18go6_1 12s linear infinite; }
@keyframes _ch1_18go6_1 { 0% { color: var(--ds-color-on-surface) } 30% { color: var(--ds-color-on-surface) } 34% { color: var(--ds-color-on-surface-variant) } 100% { color: var(--ds-color-on-surface-variant) } }
@keyframes _ch2_18go6_1 { 0% { color: var(--ds-color-on-surface-variant) } 34% { color: var(--ds-color-on-surface-variant) } 38% { color: var(--ds-color-on-surface) } 64% { color: var(--ds-color-on-surface) } 68% { color: var(--ds-color-on-surface-variant) } 100% { color: var(--ds-color-on-surface-variant) } }
@keyframes _ch3_18go6_1 { 0% { color: var(--ds-color-on-surface-variant) } 66% { color: var(--ds-color-on-surface-variant) } 70% { color: var(--ds-color-on-surface) } 96% { color: var(--ds-color-on-surface) } 100% { color: var(--ds-color-on-surface-variant) } }
._dtrack_18go6_132 { height: 3px; background: var(--ds-color-surface-container-high); border-radius: 2px; overflow: hidden; }
._dfill_18go6_133 { height: 100%; width: 0; background: var(--ds-color-on-surface); border-radius: 2px; animation: _dprog_18go6_1 12s linear infinite; }
@keyframes _dprog_18go6_1 { 0% { width: 0 } 100% { width: 100% } }
._vtag_18go6_135 { position: absolute; right: 34px; top: 36px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; background: var(--ds-color-surface); border: 1px solid var(--ds-color-outline-variant); box-shadow: 0 4px 12px -6px rgba(24, 24, 27, 0.25); border-radius: var(--ds-corner-full); padding: 5px 12px; color: var(--ds-color-on-surface); font-size: 11px; font-weight: 600; }
._live_18go6_136 { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-color-error); animation: _blink_18go6_1 1.4s infinite; }
@keyframes _blink_18go6_1 { 50% { opacity: 0.3 } }
@media (prefers-reduced-motion: reduce) {
  ._s1_18go6_78, ._s2_18go6_79, ._s3_18go6_80, ._c1_18go6_126, ._c2_18go6_127, ._c3_18go6_128, ._dfill_18go6_133, ._live_18go6_136 { animation: none; }
  ._s1_18go6_78 { opacity: 1; }
}
/* ExtensionInstallSteps — 全屏 ② 与提醒条抽屉共用步骤内容 */

/* ---- 三小步 ---- */
._sub_1gzgk_4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
}

._subStacked_1gzgk_11 {
  justify-content: center;
}

._sub_1gzgk_4 span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ds-color-outline);
}

._sub_1gzgk_4 span s {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ds-color-outline-variant);
  display: block;
}

._sub_1gzgk_4 span._done_1gzgk_32 {
  color: var(--ds-color-on-surface-variant);
}

._sub_1gzgk_4 span._done_1gzgk_32 s {
  background: var(--ds-color-on-surface);
}

._sub_1gzgk_4 span._on_1gzgk_40 {
  color: var(--ds-color-on-surface);
}

._sub_1gzgk_4 span._on_1gzgk_40 s {
  background: var(--ds-color-on-surface);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.1);
}

._sub_1gzgk_4 i {
  height: 1px;
  background: var(--ds-color-outline-variant);
  font-style: normal;
}

._subStacked_1gzgk_11 i {
  flex: 1;
  max-width: 34px;
}

._subInline_1gzgk_60 i {
  flex: 0 0 26px;
}

._subInline_1gzgk_60 {
  margin-bottom: 14px;
}

/* ---- 地址 chip ---- */
._addr_1gzgk_69 {
  appearance: none;
  font-family: var(--ds-typeface-code);
  font-size: 12px;
  background: var(--ds-color-surface-container-low);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 6px;
  padding: 2px 7px;
  cursor: pointer;
  white-space: nowrap;
  color: inherit;
  transition: border-color 0.15s ease, color 0.15s ease;
}

._addrInline_1gzgk_83 {
  font-size: 11.5px;
  background: var(--ds-color-surface);
  border-radius: 5px;
  padding: 1px 6px;
}

._addrCopied_1gzgk_90 {
  border-color: var(--ds-color-on-surface);
  color: var(--ds-color-on-surface);
}

/* ---- stacked 布局（全屏 ②）---- */
._stacked_1gzgk_96 {
  width: 100%;
}

._title_1gzgk_100 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 9px;
  line-height: 1.28;
  text-align: center;
  color: var(--ds-color-on-surface);
}

._lead_1gzgk_110 {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ds-color-on-surface-variant);
  margin: 0 auto 18px;
  text-align: center;
  max-width: 520px;
}

._lead_1gzgk_110 strong {
  color: var(--ds-color-on-surface);
  font-weight: 600;
  white-space: nowrap;
}

._gifstage_1gzgk_125 {
  height: 172px;
  border: 1px dashed var(--ds-color-outline);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container-low);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

._gifstage_1gzgk_125 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

._gifstage_1gzgk_125 b {
  position: absolute;
  top: 9px;
  right: 10px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
}

._failnote_1gzgk_157 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--ds-color-on-surface);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container-low);
  margin-bottom: 18px;
}

._failnote_1gzgk_157 s {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ds-color-on-surface);
  flex: 0 0 7px;
  margin-top: 5px;
  display: block;
}

._failnote_1gzgk_157 p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ds-color-on-surface-variant);
}

._acts_1gzgk_185 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

._ctaPrimary_1gzgk_193 {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  border: 0;
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-size: 13.5px;
  font-weight: 600;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--ds-corner-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;
}

._ctaPrimary_1gzgk_193:hover:not(:disabled) {
  box-shadow: 0 12px 24px -12px rgba(24, 24, 27, 0.5);
  transform: translateY(-1px);
}

._ctaPrimary_1gzgk_193:disabled {
  opacity: 0.6;
  cursor: default;
}

._hint_1gzgk_222 {
  font-size: 11.5px;
  color: var(--ds-color-outline);
  margin-top: 13px;
  line-height: 1.5;
  text-align: center;
}

/* ---- inline 布局（提醒条抽屉）---- */
._inline_1gzgk_231 {
  width: 100%;
}

._dmain_1gzgk_235 {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

._dgif_1gzgk_241 {
  flex: 0 0 250px;
  height: 132px;
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

._dgif_1gzgk_241 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

._dinfo_1gzgk_260 {
  flex: 1;
  min-width: 0;
}

._dinfo_1gzgk_260 h4 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 0 0 7px;
  color: var(--ds-color-on-surface);
}

._dinfo_1gzgk_260 p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ds-color-on-surface-variant);
  margin: 0 0 14px;
}

._drow_1gzgk_279 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

._nbtn_1gzgk_286 {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-size: 12.5px;
  font-weight: 600;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--ds-corner-small);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.15s;
}

._nbtn_1gzgk_286:disabled {
  opacity: 0.6;
  cursor: default;
}

._nbtn_1gzgk_286 svg {
  width: 13px;
  height: 13px;
}

._dhint_1gzgk_314 {
  font-size: 11.5px;
  color: var(--ds-color-outline);
}

._dfail_1gzgk_319 {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--ds-color-on-surface);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  margin-bottom: 13px;
}

._dfail_1gzgk_319 s {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ds-color-on-surface);
  flex: 0 0 7px;
  margin-top: 4px;
  display: block;
}

._dfail_1gzgk_319 p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ds-color-on-surface-variant);
}

._dfail_1gzgk_319 b {
  color: var(--ds-color-on-surface);
  font-weight: 600;
  font-family: var(--ds-typeface-code);
}

._nghost_1gzgk_353 {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 4px;
}

._nghost_1gzgk_353:hover {
  color: var(--ds-color-on-surface);
}

._spinner_1gzgk_369 {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--ds-color-surface);
  border-radius: 50%;
  animation: _spin_1gzgk_369 0.7s linear infinite;
}

@keyframes _spin_1gzgk_369 {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  ._spinner_1gzgk_369 { animation: none; }
}
/* AuthorizeOnboarding.module.css */
._root_rpkxg_2 { flex: 1; min-width: 0; display: flex; }
._main_rpkxg_3 { flex: 1; min-width: 0; position: relative; overflow-y: auto; }
._pad_rpkxg_4 { padding: 30px 36px; max-width: 760px; }
._stepWrap_rpkxg_5 { display: flex; justify-content: center; margin-bottom: 28px; }
._hero_rpkxg_6 { margin-bottom: 4px; }
._title_rpkxg_7 { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 11px; color: var(--ds-color-on-surface); }
._lead_rpkxg_8 { font-size: 14px; line-height: 1.65; color: var(--ds-color-on-surface-variant); margin: 0; max-width: 500px; }
._cue_rpkxg_9 { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 12.5px; font-weight: 600; color: var(--ds-color-on-surface); background: var(--ds-color-surface-container); border: 1px solid var(--ds-color-on-surface-variant); border-radius: var(--ds-corner-full); padding: 7px 14px; }
._cue_rpkxg_9 svg { width: 14px; height: 14px; }
/* OnboardingSidebar.module.css — 宽度 250px 与 MatrixAccountSidebar 对齐，避免授权后切换抖动 */
._sidebar_13b2o_2 { width: 250px; flex: 0 0 250px; border-right: 1px solid var(--ds-color-outline-variant); display: flex; flex-direction: column; padding: 14px 12px; }
._head_13b2o_3 { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px; margin-bottom: 10px; }
._title_13b2o_4 { font-size: 13px; font-weight: 700; color: var(--ds-color-on-surface); }
._count_13b2o_5 { font-family: var(--ds-typeface-code); font-size: 12px; color: var(--ds-color-on-surface-variant); }
._section_13b2o_6 { font-size: 11px; font-weight: 700; color: var(--ds-color-on-surface-variant); padding: 6px 6px 8px; letter-spacing: 0.02em; }
._scroll_13b2o_7 { flex: 1; min-height: 0; }
._prow_13b2o_8 {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; margin-bottom: 2px; border: 0; background: transparent;
  border-radius: var(--ds-corner-medium); cursor: pointer; transition: background 0.15s; font-family: inherit; text-align: left;
}
._prow_13b2o_8:hover { background: var(--ds-color-surface-container); }
._prow_13b2o_8:first-child { box-shadow: inset 0 0 0 1px var(--ds-color-outline-variant); background: var(--ds-color-surface-container); }
._pm_13b2o_15 { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 26px; background: var(--ds-color-surface-container); border: 1px solid var(--ds-color-outline-variant); }
._nm_13b2o_16 { flex: 1; font-size: 13px; font-weight: 600; color: var(--ds-color-on-surface); }
._go_13b2o_17 { color: var(--ds-color-on-surface-variant); font-size: 11.5px; font-weight: 600; }
._prow_13b2o_8:hover ._go_13b2o_17, ._prow_13b2o_8:first-child ._go_13b2o_17 { color: var(--ds-color-on-surface); }
._foot_13b2o_19 { margin-top: 8px; display: flex; gap: 8px; }
._footBtn_13b2o_20 { flex: 1; height: 34px; border: 1px solid var(--ds-color-outline-variant); background: var(--ds-color-surface); border-radius: var(--ds-corner-small); font-size: 12px; color: var(--ds-color-on-surface-variant); font-family: inherit; cursor: default; }
._footBtn_13b2o_20:disabled { opacity: 0.85; }
/* GuideCursor.module.css — fill 白色是有意（白色指点光标），stroke 走 ink token */
._taphand_1xaye_2 {
  position: absolute; right: 30px; bottom: -14px; z-index: 6;
  pointer-events: none; color: var(--ds-color-on-surface);
  filter: drop-shadow(0 5px 8px rgba(24, 24, 27, 0.26));
  animation: _taptap_1xaye_1 1.5s ease-in-out infinite;
}
._taphand_1xaye_2 svg { width: 27px; height: 30px; display: block; }
@keyframes _taptap_1xaye_1 {
  0% { transform: translate(0, 4px) rotate(-8deg); }
  42% { transform: translate(-4px, -5px) rotate(-8deg); }
  58% { transform: translate(-4px, -5px) rotate(-8deg); }
  100% { transform: translate(0, 4px) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) { ._taphand_1xaye_2 { animation: none; } }
/* WorkspacePreview.module.css — 移植自 V2-refined.html .pv-*（token 换真实名；--sk 骨架灰沿用设计值） */
._pvWrap_lz8ml_2 { position: relative; margin-top: 26px; }
._pvHead_lz8ml_3 { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
._lk_lz8ml_4 { width: 22px; height: 22px; border-radius: 7px; background: var(--ds-color-surface-container); border: 1px solid var(--ds-color-outline-variant); display: flex; align-items: center; justify-content: center; color: var(--ds-color-on-surface-variant); }
._lk_lz8ml_4 svg { width: 12px; height: 12px; }
._ht_lz8ml_1 { font-size: 12.5px; font-weight: 700; color: var(--ds-color-on-surface-variant); }
._hs_lz8ml_7 { font-size: 11.5px; color: var(--ds-color-on-surface-variant); }
._pvStack_lz8ml_8 { display: flex; flex-direction: column; gap: 14px; }
._pvCard_lz8ml_9 { position: relative; background: var(--ds-color-surface); border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-large); padding: 18px 20px; }
._pvTag_lz8ml_10 { position: absolute; top: 14px; right: 16px; font-size: 11px; font-weight: 600; color: var(--ds-color-on-surface-variant); }
._pvTagStatic_lz8ml_11 { font-size: 11px; font-weight: 600; color: var(--ds-color-on-surface-variant); }
._sk_lz8ml_12 { background: #eceae8; border-radius: 6px; display: block; }

._pvp_lz8ml_14 { display: flex; align-items: center; gap: 18px; }
._pvpAv_lz8ml_15 { width: 56px; height: 56px; border-radius: 50%; background: #eceae8; flex: 0 0 56px; }
._pvpMid_lz8ml_16 { flex: 1; display: flex; flex-direction: column; gap: 14px; }
._nm_lz8ml_17 { height: 13px; width: 120px; }
._pvpStats_lz8ml_18 { display: flex; gap: 38px; }
._pvpSt_lz8ml_18 { display: flex; flex-direction: column; gap: 7px; }
._n_lz8ml_17 { height: 15px; width: 46px; }
._l_lz8ml_4 { height: 8px; width: 30px; }
._pvpAct_lz8ml_22 { display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
._b_lz8ml_23 { height: 34px; width: 104px; border-radius: var(--ds-corner-medium); }
._dark_lz8ml_24 { background: #d9d7d4; }

._pvh_lz8ml_26 { display: flex; align-items: center; gap: 14px; }
._pvhIc_lz8ml_27 { width: 40px; height: 40px; border-radius: 11px; background: #eceae8; flex: 0 0 40px; }
._pvhMid_lz8ml_28 { flex: 1; display: flex; flex-direction: column; gap: 9px; }
._a_lz8ml_29 { height: 12px; width: 96px; }
._pvh_lz8ml_26 ._b_lz8ml_23 { height: 9px; width: 230px; }
._tog_lz8ml_31 { height: 34px; width: 88px; border-radius: var(--ds-corner-medium); background: #eceae8; }

._pvdHead_lz8ml_33 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
._pvdHead_lz8ml_33 b { font-size: 13px; font-weight: 700; color: var(--ds-color-on-surface-variant); }
._pvdRow_lz8ml_35 { display: flex; align-items: center; gap: 13px; padding: 10px 0; }
._pvdRow_lz8ml_35 + ._pvdRow_lz8ml_35 { border-top: 1px solid var(--ds-color-outline-variant); }
._ic_lz8ml_37 { width: 32px; height: 32px; border-radius: 9px; background: #eceae8; flex: 0 0 32px; }
._ll_lz8ml_38 { flex: 1; display: flex; flex-direction: column; gap: 8px; }
._ll_lz8ml_38 ._a_lz8ml_29 { height: 10px; }
._ll_lz8ml_38 ._b_lz8ml_23 { height: 8px; }

._pvFade_lz8ml_42 { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--ds-color-surface) 72%); pointer-events: none; z-index: 4; }
._pvLock_lz8ml_43 { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 9px; background: var(--ds-color-surface); border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-full); padding: 10px 18px; box-shadow: 0 12px 30px -14px rgba(24, 24, 27, 0.35); font-size: 13px; font-weight: 600; color: var(--ds-color-on-surface); }
._pvLock_lz8ml_43 svg { width: 14px; height: 14px; }
/* ExtensionNotice — 内容顶部常驻提醒条（内联，非遮罩）
   视觉层：外框 ds-panel（surface 底 + outline-variant 描边）、按钮 ds-btn，
   这里只保留布局与业务级尺寸/圆角微调。 */

._wrap_bebha_5 {
  /* 折叠/展开整体外层；展开时抽屉紧贴条下沿 */
}

._notice_bebha_9 {
  margin-bottom: 16px;
}

._noticeOpen_bebha_13 {
  border-radius: var(--ds-corner-large) var(--ds-corner-large) 0 0;
  border-bottom-color: transparent;
  margin-bottom: 0;
}

._row_bebha_19 {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
}

._dot_bebha_26 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ds-color-error);
  flex: 0 0 8px;
  position: relative;
}

._dot_bebha_26::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ds-color-error) 45%, transparent);
  animation: _vpulse_bebha_1 2.2s ease-out infinite;
}

@keyframes _vpulse_bebha_1 {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}

._txt_bebha_49 {
  flex: 1;
  min-width: 0;
}

._txtTitle_bebha_54 {
  display: block;
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--ds-color-on-surface);
}

._txt_bebha_49 span {
  font-family: var(--ds-font-body-small-family);
  font-size: var(--ds-font-body-small-size);
  color: var(--ds-color-on-surface-variant);
}

._ver_bebha_69 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 6px;
}

._ver_bebha_69 code {
  font-family: var(--ds-typeface-code);
  font-size: var(--ds-font-label-small-size);
  color: var(--ds-color-on-surface);
}

._verCode_bebha_82 {
  font-variant-numeric: tabular-nums;
}

._old_bebha_86 {
  color: var(--ds-color-on-surface-variant);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

._ver_bebha_69 svg {
  width: 11px;
  height: 11px;
  color: var(--ds-color-outline);
}

._acts_bebha_98 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

._drawer_bebha_105 {
  border: 1px solid var(--ds-color-outline-variant);
  border-top: 0;
  border-radius: 0 0 var(--ds-corner-medium) var(--ds-corner-medium);
  background: var(--ds-color-surface-container-low);
  padding: 18px 16px 16px;
  margin-bottom: 16px;
  animation: _ndrop_bebha_1 0.24s ease;
}

@keyframes _ndrop_bebha_1 {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  ._drawer_bebha_105 { animation: none; }
  ._dot_bebha_26::after { animation: none; }
}
._modal_vs4fe_1 {
  padding-bottom: 0;
}

._modal_vs4fe_1 .ant-modal-content {
  overflow: hidden;
  padding: 0;
  border-radius: 18px;
  background: var(--ds-color-surface);
}

._header_vs4fe_12 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

._headerActions_vs4fe_20 { display: flex; align-items: center; gap: 12px; }
._closeButton_vs4fe_21 { display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ds-color-on-surface-variant); font-size: 24px; line-height: 1; cursor: pointer; }
._closeButton_vs4fe_21:hover { background: var(--ds-color-surface-container); color: var(--ds-color-on-surface); }

._eyebrow_vs4fe_24 { color: var(--ds-color-primary); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
._header_vs4fe_12 h2 { margin: 4px 0 3px; font-size: 24px; color: var(--ds-color-on-surface); }
._header_vs4fe_12 p { margin: 0; color: var(--ds-color-on-surface-variant); font-size: 13px; }

._status_vs4fe_28 {
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  font-size: 12px;
  font-weight: 750;
}
._status_vs4fe_28[data-status='active'] { color: #117a49; background: #e6f7ee; }
._status_vs4fe_28[data-status='paused'] { color: #986400; background: #fff5d8; }

._body_vs4fe_39 { display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 42%, 720px); height: 80vh; min-height: 0; }
._body_vs4fe_39[data-loading='true'] { opacity: .72; pointer-events: none; }
._formPane_vs4fe_41 { overflow: auto; padding: 22px 26px 26px; }
._agentPane_vs4fe_42 { display: flex; min-width: 0; min-height: 0; overflow: hidden; flex-direction: column; border-left: 1px solid var(--ds-color-outline-variant); background: var(--ds-color-surface-container); }

._block_vs4fe_44 { padding: 18px 0 22px; border-bottom: 1px solid var(--ds-color-outline-variant); }
._block_vs4fe_44:first-child { padding-top: 0; }
._blockTitle_vs4fe_46 { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
._blockTitle_vs4fe_46 > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: var(--ds-color-on-surface); color: var(--ds-color-surface); font-size: 11px; font-weight: 800; }
._blockTitle_vs4fe_46 div { display: flex; flex-direction: column; }
._blockTitle_vs4fe_46 strong { color: var(--ds-color-on-surface); font-size: 14px; }
._blockTitle_vs4fe_46 small { margin-top: 2px; color: var(--ds-color-on-surface-variant); }

._fixedGoal_vs4fe_52 { padding: var(--ds-sys-space-lg); border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-medium); background: var(--ds-color-surface-container-low); }
._fixedGoal_vs4fe_52 strong, ._fixedGoal_vs4fe_52 span { display: block; }
._fixedGoal_vs4fe_52 strong { color: var(--ds-color-on-surface); font-size: 14px; }
._fixedGoal_vs4fe_52 span { margin-top: var(--ds-sys-space-xs); color: var(--ds-color-on-surface-variant); font-size: 12px; line-height: 1.5; }

._inlineFields_vs4fe_57 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
._scheduleFields_vs4fe_58 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
._inlineFields_vs4fe_57 label, ._scheduleFields_vs4fe_58 label, ._fullField_vs4fe_59 { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: var(--ds-color-on-surface-variant); font-size: 12px; font-weight: 650; }
._fullField_vs4fe_59 { margin-top: 12px; }
._formControl_vs4fe_61 { width: 100%; }
._formControl_vs4fe_61.ant-select { height: 40px; }
._formControl_vs4fe_61.ant-input-number,
._formControl_vs4fe_61.ant-picker { height: 40px; border-radius: var(--ds-corner-small); }
._formControl_vs4fe_61.ant-input-number .ant-input-number-input { height: 38px; }
._formControl_vs4fe_61.ant-select .ant-select-selector { border-radius: var(--ds-corner-small) !important; }
._fullField_vs4fe_59 textarea { min-height: 72px; resize: vertical; padding: 10px 11px; line-height: 1.5; }
._scheduleHint_vs4fe_68 { margin: 8px 0 0; color: var(--ds-color-on-surface-variant); font-size: 11px; line-height: 1.5; }
._templateDescription_vs4fe_69 { margin: var(--ds-sys-space-sm) 0 0; color: var(--ds-color-on-surface-variant); font-size: 11px; line-height: 1.5; }

._actions_vs4fe_71 {
  position: sticky;
  z-index: 2;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  margin: 0 -26px -26px;
  padding: 14px 26px;
  border-top: 1px solid var(--ds-color-outline-variant);
  background: color-mix(in srgb, var(--ds-color-surface) 94%, var(--ds-color-surface-container));
  box-shadow: 0 -8px 18px rgba(0, 0, 0, .025);
}
._actions_vs4fe_71 .ant-btn { height: 38px; border-radius: var(--ds-corner-small); font-weight: 700; }
._cancelAction_vs4fe_85 { margin-left: auto; }
._endedNote_vs4fe_86 { color: var(--ds-color-on-surface-variant); font-size: 12px; line-height: 1.5; }

._agentTitle_vs4fe_88 { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; padding: 18px; border-bottom: 1px solid var(--ds-color-outline-variant); }
._agentAvatar_vs4fe_89 { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--ds-color-on-surface); color: var(--ds-color-surface); font-weight: 850; }
._agentTitle_vs4fe_88 > div:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
._agentTitle_vs4fe_88 strong { color: var(--ds-color-on-surface); }
._agentTitle_vs4fe_88 span { overflow: hidden; margin-top: 2px; color: var(--ds-color-on-surface-variant); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
._quickPrompts_vs4fe_93 { display: flex; flex: 0 0 auto; gap: 8px; padding: 12px 16px 0; }
._quickPrompts_vs4fe_93 button { padding: 7px 10px; border: 1px solid var(--ds-color-outline-variant); border-radius: 999px; background: var(--ds-color-surface); color: var(--ds-color-on-surface); font-size: 12px; cursor: pointer; }
._chatShell_vs4fe_95 { flex: 1; min-height: 0; margin-top: 8px; overflow: hidden; background: var(--ds-color-surface); }
._chatShell_vs4fe_95 .conversation-shell.narrow .conversation-messages { padding-bottom: var(--ds-sys-space-xxl) !important; }
._chatShell_vs4fe_95 .ai-message > div[style*='line-height: 1.75'] { margin-top: var(--ds-sys-space-md) !important; }
._chatShell_vs4fe_95 .ai-message table { width: 100%; table-layout: fixed; }
._chatShell_vs4fe_95 .ai-message th,
._chatShell_vs4fe_95 .ai-message td { overflow-wrap: anywhere; }
._chatShell_vs4fe_95 .ai-message ol,
._chatShell_vs4fe_95 .ai-message ul { padding-left: var(--ds-sys-space-xl) !important; }
._chatShell_vs4fe_95 .ai-message li { padding-left: var(--ds-sys-space-xs); }
._agentEmpty_vs4fe_104 { padding: 22px 16px; text-align: center; color: var(--ds-color-on-surface-variant); font-size: 12px; line-height: 1.6; }

._reportWorkbench_vs4fe_106 {
  display: grid;
  grid-template-columns: 28% 44% 28%;
  height: 80vh;
  min-height: 0;
  background: var(--ds-color-surface);
}

._reportIndex_vs4fe_114,
._runConversation_vs4fe_115 {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: var(--ds-color-surface-container-low);
}

._reportIndex_vs4fe_114 { border-right: 1px solid var(--ds-color-outline-variant); }
._runConversation_vs4fe_115 { border-left: 1px solid var(--ds-color-outline-variant); }

._indexHeader_vs4fe_126 {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-sys-space-lg);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}
._indexHeader_vs4fe_126 > div { display: flex; flex-direction: column; gap: var(--ds-sys-space-xs); }
._indexHeader_vs4fe_126 strong { color: var(--ds-color-on-surface); font-size: 14px; }
._indexHeader_vs4fe_126 span { color: var(--ds-color-on-surface-variant); font-size: 11px; }
._indexHeader_vs4fe_126 button,
._indexState_vs4fe_138 button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-color-primary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
._indexHeader_vs4fe_126 button:disabled { cursor: wait; opacity: .55; }

._reportFilters_vs4fe_149 {
  display: flex;
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-lg);
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--ds-sys-space-xs);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}
._reportFilters_vs4fe_149 > div:first-child { display: flex; align-items: center; gap: 5px; }
._reportFilters_vs4fe_149 input {
  width: 100%;
  min-width: 0;
  flex: 1;
  padding: 5px 4px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-extra-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 10px;
}
._reportFilters_vs4fe_149 span { color: var(--ds-color-on-surface-variant); font-size: 10px; }
._reportFilterActions_vs4fe_170 { display: flex; justify-content: flex-end; gap: var(--ds-sys-space-sm); }
._reportFilterActions_vs4fe_170 button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-color-primary);
  font-size: 11px;
  cursor: pointer;
}
._reportFilterActions_vs4fe_170 button:disabled { cursor: not-allowed; opacity: .45; }

._indexState_vs4fe_138 {
  display: flex;
  min-height: 180px;
  padding: var(--ds-sys-space-lg);
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--ds-sys-space-sm);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}
._indexState_vs4fe_138[data-tone='error'] strong { color: var(--ds-color-error); }

._reportList_vs4fe_197 { flex: 1; min-height: 0; overflow: auto; padding: var(--ds-sys-space-sm); }
._reportList_vs4fe_197[aria-busy='true'] { opacity: .62; }
._reportListItem_vs4fe_199 {
  display: flex;
  width: 100%;
  padding: var(--ds-sys-space-md);
  border: 1px solid transparent;
  border-radius: var(--ds-corner-medium);
  background: transparent;
  color: var(--ds-color-on-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  flex-direction: column;
  gap: var(--ds-sys-space-sm);
  transition: background var(--ds-motion-short-3) var(--ds-easing-standard), border-color var(--ds-motion-short-3) var(--ds-easing-standard);
}
._reportListItem_vs4fe_199 + ._reportListItem_vs4fe_199 { margin-top: var(--ds-sys-space-xs); }
._reportListItem_vs4fe_199:hover { background: var(--ds-color-surface-container); }
._reportListItem_vs4fe_199[data-selected='true'] { border-color: var(--ds-color-outline-variant); background: var(--ds-color-surface); box-shadow: var(--ds-elevation-1); }
._listItemTop_vs4fe_217 { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--ds-sys-space-sm); }
._listItemTop_vs4fe_217 b { min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
._listItemTop_vs4fe_217 em,
._runStatus_vs4fe_220 {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}
._listItemTop_vs4fe_217 em[data-status='analyzing'],
._listItemTop_vs4fe_217 em[data-status='executing'],
._runStatus_vs4fe_220[data-status='analyzing'],
._runStatus_vs4fe_220[data-status='executing'] { background: var(--ds-color-primary-container); color: var(--ds-color-on-primary-container); }
._listItemTop_vs4fe_217 em[data-status='completed'],
._runStatus_vs4fe_220[data-status='completed'] { background: color-mix(in srgb, #22c55e 14%, var(--ds-color-surface)); color: #22c55e; }
._listItemTop_vs4fe_217 em[data-status='exception'],
._runStatus_vs4fe_220[data-status='exception'] { background: var(--ds-color-error-container); color: var(--ds-color-error); }
._listSummary_vs4fe_238 {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
._listMeta_vs4fe_247 { color: var(--ds-color-outline); font-size: 10px; }

._pagination_vs4fe_249 {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-sys-space-md);
  border-top: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}
._pagination_vs4fe_249 button {
  padding: var(--ds-sys-space-xs) var(--ds-sys-space-sm);
  border: 0;
  border-radius: var(--ds-corner-small);
  background: transparent;
  color: var(--ds-color-on-surface);
  font: inherit;
  cursor: pointer;
}
._pagination_vs4fe_249 button:hover:not(:disabled) { background: var(--ds-color-surface-container); }
._pagination_vs4fe_249 button:disabled { cursor: not-allowed; opacity: .38; }

._reportDetail_vs4fe_271 { min-width: 0; overflow: auto; padding: var(--ds-sys-space-xl); }
._detailEmpty_vs4fe_272 { display: flex; min-width: 0; align-items: center; justify-content: center; flex-direction: column; gap: var(--ds-sys-space-sm); color: var(--ds-color-on-surface-variant); }
._detailEmpty_vs4fe_272 strong { color: var(--ds-color-on-surface); }
._detailHero_vs4fe_274 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-sys-space-lg); }
._reportKind_vs4fe_275 { color: var(--ds-color-primary); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
._detailHero_vs4fe_274 h3 { margin: var(--ds-sys-space-xs) 0 var(--ds-sys-space-sm); color: var(--ds-color-on-surface); font-size: 20px; }
._detailHero_vs4fe_274 p { max-width: 560px; margin: 0; color: var(--ds-color-on-surface-variant); font-size: 12px; line-height: 1.6; }
._runStatus_vs4fe_220 { padding: 5px 10px; font-size: 11px; }

._detailActions_vs4fe_280 { display: flex; align-items: center; gap: var(--ds-sys-space-sm); margin-top: var(--ds-sys-space-lg); }
._detailActions_vs4fe_280 button {
  min-height: 34px;
  padding: 0 var(--ds-sys-space-md);
  border-radius: var(--ds-corner-small);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
._detailActions_vs4fe_280 button:disabled { cursor: wait; opacity: .5; }
._refreshAction_vs4fe_291 { margin-left: auto; border: 0; background: transparent; color: var(--ds-color-primary); }

._exceptionNotice_vs4fe_293 {
  display: flex;
  margin-top: var(--ds-sys-space-lg);
  padding: var(--ds-sys-space-md) var(--ds-sys-space-lg);
  border-radius: var(--ds-corner-medium);
  flex-direction: column;
  gap: var(--ds-sys-space-xs);
  font-size: 12px;
  line-height: 1.5;
}
._exceptionNotice_vs4fe_293 { background: var(--ds-color-error-container); color: var(--ds-color-error); }
._workflowPlaceholder_vs4fe_304 { display: flex; min-height: 180px; margin-top: var(--ds-sys-space-xl); padding: var(--ds-sys-space-xl); align-items: center; justify-content: center; border: 1px dashed var(--ds-color-outline-variant); border-radius: var(--ds-corner-medium); background: var(--ds-color-surface-container-low); color: var(--ds-color-on-surface-variant); text-align: center; flex-direction: column; gap: var(--ds-sys-space-sm); }
._workflowPlaceholder_vs4fe_304 strong { color: var(--ds-color-on-surface); font-size: 14px; }
._workflowPlaceholder_vs4fe_304 span { max-width: 420px; font-size: 12px; line-height: 1.6; }

._detailSection_vs4fe_308 { padding: var(--ds-sys-space-xl) 0; border-bottom: 1px solid var(--ds-color-outline-variant); color: var(--ds-color-on-surface); font-size: 12px; line-height: 1.65; }
._detailSection_vs4fe_308:last-child { border-bottom: 0; }
._detailSection_vs4fe_308 h4 { margin: 0 0 var(--ds-sys-space-md); color: var(--ds-color-on-surface); font-size: 14px; }
._summaryText_vs4fe_311 { margin: 0; white-space: pre-wrap; }
._sectionHeading_vs4fe_312 { display: flex; align-items: center; justify-content: space-between; }
._sectionHeading_vs4fe_312 span { color: var(--ds-color-on-surface-variant); font-size: 11px; }
._valueEmpty_vs4fe_314 { color: var(--ds-color-on-surface-variant); font-style: normal; }

._structuredFields_vs4fe_316 { display: flex; margin: 0; flex-direction: column; }
._structuredFields_vs4fe_316 > div { display: grid; padding: var(--ds-sys-space-sm) 0; grid-template-columns: minmax(84px, .3fr) 1fr; gap: var(--ds-sys-space-md); border-bottom: 1px solid var(--ds-color-outline-variant); }
._structuredFields_vs4fe_316 > div:last-child { border-bottom: 0; }
._structuredFields_vs4fe_316 dt { color: var(--ds-color-on-surface-variant); }
._structuredFields_vs4fe_316 dd { min-width: 0; margin: 0; white-space: pre-wrap; }
._structuredList_vs4fe_321 { margin: 0; padding-left: var(--ds-sys-space-lg); }
._structuredList_vs4fe_321 li + li { margin-top: var(--ds-sys-space-xs); }
._jsonValue_vs4fe_323 { overflow: auto; margin: 0; padding: var(--ds-sys-space-sm); border-radius: var(--ds-corner-small); background: var(--ds-color-surface-container-low); color: var(--ds-color-on-surface); font-family: var(--ds-typeface-code); font-size: 11px; white-space: pre-wrap; }

._planItems_vs4fe_325 { display: flex; flex-direction: column; gap: var(--ds-sys-space-md); }
._planItem_vs4fe_325 { padding: var(--ds-sys-space-lg); border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-medium); background: var(--ds-color-surface-container-low); }
._planItemHead_vs4fe_327 { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-sys-space-md); }
._planItemHead_vs4fe_327 > div { display: flex; min-width: 0; align-items: center; gap: var(--ds-sys-space-sm); }
._planItemHead_vs4fe_327 strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
._itemOrder_vs4fe_330 { color: var(--ds-color-primary); font-family: var(--ds-typeface-code); font-size: 11px; }
._itemStatus_vs4fe_331 { padding: 3px 7px; border-radius: var(--ds-corner-full); background: var(--ds-color-surface-container); color: var(--ds-color-on-surface-variant); font-size: 10px; font-weight: 750; }
._itemStatus_vs4fe_331[data-status='ready'] { background: var(--ds-color-tertiary-container); color: var(--ds-color-tertiary); }
._itemStatus_vs4fe_331[data-status='generating'],
._itemStatus_vs4fe_331[data-status='publishing'] { background: var(--ds-color-primary-container); color: var(--ds-color-on-primary-container); }
._itemStatus_vs4fe_331[data-status='failed'] { background: var(--ds-color-error-container); color: var(--ds-color-error); }
._itemStatus_vs4fe_331[data-status='published'] { background: color-mix(in srgb, #22c55e 14%, var(--ds-color-surface)); color: #22c55e; }
._itemMeta_vs4fe_337 { display: flex; margin-top: var(--ds-sys-space-sm); flex-wrap: wrap; gap: var(--ds-sys-space-sm) var(--ds-sys-space-lg); color: var(--ds-color-on-surface-variant); font-size: 10px; }
._itemCopy_vs4fe_338 { margin-top: var(--ds-sys-space-md); }
._itemCopy_vs4fe_338 b { display: block; margin-bottom: var(--ds-sys-space-xs); color: var(--ds-color-on-surface-variant); font-size: 10px; }
._itemCopy_vs4fe_338 p { margin: 0; }
._itemStateHint_vs4fe_341 { margin: var(--ds-sys-space-md) 0 0; color: var(--ds-color-on-surface-variant); }
._videoResult_vs4fe_342 {
  margin-top: var(--ds-sys-space-lg);
  padding: var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
}
._videoResultHead_vs4fe_349 { display: flex; margin-bottom: var(--ds-sys-space-md); align-items: flex-start; justify-content: space-between; gap: var(--ds-sys-space-md); }
._videoResultHead_vs4fe_349 > div { display: flex; min-width: 0; flex-direction: column; gap: var(--ds-sys-space-xs); }
._videoResultHead_vs4fe_349 strong { color: var(--ds-color-on-surface); }
._videoResultHead_vs4fe_349 span { color: var(--ds-color-on-surface-variant); }
._videoReadyMark_vs4fe_353 { flex: 0 0 auto; padding: 3px 7px; border-radius: var(--ds-corner-full); background: color-mix(in srgb, #22c55e 14%, var(--ds-color-surface)); color: #22c55e !important; font-weight: 750; }
._videoPreview_vs4fe_354 { display: block; width: 100%; max-height: 320px; border-radius: var(--ds-corner-small); background: var(--ds-color-on-surface); object-fit: contain; }
._videoResultPlaceholder_vs4fe_355 { margin-top: var(--ds-sys-space-md); padding: var(--ds-sys-space-lg); border-radius: var(--ds-corner-small); background: var(--ds-color-surface-container); color: var(--ds-color-on-surface-variant); text-align: center; }
._itemError_vs4fe_356 { display: flex; margin-top: var(--ds-sys-space-md); padding: var(--ds-sys-space-sm); border-radius: var(--ds-corner-small); background: var(--ds-color-error-container); color: var(--ds-color-error); flex-direction: column; gap: var(--ds-sys-space-xs); }
._attempts_vs4fe_357 { margin-top: var(--ds-sys-space-md); }
._attempts_vs4fe_357 summary { color: var(--ds-color-primary); font-size: 11px; cursor: pointer; }
._attempts_vs4fe_357 ol { margin: var(--ds-sys-space-sm) 0 0; padding-left: var(--ds-sys-space-xl); }
._attempts_vs4fe_357 li { padding: var(--ds-sys-space-sm) 0; }
._attempts_vs4fe_357 li > div { display: flex; justify-content: space-between; gap: var(--ds-sys-space-sm); }
._attempts_vs4fe_357 li span { color: var(--ds-color-on-surface-variant); font-size: 10px; }
._attempts_vs4fe_357 code { display: block; overflow-wrap: anywhere; margin-top: var(--ds-sys-space-xs); color: var(--ds-color-on-surface-variant); font-size: 10px; }
._attempts_vs4fe_357 p { margin: var(--ds-sys-space-xs) 0 0; color: var(--ds-color-error); }
._runConversationHead_vs4fe_365 { display: flex; flex: 0 0 auto; align-items: center; gap: var(--ds-sys-space-sm); padding: var(--ds-sys-space-lg); border-bottom: 1px solid var(--ds-color-outline-variant); }
._runConversationHead_vs4fe_365 > div:last-child { display: flex; min-width: 0; flex-direction: column; gap: var(--ds-sys-space-xs); }
._runConversationHead_vs4fe_365 strong { color: var(--ds-color-on-surface); font-size: 13px; }
._runConversationHead_vs4fe_365 span { overflow: hidden; color: var(--ds-color-on-surface-variant); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
._runConversationHint_vs4fe_369 { flex: 0 0 auto; padding: var(--ds-sys-space-sm) var(--ds-sys-space-lg); border-bottom: 1px solid var(--ds-color-outline-variant); color: var(--ds-color-on-surface-variant); font-size: 10px; line-height: 1.5; }
._runChatShell_vs4fe_370 { flex: 1; min-height: 0; overflow: hidden; background: var(--ds-color-surface); }

@media (max-width: 1080px) {
  ._reportWorkbench_vs4fe_106 { display: flex; height: min(700px, calc(100vh - 160px)); overflow: auto; flex-direction: column; }
  ._reportIndex_vs4fe_114 { min-height: 280px; border-right: 0; border-bottom: 1px solid var(--ds-color-outline-variant); }
  ._reportList_vs4fe_197 { max-height: 320px; }
  ._reportDetail_vs4fe_271 { overflow: visible; }
  ._runConversation_vs4fe_115 { min-height: 460px; border-top: 1px solid var(--ds-color-outline-variant); border-left: 0; }
}

@media (max-width: 900px) {
  ._body_vs4fe_39 { height: auto; grid-template-columns: 1fr; }
  ._agentPane_vs4fe_42 { min-height: 440px; border-top: 1px solid var(--ds-color-outline-variant); border-left: 0; }
  ._scheduleFields_vs4fe_58 { grid-template-columns: 1fr; }
}

/*
 * Hosting modal type scale. Keep headings on their established hierarchy,
 * while normal content/actions use 16px and explanatory metadata uses 14px.
 */
._modal_vs4fe_1 :is(
  ._blockTitle_vs4fe_46 strong,
  ._fixedGoal_vs4fe_52 strong,
  ._inlineFields_vs4fe_57 input,
  ._inlineFields_vs4fe_57 select,
  ._scheduleFields_vs4fe_58 input,
  ._fullField_vs4fe_59 select,
  ._fullField_vs4fe_59 textarea,
  ._actions_vs4fe_71 button,
  ._agentTitle_vs4fe_88 strong,
  ._indexHeader_vs4fe_126 strong,
  ._indexHeader_vs4fe_126 button,
  ._indexState_vs4fe_138 button,
  ._reportFilters_vs4fe_149 input,
  ._reportFilterActions_vs4fe_170 button,
  ._indexState_vs4fe_138,
  ._listItemTop_vs4fe_217 b,
  ._detailEmpty_vs4fe_272 strong,
  ._detailActions_vs4fe_280 button,
  ._workflowPlaceholder_vs4fe_304 strong,
  ._detailSection_vs4fe_308,
  ._detailSection_vs4fe_308 h4,
  ._planItemHead_vs4fe_327 strong,
  ._itemCopy_vs4fe_338 p,
  ._itemStateHint_vs4fe_341,
  ._videoResultHead_vs4fe_349 strong,
  ._structuredFields_vs4fe_316 dd,
  ._attempts_vs4fe_357 summary,
  ._attempts_vs4fe_357 li strong,
  ._runConversationHead_vs4fe_365 strong
) {
  font-size: var(--ds-font-body-large-size);
}

._modal_vs4fe_1 :is(
  ._eyebrow_vs4fe_24,
  ._header_vs4fe_12 p,
  ._status_vs4fe_28,
  ._blockTitle_vs4fe_46 > span,
  ._blockTitle_vs4fe_46 small,
  ._fixedGoal_vs4fe_52 span,
  ._inlineFields_vs4fe_57 label,
  ._scheduleFields_vs4fe_58 label,
  ._fullField_vs4fe_59,
  ._scheduleHint_vs4fe_68,
  ._templateDescription_vs4fe_69,
  ._endedNote_vs4fe_86,
  ._agentTitle_vs4fe_88 span,
  ._agentTitle_vs4fe_88 button,
  ._quickPrompts_vs4fe_93 button,
  ._agentEmpty_vs4fe_104,
  ._indexHeader_vs4fe_126 span,
  ._reportFilters_vs4fe_149 span,
  ._indexState_vs4fe_138 span,
  ._listItemTop_vs4fe_217 em,
  ._runStatus_vs4fe_220,
  ._listSummary_vs4fe_238,
  ._listMeta_vs4fe_247,
  ._pagination_vs4fe_249,
  ._reportKind_vs4fe_275,
  ._detailHero_vs4fe_274 p,
  ._detailEmpty_vs4fe_272,
  ._exceptionNotice_vs4fe_293,
  ._workflowPlaceholder_vs4fe_304 span,
  ._sectionHeading_vs4fe_312 span,
  ._jsonValue_vs4fe_323,
  ._itemOrder_vs4fe_330,
  ._itemStatus_vs4fe_331,
  ._itemMeta_vs4fe_337,
  ._itemCopy_vs4fe_338 b,
  ._videoResultHead_vs4fe_349 span,
  ._videoReadyMark_vs4fe_353,
  ._videoResultPlaceholder_vs4fe_355,
  ._attempts_vs4fe_357 li span,
  ._attempts_vs4fe_357 code,
  ._attempts_vs4fe_357 p,
  ._runConversationHead_vs4fe_365 span,
  ._runConversationHint_vs4fe_369
) {
  font-size: var(--ds-font-body-medium-size);
}
/* ============================================================
   PlatformDonut — 平台分发占比环图（真数据，Task 5）
   Source: docs/design/2026-08-03-ops-overview-redesign-v11.html 深蓝阶饼/环。
   Colours: 分段配色走 analytics 模块内图表色板（chartPalette，基准 azure 递进），
     不依赖旧全局深蓝别名。no-azure / 无彩虹。
   诚实空态：无平台数据 / 总 play=0 → .empty「暂无平台数据」。
   ============================================================ */

._donut_vobyt_9 {
  /* 布局：flex 一行 + 图例；配色由组件内 chartPalette 提供。 */
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--ds-color-on-surface);
}

._mono_vobyt_20 {
  font-family: var(--ds-typeface-code);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

._donutSvg_vobyt_26 {
  width: 96px;
  height: 96px;
  flex: none;
  display: block;
  overflow: visible;
}

/* 中心 hole 用 surface（随主题）+ 1px 描边，与 RateRing / 互动构成环对齐。 */
._donutHole_vobyt_35 {
  fill: var(--ds-color-surface);
  stroke: color-mix(in srgb, var(--ds-color-outline-variant) 60%, transparent);
  stroke-width: 1;
}

/* 弱轨环：surface-container-high 描边（对齐 RateRing 的 --ds-color-surface-container-high）。 */
._donutTrack_vobyt_42 {
  fill: none;
  stroke: var(--ds-color-surface-container-high);
  stroke-width: 24;
}

._donutNum_vobyt_48 {
  font-family: var(--ds-typeface-code);
  font-size: var(--ds-font-headline-medium-size);
  font-weight: 600;
  fill: var(--ds-color-on-surface);
}

._donutSub_vobyt_55 {
  font-size: var(--ds-font-body-medium-size);
  font-weight: 500;
  fill: var(--ds-color-on-surface-variant);
}

._legend_vobyt_61 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

/* 诚实空态：无平台数据 / 总 play=0 时居中提示，绝不渲染伪造占比环。 */
._empty_vobyt_6 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-font-body-small-size);
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
}

._legendRow_vobyt_80 {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: var(--ds-font-label-small-size);
  line-height: 1.35;
}

._legendDot_vobyt_88 {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

._legendLabel_vobyt_95 {
  flex: 0 1 auto;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._legendPct_vobyt_103 {
  font-weight: 600;
  color: var(--ds-color-on-surface);
  font-variant-numeric: tabular-nums;
}
/* ============================================================
   TopVideosLeaderboard — 已发布成品 · 播放 Top 10（真数据）
   Source: docs/design/2026-08-03-ops-overview-redesign-v11.html 底榜
     .lb / .lb-row / .lb-rk / .lb-cover(9:16 40×71) / .lb-main / .lb-stats
   融合：ds surface 体系 + 紧凑列表气质（弱 meta / 轻 hover）；
   选中 surface-container / primary-container 极轻，无大黑底。
   ============================================================ */

/* 视觉层（底/描边/圆角）由 ds-panel 提供，这里只留布局与内边距。 */
._card_blvin_10 {
  padding: var(--ds-sys-space-md) 0.875rem 0.625rem;
}

._mono_blvin_14 {
  font-family: var(--ds-typeface-code);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

._head_blvin_20 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ds-sys-space-sm);
  padding-bottom: 0.125rem;
}

._title_blvin_28 {
  font-size: var(--ds-font-body-small-size);
  font-weight: 600;
  color: var(--ds-color-on-surface);
  letter-spacing: 0;
}

._meta_blvin_35 {
  font-size: var(--ds-font-label-small-size);
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
}

/* 双列：左 5 / 右 5。 */
._cols_blvin_42 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.75rem;
  margin-top: 0.375rem;
}

._col_blvin_42 {
  display: flex;
  flex-direction: column;
}

/* 行：紧凑、弱分割线，贴近 console 历史列表气质。 */
._lbRow_blvin_55 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.375rem;
  margin: 0 -0.375rem;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 70%, transparent);
  border-radius: var(--ds-corner-small);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}

._lbRow_blvin_55:last-child {
  border-bottom: none;
}

._lbRow_blvin_55:hover {
  background: var(--ds-color-surface-container-low);
}

._lbRow_blvin_55:focus-visible {
  outline: 1px solid var(--ds-color-outline-variant);
  outline-offset: 1px;
  background: var(--ds-color-surface-container-low);
}

/* 排名数字：视觉走 ds-badge--rank（前三 primary 底 / 其余 rank-n），
   这里只保留业务尺寸/字号微调（28px 方块、code 数字、前三加粗）。 */
._lbNo_blvin_89 {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ds-typeface-code);
  font-size: var(--ds-font-body-medium-size);
  font-weight: 600;
}

._lbNo_blvin_89.ds-badge--rank-1,
._lbNo_blvin_89.ds-badge--rank-2,
._lbNo_blvin_89.ds-badge--rank-3 {
  font-weight: 700;
}

/* 短视频封面 9:16（40×71），outline-variant 边 + 轻 elevation。 */
._lbCover_blvin_109 {
  width: 40px;
  height: 71px;
  border-radius: 6px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  box-shadow: var(--ds-elevation-1);
  background: linear-gradient(
    145deg,
    var(--ds-color-surface-container-high),
    var(--ds-color-surface-container)
  );
}

/* 真实封面：铺满 9:16 封面，object-fit cover；渐变底色作为加载/缺失兜底。 */
._lbCoverImg_blvin_126 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 高光 + 底部压暗（克制，避免示意稿重阴影）。 */
._lbCover_blvin_109::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.18) 100%);
  pointer-events: none;
}

/* 平台 tint：柔和混 surface-container，dark 下不整条发黑。 */
._lbCoverDefault_blvin_148 {
  background: linear-gradient(
    145deg,
    var(--ds-color-surface-container-high),
    var(--ds-color-outline-variant)
  );
}

._lbCoverDouyin_blvin_156 {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--ds-color-on-surface) 28%, var(--ds-color-surface-container-high)),
    color-mix(in srgb, var(--ds-color-on-surface) 48%, var(--ds-color-surface-container))
  );
}

._lbCoverWechat_blvin_164 {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #86efac 72%, var(--ds-color-surface-container)),
    color-mix(in srgb, #166534 72%, var(--ds-color-surface-container))
  );
}

._lbCoverKuaishou_blvin_172 {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #fcd34d 72%, var(--ds-color-surface-container)),
    color-mix(in srgb, #b45309 72%, var(--ds-color-surface-container))
  );
}

._lbCoverXiaohongshu_blvin_180 {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #fca5a5 72%, var(--ds-color-surface-container)),
    color-mix(in srgb, #9f1239 72%, var(--ds-color-surface-container))
  );
}

/* 居中圆形播放钮。 */
._lbCoverPlay_blvin_189 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ds-color-surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 60%, transparent);
  box-shadow: var(--ds-elevation-1);
  display: grid;
  place-items: center;
  z-index: 1;
}

._lbCoverPlay_blvin_189::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0.125rem;
  border-style: solid;
  border-width: 3.5px 0 3.5px 6px;
  border-color: transparent transparent transparent var(--ds-color-on-surface);
}

._player_blvin_215 {
  width: 100%;
  max-height: 70vh;
  border-radius: 8px;
  background: #000;
  display: block;
}

._lbMid_blvin_223 {
  flex: 1;
  min-width: 0;
}

._lbName_blvin_228 {
  font-size: var(--ds-font-body-medium-size);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ds-color-on-surface);
  line-height: 1.35;
}

._lbMeta_blvin_238 {
  font-size: var(--ds-font-label-small-size);
  font-weight: 400;
  color: var(--ds-color-on-surface-variant);
  margin-top: 0.3125rem;
  line-height: 1.3;
}

/* 赞/评摘要：独立一行（mono），与平台·日期分开 */
._lbEng_blvin_247 {
  margin-top: 0.3125rem;
  font-size: var(--ds-font-label-small-size);
  font-weight: 400;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* 相对播放量条：真实数据派生（播放 ÷ Top1），填满行中空白并作排名可视化。
   track 用抬升容器，fill 用 primary（M3 进度强调）。 */
._lbBar_blvin_260 {
  margin-top: 0.3125rem;
  height: 3px;
  border-radius: 999px;
  background: var(--ds-color-surface-container-high);
  overflow: hidden;
}

._lbBarFill_blvin_268 {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ds-color-primary);
  transition: width var(--ds-motion-short-4, 0.15s) var(--ds-easing-standard, ease);
}

._lbRight_blvin_276 {
  text-align: right;
  flex-shrink: 0;
  width: 96px;
}

._lbVal_blvin_282 {
  font-size: var(--ds-font-body-large-size);
  font-weight: 600;
  color: var(--ds-color-on-surface);
  line-height: 1.35;
}

/* 诚实空态：无已发布成品（不伪造行）。 */
._empty_blvin_290 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  margin-top: var(--ds-sys-space-sm);
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container-low);
  color: var(--ds-color-on-surface-variant);
  font-size: var(--ds-font-body-small-size);
  font-weight: 500;
}

@media (max-width: 720px) {
  ._cols_blvin_42 {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   EngageStackBar — 近 7 日赞/评/转堆叠柱
   Source: docs/design/2026-08-03-ops-overview-redesign-v11.html bar-wrap。
   Colours: 分段配色走 analytics 模块内图表色板（chartPalette(3)）。
   网格 / 轴 / 图例走 on-surface 体系；容器透明，避免独立灰底块。
   诚实空态：data 为空 → 「暂无互动数据」。
   ============================================================ */

._stack_1yurl_9 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--ds-color-on-surface);
}

._legend_1yurl_18 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sys-space-md);
  flex-wrap: wrap;
  font-size: var(--ds-font-label-small-size);
  color: var(--ds-color-on-surface-variant);
  margin-top: var(--ds-sys-space-sm);
}

/* 图例前缀：标识该图（近 7 天互动对比），随区块语义合并，不再单独占标题行 */
._legendTitle_1yurl_30 {
  font-size: var(--ds-font-label-small-size);
  font-weight: 600;
  color: var(--ds-color-on-surface);
}

._legendItem_1yurl_36 {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

._legendSwatch_1yurl_42 {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

._empty_1yurl_49 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-font-body-small-size);
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
}

/* ===== chartCanvas 方案（对齐 AreaPlayChart）：HTML Y 轴 + div 堆叠柱 ===== */
._chartCanvas_1yurl_60 {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

._chartBody_1yurl_69 {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.375rem;
}

._chartYAxis_1yurl_79 {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  min-width: 36px;
  max-width: 56px;
  padding: var(--ds-sys-space-xs) 0 1.125rem;
  font-size: var(--ds-font-label-small-size);
  line-height: 1.2;
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  user-select: none;
  pointer-events: none;
}

._chartYTick_1yurl_97 {
  white-space: nowrap;
  text-align: right;
}

._chartPlot_1yurl_102 {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 120px;
}

/* 网格线：覆盖绘图区（不含底部 X 轴标签行） */
._gridLines_1yurl_110 {
  position: absolute;
  inset: 0 0 18px 0;
  pointer-events: none;
}

._gridLine_1yurl_110 {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ds-color-outline-variant);
}

._barsRow_1yurl_124 {
  position: absolute;
  inset: 0 0 18px 0;
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
}

._barGroup_1yurl_132 {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 0.0625rem;
}

._barSeg_1yurl_143 {
  width: 100%;
  border-radius: 2px 2px 0 0;
}

._xAxisRow_1yurl_148 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
}

._axisLabel_1yurl_157 {
  font-family: var(--ds-typeface-code);
  font-size: var(--ds-font-label-small-size);
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}
/*
 * DataDashboardFullscreen — scheme-E 数据看板「壳」
 * 视觉 source: docs/design/2026-06-23-data-tab-dashboard.html
 *   + create-chat-lite-dev-baseline.html .mod-data 数据主区
 * 全部走 --ds-* 标准 token + analytics 模块内图表色板（chartPalette）。
 * console no-azure（design.md §12）：仅 ink 灰阶 / --ds-* token。
 *
 * P0 左轨壳内容列内滚动容器：挂在 .console-body 内（flex:1; overflow-y:auto），
 * 不再 position:fixed 整屏接管，也不再 createPortal→body。
 */

._shell_1cqwn_12 {
  /*
   * 主题：全部走 design-token.css 的 --ds-*（随 [data-theme=light|dark] 切换）。
   * 图表深蓝阶单独保留，暗色下提亮以保证对比。
   * 禁止再「锁定浅色」——否则榜单用 --ds-color-surface 会在 dark 下变黑，
   * 而壳背景仍是白，出现「内容表现榜黑条」割裂。
   */
  /* 图表序列统一走标准角色：primary / secondary / tertiary / warning */

  /* surface 阶与 AppRail 同源：页底 lowest、卡 surface、内嵌格 low/container */
  /* 亮色描边更轻，避免表现总览/互动卡线过重：
     分隔线走标准 token --ds-color-outline-variant（弱化 60%，保持轻描边气质） */
  /* 负向/失败走 M3 error 角色（暗色自动切换 #f87171），不再单独维护红 */
  /* 圆角统一走 --ds-corner-*，去掉 10/14/18 自创阶 */

  /* 对齐 publish/ml-page：占满 console-body 网格列，才能 height 拉伸后 overflow 滚动 */
  grid-column: 1 / -1;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ds-color-surface-container-low);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
}

._contentSlot_1cqwn_40::-webkit-scrollbar {
  width: 8px;
}

._contentSlot_1cqwn_40::-webkit-scrollbar-thumb {
  background: var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-extra-small);
}

/* 顶栏筛选下拉：业务级尺寸微调——结构/配色仍走 ds-dropdown / ds-dropdown-trigger，
   这里只收窄高度与宽度，避免两个筛选器过大 */
._headerDropdown_1cqwn_51.ds-dropdown {
  width: auto;
  max-width: none;
}

._headerDropdown_1cqwn_51 .ds-dropdown-trigger {
  height: 32px;
  padding: 0 var(--ds-sys-space-md);
  font-size: var(--ds-font-body-medium-size);
}

._headerDropdown_1cqwn_51 .ds-dropdown-trigger svg {
  width: 14px;
  height: 14px;
}

._btnGhost_1cqwn_67 {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  height: 34px;
  padding: 0 0.9375rem;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  font-size: var(--ds-font-body-medium-size);
  font-weight: 600;
  color: var(--ds-color-on-surface);
  cursor: pointer;
  font-family: inherit;
}

._btnGhost_1cqwn_67:hover {
  background: var(--ds-color-surface-container);
}

._btnGhost_1cqwn_67 i {
  font-style: normal;
  font-size: var(--ds-font-label-small-size);
  color: var(--ds-color-on-surface-variant);
}

/* ===== 内容插槽（Task 5-10 注入 KPI / 洞察 / 趋势 / 榜单）===== */
._contentSlot_1cqwn_40 {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  /* 与 shell 内容区 4px 节奏一致：16 / 24 / 32 */
  padding: var(--ds-sys-space-lg) var(--ds-sys-space-xl) var(--ds-sys-space-xxl);
  box-sizing: border-box;
}

/* KPI 行外包（compact 密集网格 Task 2）：KpiBento 内部 8 列布局由其自管（Task 3 控），
   此处仅作行容器并与下方图表网格留间距。 */
._kpiRow_1cqwn_106 {
  display: block;
  margin-bottom: var(--ds-sys-space-lg);
}

/* ===== compact 密集网格（Task 2）=====
   Source: docs/design/2026-06-30-data-dashboard-compact.html .charts（repeat(6,1fr)）。
   6 列网格按序：播放趋势 span3 / 健康分 span1 / 占比 span2 ｜ 堆叠柱 span2 / 雷达 span2 / 漏斗 span2
   ｜ 已发布成品 span4 / AI 洞察（insightsCol）span2。配色走 --ds-* + chartPalette。 */
._mono_1cqwn_115 {
  font-family: var(--ds-typeface-code);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

._ccT_1cqwn_121 {
  font-size: var(--ds-font-body-medium-size);
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

._ccM_1cqwn_127 {
  font-size: var(--ds-font-label-small-size);
  color: var(--ds-color-on-surface-variant);
}

._ccChart_1cqwn_132 {
  position: relative;
  margin-top: 0.625rem;
  width: 100%;
  /* 收紧到 finetune 目标稿卡格密度（原 230px 令 gauge/donut 飘在大片空白里）。
     grid-auto-rows minmax(168px,auto) 保证不低于内容高；gauge(≈125)/donut(≈124) 均容纳。 */
  height: 176px;
}

._ccChart_1cqwn_132 > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (max-width: 720px) {
  ._shell_1cqwn_12 {
    padding: var(--ds-sys-space-md) var(--ds-sys-space-lg) var(--ds-sys-space-xl);
  }
}

/* ============================================================
   ops-overview v11 布局
   Source: docs/design/2026-08-03-ops-overview-redesign-v11.html
   壳层与 AppShell / design-token 原生融合（surface 阶、圆角、控件）
   ============================================================ */

._opsLastSync_1cqwn_160 {
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-font-body-small-family);
  font-size: var(--ds-font-body-small-size);
  font-weight: var(--ds-font-body-small-weight);
  line-height: var(--ds-font-body-small-line-height);
  white-space: nowrap;
}

._opsMain_1cqwn_169 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr);
  gap: var(--ds-sys-space-lg);
  align-items: stretch;
  margin-bottom: var(--ds-sys-space-lg);
}

._opsCol_1cqwn_177 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* 分区标题：console 风格 13px/medium + 弱色，去掉 uppercase 粗条示意感 */
._sec_1cqwn_185 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  margin: 0 0 var(--ds-sys-space-sm);
  font-size: var(--ds-font-body-medium-size);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-color-on-surface-variant);
}

._sec_1cqwn_185::before {
  content: "";
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: var(--ds-color-primary);
  opacity: 0.72;
  flex-shrink: 0;
}

/* 面板视觉层走 ds-panel（surface 底 + outline-variant 描边），
   这里补 ds-panel 未提供的 flex 列布局，保证 panelBody 撑满等高三栏 */
._opsPanel_1cqwn_209 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* 二级内嵌卡片：外层是 ds-panel（surface 白底 + 描边），内层再用同款
   ds-panel 会层层白卡无层次；这里定制 data-panel——container-low 底 +
   medium 圆角、无描边，与外层形成明暗层次。 */
._dataPanel_1cqwn_219 {
  background: var(--ds-color-surface-container-low);
  border-radius: var(--ds-corner-medium);
}

/* 面板内容结构（视觉层之外只留内边距与列布局） */
._panelBody_1cqwn_225 {
  padding: var(--ds-sys-space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

._kpiBlock_1cqwn_233 + ._kpiBlock_1cqwn_233 {
  margin-top: var(--ds-sys-space-md);
  padding-top: var(--ds-sys-space-md);
  border-top: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 60%, transparent);
}

._kpiBlockH_1cqwn_239 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--ds-sys-space-sm);
}

._kpiTtl_1cqwn_246 {
  font-size: var(--ds-font-body-medium-size);
  font-weight: 650;
  color: var(--ds-color-on-surface);
  letter-spacing: -0.01em;
}

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

._cols1_1cqwn_259 {
  grid-template-columns: 1fr;
}

._kpi_1cqwn_106 {
  padding: var(--ds-sys-space-md) 0.625rem 0.625rem;
  text-align: center;
}

._kpiLbl_1cqwn_268 {
  font-size: var(--ds-font-label-small-size);
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  margin-bottom: 0.375rem;
}

._kpiVal_1cqwn_275 {
  font-size: var(--ds-font-title-large-size);
  font-weight: 700;
  color: var(--ds-color-on-surface);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

._kpiDelta_1cqwn_283 {
  margin-top: var(--ds-sys-space-sm);
  padding-top: 0.375rem;
  border-top: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 60%, transparent);
  font-size: var(--ds-font-label-small-size);
  font-weight: 600;
}

._playHero_1cqwn_291 {
  padding: 0.875rem 0.875rem var(--ds-sys-space-md);
  text-align: left;
}

._playHero_1cqwn_291 ._kpiVal_1cqwn_275 {
  font-size: var(--ds-font-headline-small-size);
  letter-spacing: -0.035em;
}

._playHero_1cqwn_291 ._kpiLbl_1cqwn_268 {
  font-weight: 600;
}

._kpiRow_1cqwn_106 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.625rem;
}

._playHero_1cqwn_291 ._kpiDelta_1cqwn_283 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  margin-bottom: 0.125rem;
}

._up_1cqwn_319 {
  color: var(--ds-color-success);
}

._down_1cqwn_323 {
  color: var(--ds-color-error);
}

._emptyHint_1cqwn_327 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: var(--ds-font-body-small-size);
  color: var(--ds-color-on-surface-variant);
}

._donutCard_1cqwn_336 {
  margin-top: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-md) var(--ds-sys-space-md) 0.625rem;
}

._donutTitle_1cqwn_341 {
  font-size: var(--ds-font-label-small-size);
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  margin-bottom: 0.625rem;
}

._donutBody_1cqwn_348 {
  min-height: 110px;
  height: 124px;
}

/* PlatformDonut 在 ops 卡内：限制高度并允许图例换行 */
._donutBody_1cqwn_348 [data-testid='platform-donut'] {
  height: 100%;
}

._mgrid_1cqwn_358 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

/* mgrid 后接 kpiBlock（如「近 7 天」）时补分隔：
   平台格子不是 kpiBlock，.kpiBlock + .kpiBlock 规则不生效；
   与右栏「互动」当日/近 7 天分割线对齐（间距 + 内距 + 1px 分隔线） */
._mgrid_1cqwn_358 + ._kpiBlock_1cqwn_233 {
  margin-top: var(--ds-sys-space-md);
  padding-top: var(--ds-sys-space-md);
  border-top: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 60%, transparent);
}

._mcell_1cqwn_374 {
  padding: 0.5625rem 0.625rem;
}

._mcellN_1cqwn_378 {
  font-size: var(--ds-font-label-small-size);
  color: var(--ds-color-on-surface-variant);
  font-weight: 500;
}

._mcellV_1cqwn_384 {
  font-size: var(--ds-font-body-large-size);
  font-weight: 700;
  color: var(--ds-color-on-surface);
  margin-top: 0.125rem;
  letter-spacing: -0.02em;
}

/* 中栏 fin 2×2 */
._fin_1cqwn_393 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-sys-space-xs);
  position: relative;
}

._finCard_1cqwn_400 {
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-md) var(--ds-sys-space-md);
  text-align: center;
}

._pies_1cqwn_405 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-sys-space-sm);
  margin-top: 0.625rem;
}

._pieCard_1cqwn_412 {
  padding: var(--ds-sys-space-md);
}

._pieTitle_1cqwn_416 {
  font-size: var(--ds-font-label-small-size);
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  text-align: center;
  margin-bottom: 0.625rem;
}

._pieBody_1cqwn_424 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  justify-content: center;
  min-height: 88px;
}

._effBody_1cqwn_432 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-md);
  align-items: center;
  justify-content: center;
  min-height: 88px;
}

._effItem_1cqwn_441 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1875rem;
}

._effK_1cqwn_448 {
  font-size: var(--ds-font-label-small-size);
  color: var(--ds-color-on-surface-variant);
}

._effV_1cqwn_453 {
  font-size: var(--ds-font-title-large-size);
  font-weight: 700;
  color: var(--ds-color-on-surface);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

._pie_1cqwn_405 {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

._pie_1cqwn_405::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: var(--ds-color-surface);
  border: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 60%, transparent);
}

/* 表现总览环卡：洞底与卡片同色（不再刺白），文字走 RateRing 默认 13px */
._ringInCard_1cqwn_479 {
  --rate-hole-bg: var(--ds-color-surface);
}

._pieLeg_1cqwn_483 {
  font-size: var(--ds-font-label-small-size);
  color: var(--ds-color-on-surface-variant);
  line-height: 1.65;
}

._pieLeg_1cqwn_483 b {
  color: var(--ds-color-on-surface);
  font-weight: 700;
}

._dot_1cqwn_494 {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 0.3125rem;
  vertical-align: middle;
}

._chartPanel_1cqwn_503 {
  margin-top: var(--ds-sys-space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

._chartToolbar_1cqwn_511 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-sm);
  margin-bottom: 0.625rem;
  /* 趋势 tab 与时间分段并排一行；tab 多时由 .tabs 横向滚动兜底 */
  flex-wrap: nowrap;
}

/* 趋势指标 6 段 / 时间范围 3 段 — 复用 ds-segmented / ds-segment 类，
   布局（宽度弹性 / 溢出 / 右对齐）与业务级尺寸微调都放这里：
   默认 ds-segment 字号/内边距偏大且允许换行，这里收窄到 antd small 观感，
   保证 6 段趋势 tab 与 3 段时间分段并排成一行。 */
._tabs_1cqwn_517 {
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  /* 隐藏横向滚动条（仍可触控/滚轮滚动），避免挤高容器与另一分段行高不一致 */
  scrollbar-width: none;
}

._tabs_1cqwn_517::-webkit-scrollbar {
  display: none;
}

._rangeSeg_1cqwn_537 {
  flex-shrink: 0;
  margin-left: auto;
}

._tabs_1cqwn_517 .ds-segment,
._rangeSeg_1cqwn_537 .ds-segment {
  padding: 4px 0.5rem;
  font-size: var(--ds-font-label-small-size);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

._lineBox_1cqwn_551 {
  flex: 1;
  min-height: 200px;
  position: relative;
  border-radius: var(--ds-corner-small);
  border: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 60%, transparent);
  background: linear-gradient(180deg, var(--ds-color-surface-container-low) 0%, transparent 70%);
  /* 允许 X 轴首尾日期完整露出，避免被裁成「08-0」 */
  overflow: visible;
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-md) 0.625rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 趋势图组件铺满 lineBox 宽高（AreaPlayChart dense） */
._lineBox_1cqwn_551 > * {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 右栏 bot / gauges / bar */
._bot2_1cqwn_578 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}

._bot3_1cqwn_585 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.375rem;
}

/* 互动指标卡（已创作/已发布/点赞/评论/转发）：与总播放量 playHero 同布局，
   层级更低，字号整体降一档 */
._botCard_1cqwn_593 {
  padding: var(--ds-sys-space-md) var(--ds-sys-space-md) 0.625rem;
  text-align: left;
}

._botCard_1cqwn_593 ._kpiLbl_1cqwn_268 {
  font-size: var(--ds-font-label-small-size);
  font-weight: 600;
}

._botCard_1cqwn_593 ._kpiVal_1cqwn_275 {
  font-size: var(--ds-font-title-medium-size);
  letter-spacing: -0.03em;
}

._botCard_1cqwn_593 ._kpiDelta_1cqwn_283 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: var(--ds-font-label-small-size);
  margin-bottom: 0.125rem;
}

._gauges_1cqwn_616 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-sys-space-sm);
  margin-top: var(--ds-sys-space-xs);
  padding-top: var(--ds-sys-space-sm);
}

._gauge_1cqwn_616 {
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-sm) 0.625rem;
  text-align: center;
}

._gaugeT_1cqwn_629 {
  font-size: var(--ds-font-label-small-size);
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  margin-bottom: 0.375rem;
}

._gaugeSub_1cqwn_636 {
  font-size: var(--ds-font-label-small-size);
  color: var(--ds-color-on-surface-variant);
  line-height: 1.4;
}

._gaugeSub_1cqwn_636 b {
  color: var(--ds-color-on-surface-2);
}

._barWrap_1cqwn_646 {
  margin-top: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-md) 0.625rem;
  min-height: 160px;
  /* 撑满面板剩余高度，图表随面板变高，避免底部留白 */
  flex: 1;
  display: flex;
  flex-direction: column;
  /* 与趋势图 lineBox 一致的圆角轻边框 */
  border-radius: var(--ds-corner-small);
  border: 1px solid color-mix(in srgb, var(--ds-color-outline-variant) 60%, transparent);
  background: linear-gradient(180deg, var(--ds-color-surface-container-low) 0%, transparent 70%);
  min-width: 0;
}

._opsBottom_1cqwn_661 {
  margin-top: var(--ds-sys-space-xs);
}

/* 底榜外层已有 sec 标题；内卡头弱化避免双标题 */
._opsBottom_1cqwn_661 [class*='head'] {
  margin-bottom: 0.125rem;
}

@media (max-width: 1100px) {
  ._opsMain_1cqwn_169 {
    grid-template-columns: 1fr;
  }
}
/*
 * GEO 入驻 · 欢迎 / 填信息两屏样式。
 * 1:1 取 docs/design/2026-06-22-geo-onboarding-innovation-hifi.html 的 .wel / .fm / .finput / .ink-btn 数值。
 * console scope ink 单色（design.md §12 no-azure）：CTA = var(--ds-color-on-surface) 底白字；
 * 高亮框 .geo-onb-input--new = var(--ds-color-on-surface) 边框；只读框 .geo-onb-input--ro = 灰；无紫/azure。
 * 颜色一律用 --ds-* token，无裸 hex（阴影用 rgba 透明黑）。
 */

/* ===== 共用：ink CTA（hi-fi .ink-btn）===== */
.geo-onb-cta {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  border: none;
  border-radius: 12px;
  padding: 13px 18px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}
.geo-onb-cta:disabled {
  cursor: default;
  opacity: 0.5;
}
.geo-onb-cta--full {
  width: 100%;
}

.geo-onb-ghost {
  text-align: center;
  font-size: 12.5px;
  color: var(--ds-color-on-surface-variant);
  margin-top: 12px;
  cursor: pointer;
}

/* ===== 欢迎屏（hi-fi .wel）===== */
.geo-onb--welcome {
  padding: 44px 40px 36px;
  text-align: center;
}
.geo-onb-engines {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}
.geo-onb-engines span {
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 999px;
  padding: 4px 12px;
}
.geo-onb-h {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.25;
  margin-bottom: 14px;
}
.geo-onb--welcome .geo-onb-cta {
  padding: 14px 34px;
}

/* ===== 填信息屏（hi-fi .fm）===== */
.geo-onb--form {
  padding: 26px 34px 32px;
}
.geo-onb-fm-h {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 6px;
}
.geo-onb-lead {
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.6;
  margin-bottom: 22px;
}
.geo-onb-lead b {
  color: var(--ds-color-on-surface);
  font-weight: 600;
}

.geo-onb-field {
  margin-bottom: 17px;
}
.geo-onb-flabel {
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 500;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.geo-onb-opt {
  font-size: 10.5px;
  color: var(--ds-color-on-surface-variant);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 5px;
  padding: 0 6px;
  line-height: 16px;
}
.geo-onb-pre {
  font-size: 10.5px;
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  border-radius: 5px;
  padding: 1px 7px;
  line-height: 16px;
}
.geo-onb-new-pill {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  border-radius: 5px;
  padding: 1px 6px;
  letter-spacing: 0.4px;
}

/* hi-fi .finput */
.geo-onb-input {
  width: 100%;
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 11px;
  padding: 12px 15px;
  font-size: 14.5px;
  color: var(--ds-color-on-surface);
  font-family: inherit;
  outline: none;
}
.geo-onb-input::placeholder {
  color: var(--ds-color-on-surface-variant);
}
/* 只读产品名（hi-fi .finput.ro）*/
.geo-onb-input--ro {
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
}
/* 新增高亮框（hi-fi .finput.is-new）*/
.geo-onb-input--new {
  background: var(--ds-color-surface);
  border: 1.5px solid var(--ds-color-on-surface);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.05);
}

.geo-onb-hint {
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.5;
  margin-top: 7px;
}
.geo-onb-hint b {
  color: var(--ds-color-on-surface-variant);
  font-weight: 600;
}
.geo-onb-note {
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  text-align: center;
  margin-top: 14px;
  line-height: 1.5;
}
.geo-onb-err {
  font-size: 12.5px;
  color: var(--ds-color-error);
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
}

/* ===== 采集中屏（hi-fi .load / .spin / .lsteps / .lstep）===== */
.geo-onb--collecting {
  padding: 54px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
/* hi-fi .spin */
.geo-onb-spin {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid var(--ds-color-outline-variant);
  border-top-color: var(--ds-color-on-surface);
  animation: geo-onb-sp 0.9s linear infinite;
}
@keyframes geo-onb-sp {
  to {
    transform: rotate(360deg);
  }
}
/* hi-fi .load .cap */
.geo-onb-cap {
  font-size: 14px;
  color: var(--ds-color-on-surface);
  font-weight: 600;
  text-align: center;
}
/* hi-fi .load .cap small — 副行：接入引擎 + 采集说明 */
.geo-onb-cap small {
  display: block;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 400;
  margin-top: 5px;
}
/* hi-fi .lsteps */
.geo-onb-steps {
  width: 360px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
/* hi-fi .lstep */
.geo-onb-step {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
}
.geo-onb-step-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
/* hi-fi .lstep.done — 白字用 token var(--ds-color-on-surface)，非裸 #fff */
.geo-onb-step--done {
  color: var(--ds-color-on-surface);
}
.geo-onb-step--done .geo-onb-step-dot {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}
/* hi-fi .lstep.cur */
.geo-onb-step--cur {
  color: var(--ds-color-on-surface);
  font-weight: 600;
}
.geo-onb-step--cur .geo-onb-step-dot {
  border: 2px solid var(--ds-color-on-surface);
}
/* hi-fi .lstep.todo */
.geo-onb-step--todo .geo-onb-step-dot {
  border: 2px solid var(--ds-color-outline-variant);
}

/* hi-fi .lbar — 真实采集进度条（done / total 取自 run，与卡头同源）*/
.geo-onb-bar {
  width: 360px;
  max-width: 100%;
}
.geo-onb-bar-track {
  height: 6px;
  background: var(--ds-color-surface-container);
  border-radius: 3px;
  overflow: hidden;
}
.geo-onb-bar-track > i {
  display: block;
  height: 100%;
  background: var(--ds-color-on-surface);
  transition: width 0.4s ease;
}
.geo-onb-bar-num {
  text-align: center;
  font-family: var(--ds-typeface-code);
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  margin-top: 7px;
}
/*
 * TopicBacklog · 选题 Backlog 样式
 * console scope（design.md §12）：白底 ink 单色，no-azure。
 * P0/P1/P2 用 ds 徽标（ink solid / ink outline）区分优先级——非彩色脉冲；
 * 颜色一律 --ds-* token（global-design.css 权威），无裸 hex、无 azure 大面积色块。
 */
.topic-backlog {
  font-family: var(--ds-typeface-plain);
  color: var(--ds-color-on-surface);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tb-kicker {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-color-on-surface-variant);
}

/* 生成选题 = ink-on-ink 主 CTA（§12：主实色按钮黑底白字，非 azure） */
.tb-gen {
  font-size: 12px;
  font-weight: 560;
  border-radius: var(--ds-corner-small);
  padding: 6px 14px;
  cursor: pointer;
  border: 1px solid var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-family: var(--ds-typeface-plain);
}
.tb-gen:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* ===== 状态占位（载入 / 空 / 错误） ===== */
.tb-state {
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
  padding: 22px 8px;
  text-align: center;
  line-height: 1.55;
}
.tb-state--err {
  color: var(--ds-color-error);
  padding: 10px 8px;
}

/* ===== 选题列表 ===== */
.tb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tb-item {
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tb-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tb-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.tb-badge {
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: var(--ds-corner-full);
  white-space: nowrap;
}
/* 意图徽标：次级线框 ink */
.tb-badge--intent {
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
}
/* 优先级档：ink 深浅区分（非彩色）——P0 实心黑底白字最强，P1/P2 线框递弱 */
.tb-badge--tier {
  font-weight: 700;
}
.tb-badge--tier-p0 {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  border: 1px solid var(--ds-color-on-surface);
}
.tb-badge--tier-p1 {
  background: transparent;
  color: var(--ds-color-on-surface);
  border: 1px solid var(--ds-color-on-surface);
}
.tb-badge--tier-p2 {
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  border: 1px solid var(--ds-color-outline-variant);
}
/* 缺口补：ink 线框标记（缺口溯源），非彩色告警 */
.tb-badge--gap {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  border: 1px solid var(--ds-color-outline-variant);
}

/* 写内容：次级 ghost 线框（复用父卡 handleGenerate） */
.tb-write {
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--ds-corner-small);
  padding: 4px 12px;
  cursor: pointer;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
  white-space: nowrap;
}

.tb-keyword {
  font-size: 13.5px;
  font-weight: 560;
  color: var(--ds-color-on-surface);
  line-height: 1.4;
}
.tb-scene {
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.5;
}
/**
 * GEO 卡 canvas 样式
 * 覆盖 GeoTemplateNode / ChildArticleNode / ArticleExpandDrawer 所用 CSS 类。
 * Token 全用 --ds-*（design-token.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-corner-full);
  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-color-on-surface);
  color: var(--ds-color-surface);
}

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

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

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

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

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

/* ===== 动画 ===== */
/* 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-color-surface); border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-large);
  box-shadow: 0 1px 0 rgba(24,24,27,0.02); display: flex; flex-direction: column; overflow: hidden;
  height: 600px; }
.geo-acard[data-state="draft"], .geo-acard[data-state="published"] { border-color: var(--ds-color-on-surface-variant); }
.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-color-on-surface-variant); }
.geo-chip { display: inline-block; padding: 2px 8px; border-radius: var(--ds-corner-full);
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.geo-chip-platform { background: var(--ds-color-primary-container); color: var(--ds-color-on-primary); }
.geo-chip-streaming { background: rgba(245,158,11,0.12); color: var(--ds-color-warning); }
.geo-chip-draft, .geo-chip-published { background: rgba(34,197,94,0.12); color: var(--ds-color-secondary); }
/* 封面横幅：移进滚动区内、随正文一起滚动、缩小为紧凑横幅（R1/R4） */
.geo-cover { position: relative; margin: 0 0 14px; height: 112px; border-radius: var(--ds-corner-medium);
  background-size: cover; background-position: center; }
.geo-cover-empty { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ds-color-surface-container), var(--ds-color-surface-container-high));
  color: var(--ds-color-on-surface-variant); font-size: 12px; font-weight: 600; }
.geo-cover-progress { display: flex; align-items: center; gap: 14px; padding: 18px;
  background: linear-gradient(135deg, #f7f7f6 0%, #ededeb 100%);
  border: 1px solid rgba(24, 24, 27, 0.10); }
.geo-cover-progress-ring { width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  background: #fff; border: 1px solid rgba(24, 24, 27, 0.12); }
.geo-cover-progress-ring > span { width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(24, 24, 27, 0.14); border-top-color: var(--ds-color-on-surface);
  animation: geo-cover-spin 1s linear infinite; }
.geo-cover-progress--failed .geo-cover-progress-ring > span { width: 18px; height: 18px;
  border: 2px solid var(--ds-color-on-surface); border-radius: 3px; animation: none; transform: rotate(45deg); }
.geo-cover-progress-copy { min-width: 0; }
.geo-cover-progress-title { font-size: 14px; font-weight: 800; color: var(--ds-color-on-surface); line-height: 1.35; }
.geo-cover-progress-sub { margin-top: 3px; font-size: 12px; color: var(--ds-color-on-surface-variant); line-height: 1.45; }
.geo-cover-progress-phase { margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--ds-color-on-surface); }
.geo-cover-progress-eta { display: inline-flex; align-items: center; margin-top: 8px; padding: 3px 8px;
  border-radius: var(--ds-corner-full); background: rgba(24, 24, 27, 0.06);
  color: var(--ds-color-on-surface); font-size: 11px; font-weight: 700; }
.geo-cover-retry { margin-left: 8px; padding: 4px 9px; border-radius: 6px; border: none;
  background: var(--ds-color-on-surface); color: var(--ds-color-surface); font-size: 11px; font-weight: 700; cursor: pointer; }
.geo-cover-retry:disabled { opacity: .5; cursor: not-allowed; }
@keyframes geo-cover-spin { to { transform: rotate(360deg); } }
/* 封面按原图比例完整显示，不裁切（#3） */
.geo-cover-img { display: block; width: 100%; height: auto; border-radius: var(--ds-corner-medium); margin: 0 0 14px; }
.geo-acard-body { padding: 18px 22px 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.geo-acard-body::-webkit-scrollbar { width: 8px; }
.geo-acard-body::-webkit-scrollbar-thumb { background: var(--ds-color-outline-variant); 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-color-on-surface); margin: 0 0 6px; outline: none; }
.geo-art-title[contenteditable="true"]:focus, .geo-art-h[contenteditable="true"]:focus,
.geo-art-p[contenteditable="true"]:focus { outline: 3px solid var(--ds-color-secondary); border-radius: 6px; }
.geo-para { position: relative; border-radius: var(--ds-corner-small); margin: 0 -10px 14px; padding: 6px 10px; }
.geo-para:hover { background: var(--ds-color-surface-container); }
.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-color-outline-variant); background: var(--ds-color-surface-container); color: var(--ds-color-on-surface); cursor: pointer; }
.geo-pbtn:disabled { opacity: .4; cursor: not-allowed; }
.geo-inline-img { position: relative; margin: 8px 0; height: 150px; border-radius: var(--ds-corner-small);
  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-color-on-surface); color: var(--ds-color-surface);
  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-color-outline-variant); }
.geo-stream-foot--image { gap: 12px; }
.geo-foot-status { font-size: 11px; color: var(--ds-color-on-surface-variant); }
.geo-pub-link { font-size: 11px; color: var(--ds-color-on-primary); 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-color-outline-variant); background: var(--ds-color-surface-container); color: var(--ds-color-on-surface); }
.geo-fbtn-primary { border: none; background: var(--ds-color-on-surface); color: var(--ds-color-surface); }
.geo-pub-job-wrap { flex: 1 1 auto; min-width: 0; }
.geo-pub-timeline { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.geo-pub-step { display: flex; align-items: flex-start; gap: 7px; min-width: 132px; color: var(--ds-color-on-surface-variant); }
.geo-pub-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; background: var(--ds-color-outline-variant); flex: 0 0 auto; }
.geo-pub-step.is-done .geo-pub-dot { background: var(--ds-color-secondary); }
.geo-pub-step.is-bad .geo-pub-dot { background: var(--ds-color-error); }
.geo-pub-step.is-pending .geo-pub-dot { background: var(--ds-color-warning); }
.geo-pub-step-title { font-size: 11px; font-weight: 800; color: var(--ds-color-on-surface); line-height: 1.35; }
.geo-pub-step-sub { margin-top: 2px; font-size: 10.5px; line-height: 1.35; color: var(--ds-color-on-surface-variant); max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geo-progress { flex: 1; height: 4px; border-radius: var(--ds-corner-full); background: var(--ds-color-surface-container); overflow: hidden; }
.geo-progress > i { display: block; height: 100%; width: 42%; background: var(--ds-color-on-surface);
  border-radius: inherit; animation: geo-grow 2.4s ease-in-out infinite alternate; }
.geo-stream-foot--image .geo-progress { flex: 0 0 86px; background: rgba(24, 24, 27, 0.08); }
.geo-stream-foot--image .geo-progress > i { width: 72%; animation-duration: 1.8s; }
.geo-image-jump { margin-left: auto; padding: 6px 10px; border-radius: 6px;
  border: 1px solid rgba(24, 24, 27, 0.14); background: var(--ds-color-on-surface); color: var(--ds-color-surface);
  font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.geo-image-jump:hover { background: #2a2a2d; }
@keyframes geo-grow { from { width: 30%; } to { width: 72%; } }
.geo-cursor { display: inline-block; width: 2px; height: 1em; background: var(--ds-color-on-surface);
  vertical-align: -2px; margin-left: 2px; animation: geo-blink .9s infinite step-end; }

/* ===== 正文 markdown 渲染（ArticleMarkdown · GFM 含表格） ===== */
.geo-md { color: var(--ds-color-on-surface); outline: none; }
.geo-md--compact { font-size: 12px; line-height: 1.6; }
.geo-md--live { font-size: 14px; line-height: 1.8; }
.geo-md--detail { font-size: 16px; line-height: 1.95; }
.geo-md > *:first-child { margin-top: 0; }
.geo-md > *:last-child { margin-bottom: 0; }
.geo-md p { margin: 0 0 .5em; }
.geo-md strong { font-weight: 700; color: var(--ds-color-on-surface); }
.geo-md em { font-style: italic; }
.geo-md del { color: var(--ds-color-on-surface-variant); }
.geo-md a { color: var(--ds-color-on-primary); text-decoration: none; }
.geo-md a:hover { text-decoration: underline; }
.geo-md ul, .geo-md ol { margin: .3em 0 .6em; padding-left: 1.4em; }
.geo-md li { margin: .2em 0; }
.geo-md li > p { margin: 0; }
.geo-md blockquote { margin: .5em 0; padding: 4px 12px; border-left: 3px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant); }
.geo-md code { background: var(--ds-color-surface-container); border-radius: 4px; padding: 1px 5px; font-size: .9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.geo-md hr { border: none; border-top: 1px solid var(--ds-color-outline-variant); margin: 1em 0; }
/* 表格：窄卡内横向可滚 */
.geo-md table { width: 100%; border-collapse: collapse; margin: .6em 0; font-size: .92em; display: block; overflow-x: auto; }
.geo-md th, .geo-md td { border: 1px solid var(--ds-color-outline-variant); padding: 6px 10px; text-align: left;
  vertical-align: top; }
.geo-md th { background: var(--ds-color-surface-container); font-weight: 700; white-space: nowrap; }

/* ===== 紧凑预览卡 ArticlePreviewCard（画布常态） ===== */
.geo-pcard { position: relative; box-sizing: border-box; width: 280px; height: 420px; overflow: hidden;
  display: flex; flex-direction: column; background: var(--ds-color-surface); border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large); padding: 16px; cursor: pointer;
  box-shadow: var(--ds-elevation-1); transition: box-shadow .15s, transform .15s; }
.geo-pcard:hover { box-shadow: 0 6px 22px -8px rgba(24,24,27,.22); transform: translateY(-1px); }
.geo-pcard[data-state="published"] { border-color: var(--ds-color-on-surface-variant); }
/* 缩放切换：小态右上角「放大」按钮（与大卡头部的「收起」成对） */
.geo-pcard-scale { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center; border-radius: var(--ds-corner-small);
  border: 1px solid var(--ds-color-outline-variant); background: var(--ds-color-surface); color: var(--ds-color-on-surface-variant);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.geo-pcard-scale:hover { background: var(--ds-color-surface-container); color: var(--ds-color-on-surface); border-color: var(--ds-color-on-surface-variant); }
.geo-pcard-title { font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--ds-color-surface);
  margin-bottom: 10px; padding-right: 30px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 小态＝大卡压缩（竖版 280×420）：封面讲解图 + 5 行正文摘要撑满中段 + meta 贴底（变体 B 紧凑可读卡） */
.geo-pcard-cover { flex-shrink: 0; height: 158px; border-radius: var(--ds-corner-small); background-size: cover;
  background-position: center; margin-bottom: 10px; }
.geo-pcard-cover-empty { background: linear-gradient(135deg, var(--ds-color-surface-container), var(--ds-color-surface-container-high)); }
.geo-pcard-excerpt { flex: 1; min-height: 0; font-size: 12px; line-height: 1.6; color: var(--ds-color-on-surface-variant); margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.geo-pcard-meta { flex-shrink: 0; margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ds-color-on-surface-variant); }
.geo-pcard-stat { color: var(--ds-color-on-surface-variant); }
.geo-pcard-meta .geo-chip:last-child { margin-left: auto; }

/* ===== 紧凑卡「就地流式」态子类（仅 streaming 时启用，固定 280×420 外框内部滚动） =====
   全部复用 .geo-cover-progress / .geo-progress / .geo-chip-streaming 的字面量与
   keyframes（geo-cover-spin / geo-grow / geo-blink）+ .geo-cursor，是「大卡体验缩小版」，非新配色。 */
/* 封面区头图进度（mini）：替代静态封面图，紧凑横条 */
.geo-pcard-cover.is-progress { flex-shrink: 0; height: 56px; display: flex; align-items: center; gap: 11px;
  padding: 0 13px; background: linear-gradient(135deg, #f7f7f6 0%, #ededeb 100%);
  border: 1px solid rgba(24, 24, 27, 0.10); }
.geo-pcard-ring { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; background: var(--ds-color-surface);
  border: 1px solid rgba(24, 24, 27, 0.12); display: flex; align-items: center; justify-content: center; }
.geo-pcard-ring > span { width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(24, 24, 27, 0.14); border-top-color: var(--ds-color-on-surface);
  animation: geo-cover-spin 1s linear infinite; }
.geo-pcard-prog-copy { min-width: 0; }
.geo-pcard-prog-title { font-size: 12px; font-weight: 800; color: var(--ds-color-on-surface); line-height: 1.3; }
.geo-pcard-prog-eta { display: inline-flex; margin-top: 3px; padding: 2px 7px; border-radius: var(--ds-corner-full);
  background: rgba(24, 24, 27, 0.06); color: var(--ds-color-on-surface); font-size: 10px; font-weight: 700; }
/* 正文流式滚动窗口：占满中段、内部滚动（bodyRef 挂这里、自动跟随顶到底），不撑高外框 */
.geo-pcard-stream { position: relative; flex: 1; min-height: 0; overflow-y: auto; margin-bottom: 10px; }
.geo-pcard-stream::-webkit-scrollbar { width: 4px; }
.geo-pcard-stream::-webkit-scrollbar-thumb { background: var(--ds-color-outline-variant); border-radius: 4px; }
.geo-pcard-stream::after { content: ''; position: sticky; top: 0; display: block; height: 14px; margin-bottom: -14px;
  background: linear-gradient(var(--ds-color-surface), rgba(255, 255, 255, 0)); pointer-events: none; }
.geo-pcard-stream-inner { font-size: 12px; line-height: 1.6; color: var(--ds-color-on-surface-variant); }
.geo-pcard-stream-inner > * { margin: 0 0 .4em; }
.geo-pcard-stream-inner > *:last-child { margin-bottom: 0; }
/* mini 进度脚（= .geo-progress 缩小 4px→3px） */
.geo-pcard-streamfoot { flex-shrink: 0; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.geo-pcard-bar { flex: 1; height: 3px; border-radius: var(--ds-corner-full); background: var(--ds-color-surface-container); overflow: hidden; }
.geo-pcard-bar > i { display: block; height: 100%; width: 42%; background: var(--ds-color-on-surface);
  border-radius: inherit; animation: geo-grow 2.4s ease-in-out infinite alternate; }
.geo-pcard-foot-status { font-size: 10.5px; color: var(--ds-color-on-surface-variant); white-space: nowrap; }

/* ===== 张开详情卡 ArticleDetailCard（可读性重设计） ===== */
.geo-dcard { background: var(--ds-color-surface); border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large); box-shadow: var(--ds-elevation-4);
  display: flex; flex-direction: column; overflow: hidden; height: 600px; }
.geo-dcard-head { display: flex; align-items: center; gap: 10px; padding: 16px 28px;
  border-bottom: 1px solid var(--ds-color-outline-variant); }
.geo-dsource-avatar { width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ds-color-surface-container-high), var(--ds-color-surface-container)); flex-shrink: 0; }
.geo-dsource-name { font-size: 13px; font-weight: 600; color: var(--ds-color-on-surface); }
.geo-dsource-sub { font-size: 11px; color: var(--ds-color-on-surface-variant); }
/* 缩放切换：大卡头部「收起」按钮（与小态右上角「放大」成对） */
.geo-dclose { margin-left: auto; width: 28px; height: 28px; border-radius: var(--ds-corner-small);
  display: flex; align-items: center; justify-content: center;
  background: var(--ds-color-surface-container); color: var(--ds-color-on-surface-variant); border: none; cursor: pointer; }
.geo-dclose:hover { background: var(--ds-color-surface-container-high); color: var(--ds-color-on-surface); }
.geo-dcard-body { padding: 26px 32px 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.geo-dcard-body::-webkit-scrollbar { width: 8px; }
.geo-dcard-body::-webkit-scrollbar-thumb { background: var(--ds-color-outline-variant); border-radius: 8px; }
.geo-dtitle { font-size: 25px; font-weight: 800; line-height: 1.45; letter-spacing: -.01em;
  margin: 0 0 14px; outline: none; }
.geo-dmeta { display: flex; align-items: center; gap: 8px; font-size: 12px;
  color: var(--ds-color-on-surface-variant); margin-bottom: 22px; }
.geo-dh { font-size: 19px; font-weight: 700; line-height: 1.5; margin: 18px 0 4px; outline: none; }
.geo-dp { font-size: 16px; line-height: 1.95; color: var(--ds-color-on-surface); margin: 0; outline: none; }
/* 正文读态（渲染 markdown，点进编辑）/ 编辑态（原始 markdown，保留换行） */
.geo-dp-read { cursor: text; }
.geo-dp-edit { font-size: 16px; line-height: 1.95; color: var(--ds-color-on-surface); outline: none;
  white-space: pre-wrap; word-break: break-word; border-radius: 6px;
  outline: 3px solid var(--ds-color-secondary); padding: 2px 6px; }
.geo-dtitle[contenteditable="true"]:focus, .geo-dh[contenteditable="true"]:focus,
.geo-dp[contenteditable="true"]:focus { outline: 3px solid var(--ds-color-secondary); border-radius: 6px; }
.geo-dfig { position: relative; margin: 18px 0 26px; }
/* 配图/封面按原图比例完整显示，不裁切（#3） */
.geo-dfig-img { display: block; width: 100%; height: auto; border-radius: var(--ds-corner-medium); }
/* 封面置于正文流首、随正文滚动（保留特性，不再固定矮横幅） */
.geo-dfig-cover { margin: 2px 0 22px; }
.geo-dcap { font-size: 11px; color: var(--ds-color-on-surface-variant); text-align: center; margin-top: 6px; }
.geo-dcard-foot { display: flex; align-items: center; gap: 10px; padding: 14px 28px;
  border-top: 1px solid var(--ds-color-outline-variant); }
.geo-dfoot-hint { font-size: 11px; color: var(--ds-color-on-surface-variant); }

/* ===== 据分改写 · 覆盖写入（ArticleDetailCard） ===== */
.geo-rewrite-badge {
  margin-left: auto;
  margin-right: 8px;
  font-family: var(--ds-typeface-code);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: var(--ds-corner-full);
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  display: none;
  flex-shrink: 0;
}
.geo-rewrite-badge.on {
  display: inline-block;
  color: var(--ds-color-on-surface);
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
}
.geo-rewrite-zone-new {
  position: relative;
  min-height: 88px;
  padding-bottom: 4px;
}
.geo-rewrite-zone-new-label {
  font-family: var(--ds-typeface-code);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-color-on-surface-variant);
  margin-bottom: 8px;
}
.geo-rewrite-zone-new-phase {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ds-color-on-surface-variant);
}
.geo-rewrite-draft-placeholder {
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
  margin: 4px 0 10px;
}
.geo-rewrite-zone-new .geo-dtitle,
.geo-rewrite-zone-new .geo-dh { color: var(--ds-color-on-surface); }
.geo-rewrite-zone-new .geo-dp-read { color: var(--ds-color-on-surface); margin-bottom: 10px; }
.geo-rewrite-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 14px;
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ds-color-on-surface);
}
.geo-rewrite-divider::before,
.geo-rewrite-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ds-color-outline-variant);
}
.geo-rewrite-divider-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: 1px solid var(--ds-color-on-surface);
  border-radius: var(--ds-corner-full);
  padding: 3px 10px;
  background: var(--ds-color-surface);
  font-weight: 560;
}
.geo-rewrite-divider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-color-on-surface);
  animation: geo-rewrite-pulse 1.4s ease-out infinite;
}
@keyframes geo-rewrite-pulse {
  0% { opacity: 1; transform: scale(1); }
  70% { opacity: 0.35; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}
.geo-rewrite-zone-old {
  opacity: 0.42;
  filter: grayscale(0.15);
  pointer-events: none;
  user-select: none;
}
.geo-rewrite-zone-old-label {
  font-family: var(--ds-typeface-code);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-color-on-surface-variant);
  margin-bottom: 8px;
}
.geo-rewrite-old-title {
  font-size: 15px !important;
  font-weight: 620 !important;
  margin-bottom: 8px !important;
  color: var(--ds-color-on-surface-variant);
}
.geo-rewrite-zone-old .geo-dh,
.geo-rewrite-zone-old .geo-dp-read {
  color: var(--ds-color-on-surface-variant);
}
.geo-rewrite-zone-old .geo-dp-read { margin-bottom: 8px; }
.geo-rewrite-preview .geo-dp-read { margin-bottom: 12px; }
.geo-rewrite-foot { gap: 10px; }
.geo-btn-follow {
  display: none;
  font-size: 12px;
  font-weight: 560;
  font-family: var(--ds-typeface-plain);
  padding: 5px 10px;
  border-radius: var(--ds-corner-small);
  border: 1px solid var(--ds-color-on-surface);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.geo-btn-follow.on { display: inline-block; }
.geo-btn-follow:hover { background: var(--ds-color-surface-container); }
/* 收拢预览：改写进行中 chip */
.geo-chip-rewrite {
  background: rgba(24, 24, 27, 0.08);
  color: var(--ds-color-on-surface);
  border: 1px solid var(--ds-color-outline-variant);
}

/* ===== ChildArticleNode 容器 ===== */
.geo-anode { position: relative; font-family: var(--ds-typeface-plain); }
.geo-anode-loaded-external {
  border: 1px dashed var(--ds-color-on-surface);
  border-radius: var(--ds-corner-medium);
}
/* 展开时抬升堆叠（配合 MindmapCanvas 的 node zIndex 一起生效） */
.geo-anode-expanded { z-index: 50; }

/* ===== GEO 被引用文章卡（P2） ===== */
/* 固定 1080×680（= adapter NODE_TYPE_MAP 登记尺寸）：卡内三栏各自滚动，
   真实渲染尺寸 = 喂给 V2 求解器的 bootstrap 尺寸，避免变高卡压到邻卡（行间重叠）。 */
.geo-cited-card {
  width: 1080px;
  height: 680px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  box-shadow: var(--ds-elevation-4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.geo-cited-card .cc-head {
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 返回按钮：关大卡回画布（幽灵态，与 design no-azure 一致） */
.geo-cited-card .cc-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  border-radius: var(--ds-corner-medium);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--ds-typeface-plain);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}

.geo-cited-card .cc-back:hover {
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface);
}

.geo-cited-card .cc-back svg {
  opacity: 0.7;
}

.geo-cited-card .cc-head-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ds-color-on-surface);
  flex: 1;
}

.geo-cited-card .cc-head-badge {
  font-size: 10px;
  font-family: var(--ds-typeface-code);
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  padding: 2px 8px;
  border-radius: var(--ds-corner-full);
  border: 1px solid var(--ds-color-outline-variant);
}

.geo-cited-card .cc-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: var(--c-ink, var(--ds-color-on-surface));
  color: var(--ds-color-surface));
  border: none;
  border-radius: var(--ds-corner-medium);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--ds-typeface-plain);
  cursor: pointer;
  letter-spacing: 0;
  transition: opacity 0.12s;
  flex-shrink: 0;
}

.geo-cited-card .cc-cta:hover {
  opacity: 0.84;
}

.geo-cited-card .cc-cta:disabled {
  opacity: 0.4;
  cursor: default;
}

.geo-cited-card .cc-cta svg {
  opacity: 0.85;
}

.geo-cited-card .cc-body {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* 左：关键词栏 */
.geo-cited-card .kw-pane {
  width: 196px;
  flex-shrink: 0;
  border-right: 1px solid var(--ds-color-outline-variant);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.geo-cited-card .kw-pane-head {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  flex-shrink: 0;
}

.geo-cited-card .kw-pane-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ds-color-on-surface-variant);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}

.geo-cited-card .kw-pane-label::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ds-color-on-surface);
  opacity: 0.4;
}

.geo-cited-card .ai-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-left: 3px;
}

.geo-cited-card .kw-pane-sub {
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.3;
}

.geo-cited-card .kw-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.geo-cited-card .kw-list::-webkit-scrollbar {
  width: 3px;
}

.geo-cited-card .kw-list::-webkit-scrollbar-thumb {
  background: var(--ds-color-surface-container-high);
  border-radius: 2px;
}

.geo-cited-card .kw-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: var(--ds-corner-small);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}

.geo-cited-card .kw-item:hover {
  background: var(--ds-color-surface-container);
}

.geo-cited-card .kw-item.active {
  background: var(--ds-color-surface-container);
  border-color: var(--ds-color-on-surface-variant);
}

.geo-cited-card .kw-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ds-color-on-surface);
  flex-shrink: 0;
  opacity: 0.2;
}

.geo-cited-card .kw-item.active .kw-dot {
  opacity: 0.8;
}

.geo-cited-card .kw-text {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ds-color-on-surface-variant);
  flex: 1;
}

.geo-cited-card .kw-item.active .kw-text {
  color: var(--ds-color-on-surface);
  font-weight: 600;
}

.geo-cited-card .kw-count {
  font-family: var(--ds-typeface-code);
  font-size: 9.5px;
  color: var(--ds-color-on-surface-variant);
  flex-shrink: 0;
  min-width: 14px;
  text-align: right;
}

.geo-cited-card .kw-pane-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--ds-color-outline-variant);
  font-size: 9.5px;
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  flex-shrink: 0;
}

/* 中：文章列表（复用 .geo-pcard，仅在本卡内覆盖尺寸与内部样式） */
.geo-cited-card .list-pane {
  width: 272px;
  flex-shrink: 0;
  border-right: 1px solid var(--ds-color-outline-variant);
  overflow-y: auto;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.geo-cited-card .list-pane::-webkit-scrollbar {
  width: 3px;
}

.geo-cited-card .list-pane::-webkit-scrollbar-thumb {
  background: var(--ds-color-surface-container-high);
  border-radius: 2px;
}

.geo-cited-card .geo-pcard {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  padding: 11px 12px;
  cursor: pointer;
  box-shadow: var(--ds-elevation-1);
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.geo-cited-card .geo-pcard:hover {
  box-shadow: var(--ds-elevation-4);
  transform: translateY(-1px);
}

.geo-cited-card .geo-pcard.selected {
  border-color: var(--ds-color-on-surface);
  box-shadow: 0 0 0 1.5px var(--ds-color-on-surface), var(--ds-elevation-1);
}

.geo-cited-card .geo-pcard-index {
  position: absolute;
  top: 9px;
  right: 10px;
  font-size: 9px;
  font-family: var(--ds-typeface-code);
  color: var(--ds-color-on-surface-variant);
  font-weight: 600;
}

.geo-cited-card .geo-pcard-source {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  padding-right: 22px;
}

.geo-cited-card .geo-pcard-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ds-color-surface-container-high), var(--ds-color-surface-container));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 700;
  color: var(--ds-color-on-surface-variant);
  flex-shrink: 0;
}

.geo-cited-card .geo-pcard-site {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.geo-cited-card .geo-pcard-title {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ds-color-on-surface);
  margin-bottom: 4px;
  padding-right: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.geo-cited-card .geo-pcard-excerpt {
  font-size: 10px;
  line-height: 1.5;
  color: var(--ds-color-on-surface-variant);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.geo-cited-card .geo-pcard-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
}

.geo-cited-card .geo-pcard-time {
  font-family: var(--ds-typeface-code);
  font-size: 9px;
  color: var(--ds-color-on-surface-variant);
  margin-left: auto;
}

.geo-cited-card .geo-chip {
  display: inline-block;
  padding: 1.5px 6px;
  border-radius: var(--ds-corner-full);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.geo-cited-card .geo-chip-platform {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  border: 1px solid var(--ds-color-outline-variant);
}

/* 右：详情（复用 .geo-dcard，仅在本卡内覆盖为 pane full-height） */
.geo-cited-card .detail-pane {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.geo-cited-card .geo-dcard {
  background: var(--ds-color-surface);
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  width: auto;
}

.geo-cited-card .geo-dcard-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  flex-shrink: 0;
}

.geo-cited-card .geo-dsource-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ds-color-surface-container-high), var(--ds-color-surface-container));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-color-on-surface-variant);
}

.geo-cited-card .geo-dsource-meta {
  flex: 1;
  min-width: 0;
}

.geo-cited-card .geo-dsource-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
}

.geo-cited-card .geo-dsource-sub {
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
}

.geo-cited-card .geo-dcard-body {
  padding: 20px 24px 12px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.geo-cited-card .geo-dcard-body::-webkit-scrollbar {
  width: 4px;
}

.geo-cited-card .geo-dcard-body::-webkit-scrollbar-thumb {
  background: var(--ds-color-outline-variant);
  border-radius: 4px;
}

.geo-cited-card .geo-dtitle {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0;
  margin: 0 0 8px;
  color: var(--ds-color-on-surface);
}

.geo-cited-card .geo-dmeta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: var(--ds-color-on-surface-variant);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.geo-cited-card .geo-dp,
.geo-cited-card .geo-md--detail {
  font-size: 13px;
  line-height: 1.85;
  color: var(--ds-color-on-surface);
}

.geo-cited-card .geo-dp {
  margin: 0 0 12px;
}

.geo-cited-card .geo-md--detail p {
  margin: 0 0 12px;
}

.geo-cited-card .geo-dcard-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-top: 1px solid var(--ds-color-outline-variant);
  flex-shrink: 0;
}

.geo-cited-card .geo-dfoot-hint {
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
}

.geo-cited-card .view-source-link {
  font-size: 10.5px;
  color: var(--ds-color-on-surface);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 6px;
  background: var(--ds-color-surface-container);
  font-weight: 600;
  transition: background 0.12s;
}

.geo-cited-card .view-source-link:hover {
  background: var(--ds-color-surface-container-high);
}

.geo-cited-card .view-source-link svg {
  opacity: 0.55;
}

.geo-cited-card .cc-empty {
  margin: auto;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

/* ===== GEO 情报详情大卡 GeoIntelNode（块二「AI 都在推荐谁」1:1 还原） =====
   固定 1080×720（= cardMeta geoIntel estimate）：grid flex:1 内部滚动，余下区块固定高，
   real 渲染尺寸 = bootstrap 尺寸，避免变高卡压邻卡。Token 全用 --ds-*；console no-azure：
   蓝色只在数据条（s-bar/live dot），danger/红只在状态文字（落后/未上榜），CTA ink-on-ink。 */
.geo-intel-card {
  position: relative;
  width: 1080px;
  height: 720px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-extra-large);
  box-shadow: var(--ds-elevation-4);
  padding: 34px 38px 30px;
  font-family: var(--ds-typeface-plain);
  color: var(--ds-color-on-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 返回（关大卡回画布，幽灵态，与 cited-card cc-back 一致） */
.geo-intel-card .gi-back {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  border-radius: var(--ds-corner-medium);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--ds-typeface-plain);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.geo-intel-card .gi-back:hover { background: var(--ds-color-surface-container-high); color: var(--ds-color-on-surface); }
.geo-intel-card .gi-back svg { opacity: 0.7; }

/* loading / empty 居中态（卡尺寸不变，避免重测量） */
.geo-intel-card .gi-state { margin: auto; color: var(--ds-color-on-surface-variant); font-size: 13px; }

/* 卡头 */
.geo-intel-card .gi-ch { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-right: 76px; }
.geo-intel-card .gi-kick { font-family: var(--ds-typeface-code); font-size: 11px; letter-spacing: 0.13em; color: var(--ds-color-on-surface-variant); text-transform: uppercase; margin-bottom: 11px; }
.geo-intel-card .gi-title { display: flex; align-items: center; gap: 9px; font-size: 23px; font-weight: 700; letter-spacing: -0.018em; }
.geo-intel-card .gi-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-color-primary); box-shadow: 0 0 0 3px rgba(77, 166, 255, 0.16); }
.geo-intel-card .gi-sub { margin-top: 11px; font-size: 13.5px; line-height: 1.65; color: var(--ds-color-on-surface-variant); max-width: 680px; }
.geo-intel-card .gi-sub b { color: var(--ds-color-on-surface); font-weight: 700; }
.geo-intel-card .gi-meta { flex-shrink: 0; text-align: right; font-family: var(--ds-typeface-code); font-size: 11.5px; line-height: 1.9; color: var(--ds-color-on-surface-variant); }
.geo-intel-card .gi-meta b { color: var(--ds-color-on-surface-variant); font-weight: 600; }

/* KPI 数据行 */
.geo-intel-card .gi-kpi { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 26px; border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-large); overflow: hidden; flex-shrink: 0; }
.geo-intel-card .gi-k { padding: 18px 22px; border-left: 1px solid var(--ds-color-outline-variant); }
.geo-intel-card .gi-k:first-child { border-left: none; }
.geo-intel-card .gi-k-lab { font-size: 11.5px; color: var(--ds-color-on-surface-variant); display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.geo-intel-card .gi-k-val { font-family: var(--ds-typeface-code); font-variant-numeric: tabular-nums; font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.geo-intel-card .gi-k-val .unit { font-size: 13px; font-weight: 500; color: var(--ds-color-on-surface-variant); margin-left: 3px; letter-spacing: 0; }
.geo-intel-card .gi-k-sub { margin-top: 8px; font-size: 11px; color: var(--ds-color-on-surface-variant); font-family: var(--ds-typeface-code); }
.geo-intel-card .gi-k-sub.down { color: var(--ds-color-error); }
.geo-intel-card .gi-k-sub.up { color: var(--ds-color-secondary); }
.geo-intel-card .gi-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--ds-color-error); }
.geo-intel-card .gi-mini-bar { height: 3px; border-radius: 2px; background: var(--ds-color-surface-container-high); margin-top: 9px; overflow: hidden; }
.geo-intel-card .gi-mini-bar i { display: block; height: 100%; background: var(--ds-color-on-surface); border-radius: 2px; }

/* 两榜 grid（占满剩余高度，列内滚动） */
.geo-intel-card .gi-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 24px; border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-large); overflow: hidden; flex: 1; min-height: 0; }
.geo-intel-card .gi-col { padding: 20px 24px 22px; overflow-y: auto; }
.geo-intel-card .gi-col + .gi-col { border-left: 1px solid var(--ds-color-outline-variant); }
.geo-intel-card .gi-col::-webkit-scrollbar { width: 3px; }
.geo-intel-card .gi-col::-webkit-scrollbar-thumb { background: var(--ds-color-surface-container-high); border-radius: 2px; }
.geo-intel-card .gi-cap { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; padding-bottom: 11px; border-bottom: 1px solid var(--ds-color-outline-variant); }
.geo-intel-card .gi-cap h4 { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.geo-intel-card .gi-cap h4 .n { font-family: var(--ds-typeface-code); font-size: 10px; color: var(--ds-color-on-surface-variant); }
.geo-intel-card .gi-cap .sub { font-family: var(--ds-typeface-code); font-size: 10px; color: var(--ds-color-on-surface-variant); }
.geo-intel-card .gi-col-empty { padding: 18px 2px; font-size: 12px; color: var(--ds-color-on-surface-variant); }

/* 榜 A：谁被 AI 推荐 */
.geo-intel-card .gi-grow { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--ds-color-outline-variant); }
.geo-intel-card .gi-grow:last-child { border-bottom: none; }
.geo-intel-card .gi-grow .g-main { flex: 1; min-width: 0; }
.geo-intel-card .gi-grow .g-kw { font-size: 12.5px; font-weight: 600; letter-spacing: -0.006em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geo-intel-card .gi-grow .g-lead { font-family: var(--ds-typeface-code); font-size: 10px; color: var(--ds-color-on-surface-variant); margin-top: 3px; }
.geo-intel-card .gi-grow .g-stand { font-family: var(--ds-typeface-code); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.geo-intel-card .gi-grow .g-stand.bad { color: var(--ds-color-error); }
.geo-intel-card .gi-grow .g-stand.mid { color: var(--ds-color-on-surface-variant); }
.geo-intel-card .gi-grow .g-stand.ok { color: var(--ds-color-on-surface); }

/* 榜 B：AI 引用哪些信源 */
.geo-intel-card .gi-srow { display: flex; align-items: center; gap: 11px; padding: 10px 2px; border-bottom: 1px solid var(--ds-color-outline-variant); }
.geo-intel-card .gi-srow:last-child { border-bottom: none; }
.geo-intel-card .gi-srow .s-logo { width: 26px; height: 26px; border-radius: 7px; background: var(--ds-color-surface-container); border: 1px solid var(--ds-color-outline-variant); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.geo-intel-card .gi-srow .s-mid { flex: 1; min-width: 0; }
.geo-intel-card .gi-srow .s-name { font-size: 12.5px; font-weight: 600; }
.geo-intel-card .gi-srow .s-bar { height: 4px; border-radius: 2px; background: var(--ds-color-surface-container); margin-top: 6px; }
.geo-intel-card .gi-srow .s-bar i { display: block; height: 100%; border-radius: 2px; background: var(--ds-color-primary); }
.geo-intel-card .gi-srow .s-cite { font-family: var(--ds-typeface-code); font-size: 11.5px; font-weight: 600; color: var(--ds-color-on-surface-variant); width: 42px; text-align: right; flex-shrink: 0; }
.geo-intel-card .gi-srow .s-cite .u { font-size: 9px; color: var(--ds-color-on-surface-variant); font-weight: 400; }
.geo-intel-card .gi-srow .s-in { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: var(--ds-corner-full); white-space: nowrap; flex-shrink: 0; }
.geo-intel-card .gi-srow .s-in.yes { background: var(--ds-color-on-surface); color: var(--ds-color-surface); }
.geo-intel-card .gi-srow .s-in.no { border: 1px solid var(--ds-color-on-surface-variant); color: var(--ds-color-on-surface-variant); }

/* 行动条 */
.geo-intel-card .gi-nextbar { display: flex; align-items: center; gap: 18px; margin-top: 24px; padding: 18px 22px; background: var(--ds-color-surface-container); border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-large); flex-shrink: 0; }
.geo-intel-card .gi-nextbar .nb-ico { width: 34px; height: 34px; border-radius: var(--ds-corner-small); background: var(--ds-color-surface); border: 1px solid var(--ds-color-outline-variant); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; }
.geo-intel-card .gi-nextbar .nb-txt { flex: 1; font-size: 13px; line-height: 1.6; color: var(--ds-color-on-surface-variant); }
.geo-intel-card .gi-nextbar .nb-txt b { color: var(--ds-color-on-surface); font-weight: 700; }
.geo-intel-card .gi-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 20px; border-radius: var(--ds-corner-small); font-size: 13px; font-weight: 700; color: var(--ds-color-on-surface); background: var(--ds-color-on-surface); border: 1px solid var(--ds-color-on-surface); cursor: pointer; font-family: var(--ds-typeface-plain); }
.geo-intel-card .gi-cta:hover { box-shadow: var(--ds-elevation-4); }

/* ============================================================
   情报监控 · 融合总览卡（块一竞品空态 + 块二 GEO 接真实指标）
   1:1 还原 docs/design/2026-06-13-intel-monitor-two-blocks.html 的 .intel-board
   ============================================================ */
/* 固定高容器（对齐 geoIntel .geo-intel-card 同源，spec 2026-06-15 §3/§9.7 决策5）：
   加载→就绪三态共用同一高度，正文超出走内部滚动，消除聚焦时 +76px 纵向跳变。 */
.intel-board { position: relative; width: 1080px; max-width: 100%; height: 620px; display: flex; flex-direction: column; background: var(--ds-color-surface); border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-extra-large); box-shadow: var(--ds-elevation-4); overflow: hidden; font-family: var(--ds-typeface-plain); color: var(--ds-color-on-surface); }

/* 加载 / 错误态居中（margin:auto 填满固定卡高，卡尺寸不变 → 无重测量跳变，同 gi-state） */
.intel-board .ib-state { margin: auto; padding: 40px; font-size: 14px; color: var(--ds-color-on-surface-variant); }

/* 共享抬头 */
.intel-board .ib-head { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 32px 18px; }
.intel-board .ib-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.intel-board .ib-title .mk { width: 24px; height: 24px; border-radius: 7px; background: var(--ds-color-on-surface); color: var(--ds-color-surface); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.intel-board .ib-title .sep { color: var(--ds-color-on-surface-variant); font-weight: 400; }
.intel-board .ib-title .ib-prod { color: var(--ds-color-on-surface-variant); font-weight: 600; }
.intel-board .ib-meta { font-family: var(--ds-typeface-code); font-size: 11px; color: var(--ds-color-on-surface-variant); text-align: right; }

/* 横跨两块的情报仪表条 */
.intel-board .ib-strip { display: grid; flex-shrink: 0; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ds-color-outline-variant); border-bottom: 1px solid var(--ds-color-outline-variant); background: #fcfcfc; }
.intel-board .ib-strip .s { padding: 13px 0 13px 22px; border-left: 1px solid var(--ds-color-outline-variant); }
.intel-board .ib-strip .s:first-child { border-left: none; padding-left: 32px; }
.intel-board .ib-strip .s-lab { font-size: 11px; color: var(--ds-color-on-surface-variant); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.intel-board .ib-strip .s-val { font-family: var(--ds-typeface-code); font-size: 23px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.intel-board .ib-strip .s-val .u { font-size: 12px; color: var(--ds-color-on-surface-variant); font-weight: 500; margin-left: 2px; }
.intel-board .ib-strip .s-sub { font-family: var(--ds-typeface-code); font-size: 10px; margin-top: 7px; color: var(--ds-color-on-surface-variant); }
.intel-board .ib-strip .s-sub .bad { color: var(--ds-color-error); }
.intel-board .ib-strip .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.intel-board .ib-strip .dot.amber { background: var(--ds-color-warning); }
.intel-board .ib-strip .dot.danger { background: var(--ds-color-error); }

/* 两道车道 + 中线 */
.intel-board .ib-cols { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
.intel-board .ib-cols::after { content: ""; position: absolute; top: 24px; bottom: 24px; left: 50%; width: 1px; background: var(--ds-color-outline-variant); }
.intel-board .ib-lane { padding: 22px 30px 24px; min-width: 0; overflow-y: auto; }
.intel-board .ib-lane .lane-kick { font-family: var(--ds-typeface-code); font-size: 11px; letter-spacing: 0.13em; color: var(--ds-color-on-surface-variant); text-transform: uppercase; margin-bottom: 11px; }
.intel-board .ib-lane .lane-title { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; letter-spacing: -0.014em; }
.intel-board .ib-lane .lane-title .live { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-color-primary); box-shadow: 0 0 0 3px rgba(77, 166, 255, 0.16); }

/* 车道空态（块一竞品社媒短视频本期无数据源） */
.intel-board .ib-lane .lane-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 220px; margin-top: 16px; border: 1px dashed var(--ds-color-outline-variant); border-radius: var(--ds-corner-large); background: var(--ds-color-surface-container); padding: 24px; text-align: center; }
.intel-board .ib-lane .lane-empty .le-tag { font-family: var(--ds-typeface-code); font-size: 11px; letter-spacing: 0.08em; color: var(--ds-color-on-surface-variant); text-transform: uppercase; }
.intel-board .ib-lane .lane-empty .le-txt { font-size: 12.5px; color: var(--ds-color-on-surface-variant); line-height: 1.6; max-width: 280px; }

/* 北极星指标 + sparkline */
.intel-board .lane-metric { margin-top: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--ds-color-outline-variant); }
.intel-board .lm-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.intel-board .lm-lab { font-size: 11px; color: var(--ds-color-on-surface-variant); margin-bottom: 8px; }
.intel-board .lm-val { font-family: var(--ds-typeface-code); font-size: 31px; font-weight: 700; line-height: 0.92; letter-spacing: -0.022em; font-variant-numeric: tabular-nums; }
.intel-board .lm-val .u { font-size: 13px; font-weight: 500; color: var(--ds-color-on-surface-variant); margin-left: 3px; letter-spacing: 0; }
.intel-board .lm-trend { display: flex; align-items: center; gap: 9px; padding-bottom: 3px; }
.intel-board .lm-ctx { font-family: var(--ds-typeface-code); font-size: 10.5px; color: var(--ds-color-on-surface-variant); margin-top: 11px; }
.intel-board .lm-ctx b { color: var(--ds-color-on-surface-variant); font-weight: 600; }
.intel-board .spark { display: block; }
.intel-board .spark polyline { fill: none; stroke: var(--ds-color-outline-variant); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.intel-board .spark.up circle { fill: var(--ds-color-on-surface); }
.intel-board .spark.down circle { fill: var(--ds-color-error); }
.intel-board .delta { font-family: var(--ds-typeface-code); font-size: 12px; font-weight: 600; white-space: nowrap; }
.intel-board .delta.up { color: var(--ds-color-on-surface); }
.intel-board .delta.down { color: var(--ds-color-error); }
.intel-board .delta.none { color: var(--ds-color-on-surface-variant); }

/* Top3 榜单（GEO 车道） */
.intel-board .lane-listlab { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--ds-color-on-surface-variant); margin: 14px 0 4px; }
.intel-board .lane-listlab .more { font-family: var(--ds-typeface-code); font-size: 10px; font-weight: 400; }
.intel-board .lane-list { display: flex; flex-direction: column; }
.intel-board .lane-row { display: grid; grid-template-columns: 16px 34px 1fr auto; align-items: center; gap: 11px; padding: 10px 8px; border-bottom: 1px solid var(--ds-color-outline-variant); transition: background 0.14s; cursor: pointer; margin: 0 -8px; }
.intel-board .lane-row:last-child { border-bottom: none; }
.intel-board .lane-row:hover { background: #fafafa; }
.intel-board .lane-list .lane-row:first-child .lr-rank { color: var(--ds-color-on-surface); font-weight: 700; }
.intel-board .lane-empty-row { padding: 16px 0; font-size: 12px; color: var(--ds-color-on-surface-variant); }
.intel-board .lr-rank { font-family: var(--ds-typeface-code); font-size: 12px; font-weight: 600; color: var(--ds-color-on-surface-variant); text-align: center; }
.intel-board .lr-mono { width: 30px; height: 30px; border-radius: 50%; background: var(--ds-color-surface-container); border: 1px solid var(--ds-color-outline-variant); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin: 0 auto; }
.intel-board .lr-main { min-width: 0; }
.intel-board .lr-title { font-size: 12.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.006em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.intel-board .lr-sub { font-family: var(--ds-typeface-code); font-size: 9.5px; color: var(--ds-color-on-surface-variant); margin-top: 3px; }
.intel-board .lr-metric { font-family: var(--ds-typeface-code); font-size: 13px; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.intel-board .lr-stand { font-family: var(--ds-typeface-code); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.intel-board .lr-stand.bad { color: var(--ds-color-error); }
.intel-board .lr-stand.mid { color: var(--ds-color-on-surface-variant); }
.intel-board .lr-stand.ok { color: var(--ds-color-on-surface); }

/* 底部双入口 */
.intel-board .ib-foot { display: flex; flex-shrink: 0; align-items: center; gap: 18px; padding: 15px 32px; border-top: 1px solid var(--ds-color-outline-variant); background: var(--ds-color-surface-container); }
.intel-board .ib-foot .pri { flex: 1; font-size: 12.5px; line-height: 1.5; color: var(--ds-color-on-surface-variant); }
.intel-board .ib-foot .pri .lead { font-weight: 700; color: var(--ds-color-on-surface); margin-right: 7px; }
.intel-board .ib-foot .pri b { color: var(--ds-color-on-surface); font-weight: 600; }
.intel-board .ib-foot .acts { display: flex; gap: 9px; flex-shrink: 0; }
.intel-board .ib-foot .lnk { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 15px; border-radius: var(--ds-corner-small); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; color: var(--ds-color-on-surface); background: var(--ds-color-on-surface); border: 1px solid var(--ds-color-on-surface); font-family: var(--ds-typeface-plain); }
.intel-board .ib-foot .lnk:hover { box-shadow: var(--ds-elevation-4); }
.intel-board .ib-foot .lnk.ghost { color: var(--ds-color-on-surface-variant); background: var(--ds-color-surface); border: 1px solid var(--ds-color-on-surface-variant); cursor: not-allowed; }
.intel-board .ib-foot .lnk.ghost:hover { box-shadow: none; }

/* GEO 创新 cockpit：一屏态 */
.intel-board .gio-entry { flex: 1; min-height: 0; padding: 22px 32px 30px; display: grid; grid-template-rows: auto auto 1fr; gap: 18px; background: var(--ds-color-surface); }
.gio-kick { font-family: var(--ds-typeface-code); font-size: 11px; font-weight: 700; letter-spacing: 0; color: var(--ds-color-on-surface-variant); text-transform: uppercase; }
.intel-board .gio-entry-brief { display: flex; flex-direction: column; gap: 9px; }
.intel-board .gio-entry-brief h3, .geo-intel-card .gio-pinned-brief h3 { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: 0; color: var(--ds-color-on-surface); }
.intel-board .gio-entry-brief p, .geo-intel-card .gio-pinned-brief p { margin: 0; max-width: 760px; font-size: 14px; line-height: 1.6; color: var(--ds-color-on-surface-variant); }
.gio-entry-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.gio-entry-tags > span, .gio-loop-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--ds-corner-full); border: 1px solid var(--ds-color-outline-variant); background: var(--ds-color-surface-container); color: var(--ds-color-on-surface-variant); font-size: 11px; font-weight: 700; }
.gio-loop-badge.is-good { color: var(--ds-color-secondary); background: rgba(34, 197, 94, 0.10); }
.gio-loop-badge.is-pending, .gio-loop-badge.is-warn { color: var(--ds-color-warning); background: rgba(245, 158, 11, 0.12); }
.gio-loop-badge.is-bad { color: var(--ds-color-error); background: rgba(239, 68, 68, 0.10); }
.intel-board .gio-entry-nums { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-large); overflow: hidden; }
.intel-board .gio-entry-num { padding: 14px 16px; border-left: 1px solid var(--ds-color-outline-variant); min-width: 0; }
.intel-board .gio-entry-num:first-child { border-left: none; }
.gio-num-label { font-size: 11px; color: var(--ds-color-on-surface-variant); font-weight: 700; line-height: 1.35; }
.gio-num-value { margin-top: 8px; font-family: var(--ds-typeface-code); font-size: 24px; font-weight: 800; line-height: 1; color: var(--ds-color-on-surface); font-variant-numeric: tabular-nums; }
.gio-num-value span { margin-left: 2px; font-size: 12px; font-weight: 600; color: var(--ds-color-on-surface-variant); }
.gio-num-sub { margin-top: 7px; font-size: 10.5px; color: var(--ds-color-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intel-board .gio-entry-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; min-height: 0; }
.intel-board .gio-entry-rank, .intel-board .gio-entry-action { border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-large); background: var(--ds-color-surface-container); padding: 16px; min-width: 0; overflow: hidden; }
.gio-entry-section-title { font-size: 11px; font-weight: 800; color: var(--ds-color-on-surface-variant); margin-bottom: 10px; }
.gio-entry-empty { padding: 18px 0; color: var(--ds-color-on-surface-variant); font-size: 12px; }
.gio-entry-rank-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--ds-color-outline-variant); }
.gio-entry-rank-row:first-of-type { border-top: none; }
.gio-entry-rank-row b { display: block; color: var(--ds-color-on-surface); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gio-entry-rank-row span { display: block; margin-top: 3px; color: var(--ds-color-on-surface-variant); font-family: var(--ds-typeface-code); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gio-entry-rank-row i { font-style: normal; font-size: 11px; font-weight: 800; white-space: nowrap; }
.gio-entry-rank-row i.is-good { color: var(--ds-color-secondary); }
.gio-entry-rank-row i.is-warn { color: var(--ds-color-warning); }
.gio-entry-rank-row i.is-bad { color: var(--ds-color-error); }
.gio-entry-rank-row i.is-muted { color: var(--ds-color-on-surface-variant); }
.intel-board .gio-entry-action { display: flex; flex-direction: column; }
.intel-board .gio-entry-action p { margin: 0; color: var(--ds-color-on-surface); font-size: 13px; line-height: 1.55; font-weight: 700; }
.intel-board .gio-entry-action small { display: block; margin-top: 8px; color: var(--ds-color-on-surface-variant); font-size: 11px; line-height: 1.5; }
.intel-board .gio-entry-action .lnk { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: var(--ds-corner-small); background: var(--ds-color-on-surface); color: var(--ds-color-surface); border: 1px solid var(--ds-color-on-surface); font-family: var(--ds-typeface-plain); font-size: 12px; font-weight: 800; cursor: pointer; }

/* GEO 情报展开态：钉住简报 + 分段专业面板 */
.geo-intel-card .gio-expand { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 0 24px 24px; }
.geo-intel-card .gio-pinned { flex-shrink: 0; display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(420px, 2fr); grid-template-areas: "brief scores" "engines engines"; gap: 14px; }
.geo-intel-card .gio-pinned-brief { grid-area: brief; border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-large); background: var(--ds-color-surface-container); padding: 16px; }
.geo-intel-card .gio-score-strip { grid-area: scores; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-large); overflow: hidden; background: var(--ds-color-surface); }
.geo-intel-card .gio-score { padding: 13px 12px; border-left: 1px solid var(--ds-color-outline-variant); min-width: 0; }
.geo-intel-card .gio-score:first-child { border-left: none; }
.geo-intel-card .gio-score span { display: block; color: var(--ds-color-on-surface-variant); font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geo-intel-card .gio-score b { display: block; margin-top: 8px; color: var(--ds-color-on-surface); font-family: var(--ds-typeface-code); font-size: 21px; line-height: 1; font-variant-numeric: tabular-nums; }
.geo-intel-card .gio-score i { margin-left: 2px; color: var(--ds-color-on-surface-variant); font-size: 11px; font-style: normal; font-weight: 600; }
.geo-intel-card .gio-engine-access { grid-area: engines; display: flex; flex-wrap: wrap; gap: 8px; }
.geo-intel-card .gio-engine-access span { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 4px 10px; border-radius: var(--ds-corner-full); border: 1px solid var(--ds-color-outline-variant); background: var(--ds-color-surface); color: var(--ds-color-on-surface-variant); font-size: 11px; font-weight: 700; }
.geo-intel-card .gio-engine-access span.is-muted { color: var(--ds-color-on-surface-variant); background: var(--ds-color-surface-container); }
.geo-intel-card .gio-engine-access b { color: var(--ds-color-on-surface); font-size: 11.5px; }
.gio-seg { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-large); overflow: hidden; background: var(--ds-color-surface); }
.gio-seg-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--ds-color-outline-variant); background: var(--ds-color-surface-container); }
.gio-seg-tab { height: 32px; padding: 0 13px; border-radius: var(--ds-corner-small); border: 1px solid transparent; background: transparent; color: var(--ds-color-on-surface-variant); font-family: var(--ds-typeface-plain); font-size: 12px; font-weight: 800; cursor: pointer; }
.gio-seg-tab.is-active { background: var(--ds-color-on-surface); color: var(--ds-color-surface); border-color: var(--ds-color-on-surface); }
.gio-seg-panel { flex: 1; min-height: 0; overflow: auto; padding: 16px; }
.gio-chart-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; }
.gio-chart-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gio-chart { border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-large); background: var(--ds-color-surface); padding: 14px; min-width: 0; }
.gio-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.gio-chart-head h4 { margin: 0; font-size: 13px; font-weight: 800; color: var(--ds-color-on-surface); letter-spacing: 0; }
.gio-chart-head span { color: var(--ds-color-on-surface-variant); font-family: var(--ds-typeface-code); font-size: 10.5px; white-space: nowrap; }
.gio-chart-empty { grid-column: 1 / -1; padding: 18px 0; color: var(--ds-color-on-surface-variant); font-size: 12px; }
.gio-heat-grid { display: grid; align-items: stretch; border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-medium); overflow: hidden; }
.gio-heat-th, .gio-heat-query, .gio-heat-cell { padding: 9px 10px; border-left: 1px solid var(--ds-color-outline-variant); border-top: 1px solid var(--ds-color-outline-variant); font-size: 11.5px; }
.gio-heat-th { border-top: none; color: var(--ds-color-on-surface-variant); background: var(--ds-color-surface-container); font-weight: 800; }
.gio-heat-th:first-child, .gio-heat-query { border-left: none; }
.gio-heat-query { color: var(--ds-color-on-surface); font-weight: 700; }
.gio-tone { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--ds-corner-full); border: 1px solid var(--ds-color-outline-variant); color: var(--ds-color-on-surface-variant); background: var(--ds-color-surface-container); font-size: 10.5px; font-weight: 800; }
.gio-tone--good { color: var(--ds-color-secondary); background: rgba(34, 197, 94, 0.10); }
.gio-tone--warn, .gio-tone--pending { color: var(--ds-color-warning); background: rgba(245, 158, 11, 0.12); }
.gio-tone--bad { color: var(--ds-color-error); background: rgba(239, 68, 68, 0.10); }
.gio-stack-list, .gio-source-list, .gio-loop-list { display: flex; flex-direction: column; gap: 9px; }
.gio-stack-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.gio-stack-meta b { color: var(--ds-color-on-surface); }
.gio-stack-meta span { color: var(--ds-color-on-surface-variant); font-family: var(--ds-typeface-code); font-size: 10.5px; }
.gio-stack-bar { height: 5px; margin-top: 6px; border-radius: var(--ds-corner-full); background: var(--ds-color-surface-container); overflow: hidden; }
.gio-stack-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ds-color-on-surface); }
.gio-source-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ds-color-outline-variant); }
.gio-source-row:first-child { border-top: none; }
.gio-source-logo { width: 28px; height: 28px; border-radius: var(--ds-corner-small); display: flex; align-items: center; justify-content: center; background: var(--ds-color-surface-container); border: 1px solid var(--ds-color-outline-variant); font-size: 11px; font-weight: 800; }
.gio-source-main { min-width: 0; }
.gio-source-main b, .gio-source-main span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gio-source-main b { color: var(--ds-color-on-surface); font-size: 12px; }
.gio-source-main span, .gio-source-count, .gio-source-presence { color: var(--ds-color-on-surface-variant); font-size: 10.5px; font-weight: 700; }
.gio-loop-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--ds-color-outline-variant); }
.gio-loop-row:first-child { border-top: none; }
.gio-loop-query { color: var(--ds-color-on-surface); font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gio-loop-states { display: flex; align-items: center; gap: 8px; color: var(--ds-color-on-surface-variant); font-size: 11px; font-weight: 700; }
.gio-evidence-panel .gi-ch { margin-top: 0; }
.gi-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.gi-flow-step { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-small); background: var(--ds-color-surface-container); }
.gi-flow-step span { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ds-color-on-surface); color: var(--ds-color-surface); font-size: 10px; font-weight: 800; flex: 0 0 auto; }
.gi-flow-step b { font-size: 12px; color: var(--ds-color-surface); white-space: nowrap; }
.gi-evidence-table { min-width: 0; }
.geo-evidence-block { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-small); background: var(--ds-color-surface-container); }
.geo-evidence-list { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11px; color: var(--ds-color-on-surface-variant); }
.geo-evidence-list:first-child { margin-top: 0; }
.geo-evidence-list b { color: var(--ds-color-on-surface); margin-right: 2px; }
.geo-evidence-list span { padding: 4px 7px; border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-full); background: var(--ds-color-surface); }
.geo-evidence-list--danger span { color: var(--ds-color-error); border-color: rgba(239, 68, 68, 0.24); }

/* heading inline markdown (h2/h3 内嵌) */
.geo-md.geo-md--inline { display: inline; }
.geo-md.geo-md--inline p { display: inline; margin: 0; }
.mon-dash,
.mon-dash *,
.mon-dash *::before,
.mon-dash *::after {
  box-sizing: border-box;
}

.mon-dash {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-lg);
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ds-sys-space-xl);
  padding-top: 64px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
}

.mon-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 方案 C 指挥条（Task 1） ---------- */
.mon-cmdbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-sys-space-xl);
  flex: none;
}

.mon-cmdbar__intro {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mon-cmdbar__title {
  margin: var(--ds-sys-space-sm) 0 var(--ds-sys-space-xs);
  color: var(--ds-color-on-surface);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.mon-cmdbar__tagline {
  margin: 0;
  max-width: 44ch;
  color: var(--ds-color-on-surface-variant);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.mon-cmdbar__status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sys-space-sm) var(--ds-sys-space-lg);
  margin-top: var(--ds-sys-space-lg);
}

.mon-cmdbar__si {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  font-size: 12.5px;
  color: var(--ds-color-on-surface-variant);
}

.mon-cmdbar__si-k {
  color: var(--ds-color-on-surface-variant);
}

.mon-cmdbar__si-v {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
}

.mon-cmdbar__si-ok {
  width: 6px;
  height: 6px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-secondary);
  flex: none;
}

.mon-cmdbar__actions {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  flex: none;
}

.mon-cmdbar__seg {
  display: inline-flex;
  height: 38px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  overflow: hidden;
}

.mon-cmdbar__seg-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-xs);
  padding: 0 var(--ds-sys-space-lg);
  font-family: var(--ds-typeface-plain);
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  border-right: 1px solid var(--ds-color-outline-variant);
}

.mon-cmdbar__seg-btn:last-child {
  border-right: 0;
}

.mon-cmdbar__seg-btn:hover:not(.mon-cmdbar__seg-btn--active):not(:disabled) {
  background: var(--ds-color-surface-container);
}

.mon-cmdbar__seg-btn--active {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.mon-cmdbar__seg-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.mon-cmdbar__seg-btn:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.mon-btn {
  box-sizing: border-box;
  height: 38px;
  padding: 0 var(--ds-sys-space-lg);
  border-radius: var(--ds-corner-medium);
  border: 1px solid transparent;
  font-family: var(--ds-typeface-plain);
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.mon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.mon-btn:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.mon-btn--ink {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.mon-btn--ghost {
  background: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface-variant);
  color: var(--ds-color-on-surface);
}

.mon-btn--ghost:hover:not(:disabled) {
  background: var(--ds-color-surface-container);
}

.mon-cmdbar__alert-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-outline-variant);
  flex: none;
}

.mon-cmdbar__alert--active .mon-cmdbar__alert-dot {
  background: var(--ds-color-warning);
}

.mon-cmdbar__alert-count {
  font-family: var(--ds-typeface-code);
  font-weight: 600;
  margin-left: var(--ds-sys-space-xs);
  font-variant-numeric: tabular-nums lining-nums;
}

.mon-jumpbar {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  margin-bottom: var(--ds-sys-space-xxl);
  flex-shrink: 0;
}

.mon-jumpbar__label {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ds-color-on-surface-variant);
  margin-right: var(--ds-sys-space-xs);
}

.mon-jumpbar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  height: 32px;
  padding: 0 var(--ds-sys-space-lg);
  border-radius: var(--ds-corner-full);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  font-family: var(--ds-typeface-plain);
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-color-on-surface);
  text-decoration: none;
}

.mon-jumpbar__num {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

.mon-jumpbar__link:hover {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
}

.mon-command-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-sys-space-xl);
  padding: var(--ds-sys-space-xs) var(--ds-sys-space-xs) var(--ds-sys-space-sm);
}

.mon-command-bar__intro {
  display: grid;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.mon-dash__tag {
  width: fit-content;
  height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0 var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-on-surface);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.mon-dash__title {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 31px;
  font-weight: 800;
  line-height: 34px;
  letter-spacing: 0;
}

.mon-dash__tagline {
  margin: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0;
}

.mon-command-bar__status {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.mon-command-bar__updated,
.mon-command-bar__count {
  display: inline-grid;
  min-height: 36px;
  align-items: center;
  padding: 0 var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
  white-space: nowrap;
}

.mon-command-bar__count {
  grid-template-columns: auto auto;
  gap: var(--ds-sys-space-sm);
}

.mon-command-bar__count strong {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0;
}

.mon-command-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  flex-shrink: 0;
}

.mon-range-selector {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  flex-shrink: 0;
}

.mon-range-selector button {
  min-width: 52px;
  height: 30px;
  padding: 0 var(--ds-sys-space-sm);
  border: 0;
  border-radius: var(--ds-corner-small);
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0;
  cursor: pointer;
}

.mon-range-selector button[aria-pressed="true"] {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.mon-command-bar__button {
  min-width: 96px;
  height: 36px;
  padding: 0 var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-on-surface);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.mon-alert-entry {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  min-width: 94px;
  height: 36px;
  padding: 0 var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
}

.mon-alert-entry strong {
  min-width: 18px;
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
  text-align: center;
}

.mon-alert-entry em {
  padding: 1px var(--ds-sys-space-xs);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 16px;
}

.mon-alert-entry--active {
  border-color: var(--ds-color-error);
}

.mon-command-bar__button--secondary {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.mon-command-bar__button:hover:not(:disabled) {
  border-color: var(--ds-color-on-surface-variant);
}

.mon-command-bar__button:focus-visible,
.mon-alert-entry:focus-visible,
.mon-alert-panel__run:focus-visible,
.mon-range-selector button:focus-visible,
.mon-covered-platform-item__copy a:focus-visible,
.mon-advice__cta:focus-visible,
.mon-pro-entry:focus-visible,
.mon-module-action button:focus-visible,
.mon-module-action input:focus-visible,
.mon-social-refresh:focus-visible,
.mon-social-bind input:focus-visible,
.mon-social-bind select:focus-visible,
.mon-social-register input:focus-visible,
.mon-social-register select:focus-visible,
.mon-social-register button:focus-visible,
.mon-social-bind button:focus-visible {
  outline: none;
  outline: 3px solid var(--ds-color-secondary);
}

.mon-command-bar__button:disabled {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  cursor: not-allowed;
}

.mon-alert-entry:disabled {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  cursor: not-allowed;
}

.mon-kpistrip {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: var(--ds-sys-space-xl);
  /* .mon-dash 是 flex 列滚动容器；overflow:hidden 让本条自动 min-height:0，
     不锁 flex-shrink:0 会在内容超高时被压塌成 ~0（见 memory dock overflow flex 压塌）。 */
  flex-shrink: 0;
  overflow: hidden;
  background: var(--ds-color-outline-variant);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
}

.mon-kpi {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 13px 15px;
  background: var(--ds-color-surface);
}

.mon-kpi__label {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mon-kpi__top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.mon-kpi__value,
.mon-kpi__placeholder {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.02em;
}

.mon-kpi__placeholder {
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-plain);
  font-size: 15px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0;
}

.mon-kpi__unit {
  margin-left: 1px;
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 12px;
  font-weight: 500;
}

.mon-kpi__delta {
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}

.mon-kpi__sub {
  color: var(--ds-color-on-surface-variant);
  font-size: 10.5px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* GEO 侧采集中骨架（console 无 azure，ink shimmer） */
.mon-kpi--skeleton .mon-kpi__value,
.mon-kpi--skeleton .mon-kpi__placeholder {
  color: transparent;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--ds-color-surface-container) 0, var(--ds-color-surface-container-high) 120px, var(--ds-color-surface-container) 240px);
  background-size: 240px 100%;
  animation: mon-shimmer 1.1s linear infinite;
}

@keyframes mon-shimmer {
  to {
    background-position: 240px 0;
  }
}

.mon-geo-skeleton {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* 跟随 surface 翻转的局部玻璃遮罩，避免暗色主题出现刺眼白块。 */
  background: color-mix(in srgb, var(--ds-color-surface) 72%, transparent);
  backdrop-filter: blur(1.5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sys-space-sm);
}

.mon-geo-skeleton__title {
  font-size: 12px;
  font-weight: 800;
  color: var(--ds-color-on-surface);
}

.mon-geo-skeleton__sub {
  font-size: 10.5px;
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
}

.mon-alert-panel {
  display: grid;
  gap: var(--ds-sys-space-md);
  min-width: 0;
  padding: var(--ds-sys-space-lg);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
}

.mon-alert-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sys-space-md);
  min-width: 0;
}

.mon-alert-panel__head > div {
  display: grid;
  gap: var(--ds-sys-space-xs);
  min-width: 0;
}

.mon-alert-panel__eyebrow {
  width: fit-content;
  padding: var(--ds-sys-space-xs) var(--ds-sys-space-sm);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0;
}

.mon-alert-panel__head h2,
.mon-alert-panel__empty h3,
.mon-alert-list__copy h3,
.mon-alert-list__copy p {
  margin: 0;
  letter-spacing: 0;
}

.mon-alert-panel__head h2 {
  color: var(--ds-color-on-surface);
  font-size: 17px;
  font-weight: 800;
  line-height: 24px;
}

.mon-alert-panel__run {
  height: 32px;
  padding: 0 var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
}

.mon-alert-panel__run:disabled {
  color: var(--ds-color-on-surface-variant);
  cursor: not-allowed;
}

.mon-alert-panel__error {
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-error);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-error);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0;
}

.mon-alert-list {
  display: grid;
  gap: var(--ds-sys-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mon-alert-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ds-sys-space-md);
  min-width: 0;
  padding: var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
}

.mon-alert-list__copy {
  display: grid;
  gap: var(--ds-sys-space-xs);
  min-width: 0;
}

.mon-alert-list__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sys-space-xs);
  align-items: center;
  min-width: 0;
}

.mon-alert-list__copy h3 {
  color: var(--ds-color-on-surface);
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
}

.mon-alert-list__copy p {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.mon-alert-list__action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sys-space-xs);
  align-items: baseline;
}

.mon-alert-list__action span {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
}

.mon-alert-list__meta {
  display: grid;
  justify-items: end;
  gap: var(--ds-sys-space-xs);
  min-width: 116px;
}

.mon-alert-list__meta span {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0;
  white-space: nowrap;
}

.mon-alert-severity,
.mon-alert-domain,
.mon-social-alert {
  display: inline-grid;
  width: fit-content;
  min-height: 22px;
  align-items: center;
  padding: 0 var(--ds-sys-space-sm);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-plain);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0;
  white-space: nowrap;
}

.mon-alert-domain {
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.mon-alert-severity--critical,
.mon-alert-severity--warning {
  border-color: var(--ds-color-error);
  color: var(--ds-color-error);
}

.mon-alert-panel__empty {
  display: grid;
  place-items: center;
  gap: var(--ds-sys-space-xs);
  min-height: 104px;
  padding: var(--ds-sys-space-md);
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  text-align: center;
}

.mon-alert-panel__empty h3 {
  color: var(--ds-color-on-surface);
  font-size: 15px;
  font-weight: 800;
  line-height: 22px;
}

.mon-alert-panel__empty p {
  margin: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
}

.mon-dash__body {
  /* 内容短时长高填满（空/加载态居中）；内容超高时不收缩，交由 .mon-dash 整体滚动，
     否则 body 被压缩、其溢出内容会盖住 footer。 */
  flex: 1 0 auto;
  min-height: 0;
}

.mon-state {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--ds-sys-space-sm);
  min-height: 360px;
  padding: var(--ds-sys-space-xxl);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-extra-large);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  text-align: center;
}

.mon-state h2,
.mon-state p {
  margin: 0;
  letter-spacing: 0;
}

.mon-state h2 {
  color: var(--ds-color-on-surface);
  font-size: 18px;
  font-weight: 800;
  line-height: 26px;
}

.mon-state p {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.mon-state__line {
  width: min(320px, 100%);
  height: 14px;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container-high);
}

.mon-state__line--short {
  width: min(220px, 72%);
}

.mon-cockpit-host {
  display: grid;
  gap: 18px;
  min-height: 0;
}

.mon-dualcol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-sys-space-xl);
  align-items: start;
}

.mon-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mon-col .mon-section {
  margin-top: var(--ds-sys-space-xl);
}

.mon-account-social {
  margin-top: var(--ds-sys-space-xl);
  min-width: 0;
}

.mon-col-masthead {
  padding: 0 2px var(--ds-sys-space-lg);
  margin-bottom: var(--ds-sys-space-xl);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.mon-col-masthead h2 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 6px;
}

.mon-col-masthead__plat {
  font-size: 12.5px;
  color: var(--ds-color-on-surface-variant);
}

/* ---- 定位大盘（关键词 / 账号）散点 SVG ---- */
.mon-map {
  position: relative;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-extra-large);
  padding: var(--ds-sys-space-xl) var(--ds-sys-space-xl) var(--ds-sys-space-md);
}

.mon-map__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sys-space-lg);
  margin-bottom: var(--ds-sys-space-sm);
}

.mon-map__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mon-map__sub {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  margin-top: 3px;
}

.mon-map__mono {
  font-family: var(--ds-typeface-code);
}

.mon-map__legend {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-md);
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
}

.mon-map__lg {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
}

.mon-map__sw {
  width: 9px;
  height: 9px;
  border-radius: var(--ds-corner-full);
}

.mon-map__sw--owned {
  background: var(--ds-color-on-primary-container);
}

.mon-map__sw--kw {
  background: var(--ds-color-primary);
  opacity: 0.55;
}

.mon-map__svg {
  display: block;
}

.mon-map__frame {
  stroke: var(--ds-color-outline-variant);
  stroke-width: 1;
}

.mon-map__cross {
  stroke: var(--ds-color-outline-variant);
  stroke-width: 1;
}

.mon-map__axis {
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  fill: var(--ds-color-outline-variant);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mon-map__quad {
  font-family: var(--ds-typeface-code);
  font-size: 9.5px;
  fill: var(--ds-color-outline-variant);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mon-map__dot-lab {
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  fill: var(--ds-color-on-surface-variant);
  font-weight: 500;
}

.mon-map__dot--muted {
  fill: var(--ds-color-primary);
  fill-opacity: 0.5;
}

.mon-map__dot--owned {
  fill: var(--ds-color-on-primary-container);
  stroke: var(--ds-color-surface);
  stroke-width: 1.5;
}

.mon-map__halo {
  fill: var(--ds-color-primary);
  fill-opacity: 0.16;
}

.mon-map__note {
  margin-top: var(--ds-sys-space-sm);
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
}

.mon-section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-extra-large);
  background: var(--ds-color-surface);
}

.mon-section--pending {
  border-style: dashed;
  border-color: var(--ds-color-on-surface-variant);
}

.mon-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-lg);
  min-width: 0;
  padding: var(--ds-sys-space-lg) var(--ds-sys-space-xl);
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: linear-gradient(180deg, var(--ds-color-surface-container), var(--ds-color-surface));
}

.mon-section__title {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 15px;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: 0;
}

.mon-section__icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.mon-section__meta {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
  text-align: right;
}

.mon-section__body {
  padding: var(--ds-sys-space-lg) var(--ds-sys-space-xl);
}

.mon-module-action {
  display: grid;
  grid-template-columns: auto minmax(180px, 360px) auto;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
  margin-bottom: var(--ds-sys-space-md);
}

.mon-module-action label,
.mon-social-bind label,
.mon-social-register label {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0;
  white-space: nowrap;
}

.mon-module-action input,
.mon-social-bind input,
.mon-social-bind select,
.mon-social-register input,
.mon-social-register select {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0;
}

.mon-module-action button,
.mon-social-refresh,
.mon-social-bind button,
.mon-social-register button {
  height: 36px;
  padding: 0 var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-on-surface);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
}

.mon-module-action button:disabled,
.mon-social-refresh:disabled,
.mon-social-bind button:disabled,
.mon-social-register button:disabled {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  cursor: not-allowed;
}

.mon-action-error {
  margin-bottom: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-error);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-error);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
}

.mon-module1 {
  display: grid;
  gap: var(--ds-sys-space-lg);
  min-width: 0;
}

.mon-module1__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
}

.mon-module1__summary-sep {
  color: var(--ds-color-on-surface-variant);
}

.mon-module1__summary-num {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}

.mon-module1__summary-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  height: 24px;
  padding: 0 var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  white-space: nowrap;
}

.mon-module1__summary-chip-n {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}

.mon-module1-state {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--ds-sys-space-sm);
  min-height: 148px;
  min-width: 0;
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  text-align: center;
}

.mon-module1-state__label,
.mon-social-pending__label,
.mon-advice__eyebrow {
  width: fit-content;
  padding: var(--ds-sys-space-xs) var(--ds-sys-space-sm);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0;
}

.mon-module1-state h3,
.mon-module1-state p {
  margin: 0;
  letter-spacing: 0;
}

.mon-module1-state h3 {
  color: var(--ds-color-on-surface);
  font-size: 17px;
  font-weight: 800;
  line-height: 24px;
}

.mon-module1-state p {
  max-width: 420px;
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}

.mon-module1-list {
  display: grid;
  gap: var(--ds-sys-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mon-module1-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-sys-space-lg);
  align-items: start;
  min-width: 0;
}

.mon-module1-radar,
.mon-module1-snapshots {
  display: grid;
  align-content: start;
  gap: var(--ds-sys-space-md);
  min-width: 0;
  padding: var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface-container);
}

.mon-module1-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-md);
  min-width: 0;
}

.mon-module1-block-head h3,
.mon-module1-block-head span,
.mon-module1-radar-list,
.mon-module1-radar-list__copy h4,
.mon-module1-radar-list__copy p,
.mon-module1-radar-empty h4,
.mon-module1-radar-empty p,
.mon-module1-sourcebar {
  letter-spacing: 0;
}

.mon-module1-block-head h3 {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
}

.mon-module1-block-head span {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  white-space: nowrap;
}

.mon-module1-radar-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mon-module1-radar-list__item {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-lg);
  min-width: 0;
  padding: var(--ds-sys-space-md) 0;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.mon-module1-radar-list__item:last-child {
  border-bottom: 0;
}

.mon-module1-radar-list__rank {
  width: 22px;
  flex: none;
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}

.mon-module1-radar-list__copy {
  flex: 1;
  min-width: 0;
}

.mon-module1-radar-list__copy h4,
.mon-module1-radar-list__copy p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mon-module1-radar-list__copy h4 {
  color: var(--ds-color-on-surface);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 18px;
}

.mon-module1-radar-list__copy p {
  margin-top: 2px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 16px;
}

.mon-module1-radar-list__metrics {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: none;
  text-align: right;
}

.mon-module1-radar-list__metrics span,
.mon-module1-radar-list__metrics em {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-style: normal;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.mon-module1-radar-list__metrics span {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

.mon-module1-radar-list__metrics em {
  color: var(--ds-color-on-surface-variant);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 16px;
}

.mon-module1-radar-empty {
  display: grid;
  place-items: center;
  min-height: 112px;
  padding: var(--ds-sys-space-md);
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  text-align: center;
}

.mon-module1-radar-empty h4,
.mon-module1-radar-empty p {
  margin: 0;
}

.mon-module1-radar-empty h4 {
  color: var(--ds-color-on-surface);
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
}

.mon-module1-radar-empty p {
  max-width: 260px;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.mon-module1-sourcebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
  margin-top: var(--ds-sys-space-sm);
  padding-top: var(--ds-sys-space-md);
  border-top: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 18px;
}

.mon-module1-sourcebar__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-outline-variant);
  flex: none;
}

.mon-module1-sourcebar span {
  color: var(--ds-color-on-surface-variant);
  font-weight: 600;
}

.mon-module1-sourcebar strong {
  color: var(--ds-color-on-surface-variant);
  font-weight: 600;
}

.mon-module1-sourcebar em {
  color: var(--ds-color-on-surface-variant);
  font-style: normal;
  font-weight: 500;
}

.mon-module1-unsupported {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.mon-module1-state .mon-module1-unsupported {
  justify-content: center;
  max-width: 520px;
}

.mon-module1-unsupported span {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  min-height: 30px;
  padding: 0 var(--ds-sys-space-md);
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
  white-space: nowrap;
}

.mon-module1-unsupported em {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0;
}

.mon-covered-platforms {
  display: grid;
  gap: var(--ds-sys-space-md);
  min-width: 0;
  padding: var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
}

.mon-covered-platforms__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sys-space-md);
  min-width: 0;
}

.mon-covered-platforms__head > div {
  display: grid;
  gap: var(--ds-sys-space-xs);
  min-width: 0;
}

.mon-covered-platforms__head h3,
.mon-covered-platforms__head span,
.mon-covered-platforms__head strong,
.mon-covered-platforms__unavailable,
.mon-covered-platforms__empty,
.mon-covered-platform-tag small,
.mon-covered-platform-item__copy a,
.mon-covered-platform-item__copy strong,
.mon-covered-platform-item__copy p,
.mon-covered-platform-item__metrics span {
  letter-spacing: 0;
}

.mon-covered-platforms__head h3 {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
}

.mon-covered-platforms__head span {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.mon-covered-platforms__head strong {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-align: right;
}

.mon-covered-platform-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.mon-covered-platform-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  min-height: 26px;
  padding: 0 var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  white-space: nowrap;
}

.mon-covered-platform-tag__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-outline-variant);
}

.mon-covered-platform-tag small {
  color: var(--ds-color-on-surface-variant);
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
}

.mon-covered-platform-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mon-covered-platform-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-sys-space-md);
  min-width: 0;
  padding: var(--ds-sys-space-md) 0;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.mon-covered-platform-item:last-child {
  border-bottom: 0;
}

.mon-covered-platform-item__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mon-covered-platform-item__copy a,
.mon-covered-platform-item__copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ds-color-on-surface);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 18px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mon-covered-platform-item__copy p {
  margin: 0;
  overflow: hidden;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mon-covered-platform-item__metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.mon-covered-platform-item__metrics span {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

.mon-covered-platforms__empty {
  display: grid;
  min-height: 64px;
  align-items: center;
  padding: var(--ds-sys-space-md);
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
}

.mon-covered-platforms__unavailable {
  margin: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 16px;
}

.mon-mentions {
  display: grid;
  gap: var(--ds-sys-space-md);
  min-width: 0;
  padding: var(--ds-sys-space-lg);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
}

.mon-mentions__head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.mon-mentions__head-actions span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mon-mentions__action {
  height: 28px;
  padding: 0 var(--ds-sys-space-sm);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
}

.mon-mentions__action:disabled {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  cursor: not-allowed;
}

.mon-mentions__summary {
  display: flex;
  align-items: baseline;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.mon-mentions__summary strong {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
}

.mon-mentions__summary span,
.mon-mentions__summary em,
.mon-mentions__note,
.mon-mentions__coverage,
.mon-mentions__state p {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
}

.mon-mentions__summary em {
  font-style: normal;
}

.mon-mentions__chart {
  display: grid;
  grid-template-columns: repeat(13, minmax(18px, 1fr));
  align-items: end;
  gap: var(--ds-sys-space-sm);
  min-height: 112px;
}

.mon-mentions__bar {
  display: grid;
  grid-template-rows: 84px 18px;
  align-items: end;
  justify-items: center;
  gap: var(--ds-sys-space-xs);
  min-width: 0;
}

.mon-mentions__bar em {
  display: block;
  width: 100%;
  min-height: 8px;
  border-radius: var(--ds-corner-small) var(--ds-corner-small) 0 0;
  background: linear-gradient(180deg, var(--ds-color-primary), var(--ds-color-primary-container));
}

.mon-mentions__bar small {
  width: 100%;
  overflow: hidden;
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mon-mentions__state {
  display: grid;
  align-content: center;
  gap: var(--ds-sys-space-xs);
  min-height: 92px;
  padding: var(--ds-sys-space-md);
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
}

.mon-mentions__state strong {
  color: var(--ds-color-on-surface);
  font-size: 14px;
  line-height: 20px;
}

.mon-module1-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-sys-space-lg);
  min-width: 0;
  min-height: 74px;
  padding: var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
}

.mon-module1-list__copy {
  display: grid;
  gap: var(--ds-sys-space-xs);
  min-width: 0;
}

.mon-module1-list__copy h3,
.mon-module1-list__copy p {
  margin: 0;
  overflow: hidden;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mon-module1-list__copy h3 {
  color: var(--ds-color-on-surface);
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
}

.mon-module1-list__copy p {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.mon-module1-list__metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.mon-module1-list__metrics span,
.mon-module1-list__metrics em {
  display: inline-grid;
  min-height: 28px;
  align-items: center;
  padding: 0 var(--ds-sys-space-sm);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0;
  white-space: nowrap;
}

.mon-module2 {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
  gap: var(--ds-sys-space-xl);
  align-items: stretch;
  min-width: 0;
}

.mon-module2-panel,
.mon-score-card,
.mon-advice,
.mon-module3-panel {
  min-width: 0;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
}

.mon-module2-panel {
  display: grid;
  padding: var(--ds-sys-space-lg);
}

.mon-module2-panel--pending {
  border-style: dashed;
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
}

.mon-module2-panel .competitor-monitor {
  min-width: 0;
}

.mon-module2-panel .competitor-monitor [style*="white-space: nowrap"] {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.mon-module2-state,
.mon-social-pending {
  display: grid;
  align-content: center;
  gap: var(--ds-sys-space-sm);
  min-height: 172px;
  min-width: 0;
}

.mon-module2-state {
  justify-items: center;
  color: var(--ds-color-on-surface-variant);
  text-align: center;
}

.mon-module2-state--register {
  justify-items: stretch;
  text-align: left;
}

.mon-module2-state h3,
.mon-module2-state p,
.mon-social-pending h3,
.mon-social-pending p {
  margin: 0;
  letter-spacing: 0;
}

.mon-module2-state h3,
.mon-social-pending h3 {
  color: var(--ds-color-on-surface);
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
}

.mon-module2-state p,
.mon-social-pending p {
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}

.mon-social-board {
  display: grid;
  gap: var(--ds-sys-space-md);
  min-width: 0;
}

.mon-social-board__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sys-space-md);
  min-width: 0;
}

.mon-social-board__head > div {
  display: grid;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.mon-social-board__head h3 {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 16px;
  font-weight: 800;
  line-height: 22px;
  letter-spacing: 0;
}

.mon-social-board__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-sys-space-sm);
  flex: 0 0 auto;
  min-width: 0;
}

.mon-social-board__actions > span {
  flex: 0 0 auto;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0;
  text-align: right;
}

.mon-social-refresh {
  height: 32px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  border-color: var(--ds-color-on-surface-variant);
}

.mon-social-board .mon-action-error {
  margin-bottom: 0;
}

.mon-social-covered-sov {
  display: grid;
  gap: var(--ds-sys-space-md);
  min-width: 0;
  padding: var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
}

.mon-social-covered-sov__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sys-space-md);
  min-width: 0;
}

.mon-social-covered-sov__head > div {
  display: grid;
  gap: var(--ds-sys-space-xs);
  min-width: 0;
}

.mon-social-covered-sov__head h4,
.mon-social-covered-sov__head span,
.mon-social-covered-sov__head strong,
.mon-social-sov-bucket strong,
.mon-social-sov-bucket span,
.mon-social-covered-sov__coverage {
  letter-spacing: 0;
}

.mon-social-covered-sov__head h4 {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
}

.mon-social-covered-sov__head span,
.mon-social-covered-sov__coverage {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.mon-social-covered-sov__head strong {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
}

.mon-social-sov-buckets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-sys-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mon-social-sov-bucket {
  display: grid;
  gap: var(--ds-sys-space-xs);
  min-width: 0;
  padding: var(--ds-sys-space-sm);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
}

.mon-social-sov-bucket strong {
  overflow: hidden;
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mon-social-sov-bucket span {
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}

.mon-social-covered-sov__coverage {
  margin: 0;
}

.mon-social-table-wrap {
  min-width: 0;
  overflow-x: auto;
}

.mon-social-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  table-layout: fixed;
}

.mon-social-table th,
.mon-social-table td {
  padding: var(--ds-sys-space-sm);
  border-bottom: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
}

.mon-social-table th {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 800;
  white-space: normal;
  word-break: keep-all;
}

.mon-social-table th:nth-child(1),
.mon-social-table td:nth-child(1) {
  width: 34%;
}

.mon-social-table th:nth-child(2),
.mon-social-table td:nth-child(2) {
  width: 10%;
}

.mon-social-table th:nth-child(3),
.mon-social-table td:nth-child(3) {
  width: 10%;
}

.mon-social-table th:nth-child(4),
.mon-social-table td:nth-child(4) {
  width: 9%;
}

.mon-social-table th:nth-child(5),
.mon-social-table td:nth-child(5) {
  width: 21%;
}

.mon-social-table th:nth-child(6),
.mon-social-table td:nth-child(6) {
  width: 16%;
}

.mon-social-table td:not(:first-child) {
  font-family: var(--ds-typeface-code);
}

.mon-social-table tbody tr:last-child td {
  border-bottom: 0;
}

.mon-social-table__name {
  display: grid;
  gap: 2px;
  width: 100%;
  min-width: 0;
  font-family: var(--ds-typeface-plain);
}

.mon-social-table__name strong,
.mon-social-table__name span,
.mon-social-table__name small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mon-social-table__name strong {
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 800;
  line-height: 18px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.mon-social-table__name span,
.mon-social-table__name small {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  white-space: normal;
}

.mon-social-table__empty {
  display: inline-grid;
  min-height: 28px;
  align-items: center;
  padding: 0 var(--ds-sys-space-sm);
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-plain);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
}

.mon-social-table__trend {
  display: grid;
  gap: 1px;
}

.mon-social-table__trend span,
.mon-social-table__trend small {
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
}

.mon-social-table__trend small {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}

.mon-social-bind {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(108px, 0.45fr) auto;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
  font-family: var(--ds-typeface-plain);
  white-space: normal;
}

.mon-social-bind input,
.mon-social-bind select {
  height: 32px;
}

.mon-social-bind button {
  height: 32px;
}

.mon-social-register {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ds-sys-space-sm);
  width: 100%;
  min-width: 0;
  margin-top: var(--ds-sys-space-sm);
}

.mon-social-register label {
  align-self: end;
}

.mon-social-register button {
  grid-column: 1 / -1;
  width: fit-content;
  justify-self: end;
}

.mon-social-board__deferred {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.mon-social-board__deferred span {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  min-height: 28px;
  padding: 0 var(--ds-sys-space-sm);
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
}

.mon-social-board__deferred em {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0;
}

.mon-narrative {
  display: grid;
  gap: var(--ds-sys-space-md);
  min-width: 0;
  padding-top: var(--ds-sys-space-sm);
  border-top: 1px solid var(--ds-color-outline-variant);
}

.mon-narrative__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ds-sys-space-md);
  min-width: 0;
}

.mon-narrative__head span {
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 800;
  line-height: 18px;
}

.mon-narrative__head em {
  min-width: 0;
  padding: 2px var(--ds-sys-space-sm);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 16px;
}

.mon-narrative__list {
  display: grid;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.mon-narrative-card,
.mon-narrative--state {
  display: grid;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
  padding: var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
}

.mon-narrative-card {
}

.mon-narrative-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
}

.mon-narrative-card h3,
.mon-narrative--state h3 {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0;
}

.mon-narrative-card p,
.mon-narrative--state p {
  margin: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 18px;
}

.mon-narrative-evidence {
  min-width: 0;
}

.mon-narrative-evidence summary {
  width: fit-content;
  cursor: pointer;
  color: var(--ds-color-primary);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
}

.mon-narrative-evidence dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sys-space-sm);
  margin: var(--ds-sys-space-sm) 0 0;
}

.mon-narrative-evidence div {
  min-width: 0;
  padding: var(--ds-sys-space-sm);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-variant);
}

.mon-narrative-evidence dt,
.mon-narrative-evidence dd {
  margin: 0;
  min-width: 0;
}

.mon-narrative-evidence dt {
  color: var(--ds-color-on-surface-variant);
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
}

.mon-narrative-evidence dd {
  color: var(--ds-color-on-surface);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  overflow-wrap: anywhere;
}

.mon-narrative-evidence dd em,
.mon-narrative-evidence dd small {
  display: block;
  color: var(--ds-color-on-surface-variant);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 14px;
}

.mon-module3 {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: var(--ds-sys-space-xl);
  align-items: stretch;
  min-width: 0;
}

/* §03 bento 网格（方案 C · 原型 680-838）：12 列，卡片按 span 排布 */
.mon-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ds-sys-space-lg);
  align-items: stretch;
  min-width: 0;
}

.mon-span4,
.mon-span5,
.mon-span7,
.mon-span8,
.mon-span12 {
  display: grid;
  min-width: 0;
}

.mon-span4 {
  grid-column: span 4;
}

.mon-span5 {
  grid-column: span 5;
}

.mon-span7 {
  grid-column: span 7;
}

.mon-span8 {
  grid-column: span 8;
}

.mon-span12 {
  grid-column: 1 / -1;
}

.mon-module3__scores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-sys-space-md);
}

.mon-score-card {
  display: grid;
  align-content: space-between;
  gap: var(--ds-sys-space-md);
  min-height: 118px;
  padding: var(--ds-sys-space-lg);
}

.mon-score-card__label,
.mon-score-card__value,
.mon-score-card__sub,
.mon-advice__eyebrow,
.mon-advice h2,
.mon-advice p,
.mon-advice__cta,
.mon-advice__error,
.mon-module3-panel__head h3,
.mon-module3-panel__head span,
.mon-sentiment-summary,
.mon-sentiment-bars,
.mon-engine-list,
.mon-engine-item,
.mon-module3-note,
.mon-keyword-table,
.mon-data-chip,
.mon-p1-chip,
.mon-module3-empty,
.mon-p1-state,
.mon-p1-block__head,
.mon-p1-block__label,
.mon-p1-block__value,
.mon-p1-empty,
.mon-source-list__name,
.mon-source-list__count {
  letter-spacing: 0;
}

.mon-score-card__label {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.mon-score-card__value {
  display: flex;
  align-items: baseline;
  gap: var(--ds-sys-space-xs);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 27px;
  font-weight: 700;
  line-height: 32px;
}

.mon-score-card__value span {
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-plain);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}

.mon-score-card__sub {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.mon-advice {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: var(--ds-sys-space-lg);
  min-height: 118px;
  padding: var(--ds-sys-space-lg);
}

.mon-advice__copy {
  display: grid;
  align-content: start;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.mon-advice h2,
.mon-advice p {
  margin: 0;
}

.mon-advice h2 {
  color: var(--ds-color-on-surface);
  font-size: 18px;
  font-weight: 800;
  line-height: 26px;
}

.mon-advice p {
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}

.mon-advice__cta,
.mon-pro-entry {
  min-width: 112px;
  height: 36px;
  padding: 0 var(--ds-sys-space-lg);
  border: 1px solid var(--ds-color-on-surface);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0;
  cursor: pointer;
  transition: opacity 0.15s;
}

.mon-advice__cta {
  justify-self: start;
}

.mon-advice__cta:hover:not(:disabled),
.mon-pro-entry:hover {
  opacity: 0.88;
}

.mon-advice__cta:disabled {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  cursor: not-allowed;
}

.mon-advice__error {
  color: var(--ds-color-error);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.mon-module3__insights {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sys-space-xl);
  min-width: 0;
}

.mon-sentiment-distribution,
.mon-engine-capabilities {
  min-width: 0;
}

.mon-sentiment-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-sys-space-sm);
}

.mon-sentiment-summary strong {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 24px;
  font-weight: 800;
  line-height: 30px;
}

.mon-sentiment-summary span {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.mon-sentiment-bars {
  display: grid;
  gap: var(--ds-sys-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mon-sentiment-bar {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 34px;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  min-height: 28px;
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
}

.mon-sentiment-bar__track {
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
}

.mon-sentiment-bar__fill {
  width: var(--mon-share);
  height: 100%;
  border-radius: inherit;
  background: var(--ds-color-on-surface-variant);
}

.mon-sentiment-bar--positive .mon-sentiment-bar__fill {
  background: var(--ds-color-secondary);
}

.mon-sentiment-bar--neutral .mon-sentiment-bar__fill {
  background: var(--ds-color-warning);
}

.mon-sentiment-bar--negative .mon-sentiment-bar__fill {
  background: var(--ds-color-error);
}

.mon-sentiment-bar--unknown .mon-sentiment-bar__fill {
  background: var(--ds-color-outline-variant);
}

.mon-sentiment-bar strong {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 13px;
  font-weight: 800;
  line-height: 18px;
  text-align: right;
}

.mon-engine-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mon-engine-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-md) 0;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.mon-engine-item:last-child {
  border-bottom: 0;
}

.mon-engine-item__name {
  overflow: hidden;
  color: var(--ds-color-on-surface);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mon-engine-item__metrics {
  display: flex;
  gap: var(--ds-sys-space-lg);
}

.mon-engine-item__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.mon-engine-item__n {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.mon-engine-item__l {
  color: var(--ds-color-on-surface-variant);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 14px;
}

.mon-competitor-baseline {
  min-width: 0;
}

.mon-competitor-baseline__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-sys-space-sm);
}

.mon-competitor-baseline__summary strong {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 24px;
  font-weight: 800;
  line-height: 30px;
}

.mon-competitor-baseline__summary span,
.mon-competitor-baseline__samples {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.mon-competitor-baseline__chart {
  width: 100%;
  height: 64px;
  color: var(--ds-color-on-surface-variant);
}

.mon-competitor-baseline__samples {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mon-module3-note {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.mon-module3__details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
  gap: var(--ds-sys-space-xl);
  min-width: 0;
}

.mon-module3-panel {
  display: grid;
  align-content: start;
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-lg);
}

.mon-module3-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.mon-module3-panel__head h3 {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
}

.mon-module3-panel__head span {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.mon-keyword-table-wrap {
  min-width: 0;
  overflow-x: auto;
}

.mon-keyword-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  color: var(--ds-color-on-surface);
  font-size: 13px;
  line-height: 20px;
}

.mon-keyword-table th,
.mon-keyword-table td {
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-md);
  border-bottom: 1px solid var(--ds-color-outline-variant);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.mon-keyword-table th {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 700;
}

.mon-keyword-table tbody tr:last-child td {
  border-bottom: 0;
}

.mon-keyword-table__query {
  max-width: 240px;
  overflow: hidden;
  color: var(--ds-color-on-surface);
  font-weight: 700;
  text-overflow: ellipsis;
}

.mon-p1-chip {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  min-height: 24px;
  padding: 0 var(--ds-sys-space-sm);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
}

.mon-data-chip {
  display: inline-grid;
  min-height: 24px;
  align-items: center;
  max-width: 180px;
  padding: 0 var(--ds-sys-space-sm);
  overflow: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mon-module3-empty {
  display: grid;
  place-items: center;
  min-height: 96px;
  margin: 0;
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.mon-source-grid {
  display: grid;
  gap: var(--ds-sys-space-lg);
  align-items: start;
}

.mon-source-board {
  min-width: 0;
}

.mon-source-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mon-source-list__item {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-sm) 0;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.mon-source-list__item:last-child {
  border-bottom: 0;
}

.mon-source-list__name {
  flex: none;
  width: 116px;
  min-width: 0;
  overflow: hidden;
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mon-source-list__track {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
}

.mon-source-list__fill {
  display: block;
  height: 100%;
  border-radius: var(--ds-corner-full);
  background: color-mix(in srgb, var(--ds-color-on-surface) 70%, transparent);
}

.mon-source-list__count {
  flex: none;
  width: 32px;
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: right;
}

.mon-p1-state {
  display: grid;
  gap: var(--ds-sys-space-xs);
  min-height: 72px;
  padding: var(--ds-sys-space-md);
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.mon-p1-state strong {
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
}

.mon-p1-enrichment {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
  gap: var(--ds-sys-space-xl);
  align-items: start;
  min-width: 0;
}

.mon-pro-range-note span {
  width: fit-content;
  padding: var(--ds-sys-space-xs) var(--ds-sys-space-sm);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0;
}

.mon-p1-block {
  display: grid;
  gap: var(--ds-sys-space-sm);
  align-content: start;
  min-width: 0;
}

.mon-p1-block__head {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
}

.mon-p1-block__list {
  display: grid;
  gap: var(--ds-sys-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mon-p1-block__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-sm);
  min-height: 22px;
}

.mon-p1-block__label {
  min-width: 0;
  overflow: hidden;
  color: var(--ds-color-on-surface-variant);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mon-p1-block__label em {
  margin-left: var(--ds-sys-space-xs);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.mon-p1-block__value {
  flex: none;
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 18px;
}

.mon-p1-empty {
  margin: 0;
  padding: var(--ds-sys-space-sm);
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.mon-foot {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-lg);
  margin-top: var(--ds-sys-space-xl);
  flex-shrink: 0;
}

.mon-foot__sources {
  margin: 0;
  padding: var(--ds-sys-space-md) var(--ds-sys-space-xs) 0;
  border-top: 1px solid var(--ds-color-outline-variant);
  font-size: 12.5px;
  line-height: 19px;
  color: var(--ds-color-on-surface-variant);
}

.mon-foot-actions {
  display: flex;
}

.mon-pro-entry {
  justify-self: start;
}

.mon-pro-panel-shell {
  min-width: 0;
}

.mon-pro-panel.geo-intel-card {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 560px;
  padding: var(--ds-sys-space-lg);
  border-radius: var(--ds-corner-large);
}

.mon-pro-panel .gio-seg {
  min-height: 520px;
}

.mon-pro-range-note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sys-space-sm);
}

@media (max-width: 1100px) {
  .mon-cmdbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .mon-cmdbar__actions {
    flex-wrap: wrap;
  }

  .mon-command-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .mon-command-bar__status,
  .mon-command-bar__actions {
    flex-wrap: wrap;
  }

  .mon-kpistrip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mon-dualcol,
  .mon-grid,
  .mon-source-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mon-span4,
  .mon-span5,
  .mon-span7,
  .mon-span8,
  .mon-span12 {
    grid-column: 1 / -1;
  }

  .mon-module1-list__item,
  .mon-module1-grid,
  .mon-module2,
  .mon-module3,
  .mon-module3__insights,
  .mon-module3__details {
    grid-template-columns: minmax(0, 1fr);
  }

  .mon-module1-list__metrics {
    justify-content: flex-start;
  }

  .mon-pro-panel .gio-chart-grid,
  .mon-pro-panel .gio-chart-grid--two,
  .mon-pro-panel .gi-grid,
  .mon-pro-panel .gi-kpi {
    grid-template-columns: minmax(0, 1fr);
  }

  .mon-pro-panel .gi-col + .gi-col {
    border-top: 1px solid var(--ds-color-outline-variant);
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .mon-dash {
    padding: var(--ds-sys-space-lg);
    padding-top: 64px;
  }

  .mon-dash__title {
    font-size: 26px;
    line-height: 30px;
  }

  .mon-command-bar__status,
  .mon-command-bar__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .mon-cmdbar__actions,
  .mon-cmdbar__status {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .mon-cmdbar__seg,
  .mon-btn {
    width: 100%;
  }

  .mon-cmdbar__seg-btn {
    justify-content: center;
    min-width: 0;
    padding: 0 var(--ds-sys-space-sm);
  }

  .mon-map__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .mon-p1-enrichment,
  .mon-covered-platform-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .mon-p1-block__item,
  .mon-covered-platforms__head,
  .mon-covered-platform-item__metrics {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
  }

  .mon-p1-block__label,
  .mon-covered-platform-item__copy a,
  .mon-covered-platform-item__copy strong,
  .mon-covered-platform-item__copy p {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .mon-mentions__chart {
    grid-template-columns: repeat(13, minmax(12px, 1fr));
    gap: 2px;
  }

  .mon-mentions__bar small {
    font-size: 8px;
  }

  .mon-module2-panel .competitor-monitor [style*="gap: 14px"] {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .mon-command-bar__button,
  .mon-command-bar__updated,
  .mon-command-bar__count,
  .mon-module-action button,
  .mon-advice__cta,
  .mon-pro-entry {
    width: 100%;
  }

  .mon-module-action,
  .mon-social-bind,
  .mon-social-register {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .mon-module-action label,
  .mon-social-bind label,
  .mon-social-register label {
    white-space: normal;
  }

  .mon-social-register button {
    width: 100%;
  }

  .mon-kpistrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mon-module3__insights,
  .mon-module3__scores {
    grid-template-columns: minmax(0, 1fr);
  }

  .mon-module1-radar-list__item {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .mon-module1-radar-list__metrics {
    grid-column: 1 / -1;
    justify-items: start;
    min-width: 0;
  }

  .mon-section__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .mon-section__meta {
    text-align: left;
  }

  .mon-pro-panel .gio-seg-tabs {
    flex-wrap: wrap;
  }
}

/* ===== Module 04 · GEO 证据库 ===== */
.mon-evidence {
  display: grid;
  gap: var(--ds-sys-space-md);
  min-width: 0;
}

.mon-evidence__sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  padding-bottom: var(--ds-sys-space-md);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.mon-evidence__sources-label {
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  letter-spacing: 0.02em;
}

.mon-evidence__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-xs);
  padding: 3px var(--ds-sys-space-sm);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}

.mon-evidence__chip-count {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 10px;
}

.mon-evidence__extract {
  margin-left: auto;
  padding: 4px var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-on-surface);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.mon-evidence__extract:hover:not(:disabled) {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.mon-evidence__extract:disabled {
  border-color: var(--ds-color-on-surface-variant);
  color: var(--ds-color-on-surface-variant);
  cursor: not-allowed;
}

.mon-evidence__error {
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-error);
  border-radius: var(--ds-corner-small);
  color: var(--ds-color-error);
  font-size: 12px;
}

.mon-evidence__state {
  padding: var(--ds-sys-space-md);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

.mon-evidence__summary {
  display: flex;
  gap: var(--ds-sys-space-xl);
}

.mon-evidence__summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mon-evidence__summary-value {
  font-family: var(--ds-typeface-code);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ds-color-on-surface);
}

.mon-evidence__summary-value--warn {
  color: var(--ds-color-error);
}

.mon-evidence__summary-label {
  color: var(--ds-color-on-surface-variant);
  font-size: 10px;
}

.mon-evidence__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mon-evidence-atom {
  padding: 11px 0;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.mon-evidence-atom:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mon-evidence-atom__head {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.mon-evidence-atom__no {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  font-weight: 700;
}

.mon-evidence-atom__no--off {
  background: var(--ds-color-outline-variant);
}

.mon-evidence-atom__type {
  flex: 0 0 auto;
  padding: 1px var(--ds-sys-space-sm);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  color: var(--ds-color-on-surface-variant);
  font-size: 10px;
}

.mon-evidence-atom__claim {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.mon-evidence-atom__claim--archived {
  text-decoration: line-through;
  text-decoration-color: var(--ds-color-on-surface-variant);
  color: var(--ds-color-on-surface-variant);
}

.mon-evidence-risk {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: var(--ds-corner-full);
  font-family: var(--ds-typeface-code);
  font-size: 9.5px;
  font-weight: 700;
}

.mon-evidence-risk--low {
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
}

.mon-evidence-risk--high {
  border: 1px solid var(--ds-color-error);
  color: var(--ds-color-error);
}

.mon-evidence-atom__quote {
  margin: 6px 0 0 34px;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.5;
}

.mon-evidence-atom__meta {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-md);
  margin: 6px 0 0 34px;
}

.mon-evidence-atom__prov {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
}

.mon-evidence-atom__prov-file {
  color: var(--ds-color-on-surface);
  font-weight: 500;
}

.mon-evidence-atom__prov-section {
  color: var(--ds-color-on-surface-variant);
}

.mon-evidence-atom__toggle {
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.mon-evidence-atom__toggle:hover {
  color: var(--ds-color-on-surface);
}

.mon-evidence__empty {
  display: grid;
  place-items: center;
  gap: var(--ds-sys-space-xs);
  padding: var(--ds-sys-space-xl) var(--ds-sys-space-md);
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  text-align: center;
}

.mon-evidence__empty h3 {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 15px;
  font-weight: 800;
}

.mon-evidence__empty p {
  margin: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

/* E1 short-lived locate highlight (non-persistent selection) */
.monitor-locate-highlight {
  outline: 3px solid var(--ds-color-primary, );
  outline-offset: 3px;
  border-radius: var(--ds-corner-small, );
  background-color: color-mix(in srgb, var(--ds-color-primary-container, ) 85%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-color-primary, ) 28%, transparent);
  transition:
    outline-color 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}
.mcgc-page {
  flex: 1;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  padding-top: 64px;
  overflow: hidden;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
}

.mcgc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--ds-color-surface);
  border-top: 1px solid var(--ds-color-outline-variant);
}

.mcgc-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--ds-color-outline-variant);
}

.mcgc-page .grp-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.mcgc-page .grp-title-wrap {
  min-width: 0;
}

.mcgc-page .grp-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
}

.mcgc-page .grp-badge {
  padding: 2px 8px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 500;
}

.mcgc-page .grp-sub {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.mcgc-page .grp-members-wrap {
  position: relative;
  margin-left: auto;
}

.mcgc-page .grp-members {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.mcgc-page .avatar-stack {
  display: flex;
}

.mcgc-page .avatar-stack .av {
  margin-left: -8px;
  box-shadow: 0 0 0 2px var(--ds-color-surface);
}

.mcgc-page .avatar-stack .av:first-child {
  margin-left: 0;
}

.mcgc-page .grp-count {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ds-color-on-surface-variant);
  text-align: right;
}

.mcgc-page .grp-count .on {
  color: var(--ds-color-on-surface);
  font-weight: 600;
}

.mcgc-page .av {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ds-color-on-surface) 4%, transparent);
  color: var(--ds-color-on-surface-variant);
  font-weight: 600;
}

.mcgc-page .av-24 {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

.mcgc-page .offline {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
}

.mcgc-page .members-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 2;
  width: 360px;
  padding: 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-elevation-4);
}

.mcgc-page .members-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mcgc-page .member-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px;
  border-radius: var(--ds-corner-medium);
}

.mcgc-page .member-row + .member-row {
  border-top: 1px solid var(--ds-color-outline-variant);
}

.mcgc-page .member-main {
  min-width: 0;
  flex: 1;
}

.mcgc-page .member-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mcgc-page .member-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
}

.mcgc-page .member-status,
.mcgc-page .member-jump {
  border-radius: var(--ds-corner-full);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 6px 10px;
}

.mcgc-page .member-status {
  background: color-mix(in srgb, var(--ds-color-on-surface) 6%, transparent);
  color: var(--ds-color-surface);
}

.mcgc-page .member-jump {
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  cursor: default;
}

.mcgc-page .member-jump:disabled {
  opacity: 1;
}

.mcgc-page .member-identity {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ds-color-on-surface-variant);
}

.mcgc-page .stream {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: stretch;
  justify-content: flex-start;
  overflow-y: auto;
  padding: 24px;
}

.mcgc-page .stream-list {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
}

.mcgc-page .empty-mini {
  max-width: 460px;
  margin: auto;
  padding: 28px 20px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
  text-align: center;
}

.mcgc-page .empty-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 18px;
}

.mcgc-page .empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
}

.mcgc-page .empty-sub {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ds-color-on-surface-variant);
}

.mcgc-page .cast {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
}

.mcgc-page .cast-confirm {
  border-left-color: var(--ds-color-on-surface);
}

.mcgc-page .cast.done {
  border-left-color: var(--ds-color-secondary);
  background: color-mix(in srgb, var(--ds-color-secondary) 8%, transparent);
}

.mcgc-page .cast-feed-error {
  border-left-color: var(--ds-color-error);
  background: color-mix(in srgb, var(--ds-color-error) 8%, transparent);
}

.mcgc-page .cast-summary {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.mcgc-page .cast-summary-main,
.mcgc-page .cast-head-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mcgc-page .cast-avatar {
  background: var(--ds-color-surface-container);
}

.mcgc-page .cast-owner {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
}

.mcgc-page .cast-kicker,
.mcgc-page .cast-status-chip,
.mcgc-page .cast-risk-badge,
.mcgc-page .cast-mention {
  display: inline-flex;
  align-items: center;
  border-radius: var(--ds-corner-full);
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.mcgc-page .cast-kicker,
.mcgc-page .cast-status-chip {
  background: color-mix(in srgb, var(--ds-color-on-surface) 6%, transparent);
  color: var(--ds-color-on-surface-variant);
}

.mcgc-page .cast-risk-badge {
  background: color-mix(in srgb, var(--ds-color-warning) 12%, transparent);
  color: color-mix(in srgb, var(--ds-color-warning) 56%, var(--ds-color-on-surface));
}

.mcgc-page .cast.done .cast-kicker {
  background: color-mix(in srgb, var(--ds-color-secondary) 12%, transparent);
  color: color-mix(in srgb, var(--ds-color-secondary) 56%, var(--ds-color-on-surface));
}

.mcgc-page .off-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--ds-corner-full);
  padding: 3px 9px;
  background: color-mix(in srgb, var(--ds-color-on-surface) 6%, transparent);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.mcgc-page .cast-mention {
  background: color-mix(in srgb, var(--ds-color-on-surface) 8%, transparent);
  color: var(--ds-color-surface);
}

.mcgc-page .cast-summary-message {
  min-width: 0;
  max-width: 100%;
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mcgc-page .cast-summary-time,
.mcgc-page .cast-meta-mono {
  font-family: var(--ds-typeface-code);
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.mcgc-page .cast-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px 16px;
}

.mcgc-page .cast-head {
  padding: 14px 16px 0;
}

.mcgc-page .cast-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ds-color-on-surface);
}

.mcgc-page .cast-line-label {
  color: var(--ds-color-on-surface-variant);
}

.mcgc-page .cast-sub-status::before {
  content: '/';
  margin-right: 8px;
  color: var(--ds-color-on-surface-variant);
}

.mcgc-page .cast-message {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ds-color-on-surface);
}

.mcgc-page .cast-resolved {
  color: color-mix(in srgb, var(--ds-color-secondary) 64%, var(--ds-color-on-surface));
}

.mcgc-page .cast-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mcgc-page .cast-progress {
  position: relative;
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: var(--ds-corner-full);
  background: color-mix(in srgb, var(--ds-color-on-surface) 8%, transparent);
}

.mcgc-page .cast-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ds-color-on-surface);
}

.mcgc-page .cast-actions {
  display: flex;
  gap: 10px;
  padding-top: 2px;
}

.mcgc-page .cast-error {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ds-color-error) 64%, var(--ds-color-on-surface));
}

.mcgc-page .talk-user {
  display: flex;
  align-self: flex-end;
  max-width: min(560px, 74%);
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.mcgc-page .talk-user-time {
  padding-right: 4px;
}

.mcgc-page .talk-user-bubble {
  padding: 12px 14px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: color-mix(in srgb, var(--ds-color-on-surface) 4%, transparent);
  color: var(--ds-color-surface);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.mcgc-page .talk-user-target {
  margin-right: 6px;
  font-weight: 600;
}

.mcgc-page .cast-btn {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  padding: 8px 14px;
  font: inherit;
  cursor: pointer;
}

.mcgc-page .cast-btn-primary {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.mcgc-page .cast-btn:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.mcgc-page .composer {
  flex: none;
  border-top: 1px solid var(--ds-color-outline-variant);
  padding: 14px 24px;
}

.mcgc-page .composer-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-extra-large);
  background: var(--ds-color-surface);
}

.mcgc-page .composer-target {
  position: relative;
  flex: none;
}

.mcgc-page .composer-at {
  padding: 4px 8px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  cursor: pointer;
}

.mcgc-page .composer-at.is-selected {
  border-color: var(--ds-color-on-surface);
  color: var(--ds-color-on-surface);
}

.mcgc-page .composer-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  z-index: 2;
  width: 360px;
  padding: 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-elevation-4);
}

.mcgc-page .composer-member-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mcgc-page .composer-member-option {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 0;
  border-radius: var(--ds-corner-medium);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.mcgc-page .composer-member-option:hover {
  background: color-mix(in srgb, var(--ds-color-on-surface) 4%, transparent);
}

.mcgc-page .composer-member-main {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
}

.mcgc-page .composer-member-avatar {
  flex: none;
}

.mcgc-page .composer-member-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.mcgc-page .composer-member-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
}

.mcgc-page .composer-member-identity {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ds-color-on-surface-variant);
}

.mcgc-page .composer-member-status {
  flex: none;
  border-radius: var(--ds-corner-full);
  background: color-mix(in srgb, var(--ds-color-on-surface) 6%, transparent);
  color: var(--ds-color-on-surface-variant);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.mcgc-page .composer-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ds-color-on-surface);
  font: inherit;
  font-size: 14px;
}

.mcgc-page .composer-input::placeholder {
  color: var(--ds-color-on-surface-variant);
}

.mcgc-page .composer-input:focus {
  outline: none;
}

.mcgc-page .send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  cursor: pointer;
}

.mcgc-page .cast-local-boundary,
.mcgc-page .cast-offboard {
  border-left-color: var(--ds-color-on-surface-variant);
}

.mcgc-page .rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--ds-color-surface);
}

.mcgc-page .rail-head {
  padding: 16px 18px 12px;
}

.mcgc-page .rail-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
}

.mcgc-page .rail-summary {
  margin-top: 3px;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.mcgc-page .rail-summary .n,
.mcgc-page .cnt {
  font-family: var(--ds-typeface-code);
}

.mcgc-page .rail-sec {
  padding: 4px 12px 8px;
}

.mcgc-page .rail-sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 6px 8px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mcgc-page .cnt {
  padding: 1px 7px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font-size: 11px;
  letter-spacing: 0;
}

.mcgc-page .cnt.warn {
  color: color-mix(in srgb, var(--ds-color-warning) 56%, var(--ds-color-on-surface));
  background: color-mix(in srgb, var(--ds-color-warning) 14%, transparent);
}

.mcgc-page .rail-empty {
  margin: 0 6px;
  padding: 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.5;
}

.mcgc-page .rail-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mcgc-page .rail-row {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.mcgc-page .rail-row:hover .jump,
.mcgc-page .rail-row:focus-visible .jump {
  opacity: 1;
}

.mcgc-page .rail-row:focus-visible {
  outline: 1px solid var(--ds-color-on-surface);
  outline-offset: 2px;
}

.mcgc-page .rail-avatar {
  background: var(--ds-color-surface-container);
}

.mcgc-page .rail-row-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 6px;
}

.mcgc-page .rail-row-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mcgc-page .rail-row-title {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mcgc-page .rail-row-meta {
  display: flex;
  min-width: 0;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ds-color-on-surface-variant);
}

.mcgc-page .rail-row-meta-mono {
  font-family: var(--ds-typeface-code);
}

.mcgc-page .rail-mini-progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mcgc-page .rail-mini-progress {
  position: relative;
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: var(--ds-corner-full);
  background: color-mix(in srgb, var(--ds-color-on-surface) 8%, transparent);
}

.mcgc-page .rail-mini-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ds-color-on-surface);
}

.mcgc-page .jump {
  flex: none;
  color: var(--ds-color-on-surface-variant);
  opacity: 0.4;
  transition: opacity 120ms ease;
}

.mcgc-page .rail-divider {
  height: 1px;
  margin: 4px 18px;
  background: var(--ds-color-outline-variant);
}

.mcgc-page .rail-hint {
  margin: auto 12px 0;
  padding: 10px 12px;
  border-top: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.5;
}

.mcgc-page .rail-hint b {
  color: var(--ds-color-on-surface);
  font-weight: 500;
}
.placement-cockpit .audience-editor {
  margin-top: 14px;
  padding: 14px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
}

.placement-cockpit .audience-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.placement-cockpit .audience-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--ds-color-outline-variant);
}

.placement-cockpit .audience-row-block {
  align-items: flex-start;
}

.placement-cockpit .audience-label {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
}

.placement-cockpit .audience-options,
.placement-cockpit .audience-chip-grid,
.placement-cockpit .audience-city-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.placement-cockpit .audience-region {
  padding-top: 10px;
  border-top: 1px solid var(--ds-color-outline-variant);
}

.placement-cockpit .audience-region-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.placement-cockpit .audience-provinces {
  display: grid;
  gap: 10px;
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

.placement-cockpit .audience-province {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.placement-cockpit .audience-province-name {
  padding-top: 7px;
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 700;
}

.placement-cockpit .audience-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: var(--ds-corner-small);
  color: var(--ds-color-error);
  font-size: 12px;
}
.placement-cockpit {
  width: 100%;
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
  line-height: 1.5;
}

.placement-cockpit *,
.placement-cockpit *::before,
.placement-cockpit *::after {
  box-sizing: border-box;
}

.placement-cockpit .mono {
  font-family: var(--ds-typeface-code);
  font-feature-settings: "tnum" 1, "ss01" 1;
}

.placement-cockpit .promo {
  padding-bottom: 2px;
}

.placement-cockpit .trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin-bottom: 24px;
}

.placement-cockpit .trust-row .t {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

.placement-cockpit .ic {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.placement-cockpit .ic.sm {
  width: 15px;
  height: 15px;
}

.placement-cockpit .h-title {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--ds-color-on-surface);
}

.placement-cockpit .h-title .em {
  color: var(--ds-color-on-surface);
}

.placement-cockpit .h-lead {
  max-width: 640px;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ds-color-on-surface-variant);
}

.placement-cockpit .metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: 22px;
  overflow: hidden;
  background: var(--ds-color-outline-variant);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
}

.placement-cockpit .metric {
  min-width: 0;
  padding: 15px 16px;
  background: var(--ds-color-surface);
}

.placement-cockpit .metric .ml {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  text-transform: uppercase;
}

.placement-cockpit .metric .mv {
  margin-top: 7px;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.1;
}

.placement-cockpit .metric .md {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
}

.placement-cockpit .stage-flow {
  margin-top: 18px;
}

.placement-cockpit .sf-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.placement-cockpit .sf-title {
  font-size: 15px;
  font-weight: 700;
}

.placement-cockpit .sf-sub {
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
}

.placement-cockpit .steptabs {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium) var(--ds-corner-medium) 0 0;
}

.placement-cockpit .steptab {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 0;
  border-left: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.placement-cockpit .steptab:first-child {
  border-left: 0;
}

.placement-cockpit .steptab:hover,
.placement-cockpit .steptab.active {
  background: var(--ds-color-surface-container);
}

.placement-cockpit .steptab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 0;
  background: var(--ds-color-on-surface);
}

.placement-cockpit .steptab.active::after {
  height: 2px;
}

.placement-cockpit .steptab .sn {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 50%;
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 12px;
  font-weight: 600;
  flex: 0 0 auto;
}

.placement-cockpit .steptab.done .sn,
.placement-cockpit .steptab.active .sn {
  background: var(--ds-color-on-surface);
  border-color: var(--ds-color-surface);
  color: var(--ds-color-surface);
}

.placement-cockpit .steptab.gate .sn {
  background: #fffaf0;
  border-color: rgba(245, 158, 11, 0.55);
  color: #b45309;
}

.placement-cockpit .steptab.active.gate .sn {
  background: var(--ds-color-warning);
  border-color: var(--ds-color-warning);
  color: var(--ds-color-on-surface);
}

.placement-cockpit .steptab.active.gate::after {
  background: var(--ds-color-warning);
}

.placement-cockpit .steptab .sn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.placement-cockpit .steptab .stx {
  min-width: 0;
}

.placement-cockpit .steptab .stx b {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.placement-cockpit .steptab .stx i {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  font-size: 10.5px;
  font-style: normal;
  color: var(--ds-color-on-surface-variant);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.placement-cockpit .stage-panel {
  display: none;
  padding: 18px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-top: 0;
  border-radius: 0 0 var(--ds-corner-medium) var(--ds-corner-medium);
}

.placement-cockpit .stage-panel.on {
  display: block;
}

.placement-cockpit .g2,
.placement-cockpit .g3 {
  display: grid;
  gap: 14px;
}

.placement-cockpit .g2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.placement-cockpit .g3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.placement-cockpit .pblock {
  padding: 14px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
}

.placement-cockpit .pblock .ph {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
}

.placement-cockpit .pblock .ph.mt {
  margin-top: 15px;
}

.placement-cockpit .go {
  margin-left: auto;
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: none;
  white-space: nowrap;
}

.placement-cockpit .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.placement-cockpit .chip,
.placement-cockpit .pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--ds-corner-full);
  white-space: nowrap;
}

.placement-cockpit .chip {
  height: 30px;
  padding: 0 13px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
  font-size: 12.5px;
  font-weight: 500;
}

.placement-cockpit .chip.sel {
  background: var(--ds-color-on-surface);
  border-color: var(--ds-color-surface);
  color: var(--ds-color-surface);
}

.placement-cockpit .pill {
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  font-size: 11.5px;
  font-weight: 600;
}

.placement-cockpit .pill.amber {
  background: #fffaf0;
  border-color: rgba(245, 158, 11, 0.28);
  color: #b45309;
}

.placement-cockpit .pill.green {
  background: #f1faf3;
  border-color: rgba(34, 197, 94, 0.28);
  color: #15803d;
}

.placement-cockpit .pill.red {
  background: #fdf3f3;
  border-color: rgba(239, 68, 68, 0.26);
  color: #b91c1c;
}

.placement-cockpit .pill.ink {
  background: var(--ds-color-on-surface);
  border-color: var(--ds-color-surface);
  color: var(--ds-color-surface);
}

.placement-cockpit .optrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 11px 13px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
}

.placement-cockpit .optrow:last-child {
  margin-bottom: 0;
}

.placement-cockpit .optrow.sel {
  border-color: var(--ds-color-on-surface);
  box-shadow: inset 0 0 0 1px var(--ds-color-on-surface);
}

/* Task 6: 可点选的 optrow（抖音号 / 视频 / 门店）—— 指针反馈 + hover 描边 */
.placement-cockpit .optrow.pickable {
  cursor: pointer;
}
.placement-cockpit .optrow.pickable:hover {
  border-color: var(--ds-color-on-surface-variant);
}

.placement-cockpit .optrow .oi b {
  display: block;
  font-size: 13px;
  font-weight: 700;
}

.placement-cockpit .optrow .oi i {
  display: block;
  margin-top: 3px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-style: normal;
}

.placement-cockpit .kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  font-size: 12.5px;
}

.placement-cockpit .kv:last-child {
  border-bottom: 0;
}

.placement-cockpit .kv .k {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ds-color-on-surface);
}

.placement-cockpit .callout {
  padding: 13px 15px;
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  color: var(--ds-color-on-surface);
  font-size: 12.5px;
  line-height: 1.6;
}

.placement-cockpit .muted-copy {
  margin: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.55;
}

.placement-cockpit .tbl {
  overflow: hidden;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
}

.placement-cockpit .trk {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 1.2fr 0.9fr 0.9fr;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  font-size: 12px;
}

.placement-cockpit .trk:last-child {
  border-bottom: 0;
}

.placement-cockpit .trk.head {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
}

.placement-cockpit .kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--ds-color-outline-variant);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
}

.placement-cockpit .kpi {
  padding: 16px;
  background: var(--ds-color-surface);
}

.placement-cockpit .kpi .kl {
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.placement-cockpit .kpi .kn {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
}

.placement-cockpit .kpi .kd {
  margin-top: 5px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11.5px;
}

.placement-cockpit .stage-gate {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px 16px;
  background: #fffdf7;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
}

.placement-cockpit .stage-gate .lk {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--ds-color-surface);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 9px;
  color: #b45309;
  flex: 0 0 auto;
}

.placement-cockpit .stage-gate b {
  font-size: 13px;
}

.placement-cockpit .stage-gate p {
  margin: 2px 0 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 11.5px;
}

.placement-cockpit .stage-acts {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.placement-cockpit .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  background: var(--ds-color-on-surface);
  border: 1px solid var(--ds-color-on-surface);
  border-radius: var(--ds-corner-small);
  color: var(--ds-color-surface);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.placement-cockpit .btn.ghost {
  background: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface-variant);
  color: var(--ds-color-on-surface);
}

.placement-cockpit .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--ds-color-on-surface-variant);
}

.placement-cockpit .footnote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11.5px;
}

.placement-cockpit .mb-14 {
  margin-bottom: 14px;
}

.placement-cockpit .mt-12 {
  margin-top: 12px;
}

.placement-cockpit .mt-14 {
  margin-top: 14px;
}

@media (max-width: 1080px) {
  .placement-cockpit .metrics,
  .placement-cockpit .g2,
  .placement-cockpit .g3,
  .placement-cockpit .kpis {
    grid-template-columns: 1fr 1fr;
  }

  .placement-cockpit .steptabs {
    flex-wrap: wrap;
  }

  .placement-cockpit .steptab {
    flex: 1 1 50%;
    border-top: 1px solid var(--ds-color-outline-variant);
  }

  .placement-cockpit .steptab:nth-child(-n + 2) {
    border-top: 0;
  }

  .placement-cockpit .trk {
    grid-template-columns: 1.4fr 0.8fr 1fr;
  }

  .placement-cockpit .trk span:nth-child(4),
  .placement-cockpit .trk span:nth-child(5) {
    display: none;
  }
}

/* Task 4: 授权入口按钮（套 .go 取排版，仅重置 button chrome）+ 未授权缺口提示 */
.placement-cockpit .go-btn {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.placement-cockpit .go-btn:hover {
  text-decoration: underline;
}
.placement-cockpit .auth-gaps {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.placement-cockpit .auth-gap {
  font-size: 12px;
  color: var(--ds-color-warning);
  background: #fffaf0;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: var(--ds-corner-small);
  padding: 8px 10px;
}

/* Task 7: 出价方式 chip 作 button（套 .chip 取视觉，补 button 缺省字体/指针） */
.placement-cockpit button.chip {
  font-family: inherit;
  cursor: pointer;
}
.placement-cockpit .bid-types {
  display: inline-flex;
  gap: 7px;
}

/* Task 7: 出价/预算数字输入 */
.placement-cockpit .num-input {
  width: 92px;
  height: 30px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 0 8px;
  font: inherit;
}
.placement-cockpit .num-input:focus {
  outline: none;
  border-color: var(--ds-color-on-surface);
}

/* Task 7: 草稿创建结果区（成功绿 / 失败红 / 未知琥珀） */
.placement-cockpit .draft-result {
  margin-top: 14px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: #f1faf3;
  padding: 12px 14px;
}
.placement-cockpit .draft-result.draft-failed {
  background: #fdf3f3;
}
.placement-cockpit .draft-result.draft-unknown {
  background: #fffaf0;
}
.placement-cockpit .draft-result b {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
}

/* Task 11: StageFour 上线后就地生命周期 */
.placement-cockpit .live-panel {
  margin-top: 14px;
  padding: 14px;
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
}

.placement-cockpit .live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.placement-cockpit .live-title {
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 700;
}

.placement-cockpit .life-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-color-outline-variant);
}

.placement-cockpit .life-dot.green {
  background: var(--ds-color-secondary);
}

.placement-cockpit .life-dot.amber {
  background: var(--ds-color-warning);
}

.placement-cockpit .life-dot.red {
  background: var(--ds-color-error);
}

.placement-cockpit .live-hint {
  margin: -4px 0 12px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11.5px;
  line-height: 1.45;
}

.placement-cockpit .life-reject {
  margin-bottom: 12px;
  padding: 8px 10px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  line-height: 1.5;
}

.placement-cockpit .life-pause-alert {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--ds-color-error) 9%, var(--ds-color-surface));
  border: 1px solid color-mix(in srgb, var(--ds-color-error) 36%, var(--ds-color-outline-variant));
  border-radius: var(--ds-corner-small);
  color: var(--ds-color-error);
}

.placement-cockpit .life-pause-alert-main {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.placement-cockpit .life-pause-alert-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.placement-cockpit .btn.life-pause-retry {
  height: 32px;
  padding: 0 12px;
  background: var(--ds-color-surface);
  border-color: var(--ds-color-error);
  color: var(--ds-color-error);
  font-size: 12px;
}

.placement-cockpit .life-pause-backend {
  color: var(--ds-color-error);
  font-size: 12px;
  font-weight: 600;
}

.placement-cockpit .live-spend {
  margin-bottom: 12px;
}

.placement-cockpit .live-spend-row {
  display: flex;
  gap: 14px;
}

.placement-cockpit .live-spend-item {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.placement-cockpit .live-spend-label {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 600;
}

.placement-cockpit .live-spend-amount {
  color: var(--ds-color-on-surface);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.placement-cockpit .live-spend-divider {
  width: 1px;
  background: var(--ds-color-outline-variant);
}

.placement-cockpit .live-actions {
  justify-content: flex-start;
}

.placement-cockpit .live-edit-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
}

.placement-cockpit .live-edit-title {
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
}

.placement-cockpit .live-edit-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.placement-cockpit .live-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.placement-cockpit .live-field-label {
  width: 72px;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  flex: 0 0 auto;
}

.placement-cockpit .live-field-unit {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

.placement-cockpit .live-schedule-input {
  width: 148px;
  text-align: left;
}

.placement-cockpit .live-date-input {
  width: 140px;
  text-align: left;
}

.placement-cockpit .live-save {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

/* 上线确认 Modal.confirm 是静态方法，渲染在 body portal、逃逸 .dp-revamp 与 ConfigProvider，
   其主按钮被 geo/styles/global.css 的全局 `.ant-btn-primary { background: var(--geo-primary-gradient) !important }`
   污染成 azure 渐变。dp-console-ink-btn 规则已提升到 infrastructure/App.css 全局。 */

.placement-cockpit .btn.life-pause-retry {
  height: 32px;
  padding: 0 12px;
  background: var(--ds-color-surface);
  border-color: var(--ds-color-error);
  color: var(--ds-color-error);
  font-size: 12px;
}
/*
 * PlacementCenterFullscreen — 投放优化中心全屏页样式（复刻数据 Tab 的 scheme-E ddash 语言）
 * 视觉 source: docs/design/2026-06-23-canvas-workbench-scheme-E.html（.pdash）
 * 全部走 --ds-* token（frontend/src/styles/global-design.css 权威），不照搬设计稿字面 hex。
 * console no-azure（design.md §12）：主色 ink，禁 azure / var(--ds-color-primary)；强调仅
 *   --pfs-signal（gate，仿数据 Tab 的 --dv-signal）+ 状态色 green/amber/red。
 * 作用域全部以 .placement-cockpit--fs 前缀，零全局冲突；新外壳类一律 pfs- 前缀，
 *   阶段详情沿用 PlacementCenterCard.css 的 .pblock/.optrow/.chip/.kv/... 基样式 + 本文件覆写成卡片观。
 *
 * 整屏接管：本壳 position:fixed 铺满左轨右侧内容区。fixed 要真正铺满必须挂在无 CSS transform
 *   的祖先平面下 —— 由 PlacementCenterNode 经 createPortal 投到 document.body。
 */

/* ===== shell（整屏接管）===== */
.placement-cockpit--fs {
  position: fixed;
  inset: 0;
  top: 0;
  left: var(--app-rail-w, 248px);
  z-index: 40;
  width: auto;
  padding: 64px 32px 96px;
  overflow-y: auto;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  --pfs-signal: #e8590c;
  --pfs-card-shadow: 0 1px 2px color-mix(in srgb, var(--ds-color-on-surface) 4%, transparent),
    0 8px 24px -16px color-mix(in srgb, var(--ds-color-on-surface) 16%, transparent);
}
.placement-cockpit--fs::-webkit-scrollbar {
  width: 8px;
}
.placement-cockpit--fs::-webkit-scrollbar-thumb {
  background: var(--ds-color-outline-variant);
  border-radius: 4px;
}

/* ===== board-head ===== */
.placement-cockpit--fs .pfs-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.placement-cockpit--fs .pfs-bh-l {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.placement-cockpit--fs .pfs-bh-icon {
  font-size: 18px;
  line-height: 1;
}
.placement-cockpit--fs .pfs-bh-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.placement-cockpit--fs .pfs-bh-sub {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}
.placement-cockpit--fs .pfs-safe-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 11px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ===== filterbar ===== */
.placement-cockpit--fs .pfs-filterbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 12px;
}
.placement-cockpit--fs .pfs-fb-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.placement-cockpit--fs .pfs-fb-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.placement-cockpit--fs .pfs-fchip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 15px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
  white-space: nowrap;
}
/* filterbar 内复用的 .btn 收成 pill 34px（与 board chrome 一致） */
.placement-cockpit--fs .pfs-fb-right .btn {
  height: 34px;
  padding: 0 16px;
  border-radius: var(--ds-corner-full);
  font-size: 13px;
}

/* ===== trust-meta ===== */
.placement-cockpit--fs .pfs-trust-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 0 2px;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}
.placement-cockpit--fs .pfs-tm-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.placement-cockpit--fs .pfs-tm-item b {
  color: var(--ds-color-on-surface);
  font-weight: 600;
}
.placement-cockpit--fs .pfs-tm-dot {
  color: var(--ds-color-on-surface-variant);
}
.placement-cockpit--fs .pfs-ss-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ds-color-secondary);
  display: inline-block;
}

/* ===== section header ===== */
.placement-cockpit--fs .pfs-sec-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 13px;
}
.placement-cockpit--fs .pfs-sh-t {
  font-size: 13px;
  font-weight: 700;
}
.placement-cockpit--fs .pfs-sh-m {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

/* ===== 卡片基样式 ===== */
.placement-cockpit--fs .pfs-card {
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  box-shadow: var(--pfs-card-shadow);
}
.placement-cockpit--fs .pfs-card-eyebrow {
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-color-on-surface-variant);
}

/* ===== KPI bento ===== */
.placement-cockpit--fs .pfs-kpi-bento {
  display: grid;
  grid-template-columns: 1.25fr 2.6fr;
  gap: 16px;
  margin-bottom: 28px;
}
.placement-cockpit--fs .pfs-hero {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
}
.placement-cockpit--fs .pfs-hero-num {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 16px;
}
.placement-cockpit--fs .pfs-hero-sub {
  margin-top: 14px;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}
.placement-cockpit--fs .pfs-kpi-right {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.placement-cockpit--fs .pfs-kpi-card {
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  min-height: 100px;
}
.placement-cockpit--fs .pfs-kc-label {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.placement-cockpit--fs .pfs-kc-num {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 12px;
  line-height: 1;
}
.placement-cockpit--fs .pfs-kc-ft {
  margin-top: auto;
  padding-top: 10px;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}
/* gate 卡：左 signal 竖条（仿数据 Tab geo-card），grid 跨整行 */
.placement-cockpit--fs .pfs-gate-card {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-color: var(--ds-color-on-surface-variant);
}
.placement-cockpit--fs .pfs-gc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.placement-cockpit--fs .pfs-gc-lbl {
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.placement-cockpit--fs .pfs-gc-tag {
  font-family: var(--ds-typeface-code);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--pfs-signal);
  border: 1px solid var(--pfs-signal);
  border-radius: var(--ds-corner-full);
  padding: 1px 7px;
}
.placement-cockpit--fs .pfs-gc-num {
  font-size: 16px;
  font-weight: 800;
}
.placement-cockpit--fs .pfs-gc-sub {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}
.placement-cockpit--fs .pfs-gc-go {
  margin-top: 4px;
}
.placement-cockpit--fs .pfs-gc-go button {
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--ds-color-on-surface);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.placement-cockpit--fs .pfs-gc-go button:hover {
  opacity: 0.88;
}

/* ===== 投放流程 stage rail（signature）===== */
.placement-cockpit--fs .pfs-stage-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  padding: 6px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ds-color-on-surface) 4%, transparent);
}
.placement-cockpit--fs .pfs-srail-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--ds-corner-medium);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  background: none;
  transition: background 0.15s;
}
.placement-cockpit--fs .pfs-srail-step:hover,
.placement-cockpit--fs .pfs-srail-step.active {
  background: var(--ds-color-surface-container);
}
.placement-cockpit--fs .pfs-srail-step.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--ds-color-on-surface);
}
.placement-cockpit--fs .pfs-srail-step:not(:last-child) .pfs-sr-dot::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 16px;
  width: 100%;
  height: 2px;
  background: var(--ds-color-outline-variant);
  z-index: 0;
}
.placement-cockpit--fs .pfs-sr-dot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ds-typeface-code);
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
}
.placement-cockpit--fs .pfs-srail-step.done .pfs-sr-dot {
  background: var(--ds-color-on-surface);
  border-color: var(--ds-color-surface);
  color: var(--ds-color-surface);
}
.placement-cockpit--fs .pfs-srail-step.gate .pfs-sr-dot {
  border-color: var(--pfs-signal);
  color: var(--pfs-signal);
  background: var(--ds-color-surface);
}
.placement-cockpit--fs .pfs-srail-step.active .pfs-sr-dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-on-surface) 10%, transparent);
}
.placement-cockpit--fs .pfs-sr-tx {
  min-width: 0;
}
.placement-cockpit--fs .pfs-sr-tx b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.placement-cockpit--fs .pfs-sr-tx i {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.placement-cockpit--fs .pfs-sr-tx i.gate-tx {
  color: var(--pfs-signal);
}

/* ===== 阶段详情：复用 PlacementCenterCard 基样式，覆写成 ddash 卡观 ===== */
.placement-cockpit--fs .stage-panel {
  display: none;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.placement-cockpit--fs .stage-panel.on {
  display: block;
}
.placement-cockpit--fs .g2,
.placement-cockpit--fs .g3 {
  gap: 16px;
  margin-bottom: 16px;
}
.placement-cockpit--fs .pblock {
  padding: 16px 18px;
  border-radius: var(--ds-corner-large);
  box-shadow: var(--pfs-card-shadow);
}
.placement-cockpit--fs .kpis {
  margin-bottom: 16px;
}

/* ===== 响应式 ===== */
@media (max-width: 1180px) {
  .placement-cockpit--fs .pfs-kpi-bento {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .placement-cockpit--fs .pfs-stage-rail {
    grid-template-columns: 1fr 1fr;
  }
  .placement-cockpit--fs .pfs-kpi-right {
    grid-template-columns: 1fr;
  }
}
/*
 * 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 权威）。
 */

/* 视频卡尺寸单源（spec 2026-06-15 §6）：占位卡(.vpending)与真卡(.vthumb)共用，禁止任一处另写 aspect-ratio 字面量 */
:root { --vcard-aspect: 9 / 16; }

@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: 280px;
  border-radius: var(--ds-corner-medium);
  overflow: hidden;
  box-shadow: var(--ds-elevation-4);
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  position: relative;
  cursor: pointer;
}

.vcard--loaded-external {
  border-color: var(--ds-color-on-surface);
  border-style: dashed;
}
/* 到达瞬间 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-color-on-surface),
      0 0 0 6px rgba(24, 24, 27, 0.08);
  }
  100% {
    box-shadow:
      0 0 0 0 transparent,
      0 0 0 0 transparent;
  }
}
.vcard--linked {
  outline: 2px solid var(--ds-color-on-surface);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(24, 24, 27, 0.07);
}
.vthumb {
  position: relative;
  width: 100%;
  aspect-ratio: var(--vcard-aspect);
  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-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.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%);
}

/* 排查用：视频 ID 复制按钮（右上角，与状态 badge 同一行高度；默认低调） */
.vvideo-id-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(4px);
  opacity: 0.72;
  /* 禁点态卡片仍可点此按钮 */
  pointer-events: auto;
}
.vvideo-id-btn:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.42);
  opacity: 1;
}
.vvideo-id-btn:focus-visible {
  outline: 1.5px solid rgba(255, 255, 255, 0.7);
  outline-offset: 1px;
  opacity: 1;
}
/* hover 气泡：白字（覆盖 App.css 全局 .ant-tooltip-inner 的 --ds-text !important） */
.ant-tooltip.vvideo-id-tooltip .ant-tooltip-inner,
.vvideo-id-tooltip .ant-tooltip-inner {
  color: #fff !important;
}
/* 已发布卡右上角有时长 pill，给 ID 按钮让出空间 */
.vtop .veta {
  margin-right: 22px;
}

/* ===== 顶部 flag 行 ===== */
.vtop {
  position: absolute;
  top: var(--ds-sys-space-sm);
  left: var(--ds-sys-space-sm);
  right: var(--ds-sys-space-sm);
  display: flex;
  gap: 4px;
  align-items: center;
  z-index: 4;
}
.vflag {
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--ds-corner-full);
  color: var(--ds-color-on-surface);
  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-color-secondary);
  animation: vcard-pulse 1.4s infinite;
}
.vflag.f-success { background: var(--ds-color-warning); }
.vflag.f-pub { background: rgba(24, 24, 27, 0.85); }
.vflag.f-fail { background: var(--ds-color-error); }
.veta {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  padding: 1px 6px;
  border-radius: var(--ds-corner-full);
}

/* ===== 中央区域 ===== */
.vcenter {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  text-align: center;
  color: var(--ds-color-on-surface);
  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-sys-space-md);
}
.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-sys-space-sm);
}
.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-color-on-surface);
  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-corner-full);
  background: rgba(255, 255, 255, 0.16);
  color: var(--ds-color-on-surface);
  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-color-on-surface);
  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-sys-space-md);
  right: var(--ds-sys-space-md);
  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-sys-space-md);
  right: var(--ds-sys-space-md);
  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-color-on-surface);
  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-color-error);
  margin-bottom: var(--ds-sys-space-sm);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.fail-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ===== 底部信息层 ===== */
.vbottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--ds-sys-space-lg) var(--ds-sys-space-sm) var(--ds-sys-space-sm);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
  color: var(--ds-color-on-surface);
  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-color-on-surface);
  padding: 1px 4px;
  border: 1px solid var(--ds-color-on-surface);
  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-color-on-surface);
  padding: 3px 6px;
  border: 1px solid var(--ds-color-on-surface);
  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;
}
.vsource-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.vsource-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 16px;
  padding: 1px 6px;
  border-radius: var(--ds-corner-full);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ds-color-on-surface);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow-wrap: anywhere;
}
.vsource-badge--variant {
  background: rgba(255, 255, 255, 0.24);
}
.vsource-badge--source {
  background: rgba(24, 24, 27, 0.42);
}
.vkpi {
  display: flex;
  gap: 6px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 4px;
}
.vkpi b {
  color: var(--ds-color-on-surface);
  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-corner-full);
  background: rgba(255, 255, 255, 0.18);
  color: var(--ds-color-on-surface);
  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-corner-full);
  background: rgba(255, 255, 255, 0.12);
  color: var(--ds-color-on-surface);
  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-corner-full);
  background: rgba(255, 255, 255, 0.22);
  color: var(--ds-color-on-surface);
  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-color-on-surface);
  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-color-error);
  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-sys-space-xs);
  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-sys-space-md);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--ds-corner-small);
  border: none;
  cursor: pointer;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  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-color-surface-container);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.55);
}
.vbtn:active {
  transform: translateY(1px);
  background: var(--ds-color-surface-container-high);
  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-color-surface);
  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-color-on-surface);
  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-color-on-surface);
  line-height: 1.6;
}
.v-error-detail-muted {
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
  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-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-on-surface) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}
/* 亮色 hover 压纯黑；暗色白底 CTA 保持白。 */
.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-color-on-surface) !important;
  filter: none !important;
  box-shadow: var(--ds-elevation-4) !important;
}
[data-theme="dark"] .v-error-detail-modal .ant-btn-primary:hover,
[data-theme="dark"] .v-error-detail-modal .ant-btn-primary:focus {
  background: var(--ds-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-on-surface) !important;
}
.v-error-detail-modal .ant-btn-primary:disabled,
.v-error-detail-modal .ant-btn-primary[disabled] {
  background: var(--ds-color-surface-container-high) !important;
  border-color: var(--ds-color-surface-container-high) !important;
  color: var(--ds-color-on-surface-variant) !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: 280px;
  aspect-ratio: var(--vcard-aspect);
  box-sizing: border-box;
  background: var(--ds-color-surface);
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  position: relative;
}
.vpending-thumb {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, var(--ds-color-surface-container) 30%, var(--ds-color-surface-container-high) 50%, var(--ds-color-surface-container) 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-color-outline-variant);
  border-top-color: var(--ds-color-on-surface);
  animation: vpending-spin 1s linear infinite;
}
.vpending--fail {
  border-style: solid;
  border-color: var(--ds-color-error, );
  pointer-events: auto;
}
.vpending--fail .vpending-thumb {
  background: linear-gradient(180deg, #fff1f2 0%, #fee2e2 100%);
  animation: none;
}
.vpending-fail-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--ds-color-error, );
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
}
.vpending-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--ds-sys-space-lg) var(--ds-sys-space-sm) var(--ds-sys-space-sm);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--ds-color-surface) 72%);
}
.vpending-skel {
  background: linear-gradient(110deg, var(--ds-color-surface-container) 30%, var(--ds-color-surface-container-high) 50%, var(--ds-color-surface-container) 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-color-on-surface);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
}
.vpending--fail .vpending-label {
  max-width: calc(100% - 16px);
  background: var(--ds-color-error, );
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vpending-actions {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 10px;
  display: flex;
  pointer-events: auto;
}
@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;
}

/* ===== 横版卡（方案 B）：封面 16:9 在上 + 白底信息区下挂（spec 2026-06-15 §4.3）=====
 * 画幅 16:9 由 VideoCard.tsx 内联 style 覆盖 --vcard-aspect 提供（禁止此处写 aspect-ratio 字面量）。
 * 视觉权威：docs/design/2026-06-15-ppt-landscape-video-card.html（方案 B）。
 * 全部颜色用 --ds-* token；竖版无修饰符选择器一律不动。 */
.vcard--landscape { width: 340px; }

/* 信息区：从封面上的暗色叠加层 → 封面下方白底正常流面板 */
.vcard--landscape .vbottom {
  position: static;
  padding: var(--ds-sys-space-md);
  background: var(--ds-color-surface);
  border-top: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
}
.vcard--landscape .vbottom.bg-fail-tint {
  background: var(--ds-color-surface);
}
/* 文本反色（白底）：标题 / 描述 / meta / KPI / 失败提示 */
.vcard--landscape .vtitle { font-size: 13px; color: var(--ds-color-on-surface); margin-bottom: 4px; }
.vcard--landscape .vdesc { font-size: 11px; color: var(--ds-color-on-surface-variant); margin-bottom: 8px; }
.vcard--landscape .vdesc--empty { color: var(--ds-color-on-surface-variant); }
.vcard--landscape .vmeta {
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  margin-bottom: 10px;
}
.vcard--landscape .vkpi { color: var(--ds-color-on-surface-variant); }
.vcard--landscape .vkpi b { color: var(--ds-color-on-surface); }
.vcard--landscape .fail-msg { color: var(--ds-color-on-surface-variant); }

/* inline 编辑态在白底上的 hover / input 反色 */
.vcard--landscape .vtitle--editable:hover,
.vcard--landscape .vdesc--editable:hover {
  background: var(--ds-color-surface-container);
  border-color: var(--ds-color-on-surface-variant);
}
.vcard--landscape .vtitle-input,
.vcard--landscape .vdesc-input {
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface-variant);
}

/* 标签在白底上：去玻璃态，浅底描边 */
.vcard--landscape .vtag {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  border: 1px solid var(--ds-color-outline-variant);
  backdrop-filter: none;
}

/* 操作按钮：白底面板上 secondary（白底描边）为默认，主操作 primary 为 ink 实底 */
.vcard--landscape .vbtn {
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  border: 1px solid var(--ds-color-outline-variant);
  box-shadow: none;
}
.vcard--landscape .vbtn:hover {
  background: var(--ds-color-surface-container);
  box-shadow: none;
}
.vcard--landscape .vbtn--primary {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  border: none;
}
.vcard--landscape .vbtn--primary:hover {
  background: var(--ds-color-on-surface);
  opacity: 0.92;
}
.vcard--landscape .vbtn.ghost {
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  border: 1px solid var(--ds-color-outline-variant);
  backdrop-filter: none;
}
.vcard--landscape .vbtn.ghost:hover {
  background: var(--ds-color-surface-container);
}

/* 横版封面较矮，播放按钮收小（对齐预览稿 .play-btn.sm） */
.vcard--landscape .play-btn { width: 38px; height: 38px; }

/* ===== 横版占位骨架（VPending）：宽 340，画幅 16:9 由内联 token 提供 ===== */
.vpending--landscape { width: 340px; }

/* ===== 新版卡片设计（2026-06-27）===== */

/* --- 深色实心 pill badge（成片 / EN·英文 等）--- */
.vflag--solid {
  background: rgba(24, 24, 27, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--ds-corner-full);
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* --- 白底底部信息区（vbottom--card）--- */
/* 覆盖原有绝对定位 + 暗色 gradient，改为流式白底区块 */
.vbottom--card {
  position: relative !important;
  background: var(--ds-color-surface, ) !important;
  color: var(--ds-color-on-surface, ) !important;
  padding: 10px 12px 8px !important;
  border-top: 1px solid var(--ds-color-outline-variant);
}

/* 白底底部：标题 */
.vbottom--card .vtitle,
.vtitle--card {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-color-on-surface, );
  line-height: 1.4;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
  border: none;
  background: none;
}

/* 白底底部：可编辑态标题 hover */
.vbottom--card .vtitle--editable:hover {
  background: var(--ds-color-surface-container, );
  border-color: var(--ds-color-on-surface-variant);
}

/* 白底底部：vtitle-input */
.vbottom--card .vtitle-input {
  color: var(--ds-color-on-surface, );
  background: var(--ds-color-surface, );
  border-color: var(--ds-color-on-surface-variant);
}

/* 白底底部：副标题元信息 */
.vmeta--light {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant, );
  margin-bottom: 4px;
  line-height: 1.4;
}

/* --- 状态行 --- */
.vstatus {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 6px;
}
.vstatus--success {
  color: var(--ds-color-secondary, );
}
.vstatus-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.vstatus-dot--success {
  background: var(--ds-color-secondary, );
}
.vstatus--loading {
  color: var(--ds-color-on-surface-variant, );
}
.vstatus-spinner {
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(113,113,122,0.3);
  border-top-color: var(--ds-color-on-surface-variant, );
  border-radius: 50%;
  animation: vcard-spin 0.8s linear infinite;
  flex-shrink: 0;
}

/* 白底底部：vsource-badges 颜色反转为深色 */
.vbottom--card .vsource-badge {
  background: var(--ds-color-surface-container, );
  color: var(--ds-color-on-surface-variant, );
  border-color: var(--ds-color-on-surface-variant);
}

/* 白底底部：vdesc */
.vbottom--card .vdesc {
  color: var(--ds-color-on-surface-variant, );
  font-size: 11px;
}
.vbottom--card .vdesc--empty { color: var(--ds-color-outline, ); }

/* 白底底部：vdesc 可编辑 hover */
.vbottom--card .vdesc--editable:hover {
  background: var(--ds-color-surface-container, );
  border-color: var(--ds-color-on-surface-variant);
}
.vbottom--card .vdesc-input {
  color: var(--ds-color-on-surface, );
  background: var(--ds-color-surface, );
  border-color: var(--ds-color-on-surface-variant);
}

/* 白底底部：tags */
.vbottom--card .vtag {
  background: var(--ds-color-surface-container, );
  color: var(--ds-color-on-surface-variant, );
  border: 1px solid var(--ds-color-outline-variant);
  backdrop-filter: none;
}
.vbottom--card .vtag-add {
  background: transparent;
  color: var(--ds-color-on-surface-variant, );
  border-color: var(--ds-color-on-surface-variant);
}
.vbottom--card .vtag-add:hover {
  background: var(--ds-color-surface-container, );
  border-color: var(--ds-color-on-surface-variant, );
}

/* 白底底部：操作按钮 */
.vbottom--card .vbtn {
  background: var(--ds-color-surface-container, );
  color: var(--ds-color-on-surface, );
  border: 1px solid var(--ds-color-outline-variant);
  backdrop-filter: none;
}
.vbottom--card .vbtn:hover {
  background: var(--ds-color-outline-variant);
}
.vbottom--card .vbtn--primary {
  background: var(--ds-color-on-surface, );
  color: #ffffff;
  border-color: var(--ds-color-on-surface, );
}
.vbottom--card .vbtn--primary:hover { opacity: 0.85; }

/* 白底底部：失败卡操作区（右侧垂直居中删除图标） */
.vbottom-actions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  /* 禁点态下整卡不响应预览，但删除按钮需保持可点 */
  pointer-events: auto;
}
.vbottom-actions .vbtn {
  flex: 0 0 auto;
  box-shadow: none;
}
.vbottom-actions .vbtn:hover {
  box-shadow: none;
}
/* 图标按钮：圆形、紧凑 */
.vbtn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
}
/* 删除图标按钮：危险红，透明底，hover 浅红实底 */
.vbtn--danger {
  color: var(--ds-color-outline, );
  border: none;
  background: transparent;
}
.vbtn--danger:hover {
  color: #ffffff;
  background: var(--ds-color-error, );
}

/* --- 多语言衍生生成中：浅色斜纹占位区 --- */
.vthumb--localized-gen {
  background: #f4f4f5;
}
.bg-hatch {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    rgba(0,0,0,0.04) 6px,
    rgba(0,0,0,0.04) 12px
  );
}

/* 浅色背景的 vcenter */
.vcenter--light {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  text-align: center;
  z-index: 3;
  width: 88%;
}

/* gen-ring 浅色模式：轨道/进度改为深色系 */
.gen-ring--light .track {
  stroke: rgba(24, 24, 27, 0.12);
}
.gen-ring--light .progress {
  stroke: rgba(24, 24, 27, 0.55);
}
.gen-ring--light .gen-ring-glyph {
  color: var(--ds-color-on-surface-variant, );
  filter: none;
  animation: none;
}
/* 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 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-color-surface);
}
.mm-canvas .react-flow__background {
  background: var(--ds-color-surface);
}
/* 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 {
   position: absolute !important;
   bottom: 12px !important;
   right: 12px !important;
   z-index: 10 !important;
   border: 1px solid var(--ds-color-outline-variant);
   border-radius: var(--ds-corner-medium);
   background: rgba(255, 255, 255, 0.94);
   box-shadow: var(--ds-elevation-1);
 }
.mm-canvas .react-flow__controls button {
  background: var(--ds-color-surface);
  border-bottom: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
}
.mm-canvas [data-testid="canvas-controls"] {
  z-index: 1;
}
.mm-canvas .react-flow__node-childVideo {
  z-index: 2;
}

/* ===== 父-子连线 ===== */
.mm-canvas .react-flow__edge.mm-edge--idle .react-flow__edge-path {
  stroke: color-mix(in srgb, var(--ds-color-on-surface) 30%, transparent);
  stroke-width: 0.75;
  stroke-dasharray: 4 5;
  opacity: 0.55;
}
.mm-canvas .react-flow__edge.mm-edge--active .react-flow__edge-path {
  stroke: color-mix(in srgb, var(--ds-color-on-surface) 58%, transparent);
  stroke-width: 1;
  stroke-dasharray: none;
  opacity: 0.68;
}

/* ===== root 模板节点 ===== */
.mm-root {
  width: 720px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  box-shadow: var(--ds-elevation-4);
  padding: var(--ds-sys-space-xl);
}
.mm-root-head { margin-bottom: var(--ds-sys-space-lg); }
.mm-root-title {
  font-size: 18px; font-weight: 800; color: var(--ds-color-on-surface);
}
.mm-root-sub {
  font-size: 12px; color: var(--ds-color-on-surface-variant); margin-top: 4px;
}
.map-create-tabs {
  display: flex;
  gap: 26px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  margin: 18px 0 16px;
}
.mm-root--article-open .map-create-tabs {
  margin-top: 0;
  margin-bottom: 16px;
}
.mm-root--article-open .geo-tpl-node {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.map-ctab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 1px 12px;
  margin-bottom: -1px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.map-ctab svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.map-ctab-num {
  font-family: var(--ds-typeface-code);
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}
.map-ctab--on {
  color: var(--ds-color-on-surface);
  border-bottom-color: var(--ds-color-on-surface);
}
.map-ctab--on .map-ctab-num {
  color: var(--ds-color-on-surface);
}
.mm-tpl-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--ds-sys-space-md);
}
.mm-tpl-tile {
  position: relative;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface-container);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}
.mm-tpl-tile:hover {
  background: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface-variant);
}
.mm-tpl-tile--selected {
  background: var(--ds-color-surface);
  border: 1.5px solid var(--ds-color-on-surface);
}
.mm-tpl-tile--dim { opacity: 0.42; }
.mm-tpl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 16px;
}
.mm-tpl-name { font-size: 13px; font-weight: 700; color: var(--ds-color-on-surface); display: block; }
.mm-tpl-desc {
  font-size: 11px; color: var(--ds-color-on-surface-variant); line-height: 1.5; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mm-tpl-pick {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ds-color-on-surface);
}
.mm-tpl-pick svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: var(--ds-color-on-surface);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mm-tpl-located,
.geo-genre-located {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.mm-tpl-located {
  position: absolute;
  top: 9px;
  right: 9px;
  min-height: 20px;
  padding: 0 7px;
}
.geo-genre-located {
  margin-left: 5px;
  min-height: 16px;
  padding: 0 5px;
}
.geo-genre-card {
  position: relative;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface-container);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.geo-genre-card:hover {
  background: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface-variant);
}
.geo-genre-card--primary,
.geo-genre-card--recommended {
  background: var(--ds-color-surface);
  border-color: color-mix(in srgb, var(--ds-color-primary) 42%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-primary) 10%, transparent);
}
.geo-genre-card--secondary {
  opacity: 0.72;
}
.geo-genre-card--secondary:hover {
  opacity: 1;
}
.geo-genre-card--located {
  border-color: var(--ds-color-on-surface);
  box-shadow: 0 0 0 1px var(--ds-color-on-surface);
}
.geo-genre-card--located .geo-genre-located {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 20px;
  padding: 0 7px;
}
.geo-genre-card--located-dim {
  opacity: 0.5;
  filter: grayscale(1);
}
.geo-genre-card--located-dim:hover {
  opacity: 0.5;
}
.geo-genre-card--unavailable,
.geo-genre-card--unavailable:hover {
  cursor: not-allowed;
  opacity: 0.48;
  background: var(--ds-color-surface-container);
  border-color: transparent;
}
.geo-genre-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--ds-corner-full);
  border: 1px solid color-mix(in srgb, var(--ds-color-primary) 28%, transparent);
  background: var(--ds-color-primary-container);
  color: var(--ds-color-on-primary-container);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.geo-genre-card--secondary .geo-genre-card__badge,
.geo-genre-card--unavailable .geo-genre-card__badge {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
}
.geo-genre-card__intent {
  margin: -1px 0 6px;
  color: var(--ds-color-on-surface);
  font-size: 10.5px;
  font-weight: 800;
}
.geo-genre-card--secondary .geo-genre-card__intent,
.geo-genre-card--unavailable .geo-genre-card__intent {
  color: var(--ds-color-on-surface-variant);
}
.mm-root-foot {
  margin-top: var(--ds-sys-space-lg);
  display: flex; justify-content: flex-end;
}
.mm-confirm-btn {
  padding: 12px 22px;
  font-size: 13px; font-weight: 700;
  border: none; border-radius: var(--ds-corner-medium);
  background: var(--ds-color-on-surface); color: var(--ds-color-surface);
  cursor: pointer;
}
.mm-confirm-btn:disabled {
  background: var(--ds-color-outline-variant); color: var(--ds-color-on-surface);
  cursor: not-allowed; opacity: 0.6;
}

.creation-lane-node {
  width: 320px;
  min-height: 36px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 8px;
  border: none;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: transparent;
  box-shadow: none;
}

.creation-lane-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--ds-color-on-surface);
}

.creation-lane-meta {
  margin-top: 0;
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
}

.creation-lane-link {
  border: none;
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.creation-lane-link:hover {
  color: var(--ds-color-on-surface);
}

.creation-lane-tail {
  width: 320px;
  min-height: 84px;
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: color-mix(in srgb, var(--ds-color-surface-container) 62%, transparent);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.creation-lane-tail:hover {
  border-color: var(--ds-color-on-surface);
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
}

/* ===== child 节点 ===== */
.mm-child {
  position: relative;
  width: 240px;
  transition: width 180ms ease, min-height 180ms ease, opacity 160ms ease;
}

.mm-child--pending,
.mm-child--record {
  will-change: width, min-height, opacity;
}

.mm-node-pin {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 8;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  opacity: 0.78;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.mm-node-pin:hover {
  opacity: 1;
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
}

.mm-node-pin:focus-visible {
  outline: 2px solid var(--ds-color-on-surface);
  outline-offset: 2px;
}

.mm-node-pin--active {
  opacity: 1;
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
  transform: rotate(-18deg);
}

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

/* shared courseware action row */
.mm-custom-actions { display: flex; gap: var(--ds-sys-space-sm); justify-content: flex-end; }

/* courseware workspace */
.mm-courseware-workspace {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-md);
  color: var(--ds-color-on-surface);
}

.mm-courseware-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sys-space-xs);
  padding: var(--ds-sys-space-xs);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
}

.mm-courseware-mode {
  height: 32px;
  border: 0;
  border-radius: var(--ds-corner-small);
  background: transparent;
  color: var(--ds-color-on-surface-variant);
  font: 600 13px/1 var(--ds-typeface-plain);
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.mm-courseware-mode[aria-pressed="true"] {
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  box-shadow: inset 0 0 0 1px var(--ds-color-outline-variant);
}

.mm-courseware-mode:disabled {
  cursor: wait;
  opacity: 0.62;
}

.mm-courseware-status {
  min-height: 20px;
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  line-height: 20px;
}

.mm-courseware-status--error {
  color: var(--ds-color-error);
}

.mm-courseware-workspace .mm-courseware-editor.ant-input {
  min-height: 180px;
  border-color: var(--ds-color-on-surface-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.mm-courseware-workspace .mm-courseware-editor.ant-input::placeholder {
  color: var(--ds-color-on-surface-variant);
}

.mm-courseware-workspace .mm-cta-ink.ant-btn,
.mm-courseware-workspace .mm-cta-ink.ant-btn-primary,
.mm-courseware-workspace .mm-cta-ink.ant-btn:focus,
.mm-courseware-workspace .mm-cta-ink.ant-btn-primary:focus {
  background: var(--ds-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-on-surface) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* 亮色 hover 压纯黑；暗色白底 CTA 保持白。 */
.mm-courseware-workspace .mm-cta-ink.ant-btn:hover,
.mm-courseware-workspace .mm-cta-ink.ant-btn-primary:hover {
  background: #000000 !important;
  border-color: #000000 !important;
  color: var(--ds-color-on-surface) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: var(--ds-elevation-4) !important;
}
[data-theme="dark"] .mm-courseware-workspace .mm-cta-ink.ant-btn:hover,
[data-theme="dark"] .mm-courseware-workspace .mm-cta-ink.ant-btn-primary:hover {
  background: var(--ds-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-on-surface) !important;
}

.mm-courseware-workspace .mm-cta-ink.ant-btn:disabled,
.mm-courseware-workspace .mm-cta-ink.ant-btn-primary:disabled {
  background: var(--ds-color-surface-container-high) !important;
  border-color: var(--ds-color-surface-container-high) !important;
  color: var(--ds-color-on-surface-variant) !important;
  background-image: none !important;
  opacity: 0.6;
}

.mm-courseware-preview-reopen {
  height: 36px;
  padding: 0 var(--ds-sys-space-lg);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font: 700 13px/1 var(--ds-typeface-plain);
  letter-spacing: 0;
  cursor: pointer;
}

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

/* hotspot factory workspace */
.mm-hotspot-ws {
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: var(--ds-color-on-surface);
}
.mm-hotspot-page {
  height: 680px;
  min-height: 680px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-elevation-1);
}
.mm-hotspot-page--radar {
  padding: var(--ds-sys-space-xl);
}
.mm-hotspot-page--extract {
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ds-color-on-surface) 3%, transparent), transparent 34%),
    var(--ds-color-surface);
}
.mm-hotspot-page--pending {
  opacity: 0.72;
}
.mm-hotspot-extract-head {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-xl) var(--ds-sys-space-xl) var(--ds-sys-space-lg);
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}
.mm-hotspot-extract-head > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--ds-color-on-surface);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-family: var(--ds-typeface-code);
  font-size: 13px;
  font-weight: 850;
}
.mm-hotspot-extract-head h3 {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 850;
}
.mm-hotspot-extract-head p {
  margin: 5px 0 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.55;
}
.mm-hotspot-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-xl);
  min-height: 56px;
  padding: 0 0 var(--ds-sys-space-md);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}
.mm-hotspot-status-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.mm-hotspot-live-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--ds-color-on-surface);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ds-color-on-surface) 10%, transparent);
  animation: mm-hotspot-pulse 1.4s ease-in-out infinite;
}
.mm-hotspot-status h3,
.mm-hotspot-choice h4 {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.28;
}
.mm-hotspot-status p,
.mm-hotspot-choice p {
  margin: 6px 0 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.6;
}
.mm-hotspot-status-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-md);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-family: var(--ds-typeface-code);
  white-space: nowrap;
}
.mm-hotspot-done {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 700;
}
.mm-hotspot-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-sys-space-sm);
}
.mm-hotspot-step {
  padding: 8px 10px;
  border-radius: var(--ds-corner-small);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.mm-hotspot-step--done {
  border-color: var(--ds-color-on-surface-variant);
  color: var(--ds-color-on-surface);
}
.mm-hotspot-step--current {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
}
.mm-hotspot-radar {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 174px;
  min-height: 504px;
  overflow: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
}
.mm-hotspot-source-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--ds-sys-space-lg) 10px;
  border-right: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}
.mm-hotspot-rail-item {
  min-height: 64px;
  padding: 9px;
  display: grid;
  align-content: space-between;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  line-height: 1.25;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.mm-hotspot-rail-item strong {
  color: var(--ds-color-on-surface);
  font-size: 17px;
  font-family: var(--ds-typeface-code);
  line-height: 1;
}
.mm-hotspot-rail-item--active {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
}
.mm-hotspot-rail-item--error {
  border-color: var(--ds-color-error);
  color: var(--ds-color-error);
  background: color-mix(in srgb, var(--ds-color-error) 7%, var(--ds-color-surface));
}
.mm-hotspot-radar-main {
  min-width: 0;
  padding: var(--ds-sys-space-lg);
  background:
    radial-gradient(circle at 72% 14%, color-mix(in srgb, var(--ds-color-on-surface) 8%, transparent), transparent 28%),
    linear-gradient(180deg, var(--ds-color-surface), color-mix(in srgb, var(--ds-color-surface-container) 48%, var(--ds-color-surface)));
}
.mm-hotspot-scan-panel {
  min-height: 240px;
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background:
    linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--ds-color-on-surface) 7%, transparent) 48%, transparent 100%),
    var(--ds-color-surface);
  background-size: 220px 100%;
  animation: mm-hotspot-scan 2.6s linear infinite;
}
.mm-hotspot-radar-ring {
  position: absolute;
  width: 220px;
  height: 220px;
  right: -56px;
  top: -46px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ds-color-on-surface) 16%, transparent);
}
.mm-hotspot-radar-ring::before,
.mm-hotspot-radar-ring::after {
  content: "";
  position: absolute;
  inset: 34px;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--ds-color-on-surface) 11%, transparent);
}
.mm-hotspot-radar-ring::after {
  inset: 72px;
  background: color-mix(in srgb, var(--ds-color-on-surface) 7%, transparent);
}
.mm-hotspot-scan-copy {
  position: relative;
  z-index: 1;
  max-width: 78%;
}
.mm-hotspot-kicker {
  display: inline-flex;
  margin-bottom: var(--ds-sys-space-md);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.mm-hotspot-scan-copy h4 {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 850;
}
.mm-hotspot-scan-copy h4 em {
  color: var(--ds-color-error);
  font-style: normal;
}
.mm-hotspot-scan-copy p {
  margin: var(--ds-sys-space-sm) 0 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  line-height: 1.75;
}
.mm-hotspot-signal {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-sm);
  padding: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
}
.mm-hotspot-signal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-md);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}
.mm-hotspot-signal-head strong {
  color: var(--ds-color-on-surface);
  font-size: 12px;
}
.mm-hotspot-source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--ds-sys-space-lg);
}
.mm-hotspot-source-row span {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 700;
}
.mm-hotspot-source-row .mm-hotspot-source--active {
  border-color: var(--ds-color-on-surface-variant);
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
}
.mm-hotspot-candidate-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sys-space-sm);
  margin-top: var(--ds-sys-space-md);
}
.mm-hotspot-candidate-button {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--ds-sys-space-sm);
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mm-hotspot-candidate-button strong {
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 13px;
  line-height: 1;
}
.mm-hotspot-candidate-button span {
  min-width: 0;
  color: inherit;
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}
.mm-hotspot-candidate-button--active {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
}
.mm-hotspot-progress {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ds-color-outline-variant);
}
.mm-hotspot-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ds-color-on-surface), color-mix(in srgb, var(--ds-color-on-surface) 54%, var(--ds-color-surface-container-high)));
  transition: width 0.28s ease;
}
.mm-hotspot-log {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.mm-hotspot-log-row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: color-mix(in srgb, var(--ds-color-surface) 86%, transparent);
}
.mm-hotspot-log-row span {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-family: var(--ds-typeface-code);
}
.mm-hotspot-log-row strong {
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 800;
}
.mm-hotspot-log-row em {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}
.mm-hotspot-log-row p {
  grid-column: 2 / 4;
  margin: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  line-height: 1.45;
}
.mm-hotspot-radar-side {
  display: grid;
  gap: var(--ds-sys-space-md);
  align-content: start;
  padding: var(--ds-sys-space-lg);
  border-left: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}
.mm-hotspot-metric {
  padding: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
}
.mm-hotspot-metric span {
  display: block;
  margin-bottom: 7px;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}
.mm-hotspot-metric strong {
  display: block;
  color: var(--ds-color-on-surface);
  font-size: 24px;
  line-height: 1;
  font-family: var(--ds-typeface-code);
  font-weight: 850;
}
.mm-hotspot-side-note {
  margin: 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.65;
}
.mm-hotspot-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ds-sys-space-lg);
  padding: var(--ds-sys-space-xl);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ds-color-on-surface) 5%, transparent), transparent 45%),
    var(--ds-color-surface);
}
.mm-hotspot-page--extract .mm-hotspot-choice {
  border: 0;
  border-radius: 0;
  padding-bottom: var(--ds-sys-space-lg);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ds-color-on-surface) 4%, transparent), transparent 48%),
    var(--ds-color-surface);
}
.mm-hotspot-extract-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-sys-space-md);
  padding: 0 var(--ds-sys-space-xl) var(--ds-sys-space-xl);
}
.mm-hotspot-extract-card {
  min-height: 132px;
  padding: var(--ds-sys-space-lg);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
}
.mm-hotspot-extract-card--wide {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 280px;
}
.mm-hotspot-extract-card span {
  display: inline-flex;
  margin-bottom: var(--ds-sys-space-sm);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 800;
}
.mm-hotspot-extract-card h4 {
  margin: 0;
  color: var(--ds-color-on-surface);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 850;
}
.mm-hotspot-extract-card p {
  margin: var(--ds-sys-space-sm) 0 0;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.65;
}
.mm-hotspot-extract-card ul {
  display: grid;
  gap: 8px;
  margin: var(--ds-sys-space-lg) 0 0;
  padding: 0;
  list-style: none;
}
.mm-hotspot-extract-card li {
  padding: 8px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  line-height: 1.5;
}
.mm-hotspot-link {
  color: var(--ds-color-on-surface);
  word-break: break-all;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mm-hotspot-choice--pending {
  opacity: 0.68;
}
.mm-hotspot-choice-badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  margin-bottom: var(--ds-sys-space-md);
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 800;
}
.mm-hotspot-choice h5 {
  margin: var(--ds-sys-space-md) 0 0;
  max-width: 820px;
  color: var(--ds-color-on-surface);
  font-size: 20px;
  line-height: 1.38;
  font-weight: 850;
}
.mm-hotspot-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-sys-space-md);
  margin-top: var(--ds-sys-space-lg);
}
.mm-hotspot-choice-grid > div {
  padding: var(--ds-sys-space-lg);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
}
.mm-hotspot-choice-grid strong {
  display: flex;
  margin-bottom: var(--ds-sys-space-sm);
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 850;
}
.mm-hotspot-choice-grid p {
  margin: 0;
}
.mm-hotspot-choice-action {
  display: grid;
  align-content: start;
  justify-items: end;
  gap: var(--ds-sys-space-md);
}
.mm-hotspot-choice-action span {
  min-width: 64px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-code);
  font-size: 14px;
  font-weight: 850;
}
.mm-hotspot-choice .mm-cta-ink.ant-btn,
.mm-hotspot-choice .mm-cta-ink.ant-btn-primary,
.mm-hotspot-choice .mm-cta-ink.ant-btn:focus,
.mm-hotspot-choice .mm-cta-ink.ant-btn:hover {
  background: var(--ds-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-on-surface) !important;
  box-shadow: none !important;
}

/* hotspot ink lock: this workspace must stay black/gray even when global Ant/GEO theme styles are loaded later. */
.mm-hotspot-ws .mm-hotspot-live-dot {
  background: var(--ds-color-on-surface) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ds-color-on-surface) 10%, transparent) !important;
}
.mm-hotspot-ws .ant-spin-dot-item {
  background-color: var(--ds-color-on-surface) !important;
}
.mm-hotspot-ws .ant-spin,
.mm-hotspot-ws .ant-spin-dot,
.mm-hotspot-ws .ant-spin-dot-holder {
  color: var(--ds-color-on-surface) !important;
  border-color: var(--ds-color-on-surface) !important;
}
.mm-hotspot-ws .mm-hotspot-step,
.mm-hotspot-ws .mm-hotspot-rail-item,
.mm-hotspot-ws .mm-hotspot-signal,
.mm-hotspot-ws .mm-hotspot-metric,
.mm-hotspot-ws .mm-hotspot-log-row,
.mm-hotspot-ws .mm-hotspot-candidate-button,
.mm-hotspot-ws .mm-hotspot-choice-grid > div,
.mm-hotspot-ws .mm-hotspot-extract-card,
.mm-hotspot-ws .mm-hotspot-extract-card li {
  border-color: var(--ds-color-on-surface-variant) !important;
  background: var(--ds-color-surface) !important;
  color: var(--ds-color-on-surface-variant) !important;
}
.mm-hotspot-ws .mm-hotspot-step--done,
.mm-hotspot-ws .mm-hotspot-step--current,
.mm-hotspot-ws .mm-hotspot-rail-item--active,
.mm-hotspot-ws .mm-hotspot-candidate-button--active {
  border-color: var(--ds-color-on-surface) !important;
  background: var(--ds-color-surface-container) !important;
  color: var(--ds-color-on-surface) !important;
}
.mm-hotspot-ws .mm-hotspot-rail-item--error {
  border-color: var(--ds-color-error) !important;
  background: color-mix(in srgb, var(--ds-color-error) 7%, var(--ds-color-surface)) !important;
  color: var(--ds-color-error) !important;
}
.mm-hotspot-ws .mm-hotspot-radar-main {
  background:
    radial-gradient(circle at 72% 14%, color-mix(in srgb, var(--ds-color-on-surface) 9%, transparent), transparent 28%),
    linear-gradient(180deg, var(--ds-color-surface), color-mix(in srgb, var(--ds-color-surface-container) 56%, var(--ds-color-surface))) !important;
}
.mm-hotspot-ws .mm-hotspot-scan-panel {
  border-color: var(--ds-color-on-surface-variant) !important;
  background:
    linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--ds-color-on-surface) 8%, transparent) 48%, transparent 100%),
    var(--ds-color-surface) !important;
}
.mm-hotspot-ws .mm-hotspot-radar-ring,
.mm-hotspot-ws .mm-hotspot-radar-ring::before,
.mm-hotspot-ws .mm-hotspot-radar-ring::after {
  border-color: color-mix(in srgb, var(--ds-color-on-surface) 16%, transparent) !important;
}
.mm-hotspot-ws .mm-hotspot-radar-ring::after {
  background: color-mix(in srgb, var(--ds-color-on-surface) 8%, transparent) !important;
}
.mm-hotspot-ws .mm-hotspot-source-row span,
.mm-hotspot-ws .mm-hotspot-done,
.mm-hotspot-ws .mm-hotspot-choice-badge,
.mm-hotspot-ws .mm-hotspot-choice-action span {
  border-color: var(--ds-color-on-surface-variant) !important;
  background: var(--ds-color-surface-container) !important;
  color: var(--ds-color-on-surface) !important;
}
.mm-hotspot-ws .mm-hotspot-source-row .mm-hotspot-source--active {
  border-color: var(--ds-color-on-surface) !important;
  background: var(--ds-color-surface-container) !important;
  color: var(--ds-color-on-surface) !important;
}
.mm-hotspot-ws .mm-hotspot-progress {
  background: var(--ds-color-outline-variant) !important;
}
.mm-hotspot-ws .mm-hotspot-progress span {
  background: linear-gradient(90deg, var(--ds-color-on-surface), color-mix(in srgb, var(--ds-color-on-surface) 58%, var(--ds-color-outline-variant))) !important;
}
.mm-hotspot-ws .mm-hotspot-choice {
  border-color: var(--ds-color-on-surface-variant) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ds-color-on-surface) 5%, transparent), transparent 45%),
    var(--ds-color-surface) !important;
}
.mm-hotspot-ws .mm-cta-ink.ant-btn,
.mm-hotspot-ws .mm-cta-ink.ant-btn-primary,
.mm-hotspot-ws .mm-cta-ink.ant-btn-default,
.mm-hotspot-ws .mm-cta-ink.ant-btn:focus,
.mm-hotspot-ws .mm-cta-ink.ant-btn:hover,
.mm-hotspot-ws .mm-cta-ink.ant-btn-primary:focus,
.mm-hotspot-ws .mm-cta-ink.ant-btn-primary:hover {
  background: var(--ds-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-on-surface) !important;
  box-shadow: none !important;
}

@keyframes mm-hotspot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.72); opacity: 0.65; }
}

@keyframes mm-hotspot-scan {
  from { background-position: -220px 0; }
  to { background-position: 560px 0; }
}

@media (max-width: 980px) {
  .mm-hotspot-page {
    height: auto;
    min-height: 0;
  }
  .mm-hotspot-radar {
    grid-template-columns: 1fr;
  }
  .mm-hotspot-source-rail {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--ds-color-outline-variant);
  }
  .mm-hotspot-rail-item {
    min-width: 84px;
  }
  .mm-hotspot-radar-side {
    border-left: 0;
    border-top: 1px solid var(--ds-color-outline-variant);
  }
  .mm-hotspot-scan-copy {
    max-width: none;
  }
  .mm-hotspot-choice,
  .mm-hotspot-choice-grid,
  .mm-hotspot-candidate-list {
    grid-template-columns: 1fr;
  }
  .mm-hotspot-extract-grid {
    grid-template-columns: 1fr;
  }
  .mm-hotspot-extract-card--wide {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
  }
  .mm-hotspot-choice-action {
    justify-items: start;
  }
}

/* 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-color-on-surface);
  border-color: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}
.mm-cta-ink.ant-btn:hover {
  background: var(--ds-color-on-surface);
  border-color: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  opacity: 0.88;
}
.mm-cta-ink.ant-btn:disabled,
.mm-cta-ink.ant-btn:disabled:hover {
  background: var(--ds-color-outline-variant);
  border-color: var(--ds-color-on-surface-variant);
  color: var(--ds-color-on-surface);
  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-sys-space-xl);
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  box-shadow: var(--ds-elevation-4);
}

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

/* ===== language selection node ===== */
.react-flow__node-languageSelection {
  z-index: 1100 !important;
}

.mm-language-node {
  position: relative;
  width: 360px;
  padding: var(--ds-sys-space-lg);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-elevation-1);
  transition: opacity 0.26s ease, transform 0.26s ease;
}
.mm-language-node.is-exiting {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}
@keyframes cardin {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.react-flow__node-childVideo:not([data-id^="record-"]):not([data-id^="pending-"]) {
  animation: cardin 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.mm-language-head {
  margin-bottom: var(--ds-sys-space-md);
}
.mm-language-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ds-color-on-surface);
}
.mm-language-template {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}
.mm-language-subtitle,
.mm-language-hint {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.5;
}
.mm-language-subtitle {
  margin-top: 4px;
}
.mm-language-hint {
  margin-top: var(--ds-sys-space-md);
}
.mm-language-mode-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sys-space-sm);
  margin-bottom: var(--ds-sys-space-md);
}
.mm-language-mode {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.mm-language-mode.is-active {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}
.mm-language-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ds-sys-space-sm);
}
.mm-language-option {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  padding: 8px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.mm-language-option input {
  margin: 0;
  accent-color: var(--ds-color-on-surface);
}
.mm-language-error {
  margin-top: var(--ds-sys-space-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-color-error, );
}
.mm-language-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-sys-space-sm);
  margin-top: var(--ds-sys-space-lg);
}
.mm-language-secondary {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  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-sys-space-sm);
}
.mm-delete-confirm .ant-modal-confirm-btns .ant-btn {
  height: 36px;
  padding: 0 18px;
  border-radius: var(--ds-corner-small);
  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-color-surface) !important;
  border-color: var(--ds-color-on-surface-variant) !important;
  color: var(--ds-color-on-surface) !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-color-surface-container) !important;
  border-color: var(--ds-color-on-surface-variant) !important;
  color: var(--ds-color-on-surface) !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-color-error) !important;
  border-color: var(--ds-color-error) !important;
  color: var(--ds-color-on-primary) !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-color-on-primary) !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: min(760px, calc(100vw - 32px));
  max-width: 100%;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  box-shadow: var(--ds-elevation-4);
  overflow: hidden;
}
.mm-workspace-node-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}
.mm-workspace-node-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}
.mm-workspace-node-close {
  width: 28px;
  height: 28px;
  border-radius: var(--ds-corner-small);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  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-color-on-surface-variant);
  background: var(--ds-color-surface-container);
}
.mm-workspace-node-body {
  padding: var(--ds-sys-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-md);
}

/* =============================================================
   爆款模仿 — 入口 + 工作区卡样式
   视觉权威: docs/design/2026-06-02-hot-imitation-tier1-final.html
   Tokens: var(--ds-*) only — NO azure / NO raw hex (except gradient
   on .hi-ref-cover which has no ds-* equivalent for the stone swatch)
   §12 console no-azure: ink-on-ink primary, ink stepper, ink spinner
   ============================================================= */

/* ── 入口区块（RootTemplateNode 底部，分隔线 + 标题 + 输入行） ── */

.hi-entry {
  margin-top: var(--ds-sys-space-xl);
  padding-top: var(--ds-sys-space-xl);
  border-top: 1px solid var(--ds-color-outline-variant);
}

.hi-entry-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

.hi-entry-sub {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  margin-top: 3px;
  line-height: 1.5;
}

.hi-entry-row {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  margin-top: var(--ds-sys-space-md);
}

.hi-entry-input {
  flex: 1;
  height: 40px;
  padding: 0 14px;
  font-size: 13px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  outline: none;
  transition: border-color 0.15s;
}
.hi-entry-input:focus {
  border-color: var(--ds-color-on-surface);
}
.hi-entry-input::placeholder {
  color: var(--ds-color-on-surface-variant);
}

/* 开始复刻 — ink-on-ink（§12.2 主 CTA） */
.hi-entry-go {
  height: 40px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  border: none;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  cursor: pointer;
  transition: opacity 0.15s;
}
.hi-entry-go:hover {
  opacity: 0.88;
}
.hi-entry-go:disabled {
  background: var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ── 工作区内容容器 ── */
/* 卡壳（760px / border / radius / shadow）由外层 .mm-workspace-node 提供；
   此处只做内容纵向布局，避免卡中卡双边框。 */
.hi-ws {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-md);
}

/* ── 步骤条 ── */

.hi-steps {
  display: flex;
  align-items: center;
  padding: 0 18px 14px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.hi-step {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

/* 当前步骤 */
.hi-step--cur {
  color: var(--ds-color-on-surface);
  font-weight: 700;
}
.hi-step--cur .hi-step-dot {
  border-color: var(--ds-color-on-surface);
  border-width: 2px;
  color: var(--ds-color-on-surface);
}

/* 已完成步骤 */
.hi-step--done {
  color: var(--ds-color-on-surface-variant);
}
.hi-step--done .hi-step-dot {
  background: var(--ds-color-on-surface);
  border-color: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

/* 步骤圆点：默认（待完成） */
.hi-step-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ds-color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-family: var(--ds-typeface-code);
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
  flex-shrink: 0;
}

/* 步骤连线 */
.hi-step-line {
  flex: 1;
  height: 1px;
  background: var(--ds-color-outline-variant);
  margin: 0 12px;
}

/* ── 解析中状态（状态一）── */

.hi-parse {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding: 30px 0 22px;
}

/* Spinner: --ds-border-strong ring + --ds-text arc（无 azure） */
.hi-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--ds-color-outline-variant);
  border-top-color: var(--ds-color-on-surface);
  border-radius: 50%;
  animation: hi-spin 0.9s linear infinite;
  flex-shrink: 0;
}

@keyframes hi-spin {
  to { transform: rotate(360deg); }
}

.hi-parse-txt {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

.hi-parse-sub {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

/* ── 状态二 shot-grid（复刻对象整片 + 逐分镜三栏对照）── */

/* 复刻对象 · 原片整片卡 */
.hi-ref {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
  margin-bottom: 18px;
}

/* 封面占位：stone 渐变，权威 HTML 无对应 --ds-* token，用原始值 */
.hi-ref-cover {
  position: relative;
  width: 54px;
  height: 96px;
  border-radius: 7px;
  background: linear-gradient(135deg, #3f3f46, #71717a);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-color-on-surface);
  font-size: 18px;
  cursor: pointer;
  overflow: hidden;
}
.hi-ref-cover video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hi-ref-meta {
  flex: 1;
  min-width: 0;
}

.hi-ref-k {
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
  letter-spacing: 0.04em;
}

.hi-ref-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
  margin-top: 2px;
}

.hi-ref-sub {
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  margin-top: 4px;
}

.hi-ref-watch {
  font-size: 11.5px;
  color: var(--ds-color-on-surface);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 7px 13px;
  cursor: pointer;
}

/* 逐分镜表头 + 行（四列 72px 1fr 1fr 196px） */
.hi-grid-head {
  display: grid;
  grid-template-columns: 72px 1fr 1fr 196px;
  gap: 14px;
  padding: 0 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-color-on-surface-variant);
  letter-spacing: 0.02em;
}

.hi-row {
  display: grid;
  grid-template-columns: 72px 1fr 1fr 196px;
  gap: 14px;
  align-items: start;
  padding: 14px 2px;
  border-top: 1px solid var(--ds-color-outline-variant);
}
.hi-row:first-of-type {
  border-top: 1px solid var(--ds-color-outline-variant);
}

.hi-shot-no {
  padding-top: 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hi-sn-num {
  font-family: var(--ds-typeface-code);
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.hi-sn-tc {
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
  line-height: 1.3;
}

.hi-orig {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 9px 11px;
  min-height: 62px;
}

.hi-rewrite-in {
  width: 100%;
  min-height: 62px;
  resize: none;
  padding: 9px 11px;
  font-size: 12.5px;
  line-height: 1.55;
  font-family: var(--ds-typeface-plain);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  outline: none;
}
.hi-rewrite-in:focus {
  border-color: var(--ds-color-on-surface);
}

/* 匹配素材列 */
.hi-mat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

/* 素材竖版缩略图占位：stone 渐变，权威 HTML 无对应 --ds-* token，用原始值 */
.hi-mat-clip {
  position: relative;
  width: 62px;
  height: 110px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #52525b, #a1a1aa);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-color-on-surface);
  font-size: 18px;
  cursor: pointer;
}
.hi-mat-clip img,
.hi-mat-clip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hi-mat-clip--empty {
  background: var(--ds-color-surface-container);
  border: 1px dashed var(--ds-color-outline-variant);
  color: var(--ds-color-warning);
  font-size: 22px;
  cursor: default;
}

.hi-mat-name {
  font-size: 11px;
  color: var(--ds-color-on-surface);
  line-height: 1.4;
}

.hi-mat-miss {
  font-size: 11px;
  color: var(--ds-color-warning);
}

.hi-mat-swap {
  display: inline-block;
  font-size: 10.5px;
  color: var(--ds-color-on-surface-variant);
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: 7px;
  padding: 4px 12px;
  cursor: pointer;
}

/* ── 底部操作栏 ── */
.hi-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--ds-color-outline-variant);
}

.hi-foot-hint {
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
}

.hi-foot-btns {
  display: flex;
  gap: 10px;
}

.hi-btn-sec {
  height: 38px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  cursor: pointer;
  transition: opacity 0.15s;
}
.hi-btn-sec:hover {
  opacity: 0.88;
}
.hi-btn-sec:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 主 CTA — ink-on-ink（§12.2，与 .mm-cta-ink 同语义，native button 版本） */
.hi-btn-ink {
  height: 38px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.hi-btn-ink:hover {
  opacity: 0.88;
}
.hi-btn-ink:disabled {
  background: var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===== 卡片接入契约：量完入场 + 重排平滑（spec §4.3） ===== */

/* 未测量节点不可见（占位预排帧）。用 opacity 而非 display/visibility：
   保持布局尺寸可被 withMeasure/ReactFlow 正常测量。 */
.mm-measure {
  opacity: 0;
}

/* 量完入场：淡入 + 轻缩放，一次性动画（re-render 不重播，类名常驻） */
.mm-measure--ready {
  animation: mm-node-enter 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes mm-node-enter {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* 重排平滑：V2 求解器改位时节点滑动到新位置，不瞬移。
   dragging 时禁过渡（Plan C 启用拖拽后避免拖拽跟手延迟）。 */
.mm-canvas .react-flow__node {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.mm-canvas .react-flow__node.dragging,
.mm-canvas--no-anim .react-flow__node {
  transition: none;
}

/* 卡片入场动画 */
@keyframes mm-card-enter {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.mm-canvas .react-flow__node[data-enter="true"] {
  animation: mm-card-enter 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  /* 退场后清除 data-enter，让后续位置平滑过渡生效 */
}
/* 退场：scale down + fade */
@keyframes mm-card-exit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.88); }
}
.mm-canvas .react-flow__node[data-exit="true"] {
  animation: mm-card-exit 0.28s ease forwards;
  pointer-events: none;
}

/* ===== 工作流地图模块卡（P1）===== */
.map-module {
  position: relative;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-extra-large);
  padding: 16px 18px;
  width: 300px;
  cursor: pointer;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s;
}

.map-module--open {
  width: 580px;
  cursor: default;
  border-color: var(--ds-color-on-surface-variant);
  box-shadow: var(--ds-elevation-4);
}

/* placement cockpit 展开走 960px（hifi 设计宽），参照 .mm-root--open 先例；
   ModuleChrome 已在同一元素透传 data-module，用同元素属性选择器覆写，
   不改全局 .map-module--open(580px)，只对 placement 模块卡生效 */
.map-module--open[data-module="placement"] {
  width: 960px;
}

.map-module--embedded-detail {
  width: max-content;
  padding: 10px;
  border-color: var(--ds-color-on-surface-variant);
  box-shadow: var(--ds-elevation-4);
  cursor: default;
}

.map-module-detail {
  animation: mapDetailIn 0.4s 0.15s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.map-module-detail--embedded {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.map-module--embedded-detail .map-detail-preactions {
  margin: 0;
  justify-content: flex-end;
}

.map-module--embedded-detail article {
  border: 0;
  box-shadow: none;
  border-radius: 12px;
}

.map-module--embedded-detail .map-module-collapse {
  top: -13px;
  right: -11px;
  z-index: 2;
  background: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface-variant);
  box-shadow: 0 10px 20px -16px rgba(24, 24, 27, 0.55);
}

@keyframes mapDetailIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.map-module--dim {
  background: var(--ds-color-surface-container);
  border-style: dashed;
}

.map-module-no {
  font-family: var(--ds-typeface-code);
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
  letter-spacing: 0.12em;
}

.map-module-name {
  font-size: 22px;
  font-weight: 700;
  margin: 6px 0 4px;
}

.map-module-desc {
  font-size: 15px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.55;
}

.map-module-stat {
  font-family: var(--ds-typeface-code);
  font-size: 15px;
  color: var(--ds-color-on-surface-variant);
  margin-top: 12px;
}

.map-module-stat b {
  color: var(--ds-color-on-surface);
  font-weight: 600;
}

.map-module-pills {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.map-pill {
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  padding: 6px 16px;
  background: var(--ds-color-surface);
}

.map-pill--ink {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface);
}

.map-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: 1px;
}

.map-status-dot--success {
  background: var(--ds-color-secondary);
}

.map-status-dot--warning {
  background: var(--ds-color-warning);
}

.map-module-collapse {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  padding: 3px 11px;
  background: var(--ds-color-surface);
  cursor: pointer;
}

.map-module--open .map-module-no {
  font-size: 9.5px;
}

.map-module--open .map-module-name {
  font-size: 15px;
}

/* ===== 创作岛首页大卡（bookmark-home Task 3：三列平权 + 发丝线网格 + 列头横带）===== */
.mm-root--compact {
  width: 740px;
  position: relative;
}
.mm-root--open {
  position: relative;
  width: 960px;
}
.mm-root--compact .mm-root-title {
  font-size: 22px;
  font-weight: 800;
  margin-top: 6px;
}
.mm-root--compact .mm-root-sub {
  font-size: 13px;
  margin: 4px 0 14px;
}
.mm-bigcols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.mm-bigcol {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px;
  background: var(--ds-color-surface-container);
  border: 1px solid transparent;
  border-radius: var(--ds-corner-large);
}
.mm-bigcol-head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
  text-align: left;
  cursor: pointer;
}
.mm-bigcol-head--static {
  cursor: default;
}
.mm-bigcol-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}
.mm-bigcol-chip svg {
  width: 16px;
  height: 16px;
}
.mm-bigcol-status {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
}
.mm-bigcol-num {
  font-family: var(--ds-typeface-code);
  color: var(--ds-color-on-surface-variant);
}
.mm-bigcol-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 12px;
}
.mm-tplrow {
  display: block;
  padding: 10px;
  border: none;
  border-radius: var(--ds-corner-small);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.mm-tplrow:hover {
  background: var(--ds-color-surface);
}
.mm-tplrow-t {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
}
.mm-tplrow-d {
  display: block;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-bigcol-more {
  margin-top: 1px;
  padding: 9px 10px;
  border: none;
  border-radius: var(--ds-corner-small);
  background: none;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  text-align: left;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.mm-bigcol-more:hover {
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
}
.mm-bigcol-more .mm-bigcol-num {
  font-weight: 600;
}
.mm-bigcol-desc {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.55;
  margin-bottom: 12px;
}
.mm-paste {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 11px 12px;
  min-height: 42px;
  font-size: 12px;
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
  margin-bottom: 8px;
}
.mm-paste::placeholder {
  color: var(--ds-color-on-surface-variant);
}
.mm-paste-go {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.15s;
}
.mm-paste-go:hover {
  opacity: 0.88;
}
.mm-paste-go:disabled {
  opacity: 0.4;
  cursor: default;
}
.mm-root-foot--compact {
  margin-top: 14px;
  justify-content: space-between;
  align-items: center;
}
.mcc-hint {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

.map-sec-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-color-on-surface-variant);
  letter-spacing: 0.04em;
  margin: 12px 0 6px;
}

.map-thumb-row {
  display: flex;
  gap: 6px;
}

.map-thumb {
  width: 44px;
  height: 58px;
  border-radius: var(--ds-corner-small);
  border: 1px solid var(--ds-color-outline-variant);
  background: linear-gradient(135deg, var(--ds-color-surface-container), var(--ds-color-surface-container-high)) center/cover;
}

.map-thumb--more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ds-typeface-code);
  font-size: 9px;
  color: var(--ds-color-on-surface-variant);
}

.map-doc-row {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  padding: 7px 0;
  border-top: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
}

.map-doc-ext {
  font-family: var(--ds-typeface-code);
  font-size: 8.5px;
  font-weight: 700;
  border-radius: 5px;
  padding: 2px 5px;
  color: var(--ds-color-on-surface);
  background: var(--ds-color-outline-variant);
}

.map-doc-ext--pdf {
  background: var(--ds-color-error);
}

.map-doc-ext--doc {
  background: var(--ds-color-on-primary-container);
}

.map-doc-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-doc-size {
  font-family: var(--ds-typeface-code);
  font-size: 9px;
  color: var(--ds-color-on-surface-variant);
}

.map-btn-row {
  display: flex;
  gap: 7px;
  margin-top: 12px;
}

.map-detail-preactions {
  margin-bottom: 12px;
}

.map-btn {
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  padding: 6px 14px;
  background: var(--ds-color-surface);
  cursor: pointer;
}

.map-btn--ink {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface);
}

.map-soon {
  font-family: var(--ds-typeface-code);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--ds-color-on-surface-variant);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  padding: 1px 7px;
  background: var(--ds-color-surface);
}

.map-pill--dashed,
.map-btn--dashed {
  border-style: dashed;
  color: var(--ds-color-on-surface-variant);
}

.map-glob-opt {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  padding: 12px 13px;
  margin-top: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ds-color-surface);
}

.map-glob-opt--off {
  background: var(--ds-color-surface-container);
}

.map-glob-ic {
  font-size: 15px;
}

.map-glob-body {
  flex: 1;
}

.map-glob-t {
  font-size: 12px;
  font-weight: 700;
  display: flex;
  gap: 7px;
  align-items: center;
}

.map-glob-d {
  font-size: 10.5px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.55;
  margin-top: 3px;
}

/* ===== multilingual professional workflow components ===== */
.mm-creation-mode {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(128px, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
}

.mm-mode-option,
.mm-script-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 6px 10px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.mm-mode-option--active,
.mm-script-btn--primary {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

.mm-script-btn--danger {
  border-color: color-mix(in srgb, #b42318 46%, var(--ds-color-on-surface-variant));
  color: #b42318;
}

.mm-mode-option:disabled,
.mm-script-btn:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.mm-script-node,
.mm-lang-lane,
.mm-version-drawer,
.mm-clip-draft {
  width: min(680px, 100%);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  padding: var(--ds-sys-space-lg);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  box-shadow: var(--ds-elevation-1);
}

.mm-script-head,
.mm-lang-lane-head,
.mm-version-head,
.mm-clip-draft-head,
.mm-clip-draft-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sys-space-md);
}

.mm-script-kicker,
.mm-lang-lane-kicker,
.mm-script-updated,
.mm-clip-draft-state,
.mm-version-entry-main span {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 700;
}

.mm-script-title,
.mm-lang-lane-title,
.mm-clip-draft-title,
.mm-version-head h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}

.mm-script-reason {
  margin: 12px 0 0;
  border: 1px solid color-mix(in srgb, #b42318 24%, var(--ds-color-outline-variant));
  border-radius: var(--ds-corner-small);
  padding: 8px 10px;
  background: color-mix(in srgb, #fff1f0 70%, var(--ds-color-surface));
  color: #7a271a;
  font-size: 12px;
  line-height: 1.5;
}

.mm-script-grid,
.mm-script-diff-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ds-sys-space-md);
  margin-top: var(--ds-sys-space-md);
}

.mm-script-field {
  display: grid;
  gap: 6px;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 700;
}

.mm-script-field textarea {
  min-height: 158px;
  resize: vertical;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 10px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  line-height: 1.65;
}

.mm-script-field--readonly textarea {
  background: var(--ds-color-surface-container);
}

.mm-script-field--instruction {
  margin-top: var(--ds-sys-space-md);
}

.mm-script-field--instruction textarea {
  min-height: 58px;
}

.mm-script-actions,
.mm-script-primary-actions,
.mm-script-secondary-actions,
.mm-lang-lane-actions,
.mm-script-diff-actions,
.mm-clip-segment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mm-script-actions,
.mm-script-failure-actions,
.mm-lang-lane-actions,
.mm-script-diff-actions {
  margin-top: var(--ds-sys-space-md);
}

.mm-script-diff {
  margin-top: var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: var(--ds-sys-space-md);
  background: var(--ds-color-surface-container);
}

.mm-script-diff-label {
  margin-bottom: 6px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 800;
}

.mm-script-diff-segment,
.mm-script-suggestion-row {
  width: 100%;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 9px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
}

.mm-script-diff-segment--active {
  border-color: var(--ds-color-on-surface);
}

.mm-script-suggestion-row p,
.mm-script-source-ref p,
.mm-clip-segment-main p {
  margin: 0;
  line-height: 1.55;
}

.mm-script-source-ref {
  margin-top: var(--ds-sys-space-md);
  border-left: 3px solid var(--ds-color-outline-variant);
  padding-left: 10px;
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

.mm-lang-lane-state,
.mm-lang-lane-badges span,
.mm-lang-lane-single {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
  padding: 4px 8px;
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 800;
}

.mm-lang-lane-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sys-space-md);
  margin: var(--ds-sys-space-md) 0 0;
}

.mm-lang-lane-meta div {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 9px;
  background: var(--ds-color-surface-container);
}

.mm-lang-lane-meta dt {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 800;
}

.mm-lang-lane-meta dd {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 800;
}

.mm-lang-lane-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: var(--ds-sys-space-md);
}

.mm-version-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.mm-version-list,
.mm-clip-segments {
  display: grid;
  gap: 9px;
  margin: var(--ds-sys-space-md) 0 0;
  padding: 0;
}

.mm-version-entry,
.mm-clip-segment {
  display: grid;
  gap: 8px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 10px;
  background: var(--ds-color-surface-container);
}

.mm-version-entry-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.mm-version-entry-main h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}

.mm-version-current {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mm-clip-segment {
  grid-template-columns: minmax(0, 1fr) auto;
  list-style: none;
}

.mm-clip-segment-index,
.mm-clip-segment-duration {
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 800;
}

.mm-clip-segment-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mm-clip-segment-main strong {
  font-size: 13px;
}

.mm-clip-segment-actions {
  grid-column: 1 / -1;
}

.mm-clip-trim-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ds-color-on-surface-variant);
  font-size: 11px;
  font-weight: 800;
}

.mm-clip-trim-label input {
  width: 72px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 6px 7px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

.mm-clip-draft-footer {
  align-items: center;
  margin-top: var(--ds-sys-space-md);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 800;
}
/* PPT 转视频工作区 — 遵守 console no-azure 规则（design.md §12）
   所有颜色用 --ds-* tokens；CTA 用 .mm-cta-ink（黑底白字）；
   azure 仅允许用于缩略图轨道当前页竖条标识（≤4px 宽度）。 */

.mm-ppt-ws {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  min-height: 320px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain, inherit);
}

/* ── mm-cta-ink scoped to this workspace (mirrors .mm-hotspot-ws pattern) ──
   覆盖上传根(.mm-ppt-ws)与编辑器根(.mm-ppt-editor)两个阶段，
   否则编辑器「一键合成」会回落到 Ant 默认 azure 主色（违反 console no-azure / spec §50 ink-on-ink）。 */
.mm-ppt-ws .mm-cta-ink.ant-btn,
.mm-ppt-ws .mm-cta-ink.ant-btn-primary,
.mm-ppt-ws .mm-cta-ink.ant-btn-default,
.mm-ppt-ws .mm-cta-ink.ant-btn:focus,
.mm-ppt-ws .mm-cta-ink.ant-btn:hover,
.mm-ppt-ws .mm-cta-ink.ant-btn-primary:focus,
.mm-ppt-ws .mm-cta-ink.ant-btn-primary:hover,
.mm-ppt-editor .mm-cta-ink.ant-btn,
.mm-ppt-editor .mm-cta-ink.ant-btn-primary,
.mm-ppt-editor .mm-cta-ink.ant-btn-default,
.mm-ppt-editor .mm-cta-ink.ant-btn:focus,
.mm-ppt-editor .mm-cta-ink.ant-btn:hover,
.mm-ppt-editor .mm-cta-ink.ant-btn-primary:focus,
.mm-ppt-editor .mm-cta-ink.ant-btn-primary:hover {
  background: var(--ds-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-on-surface) !important;
  box-shadow: none !important;
}

/* ── 上传阶段 ── */
.mm-ppt-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.mm-ppt-dropzone {
  width: 100%;
  min-height: 140px;
  border: 1.5px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  background: var(--ds-color-surface-container);
  transition: border-color 0.15s;
}

.mm-ppt-dropzone:hover,
.mm-ppt-dropzone--drag-over {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
}

.mm-ppt-dropzone-icon {
  font-size: 28px;
  color: var(--ds-color-on-surface-variant);
}

.mm-ppt-dropzone-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ds-color-on-surface);
}

.mm-ppt-dropzone-hint {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.mm-ppt-ratio {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mm-ppt-ratio-label {
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
}

.mm-ppt-ratio-option {
  padding: 4px 12px;
  border-radius: var(--ds-corner-small);
  border: 1px solid var(--ds-color-outline-variant);
  font-size: 13px;
  cursor: pointer;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  transition: background 0.12s, border-color 0.12s;
}

.mm-ppt-ratio-option--selected {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface);
}

.mm-ppt-file-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mm-ppt-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--ds-corner-small);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  font-size: 13px;
}

.mm-ppt-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ds-color-on-surface);
}

.mm-ppt-file-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--ds-color-on-surface-variant);
  padding: 0;
  line-height: 1;
}

/* ── 进度/处理阶段 ── */
.mm-ppt-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 0;
}

.mm-ppt-progress-label {
  font-size: 14px;
  color: var(--ds-color-on-surface-variant);
}

.mm-ppt-progress-bar {
  width: 100%;
  height: 4px;
  background: var(--ds-color-outline-variant);
  border-radius: 2px;
  overflow: hidden;
}

.mm-ppt-progress-fill {
  height: 100%;
  background: var(--ds-color-on-surface);
  transition: width 0.3s ease;
}

/* ── 底部 action ── */
.mm-ppt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── 编辑器阶段（方案 B：左轨道 + 右大图） ── */
.mm-ppt-editor {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  min-height: 400px;
  /* 卡片高度由右侧（预览+脚本）决定并封顶；页数多时左缩略图轨道内部滚动，
     不再把整张卡撑高（缩略图轨道 .mm-ppt-thumb-rail 已 overflow-y:auto，
     此前因 editor 无高度上限、overflow 机制失效）。 */
  max-height: min(80vh, 460px);
}

.mm-ppt-editor-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}

.mm-ppt-editor-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--ds-color-on-surface);
}

.mm-ppt-editor-meta {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.mm-ppt-editor-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* 左侧缩略图轨道 */
.mm-ppt-thumb-rail {
  width: 88px;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 6px;
}

.mm-ppt-thumb-item {
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  border: 1.5px solid transparent;
  transition: border-color 0.12s;
  /* 缩略图保持原始尺寸；页数多时轨道（已 overflow-y:auto）内部滚动，
     而不是被 flex 列默认 flex-shrink:1 压扁成细条。 */
  flex-shrink: 0;
}

.mm-ppt-thumb-item--active {
  border-color: var(--ds-color-on-surface);
}

/* azure 仅限当前页竖条标识（≤4px，设计系统允许的最小元素） */
.mm-ppt-thumb-item--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ds-color-primary, );
  z-index: 1;
}

.mm-ppt-thumb-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--ds-color-outline-variant);
}

.mm-ppt-thumb-no {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
  background: rgba(255,255,255,0.8);
  border-radius: 2px;
  padding: 0 3px;
}

.mm-ppt-thumb-del {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 3px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  font-size: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--ds-color-on-surface-variant);
}

.mm-ppt-thumb-item:hover .mm-ppt-thumb-del {
  display: flex;
}

/* 右侧编辑区 */
.mm-ppt-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.mm-ppt-preview {
  width: 100%;
  max-height: 220px;
  overflow: hidden;
  background: var(--ds-color-surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mm-ppt-preview-img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
}

.mm-ppt-preview-placeholder {
  width: 100%;
  height: 160px;
  background: var(--ds-color-outline-variant);
  border-radius: 4px;
}

.mm-ppt-script-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--ds-color-outline-variant);
  overflow-y: auto;
}

.mm-ppt-script-label {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.mm-ppt-script-textarea {
  width: 100%;
  min-height: 80px;
  padding: 8px 10px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-family: inherit;
  transition: border-color 0.12s;
}

.mm-ppt-script-textarea:focus {
  outline: none;
  border-color: var(--ds-color-on-surface-variant);
}

.mm-ppt-page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mm-ppt-audio-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--ds-corner-small);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

.mm-ppt-editor-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
}
/*
 * 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_bmeqj_11 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-sys-space-md);
}

._platTile_bmeqj_11 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  padding: var(--ds-sys-space-lg) var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

._platTile_bmeqj_11:hover:not(:disabled) {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
  transform: translateY(-1px);
}

._platTileEmoji_bmeqj_37 {
  width: 44px;
  height: 44px;
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

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

._platTileCta_bmeqj_55 {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
}

._platTile_bmeqj_11:hover:not(:disabled) ._platTileCta_bmeqj_55 {
  color: var(--ds-color-on-surface);
}

._platTilePending_bmeqj_65 {
  cursor: not-allowed;
  background: var(--ds-color-surface-container);
}

._platTilePending_bmeqj_65 ._platTileEmoji_bmeqj_37 {
  filter: grayscale(1);
  opacity: 0.6;
}

._platTilePending_bmeqj_65 ._platTileName_bmeqj_48,
._platTilePending_bmeqj_65 ._platTileCta_bmeqj_55 {
  color: var(--ds-color-on-surface-variant);
}

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

._cardExpanded_bmeqj_83 {
  border-color: var(--ds-color-on-surface-variant);
  box-shadow: var(--ds-elevation-4);
  width: 540px;
}

._cardHead_bmeqj_101 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  padding: var(--ds-sys-space-md) var(--ds-sys-space-lg);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

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

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

._cardTypeTag_bmeqj_123 {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  padding: 2px var(--ds-sys-space-sm);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-full);
}

._expandCollapseBtn_bmeqj_134 {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-xs);
  height: 28px;
  padding: 0 var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
}

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

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

._exBlock_bmeqj_158::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 3px;
  height: 14px;
  background: var(--ds-color-on-surface);
  border-radius: var(--ds-corner-full);
}

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

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

._labelLink_bmeqj_193:hover {
  color: var(--ds-color-on-surface);
}

/* ============ empty-block 引导块（Task 1.2） ============ */
._emptyBlock_bmeqj_213 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-sm);
  padding: var(--ds-sys-space-md);
  background: var(--ds-color-surface-container);
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
}

._emptyTitle_bmeqj_223 {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

._emptyDesc_bmeqj_229 {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.6;
}

/* ============ card-actions 底部按钮行（Task 1.2，expanded 卡含 top border） ============ */
._cardActions_bmeqj_236 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sys-space-sm);
  padding: var(--ds-sys-space-md) var(--ds-sys-space-xl);
  border-top: 1px solid var(--ds-color-outline-variant);
}

._cardAction_bmeqj_236 {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  padding: var(--ds-sys-space-xs) var(--ds-sys-space-sm);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

._cardAction_bmeqj_236:hover {
  border-color: var(--ds-color-on-surface-variant);
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
}

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

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

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

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

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

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

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

._summaryLabel_bmeqj_312 {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

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

._platformChip_bmeqj_324 {
  width: 28px;
  height: 28px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container-high);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--ds-color-on-surface);
  position: relative;
}

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

._chipDot_bmeqj_342 {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border-radius: var(--ds-corner-full);
  border: 1.5px solid var(--ds-color-surface);
}

._chipDotOk_bmeqj_352 { background: var(--ds-color-secondary); }
._chipDotWarn_bmeqj_353 { background: var(--ds-color-warning); }

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

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

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

._activityDotOk_bmeqj_379   { background: var(--ds-color-secondary); }
._activityDotInfo_bmeqj_380 { background: var(--ds-color-on-surface); }
._activityDotWarn_bmeqj_381 { background: var(--ds-color-warning); }

._activityText_bmeqj_383 {
  flex: 1;
  min-width: 0;
  color: var(--ds-color-on-surface);
}

._activityText_bmeqj_383 strong { font-weight: 700; }

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

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

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

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

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

._statLabel_bmeqj_422 {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

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

._tabItem_bmeqj_436 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-md);
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  font: inherit;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
  transition: color 0.15s;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

._tabItem_bmeqj_436:hover {
  color: var(--ds-color-on-surface);
}

._tabItemSelected_bmeqj_458 {
  color: var(--ds-color-on-surface);
  font-weight: 700;
}

._tabItemSelected_bmeqj_458::after {
  content: '';
  position: absolute;
  left: var(--ds-sys-space-sm);
  right: var(--ds-sys-space-sm);
  bottom: -1px;
  height: 2px;
  background: var(--ds-color-on-surface);
  border-radius: var(--ds-corner-full);
}

._tabIcon_bmeqj_474 {
  width: 22px;
  height: 22px;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container-high);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

._tabName_bmeqj_486 {
  font-size: 13px;
}

._tabCount_bmeqj_490 {
  font-size: 10px;
  font-weight: 700;
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  padding: 0 6px;
  border-radius: var(--ds-corner-full);
  font-variant-numeric: tabular-nums;
}

._tabItemSelected_bmeqj_458 ._tabCount_bmeqj_490 {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

._tabPanelHead_bmeqj_505 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  margin-bottom: var(--ds-sys-space-md);
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

._tabPanelHead_bmeqj_505 ._platDetailName_bmeqj_514 {
  font-size: 13px;
  color: var(--ds-color-on-surface);
}

/* 左：mini 平台列表 */
._miniPlatformList_bmeqj_520 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  overflow: hidden;
}

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

._miniPlatRow_bmeqj_530 + ._miniPlatRow_bmeqj_530 { border-top: 1px solid var(--ds-color-outline-variant); }

._miniPlatRow_bmeqj_530:hover { background: var(--ds-color-surface-container); }

._miniPlatRowSelected_bmeqj_550 {
  background: var(--ds-color-surface-container);
  font-weight: 700;
}

._miniPlatRowSelected_bmeqj_550::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 var(--ds-corner-full) var(--ds-corner-full) 0;
  background: var(--ds-color-on-surface);
}

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

._miniPlatIcon_bmeqj_580 {
  width: 22px;
  height: 22px;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container-high);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

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

._miniPlatCount_bmeqj_603 {
  font-size: 10px;
  font-weight: 700;
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

._miniPlatDot_bmeqj_610 {
  width: 6px;
  height: 6px;
  border-radius: var(--ds-corner-full);
  flex-shrink: 0;
}

._miniPlatDotOk_bmeqj_617      { background: var(--ds-color-secondary); }
._miniPlatDotWarn_bmeqj_618    { background: var(--ds-color-warning); }
._miniPlatDotPending_bmeqj_619 { background: var(--ds-color-outline-variant); }

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

._platDetailHead_bmeqj_629 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  margin-bottom: var(--ds-sys-space-md);
  padding-bottom: var(--ds-sys-space-sm);
  border-bottom: 1px dashed var(--ds-color-outline-variant);
}

._platDetailIcon_bmeqj_638 {
  width: 22px;
  height: 22px;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container-high);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

._platDetailName_bmeqj_514 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

._platDetailSub_bmeqj_656 {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}

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

._acctMiniRow_bmeqj_668 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
}

._acctAvatar_bmeqj_678 {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container-high);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

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

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

._acctSub_bmeqj_705 {
  font-size: 10px;
  color: var(--ds-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

._acctRowAdd_bmeqj_711 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sys-space-xs);
  padding: var(--ds-sys-space-sm);
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  width: 100%;
}

._acctRowAdd_bmeqj_711:hover {
  border-color: var(--ds-color-on-surface);
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container);
}

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

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

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

._eventMiniDot_bmeqj_756 {
  width: 6px;
  height: 6px;
  border-radius: var(--ds-corner-full);
  flex-shrink: 0;
}

._eventMiniDotOk_bmeqj_763   { background: var(--ds-color-secondary); }
._eventMiniDotWarn_bmeqj_764 { background: var(--ds-color-warning); }
._eventMiniDotInfo_bmeqj_765 { background: var(--ds-color-on-surface); }

._eventMiniText_bmeqj_767 {
  flex: 1;
  color: var(--ds-color-on-surface);
}

._eventMiniText_bmeqj_767 strong { font-weight: 700; }

/* ---- 账号行状态标签 .acct-status（替代原 cookie 进度条+天数，根因2 修复） ---- */
._acctStatus_bmeqj_775 {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-xs);
  flex-shrink: 0;
}

._acctStatusDot_bmeqj_782 {
  width: 6px;
  height: 6px;
  border-radius: var(--ds-corner-full);
  flex-shrink: 0;
}

._acctStatusDotOk_bmeqj_789   { background: var(--ds-color-secondary); }
._acctStatusDotWarn_bmeqj_790 { background: var(--ds-color-warning); }
._acctStatusDotCool_bmeqj_791 { background: var(--ds-color-outline-variant); }

._acctStatusText_bmeqj_793 {
  font-size: 10px;
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
}

/* ===== 账号行内嵌托管（v2 预览稿 host-config 段 1:1，docs/design/2026-06-10-auto-hosting-migration-v2.html） ===== */
._hostingRowTail_bmeqj_801 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

._hostingBtn_bmeqj_808 {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: var(--ds-corner-small);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  cursor: pointer;
  white-space: nowrap;
}

._hostingBtnPrimary_bmeqj_820 {
  background: var(--ds-color-on-surface);
  border-color: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

._hostingBtnDanger_bmeqj_826 {
  color: var(--ds-color-error);
  border-color: rgba(239, 68, 68, 0.35);
}

._hostingBtn_bmeqj_808:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

._hostingBadge_bmeqj_836 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 11px;
  white-space: nowrap;
  border-radius: var(--ds-corner-full);
  border: 1px solid var(--ds-color-on-surface);
  color: var(--ds-color-on-surface);
}

._hostingBadgeDot_bmeqj_849 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-color-secondary);
}

._hostingBadgeDot_bmeqj_849[data-warn='true'] {
  background: var(--ds-color-warning);
}

._hostingStat_bmeqj_860 {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

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

._hostingConfig_bmeqj_872 {
  background: var(--ds-color-surface-container);
  border-top: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 14px 18px;
  margin: 4px 0 8px;
}

._hostingConfigLabel_bmeqj_880 {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-color-on-surface-variant);
  font-weight: 700;
  margin-bottom: 8px;
}

._hostingChips_bmeqj_889 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

._hostingChip_bmeqj_889 {
  font-size: 12px;
  padding: 4px 11px;
  border-radius: var(--ds-corner-full);
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
  cursor: pointer;
}

._hostingChipOn_bmeqj_906 {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface);
  font-weight: 600;
}

._hostingChipMono_bmeqj_913 {
  font-family: var(--ds-typeface-code);
  font-variant-numeric: tabular-nums;
}

._hostingConfigFoot_bmeqj_918 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._hostingHoursToggle_bmeqj_924 {
  margin-left: auto;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  background: none;
  border: none;
  cursor: pointer;
  text-align: right;
}
.v2-mock-page {
  min-height: 100vh;
  margin: 0;
  padding: 28px 20px 96px;
  background: #0a0a0a;
  color: #f4f4f5;
  font-family: var(--ds-typeface-plain);
  line-height: 1.5;
}

.v2-mock-page-h h1 {
  font-size: 22px;
  font-weight: 650;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.v2-mock-page-h p {
  color: #a1a1aa;
  font-size: 14px;
  max-width: 720px;
  margin: 0 0 12px;
}

.v2-mock-page-h code {
  color: #b9dcff;
  font-size: 12px;
}

.v2-mock-pills,
.v2-mock-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.v2-mock-nav a {
  color: #b9dcff;
  text-decoration: none;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 999px;
  background: #161616;
}

.v2-mock-pill {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
  background: #161616;
}

.v2-mock-pill.ok {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.35);
}

.v2-mock-pill.shell {
  color: #b9dcff;
  border-color: rgba(77, 166, 255, 0.35);
}

.v2-mock-section {
  margin: 28px 0;
}

.v2-mock-fail-note {
  color: #a1a1aa;
  font-size: 13px;
  margin: -4px 0 12px;
  max-width: 640px;
}

.v2-mock-section h2 {
  font-size: 16px;
  margin: 0 0 12px;
}

.v2-mock-section h2 span {
  font-size: 12px;
  color: #4da6ff;
  font-weight: 500;
  margin-left: 8px;
}

.v2-mock-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.v2-mock-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: #141414;
  overflow: hidden;
}

.v2-mock-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: #71717a;
}

.v2-mock-n {
  color: #e4e4e7;
  font-weight: 600;
}

.v2-mock-card-meta code {
  color: #b9dcff;
  font-size: 11px;
}

.v2-mock-chat {
  padding: 14px 16px 16px;
  background: radial-gradient(800px 240px at 40% 0%, rgba(77, 166, 255, 0.06), transparent 55%), #1a1a1a;
}

/* mounts under shell */
.v2-mock-mount {
  margin: 8px 0 0 16px;
}

.v2-mock-image {
  width: 140px;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(160deg, rgba(77, 166, 255, 0.25), #1a1a1a);
  display: flex;
  align-items: flex-end;
  padding: 8px;
  font-size: 11px;
  color: #a1a1aa;
}

.v2-mock-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.v2-mock-tile {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #a1a1aa;
}

.v2-mock-tile span {
  font-size: 10px;
  color: #71717a;
}

.v2-mock-longdoc,
.v2-mock-upload,
.v2-mock-task {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.v2-mock-longdoc-title,
.v2-mock-upload-title,
.v2-mock-task-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
}

.v2-mock-longdoc-body,
.v2-mock-task-sub,
.v2-mock-upload {
  font-size: 12.5px;
  color: #a1a1aa;
}

.v2-mock-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #242424;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.v2-mock-choice-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
}

.v2-mock-choice-row strong {
  display: block;
  font-size: 13px;
}

.v2-mock-choice-row span {
  font-size: 12px;
  color: #a1a1aa;
}

.v2-mock-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.v2-mock-diff-col {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

.v2-mock-diff-h {
  font-size: 11px;
  color: #71717a;
  margin-bottom: 6px;
}

.v2-mock-diff-b {
  font-size: 12.5px;
  color: #a1a1aa;
}

.v2-mock-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin: 10px 0;
}

.v2-mock-progress > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4da6ff, #7cc4ff);
  border-radius: inherit;
}

.v2-mock-vcard {
  max-width: 360px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #1e1e1e;
  overflow: hidden;
  margin-left: 16px;
}

.v2-mock-vcard-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 0;
  gap: 8px;
}

.v2-mock-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.v2-mock-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
  background: rgba(255, 255, 255, 0.04);
}

.v2-mock-chip.run {
  color: #b9dcff;
  border-color: rgba(77, 166, 255, 0.35);
  background: rgba(77, 166, 255, 0.1);
}

.v2-mock-vcard-title {
  padding: 8px 12px 6px;
  font-size: 14px;
  font-weight: 600;
}

.v2-mock-vcard-body {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  padding: 0 12px 12px;
}

.v2-mock-thumb {
  width: 88px;
  height: 120px;
  border-radius: 10px;
  background: linear-gradient(160deg, #3a3a3a, #1a1a1a);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #71717a;
  font-size: 11px;
}

.v2-mock-state {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.v2-mock-hint {
  font-size: 12px;
  color: #a1a1aa;
  margin-bottom: 10px;
}

.v2-mock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.v2-mock-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #f4f4f5;
  font-size: 12px;
  padding: 6px 11px;
  border-radius: 999px;
  font-family: inherit;
  cursor: default;
}

.v2-mock-btn.primary {
  background: rgba(77, 166, 255, 0.16);
  border-color: rgba(77, 166, 255, 0.35);
  color: #b9dcff;
}

.v2-mock-btn:disabled {
  opacity: 0.45;
}

.v2-mock-c {
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.02);
}

.v2-mock-c-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}

.v2-mock-c-body {
  font-size: 12px;
  color: #71717a;
}
.v2-chat-mock-page {
  box-sizing: border-box;
  height: 100vh;
  overflow-y: auto;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
  padding: 16px 16px 40px;
}

.v2-chat-mock-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: baseline;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
}

.v2-chat-mock-banner strong {
  color: var(--ds-color-secondary);
  font-size: 14px;
}

.v2-chat-mock-count {
  color: var(--ds-color-primary);
}

.v2-chat-mock-shell {
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 16px;
  background: var(--ds-color-surface);
  display: flex;
  flex-direction: column;
  min-height: 70vh;
  overflow: hidden;
}

.v2-chat-mock-messages {
  flex: 1;
  overflow: auto;
  padding: 20px 18px 12px;
}

.v2-chat-mock-empty {
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
  text-align: center;
  padding: 48px 16px;
}

.v2-chat-mock-row {
  display: flex;
  margin-bottom: 18px;
}

.v2-chat-mock-row.user {
  justify-content: flex-end;
}

.v2-chat-mock-row.ai {
  justify-content: flex-start;
  gap: 10px;
  align-items: flex-start;
}

.v2-chat-mock-bubble.user {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--ds-color-surface-container);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ds-color-on-surface);
}

.v2-chat-mock-ai-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ds-color-primary) 15%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

.v2-chat-mock-ai-body {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.v2-chat-mock-ai-text {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ds-color-on-surface-variant);
}

.v2-chat-mock-video-wrap {
  margin-top: 12px;
  max-width: 380px;
}

.v2-chat-mock-composer {
  border-top: 1px solid var(--ds-color-outline-variant);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  background: var(--ds-color-surface);
}

.v2-chat-mock-composer textarea {
  flex: 1;
  resize: none;
  border-radius: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  min-height: 44px;
}

.v2-chat-mock-send {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.v2-chat-mock-c-note {
  max-width: 760px;
  margin: 16px auto 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
}

.v2-chat-mock-c-note h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ds-color-on-surface);
}

.v2-chat-mock-c-note ul {
  margin: 0;
  padding-left: 18px;
  columns: 2;
}

.v2-chat-mock-c-note code {
  color: var(--ds-color-primary);
  font-size: 11px;
}

@media (max-width: 640px) {
  .v2-chat-mock-c-note ul {
    columns: 1;
  }
}
/**
 * OpeningConfirmGate — popsci_cyber 开场形象确认门样式（Task 7 / DEE-165）
 *
 * 视觉源：docs/design/2026-06-12-popsci-cyber-opening-confirm-gate.html
 * 所有颜色引用 var(--ds-*) 设计系统 token（全局已声明于 global-design.css）。
 * 禁止 azure（§12 console scope no-azure 规则）；主按钮用 ink-on-ink。
 */

/* ---------- gate card（画布节点态 · DEE-165 卡片化：无遮罩，固定宽，DH 区卡内滚动） ---------- */
.ocg-gate {
  /* 画布节点态固定宽（取「选形象」步含 DH 网格的合适宽度）；DH 区由 .dh-picker-body
     自身 max-height 卡内滚动封顶（tendency #3：整卡不顶乱画布），不再用 88vh 视口封顶。 */
  width: 700px;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  box-shadow: var(--ds-elevation-4);
  overflow: hidden;
  font-family: var(--ds-typeface-plain);
  color: var(--ds-color-on-surface);
}

/* ---------- header ---------- */
.ocg-head {
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ocg-badge {
  font-size: 20px;
  line-height: 1;
  margin-top: 1px;
  flex: none;
}

.ocg-head-text {
  flex: 1;
  min-width: 0;
}

.ocg-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.ocg-sub {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  margin-top: 3px;
  line-height: 1.5;
}

.ocg-close {
  margin-left: auto;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--ds-corner-small);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- step indicator ---------- */
.ocg-steps {
  display: flex;
  align-items: center;
  padding: 14px 24px 0;
  gap: 0;
}

.ocg-step-row {
  display: flex;
  align-items: center;
  flex: 1;
}

.ocg-step-row:last-child {
  flex: none;
}

.ocg-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
}

.ocg-step .dot {
  width: 20px;
  height: 20px;
  border-radius: var(--ds-corner-full);
  border: 1px solid var(--ds-color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface);
  flex: none;
}

.ocg-step.done .dot {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface);
}

.ocg-step.active {
  color: var(--ds-color-on-surface);
  font-weight: 700;
}

.ocg-step.active .dot {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface);
}

.ocg-step-line {
  flex: 1;
  height: 1px;
  background: var(--ds-color-outline-variant);
  margin: 0 10px;
}

/* ---------- body ---------- */
.ocg-body {
  padding: 18px 24px 22px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* ---------- pick body (选形象) ---------- */
.ocg-body--pick {
  padding: 14px 20px 12px;
}

/* 快路阈值内：仍停在选形象页，轻微忙态避免误点 */
.ocg-body--pick-busy {
  opacity: 0.72;
  pointer-events: none;
}

.ocg-body--pick .dh-picker {
  border: none;
  box-shadow: none;
  background: transparent;
}

.ocg-body--pick .dh-picker-tabs {
  padding: 0 0 10px;
}

/* ---------- step 1 upload tile ---------- */
.ocg-dh-up {
  margin-top: 4px;
  margin-bottom: 4px;
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 16px;
  cursor: pointer;
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  transition: background 0.15s, border-color 0.15s;
}

.ocg-dh-up:hover {
  background: var(--ds-color-surface-container-high);
  border-color: var(--ds-color-on-surface-variant);
}

.ocg-up-ic {
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-color-on-surface-variant);
  flex: none;
  line-height: 1;
}

.ocg-up-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.ocg-up-t {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}

.ocg-up-s {
  font-size: 10.5px;
  color: var(--ds-color-on-surface-variant);
}

/* ---------- wait body · 方案 C ---------- */
.ocg-body--wait {
  padding: 20px 22px 24px;
}

.ocg-wait {
  display: flex;
  gap: 22px;
  align-items: center;
}

.ocg-phone {
  width: 148px;
  height: 262px;
  border-radius: 18px;
  border: 2px solid var(--ds-color-on-surface);
  background: linear-gradient(180deg, #1c1917 0%, #292524 40%, #44403c 100%);
  position: relative;
  flex: none;
  overflow: hidden;
  box-shadow: var(--ds-elevation-4);
}

/* 选形象步：紧凑示意，不抢网格空间 */
.ocg-phone--sm {
  width: 112px;
  height: 198px;
  border-radius: 14px;
  border-width: 1.5px;
}

.ocg-phone--sm .ocg-phone-notch {
  top: 6px;
  width: 36px;
  height: 5px;
}

.ocg-phone--sm .ocg-phone-board {
  inset: 22px 10px 40px;
}

.ocg-phone--sm .ocg-phone-line {
  height: 5px;
  margin: 8px 6px 0;
}

.ocg-phone--sm .ocg-phone-line--block {
  margin-top: 18px;
}

.ocg-phone--sm .ocg-phone-pip {
  right: 10px;
  bottom: 42px;
  width: 32px;
  height: 42px;
  border-radius: 5px;
}

.ocg-phone--sm .ocg-phone-pip-ph {
  font-size: 10px;
  padding-bottom: 4px;
}

.ocg-phone--sm .ocg-phone-cap {
  left: 8px;
  right: 8px;
  bottom: 10px;
  font-size: 8.5px;
}

.ocg-phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
}

.ocg-phone-board {
  position: absolute;
  inset: 28px 12px 48px;
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 18px,
      rgba(255, 255, 255, 0.04) 18px,
      rgba(255, 255, 255, 0.04) 19px
    );
}

.ocg-phone-line {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  margin: 10px 8px 0;
}

.ocg-phone-line--mid {
  width: 70%;
}

.ocg-phone-line--short {
  width: 55%;
}

.ocg-phone-line--block {
  margin-top: 28px;
  width: 80%;
}

.ocg-phone-pip {
  position: absolute;
  right: 14px;
  bottom: 52px;
  width: 42px;
  height: 56px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(160deg, #d6d3d1, #78716c);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.ocg-phone-pip--pulse {
  animation: ocg-pip-pulse 1.6s ease-in-out infinite;
}

.ocg-phone-pip--err {
  border-color: rgba(239, 68, 68, 0.75);
  opacity: 0.85;
}

.ocg-phone-pip-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.ocg-phone-pip-ph {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.55);
  padding-bottom: 6px;
}

.ocg-phone-cap {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  line-height: 1.3;
}

@keyframes ocg-pip-pulse {
  0%,
  100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 4px 18px rgba(24, 24, 27, 0.55);
    border-color: rgba(255, 255, 255, 0.85);
  }
}

.ocg-wait-side {
  flex: 1;
  min-width: 0;
}

.ocg-wait-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ds-color-on-surface);
}

.ocg-wait-name-sub {
  font-weight: 600;
  color: var(--ds-color-on-surface-variant);
  font-size: 13px;
}

.ocg-wait-desc {
  margin: 6px 0 14px;
  font-size: 12.5px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.55;
}

.ocg-bar {
  height: 4px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container-high);
  overflow: hidden;
}

.ocg-bar > i {
  display: block;
  height: 100%;
  width: 42%;
  border-radius: inherit;
  background: var(--ds-color-on-surface);
  animation: ocg-ind 1.4s ease-in-out infinite;
}

@keyframes ocg-ind {
  0% {
    transform: translateX(-100%);
    width: 30%;
  }
  50% {
    width: 55%;
  }
  100% {
    transform: translateX(280%);
    width: 30%;
  }
}

.ocg-eta {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
}

.ocg-loc-hint {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ds-color-on-surface-variant);
  padding: 8px 10px;
  background: var(--ds-color-surface-container);
  border-radius: var(--ds-corner-small);
  border: 1px solid var(--ds-color-outline-variant);
}

.ocg-loc-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--ds-color-on-surface);
  flex: none;
}

.ocg-checklist {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ocg-ck {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ds-color-on-surface-variant);
}

.ocg-ck-ic {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ds-color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex: none;
}

.ocg-ck--done {
  color: var(--ds-color-on-surface);
  font-weight: 600;
}

.ocg-ck--done .ocg-ck-ic {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface);
}

.ocg-ck--run {
  color: var(--ds-color-on-surface);
  font-weight: 700;
}

.ocg-ck--run .ocg-ck-ic {
  border-color: var(--ds-color-on-surface);
  border-top-color: transparent;
  border-width: 2px;
  animation: ocg-spin 0.8s linear infinite;
}

.ocg-err-box {
  border: 1px solid rgba(239, 68, 68, 0.25);
  background: #fef2f2;
  border-radius: var(--ds-corner-medium);
  padding: 12px 14px;
}

.ocg-err-title {
  font-size: 13px;
  font-weight: 800;
  color: #b42318;
}

.ocg-err-desc {
  font-size: 12px;
  color: #912018;
  margin-top: 4px;
  line-height: 1.45;
  opacity: 0.9;
}

.ocg-err-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* spinner used by legacy overlay paths */
.ocg-spin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid var(--ds-color-outline-variant);
  border-top-color: var(--ds-color-on-surface);
  animation: ocg-spin 0.8s linear infinite;
}

/* ---------- step 2 compose layout ---------- */
.ocg-compose {
  display: flex;
  gap: 20px;
}

.ocg-preview-col {
  flex: 0 0 160px;
}

/* 9:16 preview */
.ocg-preview {
  width: 160px;
  aspect-ratio: 9 / 16;
  border-radius: var(--ds-corner-medium);
  border: 1px solid var(--ds-color-outline-variant);
  background: linear-gradient(160deg, #2a2f3a 0%, #11151c 70%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.ocg-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ocg-ratio {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--ds-typeface-code);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.42);
  padding: 2px 7px;
  border-radius: var(--ds-corner-full);
  z-index: 1;
}

/* in-place generating overlay */
.ocg-pgen {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 16, 0.58);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  z-index: 2;
}

.ocg-pspin {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 255, 255, 0.26);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: ocg-spin 0.9s linear infinite;
}

.ocg-pgt {
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
}

.ocg-pgs {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--ds-typeface-code);
}

@keyframes ocg-spin {
  to {
    transform: rotate(360deg);
  }
}

/* version history thumbnails */
.ocg-history {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.ocg-hist {
  width: 36px;
  aspect-ratio: 9 / 16;
  border-radius: 6px;
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container-high);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.6;
  flex: none;
}

.ocg-hist-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ocg-hist.cur {
  border: 2px solid var(--ds-color-on-surface);
  opacity: 1;
}

/* iterate right column */
.ocg-iterate-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* step2 子分页切换：继续调这张 / 换一张 */
.ocg-seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  margin-bottom: 14px;
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
}

.ocg-seg button {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--ds-typeface-plain);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ds-color-on-surface-variant);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}

/* 选中态 ink 实色（§12 console no-azure） */
.ocg-seg button.on {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}

/* 「为什么不满意」引导态：更显眼的 ink 标签 + 强描边输入框 */
.ocg-field-lbl.ocg-q-lbl {
  font-family: var(--ds-typeface-plain);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ds-color-on-surface);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ocg-ta.ocg-ta-q {
  border-color: var(--ds-color-on-surface);
  min-height: 88px;
}

/* 全宽动作按钮（每个 panel 一个） */
.ocg-btn-block {
  width: 100%;
  margin-top: 13px;
}

.ocg-hint {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  margin-top: 9px;
  line-height: 1.5;
}

/* 错误态 inline 提示（白底卡内，如人群定位门推导/锁定失败）：danger 色 + 加重，
   与普通浅灰 hint 区分（DEE-329）。深色 spinner 覆盖层的失败态另见 .ocg-pgen.ocg-perr。 */
.ocg-hint.ocg-perr {
  color: var(--ds-color-error);
  font-weight: 500;
}

.ocg-field-lbl {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ds-color-on-surface-variant);
  margin-bottom: 8px;
}

.ocg-ta {
  width: 100%;
  min-height: 92px;
  resize: none;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 11px 13px;
  font-size: 13px;
  font-family: var(--ds-typeface-plain);
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
  line-height: 1.55;
  outline: none;
}

.ocg-ta::placeholder {
  color: var(--ds-color-on-surface-variant);
}

.ocg-ta:focus {
  border-color: var(--ds-color-on-surface-variant);
}

/* quick chips */
.ocg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.ocg-chip {
  font-size: 11.5px;
  padding: 5px 11px;
  border-radius: var(--ds-corner-full);
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  user-select: none;
}

.ocg-chip:hover {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
}

/* iterate action buttons */
.ocg-iter-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

/* ---------- step 3 summary ---------- */
.ocg-summary {
  display: flex;
  gap: 18px;
  align-items: center;
}

.ocg-sum-thumb {
  width: 80px;
  aspect-ratio: 9 / 16;
  border-radius: var(--ds-corner-medium);
  border: 1px solid var(--ds-color-outline-variant);
  background: linear-gradient(160deg, #2a2f3a, #11151c);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 40px;
  overflow: hidden;
  flex: none;
}

.ocg-sum-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ocg-sum-rows {
  flex: 1;
  min-width: 0;
}

.ocg-srow {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.ocg-srow:last-child {
  border-bottom: none;
}

.ocg-slbl {
  font-family: var(--ds-typeface-code);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ds-color-on-surface-variant);
  min-width: 54px;
  flex: none;
}

.ocg-sval {
  font-size: 13px;
  color: var(--ds-color-on-surface);
  line-height: 1.5;
}

.ocg-callout {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 11px 13px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container);
  font-size: 12.5px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.5;
}

.ocg-callout-ic {
  color: var(--ds-color-on-surface);
  font-weight: 800;
  flex: none;
}

/* ---------- footer ---------- */
.ocg-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container);
}

.ocg-foot-hint {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  line-height: 1.45;
}

.ocg-spacer {
  flex: 1;
}

/* ---------- buttons ---------- */
.ocg-btn {
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--ds-corner-small);
  cursor: pointer;
  border: 1px solid transparent;
  font-family: var(--ds-typeface-plain);
  white-space: nowrap;
}

/* ink-on-ink primary — no azure (§12 console scope) */
.ocg-btn-primary {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface);
}

.ocg-btn-primary:disabled {
  background: var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
  opacity: 0.6;
  cursor: not-allowed;
}

.ocg-btn-ghost {
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  border: 1px solid var(--ds-color-outline-variant);
  font-weight: 600;
}

.ocg-btn-ghost:disabled {
  background: var(--ds-color-surface-container);
  opacity: 0.5;
  cursor: not-allowed;
}

/* 冷启动准备失败态 */
.ocg-pgen.ocg-perr {
  gap: var(--ds-sys-space-md);
}

.ocg-pgen.ocg-perr .ocg-pgs {
  color: var(--ds-color-on-surface-variant);
  max-width: 220px;
  text-align: center;
  line-height: 1.5;
}

.ocg-pgen.ocg-perr .ocg-btn {
  margin-top: var(--ds-sys-space-sm);
}

/* 出图失败「重试」按钮：暗底预览框覆盖层上用浅底反白，保证对比（非 azure，仅作用于暗底层） */
.ocg-btn-onfail {
  background: #ffffff;
  color: #18181b;
  border-color: #ffffff;
}
/* ---- 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-color-surface-container) !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--ds-color-on-surface) !important;
  font-size: 14px !important;
  box-shadow: inset 0 0 0 1px var(--ds-color-outline-variant) !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-color-outline-variant) !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-color-on-surface-variant) !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-color-surface-container) !important;
  background-color: var(--ds-color-surface-container) !important;
  border: none !important;
  border-color: transparent !important;
  border-radius: 10px !important;
  color: var(--ds-color-on-surface-variant) !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-color-outline-variant) !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-color-outline-variant) !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-color-on-surface-variant) !important;
  font-size: 13px !important;
}

.video-list-page .vlp-filter-select .ant-select-arrow {
  color: var(--ds-color-on-surface-variant) !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-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  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-color-on-surface-variant) !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-color-on-surface-variant) !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-color-on-surface-variant) !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-color-surface-container) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px var(--ds-color-outline-variant) !important;
  color: var(--ds-color-on-surface-variant) !important;
}

/* ---- Preview Modal ---- */
.vlp-preview-modal .ant-modal-content {
  background: var(--ds-color-surface-container) !important;
  border: 1px solid var(--ds-color-outline-variant) !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-color-on-surface-variant) !important;
}

.vlp-preview-modal .ant-modal-close:hover {
  color: var(--ds-color-on-surface-variant) !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-color-on-surface) !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-color-on-surface-variant) !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;
}
/* ===== ProductsHomePage layout (plan v2 Task 5) ===== */
.products-home {
  overflow-y: auto;
  padding: 28px 32px 64px;
  background: var(--ds-color-surface);
}
.back-to-canvas-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  padding: 6px 12px;
  border-radius: var(--ds-corner-small);
  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-color-surface-container);
  color: var(--ds-color-on-surface);
  border-color: var(--ds-color-on-surface-variant);
}
.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-color-on-surface-variant);
  margin: 0 0 24px;
}

/* ===== Enterprise info card (Task 6) ===== */
.ent-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  margin-bottom: 24px;
}
.ent-logo {
  width: 56px;
  height: 56px;
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container-high);
  border: 1px solid var(--ds-color-outline-variant);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
  flex-shrink: 0;
}
.ent-info { flex: 1; min-width: 0; }
.ent-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.ent-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}
.ent-pin {
  background: var(--ds-color-surface-container);
  border-radius: var(--ds-corner-small);
  padding: 2px 8px;
  font-weight: 500;
}
.ent-stats {
  display: flex;
  gap: 24px;
  padding-left: 24px;
  border-left: 1px solid var(--ds-color-outline-variant);
}
.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-color-on-surface);
  letter-spacing: -0.02em;
}
.ent-stat-label {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  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-color-on-surface-variant);
  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-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font: inherit;
  color: var(--ds-color-on-surface);
  position: relative;
}
.product-pill:hover {
  background: var(--ds-color-surface-container);
  border-color: var(--ds-color-on-surface-variant);
}
.product-pill--active {
  background: var(--ds-color-on-surface);
  border-color: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}
.product-pill--active:hover {
  background: var(--ds-color-on-surface);
}
.product-pill--active .pill-swatch {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
}
.product-pill--active .pill-meta {
  color: color-mix(in srgb, var(--ds-color-on-surface) 60%, transparent);
}
.pill-swatch {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.pill-swatch--new {
  background: transparent;
  border: 1px dashed var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
}
.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-color-on-surface-variant);
  letter-spacing: 0.02em;
  margin-top: 1px;
}
.product-pill--new {
  border-style: dashed;
  color: var(--ds-color-on-surface-variant);
  background: transparent;
}
.product-pill--new:hover {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
}

/* ===== 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-color-on-surface-variant);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  margin-left: 4px;
  padding: 0;
}
.pill-more-btn:hover {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
}
.pill-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  box-shadow: var(--ds-elevation-4);
  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-corner-small);
  font: inherit;
  font-size: 13px;
  color: var(--ds-color-on-surface);
  cursor: pointer;
  text-align: left;
}
.pill-menu-item:hover { background: var(--ds-color-surface-container); }
.pill-menu-item--danger { color: var(--ds-color-error); }
.pill-rename-input {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  padding: 1px 6px;
  outline: none;
  color: var(--ds-color-on-surface);
  width: 120px;
}

/* ===== Section blocks (Task 11/12/13) ===== */
.section {
  margin-bottom: 32px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  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-color-on-surface);
  margin: 0;
  letter-spacing: -0.01em;
}
.section-sub {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}
.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-color-outline-variant);
  background: var(--ds-color-surface);
  padding: 6px 12px;
  border-radius: var(--ds-corner-small);
  font: inherit;
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
  text-decoration: none;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ds-color-on-surface-variant);
}
.btn-ghost:hover { color: var(--ds-color-on-surface); background: var(--ds-color-surface-container); }
.skeleton-row {
  padding: 24px;
  text-align: center;
  color: var(--ds-color-on-surface-variant);
  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-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  cursor: pointer;
  font: inherit;
  color: var(--ds-color-on-surface);
  text-align: left;
  align-items: flex-start;
}
.doc-card:hover {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
}
.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-corner-small);
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface);
  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-color-outline-variant);
  color: var(--ds-color-on-surface-variant);
  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-color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-card-meta {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  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-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  flex: 1;
}
.digital-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ds-color-surface-container-high);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-color-on-surface);
}
.digital-num {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ds-color-on-surface);
}
.digital-label,
.digital-pref-meta {
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
  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-color-on-surface-variant);
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
}
.digital-pref-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
}
/* ===================================================================
 * GEO H5 Report — 仅 H5 分享页所需样式（替代原 global.css 全量污染）
 * ===================================================================
 * 背景：原 modules/geo/styles/global.css 有 1611 行，其中 125 条全局
 * antd 规则（.ant-input/.ant-btn-primary/.ant-card/.ant-table/.ant-modal
 * 等，全部 !important）污染全站，迫使 antd-overrides.css 用 .dp-revamp
 * 反制。GEO 旧页面（品牌入驻/内容管理/平台授权）已删除，仅剩
 * H5ReportPage（纯 inline style + CSS 变量）在使用。
 *
 * 本文件只保留 H5ReportPage 实际引用的资源：
 *   .geo-loading-container（H5 唯一的 geo class）；颜色一律直接用 --ds-color-* 标准 token，
 *   不再保留 --geo-* 别名。
 * 不再包含任何全局 antd 规则。
 *
 * 注：H5ReportPage 原引用的 --geo-bg-dark 历史上从未定义，清理别名时已统一
 * 改用 --ds-color-surface（浅色底）。
 * =================================================================== */

/* H5 加载容器 */
.geo-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  background: var(--ds-color-surface-container);
  border-radius: var(--ds-corner-large);
  border: 1px solid var(--ds-color-outline-variant);
  margin: 20px 0;
}
.agent-trace-conversation-table .ant-table-thead > tr > th,
.agent-trace-conversation-table .ant-table-tbody > tr > td {
  padding-inline: 10px !important;
  text-align: left !important;
}

.agent-trace-conversation-table .ant-table-thead > tr > th {
  color: var(--ds-color-on-surface-variant);
  font-weight: 500;
  white-space: nowrap;
}

.agent-trace-conversation-table .ant-table-thead > tr > th:first-child,
.agent-trace-conversation-table .ant-table-tbody > tr > td:first-child {
  padding-left: 14px !important;
}

.agent-trace-conversation-table .ant-table-thead > tr > th:last-child,
.agent-trace-conversation-table .ant-table-tbody > tr > td:last-child {
  padding-right: 14px !important;
}

.agent-trace-conversation-table .ant-table-thead > tr > th::before {
  background-color: var(--ds-color-on-surface-variant);
}

.agent-trace-conversation-table .ant-table-container,
.agent-trace-conversation-table .ant-table-content,
.agent-trace-conversation-table table {
  width: 100% !important;
}

.agent-trace-conversation-detail--loading {
  display: grid;
  min-height: 160px;
  place-items: center;
}

/* ===== Session detail drawer / context modal readability =====
   Root cause: dark theme + geo global `.ant-typography { color: var(--geo-text-primary) !important }`
   force light text; pastel tool/skill/user cards still use light backgrounds → washed-out text.
   Drawer/Modal portals are outside `.dp-revamp`, so they miss the existing typography counter-fix.
*/

.agent-trace-drawer .ant-drawer-body,
.agent-trace-modal .ant-modal-body {
  color: var(--ds-color-on-surface);
  font-size: 14px;
  line-height: 1.6;
}

/* Defeat geo / darkAlgorithm light text so blocks can set their own readable color. */
.agent-trace-drawer .ant-typography,
.agent-trace-drawer .ant-typography *,
.agent-trace-modal .ant-typography,
.agent-trace-modal .ant-typography * {
  color: inherit !important;
}

.agent-trace-drawer .ant-typography-secondary,
.agent-trace-modal .ant-typography-secondary {
  color: var(--ds-color-on-surface-variant) !important;
}

.agent-trace-drawer .ant-btn-link,
.agent-trace-modal .ant-btn-link {
  color: var(--ds-color-on-primary) !important;
}

.agent-trace-drawer .ant-descriptions-item-label,
.agent-trace-modal .ant-descriptions-item-label {
  color: var(--ds-color-on-surface-variant) !important;
}

.agent-trace-drawer .ant-descriptions-item-content,
.agent-trace-modal .ant-descriptions-item-content {
  color: var(--ds-color-on-surface) !important;
}

.agent-trace-block {
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  /* Light pastel island: always dark ink for WCAG contrast. */
  color: #18181b;
  font-size: 14px;
  line-height: 1.6;
}

.agent-trace-block--user {
  background: #eaf4ff;
  border: 1px solid #91caff;
}

.agent-trace-block--skill {
  background: #f9f0ff;
  border: 1px solid #d3adf7;
}

.agent-trace-block--tool {
  background: #fff7e6;
  border: 1px solid #ffd591;
}

.agent-trace-block--subagent {
  background: #f0f5ff;
  border: 1px solid #adc6ff;
}

.agent-trace-block--reply {
  background: #f1fbf3;
  border: 1px solid #b7ebc6;
  margin-bottom: 0;
}

.agent-trace-block--reply-nested {
  background: #f0f5ff;
  border: 1px solid #adc6ff;
  margin-bottom: 0;
  padding: 10px;
}

.agent-trace-block .ant-typography-secondary {
  color: #595959 !important;
}

.agent-trace-block__title {
  color: inherit;
  font-weight: 600;
}

.agent-trace-json {
  margin: 0;
  padding: 12px;
  background: #f0f0f0;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.5;
  color: #18181b;
}

.agent-trace-event-details {
  margin-top: 8px;
}

.agent-trace-event-details > summary {
  cursor: pointer;
  color: #595959;
  font-size: 12px;
  margin-bottom: 8px;
}

/* Dark theme: tinted surfaces + light text (readable on dark canvas). */
[data-theme='dark'] .agent-trace-block {
  color: #f4f4f5;
}

[data-theme='dark'] .agent-trace-block--user {
  background: rgba(77, 166, 255, 0.16);
  border-color: rgba(77, 166, 255, 0.4);
}

[data-theme='dark'] .agent-trace-block--skill {
  background: rgba(146, 84, 222, 0.18);
  border-color: rgba(179, 127, 235, 0.45);
}

[data-theme='dark'] .agent-trace-block--tool {
  background: rgba(250, 173, 20, 0.14);
  border-color: rgba(250, 173, 20, 0.4);
}

[data-theme='dark'] .agent-trace-block--subagent {
  background: rgba(64, 128, 255, 0.16);
  border-color: rgba(105, 160, 255, 0.4);
}

[data-theme='dark'] .agent-trace-block--reply {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.4);
}

[data-theme='dark'] .agent-trace-block--reply-nested {
  background: rgba(64, 128, 255, 0.14);
  border-color: rgba(105, 160, 255, 0.4);
}

[data-theme='dark'] .agent-trace-block .ant-typography-secondary {
  color: #c4c4c8 !important;
}

[data-theme='dark'] .agent-trace-json {
  background: rgba(255, 255, 255, 0.08);
  color: #f4f4f5;
}

[data-theme='dark'] .agent-trace-event-details > summary {
  color: #c4c4c8;
}
.ant-tooltip.tool-metric-tooltip .ant-tooltip-inner {
  padding: var(--ds-space-2) var(--ds-space-3) !important;
  background: var(--ds-glass-bg) !important;
  color: var(--ds-text) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-sm) !important;
  box-shadow: var(--ds-shadow-card) !important;
  backdrop-filter: blur(14px);
}

.ant-tooltip.tool-metric-tooltip .ant-tooltip-arrow::before,
.ant-tooltip.tool-metric-tooltip .ant-tooltip-arrow-content {
  background: var(--ds-glass-bg) !important;
}
.agent-token-trend-chart {
  width: 100%;
  min-height: 390px;
  color: var(--ds-color-on-surface);
}

.token-trend-tooltip {
  min-width: 260px;
  max-width: 380px;
  color: var(--ds-color-on-surface);
  font-family: var(--ds-typeface-plain);
}

.token-trend-tooltip__title {
  color: var(--ds-color-on-surface);
  font-size: 13px;
  font-weight: 700;
}

.token-trend-tooltip__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-xl);
  margin-top: var(--ds-sys-space-sm);
}

.token-trend-tooltip__row span {
  overflow: hidden;
  color: var(--ds-color-on-surface-variant);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.token-trend-tooltip__row b {
  color: var(--ds-color-on-surface);
  font-variant-numeric: tabular-nums;
}

.token-trend-tooltip__focus-title {
  margin-top: var(--ds-sys-space-md);
  color: var(--ds-color-on-surface);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .agent-token-trend-chart {
    min-height: 340px;
  }
}
.agent-token-drilldown .ant-drawer-body {
  background: var(--ds-color-surface);
}

.agent-token-drilldown__chart-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-sys-space-sm);
}

.agent-token-drilldown__chart-control-group {
  display: flex;
  align-items: center;
}

.agent-token-drilldown__chart-control-group--metric {
  padding-inline-start: var(--ds-sys-space-sm);
  border-inline-start: 1px solid var(--ds-color-outline-variant);
}

.agent-token-drilldown__segmented {
  border: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container-low);
}

.agent-token-drilldown__segmented .ant-segmented-item-selected {
  background: var(--ds-color-primary-container) !important;
  color: var(--ds-color-on-primary-container) !important;
  box-shadow: inset 0 0 0 1px var(--ds-color-primary) !important;
}

.agent-token-drilldown__segmented .ant-segmented-item-selected .ant-segmented-item-label {
  color: var(--ds-color-on-primary-container) !important;
}

.agent-token-drilldown__segmented .ant-segmented-item:focus-within {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: 1px;
}

.agent-token-drilldown .agent-token-drilldown__conversation-link.ant-btn-link {
  color: var(--ds-color-primary) !important;
}

.agent-token-drilldown .agent-token-drilldown__conversation-link.ant-btn-link:hover,
.agent-token-drilldown .agent-token-drilldown__conversation-link.ant-btn-link:focus-visible {
  color: var(--ds-color-primary) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.agent-token-drilldown .agent-token-drilldown__conversation-link.ant-btn-link:focus-visible {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: 1px;
}

.agent-token-drilldown__bar-chart {
  width: 100%;
  height: 320px;
  margin-top: var(--ds-space-3);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container-low);
}

.agent-token-drilldown__alert {
  margin-bottom: var(--ds-space-3);
}

.agent-token-drilldown__turn-expansion {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-sm);
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-md);
  background: var(--ds-color-surface-container-low);
}

.agent-token-drilldown__turn-expansion .agent-token-drilldown__alert {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .agent-token-drilldown__chart-control-group--metric {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .agent-token-drilldown__bar-chart {
    height: 280px;
  }
}
.agent-latency-summary .ant-spin-nested-loading, .agent-latency-summary .ant-spin-container { min-height: 0; }
.agent-latency-filter-bar { width: 100%; }
.ant-card.agent-latency-trend-card > .ant-card-head { border-bottom: 1px solid var(--ds-color-outline-variant) !important; }
.agent-latency-trend-card .ant-card-head-wrapper { gap: var(--ds-sys-space-md); }
.agent-latency-trend-card .ant-card-extra { min-width: 0; max-width: 100%; }
.agent-latency-trend-card__controls, .agent-latency-trend-card__segmented-groups { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-sys-space-sm); min-width: 0; }
.agent-latency-trend-card__segmented { padding: 2px; border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-medium); background: var(--ds-color-surface-container-low); color: var(--ds-color-on-surface-variant); font-family: var(--ds-typeface-plain); font-size: 12px; line-height: 1.35; }
.agent-latency-trend-card__chips { display: inline-flex; padding: 2px; border: 1px solid var(--ds-color-outline-variant); border-radius: var(--ds-corner-medium); background: var(--ds-color-surface-container-low); }
.agent-latency-trend-card__chips .ant-checkbox-group-item { margin-inline-end: 0; padding: 3px 7px; color: var(--ds-color-on-surface-variant); font-size: 12px; white-space: nowrap; }
.agent-latency-trend-card__chips .ant-checkbox { display: none; }
.agent-latency-trend-card__chips .ant-checkbox-wrapper-checked { border-radius: var(--ds-corner-small); background: var(--ds-color-primary-container); color: var(--ds-color-on-primary-container); }
.agent-latency-trend-card__segmented .ant-segmented-item { color: var(--ds-color-on-surface-variant); white-space: nowrap; }
.agent-latency-trend-card__segmented .ant-segmented-item-selected { background: var(--ds-color-primary-container); color: var(--ds-color-on-primary-container); box-shadow: none; }
.agent-latency-trend-card__segmented .ant-segmented-item:focus-within { outline: 2px solid var(--ds-color-primary); outline-offset: 1px; }
.agent-latency-trend-chart-wrap { min-width: 0; }
.agent-latency-trend-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 8px 8px; color: var(--ds-color-on-surface-variant); font-size: 12px; }
.agent-latency-trend-chart__legend-item { display: inline-flex; align-items: center; max-width: 180px; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-latency-trend-chart__legend-item i { display: inline-block; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
.agent-latency-trend-chart { width: 100%; min-height: 300px; color: var(--ds-color-on-surface); }
.agent-latency-trend-card .ant-card-body { position: relative; }
.agent-latency-trend-chart__tooltip { position: absolute; z-index: 2; pointer-events: none; opacity: 0; padding: 8px 10px; border-radius: var(--ds-corner-small); background: var(--ds-color-inverse-surface); color: var(--ds-color-inverse-on-surface); font-size: 12px; line-height: 1.5; box-shadow: var(--ds-elevation-level2); transition: opacity 100ms; }
.agent-latency-trend-chart__axis { color: var(--ds-color-on-surface-variant); }
.agent-latency-uncollected, .agent-latency-baseline { margin-bottom: var(--ds-sys-space-md); color: var(--ds-color-on-surface-variant); }
@media (max-width: 1200px) { .agent-latency-trend-card .ant-card-head-wrapper { flex-wrap: wrap; } .agent-latency-trend-card .ant-card-extra, .agent-latency-trend-card__controls { width: 100%; } .agent-latency-trend-card__controls, .agent-latency-trend-card__segmented-groups { justify-content: flex-start; } }
.ant-spin-nested-loading.agent-token-summary-spin {
  min-height: 0;
}

.ant-card.agent-token-trend-card > .ant-card-head {
  border-bottom: 1px solid var(--ds-color-outline-variant) !important;
}

.agent-token-trend-card > .ant-card-head > .ant-card-head-wrapper,
.agent-token-trend-card > .ant-card-head .ant-card-head-title {
  border-bottom: none !important;
}

.agent-token-trend-card .ant-card-head-wrapper {
  gap: var(--ds-sys-space-md);
}

.agent-token-trend-card .ant-card-extra {
  min-width: 0;
  max-width: 100%;
}

.agent-token-trend-card__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ds-sys-space-sm);
  max-width: 100%;
}

.agent-token-trend-card__segmented-groups {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.agent-token-trend-card__segmented {
  flex: 0 0 auto;
  padding: 2px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container-low);
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-plain);
  font-size: 12px;
  line-height: 1.35;
}

.agent-token-trend-card__segmented .ant-segmented-item {
  color: var(--ds-color-on-surface-variant);
  white-space: nowrap;
}

.agent-token-trend-card__segmented .ant-segmented-item:hover:not(.ant-segmented-item-selected) {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
}

.agent-token-trend-card__segmented .ant-segmented-item-selected {
  background: var(--ds-color-primary-container);
  color: var(--ds-color-on-primary-container);
  box-shadow: none;
}

.agent-token-trend-card__segmented .ant-segmented-item:focus-within {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: 1px;
}

.agent-token-trend-card__model-filter {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.agent-token-trend-card__model-select {
  width: min(360px, 100%);
  min-width: 220px;
}

@media (max-width: 1200px) {
  .agent-token-trend-card .ant-card-head-wrapper {
    flex-wrap: wrap;
  }

  .agent-token-trend-card .ant-card-extra,
  .agent-token-trend-card__controls {
    width: 100%;
  }

  .agent-token-trend-card__controls,
  .agent-token-trend-card__segmented-groups,
  .agent-token-trend-card__model-filter {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .agent-token-trend-card__model-select {
    min-width: 0;
  }
}
.agent-trace-chat-page {
  min-height: 100%;
  padding: var(--ds-sys-space-xl);
  background: var(--ds-color-surface);
}

.agent-trace-chat-page__content {
  width: 100%;
}

.agent-trace-chat-page__title-row {
  margin-top: var(--ds-sys-space-md);
  margin-bottom: var(--ds-sys-space-sm);
}

.agent-trace-chat-page__title-row .ant-typography {
  margin: 0;
  color: var(--ds-color-on-surface);
}

.agent-trace-chat-page__chat-card .ant-card-body {
  padding: 0;
}

.agent-trace-chat-page__messages {
  height: calc(100vh - 300px);
  min-height: 400px;
  overflow-y: auto;
  padding: var(--ds-sys-space-xl) var(--ds-sys-space-xxl) 0;
}

.agent-trace-chat-page__embed-json {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--ds-typeface-code);
  color: var(--ds-color-on-surface-variant);
}

@media (max-width: 768px) {
  .agent-trace-chat-page {
    padding: var(--ds-sys-space-lg);
  }

  .agent-trace-chat-page__messages {
    height: calc(100vh - 280px);
    min-height: 320px;
    padding-inline: var(--ds-sys-space-lg);
  }
}
.agent-edit-page {
  padding: var(--ds-sys-space-xl, 24px);
}

.model-config-page {
  padding: var(--ds-sys-space-xl, 24px);
}

.model-config-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sys-space-lg, 16px);
  margin-bottom: var(--ds-sys-space-lg, 16px);
}

.model-config-page__id.ant-typography {
  display: block;
  max-width: 180px;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-config-page__provider-note {
  margin-bottom: var(--ds-sys-space-lg, 16px);
}

.model-config-page__provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--ds-sys-space-lg, 16px);
}

@media (max-width: 680px) {
  .model-config-page__provider-grid {
    grid-template-columns: 1fr;
  }
}

.agent-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-lg, 16px);
  margin-bottom: var(--ds-sys-space-lg, 16px);
}

.agent-edit-header__left {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--ds-sys-space-sm, 8px);
}

.agent-edit-header__title.ant-typography {
  min-width: 0;
  margin: 0;
}

.agent-tool-editor,
.agent-tool-editor__heading {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-sm, 8px);
}

.agent-tool-selected-grid {
  display: grid;
  /* 内容自适应三档（正常对话/显式调用/不可见）自然宽约 220px + 卡内边距，给到 300 避免 ellipsis */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--ds-sys-space-sm, 8px);
}

.agent-tool-selected-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  padding: 10px 32px 10px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium, );
  background: var(--ds-color-surface-container, );
}

.agent-tool-selected-card__tier.ant-segmented {
  /* 不 block 均分：按文案自然宽，长标签才不会被截成「正常...」 */
  width: max-content;
  max-width: 100%;
}

.agent-tool-selected-card__tier .ant-segmented-item-label {
  min-height: 24px;
  max-width: none;
  padding: 0 6px;
  overflow: visible;
  font-size: 12px;
  line-height: 22px;
  text-overflow: clip;
}

.agent-tool-selected-card__remove {
  position: absolute;
  top: 5px;
  right: 5px;
  color: var(--ds-color-on-surface-variant, );
}

.agent-tool-modal-scroll {
  height: 552px;
  overflow-y: auto;
  padding: 4px;
}

.agent-skill-modal-search {
  margin-bottom: var(--ds-space-3, 12px);
}

.agent-tool-option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 156px;
  gap: var(--ds-sys-space-md, 12px);
}

.agent-tool-option-card {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  height: 156px;
  overflow: hidden;
  gap: var(--ds-sys-space-sm, 8px);
  padding: var(--ds-sys-space-md, 12px);
  cursor: pointer;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium, );
  background: var(--ds-color-surface, );
  transition: border-color 0.15s ease, background 0.15s ease;
}

.agent-tool-option-card:hover,
.agent-tool-option-card--selected {
  border-color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container, );
}

.agent-tool-option-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 6px;
}

.agent-tool-option-card__description.ant-typography {
  min-height: 40px;
  margin: 0;
  line-height: 1.45;
}

.agent-tool-option-card__meta {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
  white-space: nowrap;
}

.agent-tool-option-card__meta .ant-typography {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
}

.agent-skill-editor,
.agent-skill-tier-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-sm, 8px);
}

.agent-skill-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: var(--ds-sys-space-md, 12px);
  padding: 6px var(--ds-sys-space-md, 12px);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium, );
  background: var(--ds-color-surface, );
}

.agent-skill-tier-row > .ant-typography {
  min-width: 0;
}

@media (max-width: 900px) {
  .agent-tool-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .agent-edit-header {
    align-items: flex-start;
  }

  .agent-edit-header__left {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .agent-tool-option-grid {
    grid-template-columns: 1fr;
  }
}
.skill-workspace-page {
  height: calc(100dvh - 64px);
  min-height: 640px;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.skill-workspace-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.skill-workspace-header__main,
.skill-workspace-header__title-row,
.skill-workspace-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.skill-workspace-header__main { flex: 1; }
.skill-workspace-header__copy { min-width: 0; flex: 1; overflow: hidden; }
.skill-workspace-header__copy .ant-typography { margin: 0; }
.skill-workspace-header__meta { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-workspace-header__actions { flex: none; white-space: nowrap; }

.skill-workspace-shell {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface);
}

.skill-workspace-loading { grid-column: 1 / -1; padding: 24px; }

.skill-workspace-shell > .skill-file-viewer__empty-state { grid-column: 1 / -1; }

.skill-workspace-files {
  min-height: 0;
  min-width: 0;
  border-right: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container-low);
}

.skill-workspace-editor {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.skill-workspace-history-banner,
.skill-workspace-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container-low);
}

.skill-workspace-warning { color: var(--ds-color-error); }

.skill-workspace-save-bar {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-top: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container-low);
}

.skill-workspace-save-bar__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.skill-workspace-save-bar__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ds-color-primary);
}

.skill-workspace-save-bar__note { max-width: 360px; margin-left: auto; }
.skill-workspace-save-bar__actions { display: flex; gap: 8px; }

.skill-file-tree {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.skill-file-tree__header {
  min-height: 40px;
  padding: 0 8px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.skill-file-tree__label {
  color: var(--ds-color-on-surface-variant);
  font-size: 12px;
  font-weight: 600;
}

.skill-file-tree__create { padding: 8px; }
.skill-file-tree__body { flex: 1; min-height: 0; overflow: auto; padding: 4px; }
.skill-file-tree__body .ant-tree { background: transparent; }
.skill-file-tree__body .ant-tree-treenode {
  min-height: 24px;
  padding: 0;
  align-items: center;
}

.skill-file-tree__body .ant-tree-indent-unit { width: 16px; }
.skill-file-tree__body .ant-tree-switcher {
  width: 16px;
  height: 24px;
  line-height: 24px;
}

.skill-file-tree__body .ant-tree-node-content-wrapper {
  min-width: 0;
  min-height: 24px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 24px;
}

.skill-file-tree__body .ant-tree-iconEle {
  width: 16px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  line-height: 24px;
}

.skill-file-tree__body .ant-tree-title { min-width: 0; }
.skill-file-tree__node-title { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-file-tree__footer { padding: 6px 8px; border-top: 1px solid var(--ds-color-outline-variant); }

.skill-file-viewer {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.skill-file-viewer__toolbar {
  min-height: 40px;
  padding: 0 12px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  background: var(--ds-color-surface-container-low);
}

.skill-file-viewer__path {
  min-width: 0;
  font-family: var(--ds-typeface-code);
  font-size: 12px;
}

.skill-file-viewer__content { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.skill-file-viewer__content > .ant-skeleton { padding: 24px; }

.skill-file-viewer__editor.ant-input {
  flex: 1;
  height: 100%;
  min-height: 0;
  resize: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 20px 24px;
  font-family: var(--ds-typeface-code);
  font-size: var(--ds-font-code-medium-size);
  line-height: var(--ds-font-code-medium-line-height);
}

.skill-file-viewer__preview-scroll { flex: 1; min-width: 0; overflow: auto; }
.skill-file-viewer__prose {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 36px 64px;
  color: var(--ds-color-on-surface);
  font-size: 14px;
  line-height: 1.7;
}

.skill-file-viewer__frontmatter {
  margin-bottom: 24px;
  padding: 14px 16px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container-low);
}

.skill-file-viewer__frontmatter pre {
  margin: 10px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-typeface-code);
  font-size: var(--ds-font-code-medium-size);
  line-height: var(--ds-font-code-medium-line-height);
}

.skill-file-viewer__empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px;
  text-align: center;
}

.skill-history-list .ant-list-item { align-items: flex-start; }
.skill-history-item { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.skill-history-item__copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.skill-history-item__actions { flex: none; display: flex; gap: 6px; }

.skill-create-dialog .ant-modal-content {
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
}

.skill-create-dialog .ant-modal-header {
  margin: 0;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.skill-create-dialog .ant-modal-close { top: 14px; inset-inline-end: 14px; }
.skill-create-dialog .ant-modal-body { padding: 20px; }

.skill-create-dialog__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 28px;
}

.skill-create-dialog__heading > span:first-child { font-size: 16px; line-height: 24px; }
.skill-create-dialog__heading .ant-typography { font-size: 13px; font-weight: 400; line-height: 20px; }

.skill-create-dialog__choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skill-create-dialog__choice {
  width: 100%;
  min-height: 72px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 10px;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.skill-create-dialog__choice:hover {
  border-color: var(--ds-color-outline);
  background: var(--ds-color-surface-container-low);
}

.skill-create-dialog__choice:focus-visible {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: 2px;
}

.skill-create-dialog__choice-icon {
  width: 38px;
  height: 38px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--ds-color-surface-container-low);
  color: var(--ds-color-on-surface-variant);
  font-size: 16px;
}

.skill-create-dialog__choice-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.skill-create-dialog__choice-title { font-size: 14px; font-weight: 500; line-height: 21px; }
.skill-create-dialog__choice-description { color: var(--ds-color-on-surface-variant); font-size: 13px; line-height: 20px; }
.skill-create-dialog__choice-arrow { flex: none; color: var(--ds-color-outline); font-size: 12px; }

body .skill-page-size-dropdown {
  padding: 4px;
  background: var(--ds-color-surface) !important;
  border: 1px solid var(--ds-color-outline-variant) !important;
  border-radius: var(--ds-corner-small);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

body .skill-page-size-dropdown .ant-select-item {
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 6px;
}

body .skill-page-size-dropdown .ant-select-item-option-selected {
  background: var(--ds-color-primary-container) !important;
}

body .skill-page-size-dropdown .ant-select-item-option-active:not(.ant-select-item-option-selected) {
  background: var(--ds-color-surface-container-low) !important;
}

@media (max-width: 900px) {
  .skill-workspace-page { height: auto; min-height: calc(100dvh - 64px); overflow: visible; }
  .skill-workspace-header { flex-direction: column; align-items: stretch; }
  .skill-workspace-header__actions { justify-content: flex-end; }
  .skill-workspace-shell { flex: none; min-height: 720px; grid-template-columns: 1fr; grid-template-rows: 220px minmax(0, 1fr); }
  .skill-workspace-files { border-right: 0; border-bottom: 1px solid var(--ds-color-outline-variant); }
  .skill-workspace-save-bar { flex-wrap: wrap; }
  .skill-workspace-save-bar__note { order: 3; width: 100%; max-width: none; margin-left: 0; }
  .skill-workspace-save-bar__actions { margin-left: auto; }
  .skill-file-viewer__prose { padding: 24px 20px 48px; }
}
/* 全局样式 - 从 deep navy 暗色迁移到 v1 白底
   --color-* 全部 alias 到 --ds-*（在 global-design.css 中定义） */
:root {
  --color-bg: var(--ds-color-surface);
  --color-bg-2: var(--ds-color-surface);
  --color-bg-soft: var(--ds-color-surface);
  --color-surface: var(--ds-color-surface);
  --ds-color-surface-container: var(--ds-color-surface-container);
  --color-surface-3: var(--ds-color-surface-container);
  --color-surface-4: var(--ds-color-surface-container);
  --color-surface-5: var(--ds-color-surface-container);
  --color-border: var(--ds-color-outline-variant);
  --color-border-strong: var(--ds-color-outline-variant);
  --color-border-muted: var(--ds-color-outline-variant);
  --color-text: var(--ds-color-on-surface);
  --color-text-muted: var(--ds-color-on-surface-variant);
  --color-text-dim: var(--ds-color-outline-variant);
  --color-primary: var(--ds-color-primary);
  --color-primary-accent: var(--ds-color-primary);
  --color-primary-deep: var(--ds-color-on-primary-container);
  --color-primary-tint: var(--ds-color-primary);
  --color-primary-rgb: 77, 166, 255;
  --color-primary-accent-rgb: 77, 166, 255;
  --color-primary-deep-rgb: 0, 120, 212;
  --color-success: var(--ds-color-secondary);
  --color-warning: var(--ds-color-warning);
  --color-danger: var(--ds-color-error);
  --color-info: var(--ds-color-primary);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--ds-color-surface);
}

body {
  font-family: var(--ds-typeface-plain);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

/* 表单控件不继承 UA 默认字体（Chrome button 默认 Arial 13.33px），
   统一走 --ds-typeface-plain，避免自定义按钮/输入框观感偏离全局字体。 */
button,
input,
select,
textarea {
  font-family: inherit;
}

#root {
  height: 100vh;
  overflow: hidden;
  background: var(--ds-color-surface);
}

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-color-outline-variant);
  border-radius: 3px;
}

.dark-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--ds-color-outline-variant);
}

/* 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-color-on-surface) !important;
}

.dark-table .ant-table-thead > tr > th {
  background: var(--ds-color-surface-container) !important;
  color: var(--ds-color-on-surface) !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-color-on-surface) !important;
}

.dark-table .ant-table-tbody > tr:hover > td {
  background: var(--ds-color-surface-container) !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-color-on-surface) !important;
}

.dark-table .ant-typography {
  color: var(--ds-color-on-surface) !important;
}

.dark-table .ant-space {
  color: var(--ds-color-on-surface) !important;
}

/* 分页器样式 */
.dark-table .ant-pagination {
  color: var(--ds-color-on-surface-variant) !important;
}

.dark-table .ant-pagination-item {
  background: var(--ds-color-surface-container) !important;
  border: 1px solid var(--color-border-strong) !important;
}

.dark-table .ant-pagination-item a {
  color: var(--ds-color-on-surface) !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-color-on-surface) !important;
}

.dark-table .ant-pagination-prev .ant-pagination-item-link,
.dark-table .ant-pagination-next .ant-pagination-item-link {
  background: var(--ds-color-surface-container) !important;
  border: 1px solid var(--color-border-strong) !important;
  color: var(--ds-color-on-surface-variant) !important;
}

.dark-table .ant-pagination-disabled .ant-pagination-item-link {
  color: var(--ds-color-on-surface-variant) !important;
}

.dark-table .ant-pagination-options {
  color: var(--ds-color-on-surface-variant) !important;
}

.dark-table .ant-select-selector {
  background: var(--ds-color-surface-container) !important;
  border: 1px solid var(--color-border-strong) !important;
  color: var(--ds-color-on-surface) !important;
}

.dark-table .ant-select-arrow {
  color: var(--ds-color-on-surface-variant) !important;
}

.dark-table .ant-select-selection-item {
  color: var(--ds-color-on-surface) !important;
}

/* 筛选器样式 */
.dark-table .ant-table-filter-trigger {
  color: var(--ds-color-on-surface-variant) !important;
}

.dark-table .ant-table-filter-trigger:hover {
  color: var(--ds-color-on-surface) !important;
}

.dark-table .ant-table-filter-trigger-container-open {
  background: var(--ds-color-surface-container) !important;
}

/* 排序图标 */
.dark-table .ant-table-column-sorter {
  color: var(--ds-color-on-surface-variant) !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-color-on-surface-variant) !important;
}

.dark-table .ant-empty-image svg {
  fill: var(--ds-color-outline-variant) !important;
}

/* 深色标签页样式 */
.ant-tabs {
  color: var(--ds-color-on-surface);
}

.ant-tabs .ant-tabs-tab {
  color: var(--ds-color-on-surface-variant);
  background: transparent;
  border: none;
}

.ant-tabs .ant-tabs-tab:hover {
  color: var(--ds-color-on-surface);
}

.ant-tabs .ant-tabs-tab.ant-tabs-tab-active {
  background: var(--color-primary);
  color: var(--ds-color-on-surface);
  border-radius: 8px 8px 0 0;
}

.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--ds-color-on-surface);
}

.ant-tabs .ant-tabs-ink-bar {
  background: var(--color-primary);
}

/* nav 底部间距保留 antd 默认（16px），勿压 0 —— 否则 tab 栏与内容贴在一起 */
.ant-tabs .ant-tabs-nav::before {
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

/* 深色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-color-on-surface) !important;
}

.ant-modal-body {
  color: var(--ds-color-on-surface) !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-color-on-surface-variant) !important;
}

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

/* 深色 Confirm 弹窗增强对比度 */
.ant-modal-confirm .ant-modal-confirm-title {
  color: var(--ds-color-on-surface) !important;
}

.ant-modal-confirm .ant-modal-confirm-content {
  color: var(--ds-color-on-surface-variant) !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-color-on-surface) !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-color-on-surface) !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-color-on-surface) !important;
}

.ant-input[style*="background: #1a1a2e"]::placeholder,
.ant-input-textarea[style*="background: #1a1a2e"] textarea::placeholder {
  color: var(--ds-color-on-surface-variant) !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-color-on-surface) !important;
  margin-bottom: 4px !important;
}

.ant-upload.ant-upload-drag p.ant-upload-hint {
  color: var(--ds-color-on-surface-variant) !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-color-on-surface) !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-color-on-surface);
}

.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-color-outline-variant);
}

.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-color-on-surface) !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-color-on-surface-variant);
  font-weight: 400;
}

.custom-tab-button.inactive:hover {
  color: var(--ds-color-on-surface);
}

/* 产品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-color-on-surface) !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-color-outline-variant);
  border-radius: 3px;
}

.ant-card-body::-webkit-scrollbar-thumb:hover {
  background: var(--ds-color-outline-variant);
}

/* 深色Input样式 */
.ant-input[style*="background: var(--color-bg-2)"],
.ant-input[type="datetime-local"][style*="background: var(--color-bg-2)"] {
  color: var(--ds-color-on-surface) !important;
  color-scheme: dark;
}

.ant-input[style*="background: var(--color-bg-2)"]::placeholder {
  color: var(--ds-color-on-surface-variant) !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样式（边框统一走 antd-overrides.css 的 outline-variant，
   此处只保留背景/文字，避免 --color-surface-4 深色边框与统一边框冲突） */
.ant-card {
  background: var(--color-surface) !important;
  color: var(--ds-color-on-surface) !important;
}

.ant-card-head {
  background: var(--color-surface) !important;
  color: var(--ds-color-on-surface) !important;
}

.ant-card-head-title {
  color: var(--ds-color-on-surface) !important;
}

.ant-card {
  border: none !important;
}
.ant-card-bordered {
  border: 1px solid var(--ds-color-outline-variant) !important;
}

/* 深色Typography样式 */
.ant-typography {
  color: var(--ds-color-on-surface) !important;
}

.ant-typography-secondary {
  color: var(--ds-color-on-surface-variant) !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-color-on-surface) !important;
}

.ant-dropdown-menu-item:hover,
.ant-dropdown-menu-submenu-title:hover {
  background: var(--ds-color-outline-variant) !important;
}

.ant-dropdown-menu-item-divider {
  background: var(--color-surface-4) !important;
}

.ant-dropdown-menu-title-content a {
  color: var(--ds-color-on-surface) !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-color-on-surface) !important;
}

.ant-select-item-option-selected {
  background: rgba(var(--color-primary-rgb), 0.2) !important;
}

.ant-select-item-option:hover {
  background: var(--ds-color-outline-variant) !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-color-on-surface) !important;
}

.ant-cascader-menu-item-content {
  color: var(--ds-color-on-surface) !important;
}

.ant-cascader-menu-item:hover {
  background: var(--ds-color-outline-variant) !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-color-on-surface-variant) !important;
}

.ant-cascader-menu-item-expand-icon,
.ant-cascader-menu-item-loading-icon {
  color: var(--ds-color-on-surface-variant) !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-color-on-surface) !important;
}

.ant-picker-cell:hover .ant-picker-cell-inner {
  background: var(--ds-color-outline-variant) !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-color-on-surface) !important;
}

.ant-picker-time-panel-cell:hover .ant-picker-time-panel-cell-inner {
  background: var(--ds-color-outline-variant) !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-color-on-surface) !important;
}

.ant-picker-time-panel-cell-disabled .ant-picker-time-panel-cell-inner {
  color: var(--ds-color-on-surface-variant) !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-color-on-surface) !important;
}

/* 深色Badge样式 */
.ant-badge-count {
  background: #ff4d4f !important;
  color: var(--ds-color-on-surface) !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-color-on-surface) !important;
}

.ant-btn-default:hover {
  background: var(--ds-color-outline-variant) !important;
  border-color: var(--color-primary) !important;
  color: var(--ds-color-on-surface) !important;
}

/* 深色Tag样式（边框统一 outline-variant，与 Card/Input/Button 一致） */
.ant-tag {
  border-color: var(--ds-color-outline-variant) !important;
}

/* 深色Divider样式（边框统一 outline-variant） */
.ant-divider {
  border-color: var(--ds-color-outline-variant) !important;
}

/* 深色Statistic样式 */
.ant-statistic-title {
  color: var(--ds-color-on-surface-variant) !important;
}

.ant-statistic-content {
  color: var(--ds-color-on-surface) !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-color-on-surface) !important;
}

.ant-alert-description {
  color: var(--ds-color-on-surface-variant) !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-color-on-surface-variant) !important;
}

.ant-empty-img-simple-path {
  fill: var(--ds-color-outline-variant) !important;
}

/* 深色Form样式 */
.ant-form-item-label > label {
  color: var(--ds-color-on-surface) !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-color-on-surface) !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-color-on-surface) !important;
  border-bottom-color: var(--color-surface-4) !important;
}

.ant-popover-inner-content {
  color: var(--ds-color-on-surface) !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-color-on-surface) !important;
}

.admin-logs-drawer .ant-drawer-close {
  color: var(--ds-color-on-surface-variant) !important;
}

.admin-logs-drawer .ant-descriptions-item-label {
  color: var(--ds-color-on-surface-variant) !important;
}

.admin-logs-drawer .ant-descriptions-item-content {
  color: var(--ds-color-on-surface) !important;
}

.admin-logs-drawer .ant-divider {
  border-color: var(--ds-color-on-surface-variant) !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-color-on-surface-variant) !important;
}

/* 深色Progress样式 */
.ant-progress-text {
  color: var(--ds-color-on-surface) !important;
}

/* 深色Steps样式 */
.ant-steps-item-title {
  color: var(--ds-color-on-surface) !important;
}

.ant-steps-item-description {
  color: var(--ds-color-on-surface-variant) !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-color-on-surface-variant) !important;
}

/* 深色Input全局样式（已迁移至 antd-overrides.css，此处删除避免 --color-surface-4
   暗色深灰边框与 antd Card/Button/Input 统一边框冲突） */

/* 深色Select全局样式（边框已迁移至 antd-overrides.css 统一为 outline-variant） */
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
  background: var(--color-surface) !important;
  border-color: var(--ds-color-outline-variant) !important;
  color: var(--ds-color-on-surface) !important;
}

.ant-select-arrow,
.ant-select-clear {
  color: var(--ds-color-on-surface-variant) !important;
}

.ant-select:hover .ant-select-selector {
  border-color: var(--ds-color-on-surface-variant) !important;
}

.ant-select-focused .ant-select-selector {
  border-color: var(--ds-color-primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-color-primary) 12%, transparent) !important;
}

.ant-select-selection-placeholder {
  color: var(--ds-color-on-surface-variant) !important;
}

.ant-select-selection-item {
  color: var(--ds-color-on-surface) !important;
}

.ant-select-selection-search-input {
  color: var(--ds-color-on-surface) !important;
}

/* 深色Switch样式 */
.ant-switch {
  background: var(--ds-color-outline-variant) !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-color-on-surface) !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-color-on-surface) !important;
}

.ant-upload.ant-upload-drag p.ant-upload-hint {
  color: var(--ds-color-on-surface-variant) !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-color-on-surface) !important;
}

.ant-upload-list-item:hover {
  background: var(--ds-color-surface-container) !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-color-on-surface-variant) !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-color-on-surface) !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-color-outline-variant) !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-color-outline-variant);
  background: var(--ds-color-surface-container);
}

.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-color-on-surface) !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-color-surface-container) !important;
  border-color: var(--ds-color-on-surface-variant) !important;
  color: var(--ds-color-on-surface) !important;
}

.payment-secondary-btn.ant-btn-default:hover {
  background: var(--ds-color-outline-variant) !important;
  border-color: rgba(var(--color-primary-accent-rgb), 0.55) !important;
}

.payment-qr-wrap {
  padding: 12px;
  border-radius: 14px;
  background: var(--ds-color-outline-variant);
  border: 1px solid var(--ds-color-outline-variant);
}

@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-color-surface);
  --color-surface: var(--ds-color-surface);
  --ds-color-surface-container: var(--ds-color-surface-container);
  --color-surface-3: var(--ds-color-surface-container);
  --color-surface-4: var(--ds-color-surface-container-high);
  background: var(--ds-color-surface);
}

/* ===== 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-color-surface);
  --color-surface: var(--ds-color-surface);
  --ds-color-surface-container: var(--ds-color-surface-container);
  --color-surface-3: var(--ds-color-surface-container);
  --color-surface-4: var(--ds-color-surface-container-high);
}

/* .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-color-surface-container);
  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-color-surface-container);
}

/* 模板卡片 */
.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-color-surface-container);
  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-color-outline-variant);
  backdrop-filter: blur(12px);
  border: 1px solid var(--ds-color-outline-variant);
  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-color-surface-container);
  color: var(--ds-color-on-surface-variant);
  border: 1px solid var(--ds-color-outline-variant);
  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-color-on-surface) !important;
  margin-bottom: 16px !important;
}
.vc-hero__sub {
  font-size: 18px;
  color: var(--ds-color-on-surface-variant);
  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-color-on-surface) !important;
  margin: 0 0 4px 0 !important;
}
.vc-section-sub {
  font-size: 12px;
  color: var(--ds-color-on-surface-variant);
}

/* 竖向步骤时间线 */
.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-color-on-surface-variant);
  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-color-on-surface);
}
.vc-timeline-step__line {
  flex: 1 1 0;
  width: 2px;
  background: var(--ds-color-outline-variant);
  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-color-on-surface-variant);
  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-color-on-surface);
}
.vc-timeline-step__desc {
  font-size: 14px;
  color: var(--ds-color-on-surface-variant);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Bento 编辑器面板 */
.vc-editor-outer {
  background: var(--ds-color-surface-container);
  border: 1px solid var(--ds-color-outline-variant);
  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-color-on-surface) !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-color-on-surface-variant) !important;
}

/* 产品面板 */
.vc-product-panel {
  background: var(--ds-color-surface-container);
  border-radius: 16px;
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 底部操作栏 */
.vc-action-bar {
  background: var(--ds-color-surface-container);
  backdrop-filter: blur(24px);
  border: 1px solid var(--ds-color-outline-variant);
  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-color-on-surface-variant);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2px;
  letter-spacing: 0.05em;
}
.vc-action-bar__meta-value {
  font-size: 14px;
  color: var(--ds-color-on-surface);
  font-weight: 700;
}
.vc-action-bar__divider {
  width: 1px;
  height: 32px;
  background: var(--ds-color-outline-variant);
}

/* 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-color-on-surface) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  color: var(--ds-color-surface) !important;
}
.vc-cta-btn--disabled.ant-btn {
  background: var(--ds-color-outline-variant) !important;
  color: var(--ds-color-on-surface-variant) !important;
}

/* 分镜场景行 */
.storyboard-scene {
  border: 1px solid var(--ds-color-outline-variant);
  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-color-on-surface) !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-color-on-surface-variant);
}

/* P2 视觉收尾：vc-page 内 antd primary button → ink-on-ink（spec §5 azure 稀疏） */
.vc-page .ant-btn-primary {
  background: var(--ds-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-surface) !important;
}
.vc-page .ant-btn-primary:hover {
  background: var(--ds-color-on-surface-variant) !important;
  border-color: var(--ds-color-on-surface-variant) !important;
  color: var(--ds-color-surface) !important;
}

/* 环境光晕 — 固定装饰 */
.vc-ambient {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
/* 通用 ink 按钮反制（从 PlacementCenterCard.css 提升到全局） */
.ant-btn-primary.dp-console-ink-btn {
  background: var(--ds-color-on-surface) !important;
  background-image: none !important;
  border-color: var(--ds-color-on-surface) !important;
  color: var(--ds-color-surface) !important;
  filter: none !important;
  box-shadow: none !important;
}
.ant-btn-primary.dp-console-ink-btn:hover,
.ant-btn-primary.dp-console-ink-btn:focus {
  background: #000000 !important;
  background-image: none !important;
  border-color: #000000 !important;
  color: var(--ds-color-on-surface) !important;
  filter: none !important;
  box-shadow: none !important;
}
.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-color-surface-container) !important;
  border-color: var(--ds-color-on-surface-variant) !important;
}
.doc-detail-page .ant-input-textarea {
  background: var(--ds-color-surface-container) !important;
  border-color: var(--ds-color-on-surface-variant) !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-color-on-surface);
  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-color-on-surface);
}
.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-color-on-surface);
}
.doc-markdown-preview strong {
  color: var(--ds-color-on-surface);
  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-color-on-surface-variant);
}
.doc-markdown-preview code {
  background: var(--ds-color-outline-variant);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}
.doc-markdown-preview pre {
  background: var(--ds-color-surface-container);
  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-color-outline-variant);
  padding: 8px 12px;
  text-align: left;
}
.doc-markdown-preview th {
  background: var(--ds-color-surface-container);
  font-weight: 700;
}
.doc-markdown-preview hr {
  border: none;
  border-top: 1px solid var(--ds-color-outline-variant);
  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-color-on-surface) !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-color-on-surface) !important;
  border-bottom: none !important;
}
.doc-md-editor-clean .wmde-markdown strong {
  color: var(--ds-color-on-surface) !important;
}
.doc-md-editor-clean .wmde-markdown li {
  color: var(--ds-color-on-surface) !important;
}
.doc-md-editor-clean .wmde-markdown blockquote {
  border-left-color: rgba(77, 166, 255, 0.4) !important;
  color: var(--ds-color-on-surface-variant) !important;
}
.doc-md-editor-clean .wmde-markdown code {
  background: var(--ds-color-outline-variant) !important;
}
.doc-md-editor-clean .wmde-markdown pre {
  background: var(--ds-color-surface-container) !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-color-outline-variant);
  border-radius: 3px;
}
.light-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--ds-color-outline-variant);
}
:root {
  color-scheme: light;

  /* — §A0  REFERENCE — base typefaces ———————————————————————————
   * 物理字体栈（Reference Level），方便未来一键更换字体。
   * Type scales 通过 --ds-font-*-family 间接引用这里。
   *
   * plain    — 全局默认字体（正文/表单/表格）：拉丁走系统栈，中文走系统字体
   *           （macOS 苹方 / Windows 微软雅黑），不额外打包，观感轻盈
   * brand    — 品牌/标题字体（display/headline/title 的 family），当前跟随 plain
   * code     — 等宽字体：代码、ID、数字/表格数值、时间戳等需对齐场景
   */
  --ds-typeface-plain: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI",
                       "PingFang SC", "Microsoft YaHei", sans-serif;
  --ds-typeface-brand: var(--ds-typeface-plain);
  --ds-typeface-code: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* — §A1  COLOR ———————————————————————————————————————————————
   * 调色板：Obsidian Warm Slate · 极简石墨黑 + 微暖瓷配饰（2026-08 Final Standard）
   */

  /* Primary — 主品牌色：关键组件与强调（M3: key components, active states）· 极简石墨黑 (Deep Obsidian Black)
   * primary                 主按钮/FAB 背景、选中态、焦点环
   * on-primary              主色之上的内容：主按钮文字/图标
   * primary-container       强调容器：导航选中指示、徽章/标签背景
   * on-primary-container    强调容器之上的内容
   * primary-fixed           固定强调色：明暗主题保持同色（替代 container 用于固定强调场景）
   * primary-fixed-dim       固定强调色深色调：更强调的固定容器/指示（明暗主题同色）
   */
  --ds-color-primary: #18181b;
  --ds-color-on-primary: #ffffff;
  --ds-color-primary-container: #f2f2f0;
  --ds-color-on-primary-container: #18181b;
  --ds-color-primary-fixed: #e4e4e1;
  --ds-color-primary-fixed-dim: #a3a39e;

  /* Secondary — 次强调色：次级交互（M3: filter chips 等低强调组件）· 石英暖灰中性 (Warm Quartz Slate Neutral)
   * secondary               次要按钮、链接、滑块、选中控件
   * on-secondary            次色之上的内容
   * secondary-container     次强调容器：tonal 按钮、分段控件/导航选中背景
   * on-secondary-container  次强调容器之上的内容
   */
  --ds-color-secondary: #52525b;
  --ds-color-on-secondary: #ffffff;
  --ds-color-secondary-container: #f8f8f7;
  --ds-color-on-secondary-container: #18181b;

  /* Tertiary — 第三强调色：差异化点缀（M3: decorative accents）· 石墨暖深灰 (Grounded Warm Slate Grey)
   * tertiary                与主/次区分开的强调：特殊标签、品牌点缀、输入框强调
   * on-tertiary             三色之上的内容
   * tertiary-container      第三强调容器：装饰性卡片/标签背景
   * on-tertiary-container   其上的内容
   */
  --ds-color-tertiary: #3f3f46;
  --ds-color-on-tertiary: #ffffff;
  --ds-color-tertiary-container: #f2f2f0;
  --ds-color-on-tertiary-container: #18181b;

  /* Error — 错误状态（M3: input validation errors）
   * error                   表单校验错误、错误文字/边框、危险操作按钮
   * on-error                错误色之上的内容
   * error-container         错误容器：错误横幅/提示条背景（比 error 低强调）
   * on-error-container      错误容器之上的内容
   */
  --ds-color-error: #dc2626;
  --ds-color-on-error: #ffffff;
  --ds-color-error-container: #fef2f2;
  --ds-color-on-error-container: #991b1b;

  /* Warning — 警告状态（非 M3 标准，业务扩展组）
   * warning                 警告文字/图标：待处理、风险提示
   * on-warning              警告色之上的内容
   * warning-container       警告容器：警告横幅/标签背景
   * on-warning-container    警告容器之上的内容
   */
  --ds-color-warning: #d97706;
  --ds-color-on-warning: #ffffff;
  --ds-color-warning-container: #fffbeb;
  --ds-color-on-warning-container: #92400e;

  /* Success — 成功状态（业务扩展组）
   * success                 成功文字/图标、正向数据（涨/提升）、成功按钮
   * on-success              成功色之上的内容
   * success-container       成功容器：成功横幅/标签背景
   * on-success-container    成功容器之上的内容
   */
  --ds-color-success: #059669;
  --ds-color-on-success: #ffffff;
  --ds-color-success-container: #ecfdf5;
  --ds-color-on-success-container: #065f46;

  /* Surface hierarchy — 背景层级（M3 tone-based surfaces，替代旧 elevation tint 模型）
   * 温润微暖灰 (Subtle Warm Grey Scale)：页面底微暖、卡片/弹层 lowest 白
   * surface                   页面主背景（应用最底层）
   * surface-container-lowest  最低强调容器：卡片主面、dialog、popover、下拉（白底 + 阴影抬升）
   * surface-container-low     低强调容器：次级卡片、嵌套内容块
   * surface-container         默认容器：常规列表区、顶栏/导航底
   * surface-container-high    高强调容器：抽屉、侧边栏
   * surface-container-highest 最高强调容器：深层嵌套、强分区底（非弹层主底）
   * surface-variant           表面变体：输入框填充底、图标按钮、弱标签底（与 highest 解耦）
   * on-surface                主内容色：正文、标题、主图标
   * on-surface-variant        次内容色：辅助文字、占位符、描述、次图标
   */
  --ds-color-surface: #ffffff;
  --ds-color-surface-container-lowest: #ffffff;
  /* 暖灰阶梯：浮层/主卡片用 lowest（白），嵌套与侧栏用 mid→high；highest 略浅避免发脏。
     顺序：#ffffff ≥ lowest > low > container > high > highest。 */
  --ds-color-surface-container-low: #f8f8f7;
  --ds-color-surface-container: #f2f2f0;
  --ds-color-surface-container-high: #ebebe8;
  --ds-color-surface-container-highest: #e4e4e1;
  --ds-color-surface-variant: #f0f0ed;
  --ds-color-on-surface: #18181b;
  --ds-color-on-surface-variant: #6e6e73;

  /* Outline — 边框/分隔线（微暖贴合）
   * outline                 强调边框：输入框描边、未选中态描边、强分隔线
   * outline-variant         弱化边框：卡片描边、低强调分隔线
   */
  --ds-color-outline: #a3a39e;
  --ds-color-outline-variant: #e4e4e0;

  /* Scrim / Shadow — 遮罩与阴影
   * scrim                   模态遮罩：弹窗/抽屉背后的半透明覆盖层
   * shadow                  阴影色：elevation 阴影的基础色
   */
  --ds-color-scrim: rgba(9, 9, 11, 0.45);
  --ds-color-shadow: rgba(9, 9, 11, 0.05);

  /* — §A2  TYPOGRAPHY ——————————————————————————————————————————
   * M3 type scales (15) × 5 properties (family/weight/size/
   * line-height/tracking).
   *
   * Convention: --ds-font-{scale}-{size}-{property}
   * Family mapping: Display/Headline → brand; Body/Label → plain
   *
   * display — 页面级特大标题：登录页、营销头图、数据大屏数值
   * headline — 区块级大标题：页面/模块标题
   * title — 卡片/区域标题：面板标题、导航标题、弹窗标题
   * body — 正文/表格/表单：段落、单元格、输入文本
   * label — 紧凑文本：按钮、标签、表头、胶囊、工具提示
   * code — 代码/等宽内容
   */

  /* ---- Display ------------------------------------------------- */
  --ds-font-display-large-family: var(--ds-typeface-brand);
  --ds-font-display-large-weight: 600;
  --ds-font-display-large-size: 3.5rem;
  --ds-font-display-large-line-height: 1.10;
  --ds-font-display-large-tracking: -0.025em;

  --ds-font-display-medium-family:      var(--ds-typeface-brand);
  --ds-font-display-medium-weight:      400;
  --ds-font-display-medium-size:        2.8125rem;
  --ds-font-display-medium-line-height: 1.16;
  --ds-font-display-medium-tracking:    -0.015em;

  --ds-font-display-small-family:       var(--ds-typeface-brand);
  --ds-font-display-small-weight:       400;
  --ds-font-display-small-size:         2.25rem;
  --ds-font-display-small-line-height:  1.20;
  --ds-font-display-small-tracking:     -0.01em;

  /* ---- Headline ------------------------------------------------ */
  --ds-font-headline-large-family: var(--ds-typeface-brand);
  --ds-font-headline-large-weight: 600;
  --ds-font-headline-large-size: 2rem;
  --ds-font-headline-large-line-height: 1.25;
  --ds-font-headline-large-tracking: -0.015em;

  --ds-font-headline-medium-family: var(--ds-typeface-brand);
  --ds-font-headline-medium-weight: 600;
  --ds-font-headline-medium-size: 1.5rem;
  --ds-font-headline-medium-line-height: 1.3;
  --ds-font-headline-medium-tracking: -0.01em;

  --ds-font-headline-small-family: var(--ds-typeface-brand);
  --ds-font-headline-small-weight: 600;
  --ds-font-headline-small-size: 1.25rem;
  --ds-font-headline-small-line-height: 1.35;
  --ds-font-headline-small-tracking: 0em;

  /* ---- Title --------------------------------------------------- */
  --ds-font-title-large-family: var(--ds-typeface-brand);
  --ds-font-title-large-weight: 600;
  --ds-font-title-large-size: 1.125rem;
  --ds-font-title-large-line-height: 1.4;
  --ds-font-title-large-tracking: -0.01em;

  --ds-font-title-medium-family: var(--ds-typeface-brand);
  --ds-font-title-medium-weight: 500;
  --ds-font-title-medium-size: 1rem;
  --ds-font-title-medium-line-height: 1.45;
  --ds-font-title-medium-tracking: 0em;

  --ds-font-title-small-family: var(--ds-typeface-brand);
  --ds-font-title-small-weight: 500;
  --ds-font-title-small-size: 0.875rem;
  --ds-font-title-small-line-height: 1.45;
  --ds-font-title-small-tracking: 0em;

  /* ---- Body ---------------------------------------------------- */
  --ds-font-body-large-family: var(--ds-typeface-plain);
  --ds-font-body-large-weight: 400;
  --ds-font-body-large-size: 1rem;
  --ds-font-body-large-line-height: 1.5;
  --ds-font-body-large-tracking: 0em;

  --ds-font-body-medium-family: var(--ds-typeface-plain);
  --ds-font-body-medium-weight: 400;
  --ds-font-body-medium-size: 0.875rem;
  --ds-font-body-medium-line-height: 1.5;
  --ds-font-body-medium-tracking: 0em;

  --ds-font-body-small-family: var(--ds-typeface-plain);
  --ds-font-body-small-weight: 400;
  --ds-font-body-small-size: 0.75rem;
  --ds-font-body-small-line-height: 1.4;
  --ds-font-body-small-tracking: 0em;

  /* ---- Label --------------------------------------------------- */
  --ds-font-label-large-family: var(--ds-typeface-plain);
  --ds-font-label-large-weight: 500;
  --ds-font-label-large-size: 0.875rem;
  --ds-font-label-large-line-height: 1.4;
  --ds-font-label-large-tracking: 0.01em;

  --ds-font-label-medium-family: var(--ds-typeface-plain);
  --ds-font-label-medium-weight: 500;
  --ds-font-label-medium-size: 0.75rem;
  --ds-font-label-medium-line-height: 1.35;
  --ds-font-label-medium-tracking: 0.02em;

  --ds-font-label-small-family: var(--ds-typeface-plain);
  --ds-font-label-small-weight: 500;
  --ds-font-label-small-size: 0.6875rem;
  --ds-font-label-small-line-height: 1.35;
  --ds-font-label-small-tracking: 0.03em;

  /* ---- Code (M3 extension) ------------------------------------- */
  --ds-font-code-medium-family: var(--ds-typeface-code);
  --ds-font-code-medium-weight: 400;
  --ds-font-code-medium-size: 0.8125rem;    /* 14px */
  --ds-font-code-medium-line-height: 1.3;     /* 20px */
  --ds-font-code-medium-tracking: 0em;

  /* — §A3  SHAPE —————————————————————————————————————————————— */
  /* corner-none — 无圆角：贴边对齐、标签内角
   * corner-extra-small — 极小小圆角：内嵌元素的微圆角
   * corner-small — 常规控件/小卡：按钮、输入框、chip
   * corner-medium — 卡片/弹窗/下拉：SaaS 默认卡片圆角
   * corner-large — 大卡/抽屉
   * corner-extra-large — 特大容器/引导页
   * corner-full — 全圆角：胶囊、圆形头像、开关
   */
  --ds-corner-none: 0px;
  --ds-corner-extra-small: 4px;
  --ds-corner-small: 6px;
  --ds-corner-medium: 10px;
  --ds-corner-large: 14px;
  --ds-corner-extra-large: 20px;
  --ds-corner-full: 9999px;

  /* — §A4  STATE & ELEVATION —————————————————————————————————— */
  /* state-hover-opacity — 悬停状态遮罩透明度
   * state-focus-opacity — 焦点状态遮罩透明度
   * state-pressed-opacity — 按压状态遮罩透明度
   * state-dragged-opacity — 拖拽状态遮罩透明度
   */
  --ds-state-hover-opacity:    0.08;
  --ds-state-focus-opacity:    0.12;
  --ds-state-pressed-opacity:  0.12;
  --ds-state-dragged-opacity:  0.16;

  /* elevation-0 — 无阴影：贴平元素
   * elevation-soft — 卡片轻描边环：内容/结果卡（design.md §7）
   * elevation-1 — 低层浮起：列表项、行内悬浮
   * elevation-2 — 中层浮起：卡片悬浮、操作条
   * elevation-3 — 浮层：菜单、工具提示、下拉
   * elevation-4 — 弹窗/抽屉
   * elevation-5 — 顶层浮层：全屏遮罩上的引导/确认
   */
  --ds-elevation-0: 0px;
  --ds-elevation-soft: 0 1px 2px 0 rgba(15, 23, 42, 0.03),
                       0 0 0 1px rgba(15, 23, 42, 0.06);
  --ds-elevation-1: 0 2px 4px -1px rgba(15, 23, 42, 0.04),
                     0 4px 12px -2px rgba(15, 23, 42, 0.05),
                     0 0 0 1px rgba(15, 23, 42, 0.07);
  --ds-elevation-2: 0 4px 6px -1px rgba(15, 23, 42, 0.05),
                     0 10px 24px -4px rgba(15, 23, 42, 0.08),
                     0 0 0 1px rgba(15, 23, 42, 0.08);
  --ds-elevation-3: 0 12px 28px -4px rgba(15, 23, 42, 0.12),
                     0 8px 10px -6px rgba(15, 23, 42, 0.05),
                     0 0 0 1px rgba(15, 23, 42, 0.09);
  --ds-elevation-4: 0 24px 48px -12px rgba(15, 23, 42, 0.18),
                     0 12px 16px -8px rgba(15, 23, 42, 0.06),
                     0 0 0 1px rgba(15, 23, 42, 0.1);
  --ds-elevation-5: 0 2px 6px 0 rgba(0,0,0,0.30),
                    0 16px 32px 12px rgba(0,0,0,0.15);

  /* — §A5  MOTION ————————————————————————————————————————————— */
  /* short — 微交互：hover/按下/焦点环/颜色过渡
   * medium — 常规动画：展开/折叠、面板切换
   * long — 大范围位移/页面级过渡
   */
  --ds-motion-short-1:  25ms;
  --ds-motion-short-2:  50ms;
  --ds-motion-short-3: 120ms;
  --ds-motion-short-4: 180ms;
  --ds-motion-medium-1: 240ms;
  --ds-motion-medium-2: 300ms;
  --ds-motion-medium-3: 350ms;
  --ds-motion-medium-4: 400ms;
  --ds-motion-long-1:   450ms;
  --ds-motion-long-2:   500ms;
  --ds-motion-long-3:   550ms;
  --ds-motion-long-4:   600ms;

  /* — §A6  EASING ————————————————————————————————————————————— */
  /* linear — 匀速：进度条等持续动画
   * standard — 默认缓动：大部分界面动画
   * decelerate — 进场（由快至慢）
   * accelerate — 退场（由慢至快）
   * emphasized / decelerate / accelerate — 强调型进出场：大元素/模态
   * emphasized-spring — 弹性强调：弹层、提示
   */
  --ds-easing-linear:       linear;
  --ds-easing-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ds-easing-accelerate:   cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ds-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ds-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --ds-easing-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
  --ds-easing-emphasized-spring:     cubic-bezier(0.2, 0.0, 0.0, 1.0);

  /* — §A7  SYS SPACE —————————————————————————————————————————— */
  /* xs — 4px：最紧间距（图标与文字、相邻控件）
   * sm — 8px：紧凑元素间距
   * md — 12px：常规元素间距
   * lg — 16px：区块间距、卡片内边距
   * xl — 24px：页面/区块留白
   * xxl — 32px：大区块间距
   * xxxl — 48px / 4xl — 64px / 5xl — 96px：页面级留白、大屏排版
   */
  --ds-sys-space-xs: 0.25rem;
  --ds-sys-space-sm: 0.5rem;
  --ds-sys-space-md: 0.75rem;
  --ds-sys-space-lg: 1rem;
  --ds-sys-space-xl: 1.5rem;
  --ds-sys-space-xxl: 2rem;
  --ds-sys-space-xxxl: 3rem;
  --ds-sys-space-4xl:  4rem;
  --ds-sys-space-5xl:  6rem;
}

/* ==================================================================
 * §A  DARK MODE
 * ================================================================== */

[data-theme="dark"] {
  color-scheme: dark;

  /* 颜色 token 仅换值，角色/用途语义与亮色组一致（见上方 §A1 注释） */

  /* Primary */
  --ds-color-primary: #f4f4f5;
  --ds-color-on-primary: #09090b;
  --ds-color-primary-container: #27272a;
  --ds-color-on-primary-container: #f4f4f5;
  --ds-color-primary-fixed: #3f3f46;
  --ds-color-primary-fixed-dim: #27272a;

  /* Secondary */
  --ds-color-secondary: #a1a1aa;
  --ds-color-on-secondary: #09090b;
  --ds-color-secondary-container: #27272a;
  --ds-color-on-secondary-container: #f4f4f5;

  /* Tertiary */
  --ds-color-tertiary: #71717a;
  --ds-color-on-tertiary: #ffffff;
  --ds-color-tertiary-container: #27272a;
  --ds-color-on-tertiary-container: #f4f4f5;

  /* Error */
  --ds-color-error: #f87171;
  --ds-color-on-error: #450a0a;
  --ds-color-error-container: #7f1d1d;
  --ds-color-on-error-container: #fecaca;

  /* Warning */
  --ds-color-warning: #fbbf24;
  --ds-color-on-warning: #451a03;
  --ds-color-warning-container: #78350f;
  --ds-color-on-warning-container: #fef3c7;

  /* Success */
  --ds-color-success: #34d399;
  --ds-color-on-success: #022c22;
  --ds-color-success-container: #065f46;
  --ds-color-on-success-container: #a7f3d0;

  /* Surface — #09090b Obsidian Warm Slate（Standard Dark Mode Support）
   * lowest 仍作弹层/卡片主面；variant 与 high 解耦 */
  --ds-color-surface: #09090b;
  --ds-color-surface-container-lowest: #121215;
  --ds-color-surface-container-low: #18181b;
  --ds-color-surface-container: #27272a;
  --ds-color-surface-container-high: #3f3f46;
  --ds-color-surface-container-highest: #71717a;
  --ds-color-surface-variant: #18181b;
  --ds-color-on-surface: #fafafa;
  --ds-color-on-surface-variant: #a1a1aa;

  /* Outline */
  --ds-color-outline: #27272a;
  --ds-color-outline-variant: #18181b;

  /* Scrim / Shadow */
  --ds-color-scrim: rgba(0, 0, 0, 0.75);
  --ds-color-shadow: rgba(0, 0, 0, 0.5);

  /* Elevation — dark mode */
  --ds-elevation-0: 0px;
  --ds-elevation-soft: 0 1px 2px 0 rgba(0, 0, 0, 0.4),
                       0 0 0 1px rgba(255, 255, 255, 0.08);
  --ds-elevation-1: 0 1px 3px 0 rgba(0,0,0,0.50),
                    0 1px 2px 0 rgba(0,0,0,0.30);
  --ds-elevation-2: 0 2px 6px 0 rgba(0,0,0,0.50),
                    0 1px 2px 0 rgba(0,0,0,0.30);
  --ds-elevation-3: 0 4px 8px 0 rgba(0,0,0,0.50),
                    0 2px 4px 0 rgba(0,0,0,0.30);
  --ds-elevation-4: 0 6px 14px 0 rgba(0,0,0,0.50),
                    0 3px 5px 0 rgba(0,0,0,0.30);
  --ds-elevation-5: 0 8px 18px 0 rgba(0,0,0,0.50),
                    0 4px 7px 0 rgba(0,0,0,0.30);
}
/* ==================================================================
 * ds-components.css — Deepege Design System Components
 * Built on design-token.css（tokens 先行引入）
 * 与 frontend/public/design-system.html 组件库预览内嵌副本保持同步
 * ================================================================== */

/* —— Base reset & body ———————————————————————————————————————— */
/* 使用场景：全局基础：reset 与 html/body 字体、背景。应用入口已引入，业务页勿重复覆盖。 */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--ds-typeface-plain);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
}

/* —— Utility ———————————————————————————————————————————————— */
/* 使用场景：布局小工具（ds-row / ds-stack / ds-label / ds-segment 等）：页面内排列、间距、标签。 */
.ds-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--ds-sys-space-xl) var(--ds-sys-space-lg);
}

.ds-section {
  margin-bottom: var(--ds-sys-space-xxxl);
}

.ds-section-title {
  font-family: var(--ds-font-headline-small-family);
  font-weight: var(--ds-font-headline-small-weight);
  font-size: var(--ds-font-headline-small-size);
  line-height: var(--ds-font-headline-small-line-height);
  letter-spacing: var(--ds-font-headline-small-tracking);
  color: var(--ds-color-on-surface);
  margin: 0 0 var(--ds-sys-space-lg);
  padding-bottom: var(--ds-sys-space-sm);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.ds-subsection {
  margin-bottom: var(--ds-sys-space-xl);
}

.ds-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sys-space-md);
  align-items: flex-start;
}

.ds-row-center {
  align-items: center;
}

.ds-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-md);
}

.ds-label {
  font-family: var(--ds-font-label-medium-family);
  font-weight: var(--ds-font-label-medium-weight);
  font-size: var(--ds-font-label-medium-size);
  line-height: var(--ds-font-label-medium-line-height);
  letter-spacing: var(--ds-font-label-medium-tracking);
  color: var(--ds-color-on-surface-variant);
  margin-bottom: var(--ds-sys-space-xs);
  display: block;
}

/* —— Typography showcase helpers ———————————————————————————— */
/* 使用场景：typo-* 排版展示类：仅供 design-system 预览；业务直接用 --ds-font-* token 或 ds-card-title 等。 */
.typo-display-large {
  font-family: var(--ds-font-display-large-family);
  font-weight: var(--ds-font-display-large-weight);
  font-size: var(--ds-font-display-large-size);
  line-height: var(--ds-font-display-large-line-height);
  letter-spacing: var(--ds-font-display-large-tracking);
}
.typo-display-medium {
  font-family: var(--ds-font-display-medium-family);
  font-weight: var(--ds-font-display-medium-weight);
  font-size: var(--ds-font-display-medium-size);
  line-height: var(--ds-font-display-medium-line-height);
  letter-spacing: var(--ds-font-display-medium-tracking);
}
.typo-display-small {
  font-family: var(--ds-font-display-small-family);
  font-weight: var(--ds-font-display-small-weight);
  font-size: var(--ds-font-display-small-size);
  line-height: var(--ds-font-display-small-line-height);
  letter-spacing: var(--ds-font-display-small-tracking);
}
.typo-headline-large {
  font-family: var(--ds-font-headline-large-family);
  font-weight: var(--ds-font-headline-large-weight);
  font-size: var(--ds-font-headline-large-size);
  line-height: var(--ds-font-headline-large-line-height);
  letter-spacing: var(--ds-font-headline-large-tracking);
}
.typo-headline-medium {
  font-family: var(--ds-font-headline-medium-family);
  font-weight: var(--ds-font-headline-medium-weight);
  font-size: var(--ds-font-headline-medium-size);
  line-height: var(--ds-font-headline-medium-line-height);
  letter-spacing: var(--ds-font-headline-medium-tracking);
}
.typo-headline-small {
  font-family: var(--ds-font-headline-small-family);
  font-weight: var(--ds-font-headline-small-weight);
  font-size: var(--ds-font-headline-small-size);
  line-height: var(--ds-font-headline-small-line-height);
  letter-spacing: var(--ds-font-headline-small-tracking);
}
.typo-title-large {
  font-family: var(--ds-font-title-large-family);
  font-weight: var(--ds-font-title-large-weight);
  font-size: var(--ds-font-title-large-size);
  line-height: var(--ds-font-title-large-line-height);
  letter-spacing: var(--ds-font-title-large-tracking);
}
.typo-title-medium {
  font-family: var(--ds-font-title-medium-family);
  font-weight: var(--ds-font-title-medium-weight);
  font-size: var(--ds-font-title-medium-size);
  line-height: var(--ds-font-title-medium-line-height);
  letter-spacing: var(--ds-font-title-medium-tracking);
}
.typo-title-small {
  font-family: var(--ds-font-title-small-family);
  font-weight: var(--ds-font-title-small-weight);
  font-size: var(--ds-font-title-small-size);
  line-height: var(--ds-font-title-small-line-height);
  letter-spacing: var(--ds-font-title-small-tracking);
}
.typo-body-large {
  font-family: var(--ds-font-body-large-family);
  font-weight: var(--ds-font-body-large-weight);
  font-size: var(--ds-font-body-large-size);
  line-height: var(--ds-font-body-large-line-height);
  letter-spacing: var(--ds-font-body-large-tracking);
}
.typo-body-medium {
  font-family: var(--ds-font-body-medium-family);
  font-weight: var(--ds-font-body-medium-weight);
  font-size: var(--ds-font-body-medium-size);
  line-height: var(--ds-font-body-medium-line-height);
  letter-spacing: var(--ds-font-body-medium-tracking);
}
.typo-body-small {
  font-family: var(--ds-font-body-small-family);
  font-weight: var(--ds-font-body-small-weight);
  font-size: var(--ds-font-body-small-size);
  line-height: var(--ds-font-body-small-line-height);
  letter-spacing: var(--ds-font-body-small-tracking);
}
.typo-label-large {
  font-family: var(--ds-font-label-large-family);
  font-weight: var(--ds-font-label-large-weight);
  font-size: var(--ds-font-label-large-size);
  line-height: var(--ds-font-label-large-line-height);
  letter-spacing: var(--ds-font-label-large-tracking);
}
.typo-label-medium {
  font-family: var(--ds-font-label-medium-family);
  font-weight: var(--ds-font-label-medium-weight);
  font-size: var(--ds-font-label-medium-size);
  line-height: var(--ds-font-label-medium-line-height);
  letter-spacing: var(--ds-font-label-medium-tracking);
}
.typo-label-small {
  font-family: var(--ds-font-label-small-family);
  font-weight: var(--ds-font-label-small-weight);
  font-size: var(--ds-font-label-small-size);
  line-height: var(--ds-font-label-small-line-height);
  letter-spacing: var(--ds-font-label-small-tracking);
}
.typo-code {
  font-family: var(--ds-font-code-medium-family);
  font-weight: var(--ds-font-code-medium-weight);
  font-size: var(--ds-font-code-medium-size);
  line-height: var(--ds-font-code-medium-line-height);
  letter-spacing: var(--ds-font-code-medium-tracking);
}

/* —— Color palette swatches ————————————————————————————————— */
/* 使用场景：调色板色块（ds-swatch*）：仅供 design-system.html 预览用，业务不使用。 */
.ds-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--ds-sys-space-md);
}

/* 整块色卡：背景 = 角色色，文字 = on-*（对照色） */
.ds-swatch {
  border-radius: var(--ds-corner-large);
  padding: var(--ds-sys-space-lg) var(--ds-sys-space-md);
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ds-sys-space-sm);
  box-shadow: var(--ds-elevation-soft);
}

.ds-swatch-name {
  font-family: var(--ds-font-title-small-family);
  font-weight: var(--ds-font-title-small-weight);
  font-size: var(--ds-font-title-small-size);
  line-height: 1.3;
  margin: 0;
  opacity: 0.95;
}

.ds-swatch-value {
  font-family: var(--ds-font-code-medium-family);
  font-size: var(--ds-font-body-small-size);
  margin: 0;
  opacity: 0.85;
}

/* 角色色卡：文字用对应 on-* token */
.ds-swatch--primary {
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
}
.ds-swatch--primary-container {
  background: var(--ds-color-primary-container);
  color: var(--ds-color-on-primary-container);
}
.ds-swatch--secondary {
  background: var(--ds-color-secondary);
  color: var(--ds-color-on-secondary);
}
.ds-swatch--secondary-container {
  background: var(--ds-color-secondary-container);
  color: var(--ds-color-on-secondary-container);
}
.ds-swatch--tertiary {
  background: var(--ds-color-tertiary);
  color: var(--ds-color-on-tertiary);
}
.ds-swatch--tertiary-container {
  background: var(--ds-color-tertiary-container);
  color: var(--ds-color-on-tertiary-container);
}
.ds-swatch--error {
  background: var(--ds-color-error);
  color: var(--ds-color-on-error);
}
.ds-swatch--error-container {
  background: var(--ds-color-error-container);
  color: var(--ds-color-on-error-container);
}
.ds-swatch--warning {
  background: var(--ds-color-warning);
  color: var(--ds-color-on-warning);
}
.ds-swatch--warning-container {
  background: var(--ds-color-warning-container);
  color: var(--ds-color-on-warning-container);
}
.ds-swatch--success {
  background: var(--ds-color-success);
  color: var(--ds-color-on-success);
}
.ds-swatch--success-container {
  background: var(--ds-color-success-container);
  color: var(--ds-color-on-success-container);
}
.ds-swatch--surface {
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  border: 1px solid var(--ds-color-outline-variant);
}
.ds-swatch--surface-low {
  background: var(--ds-color-surface-container-low);
  color: var(--ds-color-on-surface);
  border: 1px solid var(--ds-color-outline-variant);
}
.ds-swatch--surface-container {
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  border: 1px solid var(--ds-color-outline-variant);
}
.ds-swatch--surface-high {
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface);
  border: 1px solid var(--ds-color-outline-variant);
}
.ds-swatch--surface-highest {
  background: var(--ds-color-surface-container-highest);
  color: var(--ds-color-on-surface);
  border: 1px solid var(--ds-color-outline-variant);
}

/* —— Buttons ——————————————————————————————————————————————— */
/* 使用场景：按钮体系：primary 主操作 / secondary 次操作 / outline 描边 / ghost 文本 / warning 弱警示 / danger 危险 / danger-ghost 弱危险。页面与卡片内的动作入口统一用它。 */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sys-space-xs);
  font-family: var(--ds-font-label-large-family);
  font-weight: var(--ds-font-label-large-weight);
  font-size: var(--ds-font-label-large-size);
  line-height: var(--ds-font-label-large-line-height);
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  border-radius: var(--ds-corner-small);
  cursor: pointer;
  transition: all var(--ds-motion-short-3) var(--ds-easing-standard);
  white-space: nowrap;
  user-select: none;
  position: relative;
  outline: none;
}

.ds-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--ds-color-surface), 0 0 0 4px var(--ds-color-primary) !important;
}

.ds-btn:active:not(:disabled) {
  transform: scale(0.982) translateY(0.5px);
}

.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sizes */
.ds-btn--sm {
  height: 32px;
  padding: 0 var(--ds-sys-space-md);
  font-size: var(--ds-font-label-medium-size);
  border-radius: var(--ds-corner-extra-small);
}
.ds-btn--md {
  height: 40px;
  padding: 0 var(--ds-sys-space-lg);
}
.ds-btn--lg {
  height: 48px;
  padding: 0 var(--ds-sys-space-xl);
  font-size: 0.9375rem;
}

/* Variants — Primary (filled) */
.ds-btn--primary {
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.12);
}
.ds-btn--primary:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.18);
}
.ds-btn--primary:active:not(:disabled) {
  filter: brightness(0.96);
  box-shadow: none;
}

/* Secondary (tonal) */
.ds-btn--secondary {
  background: var(--ds-color-secondary-container);
  color: var(--ds-color-on-secondary-container);
}
.ds-btn--secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ds-color-secondary-container) 88%, var(--ds-color-on-secondary-container));
}
.ds-btn--secondary:active:not(:disabled) {
  background: color-mix(in srgb, var(--ds-color-secondary-container) 80%, var(--ds-color-on-secondary-container));
}

/* Tertiary / Outline */
.ds-btn--outline {
  background: transparent;
  color: var(--ds-color-primary);
  border: 1px solid var(--ds-color-outline);
}
.ds-btn--outline:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ds-color-primary) 8%, transparent);
  border-color: var(--ds-color-primary);
}
.ds-btn--outline:active:not(:disabled) {
  background: color-mix(in srgb, var(--ds-color-primary) 12%, transparent);
}

/* Ghost / Text */
.ds-btn--ghost {
  background: transparent;
  color: var(--ds-color-primary);
}
.ds-btn--ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ds-color-primary) 8%, transparent);
}
.ds-btn--ghost:active:not(:disabled) {
  background: color-mix(in srgb, var(--ds-color-primary) 12%, transparent);
}

/* Warning */
.ds-btn--warning {
  background: transparent;
  color: var(--ds-color-warning);
}
.ds-btn--warning:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ds-color-warning) 8%, transparent);
}
.ds-btn--warning:active:not(:disabled) {
  background: color-mix(in srgb, var(--ds-color-warning) 12%, transparent);
}

/* Danger ghost */
.ds-btn--danger-ghost {
  background: transparent;
  color: var(--ds-color-error);
}
.ds-btn--danger-ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ds-color-error) 8%, transparent);
}
.ds-btn--danger-ghost:active:not(:disabled) {
  background: color-mix(in srgb, var(--ds-color-error) 12%, transparent);
}

/* Danger */
.ds-btn--danger {
  background: var(--ds-color-error);
  color: var(--ds-color-on-error);
}
.ds-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ds-color-error) 88%, black);
}
.ds-btn--danger:active:not(:disabled) {
  background: color-mix(in srgb, var(--ds-color-error) 78%, black);
}

/* Icon only */
.ds-btn--icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--ds-corner-full);
}
.ds-btn--icon.ds-btn--sm {
  width: 32px;
  height: 32px;
}
.ds-btn--icon.ds-btn--lg {
  width: 48px;
  height: 48px;
}

/* —— Form fields (Input, Textarea, Search) —————————————————— */
/* 使用场景：表单控件：ds-input / ds-textarea / ds-search / ds-select / ds-dropdown-trigger 等，用于表单页、筛选区、搜索框。 */
.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-xs);
  width: 100%;
  max-width: 360px;
}

.ds-field-label {
  font-family: var(--ds-font-label-large-family);
  font-weight: var(--ds-font-label-large-weight);
  font-size: var(--ds-font-label-large-size);
  line-height: var(--ds-font-label-large-line-height);
  letter-spacing: var(--ds-font-label-large-tracking);
  color: var(--ds-color-on-surface);
}

.ds-field-hint {
  font-family: var(--ds-font-body-small-family);
  font-size: var(--ds-font-body-small-size);
  color: var(--ds-color-on-surface-variant);
}

.ds-field-error {
  font-family: var(--ds-font-body-small-family);
  font-size: var(--ds-font-body-small-size);
  color: var(--ds-color-error);
}

.ds-input,
.ds-textarea,
.ds-select {
  width: 100%;
  font-family: var(--ds-font-body-large-family);
  font-weight: var(--ds-font-body-large-weight);
  font-size: var(--ds-font-body-large-size);
  line-height: var(--ds-font-body-large-line-height);
  letter-spacing: var(--ds-font-body-large-tracking);
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container-lowest);
  border: 1px solid var(--ds-color-outline);
  border-radius: var(--ds-corner-small);
  padding: 0 var(--ds-sys-space-md);
  height: 40px;
  transition: all var(--ds-motion-short-3) var(--ds-easing-standard);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.ds-select option {
  background-color: var(--ds-color-surface-container-lowest);
  color: var(--ds-color-on-surface);
  padding: 8px 12px;
}

.ds-select option:checked,
.ds-select option:hover {
  background-color: var(--ds-color-primary-container);
  color: var(--ds-color-on-primary-container);
}

.ds-input::placeholder,
.ds-textarea::placeholder {
  color: var(--ds-color-on-surface-variant);
  opacity: 0.65;
}

.ds-input:hover:not(:disabled):not(:focus),
.ds-textarea:hover:not(:disabled):not(:focus),
.ds-select:hover:not(:disabled):not(:focus) {
  border-color: color-mix(in srgb, var(--ds-color-outline) 70%, var(--ds-color-on-surface));
}

.ds-input:focus,
.ds-textarea:focus,
.ds-select:focus {
  border-color: var(--ds-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-primary) 16%, transparent);
}

.ds-input:disabled,
.ds-textarea:disabled,
.ds-select:disabled {
  background: var(--ds-color-surface-container-low);
  color: var(--ds-color-on-surface-variant);
  cursor: not-allowed;
  opacity: 0.7;
}

.ds-input--error,
.ds-textarea--error,
.ds-select--error {
  border-color: var(--ds-color-error);
}
.ds-input--error:focus,
.ds-textarea--error:focus,
.ds-select--error:focus {
  border-color: var(--ds-color-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-error) 20%, transparent);
}

.ds-textarea {
  height: auto;
  min-height: 96px;
  padding: var(--ds-sys-space-md);
  resize: vertical;
}

/* Search box */
.ds-search {
  position: relative;
  width: 100%;
  max-width: 360px;
}

.ds-search .ds-input {
  padding-left: 40px;
}

.ds-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ds-color-on-surface-variant);
  pointer-events: none;
}

.ds-search .ds-input:focus + .ds-search-icon,
.ds-search:focus-within .ds-search-icon {
  color: var(--ds-color-primary);
}

/* Select / Dropdown */
.ds-select-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
}

.ds-select {
  padding-right: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.ds-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a5c99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Custom dropdown (for richer UI) */
.ds-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 280px;
}

.ds-dropdown-trigger {
  width: 100%;
  height: 40px;
  padding: 0 var(--ds-sys-space-md);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sys-space-sm);
  font-family: var(--ds-font-body-large-family);
  font-weight: var(--ds-font-body-large-weight);
  font-size: var(--ds-font-body-large-size);
  line-height: var(--ds-font-body-large-line-height);
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container-lowest);
  border: 1px solid var(--ds-color-outline);
  border-radius: var(--ds-corner-small);
  cursor: pointer;
  transition: all var(--ds-motion-short-3) var(--ds-easing-standard);
  outline: none;
}

.ds-dropdown-trigger:hover {
  border-color: color-mix(in srgb, var(--ds-color-outline) 70%, var(--ds-color-on-surface));
}

.ds-dropdown-trigger:focus-visible,
.ds-dropdown.open .ds-dropdown-trigger {
  border-color: var(--ds-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-primary) 16%, transparent);
}

.ds-dropdown-trigger .ds-dropdown-placeholder {
  color: var(--ds-color-on-surface-variant);
}

.ds-dropdown-trigger svg {
  flex-shrink: 0;
  color: var(--ds-color-on-surface-variant);
}

.ds-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--ds-color-surface-container-lowest);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  box-shadow: var(--ds-elevation-soft), var(--ds-elevation-2);
  padding: var(--ds-sys-space-xs);
  max-height: 240px;
  overflow-y: auto;
  display: none;
}

.ds-dropdown.open .ds-dropdown-menu {
  display: block;
  animation: ds-fade-in var(--ds-motion-short-4) var(--ds-easing-decelerate);
}

.ds-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-md);
  border-radius: var(--ds-corner-extra-small);
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
  color: var(--ds-color-on-surface);
  cursor: pointer;
  transition: background-color var(--ds-motion-short-2) var(--ds-easing-standard);
}

.ds-dropdown-item:hover {
  background: var(--ds-color-surface-container-low);
  color: var(--ds-color-on-surface);
}

.ds-dropdown-item[aria-selected="true"] {
  background: var(--ds-color-primary-container);
  color: var(--ds-color-on-primary-container);
}

.ds-dropdown-item:active {
  background: color-mix(in srgb, var(--ds-color-surface-container) 70%, var(--ds-color-primary-container));
}

.ds-menu-hint {
  margin-left: auto;
  padding-left: var(--ds-sys-space-md);
  font-family: var(--ds-font-body-small-family);
  font-size: var(--ds-font-body-small-size);
  color: var(--ds-color-on-surface-variant);
}

.ds-menu--anchor-right {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
}

/* —— Cards ————————————————————————————————————————————————— */
/* 使用场景：卡片容器：ds-card（白底描边卡）+ header/body/footer/title/subtitle/stats 结构；数据卡、账号卡、面板等业务容器首选。 */
.ds-card {
  background: var(--ds-color-surface-container-lowest);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  box-shadow: var(--ds-elevation-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--ds-motion-medium-1) var(--ds-easing-standard);
  position: relative;
}

.ds-card:hover {
  box-shadow: var(--ds-elevation-1);
}

.ds-card--elevated {
  box-shadow: var(--ds-elevation-2);
  border-color: transparent;
}

.ds-card--error {
  border-color: var(--ds-color-error);
}

.ds-card--dashed {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sys-space-sm);
  width: 100%;
  height: 100%;
  min-height: 200px;
  text-align: center;
}

.ds-card--dashed:hover {
  border-color: var(--ds-color-primary);
  box-shadow: none;
}

.ds-card--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ds-card--disabled:hover {
  box-shadow: none;
}

.ds-panel {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  background: var(--ds-color-surface);
}

.ds-card-header {
  padding: var(--ds-sys-space-lg) var(--ds-sys-space-lg) var(--ds-sys-space-sm);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sys-space-md);
}

.ds-card-title {
  font-family: var(--ds-font-title-medium-family);
  font-weight: var(--ds-font-title-medium-weight);
  font-size: var(--ds-font-title-medium-size);
  line-height: var(--ds-font-title-medium-line-height);
  letter-spacing: var(--ds-font-title-medium-tracking);
  color: var(--ds-color-on-surface);
  margin: 0;
}

.ds-card-subtitle {
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
  color: var(--ds-color-on-surface-variant);
  margin: 4px 0 0;
}

/* —— 平台豆腐块（授权选择 / 矩阵卡共用的平台 tile）———————————— */
/* 使用场景：平台 tile（授权选择 / 矩阵账号卡共用）：logo + 名称 + 状态 + 动作四行瓦片，授权弹窗与账号墙复用。 */
.ds-platform-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-sys-space-md);
  margin-top: var(--ds-sys-space-lg);
}

@media (max-width: 1199px) {
  .ds-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
  .ds-platform-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

.ds-platform-tile {
  min-height: 150px;
  display: grid;
  grid-template-rows: 34px auto 30px;
  align-items: center;
  justify-items: start;
  gap: var(--ds-sys-space-sm);
  padding: var(--ds-sys-space-md);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container);
  color: var(--ds-color-on-surface);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all var(--ds-motion-short-3) var(--ds-easing-standard);
}

.ds-platform-tile-head {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
  width: 100%;
  justify-self: stretch;
}

.ds-platform-tile:hover:not(:disabled) {
  border-color: var(--ds-color-on-surface);
  background: var(--ds-color-surface-container-high);
}

.ds-platform-tile:disabled {
  cursor: not-allowed;
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container);
  border-color: var(--ds-color-on-surface-variant);
}

.ds-platform-tile-logo {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-corner-small);
  overflow: hidden;
}

.ds-platform-tile-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ds-platform-tile-name {
  flex: 1;
  min-width: 0;
  font-family: var(--ds-font-title-small-family);
  font-weight: var(--ds-font-title-small-weight);
  font-size: var(--ds-font-title-small-size);
  color: var(--ds-color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-platform-tile-status {
  font-family: var(--ds-font-body-small-family);
  font-size: var(--ds-font-body-small-size);
  color: var(--ds-color-on-surface-variant);
}

.ds-platform-tile-action {
  font-family: var(--ds-font-body-small-family);
  font-size: var(--ds-font-body-small-size);
  font-weight: 500;
  color: var(--ds-color-primary);
}

.ds-card-body {
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-lg) var(--ds-sys-space-lg);
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
  line-height: var(--ds-font-body-medium-line-height);
  color: var(--ds-color-on-surface-variant);
}

.ds-card-footer {
  margin-top: auto;
  padding: var(--ds-sys-space-md) var(--ds-sys-space-lg);
  border-top: 1px solid var(--ds-color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-sys-space-sm);
  background: var(--ds-color-surface-container-low);
}

.ds-card-stats {
  display: flex;
  gap: var(--ds-sys-space-xl);
}

.ds-card-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ds-card-stat-label {
  font-family: var(--ds-font-body-small-family);
  font-size: var(--ds-font-body-small-size);
  color: var(--ds-color-on-surface-variant);
}

.ds-card-stat-value {
  font-family: var(--ds-typeface-code);
  font-size: var(--ds-font-title-large-size);
  font-weight: var(--ds-font-title-medium-weight);
  color: var(--ds-color-on-surface);
  font-variant-numeric: tabular-nums;
}

.ds-card-media {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: var(--ds-color-surface-container);
}

/* —— Badges / Chips / Tags —————————————————————————————————— */
/* 使用场景：状态徽标与 chip：在线/过期/待确认/托管等状态；publish 业务统一用 StatusChip（outline + 状态圆点）。 */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--ds-corner-full);
  font-family: var(--ds-font-label-small-family);
  font-weight: var(--ds-font-label-small-weight);
  font-size: var(--ds-font-label-small-size);
  line-height: 1;
  letter-spacing: var(--ds-font-label-small-tracking);
}

.ds-badge--primary {
  background: var(--ds-color-primary-container);
  color: var(--ds-color-on-primary-container);
}
.ds-badge--secondary {
  background: var(--ds-color-secondary-container);
  color: var(--ds-color-on-secondary-container);
}
.ds-badge--tertiary {
  background: var(--ds-color-tertiary-container);
  color: var(--ds-color-on-tertiary-container);
}
.ds-badge--error {
  background: var(--ds-color-error-container);
  color: var(--ds-color-on-error-container);
}
.ds-badge--warning {
  background: var(--ds-color-warning-container);
  color: var(--ds-color-on-warning-container);
}
.ds-badge--success {
  background: var(--ds-color-success-container);
  color: var(--ds-color-on-success-container);
}

.ds-badge--outline {
  background: transparent;
  border: 1px solid var(--ds-color-outline);
  color: var(--ds-color-on-surface-variant);
}

.ds-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ds-color-on-surface-variant);
}
.ds-badge-dot--success { background: var(--ds-color-success); }
.ds-badge-dot--error { background: var(--ds-color-error); }
.ds-badge-dot--warning { background: var(--ds-color-warning); }
.ds-badge-dot--primary { background: var(--ds-color-primary); }
.ds-badge-dot--neutral { background: var(--ds-color-on-surface-variant); }

.ds-badge--rank {
  width: 24px;
  height: 24px;
  padding: 0;
  justify-content: center;
  border-radius: var(--ds-corner-full);
  font-family: var(--ds-font-label-medium-family);
  font-weight: 600;
  font-size: var(--ds-font-label-medium-size);
  letter-spacing: 0;
}
.ds-badge--rank-1,
.ds-badge--rank-2,
.ds-badge--rank-3 {
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
}
.ds-badge--rank-n {
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface-variant);
  font-weight: 500;
}
.ds-badge--rank-label {
  height: 22px;
  padding: 0 10px;
  border-radius: var(--ds-corner-full);
  font-weight: 500;
}
.ds-badge--rank-label.is-1,
.ds-badge--rank-label.is-2,
.ds-badge--rank-label.is-3 {
  background: var(--ds-color-primary-container);
  color: var(--ds-color-on-primary-container);
}

/* —— Alerts / Banners —————————————————————————————————————— */
/* 使用场景：告警条：ds-alert--info/success/warning/error，用于横幅提示、待确认警示。 */
.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-md) var(--ds-sys-space-lg);
  border-radius: var(--ds-corner-medium);
  border: 1px solid transparent;
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
  line-height: var(--ds-font-body-medium-line-height);
}

.ds-alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.ds-alert--info {
  background: var(--ds-color-primary-container);
  color: var(--ds-color-on-primary-container);
  border-color: color-mix(in srgb, var(--ds-color-primary) 25%, transparent);
}
.ds-alert--success {
  background: var(--ds-color-success-container);
  color: var(--ds-color-on-success-container);
  border-color: color-mix(in srgb, var(--ds-color-success) 25%, transparent);
}
.ds-alert--warning {
  background: var(--ds-color-warning-container);
  color: var(--ds-color-on-warning-container);
  border-color: color-mix(in srgb, var(--ds-color-warning) 25%, transparent);
}
.ds-alert--error {
  background: var(--ds-color-error-container);
  color: var(--ds-color-on-error-container);
  border-color: color-mix(in srgb, var(--ds-color-error) 25%, transparent);
}

/* —— Checkbox / Radio / Switch ————————————————————————————— */
/* 使用场景：表单选择控件：复选、单选、开关。 */
.ds-check,
.ds-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
  color: var(--ds-color-on-surface);
  cursor: pointer;
  user-select: none;
}

.ds-check input,
.ds-radio input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ds-color-outline);
  border-radius: var(--ds-corner-extra-small);
  background: var(--ds-color-surface-container-lowest);
  cursor: pointer;
  transition: all var(--ds-motion-short-3) var(--ds-easing-standard);
  position: relative;
  flex-shrink: 0;
}

.ds-radio input {
  border-radius: var(--ds-corner-full);
}

.ds-check input:checked,
.ds-radio input:checked {
  background: var(--ds-color-primary);
  border-color: var(--ds-color-primary);
}

.ds-check input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid var(--ds-color-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ds-radio input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-color-on-primary);
}

.ds-check input:focus-visible,
.ds-radio input:focus-visible {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: 2px;
}

/* Switch */
.ds-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  cursor: pointer;
  user-select: none;
}

.ds-switch input {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 24px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-variant);
  position: relative;
  cursor: pointer;
  transition: background var(--ds-motion-short-4) var(--ds-easing-standard);
}

.ds-switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--ds-motion-short-4) var(--ds-easing-emphasized);
}

.ds-switch input:checked {
  background: var(--ds-color-primary);
}
.ds-switch input:checked::after {
  transform: translateX(16px);
}

.ds-switch input:focus-visible {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: 2px;
}

/* —— Tabs ——————————————————————————————————————————————————— */
/* 使用场景：分段 tab（ds-tabs/ds-tab）：作品墙、趋势指标等切换场景；复杂行为可用 antd Tabs 替代。 */
.ds-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.ds-tab {
  font-family: var(--ds-font-label-large-family);
  font-weight: var(--ds-font-label-large-weight);
  font-size: var(--ds-font-label-large-size);
  letter-spacing: var(--ds-font-label-large-tracking);
  color: var(--ds-color-on-surface-variant);
  background: transparent;
  border: none;
  padding: var(--ds-sys-space-md) var(--ds-sys-space-lg);
  cursor: pointer;
  position: relative;
  transition: color var(--ds-motion-short-3) var(--ds-easing-standard);
}

.ds-tab:hover {
  color: var(--ds-color-on-surface);
}

.ds-tab[aria-selected="true"] {
  color: var(--ds-color-primary);
}

.ds-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ds-color-primary);
  border-radius: 2px 2px 0 0;
}

/* —— Table (simple SaaS style) ————————————————————————————— */
/* 使用场景：简单表格（ds-table*）：轻量数据表格场景。 */
.ds-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  background: var(--ds-color-surface-container-lowest);
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
}

.ds-table th {
  text-align: left;
  padding: var(--ds-sys-space-md) var(--ds-sys-space-lg);
  font-family: var(--ds-font-label-medium-family);
  font-weight: 500;
  font-size: var(--ds-font-label-medium-size);
  letter-spacing: var(--ds-font-label-medium-tracking);
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container-low);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.ds-table td {
  padding: var(--ds-sys-space-md) var(--ds-sys-space-lg);
  border-bottom: 1px solid var(--ds-color-outline-variant);
  color: var(--ds-color-on-surface);
}

.ds-table tr:last-child td {
  border-bottom: none;
}

.ds-table tr:hover td {
  background: var(--ds-color-surface-container-low);
}

/* —— Avatar ———————————————————————————————————————————————— */
/* 使用场景：头像：用户/平台头像，含尺寸变体。 */
.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-primary-container);
  color: var(--ds-color-on-primary-container);
  font-family: var(--ds-font-label-large-family);
  font-weight: 500;
  font-size: var(--ds-font-label-large-size);
  overflow: hidden;
  flex-shrink: 0;
}

.ds-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.ds-avatar--lg { width: 56px; height: 56px; font-size: 1.125rem; }

.ds-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* —— Divider ——————————————————————————————————————————————— */
/* 使用场景：分割线：区块/列表分隔。 */
.ds-divider {
  height: 1px;
  background: var(--ds-color-outline-variant);
  border: none;
  margin: var(--ds-sys-space-lg) 0;
}

/* —— Tooltip (simple) —————————————————————————————————————— */
/* 使用场景：简单提示（ds-tooltip）：悬浮说明；复杂提示用 antd Tooltip。 */
.ds-tooltip {
  position: relative;
  display: inline-flex;
}

.ds-tooltip-content {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  font-family: var(--ds-font-label-medium-family);
  font-size: var(--ds-font-label-medium-size);
  padding: 6px 10px;
  border-radius: var(--ds-corner-extra-small);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ds-motion-short-3) var(--ds-easing-standard);
  z-index: 100;
}

.ds-tooltip:hover .ds-tooltip-content {
  opacity: 1;
}

/* —— Modal / Dialog shell —————————————————————————————————— */
/* 使用场景：弹窗骨架（ds-modal*）：确认、表单弹窗；业务确认弹窗统一走 DsConfirmModal（normal/danger/singleButton）。 */
.ds-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--ds-color-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ds-motion-medium-1) var(--ds-easing-standard);
}

.ds-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.ds-modal {
  background: var(--ds-color-surface-container-lowest);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-large);
  box-shadow: var(--ds-elevation-soft), var(--ds-elevation-4);
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.96);
  transition: transform var(--ds-motion-medium-1) var(--ds-easing-emphasized);
}

.ds-modal--wide {
  max-width: 768px;
}

.ds-modal-backdrop.open .ds-modal {
  transform: scale(1);
}

.ds-modal-header {
  padding: var(--ds-sys-space-lg) var(--ds-sys-space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ds-color-surface-container-lowest);
}

.ds-modal-title {
  font-family: var(--ds-font-title-large-family);
  font-weight: var(--ds-font-title-large-weight);
  font-size: var(--ds-font-title-large-size);
  color: var(--ds-color-on-surface);
  margin: 0;
}

.ds-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-xl);
  overflow-y: auto;
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
  color: var(--ds-color-on-surface-variant);
  background: var(--ds-color-surface-container-lowest);
}

.ds-modal-footer {
  padding: var(--ds-sys-space-md) var(--ds-sys-space-xl);
  border-top: 1px solid var(--ds-color-outline-variant);
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-sys-space-sm);
  background: var(--ds-color-surface-container-lowest);
}

/* —— Skeleton loading —————————————————————————————————————— */
/* 使用场景：加载骨架（ds-skeleton）：数据加载占位。 */
.ds-skeleton {
  background: linear-gradient(
    90deg,
    var(--ds-color-surface-container) 25%,
    var(--ds-color-surface-container-high) 50%,
    var(--ds-color-surface-container) 75%
  );
  background-size: 200% 100%;
  animation: ds-skeleton-shine 1.4s ease infinite;
  border-radius: var(--ds-corner-extra-small);
}

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

@keyframes ds-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* —— Link ———————————————————————————————————————————————— */
/* 使用场景：链接（ds-link）：行内文字链接。 */
.ds-link {
  color: var(--ds-color-primary);
  text-decoration: none;
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
  cursor: pointer;
  transition: opacity var(--ds-motion-short-3) var(--ds-easing-standard);
}
.ds-link:hover { text-decoration: underline; opacity: 0.85; }
.ds-link--muted {
  color: var(--ds-color-on-surface-variant);
}
.ds-link--muted:hover { color: var(--ds-color-primary); }

/* —— Button loading ————————————————————————————————————— */
/* 使用场景：按钮加载态（.ds-btn.is-loading）：提交/发布中的按钮内嵌 loading。 */
.ds-btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.ds-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ds-spin 0.7s linear infinite;
  border-color: rgba(255,255,255,0.35);
  border-top-color: #fff;
  left: 50%; top: 50%;
  margin: -8px 0 0 -8px;
}
.ds-btn--outline.is-loading::after,
.ds-btn--ghost.is-loading::after,
.ds-btn--secondary.is-loading::after {
  border-color: color-mix(in srgb, var(--ds-color-primary) 30%, transparent);
  border-top-color: var(--ds-color-primary);
}

/* —— Toast / Snackbar ———————————————————————————————————— */
/* 使用场景：轻提示（ds-toast*）：操作反馈；复杂场景可用 antd message。 */
.ds-toast-host {
  position: fixed;
  bottom: var(--ds-sys-space-xl);
  right: var(--ds-sys-space-xl);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--ds-sys-space-sm);
  max-width: 360px;
  pointer-events: none;
}
.ds-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-md) var(--ds-sys-space-lg);
  background: var(--ds-color-surface-container-lowest);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  box-shadow: var(--ds-elevation-soft), var(--ds-elevation-3);
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
  color: var(--ds-color-on-surface);
  animation: ds-fade-in var(--ds-motion-short-4) var(--ds-easing-decelerate);
}
.ds-toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.ds-toast--success .ds-toast-icon { color: var(--ds-color-success); }
.ds-toast--error .ds-toast-icon { color: var(--ds-color-error); }
.ds-toast--warning .ds-toast-icon { color: var(--ds-color-warning); }
.ds-toast--info .ds-toast-icon { color: var(--ds-color-primary); }
.ds-toast-msg { flex: 1; }
.ds-toast-close {
  background: none; border: none; cursor: pointer;
  color: var(--ds-color-on-surface-variant); padding: 0; line-height: 1;
  font-size: 18px;
}

/* —— Pagination ————————————————————————————————————————— */
/* 使用场景：分页（ds-pagination）：列表分页。 */
.ds-pagination {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-xs);
}
.ds-page-btn {
  min-width: 36px; height: 36px;
  padding: 0 var(--ds-sys-space-sm);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-extra-small);
  background: var(--ds-color-surface-container-lowest);
  color: var(--ds-color-on-surface);
  font-family: var(--ds-font-label-medium-family);
  font-size: var(--ds-font-label-medium-size);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--ds-motion-short-2) var(--ds-easing-standard);
}
.ds-page-btn:hover:not(:disabled):not([aria-current="page"]) {
  background: var(--ds-color-surface-container-low);
}
.ds-page-btn[aria-current="page"] {
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  border-color: var(--ds-color-primary);
}
.ds-page-btn:disabled {
  opacity: 0.38; cursor: not-allowed;
}

/* —— Breadcrumb ————————————————————————————————————————— */
/* 使用场景：面包屑（ds-breadcrumb，支持 button 形态）：层级导航；页面标题区内嵌用 ds-page-header--breadcrumb。 */
.ds-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--ds-sys-space-xs);
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
  color: var(--ds-color-on-surface-variant);
  list-style: none; margin: 0; padding: 0;
}
.ds-breadcrumb li { display: inline-flex; align-items: center; gap: var(--ds-sys-space-xs); }
.ds-breadcrumb a {
  color: var(--ds-color-on-surface-variant);
  text-decoration: none;
}
.ds-breadcrumb a:hover { color: var(--ds-color-primary); }
.ds-breadcrumb button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  line-height: inherit;
  color: var(--ds-color-on-surface-variant);
  cursor: pointer;
}
.ds-breadcrumb button:hover { color: var(--ds-color-primary); }
.ds-breadcrumb [aria-current="page"] {
  color: var(--ds-color-on-surface);
  font-weight: 500;
}
.ds-breadcrumb-sep { opacity: 0.5; user-select: none; }

/* —— App shell: Top bar + Sidebar ——————————————————————— */
/* 使用场景：页面标题区（ds-page-header*）与侧栏结构：模块页通栏标题（左筛选/中标题/右操作）与侧栏壳样式。 */
.ds-page-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-md) var(--ds-sys-space-xl);
  background: var(--ds-color-surface-container);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.ds-page-header-left {
  display: flex;
  align-items: center;
  gap: var(--ds-sys-space-sm);
  min-width: 0;
}

.ds-page-header-title {
  font-family: var(--ds-font-title-medium-family);
  font-weight: var(--ds-font-title-medium-weight);
  font-size: var(--ds-font-title-medium-size);
  letter-spacing: var(--ds-font-title-medium-tracking);
  color: var(--ds-color-on-surface);
  margin: 0;
  text-align: center;
}

.ds-page-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-sys-space-sm);
}

.ds-page-header--breadcrumb {
  grid-template-columns: 1fr;
}

.ds-page-header--breadcrumb .ds-breadcrumb {
  font-family: var(--ds-font-title-medium-family);
  font-weight: var(--ds-font-title-medium-weight);
  font-size: var(--ds-font-title-medium-size);
  line-height: var(--ds-font-title-medium-line-height);
  letter-spacing: var(--ds-font-title-medium-tracking);
}

.ds-app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  min-height: 320px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  overflow: hidden;
  background: var(--ds-color-surface);
}
.ds-topbar {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--ds-sys-space-lg);
  background: var(--ds-color-surface-container-lowest);
  border-bottom: 1px solid var(--ds-color-outline-variant);
  gap: var(--ds-sys-space-md);
}
.ds-topbar-brand {
  font-family: var(--ds-font-title-medium-family);
  font-weight: 600;
  font-size: var(--ds-font-title-medium-size);
  color: var(--ds-color-on-surface);
  display: flex; align-items: center; gap: var(--ds-sys-space-sm);
}
.ds-topbar-actions {
  display: flex; align-items: center; gap: var(--ds-sys-space-sm);
}
.ds-sidebar {
  background: var(--ds-color-surface-container-low);
  border-right: 1px solid var(--ds-color-outline-variant);
  padding: var(--ds-sys-space-md) var(--ds-sys-space-sm);
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
}
.ds-nav-group {
  font-family: var(--ds-font-label-small-family);
  font-size: var(--ds-font-label-small-size);
  font-weight: 500;
  letter-spacing: var(--ds-font-label-small-tracking);
  color: var(--ds-color-on-surface-variant);
  padding: var(--ds-sys-space-md) var(--ds-sys-space-md) var(--ds-sys-space-xs);
  text-transform: uppercase;
}
.ds-nav-item {
  display: flex; align-items: center; gap: var(--ds-sys-space-sm);
  padding: var(--ds-sys-space-sm) var(--ds-sys-space-md);
  border-radius: var(--ds-corner-small);
  border: none; background: transparent;
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
  color: var(--ds-color-on-surface);
  cursor: pointer; text-align: left; width: 100%;
  transition: background var(--ds-motion-short-2) var(--ds-easing-standard);
}
.ds-nav-item:hover { background: var(--ds-color-surface-container); }
.ds-nav-item[aria-current="page"] {
  background: var(--ds-color-primary-container);
  color: var(--ds-color-on-primary-container);
  font-weight: 500;
}
.ds-nav-item svg { flex-shrink: 0; opacity: 0.8; }
.ds-shell-main {
  padding: var(--ds-sys-space-lg);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface-variant);
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
}

/* —— Drawer ————————————————————————————————————————————— */
/* 使用场景：抽屉（ds-drawer*）：侧滑面板。 */
.ds-drawer-backdrop {
  position: fixed; inset: 0;
  background: var(--ds-color-scrim);
  z-index: 2000;
  opacity: 0; visibility: hidden;
  transition: opacity var(--ds-motion-medium-1) var(--ds-easing-standard);
}
.ds-drawer-backdrop.open { opacity: 1; visibility: visible; }
.ds-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(360px, 90vw);
  background: var(--ds-color-surface-container-lowest);
  box-shadow: var(--ds-elevation-4);
  z-index: 2001;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--ds-motion-medium-2) var(--ds-easing-emphasized);
}
.ds-drawer-backdrop.open .ds-drawer { transform: translateX(0); }
.ds-drawer-header {
  padding: var(--ds-sys-space-lg) var(--ds-sys-space-xl);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--ds-color-outline-variant);
}
.ds-drawer-title {
  font-family: var(--ds-font-title-large-family);
  font-weight: var(--ds-font-title-large-weight);
  font-size: var(--ds-font-title-large-size);
  margin: 0; color: var(--ds-color-on-surface);
}
.ds-drawer-body {
  padding: var(--ds-sys-space-xl);
  overflow-y: auto; flex: 1;
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
  color: var(--ds-color-on-surface-variant);
}
.ds-drawer-footer {
  padding: var(--ds-sys-space-md) var(--ds-sys-space-xl);
  border-top: 1px solid var(--ds-color-outline-variant);
  display: flex; justify-content: flex-end; gap: var(--ds-sys-space-sm);
}

/* —— Accordion —————————————————————————————————————————— */
/* 使用场景：手风琴（ds-accordion*）：可折叠内容区。 */
.ds-accordion {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  overflow: hidden;
  background: var(--ds-color-surface-container-lowest);
}
.ds-accordion-item + .ds-accordion-item {
  border-top: 1px solid var(--ds-color-outline-variant);
}
.ds-accordion-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-md) var(--ds-sys-space-lg);
  background: transparent; border: none; cursor: pointer; text-align: left;
  font-family: var(--ds-font-title-small-family);
  font-weight: var(--ds-font-title-small-weight);
  font-size: var(--ds-font-title-small-size);
  color: var(--ds-color-on-surface);
}
.ds-accordion-trigger:hover { background: var(--ds-color-surface-container-low); }
.ds-accordion-trigger svg {
  transition: transform var(--ds-motion-short-4) var(--ds-easing-standard);
  color: var(--ds-color-on-surface-variant);
}
.ds-accordion-item.open .ds-accordion-trigger svg { transform: rotate(180deg); }
.ds-accordion-panel {
  display: none;
  padding: 0 var(--ds-sys-space-lg) var(--ds-sys-space-lg);
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
  color: var(--ds-color-on-surface-variant);
  line-height: 1.5;
}
.ds-accordion-item.open .ds-accordion-panel { display: block; }

/* —— Empty state ———————————————————————————————————————— */
/* 使用场景：空态（ds-empty*）：无数据占位。 */
.ds-empty {
  text-align: center;
  padding: var(--ds-sys-space-xxxl) var(--ds-sys-space-xl);
  background: var(--ds-color-surface-container-lowest);
  border: 1px dashed var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
}
.ds-empty-icon {
  width: 48px; height: 48px; margin: 0 auto var(--ds-sys-space-md);
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-primary-container);
  color: var(--ds-color-on-primary-container);
  display: flex; align-items: center; justify-content: center;
}
.ds-empty-title {
  font-family: var(--ds-font-title-medium-family);
  font-weight: var(--ds-font-title-medium-weight);
  font-size: var(--ds-font-title-medium-size);
  color: var(--ds-color-on-surface);
  margin: 0 0 var(--ds-sys-space-xs);
}
.ds-empty-desc {
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
  color: var(--ds-color-on-surface-variant);
  margin: 0 0 var(--ds-sys-space-lg);
  max-width: 320px; margin-left: auto; margin-right: auto;
}

/* —— Stepper ———————————————————————————————————————————— */
/* 使用场景：步骤条（ds-stepper*）：多步流程。 */
.ds-stepper {
  display: flex; align-items: flex-start; width: 100%;
}
.ds-step {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  position: relative; text-align: center;
}
.ds-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px; left: calc(50% + 18px); right: calc(-50% + 18px);
  height: 2px;
  background: var(--ds-color-outline-variant);
}
.ds-step.is-done:not(:last-child)::after,
.ds-step.is-active:not(:last-child)::after {
  background: var(--ds-color-primary);
}
.ds-step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ds-font-label-medium-family);
  font-size: var(--ds-font-label-medium-size);
  font-weight: 500;
  background: var(--ds-color-surface-container-high);
  color: var(--ds-color-on-surface-variant);
  border: 2px solid transparent;
  z-index: 1;
}
.ds-step.is-done .ds-step-dot {
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
}
.ds-step.is-active .ds-step-dot {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-container);
  color: var(--ds-color-on-primary-container);
}
.ds-step-label {
  margin-top: var(--ds-sys-space-sm);
  font-family: var(--ds-font-label-medium-family);
  font-size: var(--ds-font-label-medium-size);
  color: var(--ds-color-on-surface-variant);
}
.ds-step.is-active .ds-step-label,
.ds-step.is-done .ds-step-label {
  color: var(--ds-color-on-surface);
  font-weight: 500;
}

/* —— Segmented control ————————————————————————————————— */
/* 使用场景：分段控件（ds-segmented*）：互斥分段选择；建议优先 antd Segmented。 */
.ds-segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--ds-color-surface-container);
  border-radius: var(--ds-corner-small);
  gap: 2px;
}
.ds-segment {
  border: none; background: transparent; cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--ds-corner-extra-small);
  font-family: var(--ds-font-label-large-family);
  font-size: var(--ds-font-label-large-size);
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  transition: background var(--ds-motion-short-2) var(--ds-easing-standard),
              color var(--ds-motion-short-2) var(--ds-easing-standard);
}
.ds-segment:hover { color: var(--ds-color-on-surface); }
.ds-segment[aria-selected="true"] {
  background: var(--ds-color-surface-container-lowest);
  color: var(--ds-color-on-surface);
  box-shadow: var(--ds-elevation-soft);
}

/* —— List item —————————————————————————————————————————— */
/* 使用场景：列表项（ds-list-item*）：简单列表结构。 */
.ds-list {
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  overflow: hidden;
  background: var(--ds-color-surface-container-lowest);
}
.ds-list-item {
  display: flex; align-items: center; gap: var(--ds-sys-space-md);
  padding: var(--ds-sys-space-md) var(--ds-sys-space-lg);
  border-bottom: 1px solid var(--ds-color-outline-variant);
  cursor: pointer;
  transition: background var(--ds-motion-short-2) var(--ds-easing-standard);
}
.ds-list-item:last-child { border-bottom: none; }
.ds-list-item:hover { background: var(--ds-color-surface-container-low); }
.ds-list-item-body { flex: 1; min-width: 0; }
.ds-list-item-title {
  font-family: var(--ds-font-title-small-family);
  font-weight: 500;
  font-size: var(--ds-font-title-small-size);
  color: var(--ds-color-on-surface);
  margin: 0;
}
.ds-list-item-desc {
  font-family: var(--ds-font-body-small-family);
  font-size: var(--ds-font-body-small-size);
  color: var(--ds-color-on-surface-variant);
  margin: 2px 0 0;
}

/* —— Slider ———————————————————————————————————————————— */
/* 使用场景：滑块（ds-slider*）：数值范围选择。 */
.ds-slider-wrap {
  display: flex; flex-direction: column; gap: var(--ds-sys-space-xs);
  max-width: 320px;
}
.ds-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-surface-container-high);
  outline: none;
}
.ds-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ds-color-primary);
  border: 2px solid var(--ds-color-surface-container-lowest);
  box-shadow: var(--ds-elevation-1);
  cursor: pointer;
}
.ds-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ds-color-primary);
  border: 2px solid var(--ds-color-surface-container-lowest);
  cursor: pointer;
}

/* —— File upload ——————————————————————————————————————— */
/* 使用场景：上传（ds-upload*）：文件上传区。 */
.ds-upload {
  border: 1.5px dashed var(--ds-color-outline);
  border-radius: var(--ds-corner-medium);
  padding: var(--ds-sys-space-xl);
  text-align: center;
  background: var(--ds-color-surface-container-lowest);
  transition: border-color var(--ds-motion-short-3) var(--ds-easing-standard),
              background var(--ds-motion-short-3) var(--ds-easing-standard);
  cursor: pointer;
}
.ds-upload:hover,
.ds-upload.is-dragover {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-container);
}
.ds-upload-title {
  font-family: var(--ds-font-title-small-family);
  font-weight: 500;
  color: var(--ds-color-on-surface);
  margin: 0 0 4px;
}
.ds-upload-hint {
  font-family: var(--ds-font-body-small-family);
  font-size: var(--ds-font-body-small-size);
  color: var(--ds-color-on-surface-variant);
  margin: 0;
}

/* —— Chips / multi tags ————————————————————————————————— */
/* 使用场景：多标签 chip（ds-chip*）：标签输入与展示。 */
.ds-chip-input {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 40px;
  padding: 6px var(--ds-sys-space-sm);
  border: 1px solid var(--ds-color-outline);
  border-radius: var(--ds-corner-small);
  background: var(--ds-color-surface-container-lowest);
  max-width: 400px;
}
.ds-chip-input:focus-within {
  border-color: var(--ds-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-primary) 20%, transparent);
}
.ds-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 8px 0 10px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-secondary-container);
  color: var(--ds-color-on-secondary-container);
  font-family: var(--ds-font-label-medium-family);
  font-size: var(--ds-font-label-medium-size);
  font-weight: 500;
}
.ds-chip-remove {
  border: none; background: transparent; cursor: pointer;
  color: inherit; opacity: 0.7; padding: 0; line-height: 1;
  font-size: 14px;
}
.ds-chip-remove:hover { opacity: 1; }
.ds-chip-input input {
  border: none; outline: none; background: transparent;
  flex: 1; min-width: 80px;
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
  color: var(--ds-color-on-surface);
}

/* —— Popover ———————————————————————————————————————————— */
/* 使用场景：气泡（ds-popover*）：轻量浮层。 */
.ds-popover-wrap { position: relative; display: inline-block; }
.ds-popover {
  position: absolute;
  top: calc(100% + 8px); left: 0;
  min-width: 200px;
  padding: var(--ds-sys-space-md);
  background: var(--ds-color-surface-container-lowest);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  box-shadow: var(--ds-elevation-soft), var(--ds-elevation-3);
  z-index: 50;
  display: none;
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
  color: var(--ds-color-on-surface-variant);
}
.ds-popover-wrap.open .ds-popover { display: block; animation: ds-fade-in var(--ds-motion-short-4) var(--ds-easing-decelerate); }

/* —— Context menu —————————————————————————————————————— */
/* 使用场景：右键菜单（ds-menu*）：操作菜单浮层。 */
.ds-menu {
  min-width: 220px;
  padding: var(--ds-sys-space-xs);
  background: var(--ds-color-surface-container-lowest);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: var(--ds-corner-medium);
  box-shadow: var(--ds-elevation-soft), var(--ds-elevation-3);
}
.ds-menu-item {
  display: flex; align-items: center; gap: var(--ds-sys-space-sm);
  width: 100%; padding: var(--ds-sys-space-sm) var(--ds-sys-space-md);
  border: none; background: transparent; cursor: pointer; text-align: left;
  border-radius: var(--ds-corner-extra-small);
  font-family: var(--ds-font-body-medium-family);
  font-size: var(--ds-font-body-medium-size);
  color: var(--ds-color-on-surface);
}
.ds-menu-item:hover { background: var(--ds-color-surface-container-low); }
.ds-menu-item--danger { color: var(--ds-color-error); }
.ds-menu-item--danger:hover { background: var(--ds-color-error-container); }
.ds-menu-sep {
  height: 1px; background: var(--ds-color-outline-variant);
  margin: var(--ds-sys-space-xs) 0; border: none;
}

/* —— Notification badge on icon ————————————————————————— */
/* 使用场景：图标角标（ds-notif-dot）：未读数提示。 */
.ds-icon-btn {
  position: relative;
  width: 40px; height: 40px;
  border-radius: var(--ds-corner-full);
  border: none; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ds-color-on-surface);
}
.ds-icon-btn:hover { background: var(--ds-color-surface-container); }
.ds-notif-dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ds-color-error);
  border: 2px solid var(--ds-color-surface-container-lowest);
}
.ds-notif-count {
  position: absolute; top: 4px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--ds-corner-full);
  background: var(--ds-color-error);
  color: var(--ds-color-on-error);
  font-family: var(--ds-font-label-small-family);
  font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ds-color-surface-container-lowest);
}

/* —— Theme toggle bar —————————————————————————————————————— */
/* 使用场景：主题切换条（ds-theme-bar*）：浅/深色切换控件。 */
.ds-theme-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-sys-space-md) var(--ds-sys-space-lg);
  background: var(--ds-color-surface-container);
  border-bottom: 1px solid var(--ds-color-outline-variant);
  backdrop-filter: blur(8px);
}

.ds-theme-bar-title {
  font-family: var(--ds-font-title-medium-family);
  font-weight: var(--ds-font-title-medium-weight);
  font-size: var(--ds-font-title-medium-size);
  margin: 0;
}

/* —— Grid helpers for demo ————————————————————————————————— */
/* 使用场景：网格辅助（ds-grid-2/3/4）：固定列布局，账号墙、双栏面板等精确分栏场景。 */
.ds-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ds-sys-space-lg);
}

.ds-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ds-sys-space-lg);
}

.ds-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-sys-space-lg);
}

@media (max-width: 1199px) {
  .ds-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
  .ds-grid-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* —— Progress / Spinner ———————————————————————————————————— */
/* 使用场景：进度条与加载圈（ds-progress / ds-spinner）：进度与等待反馈。 */
.ds-progress {
  height: 6px;
  background: var(--ds-color-surface-container-high);
  border-radius: var(--ds-corner-full);
  overflow: hidden;
}

.ds-progress-bar {
  height: 100%;
  background: var(--ds-color-primary);
  border-radius: var(--ds-corner-full);
  transition: width var(--ds-motion-medium-2) var(--ds-easing-standard);
}

.ds-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--ds-color-surface-container-high);
  border-top-color: var(--ds-color-primary);
  border-radius: 50%;
  animation: ds-spin 0.7s linear infinite;
}

@keyframes ds-spin {
  to { transform: rotate(360deg); }
}

[data-theme="dark"] .ds-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c4c4c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-theme="dark"] .ds-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2377bdff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
/* Marketing component class styles — v1 redesign
   Tokens now come from global-design.css (single source of truth).
   All classes are .m-* prefixed and scoped under .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(--ds-typeface-plain);
  color: var(--ds-color-on-surface);
  background: var(--ds-color-surface);
  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 clamp(28px, 4vw, 64px);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}

.m-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ds-color-on-surface);
  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(--ds-color-on-surface);
}
.m-brand-rule {
  width: 1px;
  height: 16px;
  background: var(--ds-color-outline-variant);
  display: inline-block;
}
.m-brand-cn {
  font-family: sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
  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(--ds-color-on-surface);
  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(--ds-color-on-surface);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.m-nav-links a:hover { color: var(--ds-color-on-surface); 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(--ds-color-on-surface);
  color: var(--ds-color-surface);
  padding: 12px 22px;
  border: none;
  border-radius: var(--ds-corner-full);
  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) clamp(28px, 4vw, 64px) 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(--ds-color-on-surface);
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 999px;
  margin-bottom: 40px;
  background: var(--ds-color-surface-container-low);
  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(--ds-color-on-surface);
  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(--ds-color-on-surface-variant);
  margin-right: 2px;
  font-size: 13.5px;
  line-height: 1;
}

.m-headline {
  font-family: 'Geist', sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ds-color-on-surface);
  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(--ds-color-on-surface);
  vertical-align: 0.06em;
  margin-left: 0.04em;
}

.m-subhead {
  font-family: 'Geist', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ds-color-on-surface-variant);
  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', sans-serif;
  font-size: 17px;
  font-weight: 500;
  padding: 21px 38px;
  border: 1px solid transparent;
  border-radius: var(--ds-corner-large);
  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(--ds-color-on-surface);
  color: var(--ds-color-surface);
}
.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(--ds-color-on-surface);
  border-color: var(--ds-color-on-surface-variant);
}
.m-btn-ghost:hover {
  border-color: var(--ds-color-on-surface);
  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(--ds-color-on-surface);
  fill-opacity: 0.85;
  stroke: var(--ds-color-surface);
  stroke-width: 0.35;
  vector-effect: non-scaling-stroke;
}
.m-earth .m-city {
  fill: var(--ds-color-on-surface);
}
.m-earth .m-city-glow {
  fill: var(--ds-color-on-surface);
  fill-opacity: 0.14;
}
.m-earth .m-city-pulse {
  fill: none;
  stroke: var(--ds-color-on-surface);
  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(--ds-color-on-surface);
}
.m-earth .m-origin-ring {
  fill: none;
  stroke: var(--ds-color-on-surface);
  stroke-width: 1.2;
}
.m-earth .m-origin-pulse {
  fill: none;
  stroke: var(--ds-color-on-surface);
  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(--ds-color-on-surface);
  stroke-opacity: 0.55;
  stroke-width: 1.1;
  stroke-linecap: round;
}
.m-earth .m-arc-head {
  fill: var(--ds-color-on-surface);
}

.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(--ds-color-on-surface);
  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(--ds-color-on-surface-variant);
}
.m-markets-badge .m-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ds-color-on-surface-variant);
  margin-top: 6px;
}

/* ─── section primitives (shared by all blocks below hero) ─── */
.m-section {
  position: relative;
  padding: clamp(72px, 9vw, 128px) clamp(28px, 4vw, 64px);
  border-top: 1px solid var(--ds-color-outline-variant);
}
.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(--ds-color-on-surface-variant);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.m-section-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--ds-color-on-surface-variant);
}
.m-section-h2 {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ds-color-on-surface);
  margin: 0;
}
.m-section-sub {
  font-family: 'Geist', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ds-color-on-surface-variant);
  margin-top: 16px;
  max-width: 640px;
}

/* ─── stats strip ────────────────────────────────── */
.m-stats {
  padding: clamp(48px, 5vw, 64px) clamp(28px, 4vw, 64px);
  border-top: 1px solid var(--ds-color-outline-variant);
  border-bottom: 1px solid var(--ds-color-outline-variant);
}
.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(--ds-color-outline-variant);
}
.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(--ds-color-on-surface);
  display: block;
}
.m-stat-label {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--ds-color-on-surface-variant);
  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(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  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(--ds-color-on-surface-variant);
  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: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ds-color-primary);
}
.m-num-accent { color: var(--ds-color-primary); }
.m-tile-h3 {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ds-color-on-surface);
  margin: 0;
}
.m-tile-body {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ds-color-on-surface-variant);
  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(--ds-color-on-surface);
  margin-bottom: -10px;
}
.m-tile-quote blockquote {
  font-family: 'Geist', sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ds-color-on-surface);
  margin: 0;
}
.m-tile-quote cite {
  display: flex;
  align-items: center;
  gap: 10px;
  font-style: normal;
  font-size: 12.5px;
  color: var(--ds-color-on-surface-variant);
  margin-top: auto;
}
.m-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 12px;
}
.m-cite-name { color: var(--ds-color-on-surface); 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: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ds-color-surface);
  background: var(--ds-color-on-surface);
  letter-spacing: 0.02em;
}
.m-chip.dashed { background: transparent; color: var(--ds-color-on-surface-variant); border: 1px dashed var(--ds-color-on-surface-variant); }
.m-chip.active {
  box-shadow: 0 0 0 2px var(--ds-color-primary), 0 0 0 5px var(--ds-color-primary-container);
  position: relative;
}

/* mock editor visual (AI video tile) */
.m-mock-editor {
  width: 100%;
  background: var(--ds-color-surface-container-low);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ds-color-on-surface-variant);
}
.m-mock-editor .m-me-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-outline-variant);
  border-radius: 8px;
}
.m-mock-editor .m-me-row .m-lang { width: 28px; font-weight: 600; color: var(--ds-color-on-surface); }
.m-mock-editor .m-me-row .m-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--ds-color-on-surface) var(--p, 60%), var(--ds-color-outline-variant) var(--p, 60%));
}
.m-mock-editor .m-me-row.active .m-lang { color: var(--ds-color-primary); }
.m-mock-editor .m-me-row.active .m-bar {
  background: linear-gradient(to right, var(--ds-color-primary) var(--p, 60%), var(--ds-color-primary-container) var(--p, 60%));
}
.m-mock-editor .m-me-row .m-pct { color: var(--ds-color-on-surface); 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(--ds-color-surface-container-low);
  border: 1px solid var(--ds-color-outline-variant);
  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(--ds-color-outline-variant); border-radius: 3px; }
.m-mock-chart .m-col .m-b2 { background: var(--ds-color-on-surface);          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(--ds-color-primary); }
.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(--ds-color-primary);
  color: #FFFFFF;
  border-radius: 6px;
  font-family: '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(--ds-color-primary);
}
.m-mock-chart-icons {
  display: flex;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ds-color-outline-variant);
}
.m-mock-chart-icons .m-ic {
  flex: 1;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-color-on-surface-variant);
}
.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(--ds-color-primary); }

/* ─── logo wall ──────────────────────────────────── */
.m-logos-inner {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}
.m-logos-heading {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ds-color-on-surface-variant);
  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', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--ds-color-on-surface);
  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: 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(--ds-color-on-surface-variant);
  margin: 0 0 22px;
}
.m-testimonial-quote {
  font-family: 'Geist', sans-serif;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--ds-color-on-surface);
  margin: 0 0 28px;
}
.m-testimonial-cite {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-style: normal;
  color: var(--ds-color-on-surface-variant);
  font-size: 14px;
}

/* ─── pricing ────────────────────────────────────── */
.m-pricing-head {
  text-align: center;
  margin-bottom: 56px;
}
.m-pricing-h2 {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ds-color-on-surface);
  margin: 0 0 12px;
}
.m-pricing-sub {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ds-color-on-surface-variant);
  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(--ds-color-outline-variant);
  border-radius: 18px;
  padding: 36px 32px 32px;
  background: var(--ds-color-surface);
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: border-color 0.2s ease, transform 0.25s ease;
}
.m-plan:hover { border-color: var(--ds-color-on-surface-variant); transform: translateY(-2px); }
.m-plan.featured {
  background: var(--ds-color-on-surface);
  color: var(--ds-color-surface);
  border-color: var(--ds-color-on-surface);
}
.m-plan.featured .m-plan-name,
.m-plan.featured .m-plan-price,
.m-plan.featured .m-plan-feature { color: var(--ds-color-surface); }
.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: 'Geist', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ds-color-on-surface);
  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(--ds-color-surface-container-low);
  color: var(--ds-color-on-surface-variant);
}
.m-plan.featured .m-plan-tag { background: rgba(255,255,255,0.12); color: var(--ds-color-surface); }
.m-plan-price {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ds-color-on-surface);
}
.m-plan-period {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--ds-color-on-surface-variant);
  font-weight: 400;
  margin-left: 4px;
  letter-spacing: 0;
}
.m-plan-divider {
  height: 1px;
  background: var(--ds-color-outline-variant);
  width: 100%;
}
.m-plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.m-plan-feature {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--ds-color-on-surface);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.m-plan-feature::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--ds-color-on-surface);
  border-radius: 50%;
  margin-top: 8px;
  flex: none;
}
.m-plan.featured .m-plan-feature::before { background: var(--ds-color-surface); }
.m-plan-cta {
  margin-top: auto;
  padding: 14px 22px;
  border-radius: 12px;
  font-family: 'Geist', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--ds-color-on-surface);
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  transition: background 0.2s, color 0.2s;
}
.m-plan-cta:hover { background: var(--ds-color-on-surface); color: var(--ds-color-surface); }
.m-plan.featured .m-plan-cta {
  background: var(--ds-color-surface);
  color: var(--ds-color-on-surface);
  border-color: var(--ds-color-surface);
}
.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', sans-serif;
  color: var(--ds-color-on-surface);
  font-size: 14.5px;
  text-decoration: none;
  border-bottom: 1px solid var(--ds-color-outline-variant);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.m-pricing-foot a:hover { border-color: var(--ds-color-on-surface); }

/* 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(--ds-color-primary-container);
  color: var(--ds-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}
.m-pricing-error-msg {
  color: var(--ds-color-on-surface);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}

/* ─── footer ─────────────────────────────────────── */
.m-footer {
  border-top: 1px solid var(--ds-color-outline-variant);
  padding: clamp(56px, 6vw, 80px) clamp(28px, 4vw, 64px) 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(--ds-color-on-surface);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.m-footer-brand-cell .m-footer-brand .m-rule {
  width: 1px;
  height: 16px;
  background: var(--ds-color-outline-variant);
}
.m-footer-brand-cell .m-footer-brand .m-cn {
  font-family: sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--ds-color-on-surface-variant);
  letter-spacing: 0.04em;
}
.m-footer-tagline {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--ds-color-on-surface-variant);
  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(--ds-color-on-surface-variant);
  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: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--ds-color-on-surface);
  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(--ds-color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ds-color-on-surface-variant);
  text-transform: uppercase;
}

.m-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.m-footer-legal a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}

.m-footer-legal a:hover {
  opacity: 0.65;
}

.m-footer-legal a:focus-visible {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: 3px;
}

/* ─── 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(--ds-color-outline-variant); }
  .m-stat-cell:nth-child(3) { padding-top: 24px; border-top: 1px solid var(--ds-color-outline-variant); }
  .m-stat-cell:nth-child(4) { padding-top: 24px; border-top: 1px solid var(--ds-color-outline-variant); }

  .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-color-surface) !important;
}

.dp-revamp .ant-layout-header {
  /* S2 FP1 批 A：白玻璃字面量 → --ds-glass-bg（双主题；暗色不破版） */
  background: color-mix(in srgb, var(--ds-color-surface-container) 80%, transparent) !important;
  border-bottom: 1px solid var(--ds-color-outline-variant) !important;
}

.dp-revamp .ant-layout-sider {
  background: var(--ds-color-surface) !important;
  border-right: 1px solid var(--ds-color-outline-variant) !important;
}

.dp-revamp .ant-layout-content {
  background: var(--ds-color-surface) !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-color-surface) !important;
  color: var(--ds-color-on-surface) !important;
}

.dp-auth-modal .ant-modal-title {
  color: var(--ds-color-on-surface) !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-color-on-surface-variant) !important;
}

/* Typography Link 必须显式上色，不要被 inherit 抹平。
   design.md：行内文字链接 = 组件层 .ds-link = --ds-color-primary（亮暗两套由 token 换色）。
   禁止 --ds-color-on-primary：那是主色底上的字，亮色叠白底、暗色叠深底都看不见。 */
.dp-auth-modal .ant-typography-link,
.dp-auth-modal a.ant-typography {
  color: var(--ds-color-primary) !important;
}

.dp-auth-modal .ant-form-item-label > label {
  color: var(--ds-color-on-surface-variant) !important;
}

/* AuthModal portal 内主 CTA = ink-on-ink（design.md 主按钮规范） */
.dp-auth-modal .ant-btn-primary {
  background: var(--ds-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-surface) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* 亮色：hover 压纯黑（原行为）。暗色：白底 CTA 保持白，不刷黑。 */
.dp-auth-modal .ant-btn-primary:hover,
.dp-auth-modal .ant-btn-primary:focus {
  background: #000000 !important;
  border-color: #000000 !important;
  color: var(--ds-color-surface) !important;
  filter: none !important;
  box-shadow: var(--ds-elevation-4) !important;
}
[data-theme="dark"] .dp-auth-modal .ant-btn-primary:hover,
[data-theme="dark"] .dp-auth-modal .ant-btn-primary:focus {
  background: var(--ds-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-surface) !important;
}

.dp-auth-modal .ant-btn-primary:disabled,
.dp-auth-modal .ant-btn-primary[disabled] {
  background: var(--ds-color-surface-container-high) !important;
  border-color: var(--ds-color-surface-container-high) !important;
  color: var(--ds-color-on-surface-variant) !important;
}

/* MainLayout 内主 CTA：同样 ink-on-ink，与 design.md 对齐
   （此前 App.css 1447-1458 用 azure 渐变，与 design.md 主按钮规范不符，由本块替换） */
.dp-revamp .ant-btn-primary {
  background: var(--ds-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-surface) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* 亮色 hover 压纯黑；暗色白底 CTA 保持白。 */
.dp-revamp .ant-btn-primary:hover,
.dp-revamp .ant-btn-primary:focus {
  background: #000000 !important;
  border-color: #000000 !important;
  color: var(--ds-color-surface) !important;
  filter: none !important;
  box-shadow: var(--ds-elevation-4) !important;
}
[data-theme="dark"] .dp-revamp .ant-btn-primary:hover,
[data-theme="dark"] .dp-revamp .ant-btn-primary:focus {
  background: var(--ds-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-surface) !important;
}

.dp-revamp .ant-btn-primary:disabled,
.dp-revamp .ant-btn-primary[disabled] {
  background: var(--ds-color-surface-container-high) !important;
  border-color: var(--ds-color-surface-container-high) !important;
  color: var(--ds-color-on-surface-variant) !important;
}

/* [盲区证据] /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-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-surface) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* 亮色 hover 压纯黑；暗色白底 CTA 保持白。 */
.mm-workspace-panel .ant-btn-primary:hover,
.mm-workspace-panel .ant-btn-primary:focus {
  background: #000000 !important;
  border-color: #000000 !important;
  color: var(--ds-color-surface) !important;
  filter: none !important;
  box-shadow: var(--ds-elevation-4) !important;
}
[data-theme="dark"] .mm-workspace-panel .ant-btn-primary:hover,
[data-theme="dark"] .mm-workspace-panel .ant-btn-primary:focus {
  background: var(--ds-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-surface) !important;
}

.mm-workspace-panel .ant-btn-primary:disabled,
.mm-workspace-panel .ant-btn-primary[disabled] {
  background: var(--ds-color-surface-container-high) !important;
  border-color: var(--ds-color-surface-container-high) !important;
  color: var(--ds-color-on-surface-variant) !important;
}

/* [盲区证据] Phase 7 截图 /console/data-dashboard 时发现：
   KPI 6 卡 + 3 趋势图 Card 仍渲染深 navy 底，inline `style={{ background: 'var(--ds-color-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-color-surface) !important;
  border-color: var(--ds-color-outline-variant) !important;
  color: var(--ds-color-on-surface) !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-color-outline-variant) !important;
  color: var(--ds-color-on-surface) !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-color-on-surface-variant) !important;
}

.dp-revamp .ant-typography-disabled,
.account-settings .ant-typography-disabled {
  color: var(--ds-color-on-surface-variant) !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-color-on-surface) !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-color-surface) !important;
  border-color: var(--ds-color-outline-variant) !important;
  color: var(--ds-color-on-surface) !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-color-on-surface) !important;
}

.dp-revamp .ant-form .ant-input::placeholder,
.account-settings .ant-form .ant-input::placeholder {
  color: var(--ds-color-on-surface-variant) !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-color-surface) !important;
  border-color: var(--ds-color-on-surface-variant) !important;
  color: var(--ds-color-on-surface) !important;
}

.dp-revamp .ant-btn-default:hover,
.account-settings .ant-btn-default:hover {
  background: var(--ds-color-surface-container) !important;
  border-color: var(--ds-color-on-surface) !important;
  color: var(--ds-color-on-surface) !important;
}

.dp-revamp .ant-btn-text:not(.ant-btn-dangerous),
.account-settings .ant-btn-text:not(.ant-btn-dangerous) {
  color: var(--ds-color-on-surface) !important;
}

.dp-revamp .ant-btn-link,
.account-settings .ant-btn-link {
  color: var(--ds-color-on-primary) !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-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-surface) !important;
}
.dp-revamp .ant-radio-button-wrapper-checked:hover,
.account-settings .ant-radio-button-wrapper-checked:hover {
  background: var(--ds-color-on-surface-variant) !important;
  border-color: var(--ds-color-on-surface-variant) !important;
  color: var(--ds-color-surface) !important;
}
.dp-revamp .ant-radio-button-wrapper-checked::before,
.account-settings .ant-radio-button-wrapper-checked::before {
  background-color: var(--ds-color-on-surface) !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-color-on-surface) !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-color-on-surface) !important;
}
.dp-revamp .ant-tabs .ant-tabs-ink-bar,
.account-settings .ant-tabs .ant-tabs-ink-bar {
  background: var(--ds-color-on-surface) !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-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-surface) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}
/* 亮色 hover 压纯黑；暗色白底 CTA 保持白。 */
.dp-console-modal .ant-btn-primary:hover,
.dp-console-modal .ant-btn-primary:focus {
  background: #000000 !important;
  border-color: #000000 !important;
  color: var(--ds-color-surface) !important;
  filter: none !important;
}
[data-theme="dark"] .dp-console-modal .ant-btn-primary:hover,
[data-theme="dark"] .dp-console-modal .ant-btn-primary:focus {
  background: var(--ds-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-surface) !important;
}
.dp-console-modal .ant-btn-primary:disabled,
.dp-console-modal .ant-btn-primary[disabled] {
  background: var(--ds-color-surface-container-high) !important;
  border-color: var(--ds-color-surface-container-high) !important;
  color: var(--ds-color-on-surface-variant) !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-color-error) !important;
  border-color: var(--ds-color-error) !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-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-surface) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}
/* 亮色 hover 压纯黑；暗色白底 CTA 保持白。 */
.dp-products-shell .ant-btn-primary:hover,
.dp-products-shell .ant-btn-primary:focus {
  background: #000000 !important;
  border-color: #000000 !important;
  color: var(--ds-color-surface) !important;
}
[data-theme="dark"] .dp-products-shell .ant-btn-primary:hover,
[data-theme="dark"] .dp-products-shell .ant-btn-primary:focus {
  background: var(--ds-color-on-surface) !important;
  border-color: var(--ds-color-surface) !important;
  color: var(--ds-color-surface) !important;
}
.dp-products-shell .ant-btn-primary:disabled,
.dp-products-shell .ant-btn-primary[disabled] {
  background: var(--ds-color-surface-container-high) !important;
  border-color: var(--ds-color-surface-container-high) !important;
  color: var(--ds-color-on-surface-variant) !important;
}

/* [盲区证据] Phase 8 截图发现 Modal.confirm（如"平台未授权"对话框）的
   取消按钮（.ant-btn-default）在浅色模式渲染深底深字。根因：
   Modal.confirm 渲染在 React Portal（body 直挂），不在 .dp-revamp 树内，
   geo/global.css 的 .ant-btn-default 暗主题覆盖或 Ant Design 派生算法
   导致 default 按钮背景错误。
   解：给 Modal.confirm footer 内的 default 按钮加全局反制。 */
.ant-modal-confirm-btns .ant-btn-default {
  background: var(--ds-color-surface) !important;
  border-color: var(--ds-color-on-surface-variant) !important;
  color: var(--ds-color-on-surface) !important;
}

.ant-modal-confirm-btns .ant-btn-default:hover {
  background: var(--ds-color-surface-container) !important;
  border-color: var(--ds-color-on-surface) !important;
  color: var(--ds-color-on-surface) !important;
}

/* ============================================================
 * antd Card — dsCard 配方：container-low 轻描边 + 极轻阴影
 * ============================================================
 * antd 5 CSS-in-JS 注入 :where(.css-hash).ant-card 特异性 (0,1,0)，
 * 且 <style> 运行时注入晚于静态 CSS，用 !important 稳压。
 * surface 底（colorBgContainer）与 16px 圆角（borderRadiusLG）已由
 * ConfigProvider token 提供；这里补轻描边与阴影，亮暗自动切换。
 */
.ant-card {
  border: 1px solid var(--ds-color-surface-container-low) !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ds-color-on-surface) 4%, transparent);
}
.ant-card-head {
  border-bottom: 1px solid var(--ds-color-outline-variant) !important;
}

/* ============================================================
 * antd Button — default/outlined 边框统一为 outline-variant
 * ============================================================
 * antd 5 Button default variant-outlined 的边框走 defaultBorderColor
 * token（派生自 colorBorder），显式 ConfigProvider 配置在个别页面
 * 仍可能被 geo global.css 的 .ant-btn-default !important 污染。
 * 同 Card 做法：高特异性 + !important 稳压，亮暗自动切换。
 */
.ant-btn-default.ant-btn-variant-outlined,
.ant-btn-default:not(.ant-btn-variant-solid):not(.ant-btn-variant-text):not(.ant-btn-variant-link) {
  border-color: var(--ds-color-outline-variant) !important;
}
.ant-btn-default.ant-btn-variant-outlined:hover,
.ant-btn-default.ant-btn-variant-outlined:focus,
.ant-btn-default:not(.ant-btn-variant-solid):not(.ant-btn-variant-text):not(.ant-btn-variant-link):hover,
.ant-btn-default:not(.ant-btn-variant-solid):not(.ant-btn-variant-text):not(.ant-btn-variant-link):focus {
  border-color: var(--ds-color-on-surface-variant) !important;
}

/* ============================================================
 * antd 表单控件（Input / Select / DatePicker）— 边框统一
 * ============================================================
 * 同 Card/Button 根因：geo global.css 第 215-234 行 .ant-input /
 * .ant-select-selector / .ant-picker 用 !important 全局污染边框为
 * --geo-border-default，且 focus 用紫色 --geo-primary。
 * 双类选择器 + !important 稳压；focus 保持 antd 语义（primary）。
 */
.ant-input.ant-input-outlined,
.ant-input-affix-wrapper.ant-input-outlined,
.ant-select .ant-select-selector,
.ant-picker.ant-picker-outlined {
  background: var(--ds-color-surface) !important;
  border-color: var(--ds-color-outline-variant) !important;
  color: var(--ds-color-on-surface) !important;
}

.ant-input.ant-input-outlined:hover,
.ant-input-affix-wrapper.ant-input-outlined:hover,
.ant-select:hover .ant-select-selector,
.ant-picker.ant-picker-outlined:hover {
  border-color: var(--ds-color-on-surface-variant) !important;
}

.ant-input.ant-input-outlined:focus,
.ant-input.ant-input-outlined:focus-within,
.ant-input-affix-wrapper.ant-input-outlined:focus,
.ant-input-affix-wrapper.ant-input-outlined:focus-within,
.ant-input-affix-wrapper.ant-input-outlined-focused,
.ant-select-focused .ant-select-selector,
.ant-picker.ant-picker-outlined-focused {
  border-color: var(--ds-color-primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-color-primary) 12%, transparent) !important;
}

.ant-input.ant-input-outlined::placeholder,
.ant-input-affix-wrapper.ant-input-outlined input::placeholder,
.ant-input-affix-wrapper.ant-input-outlined textarea::placeholder {
  color: var(--ds-color-on-surface-variant) !important;
}

/* Input.Password 眼睛图标：resting muted、hover 提亮；内层输入继承 wrapper 文字色 */
.ant-input-affix-wrapper.ant-input-outlined .ant-input-password-icon {
  color: var(--ds-color-on-surface-variant) !important;
}
.ant-input-affix-wrapper.ant-input-outlined .ant-input-password-icon:hover {
  color: var(--ds-color-on-surface) !important;
}