/* ===== [EDIT-MODE] 编辑态样式 BEGIN ===== */
#edActs{margin-left:auto; display:none; align-items:center; gap:6px}
/* 顶栏右侧按钮跟着「有没有未保存改动」换：进编辑但没改动时仍是导出，画下第一笔换成放弃 / 保存，
 * 保存、放弃或撤销回原样后换回导出（body.dirty 由 edUpdateBar 随 ed.dirty 同步） */
body.editing.dirty #edActs{display:flex}
/* 两组按钮互换时从右往左划出（有改动露出放弃 / 保存，改动清空露出导出），第二个按钮晚 60ms；
 * 元素从 display:none 变回可见时动画会重播，所以每次切换都会播一次。ed-left 在第一次「改动清空」后才加，页面刚打开或刚进编辑时导出不播 */
@keyframes topSwap{from{clip-path:inset(0 0 0 100%); transform:translateX(10px)} to{clip-path:inset(0); transform:none}}
body.editing.dirty #edActs .btn, body.ed-left:not(.editing.dirty) #flowExpBtn{animation:topSwap .32s cubic-bezier(.2,.8,.2,1) both}
body.editing.dirty #edActs #edSave, body.ed-left:not(.editing.dirty) #flowExpBtn{animation-delay:.06s}
@media (prefers-reduced-motion:reduce){ body.editing.dirty #edActs .btn, body.ed-left #flowExpBtn{animation:none} }
#edDirty{font-size:12px; color:var(--red); padding:0 6px}
/* 工具条住在编辑栏里，是编辑站内容的第一行（栏内 data-st 过滤之外再要求处于编辑态）；吸顶，滚动用色统计时工具不跑掉 */
#edControls{display:none; min-width:0; background:var(--panel); position:sticky; top:0; z-index:3; padding:8px 12px 6px; border-bottom:1px solid var(--line)}
body.editing aside > #edControls{display:block}
body.editing #dock aside{scroll-padding-top:var(--ed-ctl-h, 72px)}   /* 定位到面板内元素时避开吸顶工具条 */
body:not(.editing) aside > #edControls{display:none !important}
#edBar{
  display:flex; align-items:center; gap:2px; padding:6px; overflow-x:auto;
  background:var(--panel); border:1px solid var(--line2); user-select:none;
}
#edBar > *{flex-shrink:0}
#edBar .sep{width:1px; height:34px; background:var(--line); margin:0 6px}
#edBar button{
  width:48px; height:46px; border:1px solid transparent; background:transparent; color:var(--txt);
  cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
}
#edBar button i{font-style:normal; font-size:17px; line-height:1}
#edBar button img{width:24px; height:24px; display:block}
#edBar button span{font-size:11px; color:var(--txt2); line-height:1}
#edBar button:hover:not(:disabled){border-color:var(--line2)}
#edBar button.on{background:var(--teal)}
#edBar button.on i, #edBar button.on span{color:#0B141A}
#edBar button:disabled{opacity:.3; cursor:default}
/* 撤销 / 重做：紧凑的回折箭头（SVG），粗线条，不依赖系统字形宽度 */
#edBar button svg.ed-ico{width:22px; height:22px; display:block; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
#edBar button.on svg.ed-ico{color:#0B141A}
/* 套索按钮右下角的小三角：提示点开有选法可选 */
#edBar button[data-tool="lasso"]{position:relative}
#edBar button[data-tool="lasso"]::after{content:""; position:absolute; right:3px; bottom:3px; border:3px solid transparent; border-right-color:currentColor; border-bottom-color:currentColor; opacity:.55}
#edBar button[data-tool="lasso"].on::after{color:#0B141A}

