:root {
    --primary: #2563eb; --primary-dark: #1e40af; --success: #10b981;
    --danger: #ef4444; --gray-light: #f3f4f6;
}
body { background-color: var(--gray-light); font-family: 'Segoe UI', system-ui, sans-serif; }
.editor-wrapper {
    position: relative; background: repeating-conic-gradient(#e5e7eb 0% 25%, transparent 0% 25%) 50% / 20px 20px;
    border-radius: 12px; min-height: 550px; border: 1px solid #d1d5db;
}
.editor-toolbar {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 100;
    background: white; padding: 8px 16px; border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: flex; gap: 10px; align-items: center;
}
.editor-toolbar button, .editor-toolbar label {
    background: none; border: none; cursor: pointer; padding: 8px; border-radius: 50%;
    transition: all 0.2s; display: flex; align-items: center; justify-content: center;
}
.editor-toolbar button:hover, .editor-toolbar label:hover { background-color: var(--gray-light); }
.product-silhouette {
    width: 320px; height: 420px; background-color: #d1d5db;
    clip-path: polygon(25% 0%, 75% 0%, 85% 0%, 100% 15%, 100% 25%, 85% 25%, 85% 100%, 15% 100%, 15% 25%, 0% 25%, 0% 15%, 15% 0%);
    transition: background-color 0.3s ease; box-shadow: 0 20px 40px rgba(0,0,0,0.15); position: relative;
}
#canvasContainer { z-index: 10; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5); background-color: rgba(255,255,255,0.9); border-radius: 4px; }
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; }
.toast-msg { background: #333; color: white; padding: 12px 20px; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: slideIn 0.3s ease-out; }
.toast-msg.success { background-color: var(--success); } .toast-msg.error { background-color: var(--danger); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@media (max-width: 768px) {
    .product-silhouette { width: 220px; height: 300px; }
    .editor-toolbar { width: 90%; justify-content: space-around; border-radius: 12px; padding: 10px 5px; }
}
.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); display: flex; justify-content: center; align-items: center; z-index: 9999; flex-direction: column; }
.spinner { border: 4px solid #f3f3f3; border-top: 4px solid var(--primary); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin-bottom: 10px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }