.generator-container{display:grid;grid-template-columns:380px 1fr;gap:30px;margin-bottom:30px}.preview-section{background:linear-gradient(135deg, var(--gray-50), #fff);border-radius:24px;padding:20px;border:1px solid var(--gray-200)}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.preview-header h3{font-size:1rem;display:flex;align-items:center;gap:8px;color:var(--gray-700)}.preview-controls{display:flex;gap:8px}.icon-btn-sm{background:var(--gray-100);border:1px solid var(--gray-200);width:32px;height:32px;border-radius:8px;cursor:pointer;transition:all 0.2s}.icon-btn-sm:hover{background:var(--primary-color);color:white;border-color:var(--primary-color)}.preview-box{width:100%;height:220px;background:linear-gradient(135deg, #667eea, #764ba2);border-radius:20px;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;margin-bottom:16px;box-shadow:0 10px 30px rgba(0,0,0,0.1)}.preview-content{text-align:center;color:white}.preview-content i{font-size:40px;margin-bottom:10px;display:block}.preview-content span{font-size:14px;opacity:0.9}.preview-info{display:flex;justify-content:center;gap:24px;font-size:0.75rem;color:var(--gray-500)}.controls-section{background:white;border-radius:24px;padding:20px;border:1px solid var(--gray-200)}.controls-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px}.controls-header h3{font-size:1rem;display:flex;align-items:center;gap:8px}.switch-label{display:flex;align-items:center;gap:10px;cursor:pointer}.switch-slider{width:44px;height:22px;background:var(--gray-300);border-radius:22px;position:relative;transition:all 0.3s}.switch-slider::before{content:'';position:absolute;width:18px;height:18px;background:white;border-radius:50%;top:2px;left:3px;transition:all 0.3s}.switch-label input:checked+.switch-slider{background:var(--primary-color)}.switch-label input:checked+.switch-slider::before{transform:translateX(22px)}.switch-label input{display:none}.switch-text{font-size:0.8rem;color:var(--gray-600)}.control-group{margin-bottom:20px}.control-group label{display:block;font-size:0.85rem;font-weight:500;margin-bottom:10px;color:var(--gray-700)}.slider-container{display:flex;align-items:center;gap:12px}.slider-container input{flex:1;height:4px;border-radius:2px;background:var(--gray-200)}.slider-value{min-width:45px;font-family:monospace;color:var(--primary-color);font-weight:500}.corner-controls{display:grid;grid-template-columns:repeat(2, 1fr);gap:20px}.corner-item{background:var(--gray-50);border-radius:16px;padding:12px}.corner-label{font-size:0.8rem;margin-bottom:10px;color:var(--gray-600)}.corner-label i{margin-right:4px}.advanced-options{margin-top:24px;padding-top:20px;border-top:1px solid var(--gray-200)}.advanced-options h4{font-size:0.9rem;margin-bottom:16px;color:var(--gray-700)}.options-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:16px}.option-item label{display:block;font-size:0.75rem;margin-bottom:6px;color:var(--gray-500)}.color-row{display:flex;gap:8px;align-items:center}.color-row input[type="color"]{width:36px;height:36px;border:1px solid var(--gray-300);border-radius:8px;cursor:pointer}.color-text{flex:1;padding:6px 10px;border:1px solid var(--gray-300);border-radius:8px;font-family:monospace;font-size:0.75rem}.shadow-select{width:100%;padding:8px 12px;border:1px solid var(--gray-300);border-radius:8px;background:white}.code-output-section{background:#1a1a2e;border-radius:20px;overflow:hidden;margin-bottom:24px}.code-header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#2d2d44;border-bottom:1px solid #3d3d5a}.code-title{display:flex;align-items:center;gap:8px;color:#e0e0e0;font-weight:500}.code-actions{display:flex;gap:10px}.action-btn{background:rgba(255,255,255,0.1);border:none;padding:6px 14px;border-radius:30px;color:#e0e0e0;cursor:pointer;transition:all 0.2s;font-size:0.8rem}.action-btn:hover{background:var(--primary-color);color:white}.code-wrapper{padding:16px}.css-output{font-family:'Fira Code',monospace;font-size:13px;color:#4ade80;margin:0;white-space:pre-wrap;word-break:break-all;line-height:1.6}.presets-section{background:var(--gray-50);border-radius:20px;padding:16px}.presets-header h4{font-size:0.85rem;margin-bottom:12px;color:var(--gray-700)}.presets-grid{display:flex;flex-wrap:wrap;gap:10px}.preset-btn{background:white;border:1px solid var(--gray-200);padding:6px 16px;border-radius:40px;font-size:0.8rem;cursor:pointer;transition:all 0.2s}.preset-btn:hover{background:var(--primary-color);color:white;border-color:var(--primary-color)}@media (max-width:900px){.generator-container{grid-template-columns:1fr}.options-grid{grid-template-columns:1fr}.corner-controls{grid-template-columns:1fr}}