.config-panel{display:flex;flex-direction:column;gap:16px}.config-group{display:flex;flex-direction:column;gap:6px}.config-group label{font-size:13px;font-weight:500;color:#333}.config-group input[type=number],.config-group input[type=color]{padding:8px;border:1px solid #ddd;border-radius:4px;font-size:13px;font-family:inherit}.config-group input[type=number]:focus,.config-group input[type=color]:focus{outline:none;border-color:#0f0;box-shadow:0 0 4px #00ff004d}.config-group input[type=checkbox]{cursor:pointer;width:18px;height:18px}.export-btn{padding:10px 12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:4px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:8px}.export-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.export-btn:active{transform:translateY(0)}.app{display:flex;flex-direction:column;min-height:100vh;background:#f5f5f5}.header{background:#fff;padding:20px;border-bottom:1px solid #ddd;box-shadow:0 2px 4px #0000001a}.header h1{font-size:28px;color:#333;margin:0}.main{display:flex;flex:1;gap:20px;padding:20px;max-width:1400px;margin:0 auto;width:100%}.preview-container{flex:1;display:flex;flex-direction:column;background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 8px #0000001a}.config-container{width:300px;background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 8px #0000001a;height:fit-content}.preview-section h2,.config-section h2{font-size:16px;font-weight:600;margin-bottom:16px;color:#333}@media (max-width: 768px){.main{flex-direction:column}.config-container{width:100%}}html,body,#root{width:100%;height:100%}body{margin:0;padding:0;background:#f5f5f5}