/* ⚠️ 勿删（2026-08-27 用户要求）：斜纹背景已隐藏、底色改为与主页一致 var(--paper)（#FAF9F6），以下规则保留斜纹背景代码供恢复。
 * 恢复完整桌面背景：把下方 html 规则改为
 *   html{height:100%;overflow:hidden;background:#f0ede9 repeating-linear-gradient(-45deg,rgba(165,20,30,.30) 0 20px,rgba(165,20,30,.30) 20px 40px,rgba(15,15,15,.26) 40px 60px,rgba(15,15,15,.26) 60px 80px);}
 * 其余属性（height/overflow）保持有效。 */
html{min-height:100%;overflow-y:auto;background:var(--paper);}
body{margin:0;padding:calc(16px + env(safe-area-inset-top,0px)) 0 calc(16px + env(safe-area-inset-bottom,0px) + 24px);min-height:100%;height:auto;box-sizing:border-box;overflow:visible;background:transparent;}
.shell-wrap{margin:0 auto;}
/* 隐藏页面滚动条（内容仍可滚轮/触摸拖动）：standalone 演示页保持纯白简洁 */
html,body{scrollbar-width:none;-ms-overflow-style:none;}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0;}
/* ============================================================================
 * EVA 戏剧字体 — 面板样式（作用域限定 .eva-panel，不复制上游视觉资产）
 * 自研实现；禁止商业 Fontworks EVA/Matisse 字体；禁止第三方统计。
 * 响应式：桌面 1440 / 1280 / 1024，移动 430 / 390。
 * 单列居中（桌面/移动预览在上、控件在下）；白化融入页面，不 overlay 深色卡。
 *
 * 最终态 = EVA18(UI 重排) + EVA20(比例锁定变量与分段按钮) + EVA21(移动端比例强锁)
 *          + EVA25(白色极简单列) + EVA26B(画布宽度锚定、横向占满内容区)。
 *   - 预览框 .eva-canvas-wrap 在「桌面 / 移动 / 横屏矮视口」全部按 --eva-preview-ratio
 *     锁定显示宽高比，canvas(#evaPreview) 填满无黑边、不变形。
 *   - EVA26B：桌面/移动竖屏画布改为「宽度锚定」——width:100% + aspect-ratio（高=宽/比例），
 *     workspace 不再限宽(去 980px)，preview 自然高度、页面滚动浏览；横屏矮视口仍高度锚定。
 *   - --eva-preview-ratio 默认 4 / 3，由 JS(applyPreviewRatio) 按所选比例写入
 *     .eva-canvas-wrap 的 inline style（覆盖此处默认值）。
 *   - 保留 F3/F8/F9 横屏矮视口历史修复；F13/HY3-FIX1 固定高模型被 EVA26B 取代。
 * ========================================================================== */
.eva-panel {
  /* EVA25：白色极简单列——面板彻底白化融入页面（--paper #FAF9F6）。
     深底 token 全部改为透明/浅色；暗字改为深字；保留 Teal/Fuchsia 强调。 */
  --eva-bg: #FAF9F6;        /* 页面背景色（用于 sticky 预览条/移动端不透明底，避免控件透出） */
  --eva-panel: transparent;  /* 面板主体融入页面，不单独 overlay 深色卡 */
  --eva-panel2: #F4F3EF;     /* 卡片极淡结构填充（仅微弱区分，非深色浮层） */
  --eva-line: #E4E2DC;       /* 浅灰边框/分隔线 */
  --eva-text: #1A1D23;       /* 深色文字 */
  --eva-muted: #6B7280;      /* 次要文字（中灰） */
  --eva-accent: #1C4D4D;     /* Transformative Teal（2026 年度色，深蓝绿）—— 主强调/按钮/active 底，配白字 */
  --eva-accent2: #C8388F;    /* 高能量点缀 Electric Fuchsia（电光洋红）—— hover 边框/focus-visible/active 徽标/锁徽标小面积呼应 */
  --eva-ok: #1C7C4A;         /* 适配浅底：加深绿 */
  --eva-warn: #B26A00;       /* 适配浅底：加深琥珀 */
  --eva-bad: #C0392B;        /* 适配浅底：加深红 */
  --eva-radius: 10px;
  --eva-radius-sm: 8px;
  --eva-ctrl: 380px;
  --eva-touch: 40px;         /* §D：触控目标下限 */
  --eva-canvas-bg: #FAF9F6;  /* 2026-08-28：画布 letterbox 固定纸色（不随主题；与黑海报内容区分） */
  /* 以下三项是布局参数，与主题无关，故定义在默认块内（2026-10-02 修正：
     它们此前落在块外被解析器丢弃，导致 EVA 面板的 section 内边距/组距/预览比例全部失效）。 */
  --eva-pad: 12px;           /* §D：section 内边距 */
  --eva-gap: 16px;           /* §D：组距 */
  /* EVA20：预览框默认宽高比（4:3）；JS 按用户选择覆盖为 inline 变量。 */
  --eva-preview-ratio: 4 / 3;
}
/* 2026-08-28：暗色主题（页面壳层暗色下 EVA 面板跟随；画布 letterbox 保持纸色） */
[data-theme="dark"] .eva-panel{
  --eva-bg:#15171C;
  --eva-panel2:#1E2127;
  --eva-line:#2A2F38;
  --eva-text:#ECEEF2;
  --eva-muted:#A9AFBB;
  --eva-accent:#3FA88C;
  --eva-accent2:#D65BA8;
  --eva-ok:#3DBE7C;
  --eva-warn:#D98A54;
  --eva-bad:#E0604F;
}

/* 全局尊重 prefers-reduced-motion：仅保留「手风琴过渡 / sticky 预览尺寸过渡 /
   按钮反馈 / preset 激活」四类动画（N13），其余一律无动画。此处统一禁用，
   仅在 no-preference 下由具体规则重新启用过渡。 */
.eva-panel * { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  .eva-panel * { transition: none !important; animation: none !important; }
}

/* EVA25+EVA26B：单列居中——预览（模式段+画布+导出）在上、控制面板在下。
   放弃双列 grid；EVA26B：去掉 980px 上限（ToolHub 内容区 .tool-panel/.shell-main 本身无
   max-width，980 上限曾把画布压成 ~500px 窄条），workspace 占满内容区，仅靠 padding 留白。 */
.eva-workspace {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  width: 100%;
  max-width: none;              /* EVA26B：不再限宽，画布横向占满内容区 */
  margin: 20px auto 0;
  padding: 0 16px;
}

/* ---------- 桌面大屏：左预览 → 右手风琴两列（宽屏动态适配）----------
   普通桌面（>1024 宽 + >560 高）两列；窗口变窄自动回落到手机单列。 */
@media (min-width: 1025px) and (min-height: 561px) {
  .eva-workspace {
    display: grid;
    grid-template-columns: minmax(360px, 55%) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    padding: 0 24px;
  }
  .eva-preview { position: sticky; top: 12px; }
  .eva-panel .eva-controls { min-width: 0; max-height: none; overflow: visible; }
}

/* ---------- 预览优先区（单列居中，自然浏览，不再 sticky） ---------- */
.eva-preview {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* EVA18：画布 / 导出按钮水平居中，修复「画布未居中」 */
  align-items: center;
  gap: 14px;                  /* EVA18：统一节奏，修复「间距不均」 */
  padding: 4px 0;             /* EVA18 */
  min-width: 0;
}
.eva-mode-switch {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--eva-line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--eva-panel);
}
.eva-seg {
  appearance: none; border: 0; background: transparent; color: var(--eva-muted);
  padding: 10px 22px; font-size: 14px; font-weight: 700; letter-spacing: 1px; cursor: pointer;
  font-family: inherit; min-height: var(--eva-touch);
}
.eva-seg + .eva-seg { border-left: 1px solid var(--eva-line); }
/* HY3-FIX9 P2：激活态与锁定态明确区分——
   激活 = 实心强调色底 + 白字（清晰高亮）；锁定 = 灰、半透明、锁图标（不可误判为激活）。
   二者绝不共用高亮观感；即使某段同时带 active+locked（如锁定中的 CLASSIC 恰为当前模式），
   也优先呈现锁定外观，避免「看似已激活实则可锁定」的混淆。 */
.eva-seg.active { background: var(--eva-accent); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.eva-seg.locked { opacity: .5; cursor: not-allowed; }
.eva-seg.locked::after { content: " 🔒"; }
.eva-seg.active.locked { background: transparent; color: var(--eva-muted); opacity: .5; box-shadow: none; }
.eva-seg:focus-visible { outline: 2px solid var(--eva-accent2); outline-offset: -2px; }

/* EVA18+EVA20+EVA21：预览框基础态——
   2026-08-27 变更（用户反馈「比例按钮按了窗口会跳」）：预览框改固定 4:3（不再随所选比例
   变化），canvas 在框内按自身比例 object-fit:contain 居中（letterbox 留黑边，wrap 黑底视觉无感）。
   原 aspect-ratio: var(--eva-preview-ratio) 框高随比例变化是「窗口跳」根因（替换比例时预览框
   高度突变 → 页面内容整体弹跳）。
   各断点 (.eva-canvas-wrap) 在下方媒体查询中叠加「宽度 / flex / max 约束」实现强锁。 */
.eva-canvas-wrap {
  /* 容器照搬上游（document.less .output-box：canvas max-width:100%，无比例锁定/letterbox）：
     canvas 自身比例（RATIO_DIMS 随所选比例变化）由 height:auto 自然推导，容器不干预。
     保留 plan 背景（canvas 绘制有 bg，transparent 时用 wrap 兜底）+ 圆角（Owner 要求）。 */
  position: relative; width: 100%; background: var(--eva-canvas-bg, var(--paper)); /* letterbox 底色固定纸色 #FAF9F6（--paper 不随主题）：用户要求容器内换色——与黑海报内容形成区分（原 var(--eva-bg) 随主题仍为深色≈黑） */
  border-radius: var(--eva-radius);
  box-shadow: none;
}
/* 2026-08-27 用户要求：红黑细条纹圆角框（EVA 红 #e23b3b；细 = 2px 厚 + 4px 条纹；
   mask 环形仅显示边框环带不遮画布；pointer-events:none 不挡交互；pip 模式排除） */
.eva-canvas-wrap::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--eva-radius);
  background: repeating-linear-gradient(45deg, #e23b3b 0 4px, #1c1c1c 4px 8px);
  padding: 2px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.eva-panel .eva-preview.eva-pip .eva-canvas-wrap::after { display: none; }
/* EVA20：canvas 显示与上游一致（width:100% + height:auto 固有比例）；不裁切任何内容 */
/* v80 修复：canvas 补与容器一致的圆角——否则 canvas 位图直角盖住 wrap 圆角（Owner：方角回归） */
#evaPreview { width: 100%; height: auto; display: block; max-width: 100%; border-radius: var(--eva-radius); }
.eva-canvas-wrap.locked #evaPreview { filter: grayscale(0.4) brightness(0.8); }
.eva-lock-badge {
  position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.7); color: var(--eva-warn);
  border: 1px solid var(--eva-warn); padding: 6px 12px; border-radius: 6px; font-weight: 800; letter-spacing: 1px;
}

/* HY3-FIX6（cross-tool 统一）：导出 CTA 统一令牌：高 44px / 字号 15px / 字重 700 / 圆角 10px /
   主色底 + 白字（参考 Architecture Proposal §D primary CTA）。仅改样式，未触碰 renderer。 */
.eva-export-btn {
  align-self: flex-start; height: 44px; min-height: 44px; padding: 0 22px;
  background: var(--eva-accent); color: #fff; border: 0;
  border-radius: var(--eva-radius); font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: 1px; cursor: pointer;
}
.eva-export-btn:hover { filter: brightness(1.08); box-shadow: 0 0 0 2px var(--eva-accent2); }
.eva-export-btn:active { filter: brightness(.95); }
.eva-export-btn:focus-visible { outline: 2px solid var(--eva-accent2); outline-offset: 2px; }

/* HY3-FIX10 P2：触控目标 >=40px（EVA 重置按钮 / 比例选择）。
   作用域限定 .eva-panel，仅提升可点击高度，不改变桌面布局观感。 */
.eva-panel .eva-reset-btn {
  width: 100%; min-height: var(--eva-touch); padding: 8px 16px;
  border: 1px solid var(--eva-line); background: transparent; color: var(--eva-muted);
  border-radius: var(--eva-radius-sm); font-family: inherit; font-size: 13px; cursor: pointer;
  /* tertiary：低调、不抢视觉，仅描边 + 静音色 */
}
.eva-panel .eva-reset-btn:hover { color: var(--eva-text); border-color: var(--eva-accent); }
.eva-panel .eva-reset-btn:active { background: rgba(226,59,59,.10); }
/* 2026-08-27 用户要求：重置按钮点击按-弹动效（0.25s：按缩 94% 再回弹；JS 点击时加 eva-press） */
.eva-panel .eva-reset-btn.eva-press { animation: evaResetPress .25s ease, evaResetFade .18s ease; }
@keyframes evaResetPress {
  0% { transform: scale(1); }
  40% { transform: scale(.94); }
  100% { transform: scale(1); }
}
/* 2026-08-27 用户要求：重置↔已重置文字切换淡入（0.18s，不再瞬间替换；恢复方向同样平滑） */
.eva-panel .eva-reset-btn.eva-reset-fade:not(.eva-press) { animation: evaResetFade .18s ease; }
@keyframes evaResetFade {
  0% { opacity: .25; }
  100% { opacity: 1; }
}
.eva-panel .eva-reset-btn:focus-visible { outline: 2px solid var(--eva-accent); outline-offset: 2px; }
/* 重置按钮独立常驻：order 排到所有手风琴（order≤9）之后，位于控制面板最底部 */
.eva-panel .eva-reset-btn { order: 10; margin-bottom: 48px; }
/* 尾页标注：EVA 联名官方字体提示（低调角注）；order 排在重置按钮之后 = 控制面板最底 */
.eva-panel .eva-footer-note {
  order: 11;
  text-align: center; font-size: 11px; line-height: 1.6;
  color: var(--eva-muted); opacity: .85; margin: 0 0 24px;
}
/* 页脚网址链接：下划线 + 绿色光晕（用户：直接下划线发光，能超链接） */
.eva-panel .eva-footer-note a{
  color:var(--eva-accent);text-decoration:underline;text-underline-offset:2px;
  text-shadow:0 0 6px rgba(63,168,140,.55),0 0 14px rgba(63,168,140,.3);
}
.eva-panel .eva-footer-note a:hover{text-shadow:0 0 8px rgba(63,168,140,.85),0 0 18px rgba(63,168,140,.5)}
.eva-panel #evaRatioSel { min-height: var(--eva-touch); }

/* ---------- 控制区（flex 列 + 分级手风琴） ---------- */
.eva-controls {
  background: var(--eva-panel); border: 1px solid var(--eva-line); border-radius: var(--eva-radius);
  padding: var(--eva-pad); max-height: none; overflow: visible; min-width: 0;
  display: flex; flex-direction: column;
}

