/* =========================================================
   DocAuth UI
   ========================================================= */

/* Pickly Magic 主题字体（网络不可用时回退到本地字体栈，不影响使用） */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=ZCOOL+KuaiLe&display=swap');

.connection-recovery {
    position: fixed;
    z-index: 10000;
    bottom: 20px;
    right: 20px;
    width: min(560px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text);
}
.connection-recovery[hidden] { display: none; }
.connection-recovery p { margin: 12px 0; line-height: 1.6; }
.connection-recovery .recovery-actions { display: flex; flex-wrap: wrap; gap: 8px; }

:root {
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-soft: #eff6ff;
    --primary-border: #bfdbfe;

    --success: #16a34a;
    --success-hover: #15803d;
    --success-soft: #f0fdf4;
    --success-border: #bbf7d0;

    --warning: #d97706;
    --warning-soft: #fffbeb;
    --warning-border: #fde68a;

    --danger: #dc2626;
    --danger-soft: #fef2f2;
    /* 状态徽标专用别名（UI-4-B3）：错误状态色，仅用于历史状态展示 */
    --error: var(--danger);

    --text: #172033;
    --text-secondary: #5f6b7a;
    --text-muted: #8a94a3;

    --page-bg: #f4f7fb;
    --card-bg: #ffffff;
    --sidebar-bg: #0f172a;
    --sidebar-text: #cbd5e1;
    --sidebar-muted: #94a3b8;
    --sidebar-text-hover: #ffffff;
    --sidebar-text-active: #ffffff;
    --sidebar-active-bg: linear-gradient(
        90deg,
        rgba(37, 99, 235, 0.95),
        rgba(37, 99, 235, 0.72)
    );

    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --input-bg: #ffffff;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);

    --sidebar-width: 248px;
    --content-width: 1420px;
}

html[data-theme="blue"] {
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-soft: #eff6ff;
    --primary-border: #bfdbfe;
    --page-bg: #f4f7fb;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --text: #172033;
    --border: #e2e8f0;
    --sidebar-bg: #0f172a;
    --sidebar-text: #cbd5e1;
    --sidebar-text-hover: #ffffff;
    --sidebar-text-active: #ffffff;
    --sidebar-active-bg: linear-gradient(
        90deg,
        rgba(37, 99, 235, 0.95),
        rgba(37, 99, 235, 0.72)
    );
}

html[data-theme="green-light"] {
    --primary: #16a34a;
    --primary-hover: #15803d;
    --primary-soft: #f0fdf4;
    --primary-border: #bbf7d0;
    --page-bg: #f6faf7;
    --card-bg: #ffffff;
    --input-bg: #f8faf9;
    --text: #1e2b24;
    --border: #e4ebe7;
    --sidebar-bg: #f0fdf4;
    --sidebar-text: #365314;
    --sidebar-text-hover: #166534;
    --sidebar-text-active: #ffffff;
    --sidebar-active-bg: #16a34a;
}

html[data-theme="green-pro"] {
    --primary: #15803d;
    --primary-hover: #166534;
    --primary-soft: #dcfce7;
    --primary-border: #86efac;
    --page-bg: #f6faf7;
    --card-bg: #ffffff;
    --input-bg: #f8faf9;
    --text: #1e2b24;
    --border: #e4ebe7;
    --sidebar-bg: #ecfdf5;
    --sidebar-text: #14532d;
    --sidebar-text-hover: #166534;
    --sidebar-text-active: #ffffff;
    --sidebar-active-bg: #15803d;
}

/* =========================================================
   Pickly Magic（奶油粉像素风）
   新增主题只在此追加一个 token 块 + 末尾组件覆盖即可，
   不需要改动既有判断逻辑。颜色全部走 CSS 变量。
   ========================================================= */
html[data-theme="magic-pink"] {
    --primary: #C9738A;          /* 主色 */
    --primary-hover: #8B5E6B;    /* 辅色 */
    --primary-soft: #F2EAE5;     /* 卡片色 / 软底 */
    --primary-border: #CAA9AD;   /* 弱化 */

    --page-bg: #FDF6F0;          /* 页面背景（奶油） */
    --card-bg: #FFFFFF;          /* 卡片白 */
    --input-bg: #FFFFFF;

    --text: #4A3F3F;             /* 正文 */
    --text-secondary: #8B5E6B;
    --text-muted: #CAA9AD;       /* 弱化 */

    --border: #CAA9AD;
    --border-strong: #8B5E6B;

    --sidebar-bg: #F2EAE5;
    --sidebar-text: #5C3A3A;     /* 标题色 */
    --sidebar-muted: #CAA9AD;
    --sidebar-text-hover: #C9738A;
    --sidebar-text-active: #FFFFFF;
    --sidebar-active-bg: #C9738A;

    /* 像素硬阴影替代现代模糊阴影 */
    --shadow-sm: 3px 3px 0 #CAA9AD;
    --shadow: 5px 5px 0 #C8DDD6;
    --shadow-lg: 7px 7px 0 #C8DDD6;

    /* 像素风圆角偏小、统一 */
    --radius-sm: 8px;
    --radius: 8px;
    --radius-lg: 10px;
}


/* =========================================================
   基础重置
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background: var(--page-bg);
    font-family:
        "Microsoft YaHei",
        "PingFang SC",
        "Segoe UI",
        Arial,
        sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
input,
select,
textarea {
    outline: none;
}

button {
    color: inherit;
}

a {
    color: var(--primary);
}

img {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

/* =========================================================
   应用整体布局
   ========================================================= */

.app-shell {
    min-height: 100vh;
    padding-left: var(--sidebar-width);
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 100;
    display: flex;
    width: var(--sidebar-width);
    flex-direction: column;
    overflow-y: auto;
    color: var(--sidebar-text);
    background:
        radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 34%),
        var(--sidebar-bg);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.brand {
    padding: 28px 24px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-mark {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 80%, #ffffff), var(--primary));
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 28%, transparent);
    font-size: 18px;
    font-weight: 800;
}

