/* ==========================================================================
   LivingData 统一弹窗（modal / dialog）设计系统
   --------------------------------------------------------------------------
   目标：全站弹窗共用同一副骨架与观感，只允许「尺寸」和「业务内容」不同。

   用法
     · 弹窗根元素（<dialog> 或手写遮罩容器）加 `ld-modal` + 一档尺寸：
         ld-modal--xs 420 / --sm 520 / --md 640 / --lg 880 / --xl 1040 / --2xl 1180
     · 骨架：__head（标题 + 副标题 + 关闭） / __body / __foot（备注 + 操作）
     · 既有弹窗族（browser-dialog、um-dialog、credit-dialog、tl-modal、help-dialog、
       api-dialog、export-preview-dialog、sub-modal、edc-* …）由下方「兼容映射」
       自动套用同一外观，业务标记不需要重写。
     · 唯一令牌入口：--dialog-*；深色模式只换令牌，不改结构。

   加载顺序：本文件必须排在 page CSS / Vite app.css / jinshuju-ui.css 之后
   （components/dialog-assets 负责引入），因此用 html body 前缀提升优先级。
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
    --dialog-radius: 16px;
    --dialog-radius-control: 10px;
    --dialog-surface: #ffffff;
    --dialog-soft: #f6f8fb;
    --dialog-line: #e7ebf2;
    --dialog-line-strong: #d5dbe5;
    --dialog-text: #101828;
    --dialog-muted: #667085;
    --dialog-backdrop: rgba(15, 23, 42, .45);
    --dialog-backdrop-blur: 6px;
    --dialog-shadow: 0 24px 64px -20px rgba(16, 24, 40, .32), 0 2px 10px -4px rgba(16, 24, 40, .16);
    --dialog-gutter: 24px;
    --dialog-head-pad-y: 18px;
    --dialog-accent: #2563eb;
    --dialog-accent-strong: #2563eb;
    --dialog-success: #12b76a;
    --dialog-warning: #f79009;
    --dialog-danger: #d92d20;
    --dialog-danger-soft: #fef3f2;
    --dialog-danger-line: #fecdca;
    --dialog-danger-ink: #b42318;

    --dialog-w-xs: 420px;
    --dialog-w-sm: 520px;
    --dialog-w-md: 640px;
    --dialog-w-lg: 880px;
    --dialog-w-xl: 1040px;
    --dialog-w-2xl: 1180px;
    --dialog-w: var(--dialog-w-md);
}

html[data-color-mode="dark"] {
    --dialog-surface: #171f29;
    --dialog-soft: #1f2937;
    --dialog-line: #2c3745;
    --dialog-line-strong: #3b4757;
    --dialog-text: #f2f4f7;
    --dialog-muted: #a3aebb;
    --dialog-backdrop: rgba(3, 8, 14, .66);
    --dialog-shadow: 0 26px 68px -22px rgba(0, 0, 0, .7), 0 2px 10px -4px rgba(0, 0, 0, .5);
    --dialog-danger-soft: #3a1d1b;
    --dialog-danger-line: #5c2b26;
    --dialog-danger-ink: #fda29b;
}

/* ---------- 2. 尺寸档位（唯一尺寸来源） ---------- */
html body .ld-modal--xs { --dialog-w: var(--dialog-w-xs); }
html body .ld-modal--sm { --dialog-w: var(--dialog-w-sm); }
html body .ld-modal--md { --dialog-w: var(--dialog-w-md); }
html body .ld-modal--lg { --dialog-w: var(--dialog-w-lg); }
html body .ld-modal--xl { --dialog-w: var(--dialog-w-xl); }
html body .ld-modal--2xl { --dialog-w: var(--dialog-w-2xl); }
/* 沉浸式：铺满可视区，仅留一点呼吸边距 */
html body .ld-modal--full { --dialog-w: 1600px; }

