/* ============================================================================
   车木间 · bench.css —— 一套尺度，全作用它
   字号 11 / 13 / 16 / 21 / 28 ｜ 间距 5 / 8 / 13 / 22 ｜ 圆角：一律直角（0）
   分隔：1px 实线 + 内侧 1px 高光（金属倒角）｜ 读数等宽，其余系统无衬线
   ========================================================================== */
:root{
  --shop:#12161a;      /* 车间底 */
  --bed:#1b2126;       /* 台面 */
  --rail:#2a333a;      /* 轨与边 */
  --steel:#94a3b0;     /* 钢（次要文字/描边） */
  --steelLite:#cdd8e2; /* 亮钢（正文） */
  --wood:#d8a86a;      /* 木（强调） */
  --plan:#63c8ff;      /* 图纸（信息） */
  --scrap:#e0503a;     /* 报废 */
  --fine:#5ad18c;      /* 到位 */
  --bit:#f2b134;       /* 刀（主操作） */
  --s11:11px; --s13:13px; --s16:16px; --s21:21px; --s28:28px;
  --g5:5px; --g8:8px; --g13:13px; --g22:22px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* hidden 属性必须真的藏住：下面那些 display:flex 的布局会盖过浏览器默认的 [hidden]{display:none} */
[hidden]{display:none !important}
html,body{margin:0;height:100%;background:var(--shop);color:var(--steelLite);
  font-family:var(--sans);font-size:var(--s13);overscroll-behavior:none}
body{display:flex;flex-direction:column}
b{font-weight:600}
i{font-style:normal}

/* ---------- 开机 ---------- */
.boot{position:fixed;inset:0;z-index:60;background:var(--shop);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--g13);color:var(--wood)}
.boot.off{display:none}
.bootIcon{width:64px;height:64px}
.bootName{font-size:var(--s21);letter-spacing:.24em;color:var(--steelLite)}
.bootBar{width:132px;height:2px;background:var(--rail);overflow:hidden}
.bootBar i{display:block;height:100%;width:0;background:var(--bit)}
.bootSay{font-size:var(--s11);color:var(--steel);letter-spacing:.1em}

/* ---------- 骨架 ---------- */
.app{flex:1;display:flex;flex-direction:column;min-height:0}
.top{display:flex;align-items:center;gap:var(--g8);padding:var(--g8) var(--g13);
  background:var(--bed);border-bottom:1px solid var(--rail);padding-top:max(var(--g8),env(safe-area-inset-top))}