/* 分级手风琴：section header 令牌（§D：radius 10 / border 1px --line / pad 12 / label 12·600·muted） */
.eva-acc {
  border: 1px solid var(--eva-line);
  border-radius: var(--eva-radius);
  background: var(--eva-panel2);
  margin-bottom: var(--eva-gap);
  order: 9;
}
.eva-acc[hidden] { display: none; }
.eva-acc__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: var(--eva-pad);
  cursor: pointer; user-select: none;
  font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: var(--eva-muted);
  min-height: var(--eva-touch);            /* §D：section header touch >=40px */
  list-style: none;
}
.eva-acc__summary::-webkit-details-marker { display: none; }
.eva-acc__summary:hover { background: rgba(255,255,255,.04); }
.eva-acc__summary:focus-visible { outline: 2px solid var(--eva-accent); outline-offset: -2px; }
.eva-acc__chev::before {
  content: "▸"; font-size: 10px; color: var(--eva-muted);
  display: inline-block; transition: transform .15s ease;
}
/* 注意：不再为 .eva-acc[open] 设置 transform: rotate(90deg)。
   旧声明与下方 .eva-panel 版 chevron 的独立 rotate 属性叠加（Transforms L2：rotate 后接 transform），
   而 transition 只覆盖 rotate（transform 无过渡）→ open 翻转瞬间视觉角瞬跳 +90°（45°→135°），
   收起结束回跳（135°→45°），即「135° 卡一下」根因。chevron 旋转由 .eva-acc.ac-open 规则驱动。 */
.eva-acc__body { padding: 0 var(--eva-pad) var(--eva-pad); }

/* 桌面顺序：Layout / Text / Plan / Style / Ratio / Lang / Effects / CLASSIC / 字形 / 操作 */
.eva-acc[data-acc="layout"] { order: 1; }
.eva-acc[data-acc="text"]   { order: 2; }
.eva-acc[data-acc="plan"]   { order: 3; }
.eva-acc[data-acc="style"]  { order: 4; }
.eva-acc[data-acc="ratio"]  { order: 5; }
.eva-acc[data-acc="lang"]   { order: 6; }
.eva-acc[data-acc="effects"]{ order: 7; }
.eva-group.eva-classic-flat { order: 8; margin-bottom: var(--eva-gap); }
.eva-group.eva-glyph-flat   { order: 9; margin-bottom: var(--eva-gap); }
.eva-acc[data-acc="actions"]{ order: 10; }

/* 非 details 的平铺组样式（CLASSIC / 字形），保持与手风琴一致的卡片感 */
.eva-classic-flat, .eva-glyph-flat {
  border: 1px solid var(--eva-line);
  border-radius: var(--eva-radius);
  background: var(--eva-panel2);
  padding: var(--eva-pad);
}

.eva-group { margin-bottom: 0; }
.eva-group:last-child { margin-bottom: 0; }

/* §D：段内小标题（仍保留以兼容动态生成处） */
.eva-label {
  display: block; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--eva-muted); margin-bottom: 8px; font-weight: 700;
}

.eva-mini { font-size: 11px; color: var(--eva-muted); display: block; margin: 10px 0 4px; letter-spacing: 1px; }

.eva-panel input[type="text"], .eva-panel select {
  width: 100%; padding: 9px 10px; background: var(--eva-panel); color: var(--eva-text);
  border: 1px solid var(--eva-line); border-radius: var(--eva-radius-sm); font-family: inherit; font-size: 14px;
  min-height: var(--eva-touch);
}
.eva-panel input[type="text"]:focus, .eva-panel select:focus { outline: none; border-color: var(--eva-accent); }

/* 2026-10-02：补触控目标下限——行盒原高约 20px，低于本文件自定义的 --eva-touch（40px）。 */
.eva-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--eva-text); margin: 6px 0; cursor: pointer; min-height: var(--eva-touch); }
.eva-chk input {
  width: 16px; height: 16px; flex: none; margin: 0; box-sizing: border-box;
  -webkit-appearance: none; appearance: none;   /* 关闭原生勾选动画：对勾由背景即时呈现，点击即见 */
  border: 1.5px solid var(--eva-line);
  border-radius: 4px;
  background: #fff;
}
.eva-chk input:checked {
  background: var(--eva-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5 4.5 8 11 1' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px auto no-repeat;
  border-color: var(--eva-accent);
}
.eva-chk input:active { border-color: var(--eva-accent); background-color: rgba(28,77,77,.10); }   /* 按压即时反馈 */
.eva-chk input:focus-visible { outline: 2px solid var(--eva-accent2); outline-offset: 2px; }
.eva-chk-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 12px; }
.eva-panel input[type="file"] { width: 100%; color: var(--eva-muted); font-size: 13px; min-height: var(--eva-touch); }

/* R44R4-EVA18：文字输入区——标签与字符计数同排(右侧)，输入框独占整行。
   纯 CSS 重排 JS 生成的「label.eva-mini + input + span.eva-char-count」兄弟结构，
   不触碰渲染管线；修复"计数与输入框挤在一起、重复难看、占大量垂直空间"。 */
#evaInputsGroup {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 6px;
  align-items: baseline;
}
#evaInputsGroup .eva-mini { margin: 0; grid-column: 1; }
#evaInputsGroup input[type="text"] { grid-column: 1 / -1; margin: 0; }
#evaInputsGroup .eva-tab-sel { grid-column: 1 / -1; margin: 0; }
#evaInputsGroup .eva-char-count {
  grid-column: 2; margin: 0; justify-self: end; text-align: right; white-space: nowrap;
}

/* 风格组：语言优先 = Label 左 + select 右（W11 控制行标准） */
.eva-field-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.eva-field-row .eva-mini { margin: 0; flex: 0 0 auto; }
.eva-field-row select { flex: 1 1 auto; }

