/* One viewport, two work areas, one persistent help footer. */
body.app-shell {
  height:100vh; height:100dvh; min-height:0; overflow:hidden;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
}
body.app-shell:has(#editBar:not([hidden])) { padding-bottom:0; }
.app-shell .topbar { position:static; padding:14px 20px; flex:none; }
.app-shell .layout {
  width:auto; max-width:none; margin:0; padding:12px 18px 14px;
  min-height:0; grid-template-columns:clamp(340px,28vw,420px) minmax(0,1fr);
  gap:16px; align-items:stretch;
}
.app-shell .panel,.app-shell .stage {
  min-height:0; border:1px solid var(--line-2); border-radius:16px;
  background:var(--surface); overflow:hidden;
}
.app-shell .panel-scroll {
  flex:1; overflow:auto; padding:16px; gap:0;
  scrollbar-gutter:stable; overscroll-behavior:contain;
  -webkit-mask-image:none; mask-image:none;
}
.app-shell .panel-scroll .card {
  flex:none; margin:0; padding:18px 0; border:0; border-bottom:1px solid var(--line);
  border-radius:0; box-shadow:none; background:transparent; min-height:0;
  animation:none;
}
.app-shell .panel-scroll > .card:first-child { padding-top:0; }
.app-shell .panel-scroll > .card:last-child { border-bottom:0; }
.app-shell .chan-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.app-shell .chan-row .chip {
  width:100%; min-width:0; min-height:48px; padding:10px 4px;
  display:flex; justify-content:center; align-items:center; gap:6px;
  text-align:center; font-weight:600; font-size:14px;
}
.recommend-badge { display:inline-flex; align-items:center; justify-content:center; padding:2px 5px; border-radius:4px; background:var(--accent-wash); color:var(--accent-deep); font-size:10px; line-height:1.4; white-space:nowrap; }
.app-shell .chan-row [data-chan="paid"] { border-color:var(--accent-line); }
.app-shell .chan-row [data-chan="paid"][aria-pressed="true"] .recommend-badge { background:var(--accent-deep); color:var(--surface); }
.app-shell .paid-lead { font-size:13px; line-height:1.65; margin:14px 0; }
.app-shell .paid-panel { border:0; padding:0; background:transparent; }
.app-shell .print-area { height:100%; min-height:0; border:0; border-radius:0; padding:16px; background:transparent; }
.app-shell .stage-body { height:100%; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) clamp(220px,20vw,280px); align-items:stretch; gap:20px; }
.app-shell .stage-main { min-height:0; position:relative; display:flex; flex-direction:column; overflow:hidden; }
.app-shell .preview-bar { flex:none; margin:0; padding:0 0 10px; border:0; box-shadow:none; background:transparent; gap:8px; }
.app-shell .canvas-scroll { flex:1; min-height:120px; height:auto; max-height:none; margin:0; padding:10px; overflow:auto; scrollbar-gutter:stable; }
.app-shell .preview-note { flex:none; margin:8px 0 0; font-size:12px; }
.app-shell .stage-side { display:flex; flex-direction:column; gap:18px; min-height:0; overflow:auto; scrollbar-gutter:stable; overscroll-behavior:contain; padding-right:8px; }
.app-shell .stage-side .print-head { margin:0; padding:0; border:0; }
.app-shell .stage-side .print-head h2 { font-size:18px; margin:0 0 10px; }
.app-shell .print-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
.app-shell .stage-side .legend-block { margin:0; border:0; padding:0; }
.app-shell .legend-title-row { gap:8px; }
.app-shell .legend-title-row h3 { font-size:14px; }
.app-shell .legend-title-row .btn-ghost { padding:6px 8px; font-size:11px; min-height:36px; }
.app-shell .preview-settings { border-top:1px solid var(--line); padding-top:12px; font-size:13px; }
.preview-settings > summary { cursor:pointer; min-height:44px; display:list-item; padding:10px 0; color:var(--ink-2); font-weight:600; }
.preview-settings .field { margin-top:16px; }
.preview-settings .checkbox { font-size:13px; }
.preview-settings .subgroup-cap { font-size:12px; }
.app-shell .workbench-exports { display:grid; gap:10px; padding:0 0 8px; }
.app-shell .workbench-exports button { width:100%; min-height:44px; }
.app-shell .result-exports { display:none; }
.app-shell .edit-slot { height:0; margin:0; }
.app-shell .edit-intro { display:none; }
/* ★ 2026-10-25：编辑是「左侧工具架 + 画布」的工作台，不是给预览区再加一条工具条。
   顶栏负责状态，左侧负责工具与颜色，画布拿剩余的整块宽高；参数栏、材料清单、
   页脚和画布下方的操作提示在编辑时让位。预览工具栏保留 ——
   改格子时可以随时切「还没熨 / 熨烫后 / 平面图纸」核对效果，且切换不再重算图纸。 */
