@charset "UTF-8";

    :root {
      --bg: #eef1f6;
      --panel: #ffffff;
      --panel-2: #f5f8fc;
      --ink: #1c2530;
      --muted: #6b7785;
      --line: #e6eaf0;
      --line-strong: #cbd3dd;
      --tool: #2563eb;
      --tool-2: #1d4ed8;
      --tool-soft: #eaf1ff;
      --accent: #2563eb;
      --accent-2: #c98a3a;
      --danger: #e5484d;
      --danger-soft: #fdecec;
      --success: #16a34a;
      --selected-color: #2563eb;
      --selected-bg: #eaf1ff;
      --white: #ffffff;
      --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 14px rgba(16, 24, 40, 0.06);
      --shadow: 0 10px 30px rgba(16, 24, 40, 0.10);
      --shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.22);
      --radius: 14px;
      --radius-sm: 10px;
      --radius-xs: 8px;
    }

    * { box-sizing: border-box; }

    [hidden] { display: none !important; }

    html,
    body {
      height: 100%;
      margin: 0;
    }

    body {
      overflow-x: hidden;
      overflow-y: auto;
      color: var(--ink);
      background:
        linear-gradient(90deg, rgba(32, 37, 42, 0.035) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(0deg, rgba(32, 37, 42, 0.035) 1px, transparent 1px) 0 0 / 28px 28px,
        var(--bg);
      font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
    }

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

    button {
      border: 0;
      border-radius: 8px;
      cursor: pointer;
      color: var(--white);
      background: var(--tool);
      font-family: inherit;
      font-size: 14px;
      font-weight: 500;
      min-height: 40px;
      padding: 0 14px;
      transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
    }

    button:hover {
      background: var(--tool-2);
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(32, 37, 42, 0.18);
    }

    button:active {
      transform: translateY(0);
    }

    button.primary {
      background: var(--tool);
    }

    button.primary:hover {
      background: var(--tool-2);
    }

    button.secondary {
      color: var(--white);
      background: var(--tool);
      box-shadow: none;
    }

    button.secondary:hover {
      background: var(--tool-2);
    }

    #btnZoomOut,
    #btnZoomIn,
    #btnFit,
    #btnResetPoints {
      color: #ffffff;
      background: #6B7280;
    }

    #btnZoomOut:hover,
    #btnZoomIn:hover,
    #btnFit:hover,
    #btnResetPoints:hover {
      background: #4B5563;
    }

    button.danger {
      background: var(--danger);
    }

    button.danger:hover {
      background: #963b3b;
    }

    .app {
      height: 100vh;
      display: grid;
      grid-template-columns: 340px minmax(0, 1fr);
      gap: 14px;
      padding: 14px;
      overflow: hidden;
    }

    .sidebar,
    .workspace {
      min-width: 0;
      min-height: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #ffffff;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .sidebar {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 14px;
      background: var(--bg);
      overflow: auto;
    }

    /* 任务按钮组：桌面端 contents（子元素升格为侧栏直接子项，布局零变化）；
       手机端在 media 内改为 2 列网格，节省纵向空间 */
    .task-actions {
      display: contents;
    }

    .brand {
      display: grid;
      gap: 8px;
      padding-bottom: 4px;
      border-bottom: 1px solid var(--line);
    }

    .toolbar-title {
      margin: 0;
      margin-bottom: 12px;
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: 0;
      color: #111827;
      font-weight: 700;
      text-align: center;
    }

    .brand .sub {
      color: var(--muted);
      font-size: 12px;
    }

    .panel {
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #ffffff;
    }

    .calibration-panel {
      padding-top: 8px;
      padding-bottom: 8px;
    }

    .panel h2 {
      margin: 0;
      font-size: 14px;
      line-height: 1.2;
    }

    /* 上传区 — 居中 hero 卡片 */
    .upload {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 140px;
      padding: 22px 16px;
      border-radius: 16px;
      border: 2px dashed var(--tool);
      background: linear-gradient(180deg, #ffffff, #f3f8ff);
      text-align: center;
      cursor: pointer;
      transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
      box-shadow: 0 2px 10px rgba(37, 99, 235, 0.08);
    }

    .upload input {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }

    .upload-ico {
      width: 46px;
      height: 46px;
      color: var(--tool);
      opacity: .9;
      margin-bottom: 2px;
    }

    .upload strong {
      font-size: 19px;
      font-weight: 800;
      letter-spacing: .5px;
      color: var(--ink);
    }

    .upload span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .upload .upload-hint {
      font-size: 12px;
      color: #7c8aa0;
      margin-top: 1px;
    }

    /* 首页使用说明 — 可折叠步骤时间轴 */
    .guide-panel {
      padding: 11px 14px 13px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #ffffff, #f6faff);
      box-shadow: 0 2px 10px rgba(37, 99, 235, 0.06);
    }
    .guide-panel > summary {
      display: flex;
      align-items: center;
      gap: 8px;
      list-style: none;
      cursor: pointer;
      user-select: none;
      font-size: 13.5px;
      font-weight: 700;
      color: var(--ink);
    }
    .guide-panel > summary::-webkit-details-marker { display: none; }
    .guide-ico {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      color: var(--tool);
    }
    .guide-toggle {
      margin-left: auto;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid var(--muted);
      transition: transform .18s ease;
    }
    .guide-panel[open] .guide-toggle { transform: rotate(180deg); }
    .guide-steps {
      list-style: none;
      margin: 10px 0 0;
      padding: 0;
    }
    .guide-steps li {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 26px;
      font-size: 12.5px;
      line-height: 1.35;
      color: #3d4a5c;
    }
    .guide-steps li::before {
      content: '';
      position: absolute;
      left: 10px;
      top: 0;
      bottom: 0;
      width: 1.5px;
      background: #dbe6fa;
    }
    .guide-steps li:first-child::before { top: 50%; }
    .guide-steps li:last-child::before { bottom: 50%; }
    .guide-no {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 21px;
      height: 21px;
      border-radius: 50%;
      border: 1px solid #d3e2ff;
      background: #eaf1ff;
      color: var(--tool);
      font-size: 11px;
      font-weight: 800;
    }
    .guide-steps li:last-child .guide-no {
      border-color: transparent;
      background: linear-gradient(180deg, var(--tool), var(--tool-2));
      color: #fff;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
    }
    /* 使用说明底部技术支持行（不属于编号步骤） */
    .guide-support {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 10px;
      padding-top: 9px;
      border-top: 1px dashed #dbe6fa;
      font-size: 12.5px;
      line-height: 1.35;
      color: #3d4a5c;
    }
    .guide-support-ico {
      width: 15px;
      height: 15px;
      flex: 0 0 auto;
      color: var(--tool);
    }
    .guide-support a {
      color: var(--tool);
      font-weight: 700;
      text-decoration: none;
      letter-spacing: .2px;
    }
    .guide-support a:hover { text-decoration: underline; }

    .note {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .field {
      display: grid;
      gap: 5px;
    }

    .field label {
      color: var(--muted);
      font-size: 12px;
    }

    .field input[type="number"],
    .field input[type="text"],
    .field input[type="password"],
    .field select,
    .field textarea,
    .sidebar select,
    .sidebar textarea {
      width: 100%;
      height: 38px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--white);
      color: #111827;
      padding: 6px 8px;
      font-family: inherit;
      font-size: 14px;
      outline: none;
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus,
    .sidebar select:focus,
    .sidebar textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.15);
    }

    input[type="range"] {
      width: 100%;
      accent-color: var(--accent);
    }

    .sidebar button:not(.danger):not(.clear-task-button):not(.cut-shape-delete) {
      font-family: inherit;
      font-size: 14px;
      font-weight: 500;
    }

    .toolbar {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .toolbar .wide {
      grid-column: 1 / -1;
    }

    .calibration-advanced-control {
      display: none !important;
    }

    .save-status {
      min-height: 22px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .save-status.ok {
      color: #1f6b58;
    }

    .save-status.warn {
      color: var(--accent-2);
    }

    /* 项目保存/恢复反馈（与 save-status 同款样式，独立元素避免与编辑页图片保存状态混淆） */
    .project-status {
      min-height: 22px;
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
      word-break: break-word;
    }

    .project-status.ok {
      color: #1f6b58;
    }

    .project-status.warn {
      color: var(--accent-2);
    }

    .project-status.error {
      color: var(--danger);
    }

    .save-status.error {
      color: var(--danger);
    }

    .fixed-save-panel {
      display: grid;
      gap: 10px;
      width: 100%;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #ffffff;
    }

    .fixed-save-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 8px;
    }

    .fixed-save-grid {
      display: grid;
      gap: 8px;
    }

    .fixed-save-field {
      display: grid;
      gap: 6px;
    }

    .fixed-save-field label {
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
    }

    .fixed-save-panel input,
    .fixed-save-panel select {
      width: 100%;
      height: 40px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--white);
      color: #111827;
      padding: 6px 8px;
      font-size: 14px;
      outline: none;
    }

    .fixed-save-panel input:focus,
    .fixed-save-panel select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.15);
    }

    .fixed-save-panel input.is-invalid {
      border-color: var(--danger);
      box-shadow: 0 0 0 3px rgba(180, 73, 73, 0.18);
    }

    .fixed-save-button {
      position: relative;
      width: 100%;
      min-height: 40px;
      padding: 0 12px;
      font-size: 14px;
      font-weight: 500;
      border-radius: 10px;
      cursor: pointer;
      color: var(--white);
      background: var(--tool);
      box-shadow: none;
    }

    .fixed-save-button:hover {
      background: var(--tool-2);
    }

    .fixed-save-button:disabled {
      cursor: wait;
      opacity: 0.72;
      transform: none;
    }

    .save-settings-form {
      display: grid;
      gap: 12px;
    }

    .save-settings-dialog .confirm-dialog {
      width: min(420px, 100%);
    }

    .confirmation-export-menu {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin: 0 0 4px;
    }

    .confirmation-export-menu[hidden] {
      display: none;
    }

    .confirmation-export-menu button {
      min-height: 38px;
      padding: 8px 6px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: #6B7280;
      color: #ffffff;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
    }

    .confirmation-export-menu button:hover {
      border-color: transparent;
      color: #ffffff;
      background: #4B5563;
    }

    .sidebar .confirmation-export-menu button.export-confirm-button-gray {
      background: #6B7280 !important;
      color: #FFFFFF !important;
      border-color: #6B7280 !important;
    }

    .sidebar .confirmation-export-menu button.export-confirm-button-gray:hover {
      background: #4B5563 !important;
      color: #FFFFFF !important;
      border-color: #4B5563 !important;
    }

    .sidebar .confirmation-export-menu button.export-confirm-button-gray:disabled {
      background: #9CA3AF !important;
      color: #FFFFFF !important;
      border-color: #9CA3AF !important;
      opacity: 0.7;
    }

    .process-sample-panel {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin: 0 0 8px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #ffffff;
    }

    .process-sample-panel[hidden] {
      display: none;
    }

    button.process-sample-option {
      display: flex;
      min-height: auto;
      padding: 7px 5px;
      border: 1px solid #D1D5DB;
      border-radius: 8px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      color: #111827;
      background: #F3F4F6;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      box-shadow: none;
    }

    button.process-sample-option:hover {
      border-color: var(--tool);
      color: var(--tool);
      background: #E5E7EB;
      box-shadow: none;
      transform: none;
    }

    .process-sample-thumb {
      width: 84px;
      height: 84px;
      object-fit: contain;
      border: 1px solid #999999;
      border-radius: 4px;
      background: #f3f4f6;
      pointer-events: none;
    }

    .process-sample-name {
      display: block;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-align: center;
      text-overflow: ellipsis;
      pointer-events: none;
    }

    .process-sample-upload-action {
      grid-column: 1 / -1;
      width: 100%;
      margin: 0;
      color: #ffffff;
      background: #6B7280;
    }

    .process-sample-upload-action:hover {
      background: #4B5563;
    }

    .process-line-style-grid {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }

    .process-line-style {
      min-height: 34px;
      padding: 6px;
      border: 1px solid #D1D5DB;
      border-radius: 8px;
      color: #111827;
      background: #F3F4F6;
      font-size: 12px;
      box-shadow: none;
    }

    .process-line-style.is-active {
      border-color: var(--tool);
      background: #E0ECFF;
      color: #111827;
      box-shadow: inset 0 0 0 1px var(--tool);
    }

    .process-line-help {
      grid-column: 1 / -1;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .sidebar .process-sample-panel button.process-sample-option[data-process-sample-key] {
      color: #111827;
      background: #F3F4F6;
      border: 1px solid #D1D5DB;
    }

    .sidebar .process-sample-panel button.process-sample-option[data-process-sample-key]:hover {
      color: #111827;
      background: #E5E7EB;
      border-color: #9CA3AF;
    }

    .sidebar .process-sample-panel button.process-sample-upload-action[data-process-sample-upload] {
      color: #FFFFFF;
      background: #6B7280;
    }

    .sidebar .process-sample-panel button.process-sample-upload-action[data-process-sample-upload]:hover {
      color: #FFFFFF;
      background: #4B5563;
    }

    .cutting-entry-button {
      min-height: 46px;
      color: var(--white);
      background: var(--tool);
      font-weight: 700;
    }

    .cutting-entry-button:hover {
      background: var(--tool-2);
    }

    .clear-task-button {
      min-height: 46px;
      color: var(--white);
      background: var(--danger);
      font-weight: 700;
    }

    .clear-task-button:hover {
      background: #963b3b;
    }

    .slab-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 2px 0 4px;
    }
    .slab-list .slab-chip {
      flex: 1 1 auto;
      min-width: 56px;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      background: var(--panel-2, #f1f3f5);
      border: 1px solid var(--line, #d8dee4);
      border-radius: 8px;
      cursor: pointer;
    }
    .slab-list .slab-chip:hover {
      background: #e7eaf0;
    }
    .slab-list .slab-chip.active {
      color: var(--white);
      background: var(--accent, #2f6df0);
      border-color: var(--accent, #2f6df0);
    }

    .save-debug-assets {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
    }

    .result-canvas-store {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
    }

    .cutting-panel {
      display: grid;
      gap: 8px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fbf8f1;
    }

    .cutting-panel[hidden] {
      display: none;
    }

    .cutting-panel h2 {
      display: none;
    }

    /* ===== 切割排版面板紧凑分组 ===== */
    .cut-group {
      display: grid;
      gap: 7px;
      padding: 9px 10px 10px;
      border: 1px solid rgba(214, 205, 186, 0.9);
      border-radius: 11px;
      background: rgba(255, 255, 255, 0.72);
    }

    .cut-group-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }

    .cut-group-title {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.4px;
      color: #7a5a26;
    }

    .cut-group-title::before {
      content: "";
      width: 3px;
      height: 12px;
      border-radius: 2px;
      background: linear-gradient(180deg, #d9a441, #b9812c);
    }

    .cut-group-note {
      font-size: 11px;
      line-height: 1.3;
      color: var(--muted);
    }

    /* 倒圆角分组：标题即折叠开关（默认收起） */
    .cut-group-toggle {
      width: 100%;
      border: 0;
      border-radius: 8px;
      background: none;
      color: inherit;
      font-family: inherit;
      font-size: 12px;
      font-weight: 400;
      text-align: left;
      min-height: 0;
      padding: 3px 6px;
      margin: -3px -6px;
      cursor: pointer;
      transition: background .14s ease;
    }
    .cut-group-toggle:hover {
      background: rgba(214, 205, 186, 0.26);
      transform: none;
      box-shadow: none;
    }
    .cut-group-toggle:focus-visible {
      outline: 2px solid var(--tool);
      outline-offset: 2px;
    }
    .cut-group-toggle .cut-group-title { flex: 1 1 auto; }
    .cut-group-chevron {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      color: var(--muted);
      transition: transform .18s ease;
    }
    .cut-group-chevron::after {
      content: "▸";
      font-size: 12px;
      line-height: 1;
    }
    .cut-group-toggle[aria-expanded="true"] .cut-group-chevron { transform: rotate(90deg); }

    .cut-group-body {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }
    .cut-group-body[hidden] { display: none; }

    /* 分组内的尺寸字段组之间不再各自留大间距 */
    .cut-group > .grid-2,
    .cut-group > .fixed-save-grid,
    .cut-group > .fixed-save-field {
      margin-top: -1px;
    }

    .cut-corner-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 8px;
    }

    .cut-corner-row button {
      min-height: 40px;
      white-space: nowrap;
      padding: 0 12px;
    }

    .cut-action-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      align-items: start;
    }

    .cut-action-grid button {
      min-width: 0;
      width: 100%;
    }

    /* 插槽：动态插入的尺寸标注 / 任务按钮落位处，本身不占视觉空间 */
    #cutToolSlot,
    #cutShapeSizeSlot {
      display: contents;
    }

    #cutTaskSlot {
      width: 100%;
    }

    #cutTaskSlot:empty {
      display: none;
    }

    /* 任务插槽内的面板类元素（加工标注下拉）需占满整行 */
    #cutTaskSlot > .process-sample-panel {
      grid-column: 1 / -1;
      margin: 0;
    }

    /* 生成切割框是主操作，占更宽的份额；删除切割框次要 */
    .cut-frame-actions {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    /* 当前大板信息条：做成紧凑的提示条，与分组卡片呼应 */
    .cut-current-slab {
      margin: 0;
      padding: 6px 10px;
      border: 1px solid rgba(214, 205, 186, 0.9);
      border-radius: 9px;
      background: rgba(255, 255, 255, 0.55);
      font-size: 12px;
      line-height: 1.4;
    }

    .cutting-panel > button.wide,
    .cut-group > button.wide {
      width: 100%;
    }

    /* 手机端顶栏隐藏，Slogan 改在切割面板顶部展示 */
    .cutting-slogan {
      display: none;
      margin: 0 0 10px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
      letter-spacing: .2px;
    }

    .cut-shape-type-title {
      margin: 0;
      color: var(--ink);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
    }

    .fixed-save-field .cut-shape-type-title {
      color: var(--ink);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
    }

    .cutting-status {
      min-height: 18px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    /* 导出确认图状态行：紧贴按钮下方，反馈不必跑到侧栏别处 */
    .export-confirm-status {
      min-height: 15px;
      color: var(--muted);
      font-size: 10.5px;
      line-height: 1.4;
      text-align: center;
    }
    .export-confirm-status.ok { color: #1f6b58; }
    .export-confirm-status.warn { color: var(--accent-2); }
    .export-confirm-status.error { color: var(--danger); }

    .cutting-status.warn,
    .cutting-status.error {
      color: var(--danger);
    }

    .cutting-status.ok {
      color: #1f6b58;
    }

    .rotation-control {
      display: grid;
      gap: 6px;
      padding: 9px 10px 10px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: #ffffff;
    }

    .rotation-control-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
    }

    .rotation-target {
      font-size: 12px;
      font-weight: 500;
      color: var(--muted);
    }

    .rotation-actions {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
    }

    .rotation-actions button {
      min-height: 34px;
      padding: 6px 0;
      font-size: 12px !important;
      white-space: nowrap;
    }

    .rotation-actions button:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }

    .rotation-hint {
      font-size: 11px;
      line-height: 1.45;
      color: var(--muted);
      margin-top: -1px;
    }

    .snap-control {
      display: grid;
      gap: 7px;
      padding: 9px 10px 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: linear-gradient(180deg, #f8fbff, #eef4ff);
    }

    .snap-switch {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      cursor: pointer;
    }

    .snap-switch input {
      width: 16px;
      height: 16px;
      accent-color: var(--tool);
    }

    .snap-hint {
      font-size: 11px;
      line-height: 1.5;
      color: var(--muted);
    }

    .rotation-slider-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .rotation-slider-row input[type="range"] {
      flex: 1;
      min-width: 0;
      accent-color: var(--tool);
    }

    .rotation-slider-value {
      min-width: 48px;
      text-align: right;
      font-size: 14px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--tool);
    }

    .corner-options {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 5px;
      font-size: 12px;
      color: var(--ink);
    }

    .corner-options label {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 30px;
      padding: 0 4px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.8);
      cursor: pointer;
      white-space: nowrap;
    }

    .corner-options input {
      width: auto;
      height: auto;
    }

    .auto-layout-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--ink);
      margin: 0;
      padding: 5px 8px;
      border: 1px dashed var(--line, #cbd5e1);
      border-radius: 8px;
      cursor: pointer;
      user-select: none;
    }

    .auto-layout-toggle input {
      width: auto;
      height: auto;
    }

    .text-note-size-row {
      display: none;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .cut-shape-list {
      display: grid;
      gap: 6px;
      max-height: 150px;
      overflow: auto;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(255,255,255,0.58);
    }

    .cut-shape-empty {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .cut-shape-item {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 8px;
      min-height: 36px;
      border: 1px solid #222;
      border-left: 3px solid transparent;
      border-radius: 8px;
      background: #fffdf8;
      color: var(--ink);
      font-size: 12px;
      text-align: left;
      padding: 4px 6px 4px 10px;
      cursor: pointer;
    }

    .cut-shape-item.is-selected {
      border-color: var(--selected-color);
      border-left-color: var(--selected-color);
      background: var(--selected-bg);
      box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.14);
      font-weight: 700;
    }

    .cut-shape-item.is-invalid {
      border-style: dashed;
    }

    .cut-shape-delete {
      min-height: 26px;
      padding: 0 8px;
      border: 1px solid #222;
      border-radius: 7px;
      background: #ffffff;
      color: #20252a;
      font-size: 12px;
      cursor: pointer;
    }

    .cut-shape-delete:hover {
      background: #f0ebe2;
    }

    .protected-image-area,
    .protected-image-area * {
      user-select: none;
      -webkit-user-select: none;
    }

    .protected-image-area img,
    .protected-image-area canvas,
    .save-debug-assets img,
    .result-canvas-store {
      -webkit-user-drag: none;
      user-drag: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .metrics {
      display: grid;
      gap: 8px;
      overflow: auto;
      padding-right: 2px;
    }

    .debug-panel {
      display: none;
    }

    .metric {
      display: grid;
      gap: 4px;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--white);
    }

    .metric b {
      font-size: 12px;
    }

    .metric span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .workspace {
      display: flex;
      flex-direction: column;
      background: #ffffff;
      overflow: hidden;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      height: 0;
      min-height: 0;
      padding: 0 14px;
      border-bottom: 0;
      background: #ffffff;
      overflow: hidden;
    }

    .topbar h2 {
      margin: 0;
      font-size: 16px;
      line-height: 1.2;
    }

    /* 切割排版页标题后的 Slogan：浅色小字，仅在切割排版模式显示 */
    .topbar h2 .workspace-slogan {
      margin-left: 10px;
      font-size: 12px;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: .2px;
      white-space: nowrap;
    }

    .topbar h2,
    .topbar .status {
      visibility: hidden;
    }

    .status {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
      color: var(--muted);
      font-size: 12px;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 0 9px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--white);
      color: var(--muted);
      white-space: nowrap;
    }

    .chip.ok {
      color: #1f6b58;
      border-color: rgba(47, 125, 105, 0.28);
      background: rgba(47, 125, 105, 0.08);
    }

    .stage {
      flex: 1 1 auto;
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: minmax(0, 1fr);
      gap: 12px;
      align-items: stretch;
      padding: 12px;
      overflow: hidden;
    }

    .canvas-card {
      position: relative;
      min-height: 240px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #ffffff;
      overflow: hidden;
    }

    .result-only .canvas-card {
      overflow: auto;
    }

    .cutting-mode .canvas-card {
      overflow: auto;
      background: #ffffff;
    }

    .canvas-card canvas {
      display: block;
      width: 100%;
      height: 100%;
      touch-action: none;
    }

    .result-only .canvas-card canvas {
      width: auto;
      height: auto;
    }

    .cutting-mode .canvas-card canvas {
      width: auto;
      height: auto;
    }

    .canvas-label {
      position: absolute;
      left: 10px;
      top: 10px;
      z-index: 2;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      pointer-events: none;
    }

    .canvas-label span {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 8px;
      border-radius: 8px;
      background: rgba(255, 253, 248, 0.9);
      border: 1px solid rgba(32, 37, 42, 0.12);
      color: var(--ink);
      font-size: 12px;
      box-shadow: 0 5px 14px rgba(32, 37, 42, 0.1);
    }

    .result-only {
      grid-template-columns: minmax(0, 1fr);
    }

    .cutting-mode {
      grid-template-columns: minmax(0, 1fr);
    }

    .result-only .canvas-card {
      min-width: 0;
      min-height: 0;
    }

    .result-only .preview-card {
      display: none;
    }

    .cutting-mode .preview-card {
      display: none;
    }

    .result-zoom-toolbar {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 20;
      display: none;
      align-items: center;
      gap: 6px;
      padding: 6px;
      border: 1px solid rgba(32, 37, 42, 0.12);
      border-radius: 10px;
      background: rgba(255, 253, 248, 0.92);
      box-shadow: 0 8px 20px rgba(32, 37, 42, 0.12);
    }

    .result-only .result-zoom-toolbar {
      display: flex;
    }

    .result-zoom-toolbar button {
      min-height: 32px;
      padding: 0 10px;
      color: var(--ink);
      background: #ebe5da;
      box-shadow: inset 0 0 0 1px var(--line);
      font-size: 12px;
      white-space: nowrap;
    }

    .result-zoom-toolbar button:hover {
      background: var(--tool-2);
    }

    .result-zoom-toolbar button:disabled {
      cursor: not-allowed;
      opacity: 0.5;
      transform: none;
      box-shadow: inset 0 0 0 1px var(--line);
    }

    .result-zoom-value {
      min-width: 48px;
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      white-space: nowrap;
    }

    /* 切割排版工作区缩放条：fixed 定位到画布右上角，仅在切割模式显示。
       手机端没有滚轮，按钮 + 双指捏合是主要缩放入口。 */
    .cut-zoom-toolbar {
      position: fixed;
      z-index: 22;
      display: none;
      align-items: center;
      gap: 6px;
      padding: 6px;
      border: 1px solid rgba(32, 37, 42, 0.12);
      border-radius: 10px;
      background: rgba(255, 253, 248, 0.95);
      box-shadow: 0 8px 20px rgba(32, 37, 42, 0.16);
      touch-action: manipulation;
    }

    .cutting-mode .cut-zoom-toolbar {
      display: flex;
    }

    .cut-zoom-toolbar button {
      min-width: 34px;
      min-height: 34px;
      padding: 0 10px;
      color: var(--ink);
      background: #ebe5da;
      box-shadow: inset 0 0 0 1px var(--line);
      font-size: 15px;
      font-weight: 700;
      white-space: nowrap;
    }

    .cut-zoom-toolbar button:hover {
      background: var(--tool-2);
    }

    .cut-zoom-toolbar button:disabled {
      cursor: not-allowed;
      opacity: 0.5;
      transform: none;
      box-shadow: inset 0 0 0 1px var(--line);
    }

    .cut-zoom-value {
      min-width: 50px;
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      white-space: nowrap;
    }

    .protection-tip {
      padding: 8px 14px 10px;
      color: var(--muted);
      background: #ffffff;
      border-top: 1px solid var(--line);
      font-size: 12px;
      line-height: 1.5;
    }

    .confirm-overlay {
      position: fixed;
      inset: 0;
      z-index: 100000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(32, 37, 42, 0.42);
    }

    .confirm-overlay[hidden] {
      display: none;
    }

    .confirm-dialog {
      width: min(460px, 100%);
      display: grid;
      gap: 16px;
      padding: 22px;
      border-radius: 12px;
      background: var(--panel);
      border: 1px solid var(--line);
      box-shadow: 0 24px 60px rgba(32, 37, 42, 0.24);
    }

    .confirm-dialog h2 {
      margin: 0;
      font-size: 18px;
      line-height: 1.35;
    }

    .confirm-dialog p {
      margin: 0;
      color: var(--muted);
      line-height: 1.6;
    }

    .confirm-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    /* 微信内置浏览器：a[download] + blob: 不可用，改为页面内展示成品图供长按保存 */
    .wx-export-overlay {
      position: fixed;
      inset: 0;
      z-index: 100001;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(24, 29, 34, 0.62);
    }

    .wx-export-overlay[hidden] {
      display: none;
    }

    .wx-export-dialog {
      width: min(560px, 100%);
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 16px;
      border-radius: 14px;
      background: var(--panel);
      border: 1px solid var(--line);
      box-shadow: 0 24px 60px rgba(32, 37, 42, 0.3);
    }

    .wx-export-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .wx-export-head h2 {
      margin: 0;
      font-size: 17px;
      line-height: 1.35;
    }

    .wx-export-close {
      width: 30px;
      height: 30px;
      padding: 0;
      border: none;
      border-radius: 8px;
      background: var(--panel-2);
      color: var(--muted);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
    }

    .wx-export-tip {
      margin: 0;
      padding: 8px 10px;
      border-radius: 8px;
      background: var(--panel-2);
      color: var(--accent-2);
      font-size: 13px;
      line-height: 1.55;
    }

    .wx-export-scroll {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #f6f7f8;
    }

    .wx-export-scroll img[hidden] {
      display: none;
    }

    .wx-export-scroll img {
      display: block;
      max-width: 100%;
      height: auto;
      border-radius: 6px;
      background: #ffffff;
      -webkit-touch-callout: default;
      -webkit-user-select: none;
      user-select: none;
    }

    .wx-export-no-image {
      margin: 0;
      padding: 20px 12px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
      text-align: center;
    }

    .wx-export-hint {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .wx-export-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .wx-export-status {
      min-height: 18px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .wx-export-status.ok { color: #1f6b58; }
    .wx-export-status.warn { color: var(--accent-2); }
    .wx-export-status.error { color: #b4232a; }

    @media (max-width: 600px) {
      .wx-export-overlay { padding: 10px; }
      .wx-export-dialog { max-height: 92vh; padding: 12px; gap: 8px; }
      .wx-export-head h2 { font-size: 16px; }
    }

    .text-note-editor {
      display: grid;
      gap: 10px;
      padding: 10px;
      border: 1px dashed rgba(30, 58, 138, 0.28);
      border-radius: 10px;
      background: #ffffff;
    }

    .text-note-editor[hidden] {
      display: none;
    }

    .text-note-editor textarea {
      width: 100%;
      min-height: 92px;
      resize: vertical;
      padding: 6px 8px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #ffffff;
      color: #111827;
      font-family: inherit;
      font-size: 14px;
      line-height: 1.55;
      outline: none;
    }

    .text-note-editor textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.15);
    }

    /* ===== 响应式：手机 / 平板 / 电脑 ===== */

    /* 平板及更小：侧栏收窄，仍保持两列（侧栏控件较多，堆叠会挤压主工作区） */
    @media (max-width: 1024px) {
      .app {
        grid-template-columns: 288px minmax(0, 1fr);
        padding: 12px;
        gap: 12px;
      }
    }

    /* 窄侧栏：隐藏拼法序号（网格高亮已表达当前位置），保证切换条单行不换行 */
    @media (max-width: 900px) {
      #wallPanel .wall-swatch-index { display: none; }
    }

    /* 手机 / 小平板竖屏：上下堆叠，整体可纵向滚动（解除固定高度与裁切） */
    @media (max-width: 760px) {
      html,
      body {
        height: auto;
      }

      .app {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: 100vh;
        overflow: visible;
        padding: 10px;
        gap: 10px;
      }

      .sidebar {
        overflow: visible;
        gap: 10px;
        padding: 12px;
      }

      .workspace {
        overflow: visible;
        min-height: 0;
      }

      .topbar {
        display: none;
      }

      .stage {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        overflow: visible;
        padding: 10px;
      }

      .canvas-card {
        min-height: 62vw;
      }

      .grid-2,
      .toolbar {
        grid-template-columns: 1fr;
      }

      /* 切割排版面板的成对尺寸字段（长/宽）保持两列，节省纵向空间 */
      #cuttingPanel .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .toolbar .wide {
        grid-column: auto;
      }

      /* 任务按钮在手机端 2 列网格，节省纵向空间（桌面为 contents 不变） */
      .task-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      /* 带 wide 类的主操作按钮在 2 列下跨整行 */
      .task-actions .wide {
        grid-column: 1 / -1;
      }

      .status {
        justify-content: flex-start;
      }

      /* 手机端顶栏隐藏，切割排版 Slogan 在切割面板顶部展示 */
      .cutting-slogan {
        display: block;
      }

      /* 触摸友好：放大可点控件高度（上传 hero 卡片保持自身高度，不在此列） */
      .sidebar button,
      .sidebar input,
      .sidebar select,
      .wall-section button {
        min-height: 42px;
      }

      .sidebar .grid-2,
      .wall-inline-fields {
        gap: 10px;
      }

      /* 画布悬浮缩放工具栏：放大触摸目标，避免手机端误触 */
      .result-zoom-toolbar {
        gap: 8px;
        padding: 8px;
      }
      .result-zoom-toolbar button {
        min-height: 40px;
        padding: 0 14px;
        font-size: 14px;
        border-radius: 9px;
      }
      .result-zoom-value {
        min-width: 54px;
        font-size: 14px;
      }

      /* 品牌标题与面板标题在手机端略缩小，提升一屏信息量 */
      .brand .toolbar-title {
        font-size: 17px;
        margin-bottom: 8px;
      }
      .panel > h2,
      .wall-section-title {
        font-size: 14px;
      }
      .panel,
      .wall-section {
        padding: 12px;
      }

      /* 拼法按钮在窄全宽下改为 2 列更舒适 */
      #wallPanel.wall-panel .wall-pattern-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      /* 结果预览仍按宽度自适应；切割排版区在手机端允许滚动查看放大后的内容 */
      .result-only .canvas-card {
        overflow: hidden;
      }

      .cutting-mode .canvas-card {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }

      .result-only .canvas-card canvas {
        max-width: 100%;
        width: auto;
        height: auto;
        margin: 0 auto;
        display: block;
      }

      /* 切割画布尺寸由 JS 按 cutWorkspaceZoom 设置，手机端不得压缩或限制宽度 */
      .cutting-mode .canvas-card canvas {
        max-width: none;
        margin: 0;
        display: block;
      }

      /* 手机端放大触摸目标，避免误触 */
      .cut-zoom-toolbar {
        gap: 8px;
        padding: 7px;
      }
      .cut-zoom-toolbar button {
        min-width: 42px;
        min-height: 42px;
        padding: 0 12px;
        font-size: 17px;
        border-radius: 9px;
      }
      .cut-zoom-value {
        min-width: 54px;
        font-size: 14px;
      }
    }

    .wall-panel .note { margin-bottom: 8px; }
    .wall-assembly-info {
      margin: 4px 0 10px;
      padding: 8px 10px;
      border: 1px dashed var(--accent-2);
      border-radius: var(--radius);
      background: rgba(184, 134, 11, 0.08);
      color: var(--ink);
      font-size: 12px;
      line-height: 1.5;
    }
    .wall-assembly-info b { color: var(--accent-2); }
    .switch-row {
      display: flex;
      align-items: center;
      gap: 9px;
      cursor: pointer;
      user-select: none;
      font-size: 13px;
      color: var(--ink);
    }
    .switch-row input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
    .switch-track {
      position: relative;
      width: 38px;
      height: 21px;
      border-radius: 999px;
      background: #cdd5e0;
      transition: background .18s ease;
      flex: 0 0 auto;
    }
    .switch-track::after {
      content: "";
      position: absolute;
      top: 2px; left: 2px;
      width: 17px; height: 17px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,.25);
      transition: transform .18s ease;
    }
    .switch-row input[type="checkbox"]:checked + .switch-track { background: var(--accent-2); }
    .switch-row input[type="checkbox"]:checked + .switch-track::after { transform: translateX(17px); }
    .switch-row input[type="checkbox"]:focus-visible + .switch-track { outline: 2px solid var(--brand); outline-offset: 2px; }
    .wall-source-row { display: flex; gap: 8px; margin-bottom: 10px; }
    .wall-source-row button { flex: 1; }
    .wall-pattern-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .wall-pattern-btn {
      min-height: 42px;
      padding: 6px 4px;
      font-size: 12px;
      line-height: 1.2;
      text-align: center;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #ebe5da;
      color: var(--ink);
      cursor: pointer;
    }
    .wall-pattern-btn:hover { background: #e1d9cb; }
    .wall-pattern-btn.active { outline: 2px solid #2f7d69; background: #dfeee9; }
    .wall-transform-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .wall-transform-row button { flex: 1 1 auto; min-height: 36px; white-space: nowrap; }
    .stage.wall-mode { grid-template-columns: minmax(0, 1fr); }
    .stage.wall-mode .preview-card { display: none; }
    .stage.wall-mode .result-zoom-toolbar { display: none; }

    /* ===== 美化增强：覆盖在既有规则之后 ===== */

    /* 品牌横幅 */
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border: none;
      border-radius: var(--radius);
      background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
      box-shadow: var(--shadow-sm);
    }
    .brand-mark {
      width: 46px;
      height: 46px;
      flex: 0 0 auto;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: radial-gradient(circle at 34% 26%, #ffffff 0%, #f4f8ff 58%, #e7eefb 100%);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.78),
        0 3px 10px rgba(8, 17, 44, 0.26);
      overflow: hidden;
    }
    .brand-mark::before {
      content: "";
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: url("data:image/png;base64,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") center / contain no-repeat;
    }
    .brand-text { display: grid; gap: 2px; line-height: 1.12; }
    .brand-name { font-size: 18px; font-weight: 800; letter-spacing: 0.5px; color: #fff; }
    .brand-sub { font-size: 10.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }

    /* 面板与区块标题 */
    .panel {
      padding: 14px;
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
    }
    .panel h2 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 4px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.3px;
      color: var(--ink);
    }
    .panel h2::before {
      content: "";
      width: 4px;
      height: 14px;
      border-radius: 3px;
      background: linear-gradient(180deg, var(--tool), var(--tool-2));
    }

    /* 上传区 hero 卡片样式已在 .upload 基础定义中统一，此处不再覆盖 */

    /* 画布卡片 */
    .canvas-card {
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
    }

    /* 顶栏（显示当前模式 / 标题） */
    .topbar {
      height: auto;
      min-height: 56px;
      padding: 0 18px;
      border-bottom: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.86);
      -webkit-backdrop-filter: saturate(180%) blur(8px);
      backdrop-filter: saturate(180%) blur(8px);
      box-shadow: var(--shadow-sm);
      overflow: visible;
    }
    .topbar h2,
    .topbar .status { visibility: visible; }
    .topbar h2 { font-size: 17px; font-weight: 700; color: var(--ink); }
    .status { color: var(--muted); }

    .chip {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--panel-2);
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }
    .chip.ok {
      color: var(--success);
      border-color: rgba(22, 163, 74, 0.3);
      background: rgba(22, 163, 74, 0.1);
    }

    /* 按钮层级与质感 */
    button {
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
    }
    button:hover { box-shadow: var(--shadow); }
    button.primary,
    .fixed-save-button {
      background: linear-gradient(180deg, var(--tool), var(--tool-2));
      box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
    }
    button.primary:hover,
    .fixed-save-button:hover {
      background: linear-gradient(180deg, var(--tool-2), #1746c4);
      box-shadow: 0 12px 22px rgba(37, 99, 235, 0.34);
    }
    .cutting-entry-button {
      background: linear-gradient(180deg, var(--accent-2), #a86c25);
      box-shadow: 0 8px 18px rgba(201, 138, 58, 0.30);
    }
    .cutting-entry-button:hover {
      background: linear-gradient(180deg, #b57826, #8f5a1e);
    }
    .clear-task-button {
      background: var(--danger-soft);
      color: var(--danger);
      border: 1.5px solid rgba(229, 72, 77, 0.45);
      box-shadow: none;
    }
    .clear-task-button:hover {
      background: var(--danger);
      color: #fff;
      border-color: var(--danger);
      box-shadow: 0 8px 18px rgba(229, 72, 77, 0.28);
    }
    .confirmation-export-menu button,
    .sidebar .confirmation-export-menu button.export-confirm-button-gray {
      background: linear-gradient(180deg, #64748b, #475569) !important;
      border-color: transparent !important;
      box-shadow: var(--shadow-sm);
    }
    .confirmation-export-menu button:hover,
    .sidebar .confirmation-export-menu button.export-confirm-button-gray:hover {
      background: linear-gradient(180deg, #54647a, #3c4a5e) !important;
    }

    /* 大板切换 chip */
    .slab-list .slab-chip {
      background: var(--panel-2);
      border: 1px solid var(--line);
      border-radius: 10px;
      color: var(--ink);
      box-shadow: var(--shadow-sm);
      transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    }
    .slab-list .slab-chip:hover { background: #eef2f8; transform: translateY(-1px); }
    .slab-list .slab-chip.active {
      background: linear-gradient(180deg, var(--accent), var(--tool-2));
      border-color: transparent;
      color: #fff;
      box-shadow: 0 8px 16px rgba(37, 99, 235, 0.30);
    }

    /* 背景墙拼法 / 变换 */
    .wall-pattern-btn {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel-2);
      color: var(--ink);
      box-shadow: var(--shadow-sm);
      font-weight: 600;
      transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
    }
    .wall-pattern-btn:hover { background: #eef2f8; transform: translateY(-1px); }
    .wall-pattern-btn.active {
      outline: none;
      background: linear-gradient(180deg, var(--accent), var(--tool-2));
      border-color: transparent;
      color: #fff;
      box-shadow: 0 8px 16px rgba(37, 99, 235, 0.30);
    }
    .wall-pattern-btn.active .wall-pattern-badge { color: rgba(255, 255, 255, 0.85); }
    .wall-transform-row button {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel);
      color: var(--ink);
      box-shadow: var(--shadow-sm);
      transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
    }
    .wall-transform-row button:hover {
      background: var(--tool-soft);
      border-color: var(--tool);
      color: var(--tool);
      transform: translateY(-1px);
    }
    .wall-transform-row button.active {
      background: linear-gradient(180deg, var(--accent), var(--tool-2));
      border-color: transparent;
      color: #fff;
    }

    /* 输入框聚焦 */
    input:focus,
    select:focus,
    textarea:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
    }

    /* 滚动条 */
    .sidebar::-webkit-scrollbar { width: 10px; }
    .sidebar::-webkit-scrollbar-thumb { background: #cdd5e0; border-radius: 999px; border: 2px solid var(--bg); }
    .sidebar::-webkit-scrollbar-thumb:hover { background: #b7c1ce; }

    /* 选择高亮与焦点环 */
    ::selection { background: rgba(37, 99, 235, 0.18); }
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    a:focus-visible {
      outline: 2px solid var(--tool);
      outline-offset: 2px;
    }

    /* 对话框 */
    .confirm-overlay {
      background: rgba(15, 23, 42, 0.45);
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);
    }
    .confirm-dialog {
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--line);
    }
    .stage.wall-mode .protection-tip { display: none; }

    /* ===== 背景墙排版 · UI 优化（分组 / 层级 / 状态） ===== */
    #wallPanel.wall-panel {
      padding: 12px;
      background: #eef2f8;
    }
    #wallPanel .wall-head { padding-bottom: 4px; }
    #wallPanel .wall-head h2 { font-size: 14px; margin-bottom: 2px; }
    #wallPanel .wall-head p {
      margin: 0 0 0 12px;
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.2px;
    }

    /* 分区卡片化：白卡 + 细边 + 轻阴影，替代原虚线分隔 */
    #wallPanel .wall-section {
      padding: 12px 12px 13px;
      margin-top: 10px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }
    #wallPanel .wall-section:first-of-type {
      margin-top: 4px;
    }
    #wallPanel .wall-section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      font-size: 12px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: 0.2px;
    }
    #wallPanel .wall-step {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      flex: 0 0 auto;
      border-radius: 7px;
      background: linear-gradient(180deg, var(--tool), var(--tool-2));
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      box-shadow: 0 3px 8px rgba(37, 99, 235, 0.28);
    }
    #wallPanel .wall-section-hint {
      margin-left: auto;
      padding: 2px 8px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--panel-2);
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 500;
      white-space: nowrap;
    }

    /* 源图片状态 + 主次按钮 */
    #wallPanel .wall-source-badge {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 34px;
      margin-bottom: 9px;
      padding: 7px 10px;
      border: 1px dashed var(--line-strong);
      border-radius: 10px;
      background: linear-gradient(180deg, #fafcff, #f2f6fd);
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.4;
    }
    #wallPanel .wall-source-badge::before {
      content: "";
      width: 8px;
      height: 8px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: #cbd5e1;
      box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
    }
    #wallPanel .wall-source-row { gap: 8px; margin: 0; }
    #wallPanel .wall-source-row button {
      flex: 1 1 0;
      min-height: 38px;
      padding: 0 6px;
      font-size: 11.5px;
      font-weight: 600;
      white-space: nowrap;
    }
    #wallPanel .wall-source-row .wall-src-primary,
    #wallPanel .wall-source-row .wall-src-primary:hover {
      background: linear-gradient(180deg, var(--tool), var(--tool-2));
      color: #fff;
      box-shadow: 0 6px 14px rgba(37, 99, 235, 0.26);
    }
    #wallPanel .wall-source-row .wall-src-ghost {
      background: #fff;
      color: var(--tool);
      border: 1.5px solid var(--tool-soft);
      box-shadow: none;
    }
    #wallPanel .wall-source-row .wall-src-ghost:hover {
      background: var(--tool-soft);
      color: var(--tool-2);
      border-color: var(--tool);
    }

    /* 拼法选择 */
    #wallPanel .wall-pattern-grid { gap: 7px; }

    /* 一键换拼法切换条 */
    #wallPanel .wall-pattern-switcher {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--panel-2);
    }
    #wallPanel .wall-swatch-btn {
      flex: 0 0 auto;
      width: 38px;
      height: 36px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: var(--panel);
      color: var(--ink);
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      transition: background .14s ease, border-color .14s ease, transform .08s ease;
    }
    #wallPanel .wall-swatch-btn:hover { background: var(--bg-soft); border-color: var(--accent); }
    #wallPanel .wall-swatch-btn:active { transform: scale(0.94); }
    #wallPanel .wall-swatch-info {
      flex: 1 1 auto;
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: center;
      flex-wrap: wrap;
      min-width: 0;
      gap: 3px 6px;
      padding: 1px 0;
    }
    #wallPanel .wall-swatch-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    /* 当前拼法的形态副标：块数 · 纹理关系 */
    #wallPanel .wall-swatch-meta {
      font-size: 10.5px;
      font-weight: 600;
      color: var(--tool);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    #wallPanel .wall-swatch-index {
      font-size: 10px;
      font-weight: 500;
      color: var(--muted);
      white-space: nowrap;
    }

    /* 拼法按钮与块数徽章 */
    #wallPanel .wall-pattern-btn {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      min-height: 44px;
      padding: 6px 3px;
      font-size: 11.5px;
      font-weight: 600;
      border-radius: 10px;
      transition: background .14s ease, border-color .14s ease, color .14s ease, transform .1s ease, box-shadow .14s ease;
    }
    #wallPanel .wall-pattern-btn:hover { transform: translateY(-1px); }
    /* 未选中：hover 时边框与文字转主色，给出明确的可点反馈 */
    #wallPanel .wall-pattern-btn:not(.active):hover {
      background: var(--tool-soft);
      border-color: var(--tool);
      color: var(--tool);
    }
    /* 选中：实心主色，一眼可辨（此前仅有浅色描边，9 个拼法中看不出当前项） */
    #wallPanel .wall-pattern-btn.active {
      background: linear-gradient(180deg, var(--accent), var(--tool-2));
      border-color: transparent;
      color: #fff;
      box-shadow: 0 6px 14px rgba(37, 99, 235, .26);
    }
    /* 自定义拼法：不属于任何固定块数组，用虚线边 + 淡底与「N 块」类拼法区分。
       规则只作用于未选中态（:not(.active)），避免覆盖 .active 的主色渐变选中态。 */
    #wallPanel .wall-pattern-btn.is-custom:not(.active) {
      border-style: dashed;
      background: rgba(37, 99, 235, .05);
    }
    #wallPanel .wall-pattern-btn.is-custom:not(.active):hover {
      background: rgba(37, 99, 235, .1);
    }
    #wallPanel .wall-pattern-name {
      font-size: 11.5px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: .2px;
      white-space: nowrap;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* 副标：块数 · 纹理关系（小胶囊，区分性信息） */
    #wallPanel .wall-pattern-badge {
      font-size: 9.5px;
      font-weight: 600;
      line-height: 1.35;
      color: #5a6675;
      padding: 1px 5px;
      border-radius: 999px;
      background: rgba(15, 23, 42, .07);
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #wallPanel .wall-pattern-badge::after { content: attr(data-badge); }
    #wallPanel .wall-pattern-btn.active .wall-pattern-badge {
      color: rgba(255, 255, 255, .94);
      background: rgba(255, 255, 255, .2);
    }
    #wallPanel .wall-inline-fields {
      margin-top: 9px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel-2);
    }

    /* 尺寸设置 · 开关卡片 */
    #wallPanel .switch-row {
      gap: 10px;
      margin-bottom: 9px;
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel-2);
      transition: border-color .16s ease, background .16s ease;
    }
    #wallPanel .switch-row:hover { border-color: var(--line-strong); }
    #wallPanel .switch-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--ink);
    }
    #wallPanel .switch-text small {
      font-size: 10.5px;
      font-weight: 400;
      color: var(--muted);
    }
    #wallPanel .wall-assembly-info {
      position: relative;
      margin: 9px 0;
      padding: 10px 12px 10px 36px;
      border: 1px solid rgba(201, 138, 58, 0.38);
      border-radius: 10px;
      background: linear-gradient(180deg, #fffaf0, #fdf3e3);
      color: #7a5320;
      font-size: 11.5px;
      line-height: 1.55;
      box-shadow: 0 3px 10px rgba(201, 138, 58, 0.10);
    }
    #wallPanel .wall-assembly-info::before {
      content: "⊞";
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--accent-2);
      font-size: 16px;
      font-weight: 700;
    }
    #wallPanel .wall-assembly-info b { color: #a86c25; font-size: 13px; }
    #wallPanel .wall-assembly-info .wall-cell-note { white-space: nowrap; }
    #wallPanel .wall-section .field { margin-bottom: 9px; }
    #wallPanel .wall-section .field:last-child { margin-bottom: 0; }

    /* 方向变换 · 5 宫格 */
    #wallPanel .wall-transform-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
    }
    #wallPanel .wall-transform-row button {
      flex: none;
      min-width: 0;
      min-height: 38px;
      padding: 0 2px;
      font-size: 11.5px;
      font-weight: 600;
      white-space: nowrap;
      border-radius: 9px;
    }
    #wallPanel .wall-sel-info {
      margin-top: 9px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: var(--panel-2);
      color: var(--muted);
      font-size: 11px;
      line-height: 1.55;
    }

    /* 导出 */
    #wallPanel #btnSaveWall {
      min-height: 44px;
      margin-top: 3px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    /* 预览区：模式提示 chip + 卡片质感 */
    .stage.wall-mode .canvas-card {
      border-color: var(--line);
      box-shadow: var(--shadow);
    }
    .stage.wall-mode .canvas-label::after {
      content: "点击单块可选中 · 方向变换作用于该块";
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 9px;
      border: 1px solid rgba(37, 99, 235, 0.9);
      border-radius: 8px;
      background: rgba(37, 99, 235, 0.92);
      color: #fff;
      font-size: 11px;
      box-shadow: 0 5px 14px rgba(37, 99, 235, 0.28);
    }

    /* 窄侧栏适配：.panel 是 grid，auto 列会按 min-content 撑宽；
       number input 的默认最小宽度会把列撑到 400px+，必须显式 minmax(0,1fr)。 */
    #wallPanel.wall-panel {
      grid-template-columns: minmax(0, 1fr);
      min-width: 0;
    }
    #wallPanel .wall-section,
    #wallPanel .wall-section-title,
    #wallPanel .wall-source-badge,
    #wallPanel .wall-assembly-info,
    #wallPanel .wall-sel-info,
    #wallPanel .switch-row { min-width: 0; }
    #wallPanel .wall-section-title { flex-wrap: wrap; }
    #wallPanel .grid-2,
    #wallPanel .wall-inline-fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      min-width: 0;
    }
    #wallPanel .wall-pattern-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      min-width: 0;
    }
    #wallPanel .wall-transform-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #wallPanel .wall-source-row button,
    #wallPanel .wall-pattern-btn,
    #wallPanel .wall-transform-row button {
      min-width: 0;
      white-space: normal;
      line-height: 1.25;
    }
    #wallPanel .field input,
    #wallPanel .field select,
    #wallPanel .fixed-save-field input,
    #wallPanel .fixed-save-field select {
      min-width: 0;
      max-width: 100%;
    }
    #wallPanel .wall-source-badge,
    #wallPanel .wall-assembly-info,
    #wallPanel .wall-sel-info { overflow-wrap: anywhere; }
    #wallPanel #btnSaveWall {
      width: 100%;
      box-sizing: border-box;
    }

    /* 背景墙源图 · 四点透视裁剪步骤 */
    #wallPanel .wall-crop-card {
      margin-top: 10px;
      padding: 12px;
      border: 1px solid rgba(37, 99, 235, 0.28);
      border-radius: 12px;
      background: linear-gradient(145deg, rgba(37, 99, 235, 0.09), rgba(37, 99, 235, 0.02));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
      min-width: 0;
    }
    #wallPanel .wall-crop-head {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 700;
      color: #1d4ed8;
      margin-bottom: 6px;
    }
    #wallPanel .wall-crop-head::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #2563eb;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
    }
    #wallPanel .wall-crop-tip {
      font-size: 11.5px;
      line-height: 1.6;
      color: #5b6473;
      margin: 0 0 9px;
      overflow-wrap: anywhere;
    }
    #wallPanel .wall-crop-meta {
      font-size: 11.5px;
      line-height: 1.6;
      color: #7a5a2c;
      background: rgba(255, 253, 248, 0.85);
      border: 1px dashed rgba(184, 134, 11, 0.4);
      border-radius: 8px;
      padding: 6px 8px;
      margin-bottom: 10px;
      overflow-wrap: anywhere;
    }
    #wallPanel .wall-crop-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      min-width: 0;
    }
    #wallPanel .wall-crop-actions button {
      min-width: 0;
      min-height: 34px;
      font-size: 12px;
      white-space: normal;
      line-height: 1.25;
    }
    #wallPanel .wall-crop-actions .wall-crop-apply {
      grid-column: 1 / -1;
      width: 100%;
      box-sizing: border-box;
    }
    #wallPanel .wall-crop-recrop {
      width: 100%;
      box-sizing: border-box;
      margin-top: 8px;
      min-height: 32px;
      font-size: 12px;
      border-style: dashed;
    }
    .stage.wall-mode.wall-frame-on .canvas-label::after {
      content: "拖动白色把手缩放裁切范围";
    }
    .stage.wall-mode.wall-crop-mode .canvas-label::after {
      content: "透视裁剪：拖动四个角点框出大板四角";
      background: rgba(184, 134, 11, 0.94);
      border-color: rgba(184, 134, 11, 0.9);
      box-shadow: 0 5px 14px rgba(184, 134, 11, 0.28);
    }

    /* ===== 背景墙排版 · UI 紧凑化 =====
       思路：收紧卡片外间距与控件高度，而不是一味缩小字号；
       层级、配色、圆角与阴影保持原有质感，避免「显小气」。 */
    #wallPanel.wall-panel { padding: 10px; }
    #wallPanel .wall-head {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 10px;
      padding-bottom: 0;
    }
    #wallPanel .wall-head h2 { margin: 0 0 1px; }

    /* 背景墙 顶部返回行：「返回切割排版」+「返回首页」并排（独占一行置于面板标题上方） */
    #wallPanel .wall-back-row {
      order: -1;
      flex: 0 0 100%;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    #wallPanel .wall-back-cutting {
      flex: 0 0 auto;
      justify-content: center;
      padding: 3px 9px;
      min-height: 24px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: #fff;
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      line-height: 1.4;
      cursor: pointer;
      transition: color .12s ease, border-color .12s ease, background .12s ease;
    }
    #wallPanel .wall-back-cutting:hover:not(:disabled) {
      color: var(--tool);
      border-color: var(--tool);
      background: var(--tool-soft);
    }
    #wallPanel .wall-back-cutting:disabled {
      opacity: .5;
      cursor: not-allowed;
    }
    /* 「返回首页」插槽：墙模式下由 JS 把 #btnBack 移入此处 */
    #wallPanel .wall-back-slot {
      display: flex;
      align-items: center;
      min-width: 0;
    }
    #wallPanel .wall-back-slot #btnBack {
      min-height: 24px;
      padding: 3px 12px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: #fff;
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      line-height: 1.4;
      cursor: pointer;
      white-space: nowrap;
      transition: color .12s ease, border-color .12s ease, background .12s ease;
    }
    #wallPanel .wall-back-slot #btnBack:hover:not(:disabled) {
      color: var(--tool);
      border-color: var(--tool);
      background: var(--tool-soft);
    }

    /* 卡片外壳 */
    #wallPanel .wall-section {
      padding: 9px 10px 10px;
      margin-top: 6px;
      border-radius: 11px;
    }
    #wallPanel .wall-section:first-of-type { margin-top: 0; }
    #wallPanel .wall-section-title { gap: 7px; margin-bottom: 7px; }
    #wallPanel .wall-step {
      width: 18px;
      height: 18px;
      border-radius: 6px;
      font-size: 10px;
    }
    #wallPanel .wall-section-hint { padding: 1px 7px; font-size: 10px; }

    /* 1 源图片 */
    #wallPanel .wall-source-badge {
      min-height: 28px;
      margin-bottom: 6px;
      padding: 4px 7px;
      border-radius: 9px;
      gap: 8px;
      font-size: 11px;
    }
    #wallPanel .wall-source-badge > #wallSourceNote {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    /* 已载入源图：状态圆点转为主色，一眼区分「未选 / 已就绪」 */
    #wallPanel .wall-source-badge.is-ready::before {
      background: var(--tool);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
    }
    /* 「重新裁剪」并入状态行内联小按钮：既省一行高度，也避免窄侧栏下三按钮换行 */
    #wallPanel .wall-source-badge .wall-crop-recrop {
      flex: 0 0 auto;
      width: auto;
      margin: 0;
      min-height: 24px;
      padding: 0 8px;
      border: 1px dashed var(--line-strong);
      border-radius: 7px;
      background: #fff;
      color: var(--tool);
      font-size: 10.5px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      box-shadow: none;
      cursor: pointer;
      transition: background .14s ease, border-color .14s ease, color .14s ease;
    }
    #wallPanel .wall-source-badge .wall-crop-recrop:hover {
      background: var(--tool-soft);
      border-color: var(--tool);
      color: var(--tool-2);
    }
    #wallPanel .wall-source-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }
    #wallPanel .wall-source-row button {
      min-height: 32px;
      padding: 0 4px;
      font-size: 11px;
    }

    /* 2 尺寸设置：卡片内不再套第二层边框，避免「框中框」与多余留白 */
    #wallPanel .wall-inline-fields {
      margin-top: 2px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: none;
    }
    #wallPanel .wall-assembly-info {
      margin: 5px 0 0;
      padding: 6px 9px 6px 30px;
      border-radius: 9px;
      font-size: 11px;
      line-height: 1.45;
    }
    #wallPanel .wall-assembly-info::before {
      left: 9px;
      font-size: 14px;
    }
    /* 拼接信息第二行为次要说明，字号更小以拉开层次 */
    #wallPanel .wall-assembly-sub {
      font-size: 10px;
      color: rgba(122, 83, 32, 0.78);
    }
    #wallPanel .wall-section .field { margin-bottom: 7px; }

    /* 3 拼法选择 */
    #wallPanel .wall-pattern-switcher {
      gap: 5px;
      margin-bottom: 6px;
      padding: 4px 5px;
      border-radius: 9px;
    }
    #wallPanel .wall-swatch-btn {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      font-size: 16px;
    }
    #wallPanel .wall-swatch-name { font-size: 12.5px; }
    #wallPanel .wall-swatch-meta { font-size: 10px; }
    #wallPanel .wall-swatch-index { font-size: 10px; }
    #wallPanel .wall-pattern-grid { gap: 5px; }
    #wallPanel .wall-pattern-btn {
      min-height: 33px;
      padding: 4px 3px;
      gap: 1px;
      border-radius: 8px;
    }
    #wallPanel .wall-pattern-name { font-size: 10.5px; }
    #wallPanel .wall-pattern-badge { font-size: 9px; padding: 0 4px; }

    /* 裁切框控制条（迁至「2 尺寸设置」区，原「4 排版预览」区块已隐藏） */
    #wallPanel .wall-crop-bar {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
      margin-top: 5px;
      padding: 6px 7px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel-2);
    }
    #wallPanel .wall-crop-switch { margin-bottom: 7px; }
    #wallPanel .wall-crop-switch .switch-text small { font-size: 10px; }
    #wallPanel .wall-crop-top {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    #wallPanel .wall-crop-info {
      flex: 1;
      min-width: 0;
      font-size: 10.5px;
      line-height: 1.4;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #wallPanel .wall-crop-info b { color: var(--accent-2); }
    #wallPanel .wall-crop-bar button {
      flex: none;
      min-height: 25px;
      padding: 0 9px;
      font-size: 10.5px;
      border-radius: 7px;
    }
    /* 已是整墙时「重置裁切」不可用，视觉上要明确区别于可点状态 */
    #wallPanel .wall-crop-bar button:disabled {
      opacity: .42;
      cursor: not-allowed;
      box-shadow: none;
    }
    /* 裁切尺寸精确输入：宽 / 高（mm），与画布上的裁切框双向同步 */
    #wallPanel .wall-crop-nums {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      min-width: 0;
    }
    #wallPanel .wall-crop-num {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 4px;
      min-width: 0;
      font-size: 10px;
      color: var(--muted);
      white-space: nowrap;
    }
    #wallPanel .wall-crop-num input {
      min-width: 0;
      width: 100%;
      box-sizing: border-box;
      min-height: 24px;
      padding: 0 5px;
      border: 1px solid var(--line-strong);
      border-radius: 6px;
      background: #fff;
      color: var(--ink);
      font-size: 11px;
      text-align: right;
    }
    #wallPanel .wall-crop-num input:focus {
      outline: none;
      border-color: var(--tool);
      box-shadow: 0 0 0 2px var(--tool-soft);
    }
    #wallPanel .wall-crop-num input:disabled {
      opacity: .5;
      background: var(--panel-2);
      color: var(--muted);
    }

    /* 4 方向变换 */
    #wallPanel .wall-transform-row { gap: 5px; }
    #wallPanel .wall-transform-row button {
      min-height: 31px;
      font-size: 11px;
      border-radius: 8px;
    }
    #wallPanel .wall-sel-info {
      margin-top: 5px;
      padding: 5px 8px;
      border-radius: 8px;
      font-size: 10.5px;
      line-height: 1.45;
    }

    /* 5 导出图片 */
    #wallPanel .wall-export-name {
      grid-template-columns: 52px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
    }
    #wallPanel #btnSaveWall {
      min-height: 38px;
      margin-top: 0;
      font-size: 13.5px;
    }
    /* 墙面板输入框统一为 32px，既紧凑又不失可点性 */
    #wallPanel .fixed-save-field input,
    #wallPanel .field input {
      height: 32px;
      font-size: 13px;
      padding: 0 8px;
    }
    #wallPanel .fixed-save-field { gap: 4px; }
    #wallPanel .fixed-save-field label { font-size: 11.5px; }

    /* 手机端：密度同样收紧，但保留可点击的触摸高度 */
    @media (max-width: 760px) {
      #wallPanel .wall-section { padding: 9px 10px 10px; margin-top: 6px; }
      #wallPanel .wall-source-row button { min-height: 38px; }
      #wallPanel .wall-source-badge .wall-crop-recrop { min-height: 28px; padding: 0 10px; }
      #wallPanel .wall-pattern-btn { min-height: 42px; }
      #wallPanel .wall-transform-row button { min-height: 38px; }
      #wallPanel .wall-swatch-btn { width: 34px; min-height: 36px; }
      #wallPanel #btnSaveWall { min-height: 44px; }
    }