/* 排版 grid + schematic 缩略图 */
.eva-layout-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.eva-layout-card {
  position: relative;                /* HY3-FIX10 P1：为激活态对勾徽标定位 */
  border: 0; border-radius: 6px; padding: 0; text-align: center;
  cursor: pointer; background: #fff; font-size: 12px; transition: border-color .15s, color .15s;
  color: var(--eva-text);            /* F6：未选中项明确浅色文字，避免深底深字看似禁用 */
  display: flex; flex-direction: column; gap: 4px; align-items: stretch;
}
.eva-layout-card:hover { border-color: var(--eva-accent2); color: #fff; }
.eva-layout-card:focus-visible { outline: 2px solid var(--eva-accent2); outline-offset: 2px; }
/* HY3-FIX10 P1【WCAG 1.4.1】：激活态除红边框 + 背景 tint 外，增加「非颜色」指示——
   2px 实心 outline（内描边，不撑开布局）+ 加粗 + 右上角对勾徽标（形状 + 符号，
   不依赖色盲辨识）。确保仅靠形状/位置即可区分 active 与 inactive。 */
.eva-layout-card.active {
  border-radius: 6px;                /* 与缩略图圆角一致，避免选中后变方角 */
  font-weight: 700;
  background: #000;
}
/* 2026-10-02：暗色主题下上面的 #000 选中底与页面底（--paper #15171C）对比仅 ≈1.17:1，
   选中项几乎"消失"；改为面板色底 + 强调色内描边，补上颜色与非颜色双重指示。 */
[data-theme="dark"] .eva-layout-card.active {
  background: #1E2127;
  outline: 2px solid var(--eva-accent);
  outline-offset: -2px;
}

.eva-layout-card .lc-thumb {
  width: 100%; aspect-ratio: 4 / 3; background: #fff;
  border: 0; border-radius: 6px; overflow: hidden;
}
.eva-layout-card.active .lc-thumb { background: #000; }
/* R44R4-HF1：单字段模式（RAW/CLASSIC）下多区域版式禁用——置灰 + 不可点 + 明确提示，
   避免「卡片承诺多区域结构、预览退化单文本」的不一致（Owner 实机反馈）。 */
.eva-layout-card.disabled {
  opacity: .42; cursor: not-allowed; filter: saturate(.4);
}
.eva-layout-card.disabled:hover { border-color: #3a4150; color: var(--eva-text); }
.eva-layout-card.disabled .lc-thumb { filter: grayscale(.7); }
.eva-layout-card .lc-thumb svg { display: block; width: 100%; height: 100%; }
.eva-layout-card .lc-name { font-weight: 700; color: var(--eva-text); font-size: 11px; }
.eva-layout-card .lc-ratio { color: #aeb4c0; font-size: 10px; }

/* 配色 grid */
.eva-plan-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 5px; }
.eva-plan-card { height: 34px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; }
.eva-plan-card.active { border-color: #fff; box-shadow: 0 0 0 1px var(--eva-accent); }
.eva-plan-card:focus-visible { outline: 2px solid var(--eva-accent2); outline-offset: 2px; }

/* 字形状态 (D6) — 只读 value readout */
.eva-glyph-status { font-size: 12px; background: var(--eva-panel); border: 1px solid var(--eva-line); border-radius: var(--eva-radius-sm); padding: 10px; }
.eva-glyph-status .row { display: flex; justify-content: space-between; gap: 8px; margin: 3px 0; }
.eva-glyph-status .k { color: var(--eva-muted); }
.eva-glyph-status .ok { color: var(--eva-ok); }
.eva-glyph-status .bad { color: var(--eva-bad); }
.eva-glyph-status .warn { color: var(--eva-warn); }
.eva-glyph-status .miss { color: var(--eva-accent2); word-break: break-all; }

.eva-hint { font-size: 11px; color: var(--eva-muted); margin: 6px 0; }
.eva-hint.ok { color: var(--eva-ok); }
.eva-hint.bad { color: var(--eva-bad); }

/* CLASSIC 短说明 + 技术说明 details */
.eva-classic-short { font-size: 12px; color: var(--eva-text); margin: 0 0 6px; font-weight: 600; }
.eva-classic-detail { margin-top: 8px; border-top: 1px solid var(--eva-line); padding-top: 8px; }
.eva-classic-detail > summary {
  cursor: pointer; font-size: 11px; color: var(--eva-muted); letter-spacing: 1px;
  list-style: none; display: flex; align-items: center; gap: 6px; min-height: var(--eva-touch);
}
.eva-classic-detail > summary::-webkit-details-marker { display: none; }
.eva-classic-detail > summary::before { content: "▸"; transition: transform .15s ease; }
.eva-classic-detail[open] > summary::before { transform: rotate(90deg); }
.eva-classic-detail > p { margin: 8px 0 0; }

/* ---------- EVA20：比例/语言选择组（画质式分段按钮：胶囊滑块 500ms 回弹，与 vcu 分段控件一致） ---------- */
.eva-ratio-seg {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;             /* 5 个按钮一行不换行 */
  gap: 3px;
  padding: 3px;
  background: var(--surface-2, #F7F5F0);
  border: 1px solid var(--line, #ECE9E1);
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
}
.eva-ratio-seg .vcu-seg-ind {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  border-radius: 8px;
  background: var(--eva-accent);
  box-shadow: 0 2px 10px rgba(14, 107, 87, .35);
  transition: transform 500ms cubic-bezier(0.34, 1.2, 0.5, 1), width 500ms cubic-bezier(0.34, 1.2, 0.5, 1);
  will-change: transform;
  pointer-events: none;
}
.eva-ratio-btn {
  appearance: none;
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 1 1 0; min-width: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  padding: 6px 14px;
  line-height: normal;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--ink-3, #8B909C);
  white-space: nowrap;
  cursor: pointer;
  transition: color 220ms ease;
}
.eva-ratio-btn:hover { color: var(--eva-accent); }
.eva-ratio-btn.active { color: #fff; font-weight: 600; }
/* EVA18：显式作用域触控下限对齐（与 .eva-reset-btn 一致） */
.eva-panel .eva-ratio-btn { min-height: var(--eva-touch); }
/* 隐藏"备用"比例下拉（与分段按钮列表重复），只保留分段按钮选比例 */
.eva-ratio-select { display: none; }
/* EVA27：比例选择组在手风琴内容区水平居中（原来左对齐；inline-flex 受 text-align 影响，
   inner 内可见子元素仅有该按钮组，无副作用） */
.eva-acc[data-acc="ratio"] .eva-acc__inner { text-align: center; }

/* ---------- 响应式 ---------- */
/* 桌面大屏 1440 */
@media (min-width: 1440px) { .eva-panel { --eva-ctrl: 420px; } }
/* 桌上型 1280 */
@media (max-width: 1280px) { .eva-panel { --eva-ctrl: 340px; } }
/* 小桌上 / 平板横 1024 */
@media (max-width: 1024px) {
  .eva-workspace { grid-template-columns: 300px minmax(0, 1fr); }
  .eva-layout-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 手机 430 / 390 / 大屏手机（自然堆叠，预览 sticky 置顶；统一断点 860 与 K·P/CHROMARA 对齐）。
   EVA23：加 min-height:561px 守卫——仅命中「竖屏手机」(高>560)，
   避免与下方 @media (max-width:860px) and (max-height:560px) 横屏矮视口双列布局冲突。 */
@media (max-width: 860px) {
  .eva-panel input[type="text"], .eva-panel select, .eva-panel textarea {
    /* iOS 指纹：Safari 对 font-size < 16px 的输入控件 focus 会整页放大（键盘 zoom in）。
       Apple 官方规避 = 聚焦时字号 ≥ 16px（iPhone 上 14px 输入框触发"界面被放大一下"）。 */
    font-size: 16px;
  }
}
@media (max-width: 860px) {
  /* EVA30c（Safari 底部工具栏 + 背景断层，用户实测）：
     滚动改为文档原生滚动（主页同款）——Safari 对文档滚动原生处理动态地址栏/
     底部工具栏，内容完整可达；body-as-scroll-container 方案（html overflow:hidden）
     在 Safari 26 浮动底栏下滚到底 = body 盒底(视口高)，内容底被底栏罩住 → 看似“被裁切”。 */
  html { overflow: visible; height: auto; background: var(--paper); }
  body {
    height: auto;
    min-height: 100dvh;          /* 页面由内容自然撑开；内容不足时撑满可视视口 */
    overflow: visible;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));      /* iOS 顶部安全区（状态栏/灵动岛） */
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px) + 24px + 90px);
  }
  /* ⚠️ 勿删（2026-08-27 用户要求）：移动端斜纹背景层已隐藏。恢复：取消下面 display:none。 */
  body::before {
    content: "";
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: -1;
    background: #f0ede9 repeating-linear-gradient(-45deg, rgba(165,20,30,.30) 0 20px,
      rgba(165,20,30,.30) 20px 40px, rgba(15,15,15,.26) 40px 60px, rgba(15,15,15,.26) 60px 80px);
    pointer-events: none;
    display: none;               /* ⚠️ 勿删：隐藏背景（恢复时删除本行） */
  }
}
@media (max-width: 860px) and (min-height: 561px) {
  /* 移动顺序：Text / Layout / Plan / Style / Ratio / Effects / CLASSIC / 字形 / 操作 */
  .eva-acc[data-acc="text"]   { order: 1; }
  .eva-acc[data-acc="layout"] { order: 2; }
  .eva-acc[data-acc="plan"]   { order: 3; }
  .eva-acc[data-acc="style"]  { order: 4; }
  .eva-acc[data-acc="ratio"]  { order: 5; }
  .eva-acc[data-acc="lang"]   { order: 6; }
  .eva-acc[data-acc="effects"]{ order: 7; }
  .eva-group.eva-classic-flat { order: 8; }
  .eva-group.eva-glyph-flat   { order: 9; }
  .eva-acc[data-acc="actions"]{ order: 10; }

  /* EVA23（单根滚动）：竖屏手机改为「整页单根滚动 + 预览 sticky 常驻」。
     去掉 FIX8 的高度锁定(100dvh - 偏移)与 overflow:hidden，让 workspace 内容完整展开，
     滚动交由 body 单根滚动条承载；预览区仍 position:sticky 常驻顶，控件区不再内滚。
     横屏矮视口(≤560 高)不命中本守卫断点，继续走下方双列 + 内部滚动逻辑，不受影响。 */
  .eva-workspace {
    display: flex; flex-direction: column;
    height: auto;
    min-height: 0;
    margin-top: 0;
    overflow: visible;
  }
  .eva-controls {
    flex: 0 0 auto; min-height: 0;
    overflow: visible; overflow-x: visible;
    position: relative; z-index: 7;   /* FIX4 保持：Controls 高于 Preview */
    max-height: none;
  }
  /* EVA23（问题A）：竖屏模式段禁止 flex 收缩，保持 ≥40px 高度；
     容器保留 999px 胶囊圆角 + overflow:hidden 裁切首尾两端，seg 方角被裁切为圆角，观感统一。
     （横屏矮视口已在下方断点设 flex:0 0 auto，此处补齐竖屏遗漏。） */
  .eva-mode-switch { width: 100%; flex: 0 0 auto; }
  .eva-seg { flex: 1; padding: 10px 0; }
  .eva-chk-col { grid-template-columns: repeat(4, 1fr); gap: 4px 8px; }

  /* EVA18：导出按钮整行、与画布同宽对齐，节奏整齐（修复"按钮突兀/不对齐"） */
  .eva-export-btn { flex: 0 0 auto; align-self: stretch; width: 100%; margin-top: 4px; }
  /* EVA18：排版 LAYOUT 网格铺满：3 列 + 均匀间距，卡片拉满列宽（修复"网格没铺满/被裁切"） */
  .eva-layout-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .eva-layout-card { width: 100%; }

  /* Preview 常驻顶栏：EVA26B 前为固定高 max(160px, min(28dvh,…)) + overflow:hidden，
     配合 EVA21「高度锚定」把 390 宽下的画布压成 ~150px 窄条；现改为自然高度 + 宽度锚定画布：
     preview 随画布(width:100% × aspect-ratio)等比撑高，sticky 常驻顶、控件由页面单根滚动浏览。
     min-height:160px 保留为极端窄视口下限。 */
  .eva-preview {
    position: relative;
    flex: 0 0 auto;
    height: auto;                 /* EVA26B：放开固定高，随满宽画布自然撑高 */
    min-height: 160px;
    display: flex; flex-direction: column;
    align-items: center;          /* EVA18：画布/导出按钮水平居中，修复"画布未居中" */
    overflow: visible;            /* EVA26B：自然流不再裁切（原 hidden 服务于固定高模型） */
    background: var(--eva-bg);
    padding-bottom: 8px;
    margin-bottom: 4px;
  }
  .eva-preview.is-compact { box-shadow: 0 8px 20px rgba(0,0,0,.45); }  /* 仅视觉反馈，不再收缩高度 */
  /* EVA21→EVA26B：移动端比例强锁改为「宽度锚定」（取代 EVA21 高度锚定——后者在 390×844 下
     把画布推导成 ~149px 宽的窄条）。显示宽 = preview 内容宽(100%)，显示高 = 宽 / ratio；
     max-height 兜底仅在极端竖版比例(如 9:16)+矮视口时生效防 sticky 超出视口，
     触发时框比偏离所选比例、canvas contain 居中留黑边（wrap 黑底，视觉无感）。
     默认 4:3 在常见手机竖屏不受兜底影响，严格满宽、严格比例。 */
  .eva-canvas-wrap {
    flex: 0 0 auto;            /* 自然流：不参与高度分配 */
    width: 100%;               /* 上游：满宽 + canvas 固有比例（height:auto） */
    align-self: center;
    margin: 0 auto;
    /* 容器不裁切任何内容（上游无 overflow 隐藏）；canvas 由上游式 height:auto 自持比例 */
    display: flex;             /* 居中包含后的画布（横向/纵向 letterbox 均居中） */
    align-items: center;
    justify-content: center;
    /* 2026-08-27 用户反馈「比例按钮按了窗口会跳」：预览框改固定 4:3（不再随所选比例变化），
       canvas 在框内 contain 居中（letterbox 留黑边，wrap 黑底视觉无感）。
       取代 EVA27「框比=所选比例、框高随比例变化」（每次切换比例预览框高度突变 → 页面弹跳的根因）。 */
    height: auto;
    aspect-ratio: 4 / 3;   /* 固定显示框比例：切换比例不再改变框高/文档高度 */
  }
  /* 2026-08-27 配套：canvas 绝对定位填充 4:3 固定框 + object-fit:contain（自身比例居中、
     letterbox 黑边视觉无感；absolute 避免 canvas 内容尺寸（1:1/5:4 高于框）撑开 wrap） */
  #evaCanvasWrap #evaPreview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
}
@media (max-width: 430px) {
  .eva-layout-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 390px) {
  .eva-layout-grid { grid-template-columns: repeat(2, 1fr); }
  .eva-panel .tool-title h2 { font-size: 19px; }
}

/* ---------- F13（历史，EVA26B 已取代其固定高模型）→ EVA26B：桌面/平板自然流预览 ----------
   F13 时代：preview 为 sticky 左列 + 固定高度封顶 + 导出按钮钉底首屏可达。
   EVA18 单列化后 preview 已非 sticky；EVA26B 画布改宽度锚定(width:100%+aspect-ratio)，
   显示高随内容宽变化，任何固定高度都会裁切满宽画布 → preview 改自然高度、overflow:visible，
   导出按钮(width:100%)紧随画布之下、滚动可达，controls 由页面滚动浏览（单列自然浏览模型）。
   min-height:0 / flex:0 0 auto 防收缩语义保留。移动端（≤860px）见上方媒体查询。 */
@media (min-width: 861px) {
  .eva-preview {
    /* 关键：覆盖 grid item 默认 min-height:auto，否则高度受限会失效 */
    min-height: 0;
    /* EVA26B：放弃 F13/HY3-FIX1 的「固定高度 + overflow:hidden」模型——
       画布改为宽度锚定(width:100% + aspect-ratio)后，显示高=内容宽/比例，随窗口变宽而变高，
       任何固定高度都会把满宽画布裁切、把导出按钮推出可视区。改为自然高度：
       preview 随画布等比撑高，导出按钮紧随其下（滚动可达），controls 在下方由页面滚动浏览。 */
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .eva-mode-switch,
  .eva-classic-lock-note,
  .eva-export-btn {
    flex: 0 0 auto;              /* 顶部模式行与底部导出按钮不收缩，始终可见 */
  }
  /* EVA26B：导出按钮与画布同宽——同为 width:100%（preview 内容宽），横向占满、严格同宽。
      （取代 EVA24 的 availH×ratio 表达式；--eva-preview-avail-h 不再被桌面 CSS 消费，
        JS updatePreviewAvailH 保留不动。） */
  .eva-export-btn {
    align-self: stretch;
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }
  /* EVA18+EVA20+EVA26B：桌面画布框——宽度锚定锁比例。
     EVA26B：width 直接 100%（去掉 min(100%, availH×ratio) 高度约束——单列下它把画布压成 ~500px 窄条）；
     显示宽 = preview 内容宽，显示高 = 宽 / --eva-preview-ratio（aspect-ratio 推导，definite），
     canvas(#evaPreview width/height:100% object-fit:contain) 填满无黑边。
     禁止 flex:1 / flex 拉伸（会让 wrap 高度被撑满、比例破坏 → letterbox 留带）。 */
  .eva-canvas-wrap {
    flex: 0 1 auto;              /* 不拉伸、允许收缩（绝不 flex:1） */
    width: 100%;                 /* EVA26B：横向占满内容区 */
    /* 2026-08-27 用户：电脑端（左预览图右参数）不需要容器——桌面 wrap 跟随画布天然
       比例（aspect-ratio:auto + canvas height:auto）；无纸色底/圆角/条纹框，
       容器（4:3 固定 + 纸色 + 红黑条纹）仅手机版比例生效。 */
    aspect-ratio: auto;
    max-height: none;            /* EVA26B：父级已为自然高，不再需要 100% 兜底钳制 */
    align-self: center;          /* width:100% 下与 stretch 等效，保持居中语义 */
    margin: auto;                /* 无剩余空间时无效果，保留居中语义 */
    background: transparent;
    border-radius: 0;
    display: block;
  }
  /* 桌面无容器：条纹框关闭（基础 ::after 规则仅手机版生效） */
  .eva-canvas-wrap::after { display: none; }
  /* 2026-08-27 配套：桌面 canvas 恢复自然尺寸（width:100% + height:auto 由基础规则推导）——
     容器取消后 canvas 不再绝对定位填充 4:3 框 */
  #evaPreview {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;   /* 2026-08-27 修复：原 none 导致位图不缩放（1024 原尺寸）在框内裁剪（用户截图异常） */
    display: block;
  }
}

/* ---------- HY3-FIX3（K3）：横屏矮视口预览塌陷修复（分支保留，EVA26B 未改动） ----------
   历史根因：EVA26B 之前 @media (min-width: 861px) 曾把 .eva-preview 高度固定为
     calc(100vh - var(--eva-preview-top, 280px) - 16px)。
   在横屏矮视口（如 844×390 / 932×430，100vh≈390/430px）下该值极小，
   preview 内「模式行(flex:0 0 auto) + 导出按钮(flex:0 0 auto)」占满后，
   flex:1 的 .eva-canvas-wrap 被 min-height:0 收缩到 ≈0，导致 #evaPreview
   的 contain-fit 容器高度为 0 → 画布 0×0、横屏预览整段不可见。
   实测（修复前）：844×390 → wrap h=2 / canvas 0×0；932×430 → wrap h=38 / canvas 49×36。
   FIX（仅 UI 层，未触碰渲染管线 HARD FREEZE）：横屏矮视口改为
     preview 高度自适应 + canvas-wrap 确定高度，保证 contain-fit 始终有非零容器。
   EVA26B 后：主桌面分支 preview 已是自然高，本分支的显式覆盖（height:auto /
     canvas height:min(60vh,260px) 宽=高×ratio 高度锚定）继续兜底矮视口，
     防止满宽画布在 ≤560px 高的视口里把导出按钮推出屏幕。 */
@media (min-width: 861px) and (max-height: 560px) {
  .eva-workspace {
    /* 横屏横向空间充裕：预览列放宽到约 42%，避免 300px 过窄导致产品偏小 */
    grid-template-columns: minmax(300px, 42%) minmax(0, 1fr);
  }
  .eva-preview {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }
  /* 横屏矮视口空间紧张：锁定提示与 CLASSIC seg 上的 🔒 徽标信息重复，
     此处隐藏以回收垂直空间，保证画布更大且导出按钮首屏可达（不丢关键信息）。
     提高特异性（.eva-preview 后代）以压过后续定义的 base .eva-classic-lock-note 规则。 */
  .eva-preview .eva-classic-lock-note { display: none; }
  /* EVA18+F3+EVA21：横屏矮视口——确定高度(min(60vh,260px))避免 contain-fit 容器塌缩为 0（F3），
     叠加 aspect-ratio 强锁显示框比例；flex:0 1 auto 允许收缩，max-width:100% 不溢出；
     flex 在 max 裁切交叉轴时回算主轴高以维持比例 → 框比=所选比例、画布填满无黑边。 */
  .eva-canvas-wrap {
    flex: 0 1 auto;            /* 允许收缩，避免被压成 0；确定高度由 height 提供 */
    height: min(60vh, 260px);  /* 确定高度（≤视口 60%，封顶 260px），导出按钮首屏可达 */
    min-height: 120px;         /* B3：安全下限，避免横屏矮视口塌缩为 0 导致画布黑屏 */
    align-self: center;        /* 由 aspect-ratio 推导显示宽并居中 */
    width: auto;               /* 显示宽 = 高 × ratio */
    aspect-ratio: var(--eva-preview-ratio);   /* EVA21：强锁显示框比例 */
    max-width: 100%;           /* 不超出预览列 */
    display: flex; align-items: center; justify-content: center;
  }
  #evaPreview {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }
}

/* ---------- HY3-FIX8：移动端横屏矮视口（如 844×390）不进入堆叠模型 ----------
   与上方桌面横屏修复同源：宽度 ≤860 但高度 ≤560 时（手机横屏），沿用桌面双列预览优先，
   避免被 max-width:860px 的堆叠规则误伤导致横屏预览塌陷。仅 UI 层。 */
/* HY3-FIX9：移动端横屏矮视口（≤860 宽 + ≤560 高，如 844×390）—— 双列预览优先，
   但工作区必须精确填满「视口 - 实测顶部偏移(--eva-sticky-top 现已含工具头)」并内部滚动，
   不再 height:auto 溢出整页；preview 用 flex 列，画布 flex:1 填满剩余高度（contain-fit 始终非零），
   模式行与导出按钮 flex:0 0 auto 常驻，画布完整/大部分可见、导出首屏可达。
   保留 FIX8 双列布局与真 renderer 标题；不回退 FIX3 的 contain-fit 容器修复。 */
@media (max-width: 860px) and (max-height: 560px) {
  .eva-workspace {
    display: grid;
    grid-template-columns: minmax(260px, 40%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    /* -16px 安全余量：--eva-sticky-top 实测为壳头+工具头偏移，留少量余量避免矮视口下 1-2 行溢出。
       用 100vh（恒定）而非 100dvh：iOS 地址栏滚动时 dvh 动态变化会让双列高度/画布随滚动脉动。 */
    height: calc(100vh - var(--eva-sticky-top, 75px) - 16px);
    min-height: 0;
    overflow: hidden;
  }
  .eva-preview {
    position: sticky; top: 0;
    flex: none;
    /* 用明确长度（非百分比）作为 flex 列容器高度，避免百分比高度在 flex 中被视为「不确定高度」
       导致 flex:1 子项塌缩为内容高（画布只剩 ~29px）。与 .eva-workspace 同高，精确填满视口。
       （100vh 恒定，原因同上；不再用 100dvh 防地址栏脉动。） */
    height: calc(100vh - var(--eva-sticky-top, 75px) - 16px);
    margin-bottom: 0;
    min-height: 0;
    display: flex; flex-direction: column; gap: 6px;
    background: var(--eva-bg);
    padding: 6px;
  }
  .eva-mode-switch { flex: 0 0 auto; }
  /* 横屏空间紧张：锁定提示与模式段上的 🔒 重复，隐藏以回收纵向空间，画布更大、导出首屏可达。
     提高特异性（.eva-preview 后代）压过 base .eva-classic-lock-note 规则。 */
  .eva-preview .eva-classic-lock-note { display: none; }
  /* EVA18+F8/F9+EVA21：移动横屏——flex:1 占满剩余高（确定高）→ aspect-ratio 推导显示宽；
     align-self:center 不拉伸；max-width:100%/max-height:100% 双约束；flex 回算维持比例。
     框比=所选比例，canvas 填满无黑边；min-height:120px(B3) 防塌缩。 */
  .eva-canvas-wrap {
    flex: 1 1 auto;
    min-height: 120px;         /* B3：安全下限，避免移动横屏矮视口塌缩为 0 导致画布黑屏 */
    max-height: 100%;
    align-self: center;
    width: auto;
    height: auto;
    aspect-ratio: var(--eva-preview-ratio);   /* EVA21：强锁显示框比例 */
    margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
  }
  #evaPreview { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
  .eva-export-btn { flex: 0 0 auto; }
  .eva-controls { flex: 1 1 auto; min-height: 0; overflow: visible; max-height: none; }
}

/* ---------- F5：CLASSIC 锁定解锁提示（toast + 行内提示） ---------- */
.eva-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px);
  max-width: min(92vw, 520px);
  background: rgba(14, 15, 18, .95); color: #fff;
  border: 1px solid var(--eva-accent); border-left: 4px solid var(--eva-accent);
  padding: 11px 16px; border-radius: 8px; font-size: 13px; line-height: 1.5;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.eva-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.eva-classic-lock-note {
  font-size: 11px; color: var(--eva-warn); margin: 4px 0 0; line-height: 1.35;
  padding: 4px 8px; background: rgba(232, 161, 58, .08); border: 1px solid rgba(232, 161, 58, .25);
  border-radius: 6px; display: inline-block; max-width: 100%;
}
.eva-classic-lock-note[hidden] { display: none; }

/* ---------- F7：文字输入字符计数（软上限，不静默截断） ---------- */
.eva-char-count {
  display: block; font-size: 11px; color: var(--eva-muted); margin-top: 2px;
}
.eva-char-count.over { color: var(--eva-bad); font-weight: 700; }

/* ==========================================================================
   KUMO 特色覆盖层（glass + 戏剧张力 + 微交互）
   作用域限定 .eva-panel；只增强质感/微交互/光，不改断点与布局契约。
   设计语汇取自 Design Lab 观摩：Liquid Glass（tint+rim+refraction）、Amicro 微反馈、
   戏剧字画的张力。EVA 骨架（白色单列 + Teal/Fuchsia）保持不变。
   ========================================================================== */
.eva-panel { font-feature-settings: "kern"; }

/* —— 预览区：卡片化容器，内部三件套边角协调（mode+画布+导出放同一张卡） —— */
.eva-panel .eva-preview {
  background: #fff;
  border: 1px solid rgba(20, 26, 30, .08);
  border-radius: 16px;
  padding: 12px 12px 14px;
  box-shadow: 0 8px 26px rgba(20, 30, 40, .08);
  /* 吸顶不消失：滚动调参时预览始终可见（配合 _pip_eva.js 的角落小窗共存） */
  position: relative;
}

/* —— 工具标题：收紧、聚焦（别让长文档淹没工具视觉） —— */
.eva-panel .tool-title h2 {
  letter-spacing: -.02em; font-weight: 800;
}
.eva-panel .tool-title p {
  max-width: clamp(280px, 70vw, 760px); color: var(--eva-muted); line-height: 1.55;
}
.eva-panel .tool-badge {
  letter-spacing: .04em;
}

/* —— 预览画布：戏剧主角 + 清晰边角（白底也能看清）+ 圆角统一 —— */
.eva-panel .eva-canvas-wrap {
  border-radius: 12px;
  border: 0;
  box-shadow: none;
}
.eva-panel .eva-preview {
  position: relative;
}
/* （已移除底光伪元素——它在纯白页面上产生微灰渐变/色差） */

/* —— Mode switch：玻璃底 + 微交互 —— */
.eva-panel .eva-mode-switch {
  padding: 3px; border-radius: 999px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.eva-panel .eva-seg {
  margin: 0 1px; border-radius: 999px;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.eva-panel .eva-seg + .eva-seg { border-left: 0; }
.eva-panel .eva-seg:active { transform: scale(.96); }

/* —— 手风琴：白卡 → 玻璃层次（细腻边缘 + 内嵌高光） —— */
.eva-panel .eva-acc,
.eva-panel .eva-classic-flat,
.eva-panel .eva-glyph-flat {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px) saturate(1.08); -webkit-backdrop-filter: blur(10px) saturate(1.08);
  box-shadow: 0 2px 12px rgba(20,30,40,.05), inset 0 1px 0 rgba(255,255,255,.65);
}
.eva-panel .eva-acc__summary {
  transition: background .15s ease;
}
.eva-panel .eva-acc__summary:hover { background: rgba(28,77,77,.05); }
.eva-panel .eva-acc__title { color: var(--eva-text); font-weight: 700; }

/* —— 选择控件：微交互 + Teal/Fuchsia 质感 —— */
.eva-panel .eva-layout-card,
.eva-panel .eva-ratio-btn,
.eva-panel .eva-plan-card,
.eva-panel .eva-seg {
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.eva-panel .eva-layout-card:active,
.eva-panel .eva-ratio-btn:active,
.eva-panel .eva-plan-card:active { transform: scale(.97); }
/* layout 卡片点击动效：更丝滑的按压 + 选中过渡 */
.eva-panel .eva-layout-card {
  transition: transform .2s cubic-bezier(.33,1,.68,1), box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.eva-panel .eva-layout-card:active { transform: scale(.95); }
/* 配色卡 hover：上浮 + 放大 + 边框高亮，柔和过渡（比通用微交互更丝滑） */
.eva-panel .eva-plan-card {
  transition: transform .22s cubic-bezier(.33,1,.68,1), box-shadow .22s ease, border-color .22s ease;
}
.eva-panel .eva-plan-card:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 18px rgba(28,77,77,.22);
  border-color: var(--eva-accent2);
}

/* —— 导出 CTA：精致 + 主色光 —— */
.eva-panel .eva-export-btn {
  border-radius: calc(var(--eva-radius) * 1.1);
  box-shadow: 0 10px 24px rgba(28,77,77,.28);
  transition: transform .12s ease, box-shadow .16s ease;
}
.eva-panel .eva-export-btn:active { transform: translateY(1px) scale(.99); }

/* —— Wave N1 CONS-1：执行模式提示（导出按钮下方小字，Owner 批准文案） —— */
.eva-mode-hint {
  align-self: flex-start;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-3, #8B909C);
}

/* ==========================================================================
   KUMO Picture-in-Picture 浮动预览（floating preview，页面内小窗）
   滚动把预览滚出视口顶部时，预览收成可拖拽、吸附四边的小窗，实时画布。
   配合 _pip_eva.js；不动渲染管线。作用域 .eva-panel .eva-preview。
   ========================================================================== */
.eva-panel .eva-preview.eva-pip {
  position: fixed; z-index: 9999;
  width: 186px; height: 132px;
  min-height: 0;
  margin: 0; padding: 0;
  background: #0b0b0c;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
  cursor: grab;
  align-items: center; justify-content: center;
}
.eva-panel .eva-preview.eva-pip:active { cursor: grabbing; }
/* PiP 里只保留画布，隐藏模式段/导出/锁定提示 */
.eva-panel .eva-preview.eva-pip .eva-mode-switch,
.eva-panel .eva-preview.eva-pip .eva-export-btn,
.eva-panel .eva-preview.eva-pip .eva-classic-lock-note,
.eva-panel .eva-preview.eva-pip .eva-lock-badge {
  display: none !important;
}
.eva-panel .eva-preview.eva-pip .eva-canvas-wrap {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  max-height: none; min-height: 0;
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  box-shadow: none;
  position: static;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.eva-panel .eva-preview.eva-pip #evaPreview {
  width: 100%; height: 100%; object-fit: contain;
}
.eva-preview-ph { width: 100%; }

/* 画中画小窗（独立元素，角落可拖拽；预览本体保持吸顶不消失） */
.eva-pipw {
  position: fixed; z-index: 9999;
  width: 240px; height: 132px;
  background: transparent;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  cursor: grab;
  /* 触摸拖拽：声明 touch-action:none 让 iOS/Android 不把拖动手势当页面滚动/缩放；
     user-select:none 防拖动时选中画布/文字。 */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  /* 弹出动效（真机反馈：小窗弹出需有过渡）——从右缘滑入 + 缩放回弹 */
  animation: eva-pip-pop .32s cubic-bezier(.22,1.2,.36,1);
  transform-origin: right center;
  will-change: transform, opacity;
}
@keyframes eva-pip-pop {
  from { opacity: 0; transform: translateX(26px) scale(.86); }
  to   { opacity: 1; transform: none; }
}
.eva-pipw:active { cursor: grabbing; }
.eva-pipw-canvas { width: 100%; height: 100%; display: block; object-fit: contain; }

/* ==========================================================================
   Feature131 风格手风琴行（干净分隔线 · 大标题 · 右侧箭头）
   来源：shadcnblocks Feature 131 的手风琴行版式（去卡片框、细线分隔、标题粗体、
   展开箭头 inset）。仅改视觉，不动 details 结构/展开逻辑。
   ========================================================================== */
.eva-panel .eva-acc {
  background: transparent;
  border: 0; border-radius: 0;
  margin: 0; padding: 0;
  border-top: 1px solid var(--eva-line);
}
.eva-panel .eva-acc:last-child { border-bottom: 1px solid var(--eva-line); }
.eva-panel .eva-acc__summary {
  padding: 16px 2px;
  min-height: var(--eva-touch);
  font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--eva-text);
  -webkit-tap-highlight-color: transparent;   /* iOS 触摸不闪高亮（手机"先色差一下"） */
  transition: transform .12s ease, background .18s ease;
}
.eva-panel .eva-acc__summary:hover { background: rgba(28,77,77,.03); }
.eva-panel .eva-acc__summary:active { transform: scale(.99); }
.eva-panel .eva-acc__chev::before {
  content: "›"; font-size: 20px; color: var(--eva-text); font-weight: 500;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
/* [已移除] .eva-panel .eva-acc[open] > ... { transform: rotate(90deg); }
   与下方最新 chevron 规则（content:"" 折线 + 独立 rotate）叠加，且该 transform 无过渡，
   造成展开/收起瞬间 ±90° 瞬跳（视觉角 45°⇄135°），即「135° 卡一下」。 */
.eva-panel .eva-acc__chev {
  width: 22px; height: 22px; position: relative; flex: none;
}
.eva-panel .eva-acc__body { padding: 0; }  /* 底部间距由 .eva-acc__inner 承担（收进轨道、随动画归零） */

/* ==========================================================================
   去掉预览卡与控制区容器的大框（融进页面：无背景 / 无边框 / 无圆角容器）
   ========================================================================== */
.eva-panel .eva-preview {
  background: transparent;
  border: 0; border-radius: 0; padding: 0;
  box-shadow: none;
}
.eva-panel .eva-controls {
  background: transparent;
  border: 0; border-radius: 0; padding: 0;
  box-shadow: none;
}

/* ==========================================================================
   Feature131 完整移植（粗体大标题 · 折线 chevron · 行高呼吸）
   手风琴行 = 131 版式；展开内容 = EVA 原有功能控件（由 _ux_eva_title.js 注入）。
   ========================================================================== */
.eva-panel .eva-acc {
  border-top: 1px solid var(--eva-line); margin: 0; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;  /* 清除 KUMO 玻璃残留：透明底 + blur 会把红黑斜纹背景糊成磨砂条带 */
}
.eva-panel .eva-acc:last-child { border-bottom: 1px solid var(--eva-line); }
.eva-panel .eva-acc__summary {
  padding: 22px 2px;
  min-height: var(--eva-touch);
  font-size: 18px; font-weight: 700; letter-spacing: -.01em; text-transform: none;
  color: var(--eva-text);
  transition: transform .12s ease;
}
.eva-panel .eva-acc__summary:active { transform: scale(.99); }
.eva-panel .eva-acc__title { color: var(--eva-text); font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
/* 折线 chevron（131：灰色细折角，收起朝下、展开倒转朝上，弹簧缓动） */
.eva-panel .eva-acc__chev {
  width: 22px; height: 22px; position: relative; flex: none;
}
.eva-panel .eva-acc__chev::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--eva-muted); border-bottom: 2px solid var(--eva-muted);
  border-radius: 1px;
  translate: -50% -50%;
  rotate: 45deg;
  will-change: rotate;
  /* 独立 rotate 属性插值（角度数值，非 transform matrix）：180° 旋转不再经过
     matrix 插值的缩放塌陷点（135° 附近缩小/闪烁 = "卡一下"） */
  transition: rotate .3s cubic-bezier(.4,0,.2,1);
}
/* 折线 chevron 由 ac-open 类驱动（而非 details[open]）：收起时 JS 立即移除
   ac-open、箭头即刻反转与内容动画同步；details[open] 在收起动画结束后才置
   false，若依赖它会导致箭头滞后到动画播完才转。 */
.eva-panel .eva-acc.ac-open > .eva-acc__summary .eva-acc__chev::before {
  rotate: 225deg;
}
/* （padding 已移入 .eva-acc__inner，见 grid-rows 动画区） */

/* 消除横向溢出（底部横向滚动条/两边截断）：面板容器裁掉水平溢出
   背景统一纯白（与 131 的 section 式一致：header/内容融入白底、仅靠分隔线，无按钮色块感） */
.eva-panel { overflow-x: clip; }   /* 去掉白色面板壳，内容直接铺在背景（斜纹）上 */
/* 清除手风琴/平面的微灰投影（box-shadow 在纯白页面上形成微灰渐变带/分层感） */
.eva-panel .eva-acc,
.eva-panel .eva-classic-flat,
.eva-panel .eva-glyph-flat { box-shadow: none; }
/* 手风琴标题悬浮无任何效果（hover 无背景变化） */
.eva-panel .eva-acc__summary:hover { background: transparent; }
/* grid-rows 手风琴动画（合成器动画，不重排内容 → 帧率稳定，chevron/内容都丝滑）。
   :has 限定——宿主工具页若未包 .eva-acc__inner 则不受本规则影响（走原生 details）。
   收起轨道用 minmax(0, 0fr)（而非 0fr）：0fr 等价 minmax(auto, 0fr)，其 auto 最小尺寸
   保留 min-content（inner 的 padding/内容），轨道收不净 → 动画结束 open=false 时刻
   body 还有残留高度，页面布局瞬时跳变（"收回顿一下"）。minmax(0, …) 让轨道真正归零，
   transitionend（open=false）时几何已就位，无跳变。 */
.eva-panel .eva-acc__body:has(.eva-acc__inner) {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  overflow: hidden;
  opacity: 0; transform: translateY(6px);
  transition: grid-template-rows .38s cubic-bezier(.4,0,.2,1), opacity .26s ease .04s, transform .3s cubic-bezier(.4,0,.2,1) .04s;
}
.eva-panel .eva-acc__body:has(.eva-acc__inner) > .eva-acc__inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 2px 24px;   /* 内容底部呼吸空间（50→24：修复"展开尾与下一行分割线间隔过大"）；收起随轨道归零 */
}
.eva-panel .eva-acc.ac-open .eva-acc__body { opacity: 1; transform: none; }
.eva-panel .eva-acc.ac-open > .eva-acc__body:has(.eva-acc__inner) { grid-template-rows: minmax(0, 1fr); }

/* v9：JS 高度动画接管（全平台统一，Safari/WebKit 不支持 grid-rows 插值过渡）。
   当 ._acc_anim.js 给手风琴加 .js-anim 后，关闭 grid-rows 轨道与相关过渡，
   高度由 JS 控制（height 0 ↔ scrollHeight），任何浏览器行为一致。 */
.eva-panel .eva-acc.js-anim > .eva-acc__body:has(.eva-acc__inner),
.eva-panel .eva-acc.js-anim > .eva-acc__body {
  display: block;
  grid-template-rows: none;
  overflow: hidden;
  opacity: 1;
  transform: none;
  transition: none;
}
.eva-panel .eva-acc.js-anim > .eva-acc__body > .eva-acc__inner {
  min-height: 0;
  overflow: hidden;
}

/* ---------- EVA30：桌面画中画小窗（预览滚出视口一半后出现；≤860 禁用） ---------- */
.eva-pip {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 60;
  width: min(300px, 34vw);
  border-radius: 12px;
  overflow: hidden;
  background: var(--eva-panel2, #fff);
  border: 1px solid var(--eva-line);
  box-shadow: 0 10px 32px rgba(20, 30, 40, .18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  touch-action: none;      /* EVA30b：小窗可拖拽（触摸时不触发页面滚动） */
  user-select: none;
}
.eva-pip.on { opacity: 1; pointer-events: auto; transform: none; }
.eva-pip canvas { display: block; width: 100%; height: auto; }
@media (max-width: 1024px) { .eva-pip { display: none; } }  /* 2026-08-27：≤1024 平板/手机隐藏（与 .eva-pipw <1025 互补，防双 PIP；resize 兜底） */

/* ---------- EVA30：手机（≤860）配色卡放大（仅手机；桌面保持 5 列小卡） ---------- */
@media (max-width: 860px) {
  .eva-plan-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .eva-plan-card { height: 72px; }
}