html, body {
background: var(--bg-base-default);
color: var(--text-default);
font-family: var(--body-base-font-family), "Microsoft YaHei", "微软雅黑", -apple-system, BlinkMacSystemFont, sans-serif;
margin: 0;
padding: 0;
}
.navbar__brand-icon { width: 36px; height: 36px; object-fit: contain; }
/* 顶部导航栏（与其他页面一致） */
.navbar {
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center; justify-content: space-between;
height: 56px; padding: 0 var(--spacer-24);
background: var(--bg-base-secondary); border-bottom: 1px solid var(--border-neutral-l1);
}
.navbar__brand {
display: inline-flex; align-items: center; gap: var(--spacer-8);
font-family: var(--heading-sm-font-family); font-size: var(--heading-sm-font-size);
line-height: var(--heading-sm-line-height); font-weight: var(--heading-sm-font-weight);
color: var(--text-default); text-decoration: none;
}
.navbar__nav { display: inline-flex; align-items: center; gap: var(--spacer-4); }
.navbar__link {
display: inline-flex; align-items: center; gap: var(--spacer-6);
height: 32px; padding: 0 var(--spacer-12); border-radius: var(--radius-8);
font-size: var(--body-base-font-size); line-height: var(--body-base-line-height);
color: var(--text-secondary); text-decoration: none;
}
.navbar__link.is-active { background: var(--bg-overlay-l1); color: var(--text-default); font-weight: var(--font-weight-medium); }
.navbar__divider { width: 1px; height: 20px; background: var(--border-neutral-l1); margin: 0 var(--spacer-8); }
.navbar__user { display: inline-flex; align-items: center; gap: var(--spacer-8); font-size: var(--body-sm-font-size); color: var(--text-secondary); }
/* 弹框基础样式 */
.modal-overlay { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: var(--bg-overlay-l4); }
.modal-overlay.is-visible { display: flex; animation: fadeInOverlay .2s ease-out; }
.ds-dialog { background: var(--bg-base-default); border-radius: var(--radius-12); box-shadow: 0 20px 50px color-mix(in srgb, var(--text-default) 20%, transparent); overflow: hidden; max-height: 90vh; display: flex; flex-direction: column; }
.ds-dialog__head { display: flex; align-items: center; justify-content: space-between; padding: var(--spacer-12) var(--spacer-16); border-bottom: 1px solid var(--border-neutral-l1); }
.ds-dialog__title { font: 600 var(--body-base-font-size)/var(--body-base-line-height) var(--body-base-font-family); color: var(--text-default); }
.ds-dialog__close { background: none; border: none; cursor: pointer; padding: 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-8); }
.ds-dialog__close:hover { background: var(--bg-overlay-l1); }
.ds-dialog__body { padding: var(--spacer-16); overflow-y: auto; }
.ds-dialog__foot { display: flex; justify-content: flex-end; gap: var(--spacer-8); padding: var(--spacer-12) var(--spacer-16); border-top: 1px solid var(--border-neutral-l1); }
.ds-btn--brand { background: var(--bg-brand); color: var(--text-onbrand); border: 1px solid var(--bg-brand); padding: 6px 14px; border-radius: var(--radius-8); cursor: pointer; font: 500 var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family); }
.ds-btn--brand:hover { opacity: 0.92; }
.ds-btn--ghost { background: var(--bg-base-default); color: var(--text-default); border: 1px solid var(--border-neutral-l1); padding: 6px 14px; border-radius: var(--radius-8); cursor: pointer; font: 500 var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family); }
.ds-btn--ghost:hover { background: var(--bg-overlay-l1); }
.ds-btn--link { background: none; border: none; color: var(--bg-brand); cursor: pointer; padding: 4px 8px; }
.ds-btn--sm { font-size: var(--body-sm-font-size); }
.ds-btn--danger { color: var(--status-error-default); }
@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }
/* 页面布局 */
.page-shell { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.workspace { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.extract-main {
flex: 1; min-width: 0;
max-width: 1600px; width: 100%; margin: 0 auto; padding: var(--spacer-24); box-sizing: border-box;
display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
/* 任务侧边栏 */
.task-sidebar {
flex: 0 0 auto;
display: flex;
height: 100%;
border-left: 1px solid var(--border-neutral-l1);
background: var(--bg-base-secondary);
transition: width .2s ease;
}
.task-sidebar.is-collapsed { width: 0; border-left: none; overflow: hidden; }
.task-sidebar.is-expanded { width: 320px; }
.task-sidebar__panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.task-sidebar.is-collapsed .task-sidebar__panel { display: none; }
.task-sidebar__head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--spacer-12) var(--spacer-16);
border-bottom: 1px solid var(--border-neutral-l1);
}
.task-sidebar__title { font: 600 var(--body-base-font-size)/var(--body-base-line-height) var(--body-base-font-family); color: var(--text-default); }
.task-sidebar__body { flex: 1; overflow-y: auto; padding: var(--spacer-12); }
.task-sidebar__group { margin-bottom: var(--spacer-16); }
.task-sidebar__group-title {
padding: var(--spacer-8) var(--spacer-12);
font: 600 11px/16px var(--body-sm-font-family);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.task-sidebar__item {
padding: var(--spacer-12);
margin-bottom: var(--spacer-8);
background: var(--bg-base-default);
border: 1px solid var(--border-neutral-l1);
border-radius: var(--radius-8);
cursor: pointer;
transition: box-shadow .15s ease, border-color .15s ease;
}
.task-sidebar__item:hover { border-color: var(--bg-brand); box-shadow: 0 2px 8px color-mix(in srgb, var(--bg-brand) 8%, transparent); }
.task-sidebar__item-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacer-8); margin-bottom: var(--spacer-8); }
.task-sidebar__item-title { flex: 1; min-width: 0; font: 500 var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family); color: var(--text-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-sidebar__item-progress { display: flex; align-items: center; gap: var(--spacer-8); }
.task-sidebar__item-pct { font: var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family); color: var(--text-tertiary); }
.task-sidebar__item-meta { margin-top: var(--spacer-6); font: 12px/18px var(--body-sm-font-family); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-sidebar__empty { text-align: center; padding: var(--spacer-32) var(--spacer-16); color: var(--text-tertiary); }
.task-sidebar__empty div:first-of-type { margin-top: var(--spacer-12); font: 500 var(--body-base-font-size)/var(--body-base-line-height) var(--body-base-font-family); color: var(--text-secondary); }
.extract-hero { margin-bottom: var(--spacer-20); flex: 0 0 auto; }
.extract-hero__eyebrow {
font: var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family);
color: var(--bg-brand); letter-spacing: 0.04em; margin-bottom: var(--spacer-4);
}
.extract-hero__title {
font: 600 24px/32px var(--body-base-font-family);
color: var(--text-default); margin: 0 0 var(--spacer-4) 0;
}
.extract-hero__desc {
font: var(--body-base-font-size)/var(--body-base-line-height) var(--body-base-font-family);
color: var(--text-secondary); margin: 0;
}
/* 工具栏 */
.action-bar {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacer-10);
padding: var(--spacer-10) var(--spacer-16);
background: var(--bg-base-default);
border: 1px solid var(--border-neutral-l1);
border-radius: var(--radius-12);
margin-bottom: var(--spacer-16);
box-shadow: 0 1px 2px color-mix(in srgb, var(--text-default) 4%, transparent);
flex: 0 0 auto;
}
.action-bar .ds-btn--brand, .action-bar .ds-btn--ghost { display: inline-flex; align-items: center; gap: 6px; }
.action-bar .icon { width: 14px; height: 14px; filter: brightness(0) saturate(100%); opacity: 0.85; }
/* brand 按钮（紫底白字）里 icon 反白 */
.action-bar .ds-btn--brand .icon { filter: brightness(0) invert(1); opacity: 1; }
.action-bar__divider { width: 1px; height: 22px; background: var(--border-neutral-l1); margin: 0 var(--spacer-2, 4px); }
.action-bar__label {
font: 500 var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family);
color: var(--text-secondary);
white-space: nowrap;
}
.action-bar__select {
min-width: 160px;
max-width: 240px;
flex: 0 1 auto;
}
.action-bar__mode {
min-width: 80px;
max-width: 110px;
flex: 0 1 auto;
}
.action-bar__group {
display: inline-flex;
align-items: center;
gap: var(--spacer-6);
}
.action-bar__spacer { flex: 1 1 auto; min-width: var(--spacer-8, 8px); }
.action-bar__file-info {
font: var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family);
color: var(--text-tertiary);
max-width: 360px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 50/50 split */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacer-16);
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
@media (max-width: 1024px) {
.split { grid-template-columns: 1fr; flex: none; height: auto; min-height: auto; overflow: visible; }
}
.split-pane {
display: flex; flex-direction: column;
background: var(--bg-base-default);
border: 1px solid var(--border-neutral-l1);
border-radius: var(--radius-12);
overflow: hidden;
min-height: 0;
}
.split-pane__head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--spacer-10) var(--spacer-16);
background: var(--bg-overlay-l1);
border-bottom: 1px solid var(--border-neutral-l1);
font: 600 var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family);
flex: 0 0 auto;
}
.split-pane__body { flex: 1 1 auto; overflow: hidden; position: relative; min-height: 0; }
/* 预览 iframe */
.preview-frame { width: 100%; height: 100%; border: 0; background: var(--bg-overlay-l1); }
/* 抽取字段展示 */
.field-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
height: 100%;
color: var(--text-tertiary); text-align: center; padding: var(--spacer-32);
}
.field-empty img { width: 56px; height: 56px; opacity: 0.4; margin-bottom: var(--spacer-12); }
#extractResult { height: 100%; overflow: auto; }
.extract-table { width: 100%; border-collapse: collapse; font: var(--body-base-font-size)/var(--body-base-line-height) var(--body-base-font-family); table-layout: fixed; }
.extract-table th,
.extract-table td { padding: var(--spacer-12) var(--spacer-16); border-bottom: 1px solid var(--border-neutral-l1); text-align: left; vertical-align: top; }
.extract-table th { background: var(--bg-overlay-l1); font-weight: 600; color: var(--text-secondary); font-size: var(--body-sm-font-size); }
.extract-table td { color: var(--text-default); overflow-wrap: anywhere; }
.extract-table__field-name { font-weight: 600; color: var(--text-default); word-break: break-word; }
.extract-table__field-key { font: 11px/16px var(--code-editor-font-family, monospace); color: var(--text-tertiary); margin-top: 2px; word-break: break-all; }
.extract-table__type { font: 11px/16px var(--code-editor-font-family, monospace); color: var(--text-tertiary); text-transform: uppercase; }
.extract-table__empty { color: var(--text-tertiary); font-style: italic; }
.extract-table__scalar { word-break: break-word; }
.extract-table__object { display: grid; grid-template-columns: 110px 1fr; gap: var(--spacer-6) var(--spacer-12); }
.extract-table__object-k { font: 12px/20px var(--code-editor-font-family, monospace); color: var(--text-tertiary); word-break: break-all; }
.extract-table__object-v { word-break: break-word; line-height: 20px; }
.extract-table__array { display: flex; flex-direction: column; gap: var(--spacer-12); }
.extract-table__array-item { border: 1px solid var(--border-neutral-l1); border-radius: var(--radius-8); overflow: hidden; }
.extract-table__array-item-head { padding: var(--spacer-8) var(--spacer-12); background: var(--bg-overlay-l1); font: 500 12px/18px var(--body-sm-font-family); color: var(--text-tertiary); border-bottom: 1px solid var(--border-neutral-l1); }
.extract-table__array-item-body { padding: 0; }
.extract-table--nested { font-size: 13px; line-height: 20px; }
.extract-table--nested th,
.extract-table--nested td { padding: var(--spacer-8) var(--spacer-12); }
.extract-table--nested th { background: transparent; font-weight: 500; color: var(--text-tertiary); width: 110px; }
.extract-table--nested td { color: var(--text-default); }
.extract-table--nested tr:last-child td { border-bottom: none; }
.extract-table--nested .extract-table__empty { font-style: italic; color: var(--text-tertiary); }
/* 模板管理弹框 */
.tpl-grid { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacer-16); min-height: 360px; }
@media (max-width: 800px) { .tpl-grid { grid-template-columns: 1fr; } }
.tpl-list { display: flex; flex-direction: column; border: 1px solid var(--border-neutral-l1); border-radius: var(--radius-8); overflow: hidden; }
.tpl-list__item {
display: flex; align-items: center; justify-content: space-between;
padding: var(--spacer-10) var(--spacer-12);
border-bottom: 1px solid var(--border-neutral-l1);
cursor: pointer;
transition: background 0.12s ease;
}
.tpl-list__item:last-child { border-bottom: none; }
.tpl-list__item:hover { background: var(--bg-overlay-l1); }
.tpl-list__item.is-active { background: var(--bg-overlay-l2); }
.tpl-list__item-name { font: 600 var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family); color: var(--text-default); display: flex; align-items: center; gap: var(--spacer-6); }
.tpl-list__item-meta { font: var(--body-xs-font-size, 12px)/16px var(--body-sm-font-family); color: var(--text-tertiary); }
.tpl-list__item-actions { display: flex; gap: var(--spacer-4); }
.tpl-detail {
border: 1px solid var(--border-neutral-l1); border-radius: var(--radius-8);
padding: var(--spacer-16);
background: var(--bg-base-secondary);
max-height: 360px; overflow-y: auto;
}
.tpl-detail__title { font: 600 var(--body-base-font-size)/var(--body-base-line-height) var(--body-base-font-family); margin-bottom: var(--spacer-8); }
.tpl-detail__desc { font: var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family); color: var(--text-secondary); margin-bottom: var(--spacer-12); }
.tpl-detail__field {
display: flex; align-items: center; justify-content: space-between;
padding: var(--spacer-6) var(--spacer-10);
background: var(--bg-base-default);
border: 1px solid var(--border-neutral-l1);
border-radius: var(--radius-4);
margin-bottom: 4px;
font: var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family);
}
.tpl-detail__field-key { font-family: var(--code-editor-font-family, monospace); color: var(--bg-brand); }
.tpl-detail__field-type {
display: inline-block;
padding: 1px 6px;
background: var(--bg-overlay-l2);
color: var(--text-tertiary);
border-radius: 3px;
font: 11px/16px var(--body-sm-font-family);
}
.tpl-empty {
display: flex; align-items: center; justify-content: center;
height: 100%; color: var(--text-tertiary);
}
/* 模板编辑子弹框 */
.field-editor-row {
display: grid;
grid-template-columns: 1fr 1.2fr 100px 1.5fr 36px;
gap: var(--spacer-6);
align-items: center;
padding: var(--spacer-6) 0;
border-bottom: 1px solid var(--border-neutral-l1);
}
.field-editor-row:last-child { border-bottom: none; }
.field-editor-row .ds-input,
.field-editor-row .ds-select { width: 100%; }
.field-editor-row .ds-btn--link.ds-btn--danger { padding: 0; }
.field-editor-add {
width: 100%;
padding: var(--spacer-8);
margin-top: var(--spacer-8);
background: none;
border: 1px dashed var(--border-neutral-l1);
border-radius: var(--radius-8);
color: var(--text-secondary);
cursor: pointer;
font: 500 var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family);
}
.field-editor-add:hover { color: var(--bg-brand); border-color: var(--bg-brand); }
/* 表单行 */
.form-row { margin-bottom: var(--spacer-12); }
.form-row label { display: block; font: 600 var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family); color: var(--text-default); margin-bottom: 4px; }
.form-row .hint { font: 12px/16px var(--body-sm-font-family); color: var(--text-tertiary); margin-top: 2px; }
.form-row .ds-input, .form-row .ds-select, .form-row .ds-textarea { width: 100%; }
.ds-input, .ds-select, .ds-textarea {
padding: 6px 10px;
border: 1px solid var(--border-neutral-l1);
border-radius: var(--radius-8);
background: var(--bg-base-default);
font: var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family);
color: var(--text-default);
box-sizing: border-box;
}
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
outline: none;
border-color: var(--bg-brand);
}
.ds-textarea { min-height: 60px; resize: vertical; }
/* Tag */
.tag {
display: inline-block; padding: 1px 6px;
background: var(--bg-brand);
color: var(--text-onbrand);
border-radius: 3px;
font: 500 11px/16px var(--body-sm-font-family);
}
.tag--default { background: var(--bg-brand); }
.tag--custom { background: var(--bg-overlay-l2); color: var(--text-secondary); }
/* Toast */
.toast {
position: fixed; bottom: 24px; right: 24px; z-index: 200;
padding: var(--spacer-12) var(--spacer-16);
background: var(--text-default);
color: var(--text-onbrand);
border-radius: var(--radius-8);
box-shadow: 0 8px 24px color-mix(in srgb, var(--text-default) 20%, transparent);
font: var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast--error { background: var(--status-error-default); }
.toast--success { background: var(--status-success-default); }
/* 加载遮罩 */
.loading-mask {
position: absolute; inset: 0; z-index: 10;
display: none; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--bg-base-default) 72%, transparent);
color: var(--text-secondary);
font: 500 var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family);
}
.loading-mask.is-visible { display: flex; }
/* 分阶段进度卡片 */
.progress-card {
width: min(480px, 92%);
padding: var(--spacer-20);
background: var(--bg-base-default);
border: 1px solid var(--border-neutral-l1);
border-radius: var(--radius-12);
box-shadow: 0 12px 40px color-mix(in srgb, var(--text-default) 12%, transparent);
text-align: center;
}
.progress-card__title {
font: 600 var(--body-base-font-size)/var(--body-base-line-height) var(--body-base-font-family);
color: var(--text-default);
margin-bottom: var(--spacer-14);
}
.progress-card__bar {
height: 8px;
background: var(--bg-overlay-l2);
border-radius: 999px;
overflow: hidden;
margin-bottom: var(--spacer-10);
}
.progress-card__fill {
height: 100%;
width: 0%;
background: var(--bg-brand);
border-radius: 999px;
transition: width 0.25s ease;
}
.progress-card__fill.is-error { background: var(--status-error-default); }
.progress-card__meta {
font: var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family);
color: var(--text-tertiary);
margin-bottom: var(--spacer-12);
}
.progress-card__logs {
text-align: left;
background: var(--bg-base-secondary);
border: 1px solid var(--border-neutral-l1);
border-radius: var(--radius-8);
padding: var(--spacer-12);
min-height: 76px;
}
.progress-card__logs-title {
font: 600 11px/16px var(--body-sm-font-family);
color: var(--text-tertiary);
margin-bottom: var(--spacer-8);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.progress-card__logs-list {
display: flex;
flex-direction: column;
gap: var(--spacer-6);
margin: 0;
padding: 0;
list-style: none;
font: 12px/18px var(--body-sm-font-family);
color: var(--text-secondary);
}
.progress-card__logs-list li {
position: relative;
padding-left: var(--spacer-12);
word-break: break-word;
}
.progress-card__logs-list li::before {
content: '';
position: absolute;
left: 0;
top: 7px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--bg-brand);
}
.progress-card__logs-list li.is-error { color: var(--status-error-default); }
.progress-card__logs-list li.is-error::before { background: var(--status-error-default); }
.progress-card__logs-empty {
text-align: center;
color: var(--text-tertiary);
font: var(--body-sm-font-size)/var(--body-sm-line-height) var(--body-sm-font-family);
}
/* ===== 移动端适配 (html.is-mobile / ≤768px) ===== */
/* 解除桌面 app 式窗口锁定，改为文档流自然滚动 */
html.is-mobile, html.is-mobile body { height: auto; overflow-x: hidden; }
html.is-mobile body { overflow-y: auto; }
html.is-mobile .page-shell { height: auto; overflow: visible; }
html.is-mobile .workspace { overflow: visible; }
html.is-mobile .extract-main {
max-width: none;
padding: var(--spacer-16);
/* 底部固定操作条留白 + 安全区 */
padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px));
overflow: visible;
}
/* Hero 压缩 */
html.is-mobile .extract-hero { margin-bottom: var(--spacer-12); }
html.is-mobile .extract-hero__title { font: 600 20px/28px var(--body-base-font-family); }
/* 操作条：固定底部（主操作整行置底），内容单列/自动换行 */
html.is-mobile .action-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
margin-bottom: 0;
border-radius: var(--radius-12) var(--radius-12) 0 0;
border-left: none; border-right: none; border-bottom: none;
padding: var(--spacer-10) var(--spacer-12) calc(var(--spacer-10) + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -4px 16px color-mix(in srgb, var(--text-default) 10%, transparent);
max-height: 42vh; overflow-y: auto;
}
html.is-mobile .action-bar__divider,
html.is-mobile .action-bar__spacer { display: none; }
html.is-mobile .action-bar__group { display: flex; flex: 1 1 100%; min-width: 0; }
html.is-mobile .action-bar__label { flex: 0 0 auto; }
html.is-mobile .action-bar__select,
html.is-mobile .action-bar__mode { flex: 1 1 auto; min-width: 0; max-width: none; }
html.is-mobile .action-bar .ds-btn--sm { flex: 1 1 auto; justify-content: center; }
html.is-mobile .action-bar__file-info { flex: 1 1 100%; max-width: none; white-space: normal; }
html.is-mobile .action-bar .ds-btn--brand { flex: 1 1 100%; justify-content: center; order: 9; }
/* 预览/结果双栏：上下堆叠，各给固定可视高度 */
html.is-mobile .split { flex: none; overflow: visible; gap: var(--spacer-12); }
html.is-mobile .split-pane__body { height: min(62vh, 520px); }
/* 弹窗近全屏：覆盖内联 width/max-width */
html.is-mobile .modal-overlay { padding: var(--spacer-8); }
html.is-mobile .ds-dialog {
width: 100% !important;
max-width: 100% !important;
max-height: calc(100vh - 16px);
max-height: calc(100dvh - 16px - env(safe-area-inset-bottom, 0px));
}
html.is-mobile .field-editor-row { grid-template-columns: 1fr 1fr; }
/* Toast 上移避开固定操作条与 FAB */
html.is-mobile .toast {
left: var(--spacer-16); right: var(--spacer-16);
bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 480px) {
html.is-mobile .extract-main {
padding: var(--spacer-12);
padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px));
}
html.is-mobile .split-pane__body { height: 56vh; }
html.is-mobile .field-editor-row { grid-template-columns: 1fr; }
html.is-mobile .extract-table__object { grid-template-columns: 88px 1fr; }
}