:root{
  --bg:#fafaf9;
  --panel:#ffffff;
  --ink:#1c1917;
  --ink-2:#78716c;
  --ink-3:#a8a29e;
  --line:#e7e5e4;
  --accent:#F55000;
  --accent-soft:rgba(245,80,0,.08);
  --radius:12px;
  --shadow:0 4px 16px rgba(28,25,23,.06);
  --shadow-lg:0 14px 44px rgba(28,25,23,.14);
  --font:"LXGW WenKai","LXGW WenKai Screen","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
button{font-family:inherit;font-size:14px;cursor:pointer;border:none;background:none;color:inherit}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

header,footer{background:var(--panel)}
header{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;gap:14px;
  padding:14px 22px;border-bottom:1px solid var(--line);
}
.brand{font-size:16px;letter-spacing:.02em;display:flex;align-items:baseline;gap:8px}
.brand .en{font-size:11px;color:var(--ink-3);letter-spacing:.12em;text-transform:uppercase}
.spacer{flex:1}
.tools{display:flex;align-items:center;gap:8px}
.count{font-size:13px;color:var(--ink-2);margin-right:2px}

.btn{
  padding:7px 15px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);transition:all .18s ease;
}
.btn:hover{border-color:var(--ink-3);background:#f5f4f2;transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 10px rgba(245,80,0,.18)}
.btn.primary:hover{background:#d94700;border-color:#d94700;box-shadow:0 6px 18px rgba(245,80,0,.28)}
.btn.primary:active{transform:translateY(0) scale(.97)}
.btn.primary.big{padding:9px 18px;font-size:14.5px;font-weight:600}
.btn.primary.big .ico{font-size:15px;margin-right:7px;display:inline-block;vertical-align:-1px}
.btn.ghost{color:var(--ink-2)}
.btn.ghost:hover{color:var(--accent);border-color:rgba(245,80,0,.4);background:var(--accent-soft)}
.btn[disabled]{opacity:.42;cursor:not-allowed;background:var(--panel);border-color:var(--line);color:var(--ink-2);transform:none;box-shadow:none}
.btn.primary[disabled]{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:none}


main{flex:1;padding:22px}
footer{
  padding:9px 22px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-3);display:flex;gap:18px;flex-wrap:wrap
}
footer kbd{
  font-family:inherit;font-size:11.5px;background:#f5f4f2;border:1px solid var(--line);
  border-radius:4px;padding:1px 6px;color:var(--ink-2);margin-right:5px
}

/* 空状态 */
.empty{max-width:660px;margin:48px auto;text-align:center}
.empty .big{font-size:20px;margin-bottom:8px}
.empty .sub{color:var(--ink-2);font-size:14px;margin-bottom:26px}
.dropzone{
  border:1.5px dashed var(--line);border-radius:14px;background:var(--panel);
  padding:44px 24px;text-align:center;transition:.18s;
}
.dropzone.hot{border-color:var(--accent);background:var(--accent-soft)}
.dropzone .lead{font-size:15px;margin-bottom:6px}
.dropzone .tip{font-size:13px;color:var(--ink-3)}
.dropzone .row{margin-top:20px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.empty .paste-hint{margin-top:22px;font-size:13px;color:var(--ink-3)}
.empty .paste-hint b{color:var(--ink-2);font-weight:normal;
  background:#f5f4f2;border:1px solid var(--line);border-radius:5px;padding:2px 7px}

/* 网格 */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;max-width:1180px;margin:0 auto;
}
.slide{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;cursor:grab;transition:border-color .15s,box-shadow .15s,transform .15s;
  display:flex;flex-direction:column;
}
.slide:hover{border-color:var(--ink-3);box-shadow:var(--shadow);transform:translateY(-2px)}
.slide.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.slide.dragging{opacity:.35}
.slide.over{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.slide.ghost{
  position:fixed;z-index:60;margin:0;pointer-events:none;
  opacity:.92;box-shadow:var(--shadow-lg);cursor:grabbing;
}
body.drag-on{cursor:grabbing;-webkit-user-select:none;user-select:none}
body.drag-on .slide{transition:none}
.slide .thumb{
  height:118px;background:#f3f2ef center/contain no-repeat;
  display:flex;align-items:center;justify-content:center;
}
.slide .thumb img{max-width:100%;max-height:100%;display:block}
/* 网页条目 */
.slide .thumb.web{background:#efeae2}
.webcard{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:0 14px;text-align:center;color:var(--accent);
}
.webcard svg{opacity:.9;flex:none}
.webcard .wdom{
  font-size:12.5px;color:var(--ink-2);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.nobadge{
  position:absolute;top:7px;right:7px;
  font-size:10.5px;line-height:1;padding:3px 6px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);
}
.slide .meta{
  padding:7px 10px;font-size:12px;color:var(--ink-2);
  display:flex;align-items:center;gap:6px;border-top:1px solid var(--line);
}
.slide .no{
  flex:none;min-width:19px;height:19px;border-radius:50%;background:#f0efed;
  color:var(--ink-2);font-size:11px;display:flex;align-items:center;justify-content:center
}
.slide .dim{flex:1;color:var(--ink-3);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slide .del{
  flex:none;width:20px;height:20px;border-radius:5px;color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;
  opacity:0;transition:.15s
}
.slide:hover .del{opacity:1}
.slide .del:hover{background:var(--accent-soft);color:var(--accent)}
.adder{
  border:1.5px dashed var(--line);border-radius:var(--radius);
  min-height:150px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);font-size:13px;cursor:pointer;transition:all .15s;background:transparent
}
.adder:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* 拖放遮罩 */
#veil{
  position:fixed;inset:0;background:rgba(28,25,23,.5);z-index:50;
  display:none;align-items:center;justify-content:center;color:#fff;font-size:17px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
#veil.on{display:flex}
#veil .box{border:2px dashed rgba(255,255,255,.6);border-radius:16px;padding:40px 60px}

/* 提示条：底部锚在 footer 快捷键条之上，不遮挡提示。
   footer 高度随视口换行而变，用 --deck-foot-h 由 JS 实时测量，硬编码偏移会漏 */
.toast{
  position:fixed;left:50%;bottom:calc(var(--deck-foot-h, 77px) + 14px);transform:translateX(-50%);z-index:200;
  background:rgba(28,25,23,.94);color:#fff;font-size:13px;padding:9px 18px;
  border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.24);
  transition:opacity .2s;opacity:0
}
.toast.on{opacity:1}

/* 裁剪弹层 */
.crop-layer{
  position:fixed;inset:0;z-index:100;background:rgba(28,25,23,.55);
  display:none;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.crop-layer.on{display:flex}
.crop-box{
  background:var(--panel);border-radius:14px;padding:16px;
  max-width:min(1000px,94vw);display:flex;flex-direction:column;gap:12px;
  box-shadow:0 24px 80px rgba(0,0,0,.3);
}
.crop-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crop-title{font-size:15px}
.crop-head .spacer{flex:1}
.crop-ratios{display:flex;gap:6px;margin-right:6px}
.crop-ratios button{
  padding:5px 13px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);color:var(--ink-2);font-size:13px;transition:all .15s;
}
.crop-ratios button:hover{border-color:var(--ink-3);color:var(--ink)}
.crop-ratios button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.crop-stage{
  position:relative;background:#f3f2ef;border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;min-height:200px;
}
.crop-stage img{max-width:100%;max-height:62vh;display:block;user-select:none;-webkit-user-drag:none}
.crop-sel{
  position:absolute;border:2px solid #fff;cursor:move;
  box-shadow:0 0 0 9999px rgba(28,25,23,.5);
}
.crop-sel .grip{
  position:absolute;right:-8px;bottom:-8px;width:16px;height:16px;
  background:#fff;border:2px solid var(--accent);border-radius:50%;
  cursor:nwse-resize;
}
.crop-foot{font-size:12.5px;color:var(--ink-3);text-align:center}