/* ── Beta 徽章 ── */
.beta-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: linear-gradient(135deg, #7C3AED, #2563EB);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: 0.5px;
    margin-left: 8px;
}

/* ── 模板上传卡片 ── */
.template-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 24px;
    margin-top: 16px;
}
.template-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.template-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
}
.template-card-desc {
    font-size: 13px;
    color: #6B7280;
    margin-top: 2px;
}
.template-optional-badge {
    margin-left: auto;
    padding: 2px 10px;
    background: #F1F5F9;
    color: #64748B;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
}
.template-drop-zone {
    border: 2px dashed #CBD5E1;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #F8FAFC;
}
.template-drop-zone:hover,
.template-drop-zone.drag-over {
    border-color: #7C3AED;
    background: #F5F3FF;
}
.template-drop-zone-hint {
    font-size: 13px;
    color: #6B7280;
    margin-top: 4px;
}
.template-drop-zone-formats {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.format-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
}
.format-badge.excel { background: transparent; color: #356348; border: 1px solid #b9cbbf; }
.format-badge.word  { background: transparent; color: #315a96; border: 1px solid #bdcbe0; }

/* ── 模板上传后已选文件的展示 ── */
.template-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #F5F3FF;
    border: 1px solid #DDD6FE;
    border-radius: 10px;
    margin-top: 10px;
}
.template-selected-name {
    font-size: 13px;
    font-weight: 600;
    color: #5B21B6;
    flex: 1;
}
.template-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #9CA3AF;
    padding: 2px;
    display: flex;
    align-items: center;
}
.template-remove-btn:hover { color: #EF4444; }

/* ── AI 解析中指示器 ── */
.template-analyzing {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #EEF2FF;
    border-radius: 10px;
    font-size: 13px;
    color: #4338CA;
    font-weight: 500;
    margin-top: 12px;
}
.spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid #C7D2FE;
    border-top-color: #4338CA;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 字段确认面板 ── */
.field-confirm-panel {
    margin-top: 16px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
}
.field-confirm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
}
.field-confirm-title {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}
.field-confirm-subtitle {
    font-size: 12px;
    color: #6B7280;
    margin-top: 2px;
}
.field-confirm-actions {
    display: flex;
    gap: 8px;
}
.btn-xs {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #374151;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s;
}
.btn-xs:hover { background: #F1F5F9; }
.field-confirm-list {
    max-height: 280px;
    overflow-y: auto;
}
.field-confirm-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #F1F5F9;
    transition: background 0.1s;
    cursor: pointer;
}
.field-confirm-item:last-child { border-bottom: none; }
.field-confirm-item:hover { background: #FAFAFA; }
.field-confirm-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #7C3AED;
    flex-shrink: 0;
}
.selected-file-remove svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.field-confirm-label {
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
    min-width: 120px;
}
.field-confirm-desc {
    font-size: 12px;
    color: #6B7280;
    flex: 1;
}
.field-location {
    flex-shrink: 0;
    padding: 2px 7px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface-mist);
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.field-location-label {
    margin-right: 4px;
    color: var(--color-text-muted);
    font-weight: 500;
}
.field-location--empty {
    color: var(--color-text-muted);
    font-weight: 500;
    font-style: italic;
}
.field-required-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: #FEF2F2;
    color: #DC2626;
    flex-shrink: 0;
}
.field-optional-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: #F1F5F9;
    color: #64748B;
    flex-shrink: 0;
}
.field-confirm-footer {
    padding: 10px 16px;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #6B7280;
}
.field-count-badge {
    font-weight: 700;
    color: #7C3AED;
}

/* ── 输出格式指示器 ── */
.output-format-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    padding: 8px 14px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 8px;
    margin-top: 12px;
    font-weight: 500;
}
.output-format-indicator.word {
    background: #EFF6FF;
    border-color: #BFDBFE;
}

/* ── 完成画面的输出格式徽章 ── */
.result-output-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
}
.result-output-badge.excel {
    background: #DCFCE7;
    color: #15803D;
}
.result-output-badge.word {
    background: #DBEAFE;
    color: #1D4ED8;
}