@media(min-width:901px) {
 .app-shell.is-editing-pattern .layout { grid-template-columns:minmax(0,1fr); }
 .app-shell.is-editing-pattern .panel,
 .app-shell.is-editing-pattern .stage-side,
 .app-shell.is-editing-pattern .preview-note { display:none; }
 .app-shell.is-editing-pattern .workbench-footer { display:none; }
 .app-shell.is-editing-pattern .stage-body { grid-template-columns:minmax(0,1fr); gap:0; }
 .app-shell.is-editing-pattern .stage-main {
   display:grid; grid-template-columns:clamp(232px,20vw,280px) minmax(0,1fr);
   grid-template-rows:minmax(0,1fr); gap:16px; overflow:hidden;
 }
 .app-shell.is-editing-pattern .edit-slot {
   grid-column:1; grid-row:1; display:flex; flex-direction:column;
   height:auto; min-height:0; margin:0;
 }
 .app-shell.is-editing-pattern #canvasScroll {
   grid-column:2; grid-row:1; height:auto; min-height:0;
 }
 /* 工具架：工具钉左上 → 坐标/颜色（内部滚动）→ 提示留左下。
    取消/保存在顶部缩放控件右侧，工具架里没有任何沉底的出口按钮。
    四个工具等宽排一行（图标在上、文字在下），不分组、不加小标题。 */
 .app-shell.is-editing-pattern .edit-bar {
   display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
   flex:1 1 auto; gap:12px; width:100%; height:auto; min-height:0; max-width:none;
   margin:0; padding:14px 12px; border-radius:12px; overflow:hidden; box-shadow:none;
 }
 .app-shell.is-editing-pattern .edit-tools {
   flex:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;
   padding-bottom:12px; border-bottom:1px solid var(--line-2);
 }
 .app-shell.is-editing-pattern .edit-tools .btn-ghost {
   flex-direction:column; gap:3px; height:52px; min-height:52px;
   padding:5px 2px; font-size:10.5px; line-height:1.1;
 }
 .app-shell.is-editing-pattern .edit-tools .btn-ico { width:18px; height:18px; }
 .app-shell.is-editing-pattern .edit-row-main {
   flex:1 1 auto; min-height:0; overflow-y:auto; flex-wrap:wrap; align-items:flex-start;
   align-content:flex-start; gap:8px; padding-right:2px;
 }
 .app-shell.is-editing-pattern .edit-pos {
   flex:1 1 100%; width:auto; white-space:normal; overflow:visible; line-height:1.5;
 }
 .app-shell.is-editing-pattern .edit-swatch-label { flex:1 1 auto; }
 .app-shell.is-editing-pattern .edit-swatches {
   flex:1 1 100%; flex-wrap:wrap; overflow:visible; min-width:0;
   padding:0; gap:4px; -webkit-mask-image:none; mask-image:none;
 }
 .app-shell.is-editing-pattern .es-chip { height:30px; }
 .app-shell.is-editing-pattern .edit-more {
   flex:1 1 100%; height:36px; min-height:36px; margin:0;
   justify-content:center; border-radius:8px;
 }
 .app-shell.is-editing-pattern .edit-hint {
   flex:none; margin:0; white-space:normal; overflow:visible;
   font-size:11px; line-height:1.5; text-align:left;
 }
 /* 编辑时顶栏只留状态：图纸库与创作记录让位给状态文字
    （窄桌面 901–1150 也能看见「编辑中」）；出口在缩放旁边。 */
 .app-shell.is-editing-pattern #linkLibrary,
 .app-shell.is-editing-pattern #btnHistory { display:none; }
}
.app-shell.is-editing-pattern .preview-bar #btnEdit { display:none; }
@media(max-width:1150px) and (min-width:901px) {
 .app-shell.is-editing-pattern .topbar .status-text { display:inline-flex; max-width:44vw; }
}
/* 标题「✏️ 这张图可以改」不占位：编辑条只在编辑态出现，
   按钮按下态和整条浅色底已经说明状态，这 88px 让给色块条。 */