.brand h1,
header h1 {
    margin: 0;
    color: var(--sidebar-text-hover);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.brand .subtitle,
.sidebar .subtitle {
    margin: 5px 0 0;
    color: var(--sidebar-muted);
    font-size: 12px;
    line-height: 1.6;
}

.sidebar-nav-title {
    margin: 22px 24px 8px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tabs {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0 14px 20px;
    border: 0;
}

.tab {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 11px 14px;
    color: var(--sidebar-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.tab:hover {
    color: var(--sidebar-text-hover);
    background: rgba(255, 255, 255, 0.07);
    transform: translateX(2px);
}

.tab.active {
    color: var(--sidebar-text-active);
    background: var(--sidebar-active-bg);
    border-color: rgba(147, 197, 253, 0.22);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.25);
    font-weight: 600;
}

.tab.active::before {
    position: absolute;
    top: 11px;
    bottom: 11px;
    left: -14px;
    width: 3px;
    background: color-mix(in srgb, var(--primary) 65%, #ffffff);
    border-radius: 0 4px 4px 0;
    content: "";
}

.tab-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    color: currentColor;
    font-size: 16px;
}

.sidebar-footer {
    margin-top: auto;
    padding: 18px 24px 22px;
    color: #64748b;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
}

.main-content {
    width: 100%;
    max-width: var(--content-width);
    min-height: 100vh;
    margin: 0 auto;
    padding: 30px 34px 80px;
}

.wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.mobile-header {
    display: none;
}

/* =========================================================
   页面标题
   ========================================================= */

.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.page-title-group h2 {
    margin: 0;
    color: var(--text);
    font-size: 25px;
    line-height: 1.35;
}

.page-title-group p {
    margin: 7px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.page-badge {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    color: var(--primary-hover);
    background: var(--primary-soft);
    border: 1px solid var(--primary-border);
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

/* =========================================================
   Tab 内容面板
   ========================================================= */

.panel {
    display: none;
    min-width: 0;
}

.panel.active {
    display: block;
    animation: panel-in 0.2s ease;
}

@keyframes panel-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.single-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
    align-items: start;
}

.form-column {
    min-width: 0;
}

.summary-column {
    position: sticky;
    top: 24px;
    min-width: 0;
}

/* =========================================================
   卡片与字段组
   ========================================================= */

fieldset,
.card {
    min-width: 0;
    margin: 0 0 18px;
    padding: 20px 22px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

fieldset:hover,
.card:hover {
    border-color: #d7deea;
}

legend {
    max-width: calc(100% - 16px);
    padding: 0 8px;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.card-title {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    line-height: 1.4;
}

.card-desc {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.row + .row {
    margin-top: 15px;
}

label {
    display: flex;
    min-width: 220px;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    color: #485568;
    font-size: 13px;
    font-weight: 500;
}

label em {
    margin-left: 2px;
    color: var(--danger);
    font-style: normal;
}

/* 全局字段显示配置：备案说明动态容器 + 显隐类（!important 抵御 dynamic-fields.js 的 inline display 覆盖） */
.ba-fields-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 16px;
}

.ba-fields-container > .row {
    flex-basis: 100%;
}

/* 软著动态容器：与备案容器同一布局原语，独立容器互不影响（UI-2） */
.rz-fields-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 16px;
}

.rz-fields-container > .row {
    flex-basis: 100%;
}

.field-hidden {
    display: none !important;
}

input[type="text"],
input[type="file"],
select,
textarea,
.set-input {
    width: 100%;
    min-height: 40px;
    padding: 8px 11px;
    color: var(--text);
    background: var(--input-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 14px;
    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}

input[type="text"]::placeholder,
textarea::placeholder {
    color: #a1aab7;
}

input[type="text"]:hover,
input[type="file"]:hover,
select:hover,
textarea:hover {
    border-color: #94a3b8;
}

input[type="text"]:focus,
input[type="file"]:focus,
select:focus,
textarea:focus,
.set-input:focus {
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

input[type="file"] {
    min-height: 40px;
    padding: 6px 8px;
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    margin-right: 9px;
    padding: 5px 10px;
    color: #334155;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

label.inline {
    display: inline-flex;
    width: auto;
    min-width: 0;
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
}

label.inline + label.inline {
    margin-left: 18px;
}

.hint {
    margin: 4px 0 10px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.65;
}

.hint b {
    color: var(--text-secondary);
}

code {
    padding: 2px 6px;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    word-break: break-all;
}

/* =========================================================
   按钮
   ========================================================= */

.primary,
.secondary,
.ghost,
.danger {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 17px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}

.primary {
    color: #ffffff;
    background: var(--primary);
    border: 1px solid var(--primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 18%, transparent);
}

.primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: 0 7px 16px color-mix(in srgb, var(--primary) 22%, transparent);
    transform: translateY(-1px);
}

.secondary {
    color: var(--text);
    background: var(--card-bg);
    border: 1px solid var(--border-strong);
}

.secondary:hover {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.ghost {
    color: #334155;
    background: #ffffff;
    border: 1px solid var(--border-strong);
}

.ghost:hover {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: color-mix(in srgb, var(--primary) 50%, #ffffff);
}

/* UI-4-C1：danger 语义按钮，复用既有 --danger/--danger-soft token，
   不引入新的硬编码主题色或状态色；hover 深度由 color-mix 派生。 */
.danger {
    color: #ffffff;
    background: var(--danger);
    border: 1px solid var(--danger);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--danger) 18%, transparent);
}

.danger:hover {
    background: color-mix(in srgb, var(--danger) 85%, #000000);
    border-color: color-mix(in srgb, var(--danger) 85%, #000000);
    transform: translateY(-1px);
}

.primary:disabled,
.secondary:disabled,
.ghost:disabled,
.danger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.link {
    display: inline;
    margin-left: 8px;
    padding: 0;
    color: var(--primary);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: none;
}

.link:hover {
    text-decoration: underline;
}

.status {
    min-height: 20px;
    color: var(--text-secondary);
    font-size: 13px;
}

/* =========================================================
   智能识别卡片
   ========================================================= */

.smart-section {
    overflow: hidden;
    padding: 0;
    background: #ffffff;
    border-color: var(--primary-border);
}

.smart-section:hover {
    border-color: color-mix(in srgb, var(--primary) 50%, #ffffff);
}

.smart-section > legend {
    display: none;
}

.smart-header {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--primary-soft) 95%, transparent), rgba(255, 255, 255, 0.95));
    cursor: pointer;
    user-select: none;
}

.smart-header-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.smart-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 65%, #ffffff), var(--primary));
    border-radius: 10px;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--primary) 20%, transparent);
    font-size: 17px;
}

.smart-header h3 {
    margin: 0;
    color: color-mix(in srgb, var(--primary) 72%, var(--text));
    font-size: 15px;
}

.smart-header p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 12px;
}

.smart-toggle {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, #ffffff);
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.smart-section.collapsed .smart-toggle {
    transform: rotate(-90deg);
}

.smart-body {
    padding: 18px 20px 20px;
    border-top: 1px solid color-mix(in srgb, var(--primary) 20%, #ffffff);
}

.smart-section.collapsed .smart-body {
    display: none;
}

.smart-section textarea {
    width: 100%;
    min-height: 155px;
    padding: 11px 13px;
    resize: vertical;
    line-height: 1.65;
}

.smart-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 13px;
    margin: 12px 0 2px;
}

.smart-result {
    margin-top: 12px;
}

.smart-summary {
    margin-bottom: 9px;
    color: var(--text-secondary);
    font-size: 13px;
}

.smart-summary b {
    color: var(--primary);
}

.fd-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 9px;
    /* Phase 6-A.1：已识别字段行内嵌主体 combo（.combo-popup 绝对定位），
       visible 让下拉弹层不被裁剪。容器自绘白底 + 圆角，行无独立背景，
       不裁剪不影响圆角视觉效果。 */
    overflow: visible;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.fd-row {
    display: grid;
    grid-template-columns: auto minmax(130px, 0.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 6px 10px;
    border-bottom: 1px solid #edf1f5;
    font-size: 12px;
}

.fd-row:last-child {
    border-bottom: 0;
}

.fd-name {
    color: var(--text-secondary);
}

.fd-val {
    color: var(--text);
    word-break: break-all;
}

/* Phase 6-A.1：已识别字段可编辑 */
.fd-edit {
    width: 100%;
    min-width: 0;
    padding: 4px 8px;
    font-size: 12px;
}

.fd-row .smart-combo {
    width: 100%;
}

.fd-anomaly-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
}

.fd-anomaly-title {
    width: 100%;
    font-weight: 600;
    color: #92400e;
}

.fd-anomaly-evidence {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 4px 10px;
    color: var(--text-secondary);
}

.smart-code-item span:first-child {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.st-override {
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
}

/* ===== Stage J.2-C3-1：AI 候选确认闭环 ===== */
.ai-candidates {
    margin-top: 10px;
}

.ai-title {
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: 13px;
}

.ai-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 4px 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
    background: #ffffff;
    font-size: 12px;
}

.ai-row-main {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ai-row-meta {
    grid-column: 1;
    color: var(--text-secondary);
    font-size: 11px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ai-row-act {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: flex;
    gap: 4px;
    align-items: center;
}

.ai-val {
    grid-column: 1 / span 2;
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
}

.ai-name {
    color: var(--text);
    font-weight: 600;
}

.ai-src {
    color: var(--text-secondary);
}

.ai-tag {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    white-space: nowrap;
}

.ai-pending {
    background: #e2e8f0;
    color: #475569;
}

.ai-confirmed {
    background: #dcfce7;
    color: #16a34a;
}

.ai-modified {
    background: #fef9c3;
    color: #ca8a04;
}

.ai-rejected {
    background: #fee2e2;
    color: #dc2626;
}

.ai-row-confirmed {
    border-color: #bbf7d0;
}

.ai-row-modified {
    border-color: #fde68a;
}

.ai-row-rejected {
    border-color: #fecaca;
    opacity: 0.65;
}

.st {
    display: inline-flex;
    min-height: 21px;
    align-items: center;
    justify-content: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
}

.st-auto {
    color: #166534;
    background: #dcfce7;
}

.st-warn {
    color: #92400e;
    background: #fef3c7;
}

.st-manual {
    color: #475569;
    background: #e2e8f0;
}

.warn-box {
    margin: 9px 0;
    padding: 9px 11px;
    color: #9a3412;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 7px;
    font-size: 12px;
}

.ok-note {
    margin-top: 7px;
    color: var(--success);
    font-size: 12px;
}

.uk-box {
    margin-top: 12px;
    padding: 11px 13px;
    background: var(--warning-soft);
    border: 1px solid var(--warning-border);
    border-radius: 8px;
}

.uk-title {
    margin-bottom: 8px;
    color: #92400e;
    font-size: 13px;
    font-weight: 700;
}

.uk-row {
    padding: 10px 0;
    border-bottom: 1px dashed #e7d7aa;
}

.uk-row:last-child {
    border-bottom: 0;
}

.uk-src {
    margin-bottom: 7px;
    color: var(--text);
    font-size: 12px;
    word-break: break-all;
}

.uk-sec {
    color: var(--text-muted);
}

.uk-hint {
    margin-left: 6px;
    color: var(--primary);
    font-size: 11px;
}

.uk-act {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.uk-sel {
    min-height: 36px;
    flex: 0 1 230px;
}

.uk-note {
    min-height: 18px;
    margin-top: 6px;
    font-size: 12px;
}

/* =========================================================
   材料生成选择
   ========================================================= */

.material-selector {
    padding: 18px 20px;
}

.material-selector legend {
    margin-bottom: 4px;
}

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

.material-option {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 82px;
    flex-direction: row;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 15px;
    color: var(--text);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition:
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}

.material-option:hover {
    border-color: color-mix(in srgb, var(--primary) 50%, #ffffff);
    box-shadow: var(--shadow-sm);
}

.material-option:has(input:checked) {
    background: var(--primary-soft);
    border-color: color-mix(in srgb, var(--primary) 50%, #ffffff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 6%, transparent);
}

.material-option input {
    margin-top: 2px;
    flex: 0 0 16px;
}

.material-option strong {
    display: block;
    color: var(--text);
    font-size: 14px;
}

.material-option small {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
}

/* =========================================================
   软著与备案表单
   ========================================================= */

.section-rz,
.section-ba {
    position: relative;
    overflow: visible;
    padding-top: 19px;
}

.section-rz {
    background:
        linear-gradient(180deg, #f8fbff 0, #ffffff 105px);
    border-color: #cfe0ff;
}

.section-ba {
    background:
        linear-gradient(180deg, #f7fdf9 0, #ffffff 105px);
    border-color: #ccebd7;
}

.section-rz > legend {
    color: #1d4ed8;
}

.section-ba > legend {
    color: #15803d;
}

.section-rz > legend::before,
.section-ba > legend::before {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 7px 2px 0;
    border-radius: 50%;
    content: "";
}

.section-rz > legend::before {
    background: #3b82f6;
}

.section-ba > legend::before {
    background: #22c55e;
}

.extra-row:empty {
    display: none;
}

/* =========================================================
   材料区字段显示配置入口 ⚙ + 弹窗
   ========================================================= */
.field-settings-btn {
    margin-left: 8px;
    padding: 0 6px;
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s, color 0.15s;
}
.field-settings-btn:hover {
    background: #eef2f7;
    color: #0f172a;
}

/* =========================================================
   字段清空组件（field-clear.js）：板块清空按钮 + 字段 × 图标
   不 reparent 业务 DOM：× 仅 append 到 label 末尾，依赖 label 相对定位
   ========================================================= */
.clear-section-btn {
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 12px;
    line-height: 1.6;
    color: #b91c1c;
    background: transparent;
    border: 1px solid #fecaca;
    border-radius: 6px;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s, color 0.15s;
}
.clear-section-btn:hover {
    background: #fef2f2;
    color: #7f1d1d;
    border-color: #fca5a5;
}

/* label 相对定位，供 × 图标绝对定位到右侧 */
.section-rz label[data-field-label],
.section-ba label[data-field-label] {
    position: relative;
}
/* 有 × 按钮的 label：本身为右侧 controls 区的定位上下文 */
/* =========================================================
   统一字段 actions 区（clear × / dropdown ▼）
   原则：× 和 ▼ 都以 .field-input-actions 容器为定位基准，容器绝对定位在
   输入框 wrapper 右侧、top:50% + translateY(-50%) 垂直居中；容器内 flex
   布局，× 在前、▼ 在后 → [输入内容][×][▼]。无 magic pixel，尺寸走 CSS 变量。
   ×/▼ 不互相作为定位基准，无论 input 36/40/44px 都上下正中。
   ========================================================= */
:root {
    --field-action-inset: 6px;
    --field-action-size: 22px;
    --field-action-gap: 4px;
    --field-dropdown-size: 42px;
    --field-select-arrow: 22px;
}
.label-has-clear { position: relative; }
.label-has-clear .combo { position: relative; }

.field-input-actions {
    position: absolute;
    right: var(--field-action-inset);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: var(--field-action-gap);
    z-index: 3;
}
/* × 作为 actions flex 子项（静态定位）*/
.field-input-actions .field-clear-x {
    position: static;
    top: auto; right: auto; left: auto; transform: none;
    width: var(--field-action-size);
    height: var(--field-action-size);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: none; /* 默认隐藏，hover label 显示 */
    align-items: center;
    justify-content: center;
}
/* ▼ 作为 actions flex 子项（静态定位；保留按钮视觉尺寸）*/
.field-input-actions .combo-btn {
    position: static;
    top: auto; right: auto; transform: none;
    width: var(--field-dropdown-size);
    height: 27px;
    padding: 0;
    color: #64748b;
    background: transparent;
    border: 0;
    border-left: 1px solid #eef2f7;
    border-radius: 0 7px 7px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
}

/* input padding-right 按控件类型自动预留 action 空间（避免文本跑到按钮下）：
   只有 × → 预留一个 action；×+▼ → 预留两个；无 action → 普通 padding。*/
.label-has-clear input:not([type=file]):not([type=hidden]) {
    padding-right: calc(var(--field-action-inset) + var(--field-action-size));
}
.label-has-clear select[name] {
    padding-right: calc(var(--field-action-inset) + var(--field-action-size) + var(--field-select-arrow));
}
.label-has-clear .combo > input:first-child {
    padding-right: calc(var(--field-action-inset) + var(--field-dropdown-size) + var(--field-action-gap) + var(--field-action-size));
}
/* select 的 actions 容器让出 CSS 箭头位置（整体右移到箭头左侧）*/
.label-has-clear:has(select[name]) .field-input-actions {
    right: calc(var(--field-action-inset) + var(--field-select-arrow));
}

/* hover/focus 显示 × */
.section-rz label[data-field-label]:hover .field-clear-x,
.section-ba label[data-field-label]:hover .field-clear-x,
label[data-field-label]:hover .field-clear-x,
.field-clear-x:focus-visible { display: flex; }
.field-clear-x:hover { background: #fee2e2; color: #b91c1c; }

.fd-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
}
.fd-dialog {
    width: var(--modal-width, min(560px, 92vw));
    max-height: var(--modal-max-height, 86vh);
    height: var(--modal-height, auto);
    overflow-y: auto;
    padding: 18px 20px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}
/* 需求#6-A：各弹窗可按 width 覆盖共享默认（在元素上加对应 hook 类生效） */
.fd-dialog.modal-field-library { width: var(--modal-field-library-width, var(--modal-width, min(560px, 92vw))); }
.fd-dialog.modal-field-config { width: var(--modal-field-config-width, var(--modal-width, min(560px, 92vw))); }
.fd-dialog.modal-field-display { width: var(--modal-field-display-width, var(--modal-width, min(560px, 92vw))); }
.fd-dialog.modal-history-field { width: var(--modal-history-field-width, var(--modal-width, min(560px, 92vw))); }
.fd-dialog-title {
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}
.fd-dialog-body {
    margin: 8px 0 14px;
}
.fd-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
/* UI-4-C1：移除 .primary 的蓝色硬编码覆盖，主按钮随全局 .primary 主题色；
   仅保留与 .ghost 同尺寸的紧凑内边距，避免与同行的 ghost 按钮高度错位。 */
.fd-dialog-actions .primary {
    padding: 6px 16px;
}
.fd-dialog-actions .primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.fd-dialog-actions .ghost {
    padding: 6px 16px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
}

/* =========================================================
   右侧生成摘要
   ========================================================= */

.summary-card {
    overflow: hidden;
    padding: 0;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.summary-card-header {
    padding: 17px 18px;
    background: linear-gradient(135deg, #172033, #23314b);
}

.summary-card-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 15px;
}

.summary-card-header p {
    margin: 4px 0 0;
    color: #aebbd0;
    font-size: 11px;
}

.summary-body {
    padding: 16px 18px;
}

.summary-group {
    padding: 11px 0;
    border-bottom: 1px solid #edf1f5;
}

.summary-group:first-child {
    padding-top: 0;
}

.summary-group:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.summary-label {
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 11px;
}

.summary-value {
    min-height: 20px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    word-break: break-all;
}

.summary-value.empty {
    color: #a1aab7;
    font-weight: 400;
}

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

.summary-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    color: #334155;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 11px;
}

.summary-tag.active-rz {
    color: #1d4ed8;
    background: #dbeafe;
}

.summary-tag.active-ba {
    color: #15803d;
    background: #dcfce7;
}

.summary-note {
    margin-top: 14px;
    padding: 10px 11px;
    color: #64748b;
    background: #f8fafc;
    border-radius: 7px;
    font-size: 11px;
    line-height: 1.6;
}

/* =========================================================
   底部操作栏与格式选择
   ========================================================= */

.action-row {
    position: sticky;
    bottom: 12px;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(12px);
}

.action-row .primary,
.action-row .secondary {
    min-width: 96px;
    margin: 0;
}

.fmt-bar,
.fmt-inline {
    display: inline-flex;
    min-height: 39px;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
    padding: 7px 12px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 7px;
}

.fmt-bar {
    margin-bottom: 16px;
}

.fmt-bar > span,
.fmt-label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.fmt-bar label,
.fmt-inline label {
    display: inline-flex;
    width: auto;
    min-width: 0;
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    margin: 0;
    color: var(--text);
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
}

.action-row .status {
    min-width: 120px;
    flex: 1;
}

/* =========================================================
   预览
   ========================================================= */

.preview-wrap {
    margin-top: 22px;
    padding: 19px 20px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.preview-wrap h3 {
    margin: 0 0 5px;
    color: var(--text);
    font-size: 16px;
}

.preview-area {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 17px;
}

.preview-item {
    min-width: 0;
    margin: 0;
}

.preview-cap {
    margin-bottom: 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.preview-item img {
    display: block;
    width: 100%;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: var(--shadow-sm);
}

.combo-popup {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    left: 0;
    z-index: 1000;
    display: none;
    max-height: 360px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
}

.combo-popup.open {
    display: block;
}

.combo-item {
    position: relative;
    display: flex;
    min-height: 39px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    color: var(--text);
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
}

.combo-item:last-child {
    border-bottom: 0;
}

.combo-item:hover,
.combo-item.active {
    background: var(--primary-soft);
}

.combo-code {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}

.combo-empty {
    padding: 12px;
    color: var(--text-muted);
    font-size: 12px;
}

.combo-del {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0;
    color: #9ca3af;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
}

.combo-del:hover {
    color: var(--danger);
    background: var(--danger-soft);
}

/* =========================================================
   公章库
   ========================================================= */

.seal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 14px;
    margin-top: 15px;
}

.seal-cell {
    min-width: 0;
    padding: 10px;
    text-align: center;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.seal-cell img {
    display: block;
    width: 100%;
    height: 112px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid #edf1f5;
    border-radius: 7px;
}

.seal-cell div {
    margin-top: 7px;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   模板管理
   ========================================================= */

.tpl-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tpl-row {
    padding: 13px 14px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.tpl-meta {
    margin-bottom: 10px;
    color: var(--text);
    font-size: 13px;
}

.tpl-meta code {
    margin-left: 4px;
}

.tpl-ok {
    margin-left: 6px;
    color: var(--success);
    font-size: 11px;
}

.tpl-miss {
    margin-left: 6px;
    color: var(--danger);
    font-size: 12px;
    font-weight: 700;
}

.tpl-act {
    display: flex;
    align-items: center;
    gap: 9px;
}

.tpl-act input[type="file"] {
    min-width: 0;
    flex: 1;
}

/* === UI-4-B2 START === */
/*
   模板管理页企业卡片视觉重构 + 版本历史当前版本高亮。
   作用域：#tab-tpl 模板管理页 与 .vh-* 版本历史弹窗，不影响生成页/设置/历史等。
   约束：新增颜色声明仅使用 var(--primary)/var(--primary-soft)/var(--card-bg)/
   var(--page-bg)/var(--text)/var(--border)；非颜色间距/尺寸/圆角不受限。
   保留全部既有 id/name/class/data-tpl/data-vid/事件绑定/端点载荷与函数名。
*/

/* ---- 模板管理：企业卡片外观 ---- */
#tab-tpl .tpl-row {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px var(--border);
}

#tab-tpl .tpl-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

#tab-tpl .tpl-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--text);
}

#tab-tpl .tpl-card-title b {
    color: var(--text);
    font-size: 15px;
}

#tab-tpl .tpl-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 14px;
    line-height: 1;
}

#tab-tpl .tpl-status {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--page-bg);
    color: var(--text);
    white-space: nowrap;
}

#tab-tpl .tpl-status-ok {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: var(--primary);
}

#tab-tpl .tpl-status-miss {
    background: var(--page-bg);
    color: var(--text);
    border-color: var(--border);
}

#tab-tpl .tpl-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-bottom: 14px;
    color: var(--text);
    font-size: 13px;
}

#tab-tpl .tpl-card-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 130px;
}

#tab-tpl .tpl-card-label {
    font-size: 11px;
    color: var(--text);
    opacity: 0.65;
}

#tab-tpl .tpl-card-value {
    color: var(--text);
    word-break: break-all;
}

#tab-tpl .tpl-card-value code {
    background: var(--page-bg);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 0;
}

/* ---- 版本历史：当前版本显著高亮（其余版本沿用既有 .vh-row 卡片样式）---- */
.vh-row.vh-row-active {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.vh-row.vh-row-active .vh-vno {
    color: var(--primary);
}

.vh-row.vh-row-active .vh-note {
    color: var(--text);
    font-weight: 600;
}

/* 已删除版本：置灰 + 禁用激活/编辑/删除（仅保留 详情/打开文件位置/恢复） */
.vh-row.vh-row-deleted {
    opacity: 0.62;
    border-style: dashed;
    border-color: #cbd5e1;
    background: repeating-linear-gradient(
        45deg, #f8fafc, #f8fafc 8px, #f1f5f9 8px, #f1f5f9 16px);
}
.vh-row.vh-row-deleted .vh-note { text-decoration: line-through; color: #64748b; }
.vh-row.vh-row-deleted:hover { border-color: #94a3b8; }

/* === UI-4-B2 END === */

/* =========================================================
   设置页
   ========================================================= */

.set-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 9px 0;
}

.set-empty {
    padding: 8px 0;
    color: var(--text-muted);
    font-size: 12px;
}

/* =========================================================
   UI-4-C3：统一空状态视觉类
   仅使用主题变量，不新增蓝/绿硬编码。
   既有 set-empty / vh-empty / te-empty / .history-table td.empty
   兼容类保留；空态元素同时携带 .empty-state 以获得统一呈现。
   ========================================================= */
.empty-state {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.set-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.set-main {
    min-width: 0;
    flex: 1;
    color: var(--text);
    font-size: 13px;
    word-break: break-all;
}

.set-sub {
    color: var(--text-muted);
    font-size: 11px;
}

.set-row .set-input {
    min-height: 35px;
    padding: 5px 8px;
    font-size: 12px;
}

.set-main.set-input {
    flex: 1;
}

.set-code.set-input {
    min-width: 180px;
    flex: 1;
}

.set-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
}

.set-add input[type="text"],
.set-add select {
    min-width: 140px;
    min-height: 37px;
    flex: 1;
    padding: 6px 9px;
    font-size: 12px;
}

.set-alias-field {
    padding: 10px 0;
    border-bottom: 1px solid #edf1f5;
}

.set-alias-field:last-child {
    border-bottom: 0;
}

.set-alias-label {
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.set-chip {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    gap: 4px;
    margin: 2px 4px 2px 0;
    padding: 2px 3px 2px 9px;
    color: color-mix(in srgb, var(--primary) 72%, var(--text));
    background: var(--primary-soft);
    border: 1px solid var(--primary-border);
    border-radius: 999px;
    font-size: 12px;
}

.chip-x {
    position: static;
    width: 20px;
    height: 20px;
    flex-basis: 20px;
}

.set-expand-row {
    margin-top: 7px;
    text-align: left;
}

.set-expand {
    min-height: 31px;
    padding: 4px 11px;
    font-size: 11px;
}

.set-chip-expand {
    min-height: 26px;
    margin-left: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
}

/* =========================================================
   信息提示
   ========================================================= */

.notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
}

.notice-info {
    color: color-mix(in srgb, var(--primary) 75%, var(--text));
    background: var(--primary-soft);
    border-color: var(--primary-border);
}

.notice-success {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.notice-error {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
    font-weight: 500;
}

/* =========================================================
   滚动条
   ========================================================= */

.sidebar::-webkit-scrollbar,
.combo-popup::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 999px;
}

.combo-popup::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

/* =========================================================
   响应式
   ========================================================= */

@media (max-width: 1180px) {
    .single-layout {
        grid-template-columns: minmax(0, 1fr) 270px;
    }

    .main-content {
        padding-right: 24px;
        padding-left: 24px;
    }
}

@media (max-width: 980px) {
    :root {
        --sidebar-width: 218px;
    }

    .single-layout {
        display: block;
    }

    .summary-column {
        position: static;
        margin-bottom: 18px;
    }

    .summary-card {
        margin-top: 0;
    }

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

    .summary-note {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .app-shell {
        padding-left: 0;
        padding-top: 64px;
    }

    .sidebar {
        position: fixed;
        inset: 0 0 auto;
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
        background: var(--sidebar-bg);
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .brand {
        display: flex;
        min-height: 64px;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px;
        border-bottom: 0;
    }

    .brand-logo {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 9px;
        font-size: 15px;
    }

    .brand h1 {
        font-size: 17px;
    }

    .brand .subtitle {
        display: none;
    }

    .sidebar-nav-title,
    .sidebar-footer {
        display: none;
    }

    .tabs {
        position: absolute;
        top: 64px;
        right: 0;
        left: 0;
        display: none;
        padding: 9px;
        background: var(--sidebar-bg);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: var(--shadow-lg);
    }

    .sidebar.nav-open .tabs {
        display: flex;
    }

    .tab.active::before {
        display: none;
    }

    .mobile-menu-btn {
        display: inline-flex;
        width: 38px;
        height: 38px;
        align-items: center;
        justify-content: center;
        color: #e2e8f0;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        cursor: pointer;
        font-size: 18px;
    }

    .main-content {
        padding: 20px 14px 70px;
    }

    .page-heading {
        margin-bottom: 16px;
    }

    .page-title-group h2 {
        font-size: 21px;
    }

    .page-badge {
        display: none;
    }

    fieldset,
    .card {
        padding: 17px 15px;
        border-radius: 11px;
    }

    .material-options {
        grid-template-columns: 1fr;
    }

    .row {
        display: block;
    }

    .row + .row {
        margin-top: 0;
    }

    .row > label {
        margin-bottom: 13px;
    }

    label {
        min-width: 0;
    }

    label.inline {
        margin-bottom: 8px;
    }

    label.inline + label.inline {
        margin-left: 0;
    }

    .smart-header {
        padding: 14px 15px;
    }

    .smart-header p {
        display: none;
    }

    .smart-body {
        padding: 15px;
    }

    .fd-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .fd-val {
        grid-column: 1 / -1;
        padding-left: 3px;
    }

    .summary-body {
        display: block;
    }

    .action-row {
        bottom: 7px;
        padding: 10px;
    }

    .action-row .primary,
    .action-row .secondary {
        min-width: calc(50% - 5px);
        flex: 1;
    }

    .fmt-inline {
        width: 100%;
        justify-content: center;
    }

    .action-row .status {
        width: 100%;
        flex-basis: 100%;
    }

    .preview-area {
        grid-template-columns: 1fr;
    }

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

    .set-row {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .set-main,
    .set-main.set-input,
    .set-code.set-input {
        width: 100%;
        min-width: 100%;
        flex-basis: 100%;
    }

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

@media (max-width: 430px) {
    .main-content {
        padding-right: 10px;
        padding-left: 10px;
    }

    .page-title-group h2 {
        font-size: 19px;
    }

    fieldset,
    .card {
        padding-right: 13px;
        padding-left: 13px;
    }

    .smart-actions .primary {
        width: 100%;
    }

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

    .uk-sel,
    .uk-act .ghost {
        width: 100%;
        flex-basis: auto;
    }

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

    .fmt-inline {
        gap: 8px;
    }
}

/* =========================================================
   打印
   ========================================================= */

@media print {
    body {
        background: #ffffff;
    }

    .sidebar,
    .action-row,
    .smart-section,
    .summary-column,
    .page-heading {
        display: none !important;
    }

    .app-shell {
        padding: 0;
    }

    .main-content {
        max-width: none;
        padding: 0;
    }

    .panel {
        display: block;
    }

    fieldset,
    .card,
    .preview-wrap {
        box-shadow: none;
    }
}

/* =========================================================
   单份生成操作栏
   ========================================================= */
.action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.action-row .fmt-inline {
    margin-left: auto;
}
.action-row .status {
    flex: 0 0 100%;
    min-height: 0;
}
/* UI-4-C1：清空按钮为次要危险操作，复用 --danger/--danger-soft 语义 token，
   不使用红色实心背景；保留 clear-btn 类名，仅替换硬编码红为 danger 变量。 */
.clear-btn {
    color: var(--danger);
    background: var(--card-bg);
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}
.clear-btn:hover {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: var(--danger);
}
.clear-btn:focus-visible {
    outline: none;
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

/* =========================================================
   表单字段网格
   ========================================================= */
.row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 15px 16px;
    align-items: start;
}
.row + .row {
    margin-top: 15px;
}
.row > label {
    min-width: 0;
    margin: 0;
}

/* =========================================================
   单份生成主区域
   ========================================================= */
.single-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
    align-items: start;
}
.form-column {
    min-width: 0;
}
.summary-column {
    min-width: 0;
}
.summary-card {
    position: sticky;
    top: 20px;
}

/* =========================================================
   输入框、下拉框和文本域
   ========================================================= */
input[type="text"],
input[type="file"],
select,
textarea,
.set-input {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    padding: 9px 12px;
    color: #172033;
    background-color: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    outline: none;
    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background-color 0.16s ease;
}
textarea {
    min-height: 120px;
    resize: vertical;
}
input[type="text"]::placeholder,
textarea::placeholder {
    color: #9aa5b4;
}
input[type="text"]:hover,
input[type="file"]:hover,
select:hover,
textarea:hover,
.set-input:hover {
    border-color: #94a3b8;
}
input[type="text"]:focus,
input[type="file"]:focus,
select:focus,
textarea:focus,
.set-input:focus {
    background-color: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
input:disabled,
select:disabled,
textarea:disabled {
    color: #94a3b8;
    background-color: #f1f5f9;
    border-color: #e2e8f0;
    cursor: not-allowed;
}
input[readonly] {
    color: #475569;
    background-color: #f8fafc;
}

/* =========================================================
   Select 下拉框
   ========================================================= */
select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, #64748b 50%),
        linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position:
        calc(100% - 17px) 18px,
        calc(100% - 12px) 18px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
select:focus {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--primary) 50%),
        linear-gradient(135deg, var(--primary) 50%, transparent 50%);
}

/* =========================================================
   自定义 Combobox（统一右侧 controls 区：[输入内容][×][▼]）
   × 与 ▼ 均绝对定位在 .combo 右侧，top:50% + translateY 垂直居中，
   不用 magic pixel；input padding-right 预留 ×+▼ 两按钮空间。
   ========================================================= */
.combo {
    position: relative;
    width: 100%;
}
.combo > input {
    width: 100%;
    padding-right: 68px; /* ▼(40px) + ×(18px) + 间距 */
}
.combo-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 27px;
    padding: 0;
    color: #64748b;
    background: transparent;
    border: 0;
    border-left: 1px solid transparent;
    border-radius: 0 7px 7px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
}
.combo-btn:hover {
    color: var(--primary);
    background: #f8fafc;
}
.combo:focus-within .combo-btn {
    color: var(--primary);
}
.combo-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    z-index: 50;
    display: none;
    min-width: 100%;
    width: max-content;
    max-width: 560px;
    max-height: 320px;
    overflow-y: auto;
    padding: 5px;
    background: #fff;
    border: 1px solid #d8e0eb;
    border-radius: 9px;
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.12),
        0 3px 8px rgba(15, 23, 42, 0.06);
}
.combo-popup.open {
    display: block;
}
.combo-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    min-height: 38px;
    padding: 7px 9px;
    color: #334155;
    border-radius: 6px;
    cursor: pointer;
}
.combo-item:hover,
.combo-item.active {
    color: var(--primary-hover);
    background: var(--primary-soft);
}
/* 主体名为主内容：占满整行、允许换行、绝不出现「仅 1-2 字 + 省略号」 */
.combo-item > span:first-child {
    flex: 1 1 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
}
/* 信用代码为辅助信息：独占次行，不再抢占主体名宽度 */
.combo-code {
    flex: 0 0 auto;
    margin: 0;
    color: #94a3b8;
    font-size: 12px;
    white-space: nowrap;
}
.combo-del {
    flex: 0 0 auto;
    margin-left: auto;
    color: #94a3b8;
    cursor: pointer;
}
.combo-del:hover {
    color: #dc2626;
}
.combo-empty {
    padding: 12px 10px;
    color: #94a3b8;
    font-size: 13px;
    text-align: center;
}

/* =========================================================
   文件上传框
   ========================================================= */
input[type="file"] {
    padding: 5px 7px;
    color: #64748b;
    cursor: pointer;
}
input[type="file"]::file-selector-button {
    min-height: 30px;
    margin-right: 10px;
    padding: 5px 12px;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition:
        color 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease;
}
input[type="file"]::file-selector-button:hover {
    color: var(--primary-hover);
    background: var(--primary-soft);
    border-color: color-mix(in srgb, var(--primary) 50%, #ffffff);
}

/* =========================================================
   表单错误状态
   ========================================================= */
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: #dc2626;
    background-color: #fffafa;
}
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.field-error {
    display: block;
    margin-top: 5px;
    color: #dc2626;
    font-size: 12px;
    line-height: 1.4;
}

/* =========================================================
   响应式布局
   ========================================================= */
@media (max-width: 1100px) {
    .single-layout {
        display: flex;
        flex-direction: column;
    }
    .form-column,
    .summary-column {
        width: 100%;
    }
    .summary-column {
        order: 2;
    }
    .summary-card {
        position: static;
    }
    .summary-body {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 18px;
    }
    .summary-note {
        grid-column: 1 / -1;
    }
}
@media (max-width: 760px) {
    .row {
        grid-template-columns: 1fr;
        gap: 13px;
    }
    .row + .row {
        margin-top: 13px;
    }
    .action-row .fmt-inline {
        flex: 0 0 100%;
        margin-left: 0;
    }
    .action-row > .primary,
    .action-row > .secondary,
    .action-row > .clear-btn {
        flex: 1 1 calc(33.333% - 8px);
        min-width: 0;
    }
    .summary-body {
        grid-template-columns: 1fr;
    }
    .summary-note {
        grid-column: auto;
    }
}
@media (max-width: 430px) {
    .action-row > .primary,
    .action-row > .secondary {
        flex: 1 1 calc(50% - 5px);
    }
    .action-row > .clear-btn {
        flex: 0 0 100%;
    }
    input[type="text"],
    input[type="file"],
    select,
    textarea,
    .set-input {
        font-size: 16px;
    }
}

/* =========================================================
   公章可视化编辑器
   ========================================================= */
.seal-editor-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
}
.seal-editor-overlay[hidden] {
    display: none;
}
.seal-editor-modal {
    width: min(96vw, 1180px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
    overflow: hidden;
}
.seal-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
}
.seal-editor-head h3 {
    margin: 0;
    font-size: 16px;
    color: #172033;
}
.seal-editor-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
    padding: 16px;
    overflow: auto;
}
.se-pages {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    min-width: 0;
}
.se-page {
    position: relative;
    line-height: 0;
    border: 1px solid #d8e0eb;
    border-radius: 6px;
    overflow: visible;
    background: #fff;
}
.se-page-img {
    display: block;
    max-width: 100%;
    height: auto;
    user-select: none;
    pointer-events: none;
}
.se-seal-layer {
    position: absolute;
    inset: 0;
    line-height: 1.4;
}
.se-seal {
    position: absolute;
    box-sizing: border-box;
    border: 1.5px dashed transparent;
    cursor: move;
    touch-action: none;
    user-select: none;
}
.se-seal img {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}
.se-seal.se-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
}
.se-seal.se-oob {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
}
.se-seal-label {
    position: absolute;
    top: -18px;
    left: 0;
    padding: 1px 6px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    border-radius: 4px;
    white-space: nowrap;
    display: none;
}
.se-seal.se-selected .se-seal-label {
    display: block;
}
.se-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2px solid var(--primary);
    border-radius: 50%;
    z-index: 3;
}
.se-handle-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.se-handle-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.se-handle-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.se-handle-se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.seal-editor-side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#se-seal-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.se-seal-pick {
    min-height: 28px;
    padding: 3px 10px;
    font-size: 12px;
}
.se-seal-pick.active {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary-hover);
}
.se-readout {
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
    font-size: 13px;
}
.se-readout > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
}
.se-readout span {
    color: #94a3b8;
}
.se-readout b {
    color: #334155;
    font-weight: 600;
}
.se-warn {
    color: #dc2626 !important;
}
.se-saved {
    color: #16a34a;
    margin-top: 6px;
}
.se-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.se-actions button {
    flex: 1 1 auto;
    min-height: 32px;
}
.preview-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}
.seal-edit-btn {
    min-height: 30px;
    padding: 4px 12px;
    font-size: 12px;
}
@media (max-width: 760px) {
    .seal-editor-body {
        grid-template-columns: 1fr;
    }
}