/* 套索选法：点套索按钮弹出的小选单（挪到 body 下，fixed 定位在按钮下方） */
#edLassoMenu{
  position:fixed; z-index:60; display:none; flex-direction:column; min-width:188px; padding:4px;
  background:var(--panel); border:1px solid var(--line2); box-shadow:0 8px 24px rgba(0,0,0,.45);
}
#edLassoMenu.show{display:flex}
#edLassoMenu button{
  display:grid; grid-template-columns:24px 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; text-align:left;
  padding:7px 10px; border:1px solid transparent; background:transparent; color:var(--txt); cursor:pointer; font:inherit;
}
#edLassoMenu button svg{grid-row:1 / span 2; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
#edLassoMenu button svg rect{stroke-width:1.1}
#edLassoMenu button svg .f{fill:var(--teal); stroke:var(--teal); stroke-width:1.1}
#edLassoMenu button svg .w{stroke:var(--teal); opacity:.75}
#edLassoMenu button b{font-size:13px; font-weight:700; line-height:1.2}
#edLassoMenu button small{font-size:11px; color:var(--txt2); line-height:1.3}
#edLassoMenu button:hover{border-color:var(--line2)}
#edLassoMenu button.on{background:rgba(0,200,200,.14); border-color:var(--teal)}
#edLassoMenu button.on b{color:var(--teal)}

/* 选区浮条：贴在选区上方（位置由脚本按选区外接框算），有选区才出现 */
#edSelPop{
  position:absolute; left:0; top:0; z-index:6; display:none; align-items:center; gap:6px;
  padding:4px 4px 4px 10px; background:rgba(15,25,35,.94); border:1px solid var(--teal); white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
body.editing.has-sel:not(.mode3d) #edSelPop{display:flex}
#edSelN{font-family:var(--font-d); font-size:12px; letter-spacing:.06em; color:var(--teal); margin-right:2px}
#edSelPop button{
  display:flex; align-items:center; height:30px; padding:0 10px; cursor:pointer; font:inherit; font-size:12px;
  color:var(--txt); background:transparent; border:1px solid var(--line2);
}
#edSelPop button:hover{border-color:var(--txt2)}
/* 按色圈选：已选的颜色在颜色区与全部色号里打标（右上角红点 + 红边），图纸上同色格持续高亮 */
body.lasso-color .ed-count.lasso-on{border-color:var(--red); box-shadow:inset 0 0 0 2px var(--red)}
body.lasso-color .ed-count.lasso-on::after, body.lasso-color #edPal .sw.lasso-on::after{content:""; position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 1.5px #fff}
body.lasso-color #edPal .sw.lasso-on{outline:2px solid var(--red); outline-offset:1px; position:relative; z-index:1}
/* 手机长按色块：不弹系统菜单、不选中文字 */
.ed-count, #edPal .sw{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none}

/* 画布右下角「移动」：编辑态才出现，灰白配色，和编辑工具区分开 */
#edHandBtn{
  position:absolute; right:10px; bottom:10px; z-index:6; display:none; width:44px; height:44px; padding:0;
  align-items:center; justify-content:center; cursor:pointer; border-radius:50%;
  background:rgba(255,255,255,.92); border:1px solid #b9bec4; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
#edHandBtn img{width:26px; height:26px; display:block} /* 与工具条同一套定稿图标，原色显示；按钮仍是灰白圆钮，和编辑工具区分开 */
#edHandBtn.on{background:#5b6168; border-color:#5b6168}
body.editing #edHandBtn{display:flex}
body.ironon.editing #edHandBtn{bottom:44px}
/* 套索圈中后自动切到移动：按钮弹一下 + 青色光圈向外扩散三次，提示可以拖动选区了 */
/* 进入图纸编辑站：按钮从右下弹入一下，提示它出现了（仅编辑站显示） */
#edHandBtn.enter{animation:edHandIn .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes edHandIn{0%{transform:scale(0) translateY(14px); opacity:0}60%{transform:scale(1.12) translateY(0); opacity:1}100%{transform:scale(1); opacity:1}}
@media (prefers-reduced-motion: reduce){ #edHandBtn.enter{animation:none} }
#edHandBtn.cue{animation:edHandCue .8s ease-out 3}
@keyframes edHandCue{
  0%{transform:scale(1); box-shadow:0 2px 8px rgba(0,0,0,.25), 0 0 0 0 rgba(0,200,200,.85)}
  25%{transform:scale(1.18)}
  50%{transform:scale(1)}
  100%{transform:scale(1); box-shadow:0 2px 8px rgba(0,0,0,.25), 0 0 0 16px rgba(0,200,200,0)}
}
@media (prefers-reduced-motion: reduce){ #edHandBtn.cue{animation:edHandCue .8s ease-out 1} }
#edBar #edChip{
  display:flex; flex-direction:row; align-items:center; gap:8px; padding:0 10px 0 4px; cursor:pointer;
  border:1px solid var(--line2); height:46px; width:auto; min-width:88px;
}
#edChip[aria-expanded="true"]{border-color:var(--teal); background:var(--panel2)}
#edChip:hover{border-color:var(--teal)}
#edChip .sw{width:36px; height:36px; border:1px solid rgba(255,255,255,.3)}
#edChip .cd{font-family:var(--font-d); font-weight:700; font-size:15px; letter-spacing:.05em}
#edPal{
  display:none; max-height:min(260px,30vh);
  flex-direction:column; background:var(--panel); border:1px solid var(--line2); border-top:0;
}
#edPal.show{display:flex}
#edPal .hd{display:flex; align-items:center; padding:10px 12px; border-bottom:1px solid var(--line);
  font-family:var(--font-d); font-weight:700; letter-spacing:.14em; font-size:13px}