.mark{width:18px;height:18px;color:var(--wood);flex:0 0 auto}
.appName{font-size:var(--s16);letter-spacing:.14em;color:var(--steelLite)}
.drawTag{font-family:var(--mono);font-size:var(--s11);color:var(--steel);letter-spacing:.06em}
.gap{flex:1}
.tbtn{font:inherit;font-size:var(--s11);color:var(--steel);background:var(--rail);
  border:1px solid #39444d;border-radius:0;padding:6px var(--g8);min-height:30px;cursor:pointer}
.tbtn:active{background:#333e47;color:var(--steelLite)}
.tbtn i{font-family:var(--mono);color:var(--wood)}
.tbtn.go{background:var(--bit);color:#1a1206;border-color:#c08a1c;font-weight:600}

.stage{position:relative;flex:1;min-height:0;background:var(--shop)}
#shop{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* ---------- 底部工具条 ---------- */
.bar{background:var(--bed);border-top:1px solid var(--rail);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  padding-bottom:env(safe-area-inset-bottom)}
.row{display:flex;align-items:center;gap:var(--g5);padding:var(--g5) var(--g8)}
.row.sub{padding-top:0;gap:var(--g8);font-size:var(--s11);color:var(--steel);
  border-top:1px solid rgba(148,163,176,.14)}
.gears{display:flex;gap:0}
.gears button{font:inherit;font-size:var(--s11);color:var(--steel);background:var(--rail);
  border:1px solid #39444d;border-left-width:0;border-radius:0;padding:10px var(--g8);min-height:40px;cursor:pointer}
.gears button:first-child{border-left-width:1px}
.gears button.on{background:var(--bit);color:#1a1206;font-weight:600;border-color:#c08a1c}
.pill{font:inherit;font-size:var(--s13);color:var(--steelLite);background:var(--rail);
  border:1px solid #39444d;border-radius:0;padding:10px var(--g13);min-height:40px;cursor:pointer}
.pill:active{background:#333e47}
.pill.main{background:var(--fine);color:#08200f;border-color:#3d9c68;font-weight:600}
.pill.warn{background:var(--scrap);color:#2a0a05;border-color:#a83a28;font-weight:600}
.pill.ad{border-color:var(--bit);color:var(--bit);background:rgba(242,177,52,.08);position:relative}
.pill.ad::after{content:"广告";position:absolute;top:-8px;right:-6px;background:#e07b1e;color:#160c02;
  font-size:9px;line-height:1;padding:3px 3px 2px;letter-spacing:.04em}
.pill[disabled]{opacity:.4;cursor:default}
.link{font:inherit;font-size:var(--s11);color:var(--steel);background:none;border:0;
  border-bottom:1px solid #46525c;border-radius:0;padding:2px 0;cursor:pointer}
.link:active{color:var(--wood)}
.foot{font-size:var(--s11);color:#66727c;font-family:var(--mono);letter-spacing:.02em}
.foot.bad{color:var(--scrap)}

/* ---------- 首屏那一行勾选 ---------- */
.strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--g8);padding:var(--g5) var(--g13);
  background:#171d22;border-bottom:1px solid var(--rail);font-size:var(--s11);color:var(--steel)}
.strip.done{color:#66727c}
.ck{display:flex;align-items:center;gap:var(--g5);cursor:pointer}
.ck input{appearance:none;width:15px;height:15px;margin:0;border:1px solid #4b5760;background:#0e1215;border-radius:0;position:relative}
.ck input:checked{border-color:var(--bit);background:var(--bit)}
.ck input:checked::after{content:"";position:absolute;left:3px;top:5px;width:7px;height:3px;
  border-left:2px solid #1a1206;border-bottom:2px solid #1a1206;transform:rotate(-45deg)}
.strip.hide{display:none}

/* ---------- 覆盖层（一个壳，谁进来填谁的） ---------- */
.backdrop{position:fixed;inset:0;background:rgba(6,9,11,.72);z-index:30}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:31;background:var(--bed);
  border-top:1px solid var(--rail);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  max-height:88vh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
.sheetHead{display:flex;align-items:center;gap:var(--g8);padding:var(--g8) var(--g13);
  border-bottom:1px solid var(--rail)}
.sheetHead b{font-size:var(--s16);color:var(--wood);letter-spacing:.1em}
.xbtn{margin-left:auto;font:inherit;font-size:var(--s11);color:var(--steel);background:var(--rail);
  border:1px solid #39444d;border-radius:0;padding:6px var(--g8);min-height:30px;cursor:pointer}
.sheetBody{padding:var(--g13);overflow:auto;display:flex;flex-direction:column;gap:var(--g13)}
.blk{border-left:3px solid var(--rail);padding-left:var(--g13);display:flex;flex-direction:column;gap:var(--g5)}
.blk h4{margin:0;font-size:var(--s13);color:var(--steelLite);font-weight:600}
.blk p{margin:0;font-size:var(--s11);color:var(--steel);line-height:1.7}
.blk k{font-family:var(--mono);color:var(--wood)}
.rowline{display:flex;align-items:flex-start;gap:var(--g8);font-size:var(--s11);color:var(--steel)}
.rowline .num{font-family:var(--mono);color:var(--steelLite);margin-left:auto;text-align:right;max-width:64%}
/* 工位牌上的发放记录：一行一条，等宽，能横向读完 */
.ledrow{display:flex;align-items:center;gap:var(--g8);font-family:var(--mono);font-size:var(--s11);
  color:var(--steel);border-bottom:1px solid rgba(148,163,176,.10);padding:3px 0}
.ledrow .n{color:var(--steelLite);min-width:26px}
.ledrow .t{min-width:86px}
.ledrow .w{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--steelLite)}
.ledrow .r{min-width:52px}
.ledrow .r.ok{color:var(--fine)}
.ledrow .g{min-width:74px;color:var(--steel)}
.ledrow .s{color:var(--wood)}
.stamp{width:100%;background:#0e1215;color:var(--steelLite);border:1px solid var(--rail);border-radius:0;
  font-family:var(--mono);font-size:var(--s11);padding:var(--g8);line-height:1.6;resize:vertical}
.big{font-family:var(--mono);font-size:var(--s28);color:var(--wood);letter-spacing:.04em}
.stars{font-size:var(--s16);color:var(--bit);letter-spacing:.24em}
.pair{border:1px solid var(--rail);padding:var(--g8);font-size:var(--s11);color:var(--steel);display:flex;flex-direction:column;gap:var(--g5)}
.pair.bad{border-color:var(--scrap);color:#f0b0a4}
.doneArt{display:flex;gap:var(--g13);align-items:flex-start}
.doneArt canvas{width:96px;height:150px;background:#0e1215;border:1px solid var(--rail)}
.mini{display:flex;gap:var(--g8)}

/* ---------- 作品架（唯一会滚动的内容区） ---------- */
.full{position:fixed;inset:0;z-index:40;background:var(--shop);display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top)}
.fullHead{display:flex;align-items:center;gap:var(--g8);padding:var(--g8) var(--g13);
  background:var(--bed);border-bottom:1px solid var(--rail)}
.fullHead b{font-size:var(--s16);color:var(--wood);letter-spacing:.14em}
.fullHead span{font-size:var(--s11);color:var(--steel)}
.grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
  gap:1px;background:var(--rail);border-top:1px solid var(--rail)}
.cell{background:var(--shop);display:flex;flex-direction:column;align-items:center;gap:var(--g5);
  padding:var(--g8) var(--g5) var(--g13);cursor:pointer;min-height:190px}
.cell:active{background:#171d22}
.cell.here{background:#171d22;box-shadow:inset 0 0 0 1px var(--wood)}
.cell canvas{width:74px;height:120px}
.cell .nm{font-size:var(--s11);color:var(--steelLite)}
.cell .st{font-size:var(--s11);color:var(--bit);letter-spacing:.16em;font-family:var(--mono)}
.cell .st.none{color:#5a646d}
.cell .idx{font-family:var(--mono);font-size:var(--s11);color:#5a646d}
.skel{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:1px;background:var(--rail)}
.skel i{background:var(--bed);height:190px;display:block;position:relative;overflow:hidden}
.skel i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(148,163,176,.09),transparent)}
.empty{padding:var(--g22) var(--g13);display:flex;flex-direction:column;gap:var(--g13);align-items:flex-start}
.empty p{margin:0;font-size:var(--s13);color:var(--steel);line-height:1.8}
.err{padding:var(--g22) var(--g13);display:flex;flex-direction:column;gap:var(--g13);align-items:flex-start}
.err p{margin:0;font-size:var(--s13);color:#f0b0a4;line-height:1.8}

/* ---------- 小提示 ---------- */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom));
  z-index:20;background:rgba(12,16,19,.94);border:1px solid var(--rail);color:var(--steelLite);
  font-size:var(--s11);padding:var(--g8) var(--g13);opacity:0;pointer-events:none;max-width:86%}
.toast.on{opacity:1;border-color:var(--bit)}