/* 兼容映射：老弹窗未加尺寸类时的历史尺寸（:where 保持零优先级，便于上面覆盖） */
html body :where(.browser-dialog) { --dialog-w: var(--dialog-w-xs); }
html body :where(.browser-dialog[data-dialog-mode="prompt"][data-dialog-multiline="1"]) { --dialog-w: var(--dialog-w-lg); }
html body :where(.um-dialog) { --dialog-w: var(--dialog-w-md); }
html body :where(.um-dialog.um-boot) { --dialog-w: var(--dialog-w-xs); }
html body :where(.credit-dialog) { --dialog-w: var(--dialog-w-md); }
html body :where(.credit-dialog--wide) { --dialog-w: var(--dialog-w-lg); }
html body :where(.credit-dialog--invoice) { --dialog-w: var(--dialog-w-sm); }
html body :where(.folder-edit-dialog) { --dialog-w: var(--dialog-w-sm); }
html body :where(.api-dialog) { --dialog-w: var(--dialog-w-md); }
html body :where(.template-public-dialog) { --dialog-w: var(--dialog-w-xs); }
html body :where(.tl-modal) { --dialog-w: var(--dialog-w-xl); }
html body :where(.help-dialog) { --dialog-w: var(--dialog-w-sm); }
html body :where(.feedback-message-dialog) { --dialog-w: var(--dialog-w-sm); }
html body :where(.export-preview-dialog) { --dialog-w: var(--dialog-w-xl); }
html body :where(.waiting-area-dialog) { --dialog-w: var(--dialog-w-lg); }
html body :where(.query-record-dialog) { --dialog-w: var(--dialog-w-sm); }
html body :where(.account-dialog) { --dialog-w: var(--dialog-w-sm); }
html body :where(.sub-modal) { --dialog-w: var(--dialog-w-xs); }
html body :where(.new-form-dialog) { --dialog-w: var(--dialog-w-md); }
html body :where(.new-form-dialog.is-upload-mode) { --dialog-w: var(--dialog-w-sm); }
html body :where(.edc-preview-dialog) { --dialog-w: var(--dialog-w-2xl); }
html body :where(.edc-cover-crop-dialog) { --dialog-w: var(--dialog-w-lg); }
html body :where(.ld-rd) { --dialog-w: 360px; }

/* 同一弹窗内的形态切换放宽/收紧（优先级高于上面的尺寸类） */
html body .browser-dialog.ld-modal[data-dialog-mode="prompt"][data-dialog-multiline="1"] { --dialog-w: var(--dialog-w-lg); }
html body .new-form-dialog.ld-modal.is-upload-mode { --dialog-w: var(--dialog-w-sm); }
html body .edc-preview-dialog__panel.is-phone { --dialog-w: var(--dialog-w-xs); }

/* ---------- 3. 遮罩层（统一：同色 + 同模糊） ---------- */
html body dialog[class]::backdrop {
    background: var(--dialog-backdrop);
    -webkit-backdrop-filter: blur(var(--dialog-backdrop-blur));
    backdrop-filter: blur(var(--dialog-backdrop-blur));
}

html body :is(.dialog-backdrop,
        .workspace-dialog,
        .new-form-dialog,
        .edc-preview-dialog,
        .edc-cover-crop-dialog,
        .sub-modal,
        .sub-modal__backdrop) {
    background: var(--dialog-backdrop);
    -webkit-backdrop-filter: blur(var(--dialog-backdrop-blur));
    backdrop-filter: blur(var(--dialog-backdrop-blur));
}

/* ---------- 4. <dialog> 容器：统一居中、圆角、阴影 ---------- */
html body dialog[class] {
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: var(--dialog-radius);
    background: var(--dialog-surface);
    color: var(--dialog-text);
    box-shadow: var(--dialog-shadow);
    overscroll-behavior: contain;
}

html body dialog[class]:modal {
    position: fixed;
    inset: 0;
    margin: auto;
    transform: none;
    width: min(var(--dialog-w), calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
}

/* 有独立面板子元素的弹窗：圆角由 dialog 负责，面板只负责排布与滚动 */
html body :is(.browser-dialog,
        .credit-dialog,
        .export-preview-dialog,
        .query-record-dialog,
        .api-dialog,
        .folder-edit-dialog) {
    overflow: hidden;
}

html body .ld-rd:modal {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

/* 手写遮罩容器（div）：统一居中与内边距 */
html body :is(.new-form-dialog,
        .edc-preview-dialog,
        .edc-cover-crop-dialog,
        .sub-modal,
        .workspace-dialog) {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
}

html body .new-form-dialog:not(.is-open) { display: none; }
html body .workspace-dialog.hidden { display: none; }
html body .sub-modal[hidden] { display: none; }

/* ---------- 5. 面板 ---------- */
html body :is(.browser-dialog__panel,
        .credit-dialog__panel,
        .waiting-area__panel,
        .export-preview-dialog__panel,
        .query-record-dialog__panel,
        .dialog-card,
        .workspace-dialog__content,
        .new-form-dialog__card,
        .edc-preview-dialog__panel,
        .edc-cover-crop-dialog__panel,
        .sub-modal__panel,
        .api-dialog__panel,
        .account-dialog__panel) {
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: var(--dialog-radius);
    background: var(--dialog-surface);
    color: var(--dialog-text);
    box-shadow: none;
    animation: ld-modal-in .24s cubic-bezier(.21, .9, .27, 1.02) both;
}

html body :is(.credit-dialog__panel,
        .export-preview-dialog__panel,
        .query-record-dialog__panel,
        .api-dialog__panel,
        .waiting-area__panel) {
    width: 100%;
    max-height: inherit;
}

html body :is(.dialog-card,
        .workspace-dialog__content,
        .new-form-dialog__card,
        .sub-modal__panel,
        .edc-preview-dialog__panel,
        .edc-cover-crop-dialog__panel) {
    width: min(var(--dialog-w), 100%);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    overscroll-behavior: contain;
}

html body .ld-rd__panel {
    width: min(var(--dialog-w), calc(100vw - 40px));
    overflow: hidden;
}

/* ---------- 6. 头部：标题 + 副标题 + 关闭 ---------- */
html body :is(.browser-dialog__panel > header,
        .browser-dialog__header,
        .um-dialog__head,
        .credit-dialog__head,
        .help-dialog__header,
        .feedback-heading,
        .tl-modal__head,
        .export-preview-dialog__head,
        .query-record-dialog__head,
        .dialog-card__header,
        .new-form-dialog__header,
        .edc-preview-dialog__panel > header,
        .edc-cover-crop-dialog__panel > header,
        .api-dialog__head,
        .account-dialog__header,
        .workspace-dialog__header) {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: var(--dialog-head-pad-y) var(--dialog-gutter) calc(var(--dialog-head-pad-y) - 4px);
    border-bottom: 1px solid var(--dialog-line);
    border-radius: 0;
    background: var(--dialog-surface);
    color: var(--dialog-text);
}

/* 统一识别元素：头部顶端强调色条 */
html body :is(.browser-dialog__panel > header,
        .browser-dialog__header,
        .um-dialog__head,
        .credit-dialog__head,
        .help-dialog__header,
        .feedback-heading,
        .tl-modal__head,
        .export-preview-dialog__head,
        .query-record-dialog__head,
        .dialog-card__header,
        .new-form-dialog__header,
        .edc-preview-dialog__panel > header,
        .edc-cover-crop-dialog__panel > header,
        .api-dialog__head,
        .account-dialog__header,
        .workspace-dialog__header)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--dialog-accent), transparent);
    opacity: .9;
    pointer-events: none;
}

html body :is(.browser-dialog__panel > header,
        .browser-dialog__header,
        .um-dialog__head,
        .query-record-dialog__head,
        .dialog-card__header,
        .new-form-dialog__header,
        .tl-modal__head) {
    position: sticky;
    top: 0;
    z-index: 4;
}