/* ── 下载按钮（Word 用） ── */
.btn-download-word {
    background: linear-gradient(135deg, #1D4ED8, #2563EB);
}

/* ── 模式切换标签 ── */
.mode-tabs {
    display: flex;
    gap: 0;
    background: #F1F5F9;
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 16px;
}
.mode-tab {
    flex: 1;
    padding: 8px 16px;
    border: none;
    background: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.2s;
}
.mode-tab.active {
    background: #fff;
    color: #1E293B;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.extract-mode-tabs {
    display: flex;
    gap: 0;
    background: #F1F5F9;
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 16px;
}
.extract-mode-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.extract-mode-tab.active {
    background: #fff;
    color: #1E293B;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.extract-mode-tab:hover:not(.active) {
    color: #374151;
}

/* 关键词输入区域 */
.keyword-input-area {
    margin-top: 12px;
}
.keyword-input-area textarea {
    width: 100%;
    min-height: 80px;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.keyword-input-area textarea:focus {
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
.keyword-input-hint {
    font-size: 12px;
    color: #9CA3AF;
    margin-top: 6px;
}
.keyword-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.keyword-example-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s;
}
.keyword-example-chip:hover {
    background: #EDE9FE;
    border-color: #C4B5FD;
    color: #5B21B6;
}

/* AI 自动检测按钮 */
.ai-detect-area {
    margin-top: 12px;
    text-align: center;
}
.btn-ai-detect {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #7C3AED, #2563EB);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-ai-detect:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}
.btn-ai-detect:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.ai-detect-hint {
    font-size: 12px;
    color: #9CA3AF;
    margin-top: 10px;
}
.keyword-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: #7C3AED;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
    transition: all 0.15s;
}
.keyword-apply-btn:hover {
    background: #6D28D9;
}
.keyword-apply-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Branded workbench structure */
.beta-workbench {
  --beta-upload-min-height: clamp(280px, 34vh, 320px);
  width: min(100%, 1240px);
  max-width: none;
  margin: 0 auto;
  min-height: 100%;
  padding: 28px clamp(24px, 3vw, 40px) 48px;
}

.beta-workbench .page-header {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

.beta-workbench .page-title {
  color: var(--color-text);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  letter-spacing: -0.025em;
}

.beta-workbench .page-desc {
  max-width: 72ch;
  color: var(--color-text-secondary);
}

.workbench-section {
  min-width: 0;
  margin: 0;
  padding: 26px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
}

.workbench-grid {
  display: block;
}

.workbench-grid > .workbench-section { max-width: 920px; margin: 0 auto; }

.workbench-section--primary {
  box-shadow: inset 0 2px 0 var(--color-brand-bright);
}

.workbench-section__header {
  margin-bottom: var(--space-5);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.workbench-section__header > .ui-badge { align-self: flex-start; }

.workbench-section__title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-lg);
}

.workbench-section__description,
.workbench-section__limits {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.file-drop {
  min-height: 148px;
  padding: 28px 24px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: default;
  transition: border-color var(--motion-fast), background-color var(--motion-fast), box-shadow var(--motion-fast);
}

.file-drop:hover,
.file-drop.drag-over {
  background: var(--color-surface-subtle);
}

.workbench-grid > .workbench-section + .workbench-section { margin: 18px auto 0; }

.workbench-template-drop {
  min-height: 104px;
  padding: 20px 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--color-text-secondary);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.workbench-template-drop:hover,
.workbench-template-drop.drag-over { background: var(--color-surface-subtle); }
.workbench-template-drop > svg { flex-shrink: 0; color: var(--color-brand-bright); }
.workbench-template-drop__text { min-width: 0; }
.workbench-template-drop__text strong { display: block; color: var(--color-text); font-size: var(--font-size-md); font-weight: 600; }
.workbench-template-drop__text span { display: block; margin-top: 3px; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.workbench-template-formats { color: var(--color-text-muted); font-size: var(--font-size-sm); white-space: nowrap; }

.preset-picker { position: relative; margin-top: 0; align-self: flex-start; }
.preset-modal { max-width: 860px; }
.preset-browser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: start;
  margin-top: 4px;
}
.preset-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.preset-modal-card {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out);
}
.preset-modal-card:hover { border-color: var(--color-brand-bright); }
.preset-modal-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-focus-ring) 62%, transparent);
  outline-offset: 2px;
}
.preset-modal-card.is-active {
  border-color: var(--color-brand-bright);
  background: color-mix(in srgb, var(--color-brand-bright) 5%, var(--color-surface));
  box-shadow: inset 0 0 0 1px var(--color-brand-bright);
}
.preset-modal-card__preview,
.preset-modal-card__fallback { display: none; }
.preset-modal-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.preset-modal-card__name {
  min-width: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.preset-modal-card__meta {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: 11px;
  white-space: nowrap;
}
.preset-browser__preview {
  position: sticky;
  top: 0;
  aspect-ratio: 4 / 3;
  min-height: 180px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface-mist);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preset-browser__preview img { display: none; width: 100%; height: 100%; object-fit: contain; }
.preset-browser__preview img.is-visible { display: block; }
.preset-browser__preview-empty {
  padding: 24px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  text-align: center;
}
.preset-browser__preview-empty[hidden] { display: none; }
.template-upload-separator {
  margin: 16px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

.file-drop__icon {
  width: 34px;
  height: 34px;
  margin: 0;
  color: var(--color-brand-bright);
}

.file-drop__icon svg { width: 100%; height: 100%; }
.file-drop__title { margin: 0; color: var(--color-text); font-size: var(--font-size-md); }
.file-drop__hint { margin: 4px 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }

.workbench-section--primary .file-drop > div {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.workbench-section--primary .file-drop__icon { width: 38px; height: 38px; }
.workbench-section--primary .file-drop__title { font-size: var(--font-size-lg); font-weight: 600; }
.workbench-section--primary .drop-zone-buttons { margin-top: 0; }

.selected-files-list {
  margin: 16px 0 0;
  border: 0;
  border-radius: 0;
}
.selected-file-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}

.workbench-error[hidden] { display: none; }

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

.task-reconnect,
.task-error { margin-top: var(--space-4); }
.task-reconnect[hidden],
.task-error[hidden],
.task-recovery-actions[hidden] { display: none; }
.task-recovery-actions {
  margin-top: var(--space-4);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}
.progress-bar-fill.is-failed { background: var(--color-danger); }
.progress-bar-fill.is-complete { background: var(--color-success); }

.workbench-actions {
  margin-top: var(--space-5);
  padding-top: 0;
  border-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.workbench-actions__hint {
  max-width: 66ch;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.field-settings-description {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.keyword-example-chip {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-brand-deep);
  cursor: pointer;
}

.keyword-example-chip:focus-visible,
.extract-mode-tab:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-focus-ring) 62%, transparent);
  outline-offset: 2px;
}

.ai-detect-area[hidden] { display: none; }

@media (max-width: 640px) {
  .workbench-section__header,
  .workbench-actions { align-items: stretch; flex-direction: column; }
  .workbench-actions .ui-button { width: 100%; }
  .workbench-section__header > .ui-badge { align-self: flex-start; }
  .preset-browser { grid-template-columns: 1fr; }
  .preset-template-grid { grid-template-columns: 1fr; }
  .preset-browser__preview { position: static; min-height: 160px; }
}

@media (max-width: 1040px) {
  .workbench-grid { display: block; }
}

@media (max-width: 560px) {
  .beta-workbench { padding: 22px 16px 40px; }
  .workbench-section--primary .file-drop { min-height: 132px; padding: 24px 16px; }
  .workbench-section--primary .drop-zone-buttons { width: min(100%, 260px); }
  .workbench-section--primary .drop-zone-buttons .ui-button { width: 100%; }
  .workbench-template-drop { min-height: 96px; padding: 20px 16px; flex-direction: column; text-align: center; }
  .workbench-template-formats { white-space: normal; }
}

#state-idle {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}

.beta-upload-dropzone {
  min-height: var(--beta-upload-min-height);
  padding: 56px 32px 34px;
  border: 1px solid #e7eef8;
  border-radius: 20px;
  background: rgb(255 255 255 / 84%);
  box-shadow: 0 14px 42px rgb(64 103 151 / 4%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: border-color var(--motion-standard), background-color var(--motion-standard);
}

.beta-upload-dropzone:hover,
.beta-upload-dropzone.drag-over {
  border-color: #9bc4f6;
  background: #fbfdff;
}

.beta-upload-illustration-slot {
  width: 116px;
  height: 102px;
  margin-bottom: 16px;
}

.beta-upload-illustration-slot img { width: 100%; height: 100%; display: block; object-fit: contain; }

.beta-upload-dropzone h2 {
  margin: 0;
  color: #11284f;
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 720;
  letter-spacing: -0.02em;
}

.beta-upload-dropzone > p {
  margin: 10px 0 26px;
  color: var(--color-text-muted);
  font-size: 14px;
}

.beta-upload-dropzone .ui-button {
  min-width: 190px;
  min-height: 52px;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgb(20 115 230 / 20%);
}

.beta-upload-dropzone .ui-button svg,
.beta-upload-safety svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.beta-upload-safety {
  margin-top: 36px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.beta-upload-actions {
  padding: 14px 4px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.beta-upload-actions p { margin: 0; color: var(--color-text-muted); font-size: 12px; }
.beta-upload-actions .ui-button:disabled { display: none; }

.template-workspace {
  margin-top: 18px;
  padding-top: 24px;
  border-top: 1px solid #e5edf7;
}

.template-workspace-head {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.template-source-tabs {
  display: flex;
  align-items: center;
  gap: 28px;
}

.template-source-tab {
  position: relative;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 15px;
  cursor: pointer;
}

.template-source-tab.is-active {
  color: var(--color-brand-bright);
  font-weight: 600;
}

.template-source-tab.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--color-brand-bright);
}

.template-source-tab:focus-visible,
.template-library-more:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-focus-ring) 46%, transparent);
  outline-offset: 3px;
}

.template-library-more {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--color-brand-bright);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.template-library-more:hover { color: var(--color-brand-deep); }

.template-library-notice {
  margin: 0 0 12px;
  color: var(--color-text-muted);
  font-size: 13px;
}

@media (max-width: 1020px) {
  .beta-workbench {
    --beta-upload-min-height: 260px;
  }
}

@media (max-width: 640px) {
  .template-workspace-head {
    align-items: center;
  }

  .template-source-tabs {
    gap: 20px;
  }

  [data-template-panel="upload"] {
    min-height: 120px;
  }
}

.template-library-viewport {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(248px, 1fr);
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding: 6px 2px 10px;
}

.template-library-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe8f3;
  border-radius: 14px;
  color: var(--color-text);
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 7px 22px rgb(50 89 137 / 5%);
  text-align: left;
  cursor: pointer;
  perspective: 1000px;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.template-library-card:hover { border-color: #a7c8ef; }
.template-library-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-focus-ring) 60%, transparent); outline-offset: 2px; }
.template-library-card.is-active { border-color: #1d79eb; box-shadow: 0 6px 16px rgb(32 119 226 / 10%); }

.template-library-card__top {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 8px 12px;
  background: rgb(255 255 255 / 94%);
  border-top: 1px solid #edf2f8;
}
.template-library-card--flat { display: flex; align-items: center; }
.template-library-card--flat .template-library-card__top {
  position: static;
  width: 100%;
  background: transparent;
  border-top: 0;
}
.template-library-card__top > span:last-child { min-width: 0; display: grid; gap: 3px; }
.template-library-card__top strong { overflow: hidden; color: #20385c; font-size: 13px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.template-library-card__scene {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-file-type {
  width: 25px;
  height: 25px;
  border-radius: 5px;
  color: white;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  flex: none;
}

.template-file-type--excel { background: #198754; }
.template-file-type--word { background: #2368c4; }

.template-library-card-wrap {
  position: relative;
  scroll-snap-align: start;
}

/* 横滑边缘淡出由 .template-library-viewport 的 mask-image 承担（配合 is-scroll-start/end） */

/* 内容自身在边缘 alpha 淡出：消除容器硬裁切产生的竖直切口线 */
.template-library-viewport {
  --edge-fade: 48px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent 100%);
}

.template-library-viewport.is-scroll-start {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--edge-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--edge-fade)), transparent 100%);
}

.template-library-viewport.is-scroll-end {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--edge-fade), #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--edge-fade), #000 100%);
}

.template-library-viewport.is-scroll-start.is-scroll-end {
  -webkit-mask-image: none;
  mask-image: none;
}

