/* ================================================================
   修图页样式
   ----------------------------------------------------------------
   深色界面 —— 修图时周围越暗，越容易判断照片本身的明暗和色彩。
   这是所有专业修图软件的共识做法，不是审美偏好。
   ================================================================ */

.studio-page{
  --sbg:#141416; --spanel:#1e1e21; --spanel2:#26262a;
  --scard:#2a2a2e;
  --sline:rgba(255,255,255,.10);
  --scard-hi:rgba(255,255,255,.15);
  --sink:#f0eeec; --sink2:#9b9893;
  --saccent:#5b9bd5;
  margin:0;height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--sbg);color:var(--sink);
  font:14px/1.5 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}

/* ---------------- 顶栏 ---------------- */
.st-bar{
  flex:none;display:flex;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;
  background:var(--spanel);border-bottom:1px solid var(--sline);
}
.st-title{
  flex:1;min-width:0;font-size:13.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--sink2);
}
.st-sep{flex:none;width:1px;height:20px;background:var(--sline);margin:0 2px}

.st-btn{
  flex:none;height:34px;min-width:34px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-size:13px;line-height:1;
  color:var(--sink);background:var(--spanel2);
  border:1px solid var(--sline);border-radius:9px;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .12s;
}
.st-btn:hover{background:#33333a}
.st-btn:active{background:#3b3b43}
.st-btn:disabled{opacity:.32;cursor:default}
.st-btn.wide{min-width:auto}
.st-btn.primary{
  color:#141416;background:#e8e3de;border-color:#e8e3de;font-weight:500;
}
.st-btn.primary:hover{background:#f4f0ec}
.st-btn.primary:disabled{background:#5c5c60;border-color:#5c5c60;color:#a8a8ac}
.st-btn.on{background:var(--saccent);border-color:var(--saccent);color:#141416}

/* ---------------- 主区 ---------------- */
.st-main{flex:1;min-height:0;display:flex}

.st-stage{
  flex:1;min-width:0;position:relative;
  display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #232327 0%, var(--sbg) 70%);
}
#stCanvas{
  max-width:100%;max-height:100%;
  display:block;
  /* 棋盘格底：透明区域能看出来 */
  box-shadow:0 10px 40px -8px rgba(0,0,0,.7);
}
#stCanvas.hidden{display:none}

/* 空状态 */
.st-drop{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:32px;text-align:center;
  border:1.5px dashed var(--sline);border-radius:12px;margin:16px;
  transition:border-color .15s,background .15s;
}
.st-drop.dragover{border-color:var(--saccent);background:rgba(91,155,213,.07)}
.st-drop-icon{font-size:40px;opacity:.4;margin-bottom:6px}
.st-drop h2{margin:0;font-size:16px;font-weight:600}
.st-drop p{margin:0;font-size:13px;color:var(--sink2)}
.st-drop p.dim{font-size:12px;opacity:.7;margin-top:2px}
.st-drop .st-btn{margin-top:16px}
.st-drop.hidden{display:none}

/* 处理中 */
.st-busy{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  background:rgba(20,20,22,.72);backdrop-filter:blur(2px);
  font-size:13px;color:var(--sink2);z-index:5;
}

/* ---------------- 调整面板 ---------------- */
.st-panel{
  flex:none;
  display:flex;flex-direction:row;   /* 内容区 + 最右竖栏 */
  background:var(--spanel);border-left:1px solid var(--sline);
  min-height:0;
}
/* 内容区。302px 是量出来的：3 列预设卡每张约 88px，
   再窄名字就会被截断；再宽又没有更多信息可放。 */
.st-panel-main{
  flex:none;width:302px;min-width:0;
  display:flex;flex-direction:column;min-height:0;
}
.st-panel-head{
  flex:none;display:flex;align-items:center;gap:8px;
  padding:11px 14px 10px;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;
  color:var(--sink);border-bottom:1px solid var(--sline);
}
.st-panel-head span{flex:1}

/* ---------------- 最右侧图标竖栏 ----------------
   放在**最右**（不是紧贴画布）：
     · 鼠标往屏幕边缘甩就能点到，不用瞄准
     · 切换分页时按钮位置不动，肌肉记忆成立
   图标 + 小字标签：纯图标好看但难认，纯文字占地方。 */
.st-rail{
  flex:none;width:54px;
  display:flex;flex-direction:column;gap:2px;
  padding:8px 5px;
  border-left:1px solid var(--sline);
  background:var(--sbg);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;
}
.st-rail::-webkit-scrollbar{display:none}
.st-rail-btn{
  flex:none;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 2px;
  font:inherit;font-size:9.5px;line-height:1;
  color:var(--sink2);background:none;border:0;
  border-radius:9px;cursor:pointer;
  transition:background .12s,color .12s;
}
.st-rail-btn i{font-style:normal;font-size:17px;line-height:1}
.st-rail-btn:hover{color:var(--sink);background:var(--spanel2)}
.st-rail-btn.on{color:#fff;background:var(--saccent)}
.st-rail-btn:focus-visible{outline:2px solid var(--saccent);outline-offset:1px}
.st-mini{
  display:none;width:26px;height:26px;
  font:inherit;font-size:12px;line-height:1;
  color:var(--sink);background:var(--spanel2);
  border:1px solid var(--sline);border-radius:7px;cursor:pointer;
}

/* ---------------- 分页 ----------------
   每个大类一页。整个分页区**一条滚动条**（用户要求：不要内部滚动条）。
   只有当前页 display:flex，其余 display:none —— 一次只滚一页，
   切换大类时滚动位置是共享的（同一根滚动轴，符合直觉）。 */
.st-pages{
  flex:1;min-height:0;display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
}
.st-page{
  display:none;flex:none;
  flex-direction:column;gap:10px;
  padding:12px 14px 16px;
}
.st-page.on{display:flex}

/* 页内小节标题（人像 / 工具页用） */
.st-page-head{
  display:flex;align-items:baseline;gap:8px;
  font-size:12.5px;font-weight:600;color:var(--sink);
}
.st-page-head span:first-child{flex:1}
.st-page-note{
  font-size:10.5px;font-weight:400;
  color:var(--sink2);opacity:.8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 工具页里每组工具之间的分隔 */
.st-tool-block{
  display:flex;flex-direction:column;gap:9px;
  padding-bottom:12px;border-bottom:1px solid var(--sline);
}
.st-tool-block:last-child{border-bottom:0;padding-bottom:0}

/* 滑杆容器：滚动由分页区统一管，这里不限高 */
.st-sliders{display:flex;flex-direction:column}
/* 「调整」页里影调 / 颜色两个容器之间分个隔（都在同一页，不隔开像连体） */
.st-sliders + .st-sliders{border-top:1px solid var(--sline);padding-top:8px}
.st-panel-foot{
  flex:none;padding:10px 14px calc(env(safe-area-inset-bottom) + 12px);
  font-size:11.5px;color:var(--sink2);
  border-top:1px solid var(--sline);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---- 单个滑块 ---- */
.st-sl{
  padding:9px 0 4px;
}
.st-sl-top{
  display:flex;align-items:baseline;gap:8px;
  font-size:12.5px;margin-bottom:7px;
}
.st-sl-name{flex:1;color:var(--sink)}
.st-sl-val{
  font-size:11.5px;color:var(--sink2);
  font-variant-numeric:tabular-nums;
}
.st-sl-val.changed{color:var(--saccent)}

/* 滑块本体：跨浏览器统一成细轨 + 圆点 */
.st-sl input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:22px;background:none;cursor:pointer;display:block;
}
.st-sl input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;background:#3a3a40;
}
.st-sl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;margin-top:-6px;
  border-radius:50%;background:#f0eeec;
  border:0;box-shadow:0 1px 4px rgba(0,0,0,.5);
}
.st-sl input[type=range]::-moz-range-track{
  height:3px;border-radius:2px;background:#3a3a40;
}
.st-sl input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;
  background:#f0eeec;border:0;box-shadow:0 1px 4px rgba(0,0,0,.5);
}
.st-sl input[type=range]:focus-visible::-webkit-slider-thumb{
  outline:2px solid var(--saccent);outline-offset:2px;
}
/* 双击标签复位 */
.st-sl-name{cursor:pointer;user-select:none}
.st-sl-name:hover{color:var(--saccent)}

/* 分组标题：把 15 个滑杆分成「基础/色彩/曲线/HSL/质感」。
   用一条细上边线而不是大标题 —— 面板本来就不宽，
   分组只是给个视觉分隔，不该抢占注意力。 */
.st-sl-group{
  margin:14px 0 6px;
  padding-top:10px;
  border-top:1px solid var(--sline);
  font-size:10.5px;letter-spacing:.12em;
  color:var(--sink2);opacity:.8;
}
/* 第一组不需要上边线（上面已经是面板标题了） */
.st-sl-group:first-child{margin-top:2px;padding-top:0;border-top:0}

/* ---------------- 蒙版工具区 ---------------- */
/* 局部调整开关。放在分页**外面**常驻：
   它影响所有调色滑杆，跟着分页滚走的话，用户在影调页
   会不明白为什么只有一块区域在变。
   没有选区时整条隐藏（见 [hidden]）—— 那时它没有意义。 */
.st-scope{
  flex:none;padding:9px 14px;
  border-top:1px solid var(--sline);
}
.st-scope[hidden]{display:none}
.st-switch{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--sink);cursor:pointer;user-select:none;
}
.st-switch.small{font-size:11.5px;flex:1}
.st-switch input{
  -webkit-appearance:none;appearance:none;
  width:32px;height:18px;flex:none;margin:0;
  background:#3a3a40;border-radius:9px;position:relative;
  cursor:pointer;transition:background .16s;
}
.st-switch input::after{
  content:"";position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;
  background:#f0eeec;transition:transform .16s;
}
.st-switch input:checked{background:var(--saccent)}
.st-switch input:checked::after{transform:translateX(14px)}
.st-switch input:disabled{opacity:.4;cursor:not-allowed}

.st-mask{
  flex:none;padding:12px 14px;
  border-top:1px solid var(--sline);
  display:flex;flex-direction:column;gap:9px;
}
.st-mask-head{display:flex;gap:6px}
.st-mask-row{display:flex;align-items:center;gap:9px}

.st-seg{
  display:flex;flex:1;background:var(--spanel2);
  border:1px solid var(--sline);border-radius:8px;overflow:hidden;
}
.st-seg button{
  flex:1;padding:6px 4px;font:inherit;font-size:11.5px;
  color:var(--sink2);background:none;border:0;cursor:pointer;
}
.st-seg button.on{background:var(--saccent);color:#fff}
.st-mask-row .st-mini{display:block}
.st-mini:disabled{opacity:.35;cursor:not-allowed}
.st-mini.on{background:var(--saccent);color:#fff;border-color:var(--saccent)}
.st-btn.on{background:var(--saccent);color:#fff;border-color:var(--saccent)}

/* 细滑杆（笔刷大小/硬度） */
.st-mini-sl{
  flex:1;display:flex;align-items:center;gap:7px;
  font-size:11.5px;color:var(--sink2);
}
.st-mini-sl span{flex:none;width:26px}
.st-mini-sl input[type=range]{
  -webkit-appearance:none;appearance:none;
  flex:1;height:18px;background:none;cursor:pointer;min-width:0;
}
.st-mini-sl input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;background:#3a3a40;
}
.st-mini-sl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:12px;height:12px;margin-top:-4.5px;
  border-radius:50%;background:#f0eeec;border:0;
}
.st-mini-sl input[type=range]::-moz-range-track{
  height:3px;border-radius:2px;background:#3a3a40;
}
.st-mini-sl input[type=range]::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;
  background:#f0eeec;border:0;
}

.st-mask-info{
  font-size:11px;color:var(--sink2);
  text-align:center;font-variant-numeric:tabular-nums;
}

/* AI 动作按钮：稍微区别于普通按钮，让人知道这个要联网/要等 */
.st-btn.ai{
  background:linear-gradient(135deg,#5b4bd6,#8a4bd6);
  border-color:transparent;color:#fff;
}
.st-btn.ai:disabled{opacity:.4;background:var(--spanel2);color:var(--sink2)}
.st-btn.ai.dim{opacity:.6}

/* ---------------- 可折叠区域 ----------------
   用户要的是「AI 修图和常规修图分为两个区域，互不干扰」。
   做成独立折叠而不是互斥切换：两块可以同时摊开对比，
   互斥切换会让"只想改一个滑杆"变成两次点击。
   ================================================ */
/* ---------------- 旧手风琴样式已删除 ----------------
   `.st-acc` / `.st-acc-head` / `.st-acc-body` 这套不再有 DOM 对应：
   它们被「图标竖栏 + 分页」取代了。
   删掉是因为它们**从来就是死的** —— CSS 里写了
   `.st-acc.collapsed .st-acc-body{display:none}`，
   但全仓库没有任何 js 去加 `collapsed` 类，
   所以 5 个标题看着能点、点了没反应。
   （保留样式只会让后来的人以为这功能是好的。） */
.st-mask-note{
  flex:1;font-size:10.5px;color:var(--sink2);opacity:.75;
  text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------------- 预设 ---------------- */
/* 分类 tab：横向排列，超出时滚动 */
.st-preset-cats{
  display:flex;gap:4px;overflow-x:auto;
  padding:0 0 4px;
  scrollbar-width:none;
}
.st-preset-cats::-webkit-scrollbar{display:none}
.st-preset-tab{
  flex:none;height:26px;padding:0 10px;
  font:inherit;font-size:11.5px;line-height:1;
  color:var(--sink2);background:none;
  border:1px solid var(--sline);border-radius:13px;
  cursor:pointer;white-space:nowrap;
  transition:background .12s,color .12s,border-color .12s;
}
.st-preset-tab:hover{color:var(--sink);border-color:rgba(255,255,255,.18)}
.st-preset-tab.on{
  background:#33333a;color:#fff;border-color:transparent;
}

/* 预设卡片网格：3 列。
   2 列时每张卡 130px 宽，缩略图 44px 高 —— 看不出效果差别。
   3 列 + 3:2 缩略图，一眼能分辨冷暖/浓淡。 */
.st-preset-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:7px;
}
.st-preset-card{
  display:flex;flex-direction:column;align-items:stretch;
  padding:0;border:1px solid var(--sline);border-radius:8px;
  background:var(--scard);cursor:pointer;overflow:hidden;
  transition:border-color .15s,box-shadow .15s;
  font:inherit;color:var(--sink);
}
.st-preset-card:hover:not(:disabled){border-color:var(--scard-hi)}
.st-preset-card.active{
  border-color:var(--saccent);
  box-shadow:0 0 0 1px var(--saccent);
}
.st-preset-card:disabled{opacity:.35;cursor:default}

/* 预设预览。
   有照片时由 buildPresetUI 用同一个 WebGL 管线渲染真实缩略图
   （background-image 设为 dataURL）；
   没照片时退回色块渐变，至少还能看出冷暖倾向。 */
.st-preset-swatch{
  width:100%;aspect-ratio:3/2;flex:none;
  background-size:cover;background-position:center;
}
/* 预设名称 */
.st-preset-name{
  display:block;padding:5px 6px 6px;
  font-size:10.5px;line-height:1.2;
  color:var(--sink);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------------- 裁剪 / 旋转 ---------------- */
.st-crop-head{display:flex;padding:0}
.st-crop-body{
  display:flex;flex-direction:column;gap:8px;
}
.st-crop-row{display:flex;align-items:center;gap:6px}
.st-crop-val{
  flex:none;width:38px;font-size:11.5px;
  color:var(--sink2);font-variant-numeric:tabular-nums;
}

/* 比例选择：一排小按钮，选中态用强调色 */
.st-crop-seg{
  display:flex;background:var(--spanel2);
  border:1px solid var(--sline);border-radius:8px;overflow:hidden;
}
.st-crop-seg button{
  flex:1;padding:6px 2px;font:inherit;font-size:11px;
  color:var(--sink2);background:none;border:0;cursor:pointer;
  white-space:nowrap;
}
.st-crop-seg button.on{background:var(--saccent);color:#fff}
.st-crop-seg button:hover:not(.on){color:var(--sink)}

/* 裁剪框 overlay：盖在 WebGL 画布上，用 2D 画。
   pointer-events 由 JS 按需开关 —— 非裁剪模式下必须是 none，
   否则会挡住画笔。 */
#stCropOverlay{
  position:absolute;
  pointer-events:none;
  z-index:4;
  touch-action:none;
}

/* ---------------- 一键模板（缩略图卡片） ---------------- */
.st-tpl{
  flex:none;display:flex;flex-wrap:wrap;gap:6px;
  padding:2px 14px 10px;
}
.st-tpl-card{
  display:flex;flex-direction:column;align-items:stretch;
  width:62px;padding:0;border:1px solid var(--sline);border-radius:7px;
  background:var(--scard);cursor:pointer;overflow:hidden;
  font:inherit;color:var(--sink);
  transition:border-color .15s,box-shadow .15s;
}
.st-tpl-card:hover:not(:disabled){border-color:var(--saccent)}
.st-tpl-card:disabled{opacity:.4;cursor:not-allowed}
.st-tpl-card.on{
  border-color:var(--saccent);
  box-shadow:0 0 0 1px var(--saccent);
}
.st-tpl-thumb{
  height:42px;width:100%;flex:none;
}
.st-tpl-name{
  display:block;padding:3px 4px 4px;
  font-size:9.5px;line-height:1.1;
  color:var(--sink);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------------- 处理进度 ---------------- */
.st-progress{
  width:min(260px,60%);height:4px;border-radius:2px;
  background:rgba(255,255,255,.14);overflow:hidden;
}
.st-progress-bar{
  height:100%;width:0;border-radius:2px;
  background:var(--saccent);
  transition:width .35s ease;
}
/* 不可预测的阶段（生成中）：走条纹动画，表示"在动但说不出还要多久" */
.st-progress-bar.indeterminate{
  width:100% !important;
  background:repeating-linear-gradient(
    90deg, var(--saccent) 0 12px, rgba(91,155,213,.35) 12px 24px);
  background-size:24px 100%;
  animation:st-stripes .9s linear infinite;
}
@keyframes st-stripes{ from{background-position:0 0} to{background-position:24px 0} }
.st-progress-note{
  font-size:11.5px;color:var(--sink2);
  font-variant-numeric:tabular-nums;
}

/* ---------------- 左右对比 ---------------- */
.st-compare{
  position:absolute;left:0;right:0;bottom:0;
  padding:10px 12px calc(env(safe-area-inset-bottom) + 10px);
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);
  z-index:5;
}
.st-compare-tag{
  flex:none;font-size:10.5px;letter-spacing:.06em;
  padding:2px 7px;border-radius:9px;
  color:#fff;background:rgba(0,0,0,.45);
}
.st-compare input[type=range]{
  -webkit-appearance:none;appearance:none;
  flex:1;height:20px;background:none;cursor:ew-resize;min-width:0;
}
.st-compare input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;background:rgba(255,255,255,.5);
}
.st-compare input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;margin-top:-6.5px;
  border-radius:50%;background:#fff;border:0;
  box-shadow:0 1px 5px rgba(0,0,0,.6);
}
.st-compare input[type=range]::-moz-range-track{
  height:3px;border-radius:2px;background:rgba(255,255,255,.5);
}
.st-compare input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:#fff;border:0;box-shadow:0 1px 5px rgba(0,0,0,.6);
}

/* ---------------- 美颜（旷视） ---------------- */
.st-beauty{
  flex:none;display:flex;flex-direction:column;
  border-top:1px solid var(--sline);
  max-height:46%;min-height:0;
}
.st-beauty-head{
  flex:none;display:flex;align-items:center;gap:8px;
  padding:10px 14px 6px;font-size:12px;
  letter-spacing:.05em;color:var(--sink2);
}
.st-beauty-head span{flex:1}
.st-beauty-body{
  flex:1;min-height:0;overflow-y:auto;
  padding:0 14px 12px;
  display:flex;flex-direction:column;gap:9px;
}
.st-beauty-empty{font-size:11.5px;color:var(--sink2);padding:6px 0}

/* 分组小标题 */
.st-beauty-group{
  font-size:11px;color:var(--sink2);opacity:.75;
  margin-top:2px;letter-spacing:.04em;
}

/* 美颜滑杆：比主滑杆矮，因为一屏要塞 10 条 */
.st-bsl{
  display:flex;align-items:center;gap:8px;
  font-size:11.5px;color:var(--sink2);
}
.st-bsl > span:first-child{flex:none;width:44px}
.st-bsl input[type=range]{
  -webkit-appearance:none;appearance:none;
  flex:1;height:16px;background:none;cursor:pointer;min-width:0;
}
.st-bsl input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;background:#3a3a40;
}
.st-bsl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:11px;height:11px;margin-top:-4px;
  border-radius:50%;background:#f0eeec;border:0;
}
.st-bsl input[type=range]::-moz-range-track{
  height:3px;border-radius:2px;background:#3a3a40;
}
.st-bsl input[type=range]::-moz-range-thumb{
  width:11px;height:11px;border-radius:50%;
  background:#f0eeec;border:0;
}
/* 值≠0 时点亮数字，一眼看出哪几项这次会被发出去 */
.st-bsl-val{
  flex:none;width:22px;text-align:right;
  font-variant-numeric:tabular-nums;
}
.st-bsl.on > span:first-child,
.st-bsl.on .st-bsl-val{color:var(--saccent)}

