/* image-tool.css */
:root{--bg:#f2f1ec;--bg-card:#fff;--bg-inset:#f7f7f3;--text:#1c1c1a;--text-2:#5c5c58;--text-3:#9c9c96;--accent:#b07d4f;--accent-l:#c49268;--accent-bg:rgba(176,125,79,.07);--green:#4a9960;--green-bg:rgba(74,153,96,.07);--blue:#4a7fb5;--blue-bg:rgba(74,127,181,.07);--red:#c45050;--red-bg:rgba(196,80,80,.07);--border:#e6e5df;--border-h:#d4d3cc;--r:10px;--r-lg:14px;--sh:0 1px 4px rgba(0,0,0,.04);--sh-md:0 4px 16px rgba(0,0,0,.06);--sh-lg:0 8px 32px rgba(0,0,0,.1);--font:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
.header{background:var(--bg-card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.header-inner{max-width:1200px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--text)}
.logo svg{color:var(--accent)}
.workspace{max-width:1200px;margin:0 auto;padding:20px 24px;display:grid;grid-template-columns:1fr 370px;gap:20px;align-items:start}
.panel-left{display:flex;flex-direction:column;gap:16px}
.panel-right{display:flex;flex-direction:column;gap:14px;position:sticky;top:68px}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh)}
.card-title{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-title svg{color:var(--accent);flex-shrink:0}
.card-hint{font-size:11px;font-weight:400;color:var(--text-3)}
.upload-zone{border:2px dashed var(--border-h);border-radius:var(--r-lg);padding:36px 20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg-inset)}
.upload-zone.drag-over{border-color:var(--accent);background:var(--accent-bg)}
.upload-icon{color:var(--text-3);margin-bottom:12px}
.upload-text{font-size:14px;color:var(--text-2);margin-bottom:5px}
.upload-link{color:var(--accent);cursor:pointer;font-weight:500}
.upload-sub{font-size:12px;color:var(--text-3)}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;margin-top:14px}
.img-item{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1;background:var(--bg-inset);border:2px solid transparent;cursor:pointer;transition:.15s}
.img-item img{width:100%;height:100%;object-fit:cover}
.img-item .del-btn{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;opacity:0;transition:.15s}
.img-item:hover .del-btn{opacity:1}
.img-item .ai-tag{position:absolute;bottom:3px;left:3px;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;letter-spacing:.3px}
.ai-tag.person{background:rgba(74,153,96,.85);color:#fff}
.ai-tag.group{background:rgba(196,80,80,.85);color:#fff}
.ai-tag.object{background:rgba(74,127,181,.85);color:#fff}
.img-item.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.img-check{position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center}
.sel-bar{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--accent-bg);border:1px solid rgba(176,125,79,.2);border-radius:var(--r);font-size:12px;color:var(--text-2);flex-wrap:wrap}
.sel-hint{grid-column:1/-1;font-size:11px;color:var(--text-3);padding:2px 0 6px}
.img-add{border:2px dashed var(--border-h);border-radius:var(--r);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--text-3);font-size:11px;gap:4px;transition:.15s}
.img-add:hover{border-color:var(--accent);color:var(--accent)}
/* detect banner */
.detect-banner{border-radius:var(--r);padding:14px 16px;font-size:13px;line-height:1.6;display:flex;gap:10px;align-items:flex-start}
.detect-banner.person{background:var(--green-bg);border:1px solid rgba(74,153,96,.2)}
.detect-banner.group{background:var(--red-bg);border:1px solid rgba(196,80,80,.2)}
.detect-banner.object{background:var(--blue-bg);border:1px solid rgba(74,127,181,.2)}
.detect-banner.loading{background:var(--bg-inset);border:1px solid var(--border);color:var(--text-3)}
.detect-icon{font-size:20px;flex-shrink:0}
.detect-title{font-weight:700;margin-bottom:3px}
.detect-rec{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.rec-btn{padding:5px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;font-family:var(--font);transition:.15s}
.rec-btn.primary{background:var(--accent);color:#fff}
.rec-btn.secondary{background:var(--bg-card);color:var(--text-2);border:1px solid var(--border)}
.rec-btn:hover{opacity:.85}
/* result */
.result-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.res-item{border-radius:var(--r);overflow:hidden;border:1px solid var(--border);background:var(--bg-inset)}
.res-item-img{position:relative;aspect-ratio:1}
.res-item-img img{width:100%;height:100%;object-fit:cover}
.res-item-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:10px;padding:10px 6px 4px;font-weight:600}
.res-item-label.ai{color:#f5c97a}
.res-item-info{padding:6px 8px;font-size:11px;color:var(--text-3);display:flex;justify-content:space-between;align-items:center;gap:4px}
.res-item-info .dl-btn{color:var(--accent);cursor:pointer;font-weight:600;white-space:nowrap}
.res-item-info .cmp-btn{color:var(--text-3);cursor:pointer;font-weight:500;white-space:nowrap}
.res-item-info .cmp-btn:hover{color:var(--accent)}
/* spinner */
.spinner{width:22px;height:22px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.spinner.dark{border-color:var(--border);border-top-color:var(--accent)}
@keyframes spin{to{transform:rotate(360deg)}}
/* proc overlay */
.proc-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.proc-text{font-size:10px;color:rgba(255,255,255,.8);font-weight:600}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border:none;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-l);box-shadow:var(--sh-md)}
.btn-secondary{background:var(--bg-inset);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--border-h)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{opacity:.9;box-shadow:var(--sh-md)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{color:var(--accent)}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* config */
.config-label{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.9px;margin-bottom:8px;display:block}
.ratio-row{display:flex;gap:6px}
.ratio-btn{flex:1;padding:10px 4px;border:1.5px solid var(--border);border-radius:8px;background:var(--bg-inset);cursor:pointer;font-family:var(--font);font-size:13px;font-weight:700;color:var(--text-2);display:flex;flex-direction:column;align-items:center;gap:3px;transition:.15s}
.ratio-btn span{font-size:10px;font-weight:400;color:var(--text-3)}
.ratio-btn.active{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}
.ratio-btn.active span{color:var(--accent)}
.mode-list{display:flex;flex-direction:column;gap:6px}
.mode-item{padding:11px 13px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--bg-inset);cursor:pointer;transition:.15s;display:flex;align-items:flex-start;gap:10px}
.mode-item.active{border-color:var(--accent);background:var(--accent-bg)}
.mode-item:hover:not(.active){border-color:var(--border-h)}
.mode-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border-h);flex-shrink:0;margin-top:2px;transition:.15s}
.mode-item.active .mode-dot{background:var(--accent);border-color:var(--accent)}
.mode-body{flex:1;min-width:0}
.mode-name{font-size:12px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.mode-item.active .mode-name{color:var(--accent)}
.mode-desc{font-size:11px;color:var(--text-3);margin-top:2px;line-height:1.4}
.badge{font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;letter-spacing:.3px}
.badge-ai{background:linear-gradient(135deg,#b07d4f,#c49268);color:#fff}
.badge-rec{background:var(--green-bg);color:var(--green);border:1px solid rgba(74,153,96,.2)}
.badge-new{background:var(--blue-bg);color:var(--blue);border:1px solid rgba(74,127,181,.2)}
.border-config{padding:12px;background:var(--bg-inset);border-radius:var(--r);border:1px solid var(--border);margin-top:10px}
.border-size-row{display:flex;gap:6px;flex-wrap:wrap}
.border-size-btn{padding:5px 12px;border:1px solid var(--border);border-radius:6px;background:var(--bg-card);font-size:11px;font-weight:600;cursor:pointer;font-family:var(--font);color:var(--text-2);transition:.15s}
.border-size-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.border-color-row{display:flex;gap:8px;align-items:center}
.border-color-btn{width:24px;height:24px;border-radius:50%;border:2.5px solid transparent;cursor:pointer;transition:.15s;flex-shrink:0}
.border-color-btn.active{border-color:var(--accent);transform:scale(1.15)}
.divider{height:1px;background:var(--border);margin:10px 0}
.action-bar{display:flex;flex-direction:column;gap:8px}
.upload-prog{background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px}
.prog-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:6px}
.prog-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .3s}
/* modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-box{background:var(--bg-card);border-radius:var(--r-lg);width:100%;max-width:700px;max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--sh-lg)}
.modal-box-lg{max-width:920px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.modal-title{font-size:14px;font-weight:700}
.modal-close{background:none;border:none;font-size:17px;cursor:pointer;color:var(--text-3);padding:4px 8px;border-radius:6px;line-height:1}
.modal-close:hover{background:var(--bg-inset)}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--border);flex-shrink:0}
.crop-workspace{flex:1;overflow:auto;padding:16px;display:flex;align-items:center;justify-content:center;background:var(--bg-inset)}
.crop-wrap{position:relative;display:inline-block;user-select:none}
#cropCanvas{display:block;max-width:100%;max-height:52vh}
.crop-box{position:absolute;border:2px solid var(--accent);box-shadow:0 0 0 9999px rgba(0,0,0,.48);cursor:move}
.crop-handle{position:absolute;width:10px;height:10px;background:var(--accent);border-radius:2px}
.crop-handle.tl{top:-5px;left:-5px;cursor:nw-resize}
.crop-handle.tr{top:-5px;right:-5px;cursor:ne-resize}
.crop-handle.bl{bottom:-5px;left:-5px;cursor:sw-resize}
.crop-handle.br{bottom:-5px;right:-5px;cursor:se-resize}
.compare-wrap{display:flex;flex:1;overflow:hidden;min-height:280px}
.compare-side{flex:1;display:flex;flex-direction:column;overflow:hidden}
.compare-lbl{text-align:center;padding:8px;font-size:11px;font-weight:700;color:var(--text-3);background:var(--bg-inset);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.5px}
.compare-lbl.ai{color:var(--accent)}
.compare-img{width:100%;height:100%;object-fit:contain;background:#111;max-height:58vh}
.compare-div{width:1px;background:var(--border)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1c1c1a;color:#fff;padding:9px 18px;border-radius:8px;font-size:13px;z-index:200;white-space:nowrap;box-shadow:var(--sh-lg);pointer-events:none}
.done-screen{text-align:center;padding:40px 20px}
.done-icon{width:52px;height:52px;border-radius:50%;background:var(--green-bg);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
@media(max-width:768px){
  .workspace{grid-template-columns:1fr;padding:14px}
  .panel-right{position:static}
}
@media(max-width:480px){
  .compare-wrap{flex-direction:column}
  .compare-div{width:100%;height:1px}
}