/* 全屏画布：.app 铺满视口，所有 UI 都是它上面的浮层 */
  .app{position:fixed;inset:0;overflow:hidden}

  /* ---------- 悬浮顶栏 ---------- */
  .topbar{
    position:absolute;top:12px;left:14px;right:14px;z-index:30;
    display:flex;align-items:flex-start;gap:10px;pointer-events:none;
  }
  /* v287：顶栏三块（左上项目管理 / 中间页面切换 / 右上登录）统一成同一规格 ——
     同一条顶线（都在 .topbar 顶部）、同高 42px、同圆角 14px、同样的 0 12px 内边距；
     内侧控件也统一 30px（.btn / .icon-btn / 项目胶囊）。 */
  .topbar-left,.topbar-right{
    pointer-events:auto;display:flex;align-items:center;gap:10px;
    height:42px;box-sizing:border-box;
    background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid var(--line);border-radius:14px;padding:0 12px;box-shadow:var(--shadow);
  }
  .topbar-right{margin-left:auto;flex-wrap:nowrap;justify-content:flex-end}
  /* v287：内侧控件同高 30px —— 原来登录区 .btn 是 38px，把整块撑到 54px，比左右两块都高 */
  #acctArea .btn{height:30px;box-sizing:border-box;padding:0 12px}
  #acctArea .icon-btn{width:30px;height:30px;flex:0 0 30px}
  .topbar-left .proj-pill204{height:30px;box-sizing:border-box;padding:0 9px}
  /* v122：左上角只放 Starme 字标图（黑字透明底，浅色顶栏直接用）。
     v124：logo 缩小（26→19px），左上角白盒（框）尺寸保持不变——
     高度 42px / 最小宽 124px 焊死（= 原 26px 字标 + 7/12 内边距 + 边框的占位），logo 居中 */
  .topbar-left{height:42px;box-sizing:border-box;min-width:124px;justify-content:center}
  .brand-logo{display:block;height:19px;width:auto;user-select:none;-webkit-user-drag:none}

  /* ---------- 功能面板（挂在「输出结果」节点下面，跟着节点走） ---------- */
  /* 宽横版：几张卡片并排铺开，不再是 336px 的一长条竖条。
     迭代 51：880 → 1000 —— 三张卡并排时每张 317px（内容 293px），容差滑块那一行
     （识别容差 + 128px 滑块 + 值气泡 ≈ 255px）才装得下，不再挤成两行。
     v246：整体再降一档 1000 → 900（900 时三卡内容 260px 仍 ≥ 255，容差行装得下）。 */
  .sheet{
    position:absolute;left:0;top:0;width:min(900px,calc(100vw - 28px));z-index:32;
    max-height:min(620px,calc(100vh - 130px));
    display:flex;flex-direction:column;overflow:hidden;
    background:rgba(255,255,255,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid var(--line);border-radius:16px;
    box-shadow:0 20px 56px rgba(20,22,35,.24);
    will-change:transform;
    animation:sheetIn .16s ease-out;
  }
  .sheet[hidden]{display:none}
  /* 只淡入：位置由 JS 的 translate 决定，keyframes 里不能再碰 transform */
  @keyframes sheetIn{from{opacity:0}to{opacity:1}}
  /* 顶部只留一行：左边两个模式按钮，右边一个主按钮（下载 PNG / 生成切割） */
  .sheet-bar{
    flex:0 0 auto;display:flex;align-items:center;gap:6px;
    padding:7px 9px;border-bottom:1px solid var(--line);background:#fff;
  }
  .sheet-bar .spacer{flex:1;min-width:0}
  .icon-btn{
    width:26px;height:26px;flex:0 0 26px;border-radius:8px;border:1px solid var(--line);
    background:#fafbfd;color:var(--text-2);font:inherit;font-size:12px;line-height:1;
    cursor:pointer;transition:.15s;
  }
  .icon-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
  .icon-btn[hidden]{display:none}
  .sheet-body{flex:1;min-height:0;overflow-y:auto;padding:10px 12px 12px}
  .sheet-foot{
    flex:0 0 auto;border-top:1px solid var(--line);
    background:rgba(250,251,253,.96);padding:10px 14px 12px;
  }
  .sheet-foot[hidden]{display:none}
  .sheet-foot:empty{display:none}
  /* 卡片栅格：宽了自动 3 列，窄了自动 2 列 / 1 列 */
  .sheet-cols{
    display:grid;gap:12px;align-items:start;
    grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  }
  /* 迭代 49：切割模式只剩「切割参数」这一张卡 —— 尺寸与渲染方式都归像素处理（见
     syncSizeCard / syncFramesCard），单卡自然就在这个栅格里铺满，不再需要给谁排位；
     改让这张卡自己的几项设置横向铺开，免得一张窄卡被拉满一整幅、控件全挤到最右边。
     面板窄下来时 auto-fit 会自己退成一列。 */
  /* 迭代 55：加 :not([hidden]) —— 这条 display:grid 的优先级会压过 [hidden] 的 display:none
     （真浏览器里 hidden 会被它压掉、卡赖着不走）。 */
  .sheet[data-work="slice"] .sheet-cols #panelSlice:not([hidden]){
    display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
    gap:6px 24px;align-items:center;
  }
  .sheet[data-work="slice"] .sheet-cols #panelSlice .opt{margin-top:0}
  /* v385：最小图案 / 合并间距 / 四周留白 三档排成一排 —— 滑轨 128 收到 96，
     三列各约 268px（900 面板）时「4 字标签 + 滑轨 + 值」正好装下，面板窄了自己退列。 */
  #panelSlice .rng{width:96px}
  /* 迭代 34：取帧面板 = 帧图墙（不再有动画预览小窗；预览就是画布上那个节点） */
  .frames-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px;
    margin:8px 0 2px;max-height:266px;overflow:auto;padding:2px}
  .frame-cell{position:relative;padding:0;border:1px solid rgba(26,29,38,.14);border-radius:7px;
    background:#fff;cursor:pointer;overflow:hidden;line-height:0;transition:.12s}
  .frame-cell canvas{width:100%;height:auto;display:block}
  .frame-cell b{position:absolute;left:3px;top:3px;font:600 9px/1 system-ui,sans-serif;
    padding:2px 3px;border-radius:4px;background:rgba(26,29,38,.55);color:#fff}
  .frame-cell:hover{border-color:var(--accent)}
  .frame-cell.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
  .frame-cell.on b{background:var(--accent);color:#0b0d12}
  .frame-cell.off canvas{opacity:.4}
  .frames-empty{font-size:11px;color:var(--text-2);padding:6px 2px;grid-column:1/-1}
  /* 面板里的卡片改成扁一点，别再套一层阴影 */
  .sheet-body .card{padding:11px 12px;box-shadow:none;background:#fff}
  .sheet-body .card h2{margin:0 0 9px}
  /* ---- v385：功能面板的卡片不再各画一圈「区域框」----
     用户口径：像素 / 切割 / 调色这三块里的「单独区域框」全去掉，整块并成一个平面；
     v387：像素处理并成一张平卡（#cardSize / #cardRender 壳留闸在、内容搬空 :empty 退场）。
     v574：序列帧卡也并入同一口径 —— 面板只留最外面那一圈（.sheet 自身）边框。 */
  #panelSheet .sheet-body .card{border-color:transparent;background:transparent}
  /* ---- v387：像素处理 = 一张平卡（参考图口径）----
     第一行四颗开关（自动抠图 / 连续 / 消除锯齿 / 平滑插值，竖线分隔、说明全进 title），
     下面两列两行：识别容差 | 宽高比例（宽框 + 锁图标 + 高框）、背景 | 常用尺寸。
     v385 的「输出尺寸 / 导出设置」两张卡整卡并入 —— 壳还在（el.cardSize / el.cardRender
     的 hidden 闸一行不动），内容搬空后用 :empty 退出栅格、不占列。 */
  #panelSheet .sheet-body #cardSize:empty,
  #panelSheet .sheet-body #cardRender:empty{display:none}
  /* 开关行：四颗一行，中间一道 var(--line) 竖线（与调色卡两栏分隔同款） */
  .sw-row387{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .sw387 + .sw387{border-left:1px solid var(--line);padding-left:14px}
  .sw-row387 .switch{margin-top:0;gap:7px}
  .sw-row387 .switch em{font-size:12px;font-weight:500;color:var(--text-2);white-space:nowrap}
  /* 两列两行：中缝一道竖线，面板窄了自动退一列 */
  .grid387{display:grid;grid-template-columns:1fr 1fr;gap:11px 0;margin-top:13px}
  .cell387{min-width:0;padding-right:20px}
  .cell387:nth-child(even){border-left:1px solid var(--line);padding-left:20px}
  @media (max-width:760px){
    .grid387{grid-template-columns:1fr}
    .cell387{padding-right:0}
    .cell387:nth-child(even){border-left:none;padding-left:0}
  }
  /* 锁图标钮（v387：「锁定比例」开关换成参考图式小锁）—— 勾上 = 合上的锁 + 主题色 */
  .arlock387{position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:26px;flex:0 0 auto;border:1px solid var(--line-strong);border-radius:7px;
    cursor:pointer;transition:.15s;color:var(--text-3)}
  .arlock387:hover{border-color:var(--accent)}
  .arlock387 input{position:absolute;opacity:0;pointer-events:none;margin:0}
  .arlock387 .lk387{width:13px;height:13px}
  .arlock387 .lk-on387{display:none}
  .arlock387 input:checked ~ .lk-on387{display:block}
  .arlock387 input:checked ~ .lk-off387{display:none}
  .arlock387 input:checked ~ .lk387{color:var(--accent)}
  /* 识别容差：滑轨在格子里拉长（标签 + 长滑轨 + 数字框，参考图口径） */
  #cutoutPanel .rng-wrap{flex:1 1 auto}
  #cutoutPanel .rng{flex:1 1 auto;width:auto;min-width:96px}
  /* v385：背景那一排选项按钮 —— v387：参考图口径 = 裸文字签（无边框无底色，选中档亮主题色描边） */
  .bg-chips385{display:flex;gap:2px;flex:1 1 auto;min-width:0;margin-left:6px;flex-wrap:nowrap}
  .bg-chips385 .spec-opt249{
    flex:0 1 auto;min-width:0;padding:5px 8px;gap:0;border-radius:8px;
    flex-direction:row;justify-content:center;font-size:12px;
    border-color:transparent;background:transparent;
  }
  .bg-chips385 .spec-opt249:hover{border-color:transparent}
  .bg-chips385 .spec-opt249.on{background:transparent}
  html[data-theme="dark"] .bg-chips385 .spec-opt249{background:transparent}
  html[data-theme="dark"] .bg-chips385 .spec-opt249:hover{background:transparent}
  html[data-theme="dark"] .bg-chips385 .spec-opt249.on{background:transparent}
  /* ---- v386：宫格切割弹窗（切割功能区「宫格切割」键）----
     左列预设复用全站选项类 .spec-opt249（整行、左对齐，与模型弹窗同款行式）；
     右边 5×5 扫格：格子底 var(--sunken)（双主题自带），悬停高亮 var(--accent)，
     中缝一道 var(--line) 竖线 —— 不发明任何一次性颜色。 */
  .grid-pop386{display:flex;align-items:stretch;min-width:0;padding:10px}
  .grid-list386{display:flex;flex-direction:column;gap:4px;width:138px;flex:0 0 auto}
  .grid-list386 .spec-opt249{
    flex:0 0 auto;width:100%;min-width:0;flex-direction:row;align-items:center;
    justify-content:flex-start;gap:0;padding:8px 10px;text-align:left;
  }
  .grid-custom386{flex:1 1 auto;min-width:0;border-left:1px solid var(--line);padding-left:10px;margin-left:10px}
  .grid-custom-head386{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}
  .grid-custom-head386 .spec-sec249{margin:0}
  .grid-dim386{font:600 12px/1 var(--sans);font-style:normal;color:var(--accent);white-space:nowrap}
  .grid-cells386{display:grid;grid-template-columns:repeat(5,24px);gap:5px}
  .grid-cell386{width:24px;height:24px;padding:0;border:none;border-radius:6px;
    background:var(--sunken);cursor:pointer;transition:background .1s}
  .grid-cell386.on{background:var(--accent)}