.st-bsl select{
  flex:1;min-width:0;font:inherit;font-size:11.5px;
  color:var(--sink);background:var(--spanel2);
  border:1px solid var(--sline);border-radius:7px;
  padding:5px 7px;cursor:pointer;
}

/* 美颜预览浮层：不遮住整张图，摆在画布下方 */
.st-preview{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:6;display:flex;align-items:center;gap:12px;
  padding:9px 12px;border-radius:11px;
  background:rgba(20,20,22,.92);border:1px solid var(--sline);
  box-shadow:0 12px 34px rgba(0,0,0,.5);
  backdrop-filter:blur(6px);
}
.st-preview-tip{
  font-size:12px;color:var(--sink2);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.st-preview-btns{display:flex;gap:7px}

/* 问「要抹掉什么」的弹层 */
.st-ask{
  position:fixed;inset:0;z-index:50;
  background:rgba(0,0,0,.55);
  display:grid;place-items:center;padding:20px;
  backdrop-filter:blur(3px);
}
.st-ask-box{
  width:min(420px,100%);
  background:var(--spanel);border:1px solid var(--sline);
  border-radius:14px;padding:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.st-ask-box h3{margin:0 0 6px;font-size:15px;color:var(--sink)}
.st-ask-box p.dim{margin:0 0 14px;font-size:12px;color:var(--sink2)}
.st-ask-box input{
  width:100%;box-sizing:border-box;
  padding:10px 12px;font:inherit;font-size:13px;
  color:var(--sink);background:var(--sbg);
  border:1px solid var(--sline);border-radius:9px;
}
.st-ask-box input:focus{
  outline:none;border-color:var(--saccent);
}
.st-ask-btns{
  display:flex;gap:8px;justify-content:flex-end;margin-top:16px;
}

/* 画布上的笔刷光标 */
.st-cursor{
  position:absolute;pointer-events:none;z-index:5;
  border:1.5px solid rgba(255,255,255,.9);
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.3);
  mix-blend-mode:difference;
}
.st-cursor.erase{border-style:dashed}

/* 画笔激活时禁用浏览器手势，否则触摸拖动会变成滚动页面 */
#stCanvas.brushing{
  touch-action:none;cursor:none;
}

