/* 在线设计模块样式 — 引用全站 tokens + chrome */
@import url('tokens.css');
@import url('chrome.css');

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-ui);
    font-size: var(--font-body-size);
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* 顶栏样式见 chrome.css（全站 site-nav-unified） */
.site-nav-unified {
    flex-shrink: 0;
}

/* ========== 按钮 ========== */
.btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn-primary {
    background: var(--brand-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-brand);
}
.btn-primary:hover { filter: brightness(1.05); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: var(--text-sm); }

/* ========== 模块中心首页（商用排版） ========== */
body.module-hub-page {
    overflow: auto;
    height: auto;
    min-height: 100vh;
}

body.module-hub-page .home-view {
    height: auto;
    min-height: calc(100vh - var(--nav-h));
}

.home-view {
    display: block;
    overflow-y: auto;
    height: calc(100vh - var(--nav-h));
    padding: 20px 24px 40px;
    background: var(--bg);
}

.module-hub {
    max-width: 1280px;
    margin: 0 auto;
}

.module-hub-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: var(--brand-gradient-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.module-hub-title h1 {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.module-hub-title h1 i {
    color: var(--brand);
    font-size: 22px;
}

.module-hub-title p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading);
}

.module-count {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--brand-dark);
    background: var(--brand-bg);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(20, 184, 166, 0.2);
}

.module-hub-promo {
    margin-bottom: 14px;
    padding: 14px 18px;
    text-align: center;
    background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 28%, #fce7f3 62%, #eef2ff 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(236, 72, 153, 0.12);
}

.module-hub-promo p {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    font-weight: 500;
}

.module-hub-promo .promo-sep {
    color: #94a3b8;
    margin: 0 2px;
}

.module-hub-promo .promo-highlight {
    display: inline;
    font-weight: 600;
}

.module-hub-promo .promo-coin {
    color: #d97706;
}

.module-hub-promo .promo-coin i {
    color: #f59e0b;
    margin-right: 4px;
}

.module-hub-promo .promo-gift {
    color: #7c3aed;
}

.module-hub-promo .promo-gift strong {
    color: #6d28d9;
}

.module-hub-promo .promo-free {
    color: #059669;
}

.module-hub-promo .promo-free strong {
    color: #047857;
}

.btn-video-tutorial {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff !important;
    text-decoration: none;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #f97316 0%, #ec4899 52%, #8b5cf6 100%);
    box-shadow: 0 2px 10px rgba(236, 72, 153, 0.35);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    white-space: nowrap;
}

.btn-video-tutorial:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.45);
    filter: brightness(1.05);
}

.btn-video-tutorial i {
    font-size: 15px;
}


.module-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 20;
}

.module-tab {
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.module-tab:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-bg);
}

.module-tab.active {
    background: var(--brand-gradient);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: var(--shadow-brand);
}

.module-hub-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.module-section-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.module-section {
    margin: 0;
    scroll-margin-top: 72px;
}

.module-section-head {
    margin-bottom: 10px;
}

.module-section-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.module-section-title > i {
    font-size: 18px;
    color: var(--brand);
    background: var(--brand-bg);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.module-section-title h2 {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 2px;
}

.module-section-title p {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* SQL 首行三列 · 紧凑卡片 */
.module-grid-sql {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* AI/UML 等：更密网格，单卡更小 */
.module-grid-standard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
    gap: 12px;
}

/* 智能绘图：每排 5 个，彩色卡片 */
.module-grid-ai {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.module-card-ai {
    padding: 14px 14px 12px;
    min-height: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
}

.module-card-ai .module-icon {
    width: 44px;
    height: 44px;
    font-size: 22px;
    border-radius: 10px;
}

.module-card-ai .module-title {
    font-size: 15px;
    margin-bottom: 6px;
}

.module-card-ai .module-desc {
    font-size: 12px;
    -webkit-line-clamp: 3;
    line-height: 1.6;
}

.module-card-ai .module-btn {
    padding: 9px 12px;
    font-size: 13px;
    margin-top: 10px;
    border: none;
    color: #fff;
}

.module-card-ai[data-theme="ai-flowchart"] .module-tags span { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.module-card-ai[data-theme="ai-function"] .module-tags span { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.module-card-ai[data-theme="ai-er"] .module-tags span { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }
.module-card-ai[data-theme="ai-usecase"] .module-tags span { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.module-card-ai[data-theme="ai-sequence"] .module-tags span { background: #f0f9ff; border-color: #bae6fd; color: #0369a1; }

.module-grid {
    display: grid;
    gap: 12px;
}

.module-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 12px 12px 10px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.module-card-featured {
    border-color: rgba(20, 184, 166, 0.22);
    background: linear-gradient(180deg, #f0fdfa 0%, #fff 40%);
}

.module-card-featured .module-icon {
    width: 34px;
    height: 34px;
    font-size: 17px;
}

.module-card-featured .module-title,
.module-title-highlight {
    color: #0d9488;
    font-weight: 700;
}

.module-card:hover {
    border-color: var(--brand-light);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.module-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 6px;
}

.module-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #ecfdf5 0%, #ccfbf1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--brand-dark);
    flex-shrink: 0;
}

.module-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.module-badge.free { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.module-badge.hot { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.module-badge.new { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.module-title {
    font-size: var(--text-sm);
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text);
    line-height: 1.35;
}

.module-desc {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.55;
    flex: 1;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.module-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.module-tags span {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--border-light);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.module-coin-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #c2410c;
    background: rgba(249, 115, 22, 0.08);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    margin-top: 8px;
}

.billing-hint {
    font-size: 11px;
    margin: 6px 0 0;
    line-height: 1.45;
    font-weight: 500;
    background: linear-gradient(90deg, #ea580c, #e11d48, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.billing-hint.is-member-free {
    background: linear-gradient(90deg, #059669, #0d9488, #2563eb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.module-btn {
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--brand-gradient);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: filter 0.15s, box-shadow 0.15s;
    margin-top: auto;
}

.module-btn:hover {
    filter: brightness(1.06);
    box-shadow: var(--shadow-brand);
}

.module-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.module-empty i { font-size: 40px; display: block; margin-bottom: 12px; }

@media (min-width: 1200px) {
    .module-grid-standard {
        grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
    }
}

@media (max-width: 1280px) {
    .module-grid-ai {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .module-grid-ai {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .module-grid-sql {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .module-grid-sql,
    .module-grid-ai {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .home-view {
        padding: 16px;
    }

    .module-hub-header {
        padding: 16px;
    }

    .module-hub-title h1 {
        font-size: 20px;
    }
}

/* 旧版双卡片（保留兼容） */
.home-cards { display: none; }

/* ========== 编辑器布局 ========== */
.editor-view { display: none; height: calc(100vh - var(--nav-h)); flex-direction: column; }
.editor-view.active { display: flex; }

/* 独立图表页（templates/design/*.html） */
body.chart-page {
    overflow: hidden;
    background: var(--bg, #f5f7fa);
}
body.chart-page .editor-view.active {
    display: flex;
}

#function-toolbar-group .tb-btn.tb-btn-primary {
    border-color: var(--primary, #1677ff);
    color: var(--primary, #1677ff);
    background: #e6f4ff;
}

.editor-toolbar {
    height: auto;
    min-height: var(--toolbar-h);
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    padding: 8px 14px;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.ai-editor-toolbar {
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toolbar-group-label {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    margin-right: 4px;
    white-space: nowrap;
}

.toolbar-spacer { flex: 1; min-width: 8px; }

.tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.tb-btn i { font-size: 14px; color: #1677ff; }

.tb-btn:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1677ff;
}

.tb-btn:active { background: #dbeafe; }

.tb-btn-icon {
    width: 32px;
    padding: 0;
}

.tb-btn-icon span { display: none; }

.tb-btn-primary {
    background: #1677ff;
    border-color: #1677ff;
    color: #fff;
    font-weight: 600;
    padding: 0 14px;
}

.tb-btn-primary i { color: #fff; }

.tb-btn-primary:hover {
    background: #4096ff;
    border-color: #4096ff;
    color: #fff;
}

/* 工具栏内视频教程：需覆盖 .tb-btn 白底，否则白字不可见 */
.tb-btn.btn-video-tutorial,
a.tb-btn.btn-video-tutorial {
    height: 32px;
    padding: 0 12px;
    border: none !important;
    border-radius: 6px;
    background: linear-gradient(135deg, #f97316 0%, #ec4899 52%, #8b5cf6 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(236, 72, 153, 0.35);
    flex-shrink: 0;
}

.tb-btn.btn-video-tutorial span {
    display: inline !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
}

.tb-btn.btn-video-tutorial i {
    color: #fff !important;
}

.tb-btn.btn-video-tutorial:hover,
a.tb-btn.btn-video-tutorial:hover {
    border: none !important;
    background: linear-gradient(135deg, #fb923c 0%, #f472b6 52%, #a78bfa 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.45);
    filter: brightness(1.05);
}

.editor-toolbar .sep { width: 1px; height: 24px; background: #e5e7eb; margin: 0 6px; flex-shrink: 0; }

.editor-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* 左侧面板 */
.panel-left {
    width: var(--sidebar-w);
    background: var(--panel-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.panel-left .panel-header {
    padding: 12px 14px;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}

.panel-left .panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

/* 中间画布 */
.panel-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.canvas-tabs {
    display: flex;
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 0 12px;
}

.canvas-tab {
    padding: 10px 18px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
}

.canvas-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.canvas-container {
    flex: 1;
    position: relative;
    background: #fafafa;
    background-image: radial-gradient(circle, #ddd 1px, transparent 1px);
    background-size: 20px 20px;
    overflow: hidden;
}

#graph-container {
    width: 100%;
    height: 100%;
}

.table-preview {
    flex: 1;
    overflow: auto;
    padding: 24px;
    background: #fff;
    display: none;
}

.table-preview.active { display: block; }

/* 右侧面板 */
.panel-right {
    width: var(--right-w);
    background: var(--panel-bg);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.panel-right > .tools-panel.active {
    flex: 1;
    min-height: 0;
}

/* SQL 输入区 */
.sql-textarea {
    width: 100%;
    height: 200px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px;
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    resize: vertical;
    line-height: 1.5;
}

/* 表格样式 - 三线表 / 普通表 */
.sql-table-wrap,
.three-line-table-wrap {
    margin: 0 auto 32px;
    max-width: 100%;
    font-family: "SimSun", "宋体", "Times New Roman", serif;
}
.three-line-table,
.regular-table,
.sql-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.three-line-table th,
.three-line-table td,
.regular-table th,
.regular-table td,
.sql-table th,
.sql-table td {
    padding: 6px 10px;
    word-break: break-word;
    vertical-align: middle;
}
.three-line-table th,
.three-line-table td {
    border: none;
    border-left: none !important;
    border-right: none !important;
}
.regular-table th,
.regular-table td {
    border: 1px solid #000;
}
.three-line-table th,
.regular-table th,
.sql-table th {
    font-weight: bold;
    text-align: center;
}
.three-line-table .col-text,
.regular-table .col-text,
.sql-table .col-text {
    text-align: left;
}
.three-line-table .col-center,
.regular-table .col-center,
.sql-table .col-center {
    text-align: center;
}
.three-line-table thead tr {
    border-top: 2px solid #000;
    border-bottom: 1px solid #000;
}
.three-line-table tbody tr:last-child {
    border-bottom: 2px solid #000;
}
.table-caption {
    font-size: 1em;
    text-align: center;
    font-weight: bold;
    margin-bottom: 8px;
}
.table-description {
    font-size: 1em;
    text-align: justify;
    text-indent: 2em;
    line-height: 1.8;
    margin-bottom: 10px;
    color: #333;
}
.editable-cell {
    cursor: text;
    outline: none;
}
.editable-cell:focus {
    background: rgba(19, 194, 194, 0.08);
}

/* ========== 独立模块页 ========== */
body.module-page {
    overflow: hidden;
}

.module-editor {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--nav-h));
}

.module-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.module-editor-title h1 {
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.module-editor-title p {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.module-editor-actions {
    display: flex;
    gap: 8px;
}

.module-editor-body {
    flex: 1;
    min-height: 0;
}

.module-sql-textarea {
    height: calc(100vh - 320px);
    min-height: 200px;
}

/* 标准三线表：缩窄右侧样式栏、降低 SQL 输入区高度 */
#three-line-editor {
    --right-w: 220px;
}

#three-line-editor .module-sql-textarea {
    height: calc(100vh - 520px);
    min-height: 160px;
}

#three-line-editor .panel-right .panel-body {
    padding: 10px;
}

#three-line-editor .control-group label {
    font-size: 12px;
}

#three-line-editor .tools-tips {
    font-size: 10px;
}

.module-action-row {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.module-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.5;
}

.module-checkbox input {
    margin-top: 3px;
    flex-shrink: 0;
}

.module-preview-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.module-preview-header {
    flex-shrink: 0;
}

.module-table-preview {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    display: block !important;
    min-height: 0;
    position: relative;
    background: #fff;
}

/* AI 面板 */
.ai-chart-list { list-style: none; }
.ai-chart-item {
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    margin-bottom: 4px;
    transition: background .2s;
}
.ai-chart-item:hover, .ai-chart-item.active {
    background: rgba(19,194,194,.1);
    color: var(--primary);
}

.ai-prompt-area {
    padding: 12px;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.ai-prompt-area textarea {
    width: 100%;
    height: 80px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    font-size: 13px;
    resize: none;
    margin-bottom: 8px;
}

.ai-suggestions { padding: 8px 12px; }
.ai-suggestion {
    display: inline-block;
    padding: 4px 10px;
    margin: 2px;
    background: #f5f5f5;
    border-radius: 12px;
    font-size: 11px;
    cursor: pointer;
}
.ai-suggestion:hover { background: rgba(19,194,194,.15); color: var(--primary); }

/* 形状库 */
.shape-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 64px;
    padding: 8px 4px;
    cursor: grab;
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-secondary);
}
.shape-item:hover { background: #f5f5f5; }
.shape-icon {
    width: 36px;
    height: 28px;
    border: 1.5px solid #333;
    margin-bottom: 4px;
    background: #fff;
}
.shape-icon.rect { border-radius: 2px; }
.shape-icon.diamond { transform: rotate(45deg) scale(.7); }
.shape-icon.ellipse { border-radius: 50%; }
.shape-icon.circle { border-radius: 50%; width: 28px; height: 28px; }

/* 控件组 */
.control-group {
    margin-bottom: 16px;
}
.control-group label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: var(--font-label-size);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.control-group input[type=range] {
    width: 100%;
    height: 6px;
    accent-color: #4f46e5;
    cursor: pointer;
}
.control-group input[type=color] {
    width: 100%;
    height: 36px;
    padding: 2px 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
}
.control-group select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--font-ui);
    background: #fff;
}

/* 字体数值徽章 */
.font-value-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    margin-left: 4px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: 0 1px 4px rgba(79, 70, 229, 0.35);
}

/* 字体实时预览面板 */
.font-preview-panel {
    background: linear-gradient(180deg, #f1f5f9 0%, #fff 100%);
    border: 1px solid #dbeafe;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.font-preview-panel h5 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.font-preview-sample {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 32px;
    min-height: 80px;
    padding: 16px;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
}

.font-preview-table,
.font-preview-attr {
    transition: font-size 0.15s ease, color 0.15s ease, font-weight 0.15s ease;
}

.font-preview-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 10px 0 0;
    text-align: center;
}

.font-setting-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.font-setting-row input[type=color] {
    width: 48px;
    height: 36px;
    flex-shrink: 0;
    padding: 2px;
}

/* 加载遮罩 */
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    font-size: 14px;
    color: var(--primary);
}
.loading-overlay.show { display: flex; }

/* Toast — 屏幕正中 */
.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 11000;
    max-width: min(420px, 88vw);
    padding: 14px 28px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    color: #fff;
    background: rgba(30, 41, 59, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
}
.toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.toast.toast-success {
    background: rgba(22, 101, 52, 0.94);
    border-color: rgba(134, 239, 172, 0.35);
}
.toast.toast-error {
    background: rgba(153, 27, 27, 0.94);
    border-color: rgba(252, 165, 165, 0.35);
}
.toast.toast-info {
    background: rgba(30, 64, 175, 0.94);
    border-color: rgba(147, 197, 253, 0.35);
}

/* 居中确认 / 输入对话框 */
.app-dialog {
    position: fixed;
    inset: 0;
    z-index: 10900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.app-dialog.hidden { display: none !important; }
.app-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    animation: entityBackdropIn 0.2s ease-out;
}
.app-dialog-panel {
    position: relative;
    width: min(400px, 92vw);
    padding: 24px 24px 20px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    text-align: center;
    animation: appDialogIn 0.22s ease-out;
}
@keyframes appDialogIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.app-dialog-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}
.app-dialog-icon-alert { background: #eff6ff; color: #2563eb; }
.app-dialog-icon-confirm { background: #fff7ed; color: #ea580c; }
.app-dialog-icon-prompt { background: #f0fdf4; color: #16a34a; }
.app-dialog-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    color: #0f172a;
}
.app-dialog-message {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.55;
    color: #64748b;
    white-space: pre-wrap;
}
.app-dialog-input {
    display: block;
    width: 100%;
    margin: 0 0 18px;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    text-align: left;
    box-sizing: border-box;
}
.app-dialog-input:focus {
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.app-dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.app-dialog-actions .btn { min-width: 88px; }

.hidden { display: none !important; }

/* ========== SQL 三步流程：类型选择栏 ========== */
.sql-step-bar {
    background: linear-gradient(180deg, #fff 0%, #f8fafb 100%);
    border-bottom: 1px solid var(--border);
    padding: 12px 20px;
    flex-shrink: 0;
}

.step-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e8e8e8;
    color: #999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 11px;
}

.step-num.active {
    background: var(--primary);
    color: #fff;
}

.step-arrow {
    color: #ccc;
    font-size: 10px;
}

.gen-type-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.gen-type-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    background: #fff;
    transition: all .2s;
    user-select: none;
}

.gen-type-tab input { display: none; }

.gen-type-tab:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.gen-type-tab:has(input:checked) {
    border-color: var(--primary);
    background: rgba(19, 194, 194, .08);
    color: var(--primary);
    font-weight: 600;
}

.type-hint {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: #e6a23c;
}

.type-hint.ok {
    color: var(--primary);
}

.toolbar-label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* SQL 面板禁用遮罩 */
.panel-disabled-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .85);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    font-size: 13px;
    color: var(--text-secondary);
}

.panel-disabled-overlay i {
    font-size: 32px;
    color: #ccc;
    margin-bottom: 8px;
}

.sql-hint {
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* 画布空状态提示 */
.canvas-empty-hint {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #bbb;
    pointer-events: none;
    z-index: 5;
}

.canvas-empty-hint i {
    font-size: 48px;
    margin-bottom: 12px;
}

.canvas-empty-hint p {
    font-size: 14px;
}

/* 右侧专属工具面板 */
.tools-panel {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.tools-panel.active {
    display: flex;
}

.panel-right {
    padding: 0;
}

.panel-right .panel-header {
    padding: 12px 14px;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}

.panel-right .panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.tools-tips {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.tools-tips p { margin-bottom: 4px; }

.shape-library-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* 三线表可编辑单元格 */
.editable-cell {
    outline: none;
    cursor: text;
}

.editable-cell:focus {
    background: rgba(19, 194, 194, .08);
    box-shadow: inset 0 0 0 1px var(--primary);
}

#graph-container-ai,
.graph-scroll-host {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.ai-canvas-wrap {
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.toolbar-style-group {
    flex-wrap: nowrap;
    padding: 0 4px;
}

.tb-style-select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    color: #374151;
    background: #fff;
    max-width: 96px;
    cursor: pointer;
}

.tb-style-select-size { max-width: 72px; }

.tb-style-select:focus {
    outline: none;
    border-color: #1677ff;
    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.15);
}

.tb-style-color {
    width: 32px;
    height: 32px;
    padding: 2px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
}

.toolbar-hint {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
    margin-left: 4px;
}

/* AI 助手面板 */
.ai-assistant-panel {
    background: #fff;
}

.ai-panel-head {
    padding: 16px 16px 12px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.ai-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-panel-title i { color: #1677ff; font-size: 18px; }

.ai-panel-sub {
    font-size: 12px;
    color: #6b7280;
    margin: 6px 0 0;
    line-height: 1.55;
}

.ai-steps {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.ai-step {
    flex: 1;
    text-align: center;
    font-size: 11px;
    padding: 6px 4px;
    border-radius: 6px;
    color: #9ca3af;
    background: #fff;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.ai-step i { font-size: 12px; }

.ai-step.active {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1677ff;
    font-weight: 600;
}

.ai-step.done {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.ai-chart-select,
.canvas-font-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    color: #111827;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ai-chart-select:focus,
.canvas-font-select:focus {
    outline: none;
    border-color: #1677ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.15);
}

.ai-type-block {
    margin-bottom: 14px;
}

.ai-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.ai-type-locked {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 16px;
}

.ai-type-locked i { font-size: 20px; color: #1677ff; }

.style-panel-body { padding: 10px 12px 14px; }

.style-panel-tip {
    font-size: 11px;
    color: #9ca3af;
    margin: 0 0 12px;
    line-height: 1.5;
}

.ai-style-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}

.btn-apply-style {
    width: 100%;
    margin-top: 8px;
    padding: 9px 12px;
    border: 1px solid #1677ff;
    border-radius: 6px;
    background: #eff6ff;
    color: #1677ff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-apply-style:hover { background: #1677ff; color: #fff; }

.tb-btn-danger i { color: #ef4444; }
.tb-btn-danger:hover { border-color: #fca5a5; background: #fef2f2; color: #dc2626; }

/* 对齐下拉 */
.toolbar-align-group { position: relative; }

.toolbar-align-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    min-width: 140px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 4px;
}

.toolbar-align-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    font-size: 13px;
    color: #374151;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}

.toolbar-align-menu button:hover {
    background: #eff6ff;
    color: #1677ff;
}

.tb-mode-btn.active {
    background: #1677ff;
    border-color: #1677ff;
    color: #fff;
}

.tb-mode-btn.active i { color: #fff; }

.tb-caret { font-size: 9px; margin-left: 2px; opacity: 0.6; }

#graph-container-ai { cursor: default; }
#graph-container-ai:focus { outline: none; }

.canvas-context-menu {
    position: fixed;
    z-index: 10050;
    min-width: 140px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.canvas-context-menu.hidden { display: none; }

.canvas-context-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    text-align: left;
}

.canvas-context-menu button:hover {
    background: #eff6ff;
    color: #1677ff;
}

.canvas-context-menu .ctx-sep {
    display: block;
    height: 1px;
    margin: 4px 8px;
    background: #e5e7eb;
}

.ai-type-locked.hidden { display: none !important; }

.ai-suggestions { margin-bottom: 14px; }

.ai-suggestions-title {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ai-suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ai-suggestion {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 16px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ai-suggestion:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1677ff;
}

.ai-prompt-block {
    border-top: 1px solid #f3f4f6;
    padding-top: 14px;
}

.ai-prompt-input {
    width: 100%;
    min-height: 168px;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    font-family: var(--font-ui);
    color: #111827;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ai-prompt-input:focus {
    outline: none;
    border-color: #1677ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
}

.ai-prompt-input:disabled {
    background: #f9fafb;
    color: #9ca3af;
}

.ai-prompt-tip {
    font-size: 11px;
    color: #9ca3af;
    margin: 8px 0 12px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.btn-ai-generate {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    background: var(--brand-gradient);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(22, 119, 255, 0.25);
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.btn-ai-generate:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(22, 119, 255, 0.3);
}

.btn-ai-generate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.ai-assistant-panel .panel-body { padding: 14px 16px; }
.ai-assistant-body { flex: 1; overflow-y: auto; }

/* 功能结构图：商用黑体、略大字号、界面与画布协调 */
.chart-page-function {
    --right-w: 328px;
    --font-func: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "HarmonyOS Sans SC", sans-serif;
    font-family: var(--font-func);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.chart-page-function .site-nav-unified,
.chart-page-function .editor-toolbar,
.chart-page-function .panel-left,
.chart-page-function .panel-left .panel-header,
.chart-page-function .ai-assistant-panel,
.chart-page-function .tb-btn,
.chart-page-function .tb-style-select,
.chart-page-function .shape-item span {
    font-family: var(--font-func);
}

.chart-page-function .panel-left .panel-header {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.chart-page-function .shape-item span {
    font-size: 11.5px;
    color: #374151;
}

.chart-page-function .tb-style-select {
    font-size: 13px;
}

.chart-page-function .ai-gen-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.chart-page-function .ai-field-label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.chart-page-function .ai-prompt-input-compact {
    font-size: 13px;
    line-height: 1.55;
    color: #1a1a1a;
}

.chart-page-function .ai-suggestions-inline .ai-suggestion,
.chart-page-function .ai-suggestions-bottom .ai-suggestion {
    font-size: 12px;
    font-weight: 500;
}

.chart-page-function .btn-ai-generate {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.chart-page-function #ai-connect-line {
    display: none;
}

.ai-assistant-panel-function .panel-body {
    padding: 10px 12px 12px;
}

.ai-assistant-body-function {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.ai-assistant-body-function .ai-function-gen {
    flex: 0 0 auto;
}

.ai-function-gen {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ai-gen-section {
    padding: 0 0 4px;
}

.ai-gen-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.ai-gen-section-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}

.ai-gen-section-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.ai-gen-section-badge.layout {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.ai-gen-section-badge.ai {
    background: #f5f3ff;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}

.ai-gen-section .ai-field-label {
    margin-bottom: 4px;
    font-size: 11px;
}

.ai-prompt-input-compact {
    min-height: 108px;
    max-height: 200px;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 8px;
    padding: 8px 10px;
    resize: vertical;
}

.chart-page-function .ai-prompt-outline {
    min-height: 200px;
    max-height: 360px;
    margin-bottom: 6px;
}

.chart-page-function .ai-prompt-desc {
    min-height: 140px;
    max-height: 280px;
}

.ai-field-label-suggestions {
    margin-top: 2px;
    margin-bottom: 6px;
}

.ai-suggestions-inline {
    margin: 0 0 12px;
    padding: 0;
}

.ai-suggestions-inline .ai-suggestions-title {
    display: none;
}

.ai-suggestions-inline .ai-suggestion {
    font-size: 11px;
    padding: 4px 10px;
}

.ai-gen-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    color: #9ca3af;
    font-size: 11px;
}

.ai-gen-divider::before,
.ai-gen-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.ai-gen-divider span {
    flex-shrink: 0;
    padding: 0 4px;
}

.btn-ai-layout {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.22);
}

.btn-ai-layout:hover:not(:disabled) {
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.28);
}

.btn-ai-deepseek {
    background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.22);
}

.btn-ai-deepseek:hover:not(:disabled) {
    box-shadow: 0 6px 16px rgba(109, 40, 217, 0.3);
}

.ai-suggestions-bottom {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
    margin-bottom: 0;
}

.ai-suggestions-bottom .ai-suggestions-title {
    margin-bottom: 6px;
    font-size: 11px;
}

.ai-suggestions-bottom .ai-suggestion {
    font-size: 11px;
    padding: 4px 10px;
}

.chart-page-function .btn-ai-generate {
    padding: 10px 14px;
    font-size: 13px;
}

.chart-page-function .ai-gen-section-head {
    margin-bottom: 4px;
}

.chart-page-function .ai-gen-section + .ai-gen-section {
    padding-top: 0;
}

/* ER 图设计器（ai-er）：Chen 记法 + 商用字号 */
.chart-page-er {
    --right-w: 348px;
    --font-er: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "HarmonyOS Sans SC", sans-serif;
    font-family: var(--font-er);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.chart-page-er .site-nav-unified,
.chart-page-er .editor-toolbar,
.chart-page-er .panel-left,
.chart-page-er .panel-left .panel-header,
.chart-page-er .ai-assistant-panel,
.chart-page-er .tb-btn,
.chart-page-er .tb-style-select,
.chart-page-er .shape-item span,
.chart-page-er .shape-group-header,
.chart-page-er .flowchart-help-panel {
    font-family: var(--font-er);
}

.chart-page-er .panel-left .panel-header {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.chart-page-er .shape-group-header {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}

.chart-page-er .shape-item {
    width: 66px;
}

.chart-page-er .shape-item span {
    font-size: 11.5px;
    font-weight: 500;
    color: #374151;
}

.chart-page-er .flowchart-help-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

.chart-page-er .flowchart-help-list {
    font-size: 12.5px;
    line-height: 1.65;
    color: #4b5563;
}

.chart-page-er .flowchart-help-list b {
    color: #111827;
    font-weight: 600;
}

.chart-page-er .ai-panel-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    letter-spacing: 0.02em;
}

.chart-page-er .ai-panel-sub {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.5;
}

.chart-page-er .ai-field-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.chart-page-er .ai-type-locked {
    font-size: 14px;
    font-weight: 600;
}

.chart-page-er .ai-prompt-input-compact.ai-prompt-er {
    font-size: 13.5px;
    line-height: 1.6;
    color: #111827;
    min-height: 140px;
}

.chart-page-er .ai-suggestions-inline .ai-suggestion {
    font-size: 12.5px;
    font-weight: 500;
    padding: 7px 12px;
}

.chart-page-er .btn-ai-generate {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.chart-page-er .btn-er-link-chen {
    font-size: 13px;
    font-weight: 500;
}

.chart-page-er #ai-connect-polyline,
.chart-page-er #ai-connect-line,
.chart-page-er #ai-rotate,
.chart-page-er .toolbar-align-group {
    display: none !important;
}

.chart-page-er .er-quick-toolbar .tb-btn {
    min-width: 52px;
}

.chart-page-er .er-quick-toolbar .tb-btn i {
    font-size: 14px;
}

.ai-assistant-panel-er .panel-body {
    padding: 10px 12px 12px;
}

.ai-assistant-body-er {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.ai-er-gen {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ai-er-chk {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin: 4px 0 10px;
}

.ai-er-chk code {
    font-size: 10px;
    background: #f3f4f6;
    padding: 0 4px;
    border-radius: 3px;
}

.ai-er-sql-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.ai-er-sql-actions .btn-ai-layout {
    flex: 1;
    min-width: 140px;
}

.btn-er-sql-file {
    flex-shrink: 0;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
}

.btn-er-sql-file:hover {
    border-color: #93c5fd;
    color: #1677ff;
}

.btn-er-link-chen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    color: #1677ff;
    text-decoration: none;
    border: 1px dashed #bfdbfe;
    border-radius: 8px;
    background: #f8fafc;
    transition: background 0.15s, border-color 0.15s;
}

.btn-er-link-chen:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.er-sql-error-inline {
    font-size: 11px;
    color: #dc2626;
    margin: -4px 0 8px;
    line-height: 1.45;
}

.er-sql-error-inline.hidden {
    display: none;
}

/* Chen ER 关系图：与 ER 图设计器同布局 */
.chart-page-chen-er {
    --right-w: 348px;
}

.chart-page-chen-er .editor-view.active {
    height: calc(100vh - var(--nav-h));
}

.chart-page-chen-er .er-chen-canvas-wrap {
    background: #f5f5f5;
    background-image: none;
}

.chart-page-chen-er .er-chen-canvas-wrap .canvas-viewport {
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    position: relative;
}

.chart-page-chen-er .er-chen-canvas-wrap .er-diagram-svg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.chart-page-chen-er .er-chen-canvas-wrap .canvas-empty-hint {
    pointer-events: none;
    z-index: 0;
}

.chart-page-chen-er .canvas-viewport.palette-shape-drag {
    cursor: copy;
}

.chart-page-chen-er .palette-shape-preview {
    pointer-events: none;
}

.chart-page-chen-er #shape-library-ai .shape-item {
    cursor: grab;
}

.chart-page-chen-er #shape-library-ai .shape-item:active {
    cursor: grabbing;
}

.chart-page-chen-er .er-attr-display-compact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.chart-page-chen-er .ai-prompt-er.sql-textarea {
    font-family: "SF Mono", Consolas, Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    min-height: 330px;
}

.chart-page-chen-er .entity-sql-file-input {
    display: none;
}

.chart-page-chen-er #er-toolbar-group {
    display: flex;
}

.chart-page-chen-er .er-connect-port {
    cursor: crosshair;
    pointer-events: all;
}

.chart-page-chen-er .er-connect-port .connect-port-cross,
.chart-page-chen-er .er-connect-port .connect-port-dot {
    pointer-events: none;
}

.chart-page-chen-er .er-connect-port.active .connect-port-dot {
    fill: #111;
    stroke: #111;
}

.chart-page-chen-er .er-connect-port.active .connect-port-cross {
    stroke: #fff;
    stroke-width: 1.5;
}

.chart-page-chen-er .canvas-viewport.connect-port-hover {
    cursor: crosshair;
}

.chart-page-chen-er .canvas-viewport.connect-port-hover .er-node .node-shape {
    cursor: default;
}

/* 画布文字编辑弹窗扩展 */
.canvas-text-edit-dialog { width: min(460px, 94vw); }

.canvas-text-font-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.canvas-font-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.canvas-font-tip {
    font-size: 11px;
    color: #9ca3af;
    margin: 12px 0 0;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

body.canvas-text-edit-open,
body.canvas-class-edit-open { overflow: hidden; }

.canvas-class-edit-dialog { width: min(520px, 94vw); }

.text-edit-textarea {
    display: block;
    width: 100%;
    min-height: 88px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.55;
    font-family: Consolas, 'Courier New', monospace;
    color: #1f2937;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    resize: vertical;
    box-sizing: border-box;
}

.text-edit-textarea:hover { border-color: #9ca3af; }

.text-edit-textarea:focus {
    outline: none;
    border-color: #1677ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.15);
}

.canvas-class-edit-modal .text-edit-field + .text-edit-field { margin-top: 14px; }

/* 图形库分组折叠 */
.shape-library-groups { padding: 0; }
.shape-group { border-bottom: 1px solid var(--border); }
.shape-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    user-select: none;
    background: #fafafa;
}
.shape-group-header:hover { background: #f0f0f0; }
.shape-group-header em {
    margin-left: auto;
    font-style: normal;
    font-size: 10px;
    color: #999;
    background: #eee;
    padding: 1px 6px;
    border-radius: 8px;
}
.shape-item-tool {
    border: 1px dashed #93c5fd;
    background: #f8fbff;
}

.shape-item-tool:hover {
    border-color: #1677ff;
    background: #eff6ff;
}

.shape-item-tool.active {
    border-color: #1677ff;
    background: #dbeafe;
    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
}

.shape-group.collapsed .shape-group-body { display: none; }
.shape-group.collapsed .shape-group-header i { transform: rotate(-90deg); }
.shape-group-body {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px 8px 10px;
}

/* 扩展形状图标 */
.shape-item {
    width: 58px;
    padding: 6px 2px;
}
.shape-item span { font-size: 10px; text-align: center; line-height: 1.2; }
.shape-icon.rounded-rect { border-radius: 8px; }
.shape-icon.parallelogram { transform: skewX(-15deg); }
.shape-icon.trapezoid { clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); }
.shape-icon.arrow-right { clip-path: polygon(0 30%, 60% 30%, 60% 0, 100% 50%, 60% 100%, 60% 70%, 0 70%); border:none; background:#333; height:20px; }
.shape-icon.arrow-up { clip-path: polygon(30% 100%, 30% 40%, 0 40%, 50% 0, 100% 40%, 70% 40%, 70% 100%); border:none; background:#333; }
.shape-icon.arrow-dashed { border-style: dashed; }
.shape-icon.line { height: 3px; border: none; background: #333; margin-top: 12px; }
.shape-icon.aggregation { position: relative; }
.shape-icon.aggregation::before { content: ''; position: absolute; left: -4px; top: 10px; width: 8px; height: 8px; border: 1.5px solid #333; transform: rotate(45deg); background:#fff; }
.shape-icon.composition::before { content: ''; position: absolute; left: -4px; top: 10px; width: 8px; height: 8px; background:#333; transform: rotate(45deg); }
.shape-icon.activation { width: 8px; background: #eee; border: 1px solid #333; }
.shape-icon.fork, .shape-icon.join { border: none; background: linear-gradient(#333,#333) 0 0/100% 2px no-repeat, linear-gradient(#333,#333) 0 100%/100% 2px no-repeat; }
.shape-icon.swimlane-h { height: 16px; background: #f5f5f5; }
.shape-icon.swimlane-v { width: 16px; background: #f5f5f5; }
.shape-icon.gantt-bar { height: 12px; background: #e6f7ff; border-radius: 3px; }
.shape-icon.pie { border-radius: 50%; background: conic-gradient(#333 0 30%, #fff 30% 100%); }
.shape-icon.data-store { border-radius: 0; border-top: 8px solid #333; border-bottom: none; height: 22px; }
.shape-icon.actor { border: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50'%3E%3Ccircle cx='20' cy='8' r='6' fill='none' stroke='%23333' stroke-width='2'/%3E%3Cline x1='20' y1='14' x2='20' y2='32' stroke='%23333' stroke-width='2'/%3E%3Cline x1='8' y1='22' x2='32' y2='22' stroke='%23333' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; }
.shape-icon.note { background: #fffbe6; border-color: #d4b106; }
.shape-icon.cylinder { border: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cellipse cx='30' cy='8' rx='26' ry='8' fill='none' stroke='%23333'/%3E%3Cpath d='M4 8v24q0 8 26 8q26 0 26-8V8' fill='none' stroke='%23333'/%3E%3C/svg%3E") center/contain no-repeat; }
.shape-icon.pk, .shape-icon.fk { font-size: 9px; display:flex; align-items:center; justify-content:center; font-weight:bold; height:20px; }
.shape-icon.pk { color: #c00; }
.shape-icon.fk { color: #06c; }
.shape-icon.weak-rect {
    position: relative;
    background: #fff;
}
.shape-icon.weak-rect::before {
    content: '';
    position: absolute;
    inset: 1px;
    border: 1.5px solid #333;
    border-radius: 2px;
    pointer-events: none;
}
.shape-icon.ellipse-double {
    position: relative;
    border-radius: 50%;
    background: #fff;
}
.shape-icon.ellipse-double::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid #333;
    border-radius: 50%;
    pointer-events: none;
}
.shape-icon.class-box { height: 32px; background: linear-gradient(#333 0 0) 0 0/100% 1px no-repeat, linear-gradient(#333 0 0) 0 50%/100% 1px no-repeat; }
.shape-icon.interface-box { border-style: dashed; }
.shape-icon.circle-fill { background: #333; border-radius: 50%; width: 16px; height: 16px; }
.shape-icon.final-state { border-radius: 50%; border-width: 3px; width: 22px; height: 22px; position:relative; }
.shape-icon.final-state::after { content:''; position:absolute; inset:5px; border-radius:50%; background:#333; }
.shape-icon.arrow-return { border-style: dashed; }
.shape-icon.seq-num { border-radius:50%; width:20px; height:20px; font-size:9px; display:flex; align-items:center; justify-content:center; }

/* UML 序列图形库图标 */
.shape-icon.seq-activation {
    width: 10px;
    background: #52c41a;
    border: 1px solid #389e0d;
    border-radius: 1px;
}
.shape-icon.seq-obj-lifeline {
    border: none;
    background:
        linear-gradient(#333, #333) 50% 0/28px 1px no-repeat,
        linear-gradient(#333 50%, transparent 50%) 50% 14px/1px 14px repeat-y;
    background-size: 28px 1px, 1px 4px;
    height: 28px;
    position: relative;
}
.shape-icon.seq-obj-lifeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 10px;
    border: 1.5px solid #333;
    background: #fff;
    box-sizing: border-box;
}
.shape-icon.seq-actor-lifeline {
    border: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Ccircle cx='12' cy='5' r='3.5' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3Cline x1='12' y1='8.5' x2='12' y2='16' stroke='%23333' stroke-width='1.5'/%3E%3Cline x1='6' y1='12' x2='18' y2='12' stroke='%23333' stroke-width='1.5'/%3E%3Cline x1='12' y1='16' x2='8' y2='22' stroke='%23333' stroke-width='1.5'/%3E%3Cline x1='12' y1='16' x2='16' y2='22' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E") center 0/22px 22px no-repeat,
        repeating-linear-gradient(to bottom, #333 0, #333 2px, transparent 2px, transparent 5px) 50% 22px/1px 8px no-repeat;
    height: 30px;
}
.shape-icon.seq-fragment {
    border: 1.5px solid #333;
    border-radius: 0;
    background: #fff;
    position: relative;
    height: 24px;
}
.shape-icon.seq-fragment::before {
    content: 'loop';
    position: absolute;
    top: -1px;
    left: -1px;
    font-size: 7px;
    line-height: 1;
    padding: 2px 4px;
    border: 1.5px solid #333;
    border-bottom: none;
    background: #fff;
}
.shape-icon.seq-operand {
    border: none;
    background: repeating-linear-gradient(to right, #333 0, #333 4px, transparent 4px, transparent 7px) 0 50%/100% 1px no-repeat;
    height: 8px;
    margin-top: 10px;
}
.shape-icon.seq-lifeline-icon {
    border: none;
    width: 2px;
    background: repeating-linear-gradient(to bottom, #333 0, #333 3px, transparent 3px, transparent 6px);
    height: 28px;
    margin: 0 auto;
}
.shape-icon.seq-msg-sync {
    border: none;
    background:
        linear-gradient(#333, #333) 0 50%/70% 2px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpolygon points='0,0 8,4 0,8' fill='%23333'/%3E%3C/svg%3E") 100% 50%/8px 8px no-repeat;
    height: 12px;
    margin-top: 10px;
}
.shape-icon.seq-msg-return {
    border: none;
    background:
        repeating-linear-gradient(to right, #333 0, #333 3px, transparent 3px, transparent 6px) 10% 50%/80% 1px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpolygon points='8,0 0,4 8,8' fill='none' stroke='%23333' stroke-width='1.2'/%3E%3C/svg%3E") 0 50%/8px 8px no-repeat;
    height: 12px;
    margin-top: 10px;
}
.shape-icon.seq-msg-self {
    border: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath d='M4 10 H16 Q24 10 24 4 Q24 10 24 16 H16' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3Cpolygon points='12,13 16,16 12,19' fill='%23333'/%3E%3C/svg%3E") center/contain no-repeat;
    height: 20px;
}
.shape-icon.seq-msg-async {
    border: none;
    background:
        linear-gradient(#333, #333) 0 50%/70% 2px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpolygon points='0,0 8,4 0,8' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E") 100% 50%/8px 8px no-repeat;
    height: 12px;
    margin-top: 10px;
}

/* 活动/状态/类图/DFD/泳道/架构 图形库图标 */
.shape-icon.act-start-end { border-radius: 50%; width: 28px; height: 18px; }
.shape-icon.act-action { border-radius: 16px; border-color: #52c41a; }
.shape-icon.act-decision { transform: rotate(45deg) scale(0.72); border-color: #1890ff; }
.shape-icon.act-merge { transform: rotate(45deg) scale(0.55); border-color: #1890ff; background: #fff; }
.shape-icon.st-state { border-radius: 14px; }
.shape-icon.dfd-external {
    border-width: 2.5px;
    height: 22px;
}
.shape-icon.dfd-external-circle {
    border-radius: 50%;
    background: #e3f2fd;
    border-color: #1976d2;
    width: 26px;
    height: 26px;
}
.shape-icon.dfd-process,
.shape-icon.dfd-process-std {
    border-radius: 2px;
    background:
        linear-gradient(#333 0 0) 0 0 / 100% 6px no-repeat,
        linear-gradient(#333 0 0) 0 0 / 28% 38% no-repeat,
        #fff;
    border-color: #333;
    height: 24px;
}
.shape-icon.dfd-store-std {
    border: none;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    background: #fff;
    height: 22px;
    position: relative;
}
.shape-icon.dfd-store-std::before,
.shape-icon.dfd-store-std::after {
    content: '';
    position: absolute;
    left: -2px;
    width: 6px;
    height: 2px;
    background: #333;
}
.shape-icon.dfd-store-std::before { top: 4px; }
.shape-icon.dfd-store-std::after { bottom: 4px; }
.shape-icon.dfd-context {
    border-radius: 8px;
    background: linear-gradient(#e8c89a 0 0) 0 0/100% 8px no-repeat, #faf0e6;
    border-color: #c4956a;
    height: 26px;
}
.shape-icon.dfd-store-open {
    border: none;
    border-top: 2px solid #f9a825;
    border-right: 2px solid #f9a825;
    border-bottom: 2px solid #f9a825;
    border-left: none;
    background: #fff8e1;
    height: 22px;
    position: relative;
}
.shape-icon.dfd-store-open::before,
.shape-icon.dfd-store-open::after {
    content: '';
    position: absolute;
    left: -2px;
    width: 6px;
    height: 2px;
    background: #f9a825;
}
.shape-icon.dfd-store-open::before { top: 4px; }
.shape-icon.dfd-store-open::after { bottom: 4px; }
.shape-icon.dfd-flow-icon {
    border: none;
    background:
        linear-gradient(#333, #333) 0 50%/70% 2px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpolygon points='0,0 8,4 0,8' fill='none' stroke='%23333' stroke-width='1.2'/%3E%3C/svg%3E") 100% 50%/8px 8px no-repeat;
    height: 12px;
    margin-top: 10px;
}
.shape-icon.arch-component {
    border-radius: 4px;
    background: linear-gradient(#333 0 0) 0 100%/100% 3px no-repeat;
    height: 24px;
}
.shape-icon.line-arrow {
    border: none;
    background:
        linear-gradient(#333, #333) 0 50%/75% 2px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpolygon points='0,0 8,4 0,8' fill='%23333'/%3E%3C/svg%3E") 100% 50%/7px 7px no-repeat;
    height: 12px;
    margin-top: 10px;
}
.shape-icon.line-poly-arrow {
    border: none;
    background:
        linear-gradient(#333, #333) 30% 70%/40% 2px no-repeat,
        linear-gradient(#333, #333) 55% 45%/40% 2px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpolygon points='0,0 8,4 0,8' fill='%23333'/%3E%3C/svg%3E") 100% 50%/7px 7px no-repeat;
    height: 14px;
    margin-top: 9px;
}
.shape-icon.act-flow-solid {
    border: none;
    background:
        linear-gradient(#333, #333) 0 50%/80% 2px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpolygon points='0,0 8,4 0,8' fill='%23333'/%3E%3C/svg%3E") 100% 50%/7px 7px no-repeat;
    height: 12px;
    margin-top: 10px;
}
.shape-icon.act-flow-dash {
    border: none;
    background:
        repeating-linear-gradient(to right, #333 0, #333 4px, transparent 4px, transparent 7px) 0 50%/75% 2px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpolygon points='0,0 8,4 0,8' fill='%23333'/%3E%3C/svg%3E") 100% 50%/7px 7px no-repeat;
    height: 12px;
    margin-top: 10px;
}
.shape-icon.st-trans-solid { border: none; background: linear-gradient(#333,#333) 0 50%/80% 2px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpolygon points='0,0 8,4 0,8' fill='%23333'/%3E%3C/svg%3E") 100% 50%/7px 7px no-repeat; height: 12px; margin-top: 10px; }
.shape-icon.st-trans-dash {
    border: none;
    background:
        repeating-linear-gradient(to right, #333 0, #333 3px, transparent 3px, transparent 6px) 0 50%/75% 1px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpolygon points='0,0 8,4 0,8' fill='%23333'/%3E%3C/svg%3E") 100% 50%/7px 7px no-repeat;
    height: 12px;
    margin-top: 10px;
}
.shape-icon.cls-inherit {
    border: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpolyline points='4,20 4,14 16,14 16,8' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3Cpolygon points='12,8 16,4 20,8' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
    height: 22px;
}
.shape-icon.cls-implement {
    border: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='4,18 4,12 12,12 12,6' fill='none' stroke='%23333' stroke-width='1.5' stroke-dasharray='3 2'/%3E%3Cpolygon points='8,6 12,2 16,6' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
    height: 24px;
}
.chart-page-class .shape-icon.cls-class {
    border: 1px solid #c4956a;
    background: linear-gradient(#e8c89a 0 0) 0 0/100% 10px no-repeat, linear-gradient(#c4956a 0 0) 0 10px/100% 1px no-repeat, linear-gradient(#c4956a 0 0) 0 18px/100% 1px no-repeat, #faf0e6;
    height: 32px;
    border-radius: 1px;
}
.chart-page-class .shape-icon.cls-member {
    border: 1px solid #c4956a;
    background: #faf0e6;
    height: 28px;
    position: relative;
}
.chart-page-class .shape-icon.cls-member::before,
.chart-page-class .shape-icon.cls-member::after {
    content: '';
    position: absolute;
    left: 6px;
    right: 6px;
    height: 1px;
    background: #c4956a;
}
.chart-page-class .shape-icon.cls-member::before { top: 10px; }
.chart-page-class .shape-icon.cls-member::after { top: 18px; }
.chart-page-class .shape-icon.cls-separator {
    border: none;
    background: #c4956a;
    height: 3px;
    margin-top: 12px;
}
.chart-page-class .shape-icon.cls-interface {
    border: 1px dashed #5b8fd8;
    background: linear-gradient(#dce8f8 0 0) 0 0/100% 10px no-repeat, linear-gradient(#5b8fd8 0 0) 0 10px/100% 1px no-repeat, #f5f9ff;
    height: 32px;
}
.chart-page-class .shape-icon.cls-enum {
    border: 1px solid #c4956a;
    background: linear-gradient(#e8c89a 0 0) 0 0/100% 10px no-repeat, #faf0e6;
    height: 32px;
}
.chart-page-class .shape-icon.cls-package-open {
    border: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M3 8 L3 25 L37 25 L37 12 L16 12 L12 8 Z' fill='%23fff' stroke='%2316a34a' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
    height: 28px;
}
.chart-page-class .shape-icon.cls-package-closed {
    border: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Crect x='3' y='8' width='34' height='10' fill='%23fff' stroke='%2316a34a' stroke-width='1.5'/%3E%3Cpath d='M3 8 L14 8 L18 4 L37 4 L37 8' fill='none' stroke='%2316a34a' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
    height: 20px;
    margin-top: 6px;
}
.chart-page-class .shape-icon.cls-note {
    border: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M2 2 L24 2 L30 8 L30 22 L2 22 Z' fill='%23f0fdf4' stroke='%2316a34a' stroke-width='1.2'/%3E%3Cpath d='M24 2 L24 8 L30 8' fill='none' stroke='%2316a34a' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
    height: 24px;
}
.chart-page-class .shape-icon.cls-inherit {
    border: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpolyline points='4,20 4,14 16,14 16,8' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3Cpolygon points='12,8 16,4 20,8' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
    height: 22px;
}
.chart-page-class .shape-icon.cls-implement {
    border: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpolyline points='4,20 4,14 16,14 16,8' fill='none' stroke='%23333' stroke-width='1.5' stroke-dasharray='3 2'/%3E%3Cpolygon points='12,8 16,4 20,8' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
    height: 22px;
}
.chart-page-class .shape-icon.cls-assoc {
    border: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpolyline points='4,20 4,14 20,14 20,8' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
    height: 22px;
}
.chart-page-class .shape-icon.cls-direct-assoc {
    border: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpolyline points='4,20 4,14 20,14 20,8' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3Cpolygon points='16,8 20,10 16,12' fill='%23333'/%3E%3C/svg%3E") center/contain no-repeat;
    height: 22px;
}
.chart-page-class .shape-icon.cls-aggregation {
    border: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpolygon points='6,14 10,12 6,10' fill='none' stroke='%23333' stroke-width='1.2'/%3E%3Cpolyline points='10,12 20,12 20,8' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3Cpolyline points='4,20 4,14 10,14' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
    height: 22px;
}
.chart-page-class .shape-icon.cls-dependency {
    border: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpolyline points='4,20 4,14 20,14 20,8' fill='none' stroke='%23333' stroke-width='1.5' stroke-dasharray='3 2'/%3E%3Cpolygon points='16,8 20,10 16,12' fill='%23333'/%3E%3C/svg%3E") center/contain no-repeat;
    height: 22px;
}
.chart-page-class .shape-icon.cls-composition {
    border: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpolygon points='6,14 10,12 6,10' fill='%23333' stroke='%23333' stroke-width='1'/%3E%3Cpolyline points='10,12 20,12 20,8' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3Cpolyline points='4,20 4,14 10,14' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
    height: 22px;
}
.shape-icon.arch-dep-dash {
    border: none;
    background:
        repeating-linear-gradient(to right, #333 0, #333 3px, transparent 3px, transparent 6px) 0 50%/75% 1px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpolygon points='0,0 8,4 0,8' fill='%23333'/%3E%3C/svg%3E") 100% 50%/7px 7px no-repeat;
    height: 12px;
    margin-top: 10px;
}

/* 工具栏扩展 */
.toolbar-check {
    font-size: 12px;
    color: #374151;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    white-space: nowrap;
}

.toolbar-check:hover { border-color: #93c5fd; background: #eff6ff; }

.toolbar-select {
    height: 32px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    background: #fff;
    color: #374151;
    cursor: pointer;
}

.toolbar-select:hover { border-color: #93c5fd; }

/* 左侧样式面板 */
.style-panel {
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    max-height: 220px;
    overflow-y: auto;
}
.panel-left { display: flex; flex-direction: column; }
.panel-left-flow {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-left-flow > .panel-body#shape-library-ai,
.panel-left-flow > .panel-body.shape-library-groups {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    min-height: 0;
}

.flowchart-help-panel {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    padding: 10px 12px 12px;
    max-height: 220px;
    overflow-y: auto;
}

.flowchart-help-title {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.flowchart-help-title i { color: #1677ff; }

.flowchart-help-list {
    margin: 0;
    padding-left: 16px;
    font-size: 11px;
    line-height: 1.55;
    color: #6b7280;
}

.flowchart-help-list li { margin-bottom: 6px; }

.flowchart-help-list b { color: #374151; font-weight: 600; }

.toolbar-export-group { position: relative; }

.toolbar-export-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    z-index: 200;
    padding: 6px 0;
}

.toolbar-export-menu.hidden { display: none; }

.toolbar-export-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    text-align: left;
}

.toolbar-export-menu button:hover {
    background: #eff6ff;
    color: #1677ff;
}

.panel-left > .panel-body.shape-library-groups,
.panel-left > .panel-body#shape-library-ai {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* AI 面板 */
.ai-prompt-area textarea:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
}
button:disabled.btn-primary {
    opacity: .5;
    cursor: not-allowed;
}

button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ========== 实体属性图独立模块 ========== */
.entity-module {
    font-size: 15px;
}

.entity-module .panel-header {
    font-size: 15px;
    padding: 14px 16px;
}

.entity-module .sql-textarea {
    font-size: 14px;
    line-height: 1.6;
}

.entity-module .sql-hint {
    font-size: 13px;
}

.entity-module .btn {
    font-size: 14px;
    padding: 8px 14px;
}

/* 文件选择：勿用 hidden/display:none，否则无法弹出系统文件对话框 */
.entity-module .entity-sql-actions,
.er-unified-page .er-sql-actions {
    position: relative;
    align-items: center;
}

.entity-module .entity-sql-file-input,
.er-unified-page .entity-sql-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.entity-module label.entity-import-sql-btn,
.er-unified-page label.entity-import-sql-btn {
    cursor: pointer;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.entity-step-bar {
    position: relative;
    text-align: center;
    padding: 20px 24px 18px;
}

.entity-video-top-right {
    position: absolute;
    top: 16px;
    right: 24px;
    z-index: 2;
}

.entity-step-bar .gen-type-tabs { display: none; }

.entity-steps-center {
    justify-content: center;
    margin-bottom: 14px;
}

.entity-step-bar .step-indicator {
    font-size: 15px;
    gap: 10px;
}

.entity-step-bar .step-num {
    width: 30px;
    height: 30px;
    font-size: 14px;
}

.entity-step-bar .step-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
}

.entity-step-bar .step-arrow {
    font-size: 12px;
    color: #ccc;
}

.entity-step-hint {
    text-align: center;
    font-size: 14px;
    color: var(--primary);
    margin: 0;
    line-height: 1.6;
}

.entity-preview-panel {
    flex: 1;
    min-width: 0;
}

.entity-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
}

.entity-diagram-count {
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 6px;
}

.entity-preview-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.entity-export-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.entity-export-select,
.entity-card-export-select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
}

.entity-card-export-select {
    max-width: 72px;
    padding: 4px 6px;
    height: 30px;
}

.entity-diagram-grid {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: #f0f2f5;
    position: relative;
    min-height: 0;
}

.entity-diagram-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    width: 100%;
    flex-shrink: 0;
}

.entity-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: #fafafa;
}

.entity-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 12px;
}

.entity-card-tools {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

.entity-tool-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: rgba(19, 194, 194, .12);
    color: var(--primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background .2s;
}

.entity-tool-btn:hover {
    background: rgba(19, 194, 194, .25);
}

.entity-tool-download {
    background: var(--primary);
    color: #fff;
}

.entity-tool-download:hover {
    background: var(--primary-dark, #0fa3a3);
}

.entity-card-body {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    background: #fff;
    overflow: auto;
}

.entity-card-body svg {
    width: 100%;
    max-width: 640px;
    height: auto;
    display: block;
}

.entity-card-body svg .entity-label {
    paint-order: stroke fill;
}

.entity-card-body svg text {
    letter-spacing: 0.02em;
}

.entity-card-body .editable-text:hover {
    fill: var(--primary);
}

.entity-empty-full {
    width: 100%;
    min-height: 360px;
}

.entity-tool-single {
    background: rgba(99, 102, 241, .12);
    color: #6366f1;
}

.entity-tool-single:hover {
    background: rgba(99, 102, 241, .22);
}

.entity-diagram-card.has-custom-settings .entity-card-header {
    border-left: 3px solid #6366f1;
}

.settings-modal-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 12px;
    line-height: 1.6;
}

.settings-scope-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(99, 102, 241, .08);
    border: 1px solid rgba(99, 102, 241, .2);
    border-radius: 8px;
    font-size: 13px;
    color: #6366f1;
    margin-bottom: 12px;
}

.settings-scope-badge.hidden { display: none; }

#setting-reset-single.hidden { display: none; }

.entity-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.entity-modal.hidden { display: none; }

.entity-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(4px);
    animation: entityBackdropIn .2s ease-out;
}

@keyframes entityBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.entity-modal-dialog {
    position: relative;
    background: #fff;
    border-radius: 12px;
    width: min(520px, 92vw);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
    border: 1px solid #e5e7eb;
}

.entity-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.entity-modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.entity-modal-close {
    border: none;
    background: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #999;
}

.entity-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
}

.entity-modal-body h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 20px 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #eef2ff;
    color: var(--text);
    letter-spacing: 0.04em;
}

.entity-modal-body h4:first-of-type { margin-top: 0; }

.entity-setting-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.entity-switch-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 12px;
    cursor: pointer;
}

.entity-switch-row small {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: normal;
}

.stepper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stepper button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    background: #f5f5f5;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: #4f46e5;
    transition: background 0.15s, border-color 0.15s;
}

.stepper button:hover {
    background: #eef2ff;
    border-color: #6366f1;
}

.stepper input {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.entity-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
}

/* 文字编辑弹窗（屏幕居中） */
.entity-text-edit-modal {
    padding: 24px 16px;
}

.entity-text-edit-dialog {
    width: min(440px, 94vw);
    animation: entityModalIn .24s cubic-bezier(0.22, 1, 0.36, 1);
    margin: auto;
}

@keyframes entityModalIn {
    from { opacity: 0; transform: scale(0.94) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.entity-text-edit-header {
    padding: 18px 22px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.entity-text-edit-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}

.entity-text-edit-body {
    padding: 18px 22px 10px;
}

.entity-text-edit-footer {
    padding: 14px 22px 18px;
    background: #f9fafb;
}

.entity-text-edit-footer .btn-ghost {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
}

.entity-text-edit-footer .btn-ghost:hover {
    border-color: #9ca3af;
    background: #f3f4f6;
}

.entity-text-edit-footer .btn-primary {
    background: #1677ff;
    border-color: #1677ff;
    min-width: 96px;
}

.entity-text-edit-footer .btn-primary:hover {
    background: #4096ff;
    border-color: #4096ff;
}

.text-edit-hint {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 16px;
    line-height: 1.6;
    padding: 12px 14px;
    background: #eff6ff;
    border-radius: 8px;
    border: 1px solid #dbeafe;
}

.text-edit-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #374151;
}

.text-edit-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    transition: border-color .2s, box-shadow .2s, background .2s;
    font-family: var(--font-doc);
    color: #111827;
    background: #fff;
}

.text-edit-input::placeholder {
    color: #9ca3af;
}

.text-edit-input:hover {
    border-color: #93c5fd;
}

.text-edit-input:focus {
    outline: none;
    border-color: #1677ff;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.18);
}

.text-edit-input.text-edit-input-error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
    animation: textEditShake .35s ease;
}

@keyframes textEditShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

#text-edit-title i {
    color: #1677ff;
    margin-right: 8px;
}

body.entity-text-edit-open {
    overflow: hidden;
}

.entity-module .panel-left {
    width: 340px;
}

#entity-editor .module-sql-textarea {
    height: calc(100vh - 420px);
    min-height: 160px;
}

.er-chen-module .er-panel-left {
    width: 320px;
}

.er-chen-preview {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.er-chen-scroll {
    flex: 1;
    overflow: auto;
    position: relative;
    min-height: 0;
    background: #f8f9fb;
    background-image: radial-gradient(circle, #d8dce0 1px, transparent 1px);
    background-size: 18px 18px;
}

.er-chen-wrap {
    padding: 24px;
    min-width: min-content;
}

.er-chen-wrap.hidden {
    display: none;
}

.er-chen-scroll .canvas-empty-hint {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.er-chen-scroll .canvas-empty-hint.hidden {
    display: none;
}

.er-chen-svg {
    display: block;
    max-width: none;
    height: auto;
    min-width: 480px;
}

.er-chen-preview-sample {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.font-preview-rel {
    display: inline-block;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #333;
    transform: rotate(0deg);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    font-size: 12px;
    min-width: 36px;
    text-align: center;
}

/* Chen ER 编辑器页面（新） */
.er-editor-page .er-canvas-panel {
    display: flex !important;
    flex-direction: column;
}

.er-editor-page .er-canvas-toolbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid var(--border);
}

.er-editor-body {
    flex: 1;
    min-height: 0;
}

.er-canvas-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.er-tool-btn {
    padding: 4px 8px;
    min-width: 32px;
}

.er-tool-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.er-tool-danger:hover:not(:disabled) {
    background: #fee2e2;
    color: #dc2626;
}

.er-tool-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
}

.er-zoom-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 42px;
    text-align: center;
}

.er-canvas-viewport {
    flex: 1;
    position: relative;
    overflow: auto;
    min-height: 0;
    background: #f8f9fb;
    background-image: radial-gradient(circle, #d8dce0 1px, transparent 1px);
    background-size: 18px 18px;
}

.er-canvas-viewport .canvas-empty-hint {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.er-canvas-viewport .canvas-empty-hint.hidden {
    display: none;
}

.er-canvas-svg {
    display: block;
    min-width: 100%;
    min-height: 480px;
    cursor: grab;
}

.er-canvas-svg:active {
    cursor: grabbing;
}

.er-canvas-svg .er-node {
    cursor: move;
}

.er-canvas-svg .er-node-text {
    cursor: move;
    pointer-events: none;
    user-select: none;
}

.er-sql-error {
    margin: 8px 0;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 13px;
}

.er-sql-error.hidden {
    display: none;
}

.er-panel-subtitle {
    font-size: 13px;
    font-weight: 700;
    margin: 16px 0 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.er-prop-hint {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.er-chen-module .er-canvas-wrap,
.er-chen-module #graph-container-er {
    display: none;
}

/* ========== ER 关系图（旧表格式，保留兼容） ========== */
.er-module .er-panel-left {
    width: 320px;
}

.er-canvas-panel {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.er-canvas-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.er-canvas-toolbar .sep {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 2px;
}

.er-canvas-wrap {
    flex: 1;
    position: relative;
    min-height: 420px;
    height: 100%;
    background: #f0f2f5;
    background-image: radial-gradient(circle, #d0d0d0 1px, transparent 1px);
    background-size: 20px 20px;
}

#graph-container-er {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 420px;
}

#graph-container-er .x6-graph-scroller,
#graph-container-er .x6-graph {
    width: 100% !important;
    height: 100% !important;
}

.er-canvas-wrap .canvas-empty-hint {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: transparent;
}

.er-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
}

.er-canvas-wrap .canvas-empty-hint small {
    display: block;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 13px;
}

.er-panel-right {
    width: var(--right-w);
}

.er-tool-btn-full {
    width: 100%;
    margin-bottom: 8px;
}

.er-tools-tips {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.er-tools-tips p { margin: 0 0 4px; }

.er-shape-header {
    margin-top: 14px;
    padding-top: 12px !important;
    border-top: 1px solid var(--border);
}

.er-relation-summary {
    margin-top: 16px;
    padding: 12px;
    background: rgba(44, 82, 130, .06);
    border: 1px solid rgba(44, 82, 130, .15);
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.er-relation-summary h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #2c5282;
}

.er-relation-summary ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.6;
}

.er-relation-summary li {
    padding: 6px 0;
    border-bottom: 1px dashed rgba(0,0,0,.08);
}

.er-relation-summary li:last-child { border-bottom: none; }

.er-relation-summary em {
    color: #888;
    font-style: normal;
    font-size: 11px;
}

.er-rel-src { color: #2c5282; font-weight: 600; }
.er-rel-tgt { color: #38a169; font-weight: 600; }

.er-edit-dialog {
    max-width: 520px;
}

.er-columns-textarea {
    width: 100%;
    min-height: 140px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
}

.er-preview-title {
    display: inline-block;
}

@media (max-width: 1100px) {
    .er-panel-right { width: 260px; }
    .er-panel-left { width: 280px; }
}

@media (max-width: 900px) {
    .entity-setting-grid {
        grid-template-columns: 1fr;
    }
    .entity-card-body {
        min-height: 360px;
    }
}

/* ========== Chen ER 统一模块（专业商用 · 克制微调） ========== */
.er-unified-page {
    --er-brand: #1677ff;
    --er-brand-hover: #4096ff;
    --er-brand-soft: #e6f4ff;
    --er-brand-muted: rgba(22, 119, 255, 0.1);
    --er-surface: #ffffff;
    --er-surface-subtle: #fafafa;
    --er-surface-canvas: #f5f5f5;
    --er-border: #e8e8e8;
    --er-border-light: #f0f0f0;
    --er-text: #141414;
    --er-text-secondary: #595959;
    --er-text-tertiary: #8c8c8c;
    --er-ui-base: 14px;
    --er-ui-sm: 13px;
    --er-toolbar-h: 36px;
    --er-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.05);
    --er-radius: 8px;
    --er-radius-sm: 6px;
    --er-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --er-font-chen: "SimSun", "宋体", "Times New Roman", serif;
    font-family: var(--er-font-ui);
    font-size: var(--er-ui-base);
    color: var(--er-text);
    -webkit-font-smoothing: antialiased;
}

.er-unified-page .site-nav-unified {
    background: var(--er-surface);
    border-bottom: 1px solid var(--er-border);
    box-shadow: none;
}

.er-unified-page .site-nav-unified::before {
    opacity: 0.6;
}

.er-unified-page .site-logo-text strong {
    color: var(--primary);
}

.er-unified-page .module-editor {
    height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
}

.er-unified-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: var(--er-surface);
    border-bottom: 1px solid var(--er-border);
    flex-shrink: 0;
}

.er-unified-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.er-unified-title > i {
    font-size: 22px;
    color: var(--er-brand);
    background: var(--er-brand-soft);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: none;
}

.er-unified-title h1 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 2px;
    color: var(--er-text);
    letter-spacing: -0.01em;
}

.er-unified-title p {
    margin: 0;
    font-size: var(--er-ui-sm);
    color: var(--er-text-tertiary);
    line-height: 1.5;
    max-width: 520px;
}

.er-unified-page .er-header-actions .btn {
    border-radius: var(--er-radius-sm);
    font-size: var(--er-ui-base);
    font-weight: 500;
    padding: 6px 12px;
    border: 1px solid var(--er-border);
    color: var(--er-text-secondary);
    background: var(--er-surface);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.er-unified-page .er-header-actions .btn:hover {
    border-color: var(--er-brand);
    color: var(--er-brand);
    background: var(--er-brand-soft);
}

.er-mode-pills {
    display: flex;
    gap: 8px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
}

.er-mode-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.er-mode-pill:hover { color: var(--text); background: rgba(255,255,255,0.6); }

.er-mode-pill.active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 1px 4px rgba(15,23,42,0.08);
}

.er-unified-body {
    flex: 1;
    min-height: 0;
}

.er-unified-left {
    width: 288px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--er-border);
    background: var(--er-surface);
    min-height: 0;
}

.er-left-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    min-height: 0;
}

.er-left-section {
    margin-bottom: 0;
    padding: 0 0 18px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.er-left-section:not(:last-child) {
    margin-bottom: 18px;
    border-bottom: 1px solid var(--er-border-light);
}

.er-section-title {
    font-size: var(--er-ui-base);
    font-weight: 600;
    color: var(--er-text);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.er-section-title i {
    color: var(--er-brand);
    font-size: 15px;
}

.er-section-title small {
    font-weight: 400;
    font-size: 12px;
    color: var(--er-text-tertiary);
    margin-left: auto;
}

.er-shapes-section .er-shape-list {
    max-height: 280px;
    overflow-y: auto;
}

.er-header-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.er-inferred {
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
}

.er-unified-left .sql-textarea {
    min-height: 140px;
    max-height: 200px;
    font-size: 12px;
    font-family: "SF Mono", "Consolas", "Menlo", monospace;
    border-radius: var(--er-radius-sm);
    border: 1px solid var(--er-border);
    background: var(--er-surface-subtle);
    line-height: 1.6;
    color: var(--er-text);
}

.er-unified-left .sql-textarea:focus {
    border-color: var(--er-brand);
    box-shadow: 0 0 0 2px var(--er-brand-muted);
    background: var(--er-surface);
}

.er-attr-display-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.er-attr-hint {
    display: block;
    font-size: 12px;
    color: var(--er-text-tertiary);
    line-height: 1.5;
    margin-top: 4px;
}

.er-unified-page .module-checkbox {
    font-size: var(--er-ui-base);
    font-weight: 400;
    color: var(--er-text-secondary);
    gap: 8px;
}

.er-unified-page .module-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--er-brand);
}

.er-unified-page .module-action-row .btn {
    font-size: var(--er-ui-base);
    font-weight: 500;
}

.er-unified-page .module-action-row .btn-primary {
    background: var(--er-brand);
    border-color: var(--er-brand);
}

.er-unified-page .module-action-row .btn-primary:hover {
    background: var(--er-brand-hover);
    border-color: var(--er-brand-hover);
}

.er-canvas-viewport.dragging {
    cursor: grabbing;
    user-select: none;
}

.er-canvas-viewport.dragging .er-node,
.er-canvas-viewport.dragging .er-edge {
    pointer-events: none;
}

.er-left-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.er-left-tab {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: #fafafa;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.15s;
}

.er-left-tab.active {
    background: #fff;
    color: var(--primary);
    box-shadow: inset 0 -2px 0 var(--primary);
}

.er-left-panel {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    min-height: 0;
}

.er-left-panel.active { display: flex; flex-direction: column; gap: 10px; }

.er-shape-search {
    padding: 8px 11px;
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-sm);
    font-size: var(--er-ui-base);
    outline: none;
    background: var(--er-surface);
    color: var(--er-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.er-shape-search:focus {
    border-color: var(--er-brand);
    box-shadow: 0 0 0 2px var(--er-brand-muted);
}

.er-shape-section-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--er-text-tertiary);
    letter-spacing: 0.04em;
    margin: 8px 0 4px;
}

.er-shape-list { display: flex; flex-direction: column; gap: 2px; }

.er-shape-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--er-radius-sm);
    background: transparent;
    cursor: grab;
    font-size: var(--er-ui-base);
    font-weight: 400;
    color: var(--er-text);
    text-align: left;
    transition: background 0.12s, color 0.12s;
}

.er-shape-item:hover {
    background: var(--er-surface-subtle);
    border-color: var(--er-border-light);
    transform: none;
}

.er-shape-item.active {
    background: var(--er-brand-soft);
    border-color: transparent;
    color: var(--er-brand);
}

.er-shape-icon {
    width: 28px;
    height: 20px;
    flex-shrink: 0;
    border: 1.2px solid #333;
    background: #fff;
}

.er-shape-icon.entity { border-radius: 2px; }
.er-shape-icon.weak { border-radius: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #333; }
.er-shape-icon.attr { border-radius: 50%; width: 26px; height: 18px; }
.er-shape-icon.multi { border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #333; width: 26px; height: 18px; }
.er-shape-icon.derived { border-radius: 50%; border-style: dashed; width: 26px; height: 18px; }
.er-shape-icon.rel { transform: rotate(45deg); width: 16px; height: 16px; margin: 0 6px; }
.er-shape-icon.line { border: none; background: linear-gradient(#333,#333) center/100% 2px no-repeat; height: 2px; }

.er-file-btn { width: 100%; justify-content: flex-start; gap: 8px; }

.er-unified-canvas {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--er-surface-canvas);
    padding: 0;
    min-height: 0;
}

.er-unified-canvas .canvas-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 16px;
    margin: 0;
    background: var(--er-surface);
    border: none;
    border-bottom: 1px solid var(--er-border);
    border-radius: 0;
    box-shadow: none;
}

.er-canvas-tools-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.er-canvas-tools-row-secondary {
    padding-top: 2px;
    border-top: 1px dashed var(--er-border);
}

.er-canvas-tools-left,
.er-canvas-tools-center,
.er-canvas-tools-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* 画布工具栏：分段式幽灵按钮 */
.er-unified-page .tb-btn {
    min-width: var(--er-toolbar-h);
    height: var(--er-toolbar-h);
    border: 1px solid transparent;
    border-radius: var(--er-radius-sm);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    color: var(--er-text-secondary);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    font-size: var(--er-ui-base);
    font-weight: 500;
}

.er-unified-page .tb-btn i {
    font-size: 15px;
    line-height: 1;
}

.er-unified-page .tb-btn-label span {
    font-size: var(--er-ui-base);
    line-height: 1;
    white-space: nowrap;
    font-weight: 500;
}

.er-unified-page .er-tool-btn-label {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    min-height: var(--er-toolbar-h) !important;
    height: var(--er-toolbar-h) !important;
    padding: 0 10px !important;
    font-size: var(--er-ui-base) !important;
    font-weight: 500 !important;
    border: 1px solid var(--er-border) !important;
    background: var(--er-surface) !important;
    color: var(--er-text-secondary) !important;
    border-radius: var(--er-radius-sm) !important;
}

.er-unified-page .er-tool-btn-label i {
    font-size: 14px;
}

.er-unified-page .er-tool-btn-label span {
    font-size: var(--er-ui-base);
    white-space: nowrap;
    font-weight: 500;
}

.er-canvas-toolbar {
    flex-wrap: nowrap;
    gap: 0;
}

.er-unified-page .tb-btn:hover,
.er-unified-page .er-tool-btn-label:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: var(--er-border) !important;
    color: var(--er-text) !important;
    box-shadow: none;
}

.er-unified-page .tb-btn.active {
    background: var(--er-brand);
    border-color: var(--er-brand);
    color: #fff;
    box-shadow: none;
}

.er-unified-page .tb-btn.active i {
    color: #fff;
}

.er-unified-page .er-tool-btn:disabled,
.er-unified-page .er-tool-btn-label:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.er-unified-page .er-tool-danger {
    border-color: #ffccc7 !important;
    background: #fff2f0 !important;
    color: #cf1322 !important;
}

.er-unified-page .er-tool-danger:hover:not(:disabled) {
    border-color: #ffa39e !important;
    background: #fff1f0 !important;
    color: #a8071a !important;
}

.er-tool-sep {
    width: 1px;
    height: 20px;
    background: var(--er-border);
    margin: 0 6px;
}

.er-unified-page .er-zoom-label {
    min-width: 44px;
    text-align: center;
    font-size: var(--er-ui-base);
    font-weight: 500;
    color: var(--er-text-secondary);
    font-variant-numeric: tabular-nums;
}

.er-unified-page .tb-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--er-ui-base);
    font-weight: 400;
    color: var(--er-text-secondary);
    cursor: pointer;
    margin: 0 4px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
}

.er-unified-page .tb-check:hover {
    color: var(--er-text);
    background: transparent;
}

.er-unified-page .tb-check input {
    width: 15px;
    height: 15px;
    accent-color: var(--er-brand);
}

.er-unified-page .entity-export-select {
    height: var(--er-toolbar-h);
    padding: 0 10px;
    font-size: var(--er-ui-base);
    font-weight: 400;
    color: var(--er-text);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-sm);
    background: var(--er-surface);
}

.er-unified-page .er-unified-canvas #btn-export {
    height: var(--er-toolbar-h);
    padding: 0 14px;
    font-size: var(--er-ui-base);
    font-weight: 500;
}

.er-unified-canvas .canvas-viewport {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
    margin: 12px;
    background: #fff;
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius);
    box-shadow: var(--er-shadow-card);
}

.er-unified-canvas .canvas-viewport.is-editing-text {
    cursor: text;
}

.er-diagram-svg {
    width: 100%;
    height: 100%;
    display: block;
    cursor: default;
}

.er-diagram-svg.hidden { display: none; }

.canvas-viewport.mode-pan { cursor: grab; }
.canvas-viewport.mode-pan.dragging { cursor: grabbing; }
.canvas-viewport.mode-connector { cursor: crosshair; }

.connect-hint {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    background: var(--er-brand);
    color: #fff;
    border-radius: 6px;
    font-size: var(--er-ui-base);
    font-weight: 500;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(22, 119, 255, 0.25);
}

.connect-hint.hidden { display: none; }

.er-unified-canvas .canvas-empty-hint {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 24px;
}

.er-unified-canvas .canvas-empty-hint > i {
    font-size: 52px;
    color: var(--er-brand);
    opacity: 0.25;
}

.er-unified-canvas .canvas-empty-hint p {
    font-size: 16px;
    font-weight: 600;
    color: var(--er-text);
    margin: 0;
}

.er-unified-canvas .canvas-empty-hint small {
    font-size: var(--er-ui-base);
    line-height: 1.65;
    max-width: 340px;
    color: var(--er-text-tertiary);
}

.er-unified-right {
    width: 272px;
    background: var(--er-surface);
    border-left: 1px solid var(--er-border);
}

.er-unified-page .er-unified-right .panel-header {
    background: var(--er-surface);
    border-bottom: 1px solid var(--er-border);
    font-size: var(--er-ui-base);
    font-weight: 600;
    color: var(--er-text);
    padding: 14px 16px;
}

.er-unified-page .er-unified-right .panel-body {
    padding: 14px 16px 20px;
}

.er-unified-page .font-preview-panel {
    background: var(--er-surface-subtle);
    border: 1px solid var(--er-border-light);
    border-radius: var(--er-radius-sm);
    padding: 12px;
    margin-bottom: 14px;
    box-shadow: none;
}

.er-unified-page .font-preview-panel h5 {
    font-size: 12px;
    font-weight: 600;
    color: var(--er-text-tertiary);
    margin-bottom: 8px;
    text-transform: none;
    letter-spacing: 0;
}

.er-unified-page .control-group label {
    font-size: var(--er-ui-sm);
    font-weight: 500;
    color: var(--er-text-secondary);
}

.er-unified-page .control-group input[type="text"],
.er-unified-page .control-group input[type="number"],
.er-unified-page .control-group select {
    border-radius: var(--er-radius-sm);
    border: 1px solid var(--er-border);
    font-size: var(--er-ui-base);
    padding: 7px 10px;
    color: var(--er-text);
}

.er-panel-subtitle {
    font-size: var(--er-ui-sm);
    font-weight: 600;
    color: var(--er-text-tertiary);
    margin: 16px 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--er-border-light);
    text-transform: none;
    letter-spacing: 0;
}

.er-unified-page .er-tools-tips {
    margin-top: 14px;
    padding: 12px;
    background: var(--er-surface-subtle);
    border: 1px solid var(--er-border-light);
    border-radius: var(--er-radius-sm);
    font-size: 12px;
    line-height: 1.65;
    color: var(--er-text-secondary);
}

.er-unified-page .er-tools-tips b {
    color: var(--er-text);
    font-size: 12px;
    font-weight: 600;
}

.er-prop-empty {
    font-size: var(--er-ui-base);
    color: var(--er-text-secondary);
    padding: 16px 12px;
    line-height: 1.6;
    text-align: center;
    background: var(--er-surface-subtle);
    border: 1px dashed var(--er-border);
    border-radius: var(--er-radius-sm);
}

.er-prop-empty i {
    display: block;
    font-size: 24px;
    color: var(--er-brand);
    opacity: 0.45;
    margin-bottom: 8px;
}

.er-prop-empty p {
    margin: 0 0 6px;
    font-weight: 600;
    font-size: var(--er-ui-base);
    color: var(--er-text);
}

.er-prop-empty small {
    font-size: 12px;
    color: var(--er-text-tertiary);
}

.props-body.hidden { display: none; }

.er-unified-page .er-unified-right .tools-panel {
    background: transparent;
}

.er-chen-preview-sample {
    font-family: var(--er-font-chen);
}

.er-unified-page .control-group input:focus,
.er-unified-page .control-group select:focus {
    border-color: var(--er-brand);
    box-shadow: 0 0 0 2px var(--er-brand-muted);
    outline: none;
}

.inline-editor {
    position: fixed;
    z-index: 2000;
    padding: 4px 10px;
    border: 2px solid var(--er-brand, var(--primary));
    border-radius: 4px;
    text-align: center;
    font-family: var(--er-font-chen, SimSun, 宋体, serif);
    outline: none;
    background: #fff;
    box-shadow: 0 4px 16px rgba(22, 119, 255, 0.15);
    color: var(--er-text, #141414);
}

.inline-editor.hidden { display: none; }

.er-unified-canvas .canvas-empty-hint.hidden { display: none; }

/* SVG 画布内样式 */
.er-node.selected .node-shape,
.er-edge.selected .edge-line { filter: drop-shadow(0 0 2px rgba(22, 119, 255, 0.35)); }

.edge-line { stroke: #111; stroke-width: 1.2; }

.er-edge.selected .edge-line {
    stroke: var(--er-brand, #1677ff);
    stroke-width: 2;
}

.link-preview-line {
    stroke: var(--er-brand, #1677ff);
    stroke-width: 2;
    pointer-events: none;
}

.er-card-editor {
    position: fixed;
    z-index: 10001;
    background: var(--er-surface, #fff);
    border: 1px solid var(--er-border, var(--border));
    border-radius: var(--er-radius, 10px);
    padding: 14px 16px;
    box-shadow: var(--er-shadow-md, 0 8px 24px rgba(0,0,0,0.12));
    min-width: 220px;
}

.er-card-editor.hidden { display: none; }

.er-card-editor-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
}

.er-card-editor label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    font-size: 12px;
    margin-bottom: 8px;
}

.er-card-editor input,
.er-card-editor select {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
}

.er-card-editor-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.canvas-viewport .inline-editor {
    position: absolute;
    z-index: 100;
}

.selection-box {
    fill: none;
    stroke: var(--er-brand, #1677ff);
    stroke-width: 1;
    stroke-dasharray: 4 3;
    pointer-events: none;
}

.resize-handle {
    fill: #fff;
    stroke: var(--er-brand, #1677ff);
    stroke-width: 1;
    cursor: nwse-resize;
}

.snap-guide {
    stroke: #f59e0b;
    stroke-width: 1;
    stroke-dasharray: 4 4;
    pointer-events: none;
}

.card-label { fill: #111; font-family: var(--er-font-chen, SimSun, 宋体, serif); }

.er-node .node-shape { pointer-events: all; }
.er-node .node-text { pointer-events: none; user-select: none; }

.er-unified-page .btn-primary {
    background: var(--er-brand);
    border-color: var(--er-brand);
}

.er-unified-page .btn-primary:hover {
    background: var(--er-brand-hover);
    border-color: var(--er-brand-hover);
    color: #fff;
}

.er-unified-page #btn-export.btn-er-export {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(13, 148, 136, 0.38);
}

.er-unified-page #btn-export.btn-er-export:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.48);
    color: #fff;
}

.er-unified-page #btn-export.btn-er-export:disabled {
    background: #cbd5e1;
    box-shadow: none;
    color: #fff;
    opacity: 1;
}

.er-unified-page #btn-export.btn-dark {
    background: var(--er-text);
    border-color: var(--er-text);
    color: #fff;
}

.er-unified-page #btn-export.btn-dark:hover {
    background: #434343;
    border-color: #434343;
    color: #fff;
}

@media (max-width: 1100px) {
    .er-unified-left { width: 240px; }
    .er-unified-right { width: 240px; }
    .er-unified-header { flex-direction: column; align-items: flex-start; }
}

/* ========== 用例图设计器 ========== */
.chart-page-usecase {
    --font-uc: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
    font-family: var(--font-uc);
}

.chart-page-usecase .editor-toolbar,
.chart-page-usecase .panel-left .panel-header,
.chart-page-usecase .shape-item span,
.chart-page-usecase .tb-btn,
.chart-page-usecase .tb-style-select {
    font-family: var(--font-uc);
}

.chart-page-usecase .ai-editor-toolbar {
    background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 55%, #fff 100%);
    border-bottom: 1px solid #c7d2fe;
}

.chart-page-usecase .tb-btn {
    border-color: #c7d2fe;
    background: linear-gradient(180deg, #fff 0%, #f5f3ff 100%);
    color: #3730a3;
    font-weight: 600;
}

.chart-page-usecase .tb-btn i {
    color: #4f46e5;
}

.chart-page-usecase .tb-btn:hover {
    border-color: #818cf8;
    background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
    color: #312e81;
}

.chart-page-usecase .tb-btn.tb-btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-color: #4338ca;
    color: #fff;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
}

.chart-page-usecase .tb-btn.tb-btn-primary i {
    color: #fff;
}

.chart-page-usecase .toolbar-style-group {
    padding: 4px 8px;
    border-radius: 8px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fbbf24;
    gap: 6px;
}

.chart-page-usecase .toolbar-style-group .toolbar-group-label {
    color: #b45309;
    font-weight: 700;
}

.chart-page-usecase .tb-style-select {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #92400e;
    font-weight: 600;
}

.chart-page-usecase .tb-style-color {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.chart-page-usecase #usecase-toolbar-group {
    padding: 4px 8px;
    border-radius: 8px;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #34d399;
}

.chart-page-usecase #usecase-style-select {
    border-color: #10b981;
    background: #ecfdf5;
    color: #047857;
    font-weight: 600;
    max-width: 110px;
}

.chart-page-usecase #ai-connect-polyline {
    display: none;
}

.chart-page-usecase .shape-icon.actor-green {
    border: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50'%3E%3Ccircle cx='20' cy='8' r='6' fill='none' stroke='%2316a34a' stroke-width='2'/%3E%3Cline x1='20' y1='14' x2='20' y2='32' stroke='%2316a34a' stroke-width='2'/%3E%3Cline x1='8' y1='22' x2='32' y2='22' stroke='%2316a34a' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.chart-page-usecase .shape-icon.usecase-blue {
    border: 2px solid #2563eb;
    border-radius: 50%;
    background: #eff6ff;
}

.chart-page-usecase .shape-icon.subsystem {
    border: 2px solid #16a34a;
    border-radius: 4px;
    background: transparent;
}

.chart-page-usecase .shape-icon.uc-line-solid {
    border: none;
    height: 3px;
    background: #2563eb;
    margin-top: 12px;
}

.chart-page-usecase .shape-icon.uc-line-solid-arrow {
    border: none;
    height: 0;
    margin-top: 12px;
    background: none;
    position: relative;
}

.chart-page-usecase .shape-icon.uc-line-solid-arrow::before {
    content: '';
    position: absolute;
    left: 0;
    right: 8px;
    top: 10px;
    height: 3px;
    background: #2563eb;
}

.chart-page-usecase .shape-icon.uc-line-solid-arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: 6px;
    border: 5px solid transparent;
    border-left-color: #2563eb;
}

.chart-page-usecase .shape-icon.uc-line-dash-arrow,
.chart-page-usecase .shape-icon.uc-line-include,
.chart-page-usecase .shape-icon.uc-line-extend,
.chart-page-usecase .shape-icon.uc-line-dashed {
    border: none;
    height: 0;
    margin-top: 12px;
    background: none;
    position: relative;
}

.chart-page-usecase .shape-icon.uc-line-dash-arrow::before,
.chart-page-usecase .shape-icon.uc-line-include::before,
.chart-page-usecase .shape-icon.uc-line-extend::before,
.chart-page-usecase .shape-icon.uc-line-dashed::before {
    content: '';
    position: absolute;
    left: 0;
    right: 8px;
    top: 10px;
    height: 0;
    border-top: 2px dashed #2563eb;
}

.chart-page-usecase .shape-icon.uc-line-dash-arrow::after,
.chart-page-usecase .shape-icon.uc-line-include::after,
.chart-page-usecase .shape-icon.uc-line-extend::after {
    content: '';
    position: absolute;
    right: 0;
    top: 6px;
    border: 5px solid transparent;
    border-left-color: #2563eb;
}