/* 公章编辑器：禁止原生图片拖动 + 缩放点 touch-action（修复缩放 bug 配套） */
.se-page-img,
.se-seal img {
    -webkit-user-drag: none;
    user-drag: none;
    user-select: none;
}
.se-handle {
    touch-action: none;
    user-select: none;
}
.se-seal {
    -webkit-user-drag: none;
}

/* 编辑器侧栏：当前公章下拉 + 精确数值输入 + 读数 + 操作 */
.seal-editor-side {
    gap: 12px;
}
.se-side-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.se-side-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}
.se-seal-select {
    min-height: 34px;
    padding: 4px 8px;
    font-size: 13px;
}
.se-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px 10px;
    align-items: end;
    padding: 10px 12px;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
    background: #fbfcfe;
}
.se-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: #475569;
}
.se-field input[type="number"] {
    min-height: 32px;
    padding: 4px 8px;
    font-size: 13px;
}
.se-field input[type="number"]:disabled {
    background: #f1f5f9;
    color: #94a3b8;
}
.se-field-lock {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
.se-field-err {
    grid-column: 1 / -1;
    margin: 0;
    min-height: 0;
    color: #b42318;
    font-size: 12px;
}
.se-field-err:empty {
    display: none;
}
.se-field input.is-invalid {
    border-color: #dc2626;
    background: #fef2f2;
}
.se-readout {
    font-size: 12px;
    line-height: 1.5;
}
.se-side-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.se-side-actions button {
    flex: 1 1 auto;
    min-height: 30px;
    padding: 4px 10px;
    font-size: 12px;
}
.se-hint {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}
.se-ok {
    color: #16a34a !important;
}

/* 底部操作栏（长内容滚动时随模态框底部常驻） */
.seal-editor-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}
.seal-editor-foot button {
    min-width: 120px;
    min-height: 36px;
}