/* ---------------- 窄屏：面板移到下方 ---------------- */
@media (max-width:820px){
  .st-main{flex-direction:column}
  /* 窄屏：面板移到下方，变成横向布局 ——
     竖栏转到**左侧**（横过来之后"最右"没有意义了），
     内容占满剩下的宽度。 */
  .st-panel{
    border-left:0;border-top:1px solid var(--sline);
    max-height:46dvh;
  }
  .st-panel-main{width:auto;flex:1;min-width:0}
  .st-rail{
    order:-1;                    /* 竖栏放到最左 */
    flex-direction:column;width:52px;
    border-left:0;border-right:1px solid var(--sline);
  }
  .st-panel.collapsed{max-height:none}
  .st-panel.collapsed .st-pages,
  .st-panel.collapsed .st-scope,
  .st-panel.collapsed .st-panel-foot{display:none}
  .st-mini{display:block}
  .st-title{display:none}
}

/* ================================================================
   中窄屏：顶栏收紧
   ----------------------------------------------------------------
   现象（用户反馈"右上角有点窄"）：窗口约 1000px 时，右侧那四组按钮
   （打开图片 / 导出 / 分隔线 / ◑ ▐▌ ⟲）挨得太紧，只有 8px 间隙，
   挤成一坨。

   ⚠️ 先说清楚**不是**什么（实测过）：
   在 860 / 900 / 1000 / 1100 / 1184 五个宽度下量过顶栏，
   `scrollWidth` 都没超过宽度、最后一个按钮也没被裁 —— 所以
   **不是溢出**。问题是"挤"（间距太小）和"两侧留白不对称"。

   做法：把间隙从 8px 提到 10px，按钮内边距 10px→9px
   （净宽度几乎不变，不至于反而更挤），分隔线两侧留白加大。
   ================================================================ */
@media (max-width:1100px){
  .st-bar{gap:10px}
  /* ⚠️ 分隔线的作用是"把功能按钮和视图按钮分开"，
     间距太小就失去了分组的意义 —— 所以这里给它更大的呼吸空间。 */
  .st-sep{margin:0 5px}
  /* 标题仍然吃掉所有剩余空间，但给个上限，
     免得超宽屏上"修图"和按钮之间空出一大片。 */
  .st-title{max-width:420px}
}

@media (max-width:960px){
  .st-bar{gap:8px;padding-left:8px;padding-right:8px}
  .st-btn{padding:0 8px}
  .st-btn.wide{padding:0 10px}
  .st-sep{margin:0 3px}
  .st-title{max-width:none}
}