.template-library-card__preview {
  position: absolute;
  inset: 0 0 52px 0;
  overflow: hidden;
  background: #f8fbfe;
  /* 内描边 + 底部极浅内投影：融入卡片氛围但不遮字段（替代旧渐变 fade） */
  box-shadow:
    inset 0 0 0 1px #edf2f8,
    inset 0 -14px 18px -12px rgb(32 56 92 / 16%);
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.template-library-card__preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* hover / 键盘聚焦时内容面板自底部翻起（移植自 flip-card 效果） */
.template-library-card__panel {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  background: #f8fbfe;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  backface-visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.template-library-card:hover .template-library-card__panel,
.template-library-card:focus-visible .template-library-card__panel { transform: rotateX(0deg); }

.template-library-card:hover .template-library-card__preview { transform: scale(0.88); }

.template-library-card__panel strong {
  overflow: hidden;
  color: #20385c;
  font-size: 14px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-library-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* 触屏无 hover：不翻板，元数据条常驻 */
@media (hover: none) {
  .template-library-card__panel { display: none; }
}

.template-library-card__zoom {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 50%;
  color: #fff;
  background: rgb(32 56 92 / 58%);
  cursor: pointer;
  transition: background var(--motion-fast);
}

.template-library-card__zoom:hover { background: rgb(32 56 92 / 80%); }
.template-library-card__zoom:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-focus-ring) 60%, transparent); outline-offset: 2px; }

.template-library-card__check {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 4;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid #637895;
  color: transparent;
  background: rgb(255 255 255 / 86%);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}

.template-library-card.is-active .template-library-card__check { border-color: #1a78ea; color: #fff; background: #1a78ea; }

.template-upload-dropzone[hidden] { display: none; }

.template-active-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #cfe0f2;
  border-radius: 12px;
  background: #f8fbfe;
}
.template-active-summary > div:first-child { min-width: 0; display: grid; gap: 4px; }
.template-active-summary strong { overflow: hidden; color: #173457; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.template-active-summary span { color: var(--color-text-muted); font-size: 12px; }
.template-active-actions { display: flex; flex: none; gap: 6px; }

@media (max-width: 760px) {
  .beta-workbench { padding: 20px 16px 34px; }
  .beta-upload-dropzone { min-height: 380px; padding: 42px 20px 28px; }
  .beta-upload-actions { align-items: stretch; flex-direction: column; }
  .beta-upload-actions .ui-button:not(:disabled) { width: 100%; }
  .template-library-viewport { grid-auto-columns: minmax(240px, 82vw); }
}

@media (prefers-reduced-motion: reduce) {
  .beta-upload-dropzone,
  .template-library-card,
  .template-library-card__preview,
  .template-library-card__panel,
  .template-library-card__zoom { transition-duration: 1ms; }
  .template-library-card:hover .template-library-card__preview { transform: none; }
}

/* ── Full template preview modal ───────────────────────────────────────── */
.template-preview-modal {
  width: min(100% - 2rem, 46rem);
  padding: 0;
  overflow: hidden;
}

.template-preview-modal::backdrop { background: rgb(16 32 54 / 45%); }

.template-preview-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid #dfe8f3;
}

.template-preview-modal__head strong {
  overflow: hidden;
  color: #20385c;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-preview-modal img {
  display: block;
  width: 100%;
  max-height: min(72vh, 760px);
  object-fit: contain;
  background: #f8fbfe;
}

/* ── Template extraction demo（页内 state：左示例原文 / 右提取结果） ────── */
#state-demo { padding: 10px 4px 30px; }

#state-demo:focus { outline: none; }

.demo-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }

.demo-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  color: #20385c;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--motion-fast);
}

.demo-back:hover { border-color: #a7c8ef; }
.demo-back:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-focus-ring) 60%, transparent); outline-offset: 2px; }

.demo-head strong {
  overflow: hidden;
  color: #20385c;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-demo-hint { margin: 0 0 12px; color: var(--color-text-muted); font-size: 12px; }

.template-demo-body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 16px;
  align-items: start;
}

.template-demo-source {
  display: grid;
  gap: 12px;
  align-content: start;
  overflow: auto;
  max-height: calc(100vh - 240px);
  padding: 14px;
  border: 1px solid #e3eaf3;
  border-radius: 10px;
  background: #eef2f7;
}

.template-demo-source img {
  display: block;
  width: 100%;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 14px rgb(30 50 80 / 12%);
}

.template-demo-result {
  overflow: auto;
  max-height: calc(100vh - 240px);
  padding: 14px 16px;
  border: 1px solid #e3eaf3;
  border-radius: 10px;
  background: #fff;
}

.template-demo-result__caption { margin: 0 0 10px; color: var(--color-text-muted); font-size: 12px; }

.template-demo-filled { display: grid; gap: 12px; align-content: start; }

.template-demo-filled img {
  display: block;
  width: 100%;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 14px rgb(30 50 80 / 12%);
}

@media (max-width: 900px) {
  .template-demo-body { grid-template-columns: 1fr; }
  .template-demo-source { max-height: 46vh; }
}