html body :is(.browser-dialog__panel h2,
        .browser-dialog__panel strong,
        .um-dialog__head h2,
        .credit-dialog__title,
        .help-dialog__header h2,
        .feedback-heading h2,
        .tl-modal__title,
        .export-preview-dialog__head h2,
        .query-record-dialog__title h2,
        .dialog-card__header h2,
        .new-form-dialog__header h2,
        .workspace-dialog__header h2,
        .account-dialog__header h2,
        .api-dialog__title,
        .sub-modal__title,
        .ld-rd__title) {
    min-width: 0;
    margin: 0;
    color: var(--dialog-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: normal;
}

html body :is(.browser-dialog__panel > p,
        .credit-dialog__lead,
        .um-dialog__head p,
        .export-preview-dialog__meta,
        .api-dialog__lead,
        .sub-modal__desc,
        .waiting-area__subtitle,
        .tl-modal__publisher,
        .help-dialog__header p,
        .ld-rd__message) {
    margin: 3px 0 0;
    color: var(--dialog-muted);
    font-size: 12.5px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* ---------- 7. 主体 ---------- */
html body :is(.browser-dialog__panel > p,
        .browser-dialog__body,
        .um-dialog__body,
        .credit-dialog__body,
        .query-record-dialog__body,
        .dialog-card__body,
        .new-form-dialog__body,
        .api-dialog__body,
        .waiting-area__body,
        .help-dialog section[role="tabpanel"],
        .feedback-message-dialog__body) {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    padding: 20px var(--dialog-gutter);
}

html body .browser-dialog__panel > p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--dialog-text);
    white-space: pre-line;
}

html body :is(.credit-dialog__body,
        .query-record-dialog__body,
        .um-dialog__body,
        .dialog-card__body,
        .api-dialog__body) {
    overflow: auto;
    overscroll-behavior: contain;
}

html body :is(.credit-dialog__body--flush,
        .export-preview-dialog__body,
        .tl-modal__body) {
    padding: 0;
}

html body .browser-dialog__panel > .field {
    box-sizing: border-box;
    display: block;
    width: calc(100% - 2 * var(--dialog-gutter));
    margin: 0 var(--dialog-gutter) 20px;
    resize: vertical;
}

html body .folder-edit-dialog__body {
    display: grid;
    gap: 16px;
}

/* ---------- 8. 底部：备注 + 操作 ---------- */
html body :is(.browser-dialog__panel > footer,
        .browser-dialog__footer,
        .um-dialog__foot,
        .credit-dialog__foot,
        .export-preview-dialog__foot,
        .dialog-card__footer,
        .api-dialog__foot,
        .account-dialog__footer,
        .qrd-foot,
        .new-form-dialog__footer) {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px var(--dialog-gutter);
    border-top: 1px solid var(--dialog-line);
    border-radius: 0;
    background: var(--dialog-soft);
    color: var(--dialog-muted);
}

html body :is(.browser-dialog__panel > footer,
        .um-dialog__foot,
        .credit-dialog__foot,
        .export-preview-dialog__foot,
        .api-dialog__foot,
        .new-form-dialog__footer) {
    position: sticky;
    bottom: 0;
    z-index: 4;
}

html body :is(.credit-dialog__note,
        .api-dialog__note,
        .new-form-dialog__footer .section-meta,
        .dialog-card__hint) {
    flex: 1 1 240px;
    min-width: 0;
    margin: 0;
    color: var(--dialog-muted);
    font-size: 12px;
    line-height: 1.6;
}

