/* D·IARY —— 小剪刀
   ===========================================================================
   两个地方用它：编辑器（从图上剪一块贴到纸上）和收纳框（剪一块再收进来），
   所以样式**不能留在 editor.html 里**——首页也得加载。

   2026-09-05 重做（用户四条）：工具条太大抢了图的戏、按钮丑且两个字会折行；
   绿色切割垫和现在的世界不搭。现在：垫子是浅色棋盘格（透明底的通用画法），
   控件是石色药丸、选中加深黄、没有黑框；全屏只有一枚黑药丸「剪下来」，在顶栏右边。
   =========================================================================== */
.cutmask{padding:0;align-items:stretch;justify-content:stretch}
.cutter{display:flex;flex-direction:column;width:100%;height:100%;max-width:none;
  max-height:none;border-radius:0;background:var(--bg);padding:0;gap:0}
/* 手机上 100%（＝position:fixed 那块）算的是地址栏收起来时的高度，地址栏一露出来
   底下就被挡住。dvh 跟着可见区域变，正好治这个。 */
@supports (height:100dvh){ .cutter{height:100dvh} }
/* 顶栏：左「不剪了」、中名字、右「剪下来」 */
.cuthead{display:flex;align-items:center;gap:10px;padding:8px 12px;
  padding-top:calc(8px + env(safe-area-inset-top));flex:none}
.cuthead b{font-family:var(--f-title);font-size:var(--fs-lg);letter-spacing:var(--ls-title);white-space:nowrap}
.cuthead .nm{color:var(--muted);font-size:var(--fs-sm);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
/* 垫子：浅色棋盘格。图靠影子立起来，垫子本身不抢戏 */
/* min-height:0 是关键：flex 项默认 min-height:auto，撑不下的时候不肯让位，
   垫子就把下面的控件顶出屏幕。 */
.cutmat{flex:1 1 0;min-height:0;position:relative;overflow:hidden;touch-action:none;cursor:crosshair;
  background-color:var(--bg);
  background-image:repeating-conic-gradient(color-mix(in srgb,var(--ink) 7%,var(--bg)) 0 25%,transparent 0 50%);
  background-size:22px 22px}
.cutstage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.cutcv,.cutov{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.cutcv{box-shadow:0 18px 40px -16px rgba(27,27,27,.45)}
.cutov{pointer-events:none}
/* 提示：一两行淡字，不占地方 */
.cuttip{padding:8px 14px 0;font-size:var(--fs-xs);color:var(--muted);flex:none;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 工具条：最多三行，每行不折行、装不下就横着滚。矮屏上整块自己滚，不许被切掉。 */
.cutbar{display:flex;flex-direction:column;gap:8px;padding:8px 12px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));flex:none;
  max-height:44vh;overflow-y:auto;overscroll-behavior:contain}
.cutrow{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0}
.cutrow::-webkit-scrollbar{display:none}
/* 分段：石色药丸槽，选中那格用全站「选中」的加深黄——没有黑框、没有分隔线 */
.cutseg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--p-stone);flex:none}
.cutseg .sg{all:unset;cursor:pointer;padding:0 12px;height:32px;line-height:32px;border-radius:999px;
  font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap;box-sizing:border-box}
.cutseg .sg.on{background:color-mix(in srgb,var(--butter) 82%,var(--ink) 18%);color:var(--ink);font-weight:600}
.cbtn{all:unset;cursor:pointer;padding:0 14px;height:36px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;
  background:var(--p-stone);font-size:var(--fs-sm);color:var(--ink);white-space:nowrap;flex:none}
.cbtn.on{background:color-mix(in srgb,var(--butter) 82%,var(--ink) 18%);font-weight:600}
.cbtn.pri{background:var(--ink);color:var(--butter);font-weight:600;padding:0 18px;height:38px}
.cbtn.ghost{background:transparent;color:var(--muted);padding:0 8px}
.cbtn.off{opacity:.4;cursor:not-allowed}
.cutsld{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--muted);flex:none}
.cutsld input{width:110px;accent-color:var(--ink)}
.cutsld i{font-style:normal;min-width:22px;text-align:right;color:var(--ink)}
.cutlbl{font-size:var(--fs-xs);color:var(--muted);flex:none;white-space:nowrap}
.cutseg.edges .sg{padding:0 10px}