*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:#f5f6fa;color:#111827;font-size:14px;line-height:1.6;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.c{max-width:900px;margin:0 auto;padding:32px 24px 80px}
h1{text-align:center;font-size:28px;margin:0 0 6px;background:linear-gradient(135deg,#6366f1,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
h1+p{text-align:center;color:#4b5563;font-size:14px;margin:0 0 28px}
.cd{background:#fff;border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,.05);padding:22px;margin-bottom:16px}
.stage{border:2px dashed #e5e7eb;border-radius:12px;background:#f9fafc;padding:14px;text-align:center;cursor:pointer;transition:all .2s;position:relative;min-height:100px;display:flex;align-items:center;justify-content:center}
.stage.over{border-color:#6366f1;background:#eef2ff}
.stage input{display:none}
.stage .phold{padding:18px}
.stage .phold .ico{font-size:32px;color:#6366f1;display:block;margin-bottom:5px}
.stage .phold .s{color:#9ca3af;font-size:12px;margin-top:3px}
.stage .imgbox{display:none;width:100%}
.stage.has .phold{display:none}
.stage.has .imgbox{display:block}
.stage .imgbox canvas{max-width:100%;max-height:360px;width:auto;height:auto;border-radius:6px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.stage .tag{position:absolute;top:8px;left:8px;background:#6366f1;color:#fff;font-size:11px;padding:2px 8px;border-radius:6px;display:none;z-index:1}
.stage.has .tag{display:block}
.menu{border:1.5px solid #e5e7eb;border-radius:8px;overflow:hidden;transition:all .2s}
.menu.op{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.08)}
.menu .h{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;background:#fff;cursor:pointer;user-select:none;font-size:13px;font-weight:500}
.menu .h:hover{background:#f9fafc}
.menu.op .h .lbl{color:#4f46e5}
.menu .h .ar{font-size:10px;color:#9ca3af;transition:transform .25s}
.menu.op .h .ar{transform:rotate(180deg);color:#6366f1}
.menu .b{max-height:0;overflow:hidden;transition:max-height .3s}
.menu .b .list{padding:4px 10px 10px;display:grid;gap:6px}
.menu .chip{padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:7px;cursor:pointer;transition:all .2s;user-select:none;display:flex;align-items:center;justify-content:space-between}
.menu .chip:hover{border-color:#6366f1}
.menu .chip.on{border-color:#6366f1;background:#eef2ff;color:#4f46e5}
.menu .chip .n{font-weight:600;font-size:13px}
.menu .chip .arr{font-size:11px;color:#9ca3af}
.menu .chip.on .arr{color:#6366f1}
.btn{display:inline-flex;align-items:center;gap:6px;padding:11px 22px;border:1px solid #e5e7eb;border-radius:8px;background:#f9fafc;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s}
.btn:hover{background:#fff;border-color:#4b5563}
.btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.btn1{background:#6366f1;color:#fff;border-color:#6366f1;box-shadow:0 2px 6px rgba(99,102,241,.2)}
.btn1:hover{background:#4f46e5;border-color:#4f46e5;box-shadow:0 2px 8px rgba(99,102,241,.35)}
.btn2{background:#10b981;color:#fff;border-color:#10b981;box-shadow:0 2px 6px rgba(16,185,129,.15)}
.btn2:hover{background:#059669;border-color:#059669}
.btn3{background:#f59e0b;color:#fff;border-color:#f59e0b;box-shadow:0 2px 6px rgba(245,158,11,.2)}
.btn3:hover{background:#d97706;border-color:#d97706}
.btn3:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.bgrp{position:relative;display:inline-flex}
#bm{position:relative}
.btn3 .blb{padding-right:30px}
.btn3 .car{position:absolute;right:2px;top:0;bottom:0;width:32px;display:flex;align-items:center;justify-content:center;font-size:12px;opacity:.9;cursor:pointer;transition:transform .22s}
.bgrp.open .car{transform:rotate(180deg)}
.pop{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid #e5e7eb;border-radius:11px;box-shadow:0 10px 30px rgba(0,0,0,.14);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:20;min-width:148px;padding:6px;overflow:hidden}
.pop.show{opacity:1;visibility:visible;transform:translateY(0)}
.pop-h{padding:6px 12px 7px;font-size:11px;font-weight:600;color:#9ca3af;letter-spacing:.3px}
.pop-i{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;font-size:13px;font-weight:500;color:#374151;border-radius:8px;cursor:pointer;transition:background .15s,color .15s}
.pop-i:hover{background:#eef2ff;color:#4f46e5}
.pop-i .dot{width:6px;height:6px;border-radius:50%;background:#c7d2fe;transition:background .15s}
.pop-i:hover .dot{background:#6366f1}
.lock{display:none;align-items:center;gap:4px;font-size:12px;color:#92400e;background:#fef3c7;padding:4px 10px;border-radius:6px;margin-left:4px}
.lock.show{display:inline-flex}
.btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.st{display:none;align-items:center;gap:7px;padding:8px 12px;border-radius:7px;font-size:12px;margin-top:12px}
.st.i{border-left:3px solid #06b6d4;background:#ecfeff;color:#155e75}
.st.ok{border-left:3px solid #10b981;background:#ecfdf5;color:#065f46}
.st.er{border-left:3px solid #ef4444;background:#fef2f2;color:#991b1b}
.foot{margin-top:20px;padding:12px 16px;background:#eef2ff;border-radius:10px;color:#4f46e5;font-size:12px}
/* 平板 */
@media(max-width:768px){
  .c{padding:14px 12px 50px}
  h1{font-size:22px}
  h1+p{font-size:12px;margin-bottom:18px}
  .cd{padding:14px;margin-bottom:10px;border-radius:10px}
  .btn{padding:10px 14px;font-size:13px;min-height:42px}
  .menu .chip{padding:10px;min-height:42px}
  .btns{gap:8px}
  .stage .imgbox canvas{max-height:300px}
}
/* 手机 */
@media(max-width:480px){
  .c{padding:10px 8px 40px}
  h1{font-size:20px}
  h1+p{font-size:11px;margin-bottom:14px}
  .cd{padding:10px;margin-bottom:8px;border-radius:8px}
  .stage{padding:10px;min-height:80px;border-radius:10px}
  .stage .phold{padding:12px}
  .stage .phold .ico{font-size:26px}
  .stage .phold .s{font-size:11px}
  .btns{gap:6px}
  .btn{padding:8px 10px;font-size:12px;min-height:40px}
  .stage .imgbox canvas{max-height:360px}
  .menu .h{padding:10px;font-size:12px}
  .menu .chip{padding:8px 10px;font-size:12px;min-height:40px}
  .menu .chip .n{font-size:12px}
  .menu .chip .arr{font-size:10px}
  .foot{padding:10px 12px;font-size:11px}
  .st{font-size:11px;padding:6px 10px}
}