.meihua-loading-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    margin: 14px auto 0;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid #e3d5c0;
    border-radius: 10px;
    color: #5a4a3a;
}
.meihua-loading-title { margin-bottom: 4px; color: #3a3025; font-size: 14px; font-weight: 700; }
.meihua-loading-hint { margin-bottom: 10px; color: #8b7355; font-size: 12px; line-height: 1.6; }
.meihua-loading-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: #9a8b78; font-size: 12px; }
.meihua-loading-bar { height: 4px; margin-bottom: 10px; overflow: hidden; border-radius: 999px; background: rgba(216, 202, 183, 0.58); }
.meihua-loading-bar span { display: block; width: 18%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c8923e, #e2bd71); transition: width 0.24s ease; }
.meihua-loading-steps { display: grid; gap: 7px; }
.meihua-loading-step { display: flex; align-items: center; gap: 8px; color: #9a8b78; font-size: 13px; }
.meihua-loading-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #d8cab7; }
.meihua-loading-step.active { color: #c8923e; font-weight: 600; }
.meihua-loading-step.active .meihua-loading-dot { background: #c8923e; box-shadow: 0 0 0 4px rgba(200, 146, 62, 0.12); }
.meihua-loading-step.done { color: #5f7d5d; }
.meihua-loading-step.done .meihua-loading-dot { background: #6f946d; }
.dayun-card-detail .meihua-loading-panel,
.ai-response .meihua-loading-panel { max-width: none; margin: 0; }

@media (max-width: 640px) {
    .meihua-loading-panel { padding: 13px 14px; }
    .meihua-loading-meta { font-variant-numeric: tabular-nums; }
}

/* [主题补全] 8.15 分步生成反馈在深色模式下保持层级和进度辨识。 */
html[data-theme="dark"] .meihua-loading-panel {
  background-color: var(--theme-surface);
  border-color: var(--theme-line);
  box-shadow: var(--theme-shadow);
  color: var(--theme-text-1);
}

html[data-theme="dark"] .meihua-loading-title {
  color: var(--theme-text-1);
}

html[data-theme="dark"] .meihua-loading-hint,
html[data-theme="dark"] .meihua-loading-meta,
html[data-theme="dark"] .meihua-loading-step {
  color: var(--theme-text-3);
}

html[data-theme="dark"] .meihua-loading-bar {
  background-color: var(--theme-surface-soft);
  border-color: var(--theme-line);
}

html[data-theme="dark"] .meihua-loading-bar span {
  background-color: var(--theme-gold);
}

html[data-theme="dark"] .meihua-loading-dot {
  background-color: var(--theme-surface-raised);
  border-color: var(--theme-line-strong);
}

html[data-theme="dark"] .meihua-loading-step.active {
  color: var(--theme-gold);
}

html[data-theme="dark"] .meihua-loading-step.active .meihua-loading-dot {
  background-color: var(--theme-gold-soft);
  border-color: var(--theme-gold);
}

html[data-theme="dark"] .meihua-loading-step.done {
  color: var(--theme-pine);
}

html[data-theme="dark"] .meihua-loading-step.done .meihua-loading-dot {
  background-color: var(--theme-pine-soft);
  border-color: var(--theme-pine);
}