.convert-card::before,.convert-del-btn{opacity:0;transition:opacity .12s ease-in-out}:root{--cl-bg-overlay:rgba(38, 40, 46, 0.77);--cl-surface:#ffffff;--cl-text:#232323;--cl-text-dim:#353535;--cl-text-muted:#666666;--cl-border:#e6e6e6;--cl-border-soft:#eef0f4;--cl-primary:#4994fa;--cl-primary-hover:#326be3;--cl-gray-btn:#adb5bd;--cl-gray-btn-hover:#888f98;--cl-spinner-track:#d1e5ff;--z-modal:9999;--radius-card:12px;--radius-modal:18px;--radius-thumb:8px;--gap-grid:14px;--gap-card:8px;--pad-card:10px;--pad-modal-x:2vw;--pad-modal-top:8px;--pad-modal-bottom:18px;--modal-w:60vw;--modal-maxw:60vw;--modal-h:90vh;--modal-maxh:85vh;--grid-min:180px;--shadow-modal:0 4px 36px rgba(0, 0, 0, 0.25);--del-btn-shadow:0 2px 8px rgba(0, 0, 0, 0.18);--fs-title:1.13rem;--fs-body:1rem;--fs-status:0.95rem;--fs-loading:1.08rem;--btn-radius:9px;--btn-font-weight:700;--btn-minw:120px}.modal-extract-bg{display:none;position:fixed;inset:0;z-index:var(--z-modal);background:var(--cl-bg-overlay);align-items:center;justify-content:center}.modal-extract-bg.active{display:flex}.modal-extract{background:var(--cl-surface);border-radius:var(--radius-modal);padding:var(--pad-modal-top) var(--pad-modal-x) var(--pad-modal-bottom);width:var(--modal-w);max-width:var(--modal-maxw);height:var(--modal-h);max-height:var(--modal-maxh);box-shadow:var(--shadow-modal);position:relative;display:flex;flex-direction:column;align-items:center;animation:.2s ease-out popin}.modal-extract-title{font-size:var(--fs-title);font-weight:700;margin:6px 0 10px;color:var(--cl-text)}.modal-extract-close{position:absolute;right:10px;top:10px;background:0 0;border:0;font-size:1.3em;cursor:pointer;color:#222}.modal-extract-inner{width:100%;max-width:calc(var(--modal-maxw) - 6vw);flex:1 1 auto;overflow:auto;padding:6px 0 2px}.convert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--grid-min),1fr));gap:var(--gap-grid)}.convert-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--gap-card);padding:var(--pad-card);background:#f6f7fb;border:1px solid var(--cl-border);border-radius:var(--radius-card);box-sizing:border-box}.convert-del-btn,.thumb-wrap{background:#fff;display:flex}.convert-card::before{content:"";position:absolute;inset:0;border:1px solid #3d3d3d;border-radius:var(--radius-card);pointer-events:none;box-sizing:border-box}.convert-card:hover::before{opacity:.9}.thumb-wrap{position:relative;width:100%;aspect-ratio:1/1.3;border-radius:var(--radius-thumb);overflow:hidden;border:1px solid var(--cl-border-soft);align-items:center;justify-content:center}canvas.thumb{display:block;max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:optimizeSpeed}canvas.thumb.placeholder{background:#f2f3f7;position:relative}canvas.thumb.placeholder::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f2f3f7 0,#eceff4 45%,#f2f3f7 90%);animation:1.1s infinite shimmer;opacity:.95}.convert-del-btn{position:absolute;top:0;right:0;width:28px;height:28px;border-radius:50%;border:0;color:#333;align-items:center;justify-content:center;box-shadow:var(--del-btn-shadow);font-size:25px;line-height:1;cursor:pointer;visibility:hidden}.convert-card:hover .convert-del-btn{opacity:1;visibility:visible}.convert-del-btn:focus-visible{outline:2px solid var(--cl-primary);outline-offset:1px}@media (hover:none),(pointer:coarse){.convert-del-btn{opacity:1;visibility:visible}}.filename{width:100%;text-align:center;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-extract-btns{display:flex;gap:12px;margin-top:12px;justify-content:center;flex-wrap:wrap}.modal-convert-btn,.reset-btn{display:flex;align-items:center;font-size:1.09rem;font-weight:var(--btn-font-weight);color:#fff;cursor:pointer;transition:background .14s ease-in-out}.modal-convert-btn{gap:6px;min-width:var(--btn-minw);padding:10px 24px;border:none;border-radius:var(--btn-radius);background:var(--cl-primary)}.modal-convert-btn:hover{background:var(--cl-primary-hover)}.reset-btn{gap:5px;padding:9px 16px;border:none;border-radius:12px;background:var(--cl-gray-btn)}.reset-btn:hover{background:var(--cl-gray-btn-hover)}.modal-extract-loading{display:none;width:100%;min-height:160px;margin:8px 0 10px;align-items:center;justify-content:center;flex-direction:column}.spinner{width:44px;height:44px;border-radius:50%;border:6px solid var(--cl-spinner-track);border-top:6px solid var(--cl-primary);animation:.8s linear infinite spin;margin-bottom:15px}.loading-text{font-size:var(--fs-loading);color:var(--cl-text-dim);margin-top:4px;letter-spacing:.5px}.extract-status{min-height:1.2em;margin-top:8px;font-size:var(--fs-status);color:var(--cl-text-muted);text-align:center}#tool-area{transition:background .16s ease-in-out,outline-color .16s ease-in-out}#tool-area.dragover{outline:#4a90e2 dashed 2px;background:#f5f6fb;border-radius:12px}@media (max-width:900px){.modal-extract{width:99vw;max-width:99vw;height:70vh;max-height:70vh;padding:5px 1vw 12px}.modal-extract-inner{max-width:96vw}}@keyframes popin{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}