/* =====================================================================
 * 50 · ER 图与 UML 类图怎么画 —— 独立设计
 * 视觉原型：工程蓝图网格 + DSL 编辑器 + 左侧符号速查 + 右侧 SVG 画布。
 * 网格用 CSS 渐变绘制，全页零位图请求；与前九页的版式均不同。
 * ===================================================================== */
.p50 {
    --g5c-bg: #f7f9ff;
    --g5c-bg2: #e9eeff;
    --g5c-surface: #ffffff;
    --g5c-surface2: #f5f7ff;
    --g5c-ink: #1a2244;
    --g5c-ink2: #4e5878;
    --g5c-muted: #8b94b3;
    --g5c-line: #dde3f5;
    --g5c-line2: #c2ccec;
    --g5c-accent: #3a49c9;
    --g5c-accent2: #0d7f8c;
    --g5c-on: #ffffff;
    --g5d-bg: #0e1120;
    --g5d-bg2: #161b32;
    --g5d-surface: #171d36;
    --g5d-surface2: #1f2643;
    --g5d-ink: #eceffd;
    --g5d-ink2: #b7bfdc;
    --g5d-muted: #838db3;
    --g5d-line: #2c3459;
    --g5d-line2: #3c4775;
    --g5d-accent: #9aa6ff;
    --g5d-accent2: #5ecbd3;
    --g5d-on: #0e1120;
    --g5-h: "JetBrains Mono", "SFMono-Regular", Consolas, "Microsoft YaHei", monospace;
    --g5-body: 14.5px;
    --g5-lh: 1.8;
    --g5-r: 8px;
    background-image: linear-gradient(rgba(58, 73, 201, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58, 73, 201, .045) 1px, transparent 1px);
    background-size: 24px 24px;
}
:root[data-theme="dark"] .p50 {
    background-image: linear-gradient(rgba(154, 166, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(154, 166, 255, .05) 1px, transparent 1px);
}

/* ---------- 首屏 ---------- */
.eug-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; padding: 14px 0 28px; }
.eug-kicker { font-family: var(--g5-m); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; color: var(--g5-accent); margin-bottom: 18px; }
.eug-hero h1 { font-size: clamp(2.05rem, 4.1vw, 3.05rem); line-height: 1.2; letter-spacing: -.045em; margin: 0 0 17px; }
.eug-hero h1 em { font-style: normal; color: var(--g5-accent); }
.eug-lede { max-width: 620px; font-size: 15.2px; line-height: 1.92; color: var(--g5-ink2); margin-bottom: 20px; }
.eug-lede b { color: var(--g5-ink); }
.eug-facts { display: grid; gap: 9px; max-width: 540px; }
.eug-facts > div { display: flex; align-items: baseline; gap: 13px; padding: 7px 0 7px 13px; border-left: 2px solid var(--g5-accent); }
.eug-facts b { font-size: 13.3px; white-space: nowrap; }
.eug-facts small { color: var(--g5-muted); font-size: 12.2px; line-height: 1.7; }

.eug-editor { background: var(--g5-surface); border: 1px solid var(--g5-line2); border-radius: var(--g5-r); padding: 16px; box-shadow: var(--g5-shadow); }
.eug-editor-hd { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 11px; border-bottom: 2px solid var(--g5-accent); margin-bottom: 12px; }
.eug-editor-hd b { font-size: 14.5px; }
.eug-editor-hd span { font-family: var(--g5-m); font-size: 10.8px; color: var(--g5-muted); }
.eug-editor textarea { font-family: var(--g5-m); font-size: 12.2px; line-height: 1.75; min-height: 210px; }
.eug-editor-ft { display: flex; gap: 9px; margin-top: 13px; flex-wrap: wrap; }
.eug-msg { margin-top: 12px; padding: 9px 12px; border-radius: 6px; background: var(--g5-okbg); color: var(--g5-ok); font-size: 12.2px; line-height: 1.75; }
.eug-msg.is-err { background: var(--g5-badbg); color: var(--g5-bad); }

/* ---------- 章节 ---------- */
.eug-sec-hd { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; border-bottom: 1px solid var(--g5-line); margin-bottom: 13px; }
.eug-sec-hd > i { font-family: var(--g5-m); font-style: normal; font-size: 10.3px; font-weight: 700; color: var(--g5-accent); background: var(--g5-bg2); padding: 3px 6px; border-radius: 4px; }
.eug-sec-hd h2 { font-size: 15.5px; }
.eug-sec-hd > span { margin-left: auto; font-size: 11.4px; color: var(--g5-muted); }
.eug-placeholder { margin: 0; font-size: 12.6px; line-height: 1.9; color: var(--g5-muted); }