.app-shell .edit-title { display:none; }
.app-shell .empty-state { height:100%; min-height:0; margin:0; border:0; border-radius:0; padding:24px; }
.app-shell .workbench-footer {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px 24px;
  width:100%; margin:0; padding:10px 24px 12px; border-top:1px solid var(--line);
  background:var(--paper); color:var(--ink-3); font-size:12px;
}
.footer-brand { display:inline-flex; align-items:center; gap:8px; min-width:0; color:var(--ink-2); font-weight:600; white-space:nowrap; }
.footer-mark { display:block; width:22px; height:22px; flex:none; object-fit:contain; }
.footer-brand-text { overflow:hidden; text-overflow:ellipsis; }
.footer-help,.footer-legal { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; }
.footer-help { justify-self:center; }
.footer-legal { justify-self:end; }
.footer-help a { color:var(--ink-2); text-decoration:none; font-weight:500; }
.footer-legal a { color:var(--ink-3); text-decoration:none; }
.footer-help a:hover,.footer-legal a:hover { text-decoration:underline; text-underline-offset:4px; }
.help-drawer { margin:0 0 0 auto; width:min(480px,100%); max-width:100%; height:100dvh; max-height:100dvh; padding:0; border:0; border-left:1px solid var(--line); color:var(--ink); background:var(--surface); }
.help-drawer::backdrop { background:rgb(20 15 10 / .25); }
.help-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; border-bottom:1px solid var(--line); }
.help-head h2 { margin:0; font-size:20px; }
.help-content { padding:12px 24px 32px; font-size:16px; line-height:1.8; overflow:auto; max-height:calc(100dvh - 88px); }
.help-content li { margin-bottom:16px; }
.help-content a { color:var(--accent-deep); }
.app-shell :is(.panel-scroll,.stage-side):focus-visible { outline:2px solid var(--accent-deep); outline-offset:-3px; }
@media(max-width:1150px) and (min-width:901px) {
 .app-shell .layout { grid-template-columns:280px minmax(0,1fr); gap:12px; }
 .app-shell .stage-body { grid-template-columns:minmax(0,1fr) 240px; gap:12px; }
 .app-shell .print-area { padding:12px; }
 .app-shell .topbar .status-text { display:none; }
}
@media(max-width:900px) {
 .app-shell .topbar { padding:8px 12px; }
 .app-shell .layout { grid-template-columns:minmax(0,1fr); padding:8px 10px 10px; gap:0; }
 .app-shell .mobile-flow:not([hidden]) { display:flex; }
 .app-shell .panel { display:flex; }
 .app-shell .stage { display:none; }
 .app-shell.mobile-view-preview .panel { display:none; }
 .app-shell.mobile-view-preview .stage { display:block; }
 .app-shell .panel-scroll { padding:16px; }
 .app-shell .stage-body { display:flex; flex-direction:column; height:auto; min-height:100%; gap:20px; }
 .app-shell .print-area { overflow:auto; scrollbar-gutter:stable; padding:12px; }
 .app-shell .stage-main { flex:none; overflow:visible; }
 .app-shell .canvas-scroll { height:clamp(240px,48dvh,520px); flex:none; min-height:240px; }
 .app-shell .stage-side { overflow:visible; padding:0; }
 .app-shell .print-meta { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .app-shell .edit-bar { position:fixed; z-index:55; left:0; right:0; bottom:74px; height:calc(116px + env(safe-area-inset-bottom,0px)); margin:0; border-radius:0; padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)); justify-content:flex-start; }
 /* 手机/平板同样进入专注态：画布提示和下方的清单/导出先收起；
    预览工具栏保留 —— 改格子时能随时切三种视图，切换不再重建图纸。 */
 .app-shell.is-editing-pattern .preview-note,
 .app-shell.is-editing-pattern .stage-side,
 .app-shell.is-editing-pattern .workbench-footer { display:none; }
 /* 页脚收起后，贴底编辑条直接落到屏幕底部，把页脚原本占的 74px 还给画布。 */
 .app-shell.is-editing-pattern .edit-bar { bottom:0; }
 /* ★ 2026-10-25：手机屏幕窄，编辑时把左右留白也让给图纸。
    浏览态画布左右共 46px 的容器留白，390px 屏上图纸只有 322px；
    专注态收起边框与内边距后图纸到 370px，格子从 26.8px 到 30.8px，
    手指点格更准。平板图纸已到 100%，这里只是把留白变宽，不会缩小。 */
 /* 顶部留 8px 与顶栏分开；左右仍满宽，保证画布拿到最大宽度。 */
 .app-shell.is-editing-pattern .layout { padding:8px 0 10px; }
 .app-shell.is-editing-pattern .stage { border-left:0; border-right:0; border-radius:0; }
 .app-shell.is-editing-pattern .print-area { padding-left:6px; padding-right:6px; }
 .app-shell.is-editing-pattern .canvas-scroll { padding-left:4px; padding-right:4px; }
 /* 641–900px 原来只继承了贴底固定，却仍是桌面 26px 的按钮 —— 触控目标不够，
    而且 116px 的空条里只居中两行小控件。触控尺寸和手机统一到 ≤900px。 */
 .app-shell .edit-row { min-height:44px; gap:8px; }
 .app-shell .edit-bar button,.app-shell .edit-bar .es-chip,.app-shell .edit-bar .btn-ghost,.app-shell .edit-bar .edit-more { min-width:44px; min-height:44px; height:44px; padding:8px; font-size:13px; flex-shrink:0; }
 /* 窄屏也保持「工具在上、颜色在下」：四颗等宽工具铺满一行，图标居中。
    提示让位（触屏没有右键和 Esc），两个出口在顶部缩放旁边。 */
 .app-shell .edit-tools { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; }
 .app-shell .edit-tools .btn-ghost { width:100%; }
 .app-shell .edit-hint { display:none; }
 .app-shell .workbench-footer {
   grid-template-columns:auto minmax(0,1fr);
   grid-template-areas:"help help" "brand legal";
   padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px));
   gap:2px 12px; font-size:11px;
 }
 .footer-brand { grid-area:brand; min-height:32px; }
 .footer-help { grid-area:help; width:100%; gap:12px; }
 .footer-help a { min-height:32px; display:inline-flex; align-items:center; }
 .footer-legal { grid-area:legal; justify-self:end; gap:12px; min-height:32px; }
 .footer-legal a { display:inline-flex; align-items:center; min-height:32px; }
}
/* 窄屏编辑头：只留品牌标记、状态与主题键。
   会中断编辑的入口（图纸库/创作记录/两枚视图切换）先收起，
   品牌也只保留标记与名字 —— 一行 44px，把高度还给画布。
   手机 ≤640 的「品牌一行、状态一行」在这里统一成一行。 */
@media(max-width:900px) {
 .app-shell.is-editing-pattern .topbar { flex-wrap:nowrap; align-items:center; gap:10px; }
 .app-shell.is-editing-pattern .topbar .brand { flex:none; width:auto; min-width:0; }
 .app-shell.is-editing-pattern .topbar .brand-purpose,
 .app-shell.is-editing-pattern .topbar .tagline,
 .app-shell.is-editing-pattern .topbar .mobile-flow,
 .app-shell.is-editing-pattern .topbar #linkLibrary,
 .app-shell.is-editing-pattern .topbar #btnHistory { display:none; }
 .app-shell.is-editing-pattern .topbar-actions {
   display:flex; flex:1 1 auto; width:auto; min-width:0;
   justify-content:flex-end; align-items:center; gap:8px; margin-top:0;
 }
 .app-shell.is-editing-pattern .topbar .status-text {
   display:inline-flex; width:auto; max-width:100%; min-width:0;
 }
 .app-shell.is-editing-pattern .topbar .status-label {
   overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
 }
}
@media print {
 body.app-shell { display:block; height:auto; overflow:visible; }
 .app-shell .layout,.app-shell .stage,.app-shell .print-area { display:block !important; height:auto; overflow:visible; max-height:none; margin:0; padding:0; border:0; }
 .app-shell .panel,.app-shell .workbench-footer,.help-drawer { display:none !important; }
}
.app-shell .empty-state.has-demo { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; overflow:auto; }
.empty-state.has-demo .empty-art,.empty-state.has-demo .empty-steps { display:none; }
.app-shell .empty-state.has-demo h2 { margin:0; font-size:clamp(20px,2vw,28px); }
.app-shell .empty-state.has-demo p { margin:0; max-width:48ch; }
.workbench-demo:not([hidden]) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; width:min(820px,100%); order:1; margin-top:12px; }
.workbench-demo figure { margin:0; min-width:0; }
.workbench-demo img { display:block; width:100%; height:clamp(150px,27dvh,300px); object-fit:contain; border-radius:10px; background:var(--surface); border:1px solid var(--line); }
.workbench-demo figcaption { padding-top:10px; text-align:center; font-size:13px; color:var(--ink-2); }
@media(max-width:900px) {
 .workbench-demo:not([hidden]) { gap:8px; }
 .workbench-demo img { height:140px; }
 .app-shell .empty-state.has-demo { padding:16px; }
 .workbench-demo figcaption { font-size:11px; }
}
.app-shell :is(.panel-scroll,.stage-side,.print-area) { scrollbar-width:thin; scrollbar-color:var(--line-3) transparent; }
.app-shell :is(.panel-scroll,.stage-side,.print-area)::-webkit-scrollbar { width:7px; height:7px; }
.app-shell :is(.panel-scroll,.stage-side,.print-area)::-webkit-scrollbar-thumb { border-radius:8px; background:var(--line-3); border:2px solid var(--surface); }
@media(max-width:900px) {
 .app-shell:not(.mobile-view-preview) .layout .stage { display:none; }
 .app-shell.mobile-view-preview .layout .stage { display:block; }
 .app-shell:not(.mobile-view-preview) .layout .panel { height:100%; }
}
.app-shell .import-banner[hidden] { display: none; }
.app-shell .import-banner {
  flex: none; display: flex; align-items: center; gap: 16px;
  margin: 14px 18px 0; padding: 12px 16px;
  border: 1px solid var(--accent-line); border-radius: 14px;
  background: var(--accent-wash);
}
.app-shell .import-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-shell .import-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--accent-deep); text-transform: uppercase;
}
.app-shell .import-copy strong {
  font-size: 15px; line-height: 1.35; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-shell .import-meta { font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.app-shell .import-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.app-shell .import-actions .btn-ghost,
.app-shell .import-actions .btn-primary { min-height: 44px; padding: 8px 14px; font-size: 13px; }
/* 作品模式：参数栏让位给图纸，只保留预览、清单与导出。 */
@media (min-width: 901px) {
  .app-shell.is-import .layout { grid-template-columns: minmax(0, 1fr); }
  .app-shell.is-import .panel { display: none; }
}
@media (max-width: 900px) {
  .app-shell.is-import .panel { display: none; }
  .app-shell.is-import .mobile-flow { display: none; }
  .app-shell.is-import.mobile-view-preview .layout .stage { display: flex; }
}
.app-shell.is-import .layout .stage { display: flex; flex-direction: column; min-height: 0; }
.app-shell.is-import .print-area { flex: 1; height: auto; min-height: 0; }
.app-shell.is-import .preview-settings .field:has(#cutBg),
.app-shell.is-import .preview-settings .advanced { display: none; }
@media (max-width: 900px) {
  .app-shell .import-banner { margin: 10px 12px 0; padding: 12px; gap: 10px; flex-wrap: wrap; }
  .app-shell .import-actions { width: 100%; margin-left: 0; }
  .app-shell .import-actions .btn-ghost,
  .app-shell .import-actions .btn-primary { flex: 1; }
  .app-shell .import-copy strong { white-space: normal; }
}

.app-shell .workbench-footer { min-height:56px; }
@media(max-width:900px) { .app-shell .workbench-footer { min-height:calc(72px + env(safe-area-inset-bottom,0px)); } }
@media(max-width:380px) { .app-shell .footer-brand-text { display:none; } }
.app-shell .chan-row .chip { position:relative; }
.app-shell .chan-row .recommend-badge { position:absolute; top:-8px; right:8px; padding:3px 6px; background:var(--accent-deep); color:var(--surface); }
/* The work surface stays still while entering or leaving editing. */
.app-shell .print-area.is-fresh #preview { animation:none; }

/* 0.11.1 — one shared command row, aligned work surface and materials rail. */
.app-shell .print-area:not([hidden]) { display:flex; flex-direction:column; gap:16px; }
.app-shell .print-area > .preview-bar {
 display:flex; flex-wrap:nowrap; align-items:center; width:100%; min-height:44px;
 padding:0 0 14px; border-bottom:1px solid var(--line); gap:12px; container-type:normal;
}
.app-shell .preview-bar .seg-cap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.app-shell .preview-bar #previewStyle { flex:none; }
.app-shell .preview-bar .zoom-controls { margin-left:auto; }
.app-shell .preview-bar .flip-btn,.app-shell .preview-bar #btnEdit { min-height:36px; padding:7px 12px; white-space:nowrap; }
.app-shell .preview-bar .flip-btn { border-color:transparent; background:transparent; }
.app-shell .preview-bar #btnEdit { border-color:var(--accent-line); background:var(--surface); color:var(--accent-deep); }
.app-shell .preview-bar #btnEdit:hover,.app-shell .preview-bar .flip-btn:hover { background:var(--surface-sunk); }
.app-shell .preview-bar #btnEdit:hover { border-color:var(--accent); background:var(--accent-wash); }
.app-shell .preview-bar #btnEdit[aria-pressed="true"] { color:var(--accent-deep); background:var(--accent-wash); border-color:var(--accent-line); }
.app-shell .stage-body { flex:1; height:auto; min-height:0; gap:20px; }
.app-shell .stage-main { min-height:0; }
.app-shell .canvas-scroll { border-radius:12px; border-color:var(--line); box-shadow:none; }
.app-shell .stage-side {
 display:grid; grid-template-columns:minmax(0,1fr);
 /* ★ 2026-10-25：725 高的笔记本屏幕上，标题/数据/导出把 1fr 挤成了 0 ——
    清单标题还在，色号一行都不剩。给清单一条真实的最小高度，
    再把上面几块收紧，让它在 1438×725 里也能露出 3 行左右。 */
 grid-template-rows:auto minmax(116px,1fr) auto auto; align-items:stretch;
 gap:12px; border-left:1px solid var(--line); padding:0 0 0 20px;
 overflow:auto; scrollbar-gutter:auto;
}
.app-shell .stage-side .print-head h2 { font-size:15px; letter-spacing:-.01em; margin-bottom:6px; line-height:1.35; }
.app-shell .print-meta { margin:0; grid-template-columns:.9fr .8fr 1.4fr; background:transparent; border:0; gap:6px 8px; border-radius:0; }
.app-shell .print-meta .tb-cell { padding:0; border:0; background:transparent; }
.app-shell .print-meta .tb-v { font-size:14px; color:var(--ink); }
.app-shell .print-meta .tb-k { color:var(--ink-3); font-size:11px; margin-top:2px; }
.app-shell .print-meta .is-sub .tb-v { font-size:12px; }
.app-shell .print-meta .tb-cell:nth-child(3) .tb-v { font-size:13px; }
.app-shell .estimate-note { margin-top:4px; padding-bottom:8px; border-bottom:1px solid var(--line); font-size:11px; }
.app-shell .stage-side .legend-block { display:flex; flex-direction:column; gap:8px; min-height:0; }
.app-shell .legend-title-row { flex:none; align-items:center; }
.app-shell .legend-title-row h3 { font-size:14px; letter-spacing:.01em; }
.app-shell .legend-title-row .btn-ghost { min-height:32px; padding:4px 0; background:transparent; border:0; text-decoration:underline; text-underline-offset:4px; color:var(--ink-3); }
.app-shell .legend-list { flex:1; min-height:0; overflow:auto; padding-right:8px; scrollbar-width:thin; scrollbar-color:var(--line-3) transparent; align-content:start; }
.app-shell .legend-item { padding-top:7px; padding-bottom:7px; }
.app-shell .preview-settings { position:relative; padding-top:0; }
.app-shell .preview-settings-content { position:absolute; z-index:5; left:0; right:0; bottom:100%; max-height:min(420px,calc(100dvh - 390px)); overflow:auto; padding:16px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface); box-shadow:var(--sh-2); overscroll-behavior:contain; }
.app-shell .workbench-exports { padding:0; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.app-shell .workbench-exports #btnPrint { grid-column:1 / -1; }
.app-shell .workbench-exports button { min-height:44px; padding-left:8px; padding-right:8px; }
.app-shell .workbench-exports .btn-ghost { border-color:var(--line-2); background:var(--surface); }
.app-shell .workbench-exports .btn-primary { min-height:48px; padding:12px; font-size:14px; border-radius:var(--r-sm); }
.app-shell .workbench-exports .btn-ghost:hover:not(:disabled) { border-color:var(--accent-line); background:var(--accent-wash); }
@media(max-width:1150px) and (min-width:901px) {
 .app-shell .preview-bar { gap:8px; }
 .app-shell .preview-bar .seg button { padding-left:12px; padding-right:12px; }
 .app-shell .preview-bar #btnEdit,.app-shell .preview-bar .flip-btn { padding-left:8px; padding-right:8px; }
 .app-shell .stage-side { padding-left:12px; gap:12px; }
 .app-shell .print-meta { gap:10px 8px; }
 .app-shell .stage-side .print-head h2 { margin-bottom:10px; }
 .app-shell .estimate-note { margin-top:8px; padding-bottom:10px; }
}
@media(max-width:900px) {
 .app-shell .print-area:not([hidden]) { display:block; }
 .app-shell .focus-bar,
 .app-shell .build-bar { margin:0 0 12px; }
 .app-shell .print-area > .preview-bar { flex-wrap:wrap; padding:0 0 12px; margin-bottom:12px; gap:8px; }
 .app-shell .preview-bar #previewStyle { width:100%; }
 .app-shell .preview-bar .zoom-controls { margin-left:auto; }
 .app-shell .preview-bar .zoom-controls .zoom-btn { min-width:36px; }
 .app-shell .preview-bar #btnEdit,.app-shell .preview-bar .flip-btn { min-height:44px; padding:8px; }
 .app-shell .stage-body { display:flex; }
 .app-shell .stage-side { display:flex; padding:20px 0 0; border-left:0; border-top:1px solid var(--line); overflow:visible; }
 .app-shell .print-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
 .app-shell .stage-side .legend-block { min-height:140px; max-height:320px; }
 .app-shell .legend-title-row .btn-ghost { min-height:44px; }
 .app-shell .preview-settings { width:100%; }
 .app-shell .workbench-exports { width:100%; }
}
@media print {
 .app-shell .print-area:not([hidden]) { display:block; }
 .app-shell .print-area > .preview-bar { display:none !important; }
}

@media(min-width:901px) and (max-width:1000px) {
 .app-shell .print-area > .preview-bar { display:grid; grid-template-columns:1fr auto auto; gap:8px; }
 .app-shell .preview-bar #previewStyle { grid-column:1 / -1; justify-self:start; }
 .app-shell .preview-bar .zoom-controls { grid-column:3; }
 /* 901–1000 的网格只为「预览样式独占一行」而设；编辑时出口也进来以后，
    网格的 1fr 列会把「取消」拉成半行宽。编辑态退回 flex：
    第一行预览样式，第二行缩放 + 取消 + 保存退出，靠右对齐。 */
 .app-shell.is-editing-pattern .print-area > .preview-bar { display:flex; flex-wrap:wrap; }
 .app-shell.is-editing-pattern .preview-bar #previewStyle { flex:1 1 100%; width:auto; }
 .app-shell.is-editing-pattern .preview-bar .zoom-controls { margin-left:auto; }
}
@media(max-width:360px) {
 /* 320px 的预览工具条原本让缩放独占整行，出口会被挤到第三行。
    编辑时把缩放和两个出口并成一行：去掉「适应」按钮（双指/双击仍可适应），
    取消收成 44px 的 ×，保存保留下面的「保存」文字。 */
 .app-shell.is-editing-pattern .print-area > .preview-bar {
   grid-template-columns:minmax(0,1fr) auto auto; align-items:center;
 }
 .app-shell.is-editing-pattern .preview-bar #previewStyle { grid-column:1 / -1; }
 .app-shell.is-editing-pattern .preview-bar .zoom-controls {
   grid-column:1; width:auto; margin:0; justify-content:flex-start;
 }
 .app-shell.is-editing-pattern .preview-bar #btnZoomFit { display:none; }
 .app-shell.is-editing-pattern .preview-bar #btnCancelEdit { grid-column:2; }
 .app-shell.is-editing-pattern .preview-bar #btnDone { grid-column:3; }
 .app-shell.is-editing-pattern .preview-bar .preview-cancel { width:44px; padding:0; }
 .app-shell.is-editing-pattern .preview-bar .preview-cancel span { display:none; }
}
@media(max-width:900px) {
 .app-shell .preview-settings-content { position:static; max-height:360px; margin-bottom:12px; }
}
@media(max-width:360px) {
 .app-shell .print-area > .preview-bar { display:grid; grid-template-columns:1fr 1fr; }
 .app-shell .preview-bar #previewStyle,.app-shell .preview-bar .zoom-controls { grid-column:1 / -1; width:100%; }
 .app-shell .preview-bar .zoom-controls { justify-content:center; margin:0; }
 .app-shell .preview-bar:has(.flip-btn[hidden]) #btnEdit { grid-column:1 / -1; }
}

/* Q版未生成时只展示明确标注的模糊占位。 */
.workbench-demo.is-q-pending:not([hidden]) { display:block; position:relative; width:min(680px,100%); height:clamp(260px,48dvh,520px); flex:none; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--surface-sunk); }
.workbench-demo.is-q-pending figure { width:100%; height:100%; }
.workbench-demo.is-q-pending img { width:100%; height:100%; border:0; border-radius:0; object-fit:contain; filter:blur(12px); opacity:.65; transform:scale(1.04); pointer-events:none; user-select:none; }
.workbench-demo.is-q-pending .q-preview-message { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(350px,calc(100% - 32px)); padding:24px; border:1px solid var(--line-2); border-radius:12px; background:color-mix(in srgb,var(--surface) 95%,transparent); box-shadow:var(--sh-1); }
.q-preview-message .q-preview-label { display:block; font-size:18px; font-weight:650; color:var(--ink); }
.q-preview-message small { display:block; margin:10px 0 20px; font-size:12px; line-height:1.6; color:var(--ink-2); }
.q-preview-message .btn-primary { min-height:48px; padding:12px; font-size:14px; }
@media(max-width:900px) {
 .workbench-demo.is-q-pending:not([hidden]) { height:clamp(260px,42dvh,420px); }
 .workbench-demo.is-q-pending .q-preview-message { padding:20px 16px; }
}

/* Generation feedback: occupied, quiet, and distinct from an available action. */
.q-wait-art { display:grid; grid-template-columns:repeat(3,14px); gap:5px; justify-content:center; margin:0 auto 18px; }
.q-wait-art[hidden],.q-wait-stage[hidden],.q-wait-tip[hidden] { display:none; }
.q-wait-art i { width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--surface) 45%,transparent); animation:qBeadPlace 2.4s ease-in-out infinite; }
.q-wait-art i:nth-child(3n+2) { animation-delay:.2s; }
.q-wait-art i:nth-child(3n) { animation-delay:.4s; }
.q-wait-stage { font-size:12px; color:var(--ink-2); margin:0 0 12px; font-variant-numeric:tabular-nums; }
.q-wait-tip { font-size:13px; line-height:1.7; min-height:3.4em; padding-top:16px; border-top:1px solid var(--line); margin:18px 0; color:var(--ink-2); }
.is-generating .q-preview-message { display:flex; flex-direction:column; }
.is-generating .q-preview-label { order:-2; }
.is-generating .q-wait-art { order:-3; }
.is-generating .q-preview-message small { margin:8px 0 0; }
#btnAI:disabled[aria-busy="true"],.is-generating #btnPreviewContinue:disabled { background:var(--surface-sunk); color:var(--ink-2); border:1px solid var(--line-2); box-shadow:none; cursor:wait; }
#qTimeChips button:disabled { opacity:.5; cursor:wait; }
@keyframes qBeadPlace { 0%,100% { opacity:.4; transform:translateY(-3px); } 35%,65% { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .q-wait-art i,.ai-step[data-state="run"] i { animation:none; } }
@media (max-width:720px) { .is-generating .q-preview-message { padding:18px 16px; } .q-wait-tip { font-size:12px; margin:12px 0; } }

.workbench-demo.is-generating:not([hidden]) { min-height:390px; }
@media (max-width:720px) { .workbench-demo.is-generating:not([hidden]) { min-height:380px; } }

/* Support uses the existing drawer so the workbench keeps its full preview. */
.help-content textarea { display:block; width:100%; box-sizing:border-box; margin-top:8px; padding:12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--surface); font:inherit; line-height:1.6; resize:vertical; min-height:132px; }
.help-content textarea:focus-visible { outline:2px solid var(--accent-deep); outline-offset:3px; }
.help-content .feedback-note { font-size:13px; color:var(--ink-3); }
.feedback-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.feedback-actions button,.feedback-actions a { min-height:44px; display:inline-flex; align-items:center; }
.feedback-actions [hidden] { display:none; }
.help-content pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; }
.help-content details { margin:20px 0; }
.help-content summary { cursor:pointer; min-height:44px; }

#btnRestoreQTime { min-height:44px; margin-top:10px; max-width:100%; white-space:normal; }