/* ── Reference-aligned template field drawer ───────────────────────────── */
.template-field-drawer {
  position: fixed;
  top: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 340;
  width: 384px;
  border: 1px solid #e4ecf6;
  border-radius: 20px;
  background: rgb(255 255 255 / 97%);
  box-shadow: -14px 0 44px rgb(45 82 126 / 12%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(calc(100% + 34px));
  visibility: hidden;
  transition: transform var(--motion-standard), visibility var(--motion-standard);
}

.template-field-drawer.is-open { transform: translateX(0); visibility: visible; }

.template-drawer-header {
  min-height: 82px;
  padding: 18px 52px 12px 22px;
  position: relative;
}

.template-drawer-header #tmpl-selected { margin: 0; }
.template-drawer-header .template-selected {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.template-drawer-header .template-selected-name {
  overflow: hidden;
  color: #172d4f;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.template-drawer-header .template-selected-copy { min-width: 0; display: grid; gap: 5px; }
.template-drawer-header .template-selected-meta { width: fit-content; padding: 4px 8px; border-radius: 5px; color: var(--color-text-muted); background: #f2f6fb; font-size: 11px; line-height: 1; }
.template-drawer-header .template-remove-btn { display: none; }

.template-drawer-close {
  position: absolute;
  top: 17px;
  right: 16px;
}
.template-drawer-close svg,
.template-drawer-restore svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.template-drawer-preview {
  height: 160px;
  flex: none;
  margin: 0 22px 14px;
  border: 1px solid #e4ebf4;
  border-radius: 9px;
  background: #f8fbfe;
  overflow: hidden;
}
.template-drawer-preview img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; }
.template-drawer-preview-empty { height: 100%; padding: 20px; color: var(--color-text-muted); display: grid; place-items: center; text-align: center; font-size: 12px; }
.template-drawer-preview-empty[hidden] { display: none; }

.template-field-drawer > .template-analyzing,
.template-field-drawer > .workbench-error,
.template-field-drawer > #output-format-indicator { margin: 0 22px 10px; }

.template-drawer-tabs {
  min-height: 48px;
  padding: 0 22px;
  border-bottom: 1px solid #e8eef6;
  display: flex;
  gap: 30px;
}
.template-drawer-tab {
  position: relative;
  padding: 0 2px;
  border: 0;
  color: #536985;
  background: transparent;
  cursor: pointer;
  font: 600 13px/1 var(--font-sans);
}
.template-drawer-tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: transparent;
}
.template-drawer-tab.is-active { color: #1473e6; }
.template-drawer-tab.is-active::after { background: #1473e6; }
.template-drawer-tab:focus-visible { outline: 3px solid rgb(24 119 232 / 22%); outline-offset: 3px; }

.template-drawer-panel { min-height: 0; padding: 0 14px 12px; overflow: auto; flex: 1; }
.template-drawer-panel[hidden] { display: none; }
.template-drawer-panel .field-confirm-panel { margin: 0; border: 0; border-radius: 0; overflow: visible; }
.template-drawer-panel .field-confirm-header { padding: 16px 8px 12px; border: 0; background: transparent; }
.template-drawer-panel .field-confirm-subtitle { display: none; }
.template-drawer-panel .field-confirm-actions { gap: 5px; }
.template-drawer-panel .btn-xs { padding: 5px 7px; border: 0; color: #1473e6; background: transparent; }
.template-drawer-panel .field-confirm-list { max-height: none; overflow: visible; }
.template-drawer-panel .field-confirm-item {
  min-height: 50px;
  margin-bottom: 7px;
  padding: 9px 10px;
  border: 1px solid #e8eef6;
  border-radius: 9px;
  background: #fff;
  flex-wrap: nowrap;
  gap: 9px;
  box-shadow: 0 2px 8px rgb(37 72 113 / 3%);
}
.template-drawer-panel .field-confirm-item:last-child { border-bottom: 1px solid #e8eef6; }
.template-drawer-panel .field-confirm-item input[type="checkbox"] { accent-color: #1676ef; }
.template-drawer-panel .field-confirm-label { min-width: 0; flex: 1; font-size: 12px; }
.template-drawer-panel .field-confirm-desc,
.template-drawer-panel .field-required-badge,
.template-drawer-panel .field-optional-badge,
.template-drawer-panel .field-location-label { display: none; }
.template-drawer-panel .field-location { padding: 0; border: 0; color: #586d8c; background: transparent; font-size: 11px; }
.template-drawer-panel .field-confirm-footer { padding: 9px 8px 4px; border: 0; background: transparent; }

.template-info-list { margin: 8px; }
.template-info-list > div { padding: 15px 4px; border-bottom: 1px solid #edf2f7; display: grid; grid-template-columns: 105px 1fr; gap: 14px; }
.template-info-list dt { color: var(--color-text-muted); font-size: 12px; }
.template-info-list dd { margin: 0; color: #213958; font-size: 12px; overflow-wrap: anywhere; }

.template-drawer-footer {
  flex: none;
  padding: 14px 20px;
  border-top: 1px solid #e7edf5;
  background: rgb(255 255 255 / 96%);
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 10px;
}
.template-drawer-footer .ui-button { min-height: 43px; border-radius: 9px; }

.template-drawer-restore {
  position: fixed;
  top: 46%;
  right: 0;
  z-index: 330;
  width: 42px;
  height: 64px;
  border: 1px solid #e2eaf4;
  border-right: 0;
  border-radius: 32px 0 0 32px;
  color: #315176;
  background: #fff;
  box-shadow: -6px 7px 22px rgb(45 78 119 / 10%);
  cursor: pointer;
}
.template-drawer-overlay { display: none; }
.template-drawer-overlay:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 325;
  display: block;
  border: 0;
  background: rgb(14 37 68 / 28%);
}

@media (max-width: 640px) {
  .template-field-drawer { top: 8px; right: 8px; bottom: 8px; width: calc(100vw - 16px); border-radius: 16px; }
  .template-drawer-header { min-height: 76px; padding-left: 18px; }
  .template-drawer-preview { margin-inline: 18px; }
  .template-drawer-tabs { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .template-field-drawer { transition-duration: 1ms; }
}

/* ===== Upload Card ===== */
.upload-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
}

/* 两段上传（合同书 / 结算单） */
.drop-zones-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 24px;
}

.drop-zone-slot {
  display: flex;
  flex-direction: column;
}

.drop-zone-slot-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 10px;
}

.drop-zone-slot-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.drop-zone-slot-badge-blue { background: #2563EB; }
.drop-zone-slot-badge-emerald { background: #059669; }
.drop-zone-slot-badge-violet { background: #7C3AED; }

/* 整体上传为全宽（横跨 grid 的全部列） */
.drop-zone-slot-full { grid-column: 1 / -1; }

/* 布局内解除拖放区的外侧 margin（用 grid gap 取间距） */
.drop-zones-row .drop-zone { margin: 0; }

.drop-zone {
  margin: 24px;
  padding: 48px 24px;
  border: 2px dashed #CBD5E1;
  border-radius: 12px;
  background: #F8FAFC;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.drop-zone:hover, .drop-zone.highlight {
  border-color: #2563EB;
  background: #EFF6FF;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.08);
}

.drop-zone-icon { margin-bottom: 4px; }

.drop-zone-title {
  font-size: 17px;
  font-weight: 600;
  color: #1E293B;
}

.drop-zone-hint {
  font-size: 13px;
  color: #94A3B8;
}

.drop-zone-buttons {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.drop-zone.has-file {
  border-color: #22C55E;
  background: #F0FDF4;
}

.drop-zone.has-file .drop-zone-title { color: #16A34A; }

.upload-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid #F1F5F9;
}

.upload-footer-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748B;
}

.btn-upload { min-width: 120px; }

/* ===== Progress Card ===== */
.progress-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.progress-header { margin-bottom: 12px; }

.progress-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2563EB;
}

.progress-status-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.progress-text {
  font-size: 18px;
  font-weight: 600;
  color: #1E293B;
}

.progress-percent {
  font-size: 28px;
  font-weight: 700;
  color: #0F172A;
}

.progress-bar-track {
  width: 100%;
  height: 10px;
  background: #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563EB, #3B82F6);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.progress-hint {
  font-size: 13px;
  color: #94A3B8;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===== Stats Row ===== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.stat-icon-blue  { background: #EFF6FF; }
.stat-icon-green { background: #F0FDF4; }
.stat-icon-purple { background: #F5F3FF; }

.stat-label {
  font-size: 13px;
  color: #64748B;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #0F172A;
}

/* ===== Logs Card ===== */
.logs-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
}

.logs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #F1F5F9;
}

.logs-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1E293B;
}

.logs-live-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #059669;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 999px;
  padding: 3px 10px;
  animation: pulse-live 2s infinite;
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.logs-body {
  padding: 16px 20px;
  max-height: 240px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.8;
  color: #475569;
}

.log-empty {
  color: #94A3B8;
  text-align: center;
  padding: 24px;
}

.log-line {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.log-time { color: #94A3B8; white-space: nowrap; }

.log-tag {
  font-weight: 700;
  padding: 0 2px;
  border-radius: 3px;
  white-space: nowrap;
}

.log-tag-success { color: #16A34A; }
.log-tag-info    { color: #2563EB; }
.log-tag-warn    { color: #D97706; }

.log-msg { color: #334155; }

/* ===== Complete Hero ===== */
.complete-hero {
  text-align: center;
  padding: 32px 0 24px;
}

.complete-check { margin-bottom: 16px; }

.complete-title {
  font-size: 32px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
}

.complete-desc {
  font-size: 15px;
  color: #64748B;
  line-height: 1.5;
}

/* ===== File Info Card ===== */
.file-info-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.file-info-title {
  font-size: 16px;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 16px;
}

.file-info-rows {
  display: flex;
  flex-direction: column;
}

.file-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #F1F5F9;
}

.file-info-row:last-child { border-bottom: none; }

.file-info-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748B;
}

.file-info-value {
  font-size: 14px;
  font-weight: 500;
  color: #1E293B;
}

.file-source-badge {
  min-width: 78px;
  padding: 4px 10px;
  border-radius: 999px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.file-source-badge[data-source="native"] { background: #DBEAFE; color: #1D4ED8; }
.file-source-badge[data-source="scan"] { background: #FEF3C7; color: #B45309; }
.file-source-badge[data-source="photo"] { background: #F3E8FF; color: #7E22CE; }
.file-source-badge[data-source="unknown"] { background: #E2E8F0; color: #475569; }

.status-badge {
  background: #DCFCE7;
  color: #16A34A;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}

.complete-file-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 28px auto 0;
}

.complete-file-action {
  display: inline-flex;
  width: 140px;
  min-height: 45px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 0 6px rgb(169 192 218 / 82%);
  cursor: pointer;
  font: 500 15px/20px var(--font-sans);
}

.complete-file-action img { width: 24px; height: 24px; }
.complete-file-action--download { color: #4172e4; background: #fff; }
.complete-file-action--preview { color: #fafbfd; background: #4172e4; }
.complete-file-action:hover { transform: translateY(-1px); }
.complete-file-action:focus-visible { outline: 3px solid rgb(65 114 228 / 30%); outline-offset: 3px; }

.complete-actions {
  display: flex;
  gap: 12px;
}

.btn-action {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  font-size: 15px;
}

/* ===== Recent Section ===== */
.recent-section { margin-top: 32px; }

.recent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.recent-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1E293B;
}

.recent-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 16px;
}

.recent-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #FEF2F2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.recent-item-info { flex: 1; min-width: 0; }

.recent-item-name {
  font-size: 14px;
  font-weight: 500;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-item-meta {
  font-size: 12px;
  color: #94A3B8;
}

/* ===== Upload Tip ===== */
.upload-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 24px 0;
  padding: 10px 14px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 8px;
  font-size: 13px;
  color: #1D4ED8;
  line-height: 1.5;
}

.upload-tip svg { flex-shrink: 0; margin-top: 1px; }

/* ===== Selected Files List ===== */
.selected-files-list {
  margin: 0 24px 12px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  overflow: hidden;
}

.selected-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #F1F5F9;
  font-size: 13px;
}

.selected-file-item:last-child { border-bottom: none; }

.selected-file-name {
  flex: 1;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selected-file-size {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.selected-file-remove {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s;
}

.selected-file-remove:hover { color: #EF4444; }

/* ===== Extracted Table ===== */
.extracted-table-container {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
  margin-bottom: 24px;
}

.extracted-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #F1F5F9;
}

.extracted-table-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1E293B;
}

.extracted-summary {
  font-size: 13px;
  font-weight: 600;
  color: #64748B;
  background: #F1F5F9;
  padding: 4px 12px;
  border-radius: 999px;
}

.manual-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 13px;
}

.manual-hint-warn {
  background: #FFFBEB;
  color: #92400E;
  border-bottom: 1px solid #FDE68A;
}

.manual-hint-info {
  background: #EFF6FF;
  color: #1D4ED8;
  border-bottom: 1px solid #BFDBFE;
}

.extracted-table-wrap { overflow-x: auto; }

.extracted-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.extracted-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748B;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  white-space: nowrap;
}

.extracted-table tbody tr {
  border-bottom: 1px solid #F1F5F9;
  transition: background 0.1s;
  background: #fff;
}

.extracted-table tbody tr:last-child { border-bottom: none; }
.extracted-table tbody tr:hover { background: #F8FAFC; }
.extracted-table tbody tr.row-empty { background: #FFFBEB; }
.extracted-table tbody tr.row-inferred { background: #FFF7ED; }

.extracted-table td {
  padding: 10px 14px;
  color: #374151;
  vertical-align: middle;
}

.extracted-table td:first-child {
  color: #94A3B8;
  font-size: 12px;
  width: 36px;
  text-align: center;
}

.field-label {
  font-weight: 500;
  color: #1E293B;
  min-width: 150px;
}

.field-cell {
  font-size: 12px;
  color: #64748B;
  white-space: nowrap;
  width: 60px;
  min-width: 60px;
  text-align: center;
}

.field-value-cell { min-width: 180px; }

.field-source {
  font-size: 12px;
  color: #94A3B8;
  width: 110px;
  min-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field-note { max-width: 220px; }

.field-edit-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  font-size: 13px;
  color: #1E293B;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field-edit-input:focus {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.field-edit-empty {
  border-color: #FCA5A5;
  background: #FFF5F5;
  color: #9CA3AF;
}

.field-edit-empty:focus {
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.1);
}

.status-badge-sm {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.field-status {
  white-space: nowrap;
  width: 80px;
  min-width: 70px;
}

.field-preserve {
  width: 64px;
  text-align: center;
  white-space: nowrap;
}

.field-preserve-checkbox {
  width: 17px;
  height: 17px;
  accent-color: #2563EB;
  cursor: pointer;
}

.status-filled { background: #DCFCE7; color: #16A34A; }
.status-empty  { background: #FEF9C3; color: #854D0E; }

.note-badge {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #D97706;
  margin-bottom: 2px;
}

.note-text {
  display: block;
  font-size: 12px;
  color: #64748B;
}

.regenerate-bar {
  padding: 14px 20px;
  border-top: 1px solid #F1F5F9;
  display: flex;
  justify-content: flex-end;
}

.btn-regenerate {
  padding: 8px 20px;
  border-radius: 8px;
  border: 1px solid #2563EB;
  background: #EFF6FF;
  color: #2563EB;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-regenerate:hover {
  background: #2563EB;
  color: #fff;
}

.replacement-upload-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-top: 1px solid #E2E8F0;
  background: #F8FAFC;
}

.replacement-upload-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #334155;
}

.replacement-upload-copy strong { font-size: 13px; }
.replacement-upload-copy span { font-size: 12px; color: #64748B; }

.btn-replacement-upload {
  flex-shrink: 0;
  border: 1px solid #2563EB;
  border-radius: 8px;
  padding: 9px 14px;
  background: #FFFFFF;
  color: #2563EB;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.btn-replacement-upload:hover { background: #EFF6FF; }

/* Frame 1: the extraction landing state is a single desktop composition. */
@media (min-width: 1021px) {
  body.has-app-shell {
    min-height: 100vh;
    background: #dff2ff url("/static/assets/figma/frame1/page-background.png") center bottom / cover no-repeat fixed;
  }

  body.has-app-shell .app-sidebar { width: 235px; padding: 20px 18px 16px; background: transparent; border: 0; }
  body.has-app-shell .app-sidebar__header { min-height: 79px; }
  body.has-app-shell .app-sidebar__brand { width: 180px; height: 58px; }
  body.has-app-shell .app-sidebar__hide { display: none; }
  body.has-app-shell .app-sidebar__nav { gap: 2px; }
  body.has-app-shell .app-nav-item { min-height: 40px; padding: 10px 12px; color: #545454; border-radius: 8px; font-size: 14px; }
  body.has-app-shell .app-nav-item.is-active { color: #1e1e1e; background: #fff; box-shadow: none; }
  body.has-app-shell .app-nav-item svg { width: 16px; height: 16px; }
  body.has-app-shell .app-sidebar__footer { border-top: 1px solid #e8e8e8; padding: 16px 12px 0; }
  body.has-app-shell .app-main { height: min(848px, calc(100dvh - 40px)); min-height: 0; margin: 20px 20px 20px 235px; border: 0; border-radius: 28px; background: linear-gradient(180deg,#fff 0%,rgb(255 255 255 / 77%) 100%); box-shadow: none; }
  body.has-app-shell .app-container.beta-workbench { width: 100%; max-width: none; box-sizing: border-box; padding: 40px 64px 40px; }

  .beta-figma-layout { max-width: none; }
  .beta-frame-upload { width: 741px; margin: 0 auto; }
  .beta-frame-upload__intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .beta-frame-upload__art { width: 82px; height: 70px; object-fit: contain; margin: 0 0 14px; }
  .beta-frame-upload__intro h2 { margin: 0; color: #111; font-family: "DM Mono", "Microsoft YaHei", sans-serif; font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -.48px; }
  .beta-frame-upload__intro > p { margin: 8px 0 0; color: #665757; font-size: 16px; line-height: 20px; }
  .beta-frame-upload__safety { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; color: #4f8ff7; font-size: 12px; line-height: 16px; }
  .beta-frame-upload__safety img { width: 16px; height: 16px; }
  .beta-frame-upload__dropzone { display: flex; align-items: flex-end; justify-content: space-between; min-height: 183px; margin-top: 31px; padding: 12px 10px 12px 20px; border: 1px solid #90b7ff; border-radius: 16px; background: #fff; box-shadow: 0 2px 12px rgb(195 201 231 / 54%),0 0 0 2px #e5f2ff; }
  .beta-frame-upload__browse { display: inline-flex; align-items: center; gap: 8px; padding: 9px 0; border: 0; background: transparent; color: #545454; font: inherit; font-size: 14px; cursor: pointer; }
  .beta-frame-upload__browse img { width: 24px; height: 24px; }
  .beta-frame-upload__submit { display: grid; width: 39px; height: 39px; place-items: center; border: 0; border-radius: 8px; background: #a7cdfd; box-shadow: 0 1px 1.5px rgb(0 0 0 / 8%); cursor: pointer; }
  .beta-frame-upload__submit:disabled { opacity: 1; cursor: default; }
  .beta-frame-upload__submit:not(:disabled) { background: #5a9cff; }
  .beta-frame-upload__submit img { width: 24px; height: 24px; }
  .beta-frame-upload__limits { margin: 10px 0 0 22px; color: #9b9b9b; font-size: 12px; line-height: 16px; }
  .beta-frame-upload .selected-files-list { margin-top: 12px; }
}

/* Frame 113: completed extraction — full-width result overview. */
@media (min-width: 1021px) {
  #state-complete { width: min(1137px, 100%); max-width: none; margin: -88px auto 0; padding: 91px 0 44px; }
  .complete-hero { display: flex; flex-direction: column; align-items: center; margin: 0; text-align: center; }
  .complete-illustration { position: static; display: block; width: 146px; height: 146px; margin: 0 0 11px; object-fit: contain; transform: none; }
  .complete-check { display: none; }
  .complete-title { margin: 0; color: #111; font-family: "DM Mono", "Microsoft YaHei", sans-serif; font-size: 32px; font-style: italic; font-weight: 600; line-height: 32px; letter-spacing: -.48px; }
  .complete-desc { margin: 13px 0 0; color: #665757; font-size: 16px; line-height: 20px; }
  .complete-file-actions { gap: 25px; margin-top: 29px; }
  .file-info-card { margin: 28px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .file-info-title { display: block; margin: 0 0 17px 10px; color: #000; font-size: 15px; font-weight: 500; line-height: 21px; }
  .file-info-rows { display: grid; grid-template-columns: 1.45fr 1.2fr 1fr; min-height: 46px; padding: 0 16px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; }
  .file-info-row { display: flex; align-items: center; justify-content: flex-start; min-height: 46px; padding: 0; border: 0; }
  .file-info-label { flex: 0 0 auto; color: rgb(102 102 102 / 71%); font-size: 14px; font-weight: 400; }
  .file-info-value { color: #444; font-size: 14px; }
  .file-info-label + .file-info-value { margin-left: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .complete-status-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .result-output-badge { padding: 0; border: 0; border-radius: 0; background: transparent; color: #444; font: inherit; }
  .extracted-table-container { margin: 28px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
  .extracted-table-header { padding: 0 10px 17px; border: 0; }
  .extracted-table-header h3 { color: #000; font-size: 15px; font-weight: 500; line-height: 21px; }
  .extracted-summary { display: none; }
  .extracted-table-wrap { overflow-x: auto; border-top: 1px solid #dedede; }
  .extracted-table { min-width: 840px; font-size: 14px; }
  .extracted-table thead th { height: 48px; padding: 0 16px; color: #8a8a8a; background: #e8eff7; border-bottom: 1px solid #dedede; font-size: 12px; font-weight: 400; letter-spacing: -.2px; text-align: left; text-transform: none; }
  .extracted-table thead th:first-child { width: 140px; color: #8a8a8a; font-size: 12px; }
  .extracted-table tbody tr, .extracted-table tbody tr.row-empty, .extracted-table tbody tr.row-inferred { background: rgb(254 254 255 / 58%); border-bottom: 1px solid #dedede; }
  .extracted-table tbody tr:hover { background: #f7fbff; }
  .extracted-table td { height: 56px; padding: 0 16px; color: #666; }
  .extracted-table td:first-child { width: 140px; color: #333; font-size: 14px; text-align: left; }
  .field-label { min-width: 140px; color: #333; font-weight: 400; }
  .field-value-cell { min-width: 227px; }
  .field-edit-input { height: 36px; padding: 0 10px; border: 0; border-radius: 0; color: #666; background: #f5f8fc; box-shadow: none; }
  .field-edit-input:focus { border: 1px solid #4172e4; box-shadow: none; }
  .field-source { width: auto; min-width: 180px; color: #666; font-size: 14px; }
  .status-badge-sm { padding: 0; border: 0; border-radius: 0; background: transparent; color: #666; font-size: 14px; font-weight: 400; }
  .status-badge-sm.status-filled { color: #666; }
  .complete-actions { margin-top: 18px; justify-content: center; }
  .complete-actions .btn-action { min-height: 40px; border: 1px solid #dedede; border-radius: 8px; color: #333; background: #fff; }
}

/* Figma Frame 1 upload-state composition; existing IDs stay untouched. */
@media (min-width: 1021px) {
  body.has-app-shell {
    background: #dff2ff url("/static/assets/figma/frame1/page-background.png") center bottom / cover no-repeat fixed;
  }

  body.has-app-shell .app-sidebar { width: 235px; padding: 20px 18px 16px; }
  body.has-app-shell .app-sidebar__header { min-height: 79px; }
  body.has-app-shell .app-sidebar__brand { width: 180px; height: 58px; }
  body.has-app-shell .beta-figma-brand { width: 154px; height: 52px; display: grid; grid-template-columns: 33px 1fr; grid-template-rows: 24px 16px; column-gap: 7px; align-items: center; }
  body.has-app-shell .beta-figma-brand > img { grid-row: 1 / 3; width: 33px; height: 39px; object-fit: cover; }
  body.has-app-shell .beta-figma-brand span { width: 89px; height: 24px; display: block; }
  body.has-app-shell .beta-figma-brand span img { width: 89px; height: 24px; display: block; }
  body.has-app-shell .beta-figma-brand small { color: #4f4f4f; font-size: 10px; line-height: 16px; white-space: nowrap; }
  body.has-app-shell .app-sidebar__nav { gap: 2px; }
  body.has-app-shell .app-nav-item { min-height: 40px; border-radius: 8px; font-size: 14px; }
  body.has-app-shell .app-nav-item svg { width: 16px; height: 16px; }
  body.has-app-shell .app-sidebar__footer { padding-top: 16px; }
  body.has-app-shell .app-main {
    margin-left: 235px;
    border: 0;
    border-radius: 28px;
    background: linear-gradient(180deg, #fff 0%, rgb(255 255 255 / 77%) 100%);
    box-shadow: none;
  }

  .beta-workbench { width: min(100%, 1185px); padding: 40px 64px 42px; }
  #state-idle { max-width: none; }
  .beta-upload-intro { margin-bottom: 68px; text-align: center; }
  .beta-upload-intro h2 { margin: 0; color: #111; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.02em; }
  .beta-upload-intro p { margin: 8px 0 0; color: #665757; font-size: 14px; }
  .beta-upload-dropzone { min-height: 203px; padding: 22px 32px 18px; border-color: #90b7ff; border-radius: 16px; background: #fff; box-shadow: 0 2px 12px rgb(195 201 231 / 54%), 0 0 0 2px #e5f2ff; }
  .beta-upload-illustration-slot { width: 60px; height: 52px; margin-bottom: 4px; }
  .beta-upload-dropzone .ui-button { min-width: 152px; min-height: 40px; border-radius: 8px; box-shadow: 0 1px 2px rgb(0 0 0 / 12%); }
  .beta-upload-safety { margin-top: 12px; font-size: 11px; }
  .beta-upload-actions { padding-top: 10px; }
  .template-workspace { width: 890px; margin: 32px auto 0; padding-top: 0; border-top: 0; }
  .template-workspace-head { justify-content: flex-start; margin-bottom: 16px; }
  .template-source-tabs { gap: 0; padding: 0; border-bottom: 0; }
  .template-source-tab { min-height: 32px; padding: 0 16px; border-radius: 6px; font-size: 14px; }
  .template-source-tab.is-active { color: #111; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }
  .template-source-tab.is-active::after, .template-library-more { display: none; }
  /* 桌面卡片观感单一来源（原散落于遗留块互相覆盖，2026-09-15 收口） */
  .template-library-card { padding: 12px; border-color: transparent; border-radius: 12px; box-shadow: none; background: linear-gradient(180deg, #e6f9f4 0%, #fff 100%); }
  .template-library-card__scene { white-space: normal; }
}

/* Keep the rebuilt Frame 1 upload geometry ahead of legacy workbench rules. */
@media (min-width: 1021px) {
  .beta-figma-layout .beta-frame-upload { width: 741px; margin: 0 auto; }
  .beta-figma-layout .beta-frame-upload__dropzone { position: relative; display: block; min-height: 183px; margin-top: 31px; padding: 0; }
  .beta-figma-layout .beta-frame-upload__browse { position: absolute; bottom: 12px; left: 20px; margin: 0; }
  .beta-figma-layout .beta-frame-upload__submit { position: absolute; right: 10px; bottom: 12px; box-sizing: border-box; display: grid; flex: 0 0 39px; width: 39px; min-width: 39px; max-width: 39px; height: 39px; min-height: 39px; max-height: 39px; padding: 0; aspect-ratio: 1 / 1; }
  .beta-figma-layout .template-workspace { max-width: 890px; overflow: visible; }
  .beta-figma-layout #template-panel-library { width: 100%; overflow: hidden; }
  .template-library-viewport.beta-template-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); grid-template-rows: auto; width: 100%; gap: 20px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: thin; }
  .template-library-viewport.beta-template-grid .template-library-card { scroll-snap-align: start; width: 100%; min-width: 0; max-width: none; }
}

/* Frame 19: selected-template desktop state uses a separate right panel. */
@media (min-width: 1021px) {
  .template-field-drawer {
    top: 20px;
    right: 24px;
    bottom: auto;
    width: 379px;
    height: min(848px, calc(100dvh - 40px));
    border: 0;
    border-radius: 24px;
    background: linear-gradient(180deg, #fff 0%, rgb(255 255 255 / 77%) 100%);
    box-shadow: none;
    transform: translateX(calc(100% + 24px));
  }

  .template-field-drawer.is-open { transform: translateX(0); }
  .template-drawer-header { min-height: 72px; padding: 20px 52px 12px 20px; }
  .template-drawer-preview { height: 172px; margin: 0 20px 12px; border: 0; border-radius: 12px; background: #f8f8fb; }
  .template-drawer-tabs { min-height: 44px; padding: 0 20px; gap: 24px; border-bottom-color: #ededed; }
  .template-drawer-tab { color: #7b7b7b; font-size: 14px; }
  .template-drawer-tab.is-active { color: #111; }
  .template-drawer-tab.is-active::after { height: 2px; background: #111; }
  .template-drawer-panel { padding: 0 20px 14px; }
  .template-drawer-panel .field-confirm-header { padding: 14px 0 10px; }
  .template-drawer-panel .field-confirm-item { min-height: 48px; border-color: #e8e8e8; border-radius: 8px; box-shadow: none; }
  .template-drawer-footer { padding: 14px 20px 20px; border-top: 0; background: transparent; }
  .template-drawer-footer .ui-button { min-height: 40px; border-radius: 8px; }

  .template-drawer-header .template-selected-name { color: #111; font-size: 16px; font-weight: 600; line-height: 24px; }
  .template-drawer-header .template-selected-copy { gap: 4px; }
  .template-drawer-header .template-selected-meta { padding: 0; color: #7b7b7b; background: transparent; font-size: 12px; line-height: 18px; }
  .template-drawer-close { top: 20px; right: 20px; width: 24px; height: 24px; padding: 2px; border: 0; background: transparent; }
  .template-drawer-panel .field-confirm-header { padding: 0; }
  .template-drawer-panel .field-confirm-title,
  .template-drawer-panel .field-confirm-footer { display: none; }
  .template-drawer-panel .field-confirm-list { padding-top: 8px; }
  .template-drawer-panel .field-confirm-item { min-height: 38px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; gap: 10px; }
  .template-drawer-panel .field-confirm-item input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: #267cff; }
  .template-drawer-panel .field-confirm-label { color: #424242; font-size: 14px; line-height: 20px; }
  .template-drawer-panel .field-location { display: none; }
  .template-drawer-footer { grid-template-columns: auto auto 42px 1fr; align-items: center; gap: 12px; padding: 13px 20px 16px; border-top: 1px solid #e8e8e8; }
  .template-drawer-footer-text { padding: 0; border: 0; color: #666; background: transparent; font-size: 13px; white-space: nowrap; }
  .template-drawer-footer #template-fields-reset { width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0; border: 1px solid #dedede; color: transparent; background: #fff url("/static/assets/figma/frame19-undo.svg") center / 22px no-repeat; }
  .template-drawer-footer #template-fields-save { min-width: 0; height: 42px; min-height: 42px; padding: 0 12px; border: 1px solid #dedede; color: #333; background: #fff; font-size: 14px; font-weight: 500; }
}

/* Frame 113:396 — completed-file preview uses the same right-side desktop rhythm. */
.result-preview-drawer {
  position: fixed;
  z-index: 330;
  top: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  width: min(379px, calc(100vw - 36px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e7edf5;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, rgb(255 255 255 / 77%) 100%);
  box-shadow: 0 18px 48px rgb(37 72 113 / 14%);
  transform: translateX(calc(100% + 24px));
  visibility: hidden;
  transition: transform var(--motion-standard), visibility var(--motion-standard);
}

.result-preview-drawer.is-open { transform: translateX(0); visibility: visible; }
.result-preview-drawer__header { display: flex; min-height: 72px; align-items: flex-start; justify-content: space-between; padding: 20px 20px 12px; gap: 16px; }
.result-preview-drawer__header h2 { max-width: 280px; margin: 0; overflow: hidden; color: #111; font-size: 18px; font-weight: 500; line-height: 32px; text-overflow: ellipsis; white-space: nowrap; }
.result-preview-drawer__header p { margin: 2px 0 0; color: #7b7b7b; font-size: 12px; line-height: 18px; }
.result-preview-drawer__close { display: grid; width: 24px; height: 24px; flex: 0 0 auto; padding: 2px; place-items: center; border: 0; background: transparent; color: #444; cursor: pointer; }
.result-preview-drawer__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.result-preview-drawer__close:focus-visible { outline: 3px solid rgb(65 114 228 / 30%); outline-offset: 2px; }
.result-preview-drawer__body { min-height: 0; flex: 1; padding: 0 20px 20px; overflow: auto; }
.result-preview-drawer__body h3 { margin: 278px 0 16px; color: rgb(17 17 17 / 40%); font-size: 18px; font-weight: 500; line-height: 24px; text-align: center; }
.result-preview-drawer__content { display: grid; gap: 0; }
.result-preview-drawer__row { display: grid; min-height: 54px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 12px; border-bottom: 1px solid #e8e8e8; color: #666; font-size: 13px; }
.result-preview-drawer__row span, .result-preview-drawer__row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-preview-drawer__row strong { color: #333; font-weight: 500; }
.result-preview-drawer__empty { margin: 0; color: var(--color-text-muted); font-size: 13px; line-height: 20px; text-align: center; }
.result-preview-overlay { display: none; }

@media (max-width: 1360px) {
  .result-preview-overlay:not([hidden]) { position: fixed; z-index: 325; inset: 0; display: block; border: 0; background: rgb(14 25 43 / 35%); }
}

@media (max-width: 640px) {
  .result-preview-drawer { top: 8px; right: 8px; bottom: 8px; width: calc(100vw - 16px); border-radius: 16px; }
  .result-preview-drawer__body h3 { margin-top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .result-preview-drawer { transition-duration: 1ms; }
}

/* Document Extraction Workspace v2: configuration is either an upload-first
   landing view or one first-viewport workspace; the template library remains
   a full-width section below both. */
#state-config { width: min(1220px, 100%); margin: 0 auto; }
#state-idle[hidden],
#state-workspace[hidden] { display: none; }

.document-extraction-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  width: min(1120px, 100%);
  box-sizing: border-box;
  gap: 48px;
  padding: 28px 0 0;
  margin: 0 auto;
}

.workspace-region { min-width: 0; }
.workspace-region--sources { padding-right: 0; border-right: 0; }
.workspace-region__header { margin-bottom: 20px; }
.workspace-region__header h1,
.template-area-heading { margin: 0; color: #11284f; font-size: 20px; line-height: 1.35; }
.workspace-region__header p { margin: 6px 0 0; }
.workspace-source-brand { display: flex; flex-direction: column; align-items: center; gap: 0; margin-bottom: 20px; text-align: center; }
.workspace-source-brand .beta-frame-upload__art { width: 64px; height: 56px; margin: 0 0 9px; }
.workspace-source-brand h1 { margin: 0; color: #111; font-size: 20px; line-height: 28px; }
.workspace-source-brand p { margin: 6px 0 0; color: #665757; font-size: 14px; line-height: 20px; }
.workspace-source-brand .beta-frame-upload__safety { justify-content: center; margin-top: 8px; font-size: 11px; line-height: 14px; }
.workspace-source-brand .beta-frame-upload__safety img { width: 14px; height: 14px; }
.workspace-file-drop {
  min-height: 300px;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border-color: #90b7ff;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 12px rgb(195 201 231 / 54%), 0 0 0 2px #e5f2ff;
}
.workspace-file-drop .selected-files-list { width: 100%; margin: 0; }
.workspace-file-drop .beta-frame-upload__browse {
  width: 100%;
  min-height: 38px;
  justify-content: center;
  border: 1px dashed #a8c6eb;
  border-radius: 9px;
  color: #2669b5;
  background: #f7fbff;
}
.workspace-file-drop.drag-over { border-color: #5a9cff; background: #f7fbff; }
.workspace-source-limits { margin: 12px 0 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.5; }
.workspace-region--settings .workspace-region__header { margin-bottom: 14px; }
.workspace-region--settings .field-settings-description { margin-bottom: 0; }
.workspace-region--settings .ai-detect-area .field-settings-description { margin-bottom: 16px; }
.workspace-region--settings .extract-mode-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.workspace-region--settings .keyword-input-area textarea { min-height: 112px; }
.workspace-region--settings .extract-mode-tabs { margin-bottom: 10px; }
.settings-module .extract-mode-tab { padding: 8px 12px; }
.settings-module .keyword-examples { margin-top: 8px; }
.settings-module .field-confirm-panel { margin-top: 12px; }

.settings-module { margin-top: 14px; padding: 13px 14px; border: 1px solid #e2ebf6; border-radius: 12px; background: #fbfdff; }
.settings-module__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.settings-module__title { display: flex; align-items: center; gap: 8px; margin: 0; color: #315176; font-size: 14px; font-weight: 600; }
.settings-module__index { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #1676ef; color: #fff; font-size: 12px; font-weight: 600; }
.settings-module__meta { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; }
.settings-module__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#settings-template-selected { display: block; }
#settings-template-selected[hidden] { display: none; }
.settings-template-summary { display: flex; align-items: center; gap: 10px; min-width: 0; }
.settings-template-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-template-copy strong { overflow: hidden; color: #1e3555; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.settings-template-copy span { color: var(--color-text-muted); font-size: 12px; }
.settings-template-empty p { margin: 0; color: var(--color-text-muted); font-size: 13px; }
.settings-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.settings-chip { position: relative; display: inline-flex; align-items: center; min-width: 0; max-width: 100%; min-height: 28px; box-sizing: border-box; padding: 4px 26px 4px 10px; border: 1px solid #d6e4ff; border-radius: 999px; background: #eef4ff; color: #2b5cae; font-size: 12px; }
.settings-chip__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-chip__remove { position: absolute; top: 1px; right: 1px; display: grid; width: 24px; height: 24px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: inherit; background: transparent; cursor: pointer; font: 700 13px/1 var(--font-sans); opacity: .42; transition: opacity .15s, transform .15s, background .15s; }
.settings-chip__remove:hover, .settings-chip__remove:focus-visible { background: rgb(255 255 255 / 78%); opacity: 1; transform: scale(1.04); }
.settings-chip__remove:focus-visible { outline: 2px solid #1676ef; outline-offset: 2px; }
.settings-chip--supplemental { border-color: #cdeeda; background: #eafaf0; color: #177245; }
.settings-chip--overflow { border-color: #e0e6ef; background: #f4f6fa; color: var(--color-text-muted); }
.settings-preview-empty { margin: 0; color: var(--color-text-muted); font-size: 13px; }
.settings-preview-edit { margin-top: 10px; padding: 0; border: 0; background: none; color: #1676ef; font-size: 13px; cursor: pointer; }
.settings-preview-edit:hover { text-decoration: underline; }
.settings-preview-edit:focus-visible { outline: 2px solid #1676ef; outline-offset: 2px; }
.field-confirm-columns { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px; gap: 12px; padding: 8px 16px; border-bottom: 1px solid #e2e8f0; color: var(--color-text-muted); background: #fbfdff; font-size: 11px; font-weight: 700; }
.field-confirm-columns span:last-child { text-align: center; }
.field-confirm-item--ai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px; align-items: center; gap: 12px; flex-wrap: nowrap; }
.field-confirm-item--ai .field-confirm-label { min-width: 0; overflow-wrap: anywhere; }
.field-confirm-item--ai .field-confirm-desc { min-width: 0; overflow-wrap: anywhere; }
.field-confirm-check { position: relative; display: grid; width: 22px; min-height: 28px; place-items: center; justify-self: center; }
.field-confirm-item--ai input[type="checkbox"] { margin: 0; }
.field-checkbox--custom { position: absolute; z-index: 1; width: 22px !important; height: 22px !important; margin: 0 !important; cursor: pointer; opacity: 0; }
.field-confirm-checkmark { position: relative; display: block; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid #9db0c8; border-radius: 5px; background: #fff; transition: background .18s, border-color .18s, box-shadow .18s; }
.field-confirm-checkmark::after { content: ""; position: absolute; top: 3px; left: 6px; width: 5px; height: 9px; border: solid transparent; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: border-color .18s; }
.field-checkbox--custom:checked + .field-confirm-checkmark { border-color: #2196f3; background: #2196f3; }
.field-checkbox--custom:checked + .field-confirm-checkmark::after { border-color: #fff; }
.field-checkbox--custom:focus-visible + .field-confirm-checkmark { outline: 2px solid #1676ef; outline-offset: 3px; }
.drawer-section-title { margin: 0 20px 8px; color: #315176; font-size: 13px; font-weight: 600; }
.drawer-section-title[hidden] { display: none; }
.drawer-supplemental { margin-top: 14px; }
.drawer-supplemental-list { display: flex; flex-direction: column; gap: 8px; margin: 0 20px; }
.drawer-supplemental-item { display: flex; align-items: center; gap: 8px; color: #33475e; font-size: 13px; }
.drawer-supplemental-input { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid #d5e2f2; border-radius: 8px; font-size: 13px; }

@media (max-width: 640px) {
  .field-confirm-columns { grid-template-columns: minmax(0, 1fr) 52px; }
  .field-confirm-columns span:nth-child(2) { display: none; }
  .field-confirm-item--ai { grid-template-columns: minmax(0, 1fr) 52px; row-gap: 3px; }
  .field-confirm-item--ai .field-confirm-label { grid-column: 1; }
  .field-confirm-item--ai .field-confirm-desc { grid-column: 1; grid-row: 2; }
  .field-confirm-item--ai .field-confirm-check { grid-column: 2; grid-row: 1 / span 2; }
}
.workspace-start-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e5edf7; }
.workspace-start-hint { color: var(--color-text-muted); font-size: 12px; }
.workspace-start-row .ui-button { min-height: 44px; white-space: nowrap; }

.template-area { width: 100%; margin: 24px auto 0; }
.template-area-heading { margin-bottom: 16px; }

@media (min-width: 1021px) {
  #state-idle.beta-frame-upload { width: 741px; max-width: 741px; }
  .template-area { width: 890px; max-width: 100%; }
  body.has-app-shell .app-container.beta-workbench:has(#state-workspace:not([hidden])) { padding-top: 40px; }
}

/* Keep the landing upload action and the first template row in one desktop viewport. */
@media (min-width: 1021px) {
  body.has-app-shell .app-container.beta-workbench:has(#state-idle:not([hidden])) { padding: 24px 64px; }
  #state-idle.beta-frame-upload .beta-frame-upload__art { width: 64px; height: 54px; margin-bottom: 8px; }
  #state-idle.beta-frame-upload .beta-frame-upload__intro h2 { font-size: 22px; line-height: 28px; }
  #state-idle.beta-frame-upload .beta-frame-upload__intro > p { margin-top: 6px; }
  #state-idle.beta-frame-upload .beta-frame-upload__safety { margin-top: 8px; }
  #state-idle.beta-frame-upload .beta-frame-upload__dropzone { min-height: 148px; margin-top: 20px; }
  #state-idle.beta-frame-upload .beta-frame-upload__limits { margin-top: 8px; }
  #state-config:has(#state-idle:not([hidden])) + .template-area { margin-top: 20px; }
  #state-config:has(#state-idle:not([hidden])) + .template-area .template-area-heading { margin-bottom: 10px; }
  #state-config:has(#state-idle:not([hidden])) + .template-area .template-workspace-head { margin-bottom: 10px; }
}

/* The template-field drawer is a blocking floating layer at every width. */
@media (min-width: 1361px) {
  .template-drawer-overlay:not([hidden]) { background: rgb(14 37 68 / 24%); }
  .template-field-drawer { z-index: 340; }
}

@media (max-width: 900px) {
  .document-extraction-workspace { grid-template-columns: 1fr; gap: 28px; padding: 24px; }
  .workspace-region--sources { padding-right: 0; padding-bottom: 28px; border-right: 0; border-bottom: 1px solid #e5edf7; }
}

@media (max-width: 560px) {
  .document-extraction-workspace { padding: 18px; border-radius: 18px; }
  .workspace-start-row { align-items: stretch; flex-direction: column; }
  .workspace-start-row .ui-button { width: 100%; }
}