#op-tool-app{box-sizing:border-box;margin:0 auto;width:96%;min-width:320px;max-width:700px;transition:.4s ease-in-out;color:#1e293b;background:#fff;position:relative;border-radius:16px;box-shadow:0 10px 30px -10px rgba(0,0,0,.05);border:1px solid #f1f5f9}@media (min-width:768px){#op-tool-app{width:50%}}#op-tool-app.op-tool-state-workspace{width:96%;max-width:1200px;padding:20px}#op-tool-app.op-tool-state-upload{padding:40px 20px}#op-tool-app *,#op-tool-app :after,#op-tool-app :before{box-sizing:border-box;margin:0;padding:0}#op-tool-app .op-tool-hidden{display:none!important}#op-tool-app .op-tool-header{text-align:center;margin-bottom:32px}#op-tool-app .op-tool-title{font-size:32px;font-weight:700;margin-bottom:12px;color:#0f172a;letter-spacing:-.02em}#op-tool-app .op-tool-desc{font-size:16px;color:#64748b;max-width:80%;margin:0 auto}#op-tool-app .op-tool-view{display:none;opacity:0;transition:opacity .3s}#op-tool-app .op-tool-view.op-tool-active{display:block;opacity:1;animation:.5s forwards op-tool-fadeIn}@keyframes op-tool-fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}#op-tool-app .op-tool-dropzone{border:2px dashed #cbd5e1;border-radius:16px;padding:70px 20px;text-align:center;background-color:#f8fafc;cursor:pointer;transition:.25s;position:relative}#op-tool-app .op-tool-dropzone.op-tool-dragover,#op-tool-app .op-tool-dropzone:hover{border-color:#3b82f6;background-color:#eff6ff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(59,130,246,.1)}#op-tool-app .op-tool-upload-icon{width:56px;height:56px;fill:none;stroke:#94a3b8;stroke-width:1.5;margin-bottom:20px;transition:stroke .2s}#op-tool-app .op-tool-dropzone.op-tool-dragover .op-tool-upload-icon,#op-tool-app .op-tool-dropzone:hover .op-tool-upload-icon{stroke:#3b82f6}#op-tool-app .op-tool-upload-text{font-size:18px;font-weight:600;color:#334155;margin-bottom:10px}#op-tool-app .op-tool-upload-subtext{font-size:14px;color:#64748b}#op-tool-app .op-tool-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;font-size:15px;font-weight:600;border-radius:10px;border:none;cursor:pointer;transition:.2s;gap:8px;font-family:inherit;text-decoration:none}#op-tool-app .op-tool-btn:disabled{opacity:.6;cursor:not-allowed}#op-tool-app .op-tool-btn-primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.25)}#op-tool-app .op-tool-btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 6px 16px rgba(37,99,235,.35);transform:translateY(-1px)}#op-tool-app .op-tool-btn-secondary{background-color:#f1f5f9;color:#334155;border:1px solid #e2e8f0}#op-tool-app .op-tool-btn-secondary:hover:not(:disabled){background-color:#e2e8f0;color:#0f172a}#op-tool-app .op-tool-btn-icon{width:20px;height:20px;fill:none;stroke:currentColor}#op-tool-app .op-tool-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding:16px 20px;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;flex-wrap:wrap;gap:16px}#op-tool-app .op-tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:24px;min-height:250px;padding:10px 10px 40px}@media (max-width:600px){#op-tool-app .op-tool-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px}#op-tool-app .op-tool-toolbar{flex-direction:column;align-items:stretch}#op-tool-app .op-tool-btn{width:100%}}#op-tool-app .op-tool-thumb-wrapper{background:#fff;border-radius:10px;padding:10px;box-shadow:0 4px 12px rgba(0,0,0,.06);border:1px solid #e2e8f0;position:relative;cursor:grab;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s,border-color .2s}#op-tool-app .op-tool-thumb-wrapper:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);border-color:#cbd5e1;transform:translateY(-2px)}#op-tool-app .op-tool-thumb-wrapper.op-tool-sortable-ghost{opacity:.3;background:#e2e8f0}#op-tool-app .op-tool-thumb-wrapper.op-tool-sortable-drag{cursor:grabbing;box-shadow:0 15px 30px rgba(0,0,0,.2);transform:scale(1.05) rotate(2deg)}#op-tool-app .op-tool-canvas-container{width:100%;border:1px solid #f1f5f9;border-radius:6px;overflow:hidden;background:#f8fafc;aspect-ratio:1/1.414;display:flex;align-items:center;justify-content:center}#op-tool-app .op-tool-canvas{width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:none}#op-tool-app .op-tool-thumb-delete{position:absolute;top:-10px;right:-10px;width:28px;height:28px;background:#ef4444;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 8px rgba(239,68,68,.3);transition:.15s;z-index:2}#op-tool-app .op-tool-thumb-delete:hover{transform:scale(1.15);background:#dc2626;box-shadow:0 6px 12px rgba(220,38,38,.4)}#op-tool-app .op-tool-svg-icon{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}#op-tool-app .op-tool-page-number{text-align:center;font-size:13px;font-weight:600;color:#64748b;margin-top:10px;background:#f1f5f9;padding:4px 0;border-radius:6px}#op-tool-app .op-tool-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.95);border-radius:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(4px)}#op-tool-app .op-tool-spinner{width:48px;height:48px;border:4px solid #e2e8f0;border-top-color:#3b82f6;border-radius:50%;animation:1s linear infinite op-tool-spin;margin-bottom:20px}@keyframes op-tool-spin{to{transform:rotate(360deg)}}#op-tool-app .op-tool-loading-text{font-weight:600;color:#334155;font-size:16px;margin-bottom:12px}#op-tool-app .op-tool-progress-container{width:80%;max-width:320px;height:8px;background:#e2e8f0;border-radius:8px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}#op-tool-app .op-tool-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:8px;transition:width .3s}#op-tool-app .op-tool-msg-toast{position:fixed;top:24px;left:50%;transform:translate(-50%,-20px);background-color:#1e293b;color:#fff;padding:14px 24px;border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,.2);display:flex;align-items:center;gap:12px;z-index:9999;opacity:0;visibility:hidden;transition:.3s cubic-bezier(.4, 0, .2, 1);font-weight:500;font-size:14px;min-width:280px;justify-content:space-between}#op-tool-app .op-tool-msg-toast.op-tool-show{opacity:1;visibility:visible;transform:translate(-50%,0)}#op-tool-app .op-tool-msg-toast.op-tool-error{background-color:#ef4444}#op-tool-app .op-tool-msg-close{background:0 0;border:none;color:#fff;cursor:pointer;font-size:18px;opacity:.7;transition:opacity .2s;padding:0;}#op-tool-app .op-tool-msg-close:hover{opacity:1}#op-tool-app .op-tool-success-container{text-align:center;padding:60px 20px;background:#f8fafc;border-radius:16px;border:1px dashed #cbd5e1}#op-tool-app .op-tool-success-icon{width:72px;height:72px;fill:none;stroke:#10b981;stroke-width:1.5;margin:0 auto 24px}#op-tool-app .op-tool-success-title{font-size:28px;font-weight:700;color:#0f172a;margin-bottom:12px;letter-spacing:-.02em}#op-tool-app .op-tool-success-actions{display:flex;justify-content:center;gap:16px;margin-top:36px;flex-wrap:wrap}