* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; margin: 0; background: #f6f8fb; color: #1f2937; }
.layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.menu { padding: 1rem; background: #111827; color: #f9fafb; }
.menu select { width: 100%; margin-top: 0.5rem; }
.content { display: grid; grid-template-columns: 320px 1fr; gap: 1rem; padding: 1rem; }
.controls, .preview { background: #fff; border-radius: 8px; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.controls label { display: block; margin-top: 1rem; font-size: 0.9rem; }
.controls input[type="range"] { width: 100%; margin-top: 0.4rem; }
.controls select { width: 100%; margin-top: 0.4rem; padding: 0.3rem; }
.controls textarea { width: 100%; margin-top: 0.4rem; padding: 0.4rem; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.9rem; resize: vertical; }
.controls output { display: block; text-align: right; color: #4b5563; font-size: 0.85rem; }
.checkbox-label { display: flex !important; align-items: center; gap: 0.5rem; }
.checkbox-label input[type="checkbox"] { width: auto; margin: 0; }
.preview-toolbar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.preview-toolbar select { padding: 0.3rem 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.85rem; }
#preview-canvas { width: 100%; height: 70vh; border: 1px solid #d1d5db; border-radius: 6px; display: flex; align-items: center; justify-content: center; padding: 1rem; background: #f9fafb; }
#preview-canvas svg { width: 100%; height: 100%; }
.exports { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
button { border: none; background: #2563eb; color: white; padding: 0.5rem 0.8rem; border-radius: 5px; cursor: pointer; }
button:hover { background: #1d4ed8; }