/* ---------- 主体双栏 ---------- */
.eug-body { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 20px; align-items: start; }
.eug-symbols { background: var(--g5-surface); border: 1px solid var(--g5-line2); border-radius: var(--g5-r); padding: 16px 15px 18px; box-shadow: var(--g5-shadow); }
.eug-sym-tabs { display: flex; gap: 6px; margin-bottom: 13px; }
.eug-sym-tabs button { flex: 1; border: 1px solid var(--g5-line2); border-radius: 6px; background: var(--g5-surface2); color: var(--g5-ink2); font-size: 11.8px; font-weight: 700; padding: 6px 4px; }
.eug-sym-tabs button.is-on { background: var(--g5-accent); border-color: var(--g5-accent); color: #fff; }
.eug-sym-body { display: grid; gap: 7px; }
.eug-sym-row { display: grid; grid-template-columns: 62px 1fr; gap: 9px; align-items: start; padding: 7px 9px; background: var(--g5-surface2); border: 1px solid var(--g5-line); border-radius: 6px; font-size: 11.8px; line-height: 1.7; }
.eug-sym-row code { font-size: 11px; color: var(--g5-accent); background: transparent; padding: 0; word-break: break-all; }
.eug-sym-row span { color: var(--g5-ink2); }
.eug-cardinal { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--g5-line); }
.eug-cardinal label { display: block; margin-bottom: 11px; }
.eug-cardinal label > span { display: block; font-size: 11.5px; font-weight: 700; color: var(--g5-ink2); margin-bottom: 5px; }
.eug-cardinal select { font-family: var(--g5-m); font-size: 12.4px; }
.eug-switch { display: flex !important; align-items: center; gap: 8px; }
.eug-switch input { width: 15px; height: 15px; }
.eug-switch > span { margin: 0 !important; font-weight: 650 !important; }
.eug-card-out { padding: 11px 12px; border-radius: 7px; background: var(--g5-infobg); color: var(--g5-info); font-size: 12px; line-height: 1.85; }
.eug-card-out b { font-family: var(--g5-m); color: inherit; }

.eug-main { display: grid; gap: 20px; min-width: 0; }
.eug-canvas-wrap, .eug-checks-wrap, .eug-batch {
    background: var(--g5-surface); border: 1px solid var(--g5-line2);
    border-radius: var(--g5-r); padding: 18px 20px 20px; box-shadow: var(--g5-shadow);
}
.eug-canvas { min-height: 240px; padding: 14px; border: 1px dashed var(--g5-line2); border-radius: 6px; overflow: auto;
    background-color: var(--g5-surface2);
    background-image: linear-gradient(rgba(58, 73, 201, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58, 73, 201, .06) 1px, transparent 1px);
    background-size: 20px 20px;
}
.eug-canvas svg { display: block; max-width: 100%; height: auto; }
.eug-checks { display: grid; gap: 8px; }
.eug-check-item { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; padding: 9px 11px; border-left: 3px solid var(--g5-ok); background: var(--g5-surface2); border-radius: 0 6px 6px 0; font-size: 12.3px; line-height: 1.8; color: var(--g5-ink2); }
.eug-check-item.is-warn { border-left-color: var(--g5-warn); }
.eug-check-item.is-bad { border-left-color: var(--g5-bad); }
.eug-check-item > i { font-family: var(--g5-m); font-style: normal; font-weight: 800; color: var(--g5-accent); }
.eug-check-item > div b { display: block; font-size: 12.5px; }
.eug-check-item > div small { display: block; color: var(--g5-muted); font-size: 11.3px; }

/* ---------- 批量 ---------- */
.eug-batch { margin-top: 22px; }
.eug-hint { font-size: 12.4px; line-height: 1.85; color: var(--g5-ink2); margin: 0 0 10px; }
.eug-batch textarea { font-family: var(--g5-m); font-size: 12.2px; line-height: 1.75; }
.eug-clean { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 11px; border: 1px dashed var(--g5-line2); border-radius: 6px; background: var(--g5-surface2); }
.eug-clean > b { font-size: 11.7px; color: var(--g5-ink2); }
.g5-check { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--g5-line); border-radius: 5px; background: var(--g5-surface); color: var(--g5-ink2); font-size: 11.3px; font-weight: 650; cursor: pointer; user-select: none; }
.g5-check input { width: 14px; height: 14px; margin: 0; }
.g5-check.is-on { border-color: var(--g5-accent); color: var(--g5-accent); background: var(--g5-bg2); }
#eugPreview { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.8px; }
.eug-table { width: 100%; min-width: 540px; font-size: 12.5px; margin-top: 16px; }
.eug-table th { text-align: left; padding: 9px 10px; font-size: 11.2px; color: var(--g5-muted); border-bottom: 1px solid var(--g5-line2); }
.eug-table td { padding: 10px; border-bottom: 1px solid var(--g5-line); color: var(--g5-ink2); line-height: 1.75; }
.eug-table tr:last-child td { border-bottom: 0; }
.eug-err { margin-top: 12px; padding: 9px 12px; border-radius: 6px; background: var(--g5-badbg); color: var(--g5-bad); font-size: 12.4px; }

/* ---------- 阅读区 ---------- */
.eug-read { margin-top: 40px; padding: 26px 30px 8px; border-top: 2px solid var(--g5-ink); background: var(--g5-surface); }
.eug-read h2 { font-size: 20px; margin-bottom: 16px; }
.eug-read p { font-size: 14px; line-height: 2.05; color: var(--g5-ink2); margin-bottom: 15px; }
.eug-read b { color: var(--g5-accent); }

@media (max-width: 1000px) {
    .eug-hero, .eug-body { grid-template-columns: 1fr; }
    .eug-symbols { position: static; }
}
@media (max-width: 680px) {
    .eug-canvas-wrap, .eug-checks-wrap, .eug-batch { padding: 16px 14px 18px; }
    .eug-read { padding: 22px 16px 6px; }
}