*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#F9FAFB;--card:#fff;--text:#111827;--text-light:#6B7280;--border:#E5E7EB;--primary:#4F46E5;--primary-dark:#4338CA;--success:#10B981;--danger:#EF4444;--warning:#F59E0B;--radius:.75rem;--shadow:0 4px 6px -1px rgba(0,0,0,.05)}
body.dark{--bg:#0F172A;--card:#1E293B;--text:#F1F5F9;--text-light:#94A3B8;--border:#334155}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;padding:1.5rem;transition:.2s}
.container{max-width:1300px;margin:0 auto}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem;margin-bottom:1rem;border:1px solid var(--border)}
.flex{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between}
.flex-center{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem}
.upload-area{border:2px dashed var(--border);border-radius:var(--radius);padding:2.5rem 2rem;text-align:center;transition:.2s;background:var(--card);position:relative;overflow:hidden}
.upload-area:hover{border-color:var(--primary);background:rgba(79,70,229,.02)}
.upload-area.drag-over{border-color:var(--primary);background:rgba(79,70,229,.08)}
.upload-area input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:10;font-size:200px;filter:alpha(opacity=0)}
.btn{padding:.55rem 1.1rem;border-radius:2rem;font-weight:600;border:none;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-family:inherit;background:var(--bg);color:var(--text);border:1px solid var(--border);pointer-events:none}
.btn-primary{background:var(--primary);color:#fff;border:none}
.btn-primary:hover{background:var(--primary-dark)}
.btn-success{background:var(--success);color:#fff;border:none;pointer-events:auto;cursor:pointer}
.btn-danger{background:var(--danger);color:#fff;border:none;pointer-events:auto;cursor:pointer}
.btn-secondary{background:var(--bg);color:var(--text);border:1px solid var(--border);pointer-events:auto;cursor:pointer}
.btn-secondary:hover{background:var(--border)}
.btn-sm{padding:.3rem .7rem;font-size:.75rem}
.badge{display:inline-block;padding:.25rem .7rem;border-radius:2rem;font-size:.72rem;font-weight:600;background:rgba(79,70,229,.15);color:var(--primary)}
.canvas-wrapper{position:relative;background:#f3f4f6;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);touch-action:none;user-select:none;display:flex;align-items:center;justify-content:center;min-height:400px}
.canvas-wrapper canvas{display:block;max-width:100%;max-height:600px;touch-action:none;cursor:crosshair;background:#fff}
.preview-card{background:var(--bg);border-radius:var(--radius);padding:.75rem;border:1px solid var(--border);text-align:center}
.preview-card img{max-width:100%;max-height:200px;object-fit:contain;border-radius:.5rem}
.stat-card{background:var(--bg);border-radius:var(--radius);padding:.6rem;text-align:center;border:1px solid var(--border)}
.stat-value{font-size:1.1rem;font-weight:800}
.stat-label{font-size:.7rem;color:var(--text-light)}
.slider-group label{display:flex;justify-content:space-between;font-size:.75rem;font-weight:500;margin-bottom:.25rem}
.slider-group input[type=range]{width:100%;accent-color:var(--primary);background:var(--border);border-radius:.5rem;height:5px;cursor:pointer}
.preset-btn{padding:.55rem .9rem;border-radius:2rem;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;font-size:.78rem;font-weight:500;transition:.2s;font-family:inherit;display:inline-flex;align-items:center;gap:.35rem}
.preset-btn:hover{border-color:var(--primary);background:rgba(79,70,229,.05)}
.preset-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--text);color:#fff;padding:.7rem 1.1rem;border-radius:2rem;opacity:0;transition:.2s;z-index:10000;font-size:.85rem;pointer-events:none;box-shadow:0 10px 25px rgba(0,0,0,.2)}
.toast.show{opacity:1}
input[type=number],input[type=text],select,input[type=color]{padding:.4rem .55rem;border:1px solid var(--border);border-radius:.5rem;background:var(--card);color:var(--text);font-size:.82rem;width:100%;font-family:inherit}
label{font-size:.75rem;font-weight:600;color:var(--text-light)}
.spec-info{background:rgba(79,70,229,.06);border-left:3px solid var(--primary);padding:.6rem .9rem;border-radius:.4rem;font-size:.8rem;color:var(--text-light);margin-top:.5rem;line-height:1.5}
.spec-info strong{color:var(--text)}
@media(max-width:768px){body{padding:.75rem}.grid-2{grid-template-columns:1fr}}