/* 统一确认弹窗 */
.se-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
}
.se-confirm-overlay[hidden] {
    display: none;
}
.se-confirm-modal {
    width: min(90vw, 420px);
    padding: 20px 22px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
}
.se-confirm-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #172033;
}
.se-confirm-msg {
    margin: 0 0 16px;
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
    white-space: pre-wrap;
}
.se-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.se-confirm-actions button {
    min-height: 34px;
    padding: 4px 14px;
    font-size: 13px;
}

/* 窄屏：编辑器改上下布局，底部栏常驻 */
@media (max-width: 760px) {
    .seal-editor-modal {
        max-height: 96vh;
    }
    .seal-editor-body {
        grid-template-columns: 1fr;
    }
    .seal-editor-foot {
        position: sticky;
        bottom: 0;
    }
}

/* =========================================================
   历史记录：字段区、列表、筛选、弹窗
   ========================================================= */
.history-fields-fieldset {
    margin-top: 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 12px 14px;
}
.history-fields-fieldset[hidden] { display: none; }
.history-field-group { margin-bottom: 14px; }
.history-field-group[hidden] { display: none; }
.history-group-title {
    margin: 4px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}
.history-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}
.history-field-row label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #475569;
    flex: 1 1 220px;
}
.history-field-row .req { color: #dc2626; }
.req { color: #dc2626; }

/* === UI-4-B3 START === */
/* =========================================================
   历史记录页（UI-4-B3 企业管理后台视觉重构）
   作用域：.history-* / .hist-* 类名仅在 #tab-history 与历史弹窗使用，
   不影响生成/模板/设置页。仅使用允许的语义色变量。
   ========================================================= */
/* 标题区 -> 筛选卡片 -> 记录列表 -> 详情弹窗 的视觉层级 */
#tab-history .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
#tab-history .panel-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}
#tab-history .hint {
    margin: 4px 0 14px;
    color: var(--text);
    opacity: 0.7;
    font-size: 12px;
}
.history-top-actions { display: flex; gap: 8px; }

/* 筛选卡片 */
.history-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin: 0 0 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
}
.history-filters legend {
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    padding: 0;
    margin-bottom: 4px;
}
.history-filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text);
    opacity: 0.75;
}
.history-filters input, .history-filters select { min-width: 140px; }

/* 记录列表 */
.history-list-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
}
.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--card-bg);
}
.history-table th, .history-table td {
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    text-align: left;
    white-space: nowrap;
}
.history-table thead th {
    background: var(--primary-soft);
    color: var(--text);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.history-table tbody tr {
    transition: background 0.12s ease;
}
.history-table tbody tr:hover {
    background: var(--primary-soft);
}
.history-table tbody tr:last-child td {
    border-bottom: none;
}
.history-table td.empty {
    text-align: center;
    color: var(--text);
    opacity: 0.7;
    white-space: normal;
    padding: 28px 12px;
}
.history-table .row-actions { display: flex; gap: 6px; }
.history-table .row-actions button {
    padding: 4px 10px;
    font-size: 12px;
    min-height: 28px;
}
.history-table .hist-col-check { text-align: center; vertical-align: middle; }
.history-table .hist-col-check .inline { display: inline-flex; }
#btn-history-export:disabled { opacity: 0.5; cursor: not-allowed; }
.hist-export-fieldset { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.hist-export-fieldset .inline { display: flex; align-items: center; gap: 6px; }

/* 选择已有信息字段（来源 Field Library）*/
.catalog-list { display: flex; flex-direction: column; gap: 6px; }
.catalog-row label.inline { display: flex; align-items: center; gap: 8px; }

/* 状态徽标：仅使用 --success/--warning/--error 表达状态语义，
   底色取中性 var(--card-bg)；不用 --primary，也不用 *-soft 软色令牌 */
.hist-status {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    border: 1px solid transparent;
}
.hist-status--success {
    color: var(--success);
    background: var(--card-bg);
    border-color: var(--success);
}
.hist-status--warning {
    color: var(--warning);
    background: var(--card-bg);
    border-color: var(--warning);
}
.hist-status--error {
    color: var(--error);
    background: var(--card-bg);
    border-color: var(--error);
}

.history-pager {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text);
    opacity: 0.75;
}
.history-pager button { padding: 4px 12px; }

/* 通用弹窗（历史字段设置/详情/编辑） */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
}
.modal-overlay[hidden] { display: none; }
.modal {
    width: min(90vw, 520px);
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
}
.modal-lg { width: min(94vw, 820px); }
.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
}
.modal-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: #172033; }
.modal-body { padding: 16px 18px; }
.modal-body label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #475569;
}
.modal-body label.inline {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}
.hf-options-textarea { width: 100%; }

/* 历史详情弹窗：标题/分组/字段间距/操作区（作用域 hist-* 类名） */
#hist-detail-modal .modal-head h3 {
    font-size: 16px;
    color: var(--text);
}
#hist-detail-modal .modal-body { padding: 18px 20px; }
.hist-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 20px;
    font-size: 12px;
    color: var(--text);
    background: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 16px;
}
.hist-detail-meta .k { color: var(--text); opacity: 0.65; font-weight: 500; }
.hist-detail-section {
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    background: var(--card-bg);
}
.hist-detail-section h4 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.hist-detail-fields {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 6px 14px;
    font-size: 13px;
}
.hist-detail-fields .k { color: var(--text); opacity: 0.65; }
#hist-detail-modal .row-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}
#hist-detail-modal .row-actions > span {
    color: var(--text);
    opacity: 0.75;
}
.hist-detail-files { margin-top: 6px; font-size: 13px; }

/* === UI-4-B3 END === */

/* ---- 历史字段设置弹窗（唯一入口：启用 switch + 尺寸，来源字段库）---- */
.hist-field-modal {
    width: var(--modal-history-field-width, var(--modal-width, min(720px, 94vw)));
    max-height: var(--modal-max-height, 86vh);
}
.history-fields-toolbar { margin-bottom: 12px; }
#hf-table th, #hf-table td { vertical-align: middle; }
.hf-label { font-weight: 500; }
.hf-material { color: #64748b; white-space: nowrap; }
.history-table .hf-enable { width: 80px; text-align: center; }

/* 启用开关组件（公共，不针对字段特判）。
   用 label.switch 选择器（特异性 0,2,0）覆盖 .modal-body label 的 flex-column，
   确保开关紧凑（44×24），不被弹窗 label 默认样式撑成纵向长条。*/
label.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 44px;
    height: 24px;
    min-width: 0;
    max-width: 44px;
    flex: 0 0 44px;
    cursor: pointer;
    vertical-align: middle;
}
label.switch input {
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
    z-index: 2;
    cursor: pointer;
}
.switch-track {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background 0.15s;
}
.switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.switch input:checked + .switch-track {
    background: var(--primary, #2563eb);
}
.switch input:checked + .switch-track::after {
    transform: translateX(20px);
}

/* 选择已有信息字段（来源 Field Library）*/
.catalog-list { display: flex; flex-direction: column; gap: 6px; }
.catalog-row label.inline { display: flex; align-items: center; gap: 8px; }

/* =========================================================
   模板编辑器（阶段 D）
   ========================================================= */
.te-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
}
.te-overlay[hidden] { display: none; }
.te-modal {
    width: var(--modal-template-editor-width, min(96vw, 1180px));
    height: var(--modal-height, min(92vh, 820px));
    max-height: var(--modal-max-height, min(92vh, 820px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
    overflow: hidden;
}
.te-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
}
.te-title-group { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.te-title-group h3 { margin: 0; font-size: 16px; color: #172033; }
.te-sub { font-size: 12px; color: #64748b; }
.te-status { font-size: 13px; color: #475569; min-width: 120px; text-align: right; }
.te-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    padding: 16px;
    overflow: auto;
    flex: 1;
}
.te-canvas {
    overflow: auto;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.te-canvas-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.te-canvas-wrap .te-canvas { flex: 1 1 auto; }
.te-canvas-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.te-canvas-toolbar .hint { flex: 1; min-width: 0; }
/* 允许在 run 文字上拖选（自由选文本设变量）*/
.te-runs, .te-run { user-select: text; -webkit-user-select: text; }
.te-run::selection, .te-runs ::selection { background: #c7d2fe; color: #1e293b; }
.te-empty { color: var(--text-muted); font-size: 13px; padding: 20px; text-align: center; }
.te-para {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 10px;
}
.te-para-table { border-left: 3px solid #6366f1; }
.te-para-selected {
    background: #f0f9ff;
    border-color: #38bdf8;
    box-shadow: inset 3px 0 0 #0284c7;
}
.te-para-head {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
}
.te-para-head:hover { color: #0369a1; }
.te-runs { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.te-run {
    cursor: pointer;
    padding: 1px 3px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid transparent;
}
.te-run:hover { background: #eef2ff; border-color: #c7d2fe; }
.te-run.te-run-var {
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
}
/* Stage G：变量清单点击后，正文对应变量 run 的明显选中样式 */
.te-run.te-variable-selected {
    outline: 2px solid #4f46e5;
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
    background: #eef2ff !important;
    border-color: #6366f1 !important;
    color: #3730a3 !important;
    z-index: 2;
}
.te-badge {
    font-size: 10px;
    color: #dc2626;
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: 3px;
    padding: 0 3px;
    margin-left: 3px;
}
.te-side {
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.te-side-section {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
}
.te-side-section h4 { margin: 0 0 8px; font-size: 13px; color: #334155; }
.te-selected-info { font-size: 12px; color: #475569; }
.te-run-edit { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.te-run-edit label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #475569; }
.te-run-edit input { padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 13px; }
.te-run-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.te-var-list { list-style: none; margin: 0; padding: 0; font-size: 12px; color: #475569; max-height: 140px; overflow: auto; }
.te-var-list li { padding: 2px 0; border-bottom: 1px dashed #e2e8f0; }
.te-var-list li.te-var-item { cursor: pointer; }
.te-var-list li.te-var-item:hover { background: #f1f5f9; color: #1e293b; }
.te-var-list li.te-var-active { background: #eef2ff; color: #1e293b; font-weight: 600; }
.te-var-list .te-var-orig { font-size: 11px; color: #64748b; margin-top: 2px; word-break: break-all; }

/* 变量 schema tooltip（hover 显示）*/
.te-var-tip {
    position: fixed;
    z-index: 50;
    min-width: 200px;
    max-width: 280px;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid #1e293b;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.6;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    pointer-events: none;
}
.te-var-tip .te-tip-title { font-weight: 600; color: #fff; margin-bottom: 4px; }
.te-var-tip .te-tip-row { display: flex; gap: 6px; }
.te-var-tip .te-tip-k { color: #94a3b8; min-width: 56px; }
.te-var-tip .te-tip-v { color: #e2e8f0; word-break: break-all; }
.te-schema-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow: auto; }
.te-schema-row { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; }
.te-schema-row:hover { border-color: #cbd5e1; }
.te-schema-row.te-schema-active { border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79,70,229,0.18); background: #f5f7ff; }
.te-schema-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.te-schema-toggle { padding: 1px 6px !important; font-size: 12px; line-height: 1.2; width: 20px; flex-shrink: 0; }
.te-schema-key { font-size: 12px; color: #334155; font-weight: 600; flex: 1 1 100%; min-width: 0; word-break: break-all; white-space: normal; }
.te-schema-mode-badge { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #ede9fe; color: #6d28d9; font-weight: 600; flex-shrink: 0; }
/* 窄列折叠态：隐藏详情；展开态 .te-schema-detail-open 显示 */
.te-schema-detail { display: none; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e2e8f0; }
.te-schema-detail.te-schema-detail-open { display: flex; }
/* 问题 1：独立字段配置 Drawer —— detail 被借到 Drawer 时强制显示 */
#te-schema-drawer-body .te-schema-detail { display: flex; }
.te-schema-drawer-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(94vw, 520px);
    z-index: 340;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -12px 0 40px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
}
.te-schema-drawer-overlay[hidden] { display: none; }
.te-schema-drawer-panel { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.te-schema-drawer-body { padding: 14px 18px; overflow-y: auto; flex: 1; }
.te-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid #e2e8f0; }
.te-drawer-title-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.te-drawer-title { font-size: 15px; font-weight: 700; color: #172033; word-break: break-all; }
.te-drawer-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* 位置信息折叠段（<details>，默认收起） */
.te-schema-loc { border: 1px solid #eef2f7; border-radius: 6px; background: #f8fafc; padding: 4px 8px; }
.te-schema-loc > summary.te-schema-loc-summary { cursor: pointer; font-size: 11px; font-weight: 600;
    color: #64748b; list-style: none; padding: 2px 0; }
.te-schema-loc > summary.te-schema-loc-summary::before { content: "▸"; margin-right: 6px; font-size: 10px; }
.te-schema-loc[open] > summary.te-schema-loc-summary::before { content: "▾"; }
.te-schema-loc-body { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e2e8f0; }
.te-schema-group { display: flex; flex-direction: column; gap: 5px; }
.te-schema-group-title { font-size: 11px; font-weight: 600; color: #64748b; border-left: 3px solid #c7d2fe; padding-left: 6px; }
.te-schema-group-info { background: #f8fafc; border-radius: 4px; padding: 6px; }
.te-schema-info-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.te-schema-info-label { color: #64748b; flex-shrink: 0; }
.te-schema-info-value { color: #334155; text-align: right; word-break: break-all; }
.te-schema-kind { font-size: 11px; padding: 1px 6px; border-radius: 8px; font-weight: 600; }
.te-badge-text { background: #e0f2fe; color: #0369a1; }
.te-badge-seal { background: #fee2e2; color: #b91c1c; }
.te-schema-sys { font-size: 11px; color: #64748b; background: #f1f5f9; padding: 1px 6px; border-radius: 8px; }
.te-schema-sort { display: inline-flex; gap: 2px; }
.te-schema-sort button { padding: 1px 7px; font-size: 12px; line-height: 1.4; }
.te-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #475569; }
.te-field > span { font-size: 11px; color: #64748b; }
.te-field input[type="text"], .te-field select { padding: 3px 6px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12px; background: #fff; }
.te-field-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.te-field-row label.inline { flex-direction: row; align-items: center; gap: 4px; font-size: 12px; }
.te-field-default { flex: 1; min-width: 120px; }
.te-schema-label { padding: 3px 6px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12px; }
.te-seal-note { font-size: 11px; color: #b91c1c; background: #fff5f5; border: 1px solid #fecaca; border-radius: 4px; padding: 4px 6px; }
.te-options { border: 1px dashed #cbd5e1; border-radius: 4px; padding: 6px; margin-top: 2px; }
.te-options-head { font-size: 11px; color: #64748b; margin-bottom: 4px; font-weight: 600; }
.te-options-list { display: flex; flex-direction: column; gap: 3px; }
.te-option-row { display: flex; gap: 4px; }
.te-option-row input { flex: 1; padding: 2px 5px; border: 1px solid #cbd5e1; border-radius: 3px; font-size: 12px; }
.te-option-row button { padding: 1px 6px; font-size: 11px; }
.te-options-add { margin-top: 4px; font-size: 11px; }
.te-var-pick { border: 1px solid #c7d2fe; background: #f5f7ff; }
.te-var-pick label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #475569; margin-bottom: 6px; }
.te-var-pick label.inline { flex-direction: row; align-items: center; gap: 6px; }
.te-var-pick input[type="text"] { padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 13px; }
.te-var-pick select { padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12px; background: #fff; }
.te-var-pick .te-field-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.te-var-pick .te-field-row .te-field-default { flex: 1; }
/* 同名字段复用警告 */
.te-var-reuse-warn {
    font-size: 11px; color: #b45309; background: #fef3c7;
    border: 1px solid #fde68a; border-radius: 4px; padding: 4px 6px;
    margin-bottom: 6px;
}
/* 设变量配置区 */
.te-var-config-wrap { margin-bottom: 6px; }
.te-var-hint { font-size: 11px; color: #64748b; background: #f1f5f9; border-radius: 4px; padding: 5px 7px; }
.te-var-options { display: flex; flex-direction: column; gap: 4px; border: 1px dashed #cbd5e1; border-radius: 4px; padding: 6px; }
.te-var-opt-row { display: flex; gap: 4px; align-items: center; }
.te-var-opt-row .te-var-opt-label { flex: 1; padding: 2px 5px; border: 1px solid #cbd5e1; border-radius: 3px; font-size: 12px; }
.te-var-opt-row button { padding: 1px 6px; font-size: 11px; }
.te-var-opt-thumb {
    width: 28px; height: 28px; border: 1px solid #cbd5e1; border-radius: 3px;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    font-size: 10px; color: #94a3b8; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
}
.te-var-opt-add, .te-var-opt-import { margin-top: 2px; font-size: 11px; }
.te-var-opt-import { margin-left: 4px; }
.te-foot {
    padding: 10px 16px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #64748b;
}
.te-draft-state { color: #334155; }
.te-save-version { display: flex; align-items: center; gap: 8px; }
.te-save-note {
    width: 200px;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}
.te-save-note:focus { outline: none; border-color: var(--primary); }
.te-confirm { display: flex; align-items: center; justify-content: center; height: 100%; }
.te-confirm-modal {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 18px 22px;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
}
.te-confirm-modal h4 { margin: 0 0 8px; font-size: 15px; color: #172033; }
.te-confirm-modal p { margin: 0 0 14px; font-size: 13px; color: #475569; }
.te-confirm-actions { display: flex; gap: 8px; justify-content: center; }
@media (max-width: 720px) {
    .te-body { grid-template-columns: 1fr; }
}

/* ===== 模板版本历史只读视图（Stage H.2-A） ===== */
.vh-overlay {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
}
.vh-overlay[hidden] { display: none; }
.vh-modal {
    width: min(96vw, 760px);
    height: min(88vh, 680px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
    overflow: hidden;
}
.vh-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
}
.vh-title-group { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.vh-title-group h3 { margin: 0; font-size: 16px; color: #172033; }
.vh-sub { font-size: 12px; color: #64748b; }
.vh-status { font-size: 13px; color: #475569; min-width: 90px; text-align: right; }
.vh-body { padding: 12px 16px; overflow: auto; flex: 1; }
.vh-list { display: flex; flex-direction: column; gap: 8px; }
.vh-empty { color: var(--text-muted); font-size: 13px; padding: 20px; text-align: center; }
/* Stage F 字段库管理：行布局 + 引用计数按钮 + 输入方式下拉 + 引用详情列表 */
.vh-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.vh-item-main { flex: 1; min-width: 0; }
.vh-item-title { font-weight: 600; font-size: 14px; color: #172033; }
.vh-item-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.fl-ref-count { padding: 0 6px; font-weight: 600; color: var(--primary-hover, #2563eb); }
.fl-mode-select { flex: 0 0 auto; max-width: 130px; }
.fl-ref-list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: #172033; }
.fl-ref-list li { padding: 2px 0; }
/* 问题 2：字段库引用详情折叠面板（不撑破 modal / 内部独立滚动） */
.fl-refs-box { flex: 1 1 100%; width: 100%; margin-top: 8px; border-top: 1px dashed #e2e8f0; padding-top: 8px; }
.fl-refs-box[hidden] { display: none; }
.fl-refs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.fl-refs-summary { font-size: 13px; font-weight: 600; color: #172033; }
.fl-refs-scroll { max-height: 180px; overflow-y: auto; border: 1px solid #eef2f7; border-radius: 6px; padding: 6px 10px; background: #f8fafc; }
.fl-refs-scroll .fl-ref-list { margin: 0; }
.fl-refs-collapse { flex: 0 0 auto; }
.vh-row {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
}
.vh-row:hover { border-color: #cbd5e1; }
/* Step 5 稳定性：版本行分上下两区，操作按钮 flex-wrap 防止撑破卡片 */
.vh-row-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vh-row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
}
.vh-op-btns {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}
.vh-op-btns button { flex: 0 0 auto; }
.vh-vno {
    font-weight: 600;
    font-size: 14px;
    color: var(--primary-hover);
    min-width: 34px;
}
.vh-meta { flex: 1; min-width: 0; }
.vh-note {
    font-size: 13px;
    color: #172033;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vh-sub-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 2px;
    font-size: 11px;
    color: #94a3b8;
}
.vh-badges { display: flex; gap: 4px; }
.vh-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    color: #64748b;
    background: #f8fafc;
}
.vh-badge.vh-active { color: #15803d; border-color: #86efac; background: #f0fdf4; }
.vh-badge.vh-original { color: #b45309; border-color: #fcd34d; background: #fffbeb; }
.vh-badge.vh-deleted { color: #b91c1c; border-color: #fca5a5; background: #fef2f2; }
.vh-detail-btn { flex: 0 0 auto; }
.vh-reveal-btn { flex: 0 0 auto; }
.vh-delete-btn { flex: 0 0 auto; color: #b91c1c; border-color: #fca5a5; }
.vh-delete-btn:hover { background: #fef2f2; }
.vh-restore-btn { flex: 0 0 auto; color: #15803d; border-color: #86efac; }
.vh-restore-btn:hover { background: #f0fdf4; }
.vh-activate-btn { flex: 0 0 auto; color: var(--primary); border-color: color-mix(in srgb, var(--primary) 50%, #ffffff); }
.vh-activate-btn:hover { background: var(--primary-soft); }
.vh-activate-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vh-editfrom-btn { flex: 0 0 auto; color: #7c3aed; border-color: #c4b5fd; }
.vh-editfrom-btn:hover { background: #f5f3ff; }
.vh-editfrom-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vh-detail {
    margin-top: 8px;
    padding: 8px 10px;
    border-top: 1px dashed #e2e8f0;
    font-size: 12px;
    color: #475569;
}
.vh-detail-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    color: #64748b;
}
.vh-field-keys {
    line-height: 1.6;
    word-break: break-all;
}
.vh-foot {
    padding: 10px 16px;
    border-top: 1px solid #e2e8f0;
    font-size: 12px;
    color: #64748b;
}

/* === UI-4-B1 START ===
   单份生成页视觉/布局统一。仅 .gen-page 作用域，不影响设置/模板/历史/批量等页面。
   约束：新增颜色声明仅使用 var(--primary)/var(--primary-soft)/var(--card-bg)/
   var(--page-bg)/var(--text)/var(--border)；非颜色间距/尺寸/圆角不受限。
   保留全部既有 id/name/class/data-field-label/事件绑定，不移动功能元素。
   === UI-4-B1 END === */

/* 页面标题区：底部分隔线，强化标题层级与区域边界 */
.gen-page .page-heading {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

/* 材料上传卡片化：与智能识别正文区分，形成独立“上传材料”卡片 */
.gen-page .smart-material-upload {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--primary-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* AI 候选区与上方解析结果区分隔 */
.gen-page .ai-candidates {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

/* 生成选择 / 公章定位保存：统一卡片内边距与 legend 标题层级 */
.gen-page .material-selector,
.gen-page .section-save {
    padding-top: 18px;
    padding-bottom: 18px;
}

.gen-page .material-selector > legend,
.gen-page .section-save > legend {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    padding: 0 8px;
}

/* 软著 / 备案卡片：统一内边距、圆角与 legend 标题层级（保留各自配色以区分） */
.gen-page .section-rz,
.gen-page .section-ba {
    padding: 20px 22px 22px;
    border-radius: var(--radius-lg);
}

.gen-page .section-rz > legend,
.gen-page .section-ba > legend {
    line-height: 1.5;
    padding: 0 8px;
}

/* 统一软著/备案字段容器间距节奏 */
.gen-page .rz-fields-container,
.gen-page .ba-fields-container {
    gap: 16px 18px;
}

/* 统一软著/备案字段 label 层级 + 必填星号同行（flex-row+wrap：
   字段名文本与 <em>*</em> 作为同行 flex 项，控件 flex-basis:100% 换到下一行，
   所有 required 字段统一生效，不针对单个字段写特殊 CSS） */
.gen-page .section-rz label,
.gen-page .section-ba label {
    font-size: 13px;
    font-weight: 500;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;            /* 行间 4px / 列间 8px：星号紧跟字段名 */
}
/* 控件占满整行 → 换到字段名下一行（与原 column 视觉一致，但星号不再独占一行） */
.gen-page .section-rz label > input,
.gen-page .section-ba label > input,
.gen-page .section-rz label > select,
.gen-page .section-ba label > select,
.gen-page .section-rz label > textarea,
.gen-page .section-ba label > textarea,
.gen-page .section-rz label > .combo,
.gen-page .section-ba label > .combo {
    flex: 1 1 100%;
    min-width: 0;
}

/* 统一软著/备案输入框与下拉框高度 */
.gen-page .section-rz input[type="text"],
.gen-page .section-ba input[type="text"],
.gen-page .section-rz select,
.gen-page .section-ba select {
    min-height: 42px;
}

/* === UI-4-B1 END === */

/* === UI-4-B4 START ===
   设置页企业管理后台视觉重构。
   作用域：#tab-settings 与 .set-* 类名，不影响生成/模板/历史/批量等页面。
   约束：新增颜色声明仅使用 var(--primary)/var(--primary-soft)/var(--card-bg)/
   var(--page-bg)/var(--text)/var(--border)；非颜色间距/尺寸/圆角不受限。
   保留全部既有 id/name/class/事件绑定/端点载荷与 localStorage 键，不移动功能元素。
   ============================================================ */

/* 设置区域导航：横向胶囊按钮条 */
#tab-settings .set-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 9px 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

#tab-settings .set-nav-item {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 14px;
    color: var(--text);
    background: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition:
        color 0.16s ease,
        background 0.16s ease,
        border-color 0.16s ease;
}

#tab-settings .set-nav-item:hover {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: var(--primary);
}

#tab-settings .set-nav-item:focus-visible {
    outline: none;
    color: var(--primary);
    border-color: var(--primary);
}

/* 分组卡片：标题头 + 内部字段集统一节奏 */
#tab-settings .set-group {
    margin: 0 0 22px;
    padding: 18px 20px 6px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px var(--border);
    scroll-margin-top: 24px;
}

#tab-settings .set-group-head {
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

#tab-settings .set-group-head h3 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}

#tab-settings .set-group-head p {
    margin: 5px 0 0;
    color: var(--text);
    opacity: 0.7;
    font-size: 12px;
}

/* 分组内字段卡间距统一（保留各 fieldset 原有 id/class/legend） */
#tab-settings .set-group > fieldset {
    margin: 0 0 14px;
    padding: 16px 18px;
}

#tab-settings .set-group > fieldset:last-child {
    margin-bottom: 8px;
}

/* 统一 label / legend / 输入框 / 下拉框 / 复选框 / 按钮视觉（设置页作用域） */
#tab-settings legend {
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
}

#tab-settings label {
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
}

#tab-settings input[type="text"],
#tab-settings select,
#tab-settings .set-input {
    min-height: 38px;
    color: var(--text);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

#tab-settings input[type="text"]:focus,
#tab-settings select:focus,
#tab-settings .set-input:focus {
    border-color: var(--primary);
}

#tab-settings input[type="checkbox"],
#tab-settings input[type="radio"] {
    accent-color: var(--primary);
}

#tab-settings .ghost {
    color: var(--text);
    background: var(--card-bg);
    border: 1px solid var(--border);
}

#tab-settings .ghost:hover {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: var(--primary);
}

/* 列表行 / 别名芯片统一配色（覆盖既有硬编码，统一走主题变量） */
#tab-settings .set-row {
    background: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

#tab-settings .set-empty {
    color: var(--text);
    opacity: 0.6;
}

#tab-settings .set-alias-label {
    color: var(--text);
    opacity: 0.75;
}

#tab-settings .set-alias-field {
    border-bottom: 1px solid var(--border);
}

#tab-settings .set-chip {
    color: var(--primary);
    background: var(--primary-soft);
    border: 1px solid var(--primary);
}

/* AI 识别分组：仅强调标题层级与分组间距，不改数据逻辑 */
#tab-settings .set-group--ai .set-group-head h3 {
    color: var(--primary);
}

/* 窄屏：导航条与分组卡片内边距收敛 */
@media (max-width: 760px) {
    #tab-settings .set-nav {
        gap: 6px;
        padding: 8px;
    }

    #tab-settings .set-nav-item {
        min-height: 30px;
        padding: 4px 11px;
        font-size: 12px;
    }

    #tab-settings .set-group {
        padding: 15px 15px 4px;
    }

    #tab-settings .set-group > fieldset {
        padding: 14px 14px;
    }
}

/* === UI-4-B4 END === */

/* =========================================================
   UI-4-C4：弹窗统一与响应式收尾（override 块）
   - 仅追加覆盖，不删除/重写旧规则，不改 B1-B4 标记块、不改 HTML/JS。
   - 六类 overlay/modal 家族统一：overlay 遮罩、card 背景/边框/圆角/阴影、
     标题/正文/底部动作区。保留全部既有类与 [hidden] 行为。
   - 颜色仅用主题变量或现有中性 shadow/overlay；不引入蓝/绿硬编码，不替换状态色。
   - 1024（max-width:1100px）：te-body / seal-editor-body 单列，头部/底部换行，
     modal body 内部滚动，页面本身不横向溢出。
   - 1920/1440：保持现有宽度上限；弹窗用 min(...vw) + max-height/overflow；
     历史表格继续在容器内横向滚动。既有 1180/980/760 断点字符串与业务布局不变。
   ========================================================= */

/* ---- 统一 overlay 遮罩（沿用中性 slate 遮罩，不引入主题色） ---- */
.fd-dialog-overlay,
.modal-overlay,
.te-overlay,
.vh-overlay,
.vd-overlay,
.seal-editor-overlay,
.se-confirm-overlay {
    background: rgba(15, 23, 42, 0.55);
}

/* 保留 [hidden] 隐藏行为：覆盖声明不破坏任一家族的 hidden 语义 */
.fd-dialog-overlay[hidden],
.modal-overlay[hidden],
.te-overlay[hidden],
.vh-overlay[hidden],
.vd-overlay[hidden],
.seal-editor-overlay[hidden],
.se-confirm-overlay[hidden] {
    display: none;
}

/* ---- 统一 modal card：背景/边框/圆角/阴影/前景色（主题变量） ---- */
.fd-dialog,
.modal,
.te-modal,
.vh-modal,
.vd-modal,
.seal-editor-modal,
.se-confirm-modal,
.te-confirm-modal {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}

/* 小型确认弹窗补齐高度自适应：内部滚动，视口不溢出（宽度上限保持既有） */
.se-confirm-modal,
.te-confirm-modal {
    max-height: 88vh;
    overflow: auto;
}

/* ---- 统一标题区：前景色与字重走主题变量 ---- */
.fd-dialog-title,
.modal-head h3,
.te-title-group h3,
.vh-title-group h3,
.vd-title-group h3,
.seal-editor-head h3,
.se-confirm-title,
.te-confirm-modal h4 {
    color: var(--text);
    font-weight: 600;
}

/* 头部容器：允许换行，避免窄屏挤压标题与关闭/状态控件 */
.modal-head,
.te-head,
.vh-head,
.vd-head,
.seal-editor-head {
    flex-wrap: wrap;
    gap: 8px 12px;
}

/* ---- 统一正文区：内部滚动，弹窗自身不撑破视口 ---- */
.modal-body,
.vh-body,
.vd-body,
.te-body,
.seal-editor-body {
    overflow: auto;
}

/* ---- 底部动作区：窄空间可换行，按钮不挤压（action-row 仅强化换行） ---- */
.fd-dialog-actions,
.modal-actions,
.te-confirm-actions,
.se-confirm-actions,
.seal-editor-foot,
.action-row {
    flex-wrap: wrap;
}

/* 对齐统一为末端（action-row 维持其既有主轴布局，不强制末端） */
.fd-dialog-actions,
.modal-actions,
.te-confirm-actions,
.se-confirm-actions,
.seal-editor-foot {
    justify-content: flex-end;
}

/* ---- 历史表格：继续在容器内横向滚动（窄屏不撑破页面） ---- */
.history-list-wrap {
    overflow-x: auto;
}

/* ---- 1024 覆盖：max-width:1100px 单列 + 头/底换行 + 页面不横向溢出 ---- */
@media (max-width: 1100px) {
    body {
        overflow-x: hidden;
    }
    .te-body,
    .seal-editor-body {
        grid-template-columns: 1fr;
    }
    .modal-head,
    .te-head,
    .vh-head,
    .vd-head,
    .seal-editor-head {
        flex-wrap: wrap;
    }
    .fd-dialog-actions,
    .modal-actions,
    .te-confirm-actions,
    .se-confirm-actions,
    .seal-editor-foot,
    .action-row {
        flex-wrap: wrap;
    }
}

/* === UI-4-C4 END === */

/* === Step 5 START：版本对比选择 + Diff 浮层（只读）=== */
.vh-compare-pick {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 4px;
}
.vh-pick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #475569;
    cursor: pointer;
    user-select: none;
    padding: 3px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
}
.vh-pick:hover { border-color: #cbd5e1; }
.vh-pick input { margin: 0; cursor: pointer; }
#vh-compare-btn { margin-left: auto; }

/* Diff 浮层：宽度 900-1100px，高度适配 viewport，内容区滚动 */
.vd-overlay {
    position: fixed;
    inset: 0;
    z-index: 330;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
}
.vd-overlay[hidden] { display: none; }
.vd-modal {
    width: min(96vw, 1080px);
    height: min(90vh, 820px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
    overflow: hidden;
}
.vd-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
}
.vd-title-group { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.vd-title-group h3 { margin: 0; font-size: 16px; color: #172033; }
.vd-sub { font-size: 12px; color: #64748b; }
.vd-status { font-size: 13px; color: #475569; min-width: 90px; text-align: right; }
.vd-body { padding: 12px 16px; overflow: auto; flex: 1; }
.vd-foot {
    padding: 10px 16px;
    border-top: 1px solid #e2e8f0;
    font-size: 12px;
    color: #64748b;
}
.vd-section { margin-bottom: 16px; }
.vd-section h4 {
    margin: 0 0 8px;
    font-size: 14px;
    color: #172033;
    padding-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
}
.vd-summary-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.vd-summary-table th {
    text-align: left;
    width: 80px;
    padding: 6px 10px;
    color: #64748b;
    font-weight: 500;
    vertical-align: top;
}
.vd-summary-table td { padding: 6px 10px; color: #172033; }
.vd-meta-sub { color: #94a3b8; font-size: 11px; }
.vd-add { color: #15803d; }
.vd-del { color: #b91c1c; }
.vd-mod { color: #b45309; }
.vd-reorder { color: #0369a1; }
.vd-relabel { color: #7c3aed; }
/* === Step 5 END === */

/* === Step 5-3：字段 diff 可视化 === */
.vd-field-group {
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fafbfc;
}
.vd-group-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #475569;
}
.vd-field-added { border-left: 3px solid #16a34a; }
.vd-field-deleted { border-left: 3px solid #dc2626; }
.vd-field-modified { border-left: 3px solid #d97706; }
.vd-field-item {
    padding: 8px 10px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
}
.vd-field-item:last-child { margin-bottom: 0; }
.vd-field-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}
.vd-field-item.vd-add .vd-field-name { color: #15803d; }
.vd-field-item.vd-del .vd-field-name { color: #b91c1c; }
.vd-field-item.vd-mod .vd-field-name { color: #b45309; }
.vd-info-table, .vd-change-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
}
.vd-info-table th, .vd-change-table th {
    text-align: left;
    padding: 4px 8px;
    color: #64748b;
    font-weight: 500;
    border-bottom: 1px solid #f1f5f9;
}
.vd-info-table th { width: 88px; }
.vd-info-table td, .vd-change-table td {
    padding: 4px 8px;
    color: #172033;
    border-bottom: 1px solid #f1f5f9;
    word-break: break-all;
}
.vd-change-table thead th {
    border-bottom: 2px solid #e2e8f0;
    color: #475569;
}
.vd-change-table .vd-old-cell { color: #b91c1c; text-decoration: line-through; }
.vd-change-table .vd-new-cell { color: #15803d; }

/* === Step 5-4：文本 diff 双栏可视化 === */
.vd-text-change {
    margin-bottom: 14px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fafbfc;
}
.vd-text-location {
    font-size: 12px;
    color: #475569;
    margin-bottom: 6px;
    font-weight: 500;
}
.vd-var-hint {
    color: #7c3aed;
    font-weight: 400;
    font-size: 11px;
    margin-left: 6px;
}
.vd-old-loc {
    color: #94a3b8;
    font-weight: 400;
    font-size: 11px;
    margin-left: 6px;
}
.vd-text-panels {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.vd-old-panel, .vd-new-panel {
    flex: 1 1 0;
    min-width: 0;          /* 防长文本横向撑破弹窗 */
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    overflow: hidden;
}
.vd-old-panel { border-left: 3px solid #dc2626; }
.vd-new-panel { border-left: 3px solid #16a34a; }
.vd-panel-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    padding: 4px 8px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}
.vd-panel-body {
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.6;
    word-break: break-all;
    white-space: pre-wrap;   /* 保留换行，长文本自动折行 */
}
.diff-equal { color: #334155; }
.diff-delete {
    color: #b91c1c;
    text-decoration: line-through;
    background: #fef2f2;
}
.diff-insert {
    color: #15803d;
    background: #dcfce7;
    border-radius: 2px;
}
.vd-empty-text { color: #94a3b8; font-style: italic; }

/* === Step 5-5：结构 diff 可视化 === */
.vd-structure-item {
    margin-bottom: 8px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    border-left-width: 3px;
}
.vd-structure-item:last-child { margin-bottom: 0; }
.vd-structure-added { border-left-color: #16a34a; }
.vd-structure-deleted { border-left-color: #dc2626; }
.vd-structure-modified { border-left-color: #d97706; }
.vd-structure-reordered { border-left-color: #0284c7; }
.vd-structure-unknown { border-left-color: #94a3b8; }
.vd-structure-head {
    font-size: 13px;
    font-weight: 600;
    color: #172033;
    margin-bottom: 4px;
}
.vd-structure-added .vd-structure-head { color: #15803d; }
.vd-structure-deleted .vd-structure-head { color: #b91c1c; }
.vd-structure-modified .vd-structure-head { color: #b45309; }
.vd-structure-reordered .vd-structure-head { color: #0369a1; }
.vd-structure-unknown .vd-structure-head { color: #64748b; }
.vd-structure-loc {
    font-weight: 400;
    font-size: 12px;
    color: #475569;
    margin-left: 6px;
}
.vd-structure-run {
    font-weight: 400;
    font-size: 11px;
    color: #94a3b8;
    margin-left: 6px;
}
.vd-structure-detail {
    font-size: 12px;
    color: #475569;
    line-height: 1.6;
    word-break: break-all;
}

/* === Step 5-8：Diff 浮层 CSS 收尾（只读，不改功能）===
   目标：与 version history overlay 视觉统一 + 双栏窄屏不撑破 + 四区视觉一致。
   约束：仅补充声明，不改动既有选择器结构与功能绑定；不引入与内部卡片
   嵌套的边框，避免「卡片套卡片」的厚重感。 */

/* 整体空态（三层 diff 全空时 renderSummary 输出）——复用 .empty-state 基线，略加重边框 */
.vd-all-empty {
    margin: 8px 0 4px;
    padding: 28px 20px;
    font-size: 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--primary-soft);
}

/* 正文区横向兜底：长文本/宽表格不会撑破弹窗外框（纵向已 overflow:auto）*/
.vd-body { overflow-x: hidden; }

/* 四个 Diff 区域视觉统一：统一区间间距节奏（不套边框，保留 h4 下划线分隔）*/
.vd-section.vd-summary,
.vd-section.vd-field,
.vd-section.vd-text,
.vd-section.vd-structure {
    margin-bottom: 16px;
}
.vd-section:last-child { margin-bottom: 0; }

/* 双栏窄屏堆叠：<=760px 旧/新面板纵向排列，避免单栏过窄被长文本挤压 */
@media (max-width: 760px) {
    .vd-text-panels {
        flex-direction: column;
    }
    .vd-old-panel,
    .vd-new-panel {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* 极窄屏：弹窗占满视口，给双栏（已堆叠）留出最大可用宽度 */
@media (max-width: 480px) {
    .vd-modal {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}
/* === Step 5-8 END === */

/* =========================================================
   Pickly Magic 组件覆盖（奶油粉像素风）
   仅在 html[data-theme="magic-pink"] 下生效，绝不触碰其它主题。
   只覆盖视觉层：硬阴影、像素圆角、复古字体，不改 DOM/语义/事件。
   ========================================================= */
html[data-theme="magic-pink"] body {
    font-family:
        "Microsoft YaHei",
        "PingFang SC",
        "Segoe UI",
        Arial,
        sans-serif;
}

/* 标题：中文像素字体 ZCOOL KuaiLe，棕色 */
html[data-theme="magic-pink"] legend,
html[data-theme="magic-pink"] .card-title,
html[data-theme="magic-pink"] .page-title-group h2,
html[data-theme="magic-pink"] .modal-head h3,
html[data-theme="magic-pink"] h1,
html[data-theme="magic-pink"] h2,
html[data-theme="magic-pink"] h3 {
    color: #5C3A3A;
    font-family: "ZCOOL KuaiLe", "Microsoft YaHei", sans-serif;
}

/* 主要大标题加像素硬阴影 */
html[data-theme="magic-pink"] legend,
html[data-theme="magic-pink"] .page-title-group h2 {
    text-shadow: 3px 3px 0 #CAA9AD;
}

/* 英文/小标签像素字体（中文自动回退，保证可读） */
html[data-theme="magic-pink"] .page-badge,
html[data-theme="magic-pink"] .sidebar-nav-title {
    font-family:
        "Press Start 2P",
        "ZCOOL KuaiLe",
        "Microsoft YaHei",
        sans-serif;
}

/* 卡片 / 面板：2px 棕边 + 像素硬阴影 */
html[data-theme="magic-pink"] fieldset,
html[data-theme="magic-pink"] .card {
    border: 2px solid #5C3A3A;
    border-radius: 10px;
    box-shadow: 5px 5px 0 #C8DDD6;
}

html[data-theme="magic-pink"] fieldset:hover,
html[data-theme="magic-pink"] .card:hover {
    border-color: #5C3A3A;
}

/* 主按钮：深棕底白字，按下回弹的像素阴影 */
html[data-theme="magic-pink"] .primary {
    position: relative;
    color: #ffffff;
    background: #5C3A3A;
    border: 2px solid #5C3A3A;
    border-radius: 8px;
    box-shadow: 0 4px 0 #3D2A2A;
    transition:
        background 0.1s ease,
        transform 0.1s ease,
        box-shadow 0.1s ease;
}

html[data-theme="magic-pink"] .primary:hover {
    background: #6B4545;
    border-color: #6B4545;
    transform: translateY(0);
    box-shadow: 0 4px 0 #3D2A2A;
}

html[data-theme="magic-pink"] .primary:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* 次级 / ghost 按钮：白底棕边，点击位移 */
html[data-theme="magic-pink"] .secondary,
html[data-theme="magic-pink"] .ghost {
    position: relative;
    color: #5C3A3A;
    background: #FFFFFF;
    border: 2px solid #5C3A3A;
    border-radius: 8px;
    box-shadow: 3px 3px 0 #CAA9AD;
    transition:
        background 0.1s ease,
        transform 0.1s ease,
        box-shadow 0.1s ease,
        color 0.1s ease;
}

html[data-theme="magic-pink"] .secondary:hover,
html[data-theme="magic-pink"] .ghost:hover {
    color: #C9738A;
    background: #F2EAE5;
    border-color: #C9738A;
}

html[data-theme="magic-pink"] .secondary:active,
html[data-theme="magic-pink"] .ghost:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #CAA9AD;
}

/* 危险按钮保留语义色但沿用像素硬阴影 */
html[data-theme="magic-pink"] .danger {
    border-radius: 8px;
    box-shadow: 0 4px 0 #8b1a1a;
}

html[data-theme="magic-pink"] .danger:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* 输入框 / select / textarea：2px 弱化边，focus 切主色 */
html[data-theme="magic-pink"] input[type="text"],
html[data-theme="magic-pink"] input[type="file"],
html[data-theme="magic-pink"] select,
html[data-theme="magic-pink"] textarea,
html[data-theme="magic-pink"] .set-input {
    background: #FFFFFF;
    border: 2px solid #CAA9AD;
    border-radius: 8px;
}

html[data-theme="magic-pink"] input[type="text"]::placeholder,
html[data-theme="magic-pink"] textarea::placeholder {
    color: #CAA9AD;
}

html[data-theme="magic-pink"] input[type="text"]:focus,
html[data-theme="magic-pink"] input[type="file"]:focus,
html[data-theme="magic-pink"] select:focus,
html[data-theme="magic-pink"] textarea:focus,
html[data-theme="magic-pink"] .set-input:focus {
    background: #FFFFFF;
    border-color: #C9738A;
    box-shadow: 0 0 0 3px rgba(201, 115, 138, 0.18);
}

/* badge / chip：奶油底 + 棕边 + 像素阴影 + 字距 */
html[data-theme="magic-pink"] .page-badge {
    color: #5C3A3A;
    background: #F2EAE5;
    border: 2px solid #5C3A3A;
    border-radius: 8px;
    letter-spacing: 2px;
    box-shadow: 3px 3px 0 #CAA9AD;
}

html[data-theme="magic-pink"] .set-chip {
    background: #F2EAE5;
    border: 2px solid #5C3A3A;
    border-radius: 8px;
    box-shadow: 3px 3px 0 #CAA9AD;
}

/* 侧边栏：复古窗口感 */
html[data-theme="magic-pink"] .sidebar {
    background: #F2EAE5;
    border-right: 2px solid #5C3A3A;
}

html[data-theme="magic-pink"] .brand {
    border-bottom: 2px solid #5C3A3A;
}

html[data-theme="magic-pink"] .sidebar-footer {
    border-top: 2px solid #5C3A3A;
    color: #CAA9AD;
}

html[data-theme="magic-pink"] .sidebar-nav-title {
    color: #8B5E6B;
}

html[data-theme="magic-pink"] .tab {
    border: 2px solid transparent;
    border-radius: 8px;
}

html[data-theme="magic-pink"] .tab:hover {
    background: #FDF6F0;
    border-color: #CAA9AD;
}

html[data-theme="magic-pink"] .tab.active {
    color: #FFFFFF;
    background: #C9738A;
    border-color: #5C3A3A;
    box-shadow: 3px 3px 0 #C8DDD6;
}

html[data-theme="magic-pink"] .tab.active::before {
    background: #5C3A3A;
}

/* 弹窗：像素硬阴影 + 棕边 */
html[data-theme="magic-pink"] .modal {
    background: #FFFFFF;
    border: 2px solid #5C3A3A;
    border-radius: 10px;
    box-shadow: 7px 7px 0 #C8DDD6;
}

html[data-theme="magic-pink"] .modal-head {
    background: #F2EAE5;
    border-bottom: 2px solid #5C3A3A;
}

/* 下拉面板：像素硬阴影 */
html[data-theme="magic-pink"] .combo-popup {
    background: #FFFFFF;
    border: 2px solid #5C3A3A;
    border-radius: 8px;
    box-shadow: 4px 4px 0 #CAA9AD;
}

html[data-theme="magic-pink"] .combo-item:hover,
html[data-theme="magic-pink"] .combo-item.active {
    background: #F2EAE5;
}

/* 历史表格：棕边 + 奶油表头 */
html[data-theme="magic-pink"] .history-table {
    border: 2px solid #5C3A3A;
}

html[data-theme="magic-pink"] .history-table thead th {
    background: #F2EAE5;
    color: #5C3A3A;
    border-bottom: 2px solid #5C3A3A;
}

/* 公章单元格：奶油底 + 棕边 */
html[data-theme="magic-pink"] .seal-cell {
    background: #F2EAE5;
    border: 2px solid #CAA9AD;
    border-radius: 8px;
}

/* 空状态提示 */
html[data-theme="magic-pink"] .empty-state {
    color: #CAA9AD;
}

/* —— 像素装饰动画 —— */
@keyframes twinkle {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/* 标题区与品牌图标少量闪烁装饰，不阻断交互 */
html[data-theme="magic-pink"] .brand-logo {
    animation: twinkle 3.2s ease-in-out infinite;
}

html[data-theme="magic-pink"] .page-badge {
    animation: twinkle 4s ease-in-out infinite;
}

/* 点击粒子（纯视觉，pointer-events:none，动画结束自删） */
html[data-theme="magic-pink"] .primary,
html[data-theme="magic-pink"] .ghost,
html[data-theme="magic-pink"] .secondary {
    overflow: visible;
}

.mk-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    background: #C9738A;
    border: 1px solid #5C3A3A;
    pointer-events: none;
    animation: mk-burst 0.5s ease-out forwards;
    z-index: 1;
}

@keyframes mk-burst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--mk-dx, 0), var(--mk-dy, 0)) scale(0.2);
    }
}

/* 无障碍：减少动效时关闭装饰动画 */
@media (prefers-reduced-motion: reduce) {
    html[data-theme="magic-pink"] .brand-logo,
    html[data-theme="magic-pink"] .page-badge {
        animation: none;
    }

    html[data-theme="magic-pink"] .mk-particle {
        display: none;
    }
}

/* ============================================================
   UI 配置设置区 (Phase 1: Skin + Palette + Preset 卡片样式)
   仅样式, 不改业务 DOM/逻辑. 布局切换 CSS 在 Phase 2.
   ============================================================ */
.set-ui-section { margin: 8px 0 16px; padding: 10px 0; border-top: 1px dashed var(--border); }
.set-ui-section:first-child { border-top: 0; padding-top: 0; }
.set-ui-title { font-weight: 600; margin: 0 0 8px; font-size: 14px; color: var(--text); }
.set-ui-skins label,
.set-ui-palette-mode label,
.set-ui-layouts label,
.set-ui-custom-layout label {
    margin-right: 10px; cursor: pointer; font-size: 13px;
}
.set-ui-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }

/* 调色板自定义网格 */
#set-palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.palette-item { display: flex; flex-direction: column; gap: 4px; }
.palette-item > .palette-label { font-size: 12px; color: var(--text-secondary); }
.palette-item > .palette-row { display: flex; gap: 6px; align-items: center; }
.palette-color { width: 34px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; background: none; }
.palette-hex { width: 88px; padding: 3px 6px; font-size: 12px; border: 1px solid var(--border); border-radius: 4px; font-family: ui-monospace, monospace; }
.palette-hex.invalid { border-color: var(--danger); }

/* 我的方案 卡片 */
#set-preset-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.preset-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--card-bg); display: flex; flex-direction: column; gap: 6px; }
.preset-card.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.preset-card .preset-name { font-weight: 600; font-size: 13px; word-break: break-all; }
.preset-card .preset-meta { font-size: 11px; color: var(--text-secondary); }
.preset-swatches { display: flex; gap: 4px; flex-wrap: wrap; }
.preset-swatches .preset-swatch { width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--border); display: inline-block; }
.preset-card .preset-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.preset-card .preset-actions button { font-size: 12px; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--card-bg); cursor: pointer; }
.preset-card .preset-actions .preset-del { color: var(--danger); }
.preset-empty { font-size: 12px; color: var(--text-secondary); }

/* magic-pink 皮肤保持像素边框/硬阴影, 即使配色被改也保留 */
html[data-theme="magic-pink"] .preset-card,
html[data-theme="magic-pink"] .palette-color,
html[data-theme="magic-pink"] .palette-hex {
    box-shadow: 3px 3px 0 var(--c-mk-accent, #C8DDD6);
}

/* ============================================================
   Phase 2: 页面布局 (classic / card / compact)
   ----------------------------------------------------------
   核心原则：换布局不换业务 DOM。所有区域仍留在原 <form> 内，
   id / name / data-* 契约不变。布局切换仅靠 CSS Grid + order +
   grid-column + display:contents（扁平化 .form-column / #form-single
   的盒子，但其 DOM 后代关系与表单提交不受影响）。
   classic = 默认（.single-layout 现有 2 列网格，不改）。
   ============================================================ */

/* ---- classic：默认，无覆盖。data-layout="classic" 维持现状 ---- */

/* ---- card：主内容 + 摘要侧栏，明确 placement，不扁平化、不依赖 auto-flow ----
   根因：旧实现 display:contents 扁平化 7 区域 + summary grid-row:1/-1（无显式行
   时 -1=行1）→ auto-flow 把 rz 排进 col2 与 summary 冲突、ba 上方留空。
   修正：form-column 作为主内容单个网格项（col1）；summary 钉 col2；rz/ba 包进
   .material-form-grid 在主内容内部 2 列排版，互不抢占外层网格。 ---- */
@media (min-width: 981px) {
    .gen-page[data-layout="card"] .single-layout {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
        gap: 18px;
        align-items: start;
    }
    /* 主内容：不扁平化，作为 col1 单个网格项，内部 block 流堆叠各区域 */
    .gen-page[data-layout="card"] .form-column {
        grid-column: 1;
        min-width: 0;
    }
    /* 摘要：钉 col2；两列各一个网格项 → 单行，行高=主内容高度，sticky 有空间不覆盖 */
    .gen-page[data-layout="card"] .summary-column {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 24px;
        min-width: 0;
    }
}
/* card 内 rz/ba 包装层：宽屏 2 列并排，各自独立高度不互造空洞 */
.gen-page[data-layout="card"] .material-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}
@media (max-width: 1099px) {
    /* 中屏：主内容+摘要仍两列，但 rz/ba 改单列上下 */
    .gen-page[data-layout="card"] .material-form-grid {
        grid-template-columns: 1fr;
    }
}
/* 中屏以下摘要不再 sticky（沿用既有 max-width:980 .summary-column static） */
@media (max-width: 980px) {
    .gen-page[data-layout="card"] .single-layout {
        display: block;
    }
    .gen-page[data-layout="card"] .summary-column {
        position: static;
    }
}
/* card 视觉：各区域卡片分隔（不增删 DOM/控件） */
.gen-page[data-layout="card"] .smart-section,
.gen-page[data-layout="card"] .material-selector,
.gen-page[data-layout="card"] .section-rz,
.gen-page[data-layout="card"] .section-ba,
.gen-page[data-layout="card"] .section-save,
.gen-page[data-layout="card"] .action-row,
.gen-page[data-layout="card"] .preview-wrap {
    margin-top: 0;
    border-radius: var(--radius-lg);
}

/* ---- compact：单列堆叠 + 收紧间距/内边距，摘要不再 sticky 放下方 ---- */
.gen-page[data-layout="compact"] .single-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
.gen-page[data-layout="compact"] .summary-column {
    position: static;
}
.gen-page[data-layout="compact"] fieldset,
.gen-page[data-layout="compact"] .preview-wrap {
    padding: 10px 12px;
    margin-top: 0;
}
.gen-page[data-layout="compact"] .preview-wrap {
    margin-top: 0;
}
.gen-page[data-layout="compact"] .action-row {
    gap: 6px;
}

/* ---- 通用：ui-compact 密度类（自定义布局 LayoutManager.applyLayoutConfig 切换） ---- */
.gen-page.ui-compact .single-layout { gap: 12px; }
.gen-page.ui-compact fieldset,
.gen-page.ui-compact .preview-wrap { padding: 10px 12px; }
.gen-page.ui-compact .action-row { gap: 6px; }

/* ---- 自定义布局：列数由 --ui-columns 驱动（Phase 4 扩展） ---- */
.gen-page[data-layout="custom"] .form-column,
.gen-page[data-layout="custom"] #form-single,
.gen-page[data-layout="custom"] .material-form-grid {
    display: contents;
}
.gen-page[data-layout="custom"] .single-layout {
    grid-template-columns: repeat(var(--ui-columns, 2), minmax(0, 1fr));
}

/* ---- custom 紧凑默认区域顺序（需求#4）----
   智能识别 → 生成选择 → 生成摘要 → 下载/预览 → 软著 → 备案 → 公章 → 预览结果
   生成摘要 / 下载预览 / 预览结果 跨满宽（grid-column:1/-1），消除底部大块空白，
   下载/预览 上移至填写区上方。inline order（applyLayoutConfig）可覆盖此默认。
   注意：summary-column / action-row 默认 position:sticky（classic 侧栏吸附），
   sticky 会干扰 grid order 的自动排布，custom 下改为 static 让 order 生效。 */
.gen-page[data-layout="custom"] .summary-column,
.gen-page[data-layout="custom"] .action-row {
    position: static;
}
.gen-page[data-layout="custom"] .smart-section { order: 1; }
.gen-page[data-layout="custom"] .material-selector { order: 2; grid-column: 1 / -1; }
.gen-page[data-layout="custom"] .summary-column { order: 3; grid-column: 1 / -1; }
.gen-page[data-layout="custom"] .action-row { order: 4; grid-column: 1 / -1; }
.gen-page[data-layout="custom"] .section-rz { order: 5; }
.gen-page[data-layout="custom"] .section-ba { order: 6; }
.gen-page[data-layout="custom"] .section-save { order: 7; grid-column: 1 / -1; }
.gen-page[data-layout="custom"] .preview-wrap { order: 8; grid-column: 1 / -1; }

/* ---- wizard：分步显隐现有区域（Phase 3 扩展；此处仅占位以保证 data-wizard-step 不报错） ---- */
.gen-page[data-layout="wizard"] .form-column,
.gen-page[data-layout="wizard"] #form-single {
    display: contents;
}

/* ============================================================
   Phase 3: Wizard 分步布局
   ----------------------------------------------------------
   仅显隐现有区域（display:none 隐藏时表单控件值仍提交，
   不销毁/不重建 DOM）。nav 仅 data-layout="wizard" 显示。
   ============================================================ */
.wizard-nav {
    margin: 0 0 14px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.wizard-nav[hidden] { display: none; }
.wizard-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}
.wizard-steps li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}
.wizard-steps li.current {
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}
.wizard-steps li.current .wizard-step-num {
    background: var(--primary);
    color: #fff;
}
.wizard-steps li.done {
    color: var(--success);
    border-color: var(--success);
}
.wizard-steps li.done .wizard-step-num {
    background: var(--success);
    color: #fff;
}
.wizard-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wizard-step-label {
    flex: 1;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* wizard：扁平化 + 单列；默认隐藏所有可分步区域 */
.gen-page[data-layout="wizard"] .single-layout {
    grid-template-columns: minmax(0, 1fr);
}
.gen-page[data-layout="wizard"] .form-column,
.gen-page[data-layout="wizard"] #form-single {
    display: contents;
}
.gen-page[data-layout="wizard"] .smart-section,
.gen-page[data-layout="wizard"] .material-selector,
.gen-page[data-layout="wizard"] .section-rz,
.gen-page[data-layout="wizard"] .section-ba,
.gen-page[data-layout="wizard"] .section-save,
.gen-page[data-layout="wizard"] .preview-wrap,
.gen-page[data-layout="wizard"] .action-row,
.gen-page[data-layout="wizard"] .summary-column {
    display: none;
}

/* 第 1 步：选择材料（智能识别 + 生成选择） */
.gen-page[data-layout="wizard"][data-wizard-step="1"] .smart-section,
.gen-page[data-layout="wizard"][data-wizard-step="1"] .material-selector {
    display: block;
}
/* 第 2 步：填写信息（软著 + 备案 + 公章） */
.gen-page[data-layout="wizard"][data-wizard-step="2"] .section-rz,
.gen-page[data-layout="wizard"][data-wizard-step="2"] .section-ba,
.gen-page[data-layout="wizard"][data-wizard-step="2"] .section-save {
    display: block;
}
/* 第 3 步：预览确认（预览 + 下载 + 清空均可直接操作，无需进入第 4 步） */
.gen-page[data-layout="wizard"][data-wizard-step="3"] .preview-wrap,
.gen-page[data-layout="wizard"][data-wizard-step="3"] .summary-column {
    display: block;
}
/* 第 3 步同时显示操作行：复用既有 预览/下载(submit)/清空 handler，不复制第二套生成逻辑 */
.gen-page[data-layout="wizard"][data-wizard-step="3"] .action-row {
    display: flex;
}
/* 第 4 步：生成下载（完成/下载语义保留，不阻止第 3 步直接预览/下载） */
.gen-page[data-layout="wizard"][data-wizard-step="4"] .action-row {
    display: flex;
}
.gen-page[data-layout="wizard"][data-wizard-step="4"] .summary-column {
    display: block;
}

/* ============================================================
   Phase 4: 自定义布局设计器 + Phase 6 取消/恢复按钮
   ============================================================ */
.set-ui-appearance-actions {
    margin-bottom: 8px;
}
.set-ui-appearance-actions button {
    font-size: 12px;
}
#set-custom-layout[hidden] { display: none; }
.custom-layout-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 12px;
}
.custom-layout-table th {
    text-align: left;
    padding: 4px 6px;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}
.custom-layout-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
}
.custom-layout-table input[type="number"] {
    width: 60px;
    padding: 2px 4px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
}

/* =========================================================
   UI-5：弹窗视口高度上限 + 允许超出 + 统一 floating close
   - 默认（OFF）：弹窗实际高度不超过可见视口（calc(100vh - 32px)），
     整 card 滚动的家族头部 sticky 保持可见；flex-column 家族本就内部滚动。
   - 允许超出（根元素 data-modal-allow-overflow="true"）：解除 max-height 上限，
     flex-column 固定高度家族解除 height 上限随内容增长；floating close 固定
     视口右上角始终可见（JS 控制显隐，仅超高时显示）。
   - 仅追加覆盖，不改各家族既有类与 [hidden] 语义。
   ========================================================= */
:root {
    --modal-effective-max-height: calc(100vh - 32px);
    --modal-safe-margin: 16px;
}
:root[data-modal-allow-overflow="true"] {
    --modal-effective-max-height: none;
}

/* 各家族 card 统一受 effective max-height 约束（覆盖各自原 90vh/86vh/92vh 上限）*/
.fd-dialog,
.modal,
.te-modal,
.vh-modal,
.vd-modal,
.seal-editor-modal {
    max-height: var(--modal-effective-max-height, calc(100vh - 32px));
}

/* 允许超出时，flex-column 固定高度家族解除 height 上限，随内容增长（可超出视口）*/
:root[data-modal-allow-overflow="true"] .te-modal,
:root[data-modal-allow-overflow="true"] .vh-modal,
:root[data-modal-allow-overflow="true"] .vd-modal,
:root[data-modal-allow-overflow="true"] .seal-editor-modal {
    height: auto;
}

/* 整 card 滚动的家族（.modal / .fd-dialog）：头部 sticky，避免关闭按钮随滚动移出视口 */
.modal > .modal-head,
.fd-dialog > .fd-dialog-title {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--card-bg, #fff);
}

/* 统一 floating close：默认隐藏，JS 在出现超高弹窗时加 .is-visible */
.modal-floating-close {
    position: fixed;
    top: var(--modal-safe-margin, 16px);
    right: var(--modal-safe-margin, 16px);
    z-index: 10000;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--card-bg, #fff);
    color: var(--text, #172033);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}
.modal-floating-close.is-visible { display: flex; }
.modal-floating-close:hover {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}
/* === UI-5 END === */