html body :is(.credit-dialog__head-actions,
        .api-dialog__actions,
        .credit-invoice-dialog__actions) {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* ---------- 9. 关闭按钮 ---------- */
html body :is(dialog, [role="dialog"], .dialog-card) :is(.icon-control,
        .um-dialog__close,
        .credit-dialog__close,
        .help-dialog__close,
        .tl-modal__close,
        .api-dialog__close,
        .account-dialog__close,
        .account-icon-button,
        .sub-modal__close,
        .new-form-dialog__close) {
    flex: 0 0 32px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--dialog-line);
    border-radius: var(--dialog-radius-control);
    background: var(--dialog-surface);
    color: var(--dialog-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 1;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

html body :is(dialog, [role="dialog"], .dialog-card) :is(.icon-control,
        .um-dialog__close,
        .credit-dialog__close,
        .help-dialog__close,
        .tl-modal__close,
        .api-dialog__close,
        .account-dialog__close,
        .account-icon-button,
        .sub-modal__close,
        .new-form-dialog__close):hover {
    background: var(--dialog-soft);
    border-color: var(--dialog-line-strong);
    color: var(--dialog-text);
    opacity: 1;
}

/* ---------- 10. 弹窗内按钮 ---------- */
html body :is(dialog, [role="dialog"], .dialog-card) :is(.button,
        .admin-button,
        .account-button,
        .credit-btn,
        .btn,
        .ld-rd__action) {
    box-sizing: border-box;
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid var(--dialog-line-strong);
    border-radius: var(--dialog-radius-control);
    background: var(--dialog-surface);
    color: var(--dialog-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

html body :is(dialog, [role="dialog"], .dialog-card) :is(.button,
        .admin-button,
        .account-button,
        .credit-btn,
        .btn):hover:not(:disabled) {
    background: var(--dialog-soft);
}

html body :is(dialog, [role="dialog"], .dialog-card) :is(.button--primary,
        .admin-button--primary,
        .account-button--primary,
        .credit-btn:not(.credit-btn--ghost),
        .btn-primary,
        .ld-rd__action) {
    border-color: var(--dialog-accent);
    background: var(--dialog-accent);
    color: #fff;
}

html body :is(dialog, [role="dialog"], .dialog-card) :is(.button--primary,
        .admin-button--primary,
        .account-button--primary,
        .credit-btn:not(.credit-btn--ghost),
        .btn-primary,
        .ld-rd__action):hover:not(:disabled) {
    background: var(--dialog-accent-strong);
    border-color: var(--dialog-accent-strong);
    filter: brightness(1.06);
}

html body :is(dialog, [role="dialog"], .dialog-card) :is(.button--quiet,
        .button--ghost,
        .credit-btn--ghost) {
    background: transparent;
    border-color: var(--dialog-line-strong);
    color: var(--dialog-muted);
}

html body :is(dialog, [role="dialog"], .dialog-card) :is(.button--danger,
        .account-button--danger) {
    border-color: var(--dialog-danger-line);
    background: var(--dialog-danger-soft);
    color: var(--dialog-danger-ink);
}

html body :is(dialog, [role="dialog"], .dialog-card) :is(.button--small,
        .credit-btn--small) {
    min-height: 30px;
    padding: 5px 12px;
    font-size: 12px;
}

html body :is(dialog, [role="dialog"], .dialog-card) button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

html body :is(dialog, [role="dialog"], .dialog-card) :is(button, a, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--dialog-accent);
    outline-offset: 2px;
}

/* ---------- 11. 弹窗内表单控件 ---------- */
html body :is(dialog, [role="dialog"], .dialog-card) :is(.field,
        .um-field input,
        .um-field select,
        .um-field textarea,
        .admin-form input,
        .admin-form select,
        .admin-form textarea,
        .account-form input,
        .account-form textarea,
        .new-form-upload__picker input,
        .api-field input,
        .help-dialog form input,
        .help-dialog form select,
        .help-dialog form textarea,
        .feedback-message-dialog textarea,
        .credit-invoice-dialog input,
        .credit-invoice-dialog select) {
    box-sizing: border-box;
    min-width: 0;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--dialog-line-strong);
    border-radius: var(--dialog-radius-control);
    background: var(--dialog-surface);
    color: var(--dialog-text);
    font-size: 13.5px;
}

html body :is(dialog, [role="dialog"], .dialog-card) :is(.field,
        .um-field input,
        .admin-form input,
        .api-field input,
        .help-dialog form input,
        .help-dialog form textarea,
        .feedback-message-dialog textarea):focus {
    outline: none;
    border-color: var(--dialog-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

html body dialog :is(.field-label,
        .um-field > span,
        .um-fieldset > h3,
        .account-form label,
        .help-dialog form label,
        .api-field,
        .feedback-message-dialog label),
html body [role="dialog"] :is(.field-label,
        .um-field > span,
        .um-fieldset > h3,
        .account-form label,
        .help-dialog form label,
        .api-field,
        .feedback-message-dialog label) {
    color: var(--dialog-text);
}

html body :is(dialog, [role="dialog"], .dialog-card) :is([role="alert"],
        .api-field__error,
        .credit-invoice-dialog__error,
        .dialog-card__error) {
    margin: 8px 0 0;
    color: var(--dialog-danger-ink);
    font-size: 12.5px;
    line-height: 1.6;
}

/* ---------- 12. 语义色 ---------- */
html body .ld-rd[data-type="success"] { --dialog-accent: var(--dialog-success); }
html body .ld-rd[data-type="error"] { --dialog-accent: var(--dialog-danger); }
html body .ld-rd[data-type="error"] .ld-rd__action {
    border-color: var(--dialog-danger);
    background: var(--dialog-danger);
}
html body .ld-rd__action { margin-top: 6px; }
html body .ld-rd__badge {
    width: 46px;
    height: 46px;
    background: var(--dialog-accent);
    box-shadow: none;
}
html body .ld-rd__badge::after { display: none; }
html body .ld-rd__timer { height: 2px; background: var(--dialog-accent); }
html body .ld-rd__panel::before { background: linear-gradient(90deg, transparent, var(--dialog-accent), transparent); }

/* ---------- 13. 族内细节对齐 ---------- */
html body .help-dialog {
    --help-panel: var(--dialog-surface);
    --help-soft: var(--dialog-soft);
    --help-line: var(--dialog-line);
    --help-line-strong: var(--dialog-line-strong);
    --help-muted: var(--dialog-muted);
    --surface: var(--dialog-surface);
    --text: var(--dialog-text);
    --line: var(--dialog-line);
    --muted: var(--dialog-muted);
    background: var(--dialog-surface);
    color: var(--dialog-text);
    padding: 0;
}

html body .help-dialog__tabs { padding: 0 var(--dialog-gutter); border-color: var(--dialog-line); }
html body .help-dialog__tabs button { color: var(--dialog-muted); }
html body .help-dialog__tabs button[aria-selected="true"] { color: var(--dialog-accent); border-bottom-color: var(--dialog-accent); }
html body .help-dialog section[role="tabpanel"] { padding: 20px var(--dialog-gutter); }

html body .feedback-message-dialog {
    background: var(--dialog-surface);
    color: var(--dialog-text);
    padding: 0;
}
html body .feedback-message-dialog > form { display: flex; flex-direction: column; }
html body .feedback-message-dialog > form > label { margin: 0; padding: 20px var(--dialog-gutter); display: grid; gap: 8px; }
html body .feedback-message-dialog > form > [role="alert"] { margin: 0; padding: 0 var(--dialog-gutter) 12px; }
html body .feedback-message-dialog > form > footer {
    padding: 14px var(--dialog-gutter);
    border-top: 1px solid var(--dialog-line);
    background: var(--dialog-soft);
    justify-content: flex-end;
}

html body .tl-modal { overflow: hidden; background: var(--dialog-surface); color: var(--dialog-text); }
html body .tl-modal__body { background: var(--dialog-soft); }
html body .tl-modal__intro { display: flex; flex-direction: column; gap: 6px; }
html body .tl-modal__cat {
    background: rgba(37, 99, 235, .1);
    color: var(--dialog-accent);
}

html body .um-dialog__head { background: var(--dialog-surface); }
html body .um-dialog__body { display: grid; gap: 18px; }
html body .um-dialog.um-boot .um-dialog__head { background: var(--dialog-surface); }
html body .um-dialog.um-boot .um-dialog__body { display: block; }
html body .um-dialog__head h2 { color: var(--dialog-text); }

html body .export-preview-dialog__head { color: var(--dialog-text); }
html body .export-preview-dialog__body { background: var(--dialog-surface); }
html body .export-preview-dialog__meta { color: var(--dialog-muted); }

html body .query-record-dialog__head { align-items: center; }
html body .qrd-foot { margin: 0; }

html body .waiting-area__panel { width: 100%; }
html body .waiting-area__heading { min-width: 0; }

html body .sub-modal__panel { padding: 28px var(--dialog-gutter) var(--dialog-gutter); text-align: center; }
html body .sub-modal__close { position: absolute; top: 12px; right: 12px; }
html body .sub-modal__qr { border-radius: var(--dialog-radius-control); border: 1px solid var(--dialog-line); }

html body .new-form-dialog__body { overflow: auto; }
html body .new-form-dialog.is-upload-mode .new-form-dialog__body { padding: 22px var(--dialog-gutter); }
html body .new-form-dialog__footer { align-items: center; }

html body :is(.edc-preview-dialog__panel, .edc-cover-crop-dialog__panel) { overflow: hidden; }
html body .edc-preview-dialog__body { flex: 1; min-height: 0; overflow: hidden; background: var(--dialog-soft); padding: 12px; }

html body .api-dialog__head { align-items: flex-start; }

html body .credit-dialog__title { font-size: 16px; }
html body .credit-dialog__close { border-radius: var(--dialog-radius-control); }
html body .credit-dialog__count { color: var(--dialog-muted); font-size: 12px; }
html body .credit-dialog__foot--pager { justify-content: flex-end; padding: 8px 16px; }

html body .folder-edit-dialog .folder-share-members {
    border-color: var(--dialog-line);
    background: var(--dialog-soft);
    border-radius: var(--dialog-radius-control);
}

html body .logic-rule-standalone dialog { max-width: none; max-height: none; box-shadow: none; }

/* ---------- 14. 动效 ---------- */
@keyframes ld-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: none; }
}

/* 面板型弹窗的进场由第 5 节的 panel 规则负责；这里只补「dialog 本身就是面板」的四个族，
   避免给整屏遮罩层做 transform 动画（会让遮罩一起缩放）。 */
html body :is(.um-dialog, .help-dialog, .feedback-message-dialog, .tl-modal) {
    animation: ld-modal-in .22s cubic-bezier(.21, .9, .27, 1.02) both;
}

@media (prefers-reduced-motion: reduce) {
    html body dialog[class],
    html body :is(dialog, [role="dialog"], .dialog-card),
    html body :is(dialog, [role="dialog"], .dialog-card) * {
        animation: none !important;
        transition: none !important;
    }
    html body .ld-rd__stroke { stroke-dashoffset: 0; }
}

/* ---------- 15. 移动端：统一单列全宽 ---------- */
@media (max-width: 767px) {
    :root {
        --dialog-gutter: 16px;
        --dialog-radius: 14px;
    }

    html body dialog[class]:modal {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
    }

    html body :is(.new-form-dialog, .edc-preview-dialog, .edc-cover-crop-dialog, .sub-modal, .workspace-dialog) {
        padding: 12px;
    }

    html body :is(.dialog-card,
            .workspace-dialog__content,
            .new-form-dialog__card,
            .sub-modal__panel,
            .edc-preview-dialog__panel,
            .edc-cover-crop-dialog__panel) {
        width: 100%;
        max-height: calc(100dvh - 24px);
    }

    html body .edc-preview-dialog__panel,
    html body .edc-preview-dialog__panel.is-phone {
        height: calc(100dvh - 24px);
    }

    html body :is(.browser-dialog__panel > footer,
            .browser-dialog__footer,
            .um-dialog__foot,
            .credit-dialog__foot,
            .export-preview-dialog__foot,
            .api-dialog__foot,
            .new-form-dialog__footer,
            .feedback-message-dialog > form > footer,
            .qrd-foot) {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    html body :is(.browser-dialog__panel > footer,
            .browser-dialog__footer,
            .um-dialog__foot,
            .credit-dialog__foot,
            .export-preview-dialog__foot,
            .api-dialog__foot,
            .new-form-dialog__footer,
            .qrd-foot) > :is(button, .button, a.button) {
        width: 100%;
        flex: 1 1 auto;
        justify-content: center;
    }

    html body :is(.credit-dialog__note,
            .api-dialog__note,
            .new-form-dialog__footer .section-meta,
            .dialog-card__hint) {
        flex: 0 0 auto;
        text-align: left;
    }
}