/* ---------- 参数行：一行一个，右边一律是下拉框 ---------- */
  .opt{display:flex;align-items:center;gap:8px;min-height:30px}
  /* 迭代 74：#presetRow（常用尺寸 + 原尺寸）恒显示 —— 隐藏规则与 hidden 切换全撤 */
  /* v208：1/3 卡宽下「常用尺寸 + 滑轨 + 值 + 原尺寸」放不下 —— .rng-wrap 可压缩(min-width:0)
     后内容溢出，数值会压到「原尺寸」按钮上；滑轨 128→96、值位 62→44，整行放得下 */
  #presetRow .rng{width:96px}
  #presetVal{min-width:44px;flex:0 0 auto}
  .opt + .opt{margin-top:5px}
  .opt-name{font-size:12px;color:var(--text-2);flex:0 0 auto}
  /* v138：调色卡左右两栏 —— 左 = 色相 / 饱和度 / 亮度，右 = 色彩平衡（中间一道细分隔线分组） */
  .adj-cols137{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;align-items:start}
  .adj-col137{min-width:0}
  .adj-col137 + .adj-col137{border-left:1px solid var(--line);padding-left:20px}
  /* 面板窄下来时退回一列（不画分隔线了，改成上下的自然间距） */
  @media (max-width:760px){
    .adj-cols137{grid-template-columns:1fr;gap:0}
    .adj-col137 + .adj-col137{border-left:none;padding-left:0}
  }
  .sel{
    margin-left:auto;flex:0 1 auto;min-width:0;max-width:100%;
    font:inherit;font-size:12px;color:var(--text);cursor:pointer;
    padding:5px 6px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;
    outline:none;transition:.15s;
  }
  .sel:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .sel:disabled{opacity:.5;cursor:not-allowed}
  /* 迭代 39：切割面板的参数改成滑动条（一行 = 名字 + 滑轨 + 当前值，下面一行写两端档位） */
  .rng-wrap{margin-left:auto;display:flex;align-items:center;gap:9px;flex:0 1 auto;min-width:0}
  .rng{
    -webkit-appearance:none;appearance:none;flex:0 0 auto;
    width:128px;height:16px;background:transparent;cursor:pointer;outline:none;
  }
  .rng::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:var(--line-strong)}
  .rng::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-5px;
    border-radius:50%;background:#fff;border:2px solid var(--accent);
    box-shadow:0 1px 3px rgba(15,23,42,.22);transition:transform .12s;
  }
  .rng:hover::-webkit-slider-thumb{transform:scale(1.08)}
  .rng:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--accent-soft)}
  .rng::-moz-range-track{height:4px;border-radius:999px;background:var(--line-strong)}
  .rng::-moz-range-thumb{width:12px;height:12px;border:2px solid var(--accent);border-radius:50%;background:#fff}
  .rng-val{
    font-size:12px;font-weight:600;color:var(--text);min-width:62px;text-align:right;
    font-variant-numeric:tabular-nums;
  }
  /* v135：色彩平衡三条 —— 轨道画成互补色渐变（青↔红 / 洋红↔绿 / 黄↔蓝），
     往哪边拖就偏哪边的色；滑块照旧白底蓝边，规则要放在 .rng 轨道之后才能盖过去 */
  .rng-bal-r::-webkit-slider-runnable-track{background:linear-gradient(90deg,#22c9c9,#e04646)}
  .rng-bal-g::-webkit-slider-runnable-track{background:linear-gradient(90deg,#d94f9e,#43bd43)}
  .rng-bal-b::-webkit-slider-runnable-track{background:linear-gradient(90deg,#d9c14a,#4a6ed9)}
  .rng-bal-r::-moz-range-track{background:linear-gradient(90deg,#22c9c9,#e04646)}
  .rng-bal-g::-moz-range-track{background:linear-gradient(90deg,#d94f9e,#43bd43)}
  .rng-bal-b::-moz-range-track{background:linear-gradient(90deg,#d9c14a,#4a6ed9)}
  /* v97：调色数值可直接输入（em 换成 number 输入框，复用 rng-val 的排版） */
  .rng-num{
    width:56px;min-width:0;padding:1px 4px;border:1px solid var(--line);border-radius:6px;
    background:var(--card);font:inherit;font-size:12px;font-weight:600;color:var(--text);
    text-align:center;font-variant-numeric:tabular-nums;
  }
  .rng-num:focus{outline:none;border-color:var(--accent)}

  .row-actions .mini-btn{flex:1}

  /* ---------- 模式切换：两个小图标按钮 ---------- */
  .mode-switch{display:flex;gap:4px;flex:0 0 auto}
  /* v396：序列帧节点 —— 功能键把「序列帧」排最前（像素 / 调色跟在后面）；只挪视觉顺序。
     ⚠️ 选择器故意写 `[data-work^="frame"]` 而不是精确等值那种写法（CSS 内联在 <head>、
     按钮在 <body>，「功能键顺序」那几条自查用的是 html.indexOf 取**首次出现**，
     写成后者会让首次命中的位置掉到 CSS 上 ⇒ 顺序断言假红（v396 实测踩过）。 */
  .mode-switch.seqfirst396 button[data-work^="frame"]{order:-1}
  .mode-switch button{
    font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;transition:.15s;
    display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;
    border:1px solid var(--line);background:#fafbfd;color:var(--text-2);line-height:1;
  }
  .mode-switch .mi{width:14px;height:14px;flex:0 0 14px}
  .mode-switch button:hover{border-color:var(--accent);color:var(--accent)}
  .mode-switch button.on{
    border-color:var(--accent);color:#fff;   /* v226：选中态字改白（用户口径，不要深字） */
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
  }
  /* 迭代 33：功能选项按「前面接的是图片还是视频」自动置灰（置灰态别再用 hover 的强调色）。
     迭代 52：判据从 disabled 属性换成 aria-disabled —— 真浏览器里 disabled 的按钮不派发 click，
     「点了给一句提醒」就永远触发不到；aria-disabled 只是语义标记，点击照旧能冒泡。 */
  .mode-switch button[aria-disabled="true"],.mode-switch button[aria-disabled="true"]:hover{
    opacity:.42;cursor:not-allowed;border-color:var(--line);color:var(--text-2);
    background:#f4f5f8;box-shadow:none;
  }

  @media (max-width:760px){
    .sheet{width:calc(100vw - 16px)}
    .topbar{left:8px;right:8px;gap:8px}
    .seg{top:0}
    .seg button{padding:6px 9px;font-size:11.5px}
    /* v317：窄屏不许换行 —— 一换行 ⚙ 就掉到第二行（y≈47），正好落进主界面右栏 / 页面层
       （z48/60 > 顶栏 z30）里，点上去命中的是页面不是 ⚙ = 用户报的「右上角设置点不开」
       （实测 ≤360px 必现）。改成恒 42px 单行 + 收掉账户名，保证 ⚙ 永远留在第一行。 */
    .topbar-right{flex-wrap:nowrap;height:42px;min-height:42px;row-gap:0}
    .topbar-right .acct-name{display:none}
    .zoom-pill{left:8px;bottom:8px}
    .zoom-pop{left:8px;bottom:52px}
    .zoom-rng{width:84px}
    .ref-pick258{padding-left:180px}
  }

  .card{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:18px;box-shadow:var(--shadow);
  }
  .card h2{
    margin:0 0 14px;font-size:13px;font-weight:600;color:var(--text-2);
    display:flex;align-items:center;gap:8px;letter-spacing:.3px;
  }
  /* v118：卡片标题行右侧的动作（如调色「还原」）—— 顶到最右 */
  .card h2 .head-act{margin-left:auto}
  .card h3{margin:18px 0 9px;font-size:12px;font-weight:600;color:var(--text-3);letter-spacing:.4px}

  /* 缩略图（面板头上的当前图片） */
  .thumb{
    width:58px;height:58px;flex:0 0 58px;border-radius:10px;overflow:hidden;
    border:1px solid var(--line);display:grid;place-items:center;
  }
  .thumb img{max-width:100%;max-height:100%;display:block}




  /* ---------- Checkerboard ---------- */
  .checker{
    background-color:#fff;
    background-image:
      linear-gradient(45deg,#e6e8ee 25%,transparent 25%),
      linear-gradient(-45deg,#e6e8ee 25%,transparent 25%),
      linear-gradient(45deg,transparent 75%,#e6e8ee 75%),
      linear-gradient(-45deg,transparent 75%,#e6e8ee 75%);
    background-size:14px 14px;
    background-position:0 0,0 7px,7px -7px,-7px 0;
  }

  /* ---------- Size inputs ---------- */
  /* v387：宽高比例行 —— 宽 / 高小字标签内联在数字框左侧，框体复用 .rng-num */
  .size-row{display:flex;align-items:center;gap:7px;flex:1 1 auto;min-width:0}
  .field{display:flex;align-items:center;gap:5px;flex:1;min-width:0}
  .field em.wname{font-style:normal;font-size:11px;color:var(--text-3);flex:0 0 auto}
  .field .rng-num{flex:1;width:100%;min-width:0}
  .tag{
    display:inline-block;margin-left:5px;font-style:normal;font-size:10px;font-weight:600;
    padding:1px 6px;border-radius:20px;background:var(--accent-soft);color:var(--accent);
    vertical-align:1px;
  }
  .tag[hidden]{display:none}
  input[type=number][readonly]{
    background:#f2f3f7;color:var(--text-2);border-style:dashed;cursor:not-allowed;
  }
  input[type=number][readonly]:focus{border-color:var(--line-strong);box-shadow:none}
  input[type=number]{
    width:100%;padding:9px 10px;font-size:14px;font-weight:600;
    border:1px solid var(--line-strong);border-radius:9px;background:#fff;color:var(--text);
    outline:none;transition:.15s;font-family:inherit;
  }
  input[type=number]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  input[type=number]{-moz-appearance:textfield}

  .btn{
    font:inherit;font-size:12.5px;border-radius:9px;border:1px solid var(--line-strong);
    background:#fff;color:var(--text);padding:8px 12px;cursor:pointer;transition:.15s;
    display:inline-flex;align-items:center;gap:6px;justify-content:center;white-space:nowrap;
  }
  .btn:hover{border-color:var(--accent);color:var(--accent)}
  .btn:disabled{opacity:.45;cursor:not-allowed}
  .btn:disabled:hover{border-color:var(--line-strong);color:var(--text)}
  .btn.icon{padding:9px 10px;font-size:14px;line-height:1}
  .btn.ghost{background:#fafbfd}
  .btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
  .btn.primary{
    width:100%;padding:13px;font-size:14.5px;font-weight:600;color:#0b0d12;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;
    margin-top:14px;
  }
  .btn.primary:hover{filter:brightness(1.06);color:#0b0d12}
  .btn.primary:disabled{background:#c9ccd8;box-shadow:none}
  /* 面板那一行右侧的主按钮（下载 PNG / 生成切割）：不能像卡片里的主按钮那样占满整行 */
  /* v228：顶栏「下载 PNG」与「添加」同款 —— 白底描边块（浅色）/深灰块（深色镜像段）、
     彩色渐变与投影退役，高度统一钉 34px（以下载按钮的高度为准） */
  .sheet-bar .sheet-cta{
    width:auto;margin:0;height:34px;padding:0 15px;font-size:12.5px;font-weight:400;border-radius:9px;
    background:#fff;border:1px solid var(--line-strong);color:var(--text);
    box-shadow:none;
  }
  .sheet-bar .sheet-cta:hover{filter:none;background:#fff;border-color:var(--line-strong);color:var(--text)}
  .sheet-bar .add-wrap157 .btn{height:34px;padding:0 13px;border-radius:9px}

  .row-actions{display:flex;gap:8px;margin-top:8px}
  .row-actions .btn{flex:1}