#edPal .hd span{flex:1}
#edPal .hd button{background:none; border:none; color:var(--txt2); font-size:16px; cursor:pointer}
#edPal input{margin:10px 12px 4px; padding:7px 9px; background:var(--bg); border:1px solid var(--line);
  color:var(--txt); font-size:12px; outline:none}
#edPal input:focus{border-color:var(--teal)}
#edPal .bd{overflow-y:auto; padding:0 12px 12px; flex:1; min-height:0}
#edPal .sec{font-size:11px; color:var(--txt2); margin:10px 0 6px; letter-spacing:.08em}
#edPal .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); gap:4px}
#edPal .sw{aspect-ratio:1; cursor:pointer; border:1px solid rgba(255,255,255,.14); position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;
  font-family:var(--font-d); font-weight:700; font-size:9px; line-height:1; letter-spacing:0}
#edPal .sw.long{font-size:7px; word-break:break-all; padding:1px}   /* 长色号（如 Perler 80-15179）折两行 */
#edPal .sw:hover{outline:2px solid var(--txt); z-index:1}
#edPal .sw.sel{outline:2px solid var(--teal); outline-offset:1px; z-index:1}
#edColorSec .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:6px; margin:4px 0 8px}
/* 颜色块：色样 · 色号 · 颗数 · 占比条；点即选用 */
/* 上半是色样、色号直接写在色样上（字色由 txtOn 按明暗取深 / 浅）；下半深色条写颗数；最底一道细占比条 */
.ed-count{display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; border:1px solid var(--line); background:var(--panel2); color:var(--txt); cursor:pointer; min-width:0; position:relative; text-align:center; overflow:hidden; clip-path:var(--cut-tr)}
.ed-count .sw{position:relative; width:100%; height:30px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid rgba(0,0,0,.25)}
.ed-count .code{font-family:var(--font-d); font-size:14px; font-weight:700; letter-spacing:.04em; line-height:1; overflow-wrap:anywhere; padding:0 2px}
.ed-count .sw.long .code{font-size:10px; letter-spacing:0}
.ed-count .sw.empty .code{color:var(--bg); font-size:12px}
.ed-count .qty{font-size:11px; color:var(--txt2); line-height:1; padding:5px 2px 4px; font-variant-numeric:tabular-nums}
.ed-count .bar{display:block; height:2px; background:var(--bg); position:relative}
.ed-count .bar::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--txt3)}
.ed-count.hot .bar::after{background:var(--red)}
.ed-count.blank .qty{color:var(--txt3)}
.ed-count.sel{border-color:var(--teal); box-shadow:inset 0 0 0 1px var(--teal)}
.ed-count:hover{border-color:var(--txt2)}
/* 区块标题右端「全部色号」：打开搜索 + 全色板 */
.ed-more{margin-left:8px; border:1px solid var(--line2); background:transparent; color:var(--txt2); font-family:var(--font-d); font-size:11px; font-weight:700; letter-spacing:.08em; padding:3px 9px; cursor:pointer; clip-path:var(--cut-sm)}
.ed-more:hover, .ed-more.on{border-color:var(--teal); color:var(--teal)}
/* 全部色号区：住在颜色区块里、在用色块下方展开 */
#edColorSec #edPal{border-top:1px solid var(--line2); margin:0 0 8px}
#edPal .sw.used::after{content:attr(data-count); position:absolute; right:0; bottom:0; font-size:7px; line-height:1; padding:1px 2px; background:rgba(15,25,35,.85); color:var(--teal); font-weight:700}
/* 空白（不放豆）：钉板底色 + 红斜线 */
.sw.empty{background:linear-gradient(135deg, transparent 46%, #FF4655 46% 54%, transparent 54%), var(--paper) !important}
body.editing .hud{bottom:10px}
/* 页内确认框（替代浏览器 confirm）：盖在图纸区上，图纸仍隐约可见 */
#edModal{position:absolute; inset:0; z-index:20; display:none; align-items:center; justify-content:center; background:rgba(10,16,22,.55)}
#edModal.show{display:flex}
#edModal .box{
  width:340px; background:var(--panel); border:1px solid var(--line2); border-top:3px solid var(--red);
  clip-path:var(--cut); padding:20px 20px 16px; box-shadow:0 16px 48px rgba(0,0,0,.5);
}
#edModal .t{font-family:var(--font-d); font-weight:700; font-size:16px; letter-spacing:.08em; margin-bottom:8px}
#edModal .m{font-size:13px; color:var(--txt2); line-height:1.6; margin-bottom:18px}
#edModal .b{display:flex; justify-content:flex-end; gap:8px}
#edModal button{
  border:1px solid var(--line2); background:transparent; color:var(--txt); cursor:pointer;
  font-family:var(--font-d); font-weight:700; font-size:13px; letter-spacing:.1em; padding:7px 16px; clip-path:var(--cut-sm);
}
#edModal button:hover{border-color:var(--txt2)}
#edModal button.primary{background:var(--red); border-color:var(--red); color:#fff}
#edModal button.primary:hover{filter:brightness(1.1)}
/* 编辑态要一眼看得出：画布红框 + 左上角徽标 */
body.editing #view-grid{box-shadow:inset 0 0 0 2px var(--red)}
#edBadge{
  position:absolute; left:44px; top:44px; z-index:6; display:none; pointer-events:none;
  background:var(--red); color:#fff; font-family:var(--font-d); font-weight:700; font-size:13px; letter-spacing:.12em;
  padding:6px 12px; clip-path:var(--cut-sm);
}
#edBadge span{font-weight:400; opacity:.8; margin-left:8px; letter-spacing:.04em}
#edBadgeSub{display:none; font-weight:400; letter-spacing:.04em; margin-top:3px}
#edBadgeSub.show{display:block}
body.editing #edBadge{display:block; animation:edBreath 1.8s ease-in-out forwards} /* 进编辑时呼吸一下就消失，不常驻占画布；编辑态靠红框辨认 */
@keyframes edBreath{0%{opacity:0} 18%{opacity:1} 70%{opacity:1} 100%{opacity:0; visibility:hidden}}
@media (prefers-reduced-motion: reduce){ body.editing #edBadge{animation-duration:1.2s} }
/* 浏览态：可单击格子的提示 */
#edTip{
  position:absolute; z-index:6; pointer-events:none; display:none; white-space:nowrap;
  background:rgba(15,25,35,.92); color:var(--txt); border-left:3px solid var(--teal);
  font-size:12px; padding:5px 9px;
}
#edTip.show{display:block}
#edTip b{color:var(--teal); font-family:var(--font-d)}
/* 长按进度环：450ms 走满一圈 */
#edHoldRing{
  position:absolute; z-index:7; width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%;
  pointer-events:none; display:none;
  background:conic-gradient(var(--red) var(--p,0%), rgba(15,25,35,.35) 0);
  -webkit-mask:radial-gradient(circle, transparent 12px, #000 13px); mask:radial-gradient(circle, transparent 12px, #000 13px);
}
#edHoldRing.show{display:block; animation:edHold 330ms linear forwards}
@property --p{syntax:'<percentage>'; inherits:false; initial-value:0%}
@keyframes edHold{from{--p:27%} to{--p:100%}}

body.editing .toast{top:var(--toast-top, 96px); bottom:auto; right:auto; left:50%; transform:translateX(-50%)} /* 落在图纸区顶部居中（toast() 写入 --toast-top），不压底部编辑栏与「完成编辑」按钮 */
#edPal .foot{padding:8px 12px; border-top:1px solid var(--line); font-size:11px; color:var(--txt2); min-height:34px}
body.editing #gridCanvas{cursor:crosshair}
body.editing #gridCanvas.panning{cursor:grabbing}
/* ===== [EDIT-MODE] 编辑态样式 END ===== */