.cta-generator{min-height:auto;background:var(--gray-50);padding:24px}.cta-gen-header{text-align:center;margin-bottom:32px}.cta-gen-header h1{font-size:32px;font-weight:700;color:var(--gray-800);margin:0 0 8px}.cta-gen-header p{color:var(--gray-500);margin:0}.cta-gen-layout{display:grid;grid-template-columns:var(--tool-controls-width, 420px) 1fr;gap:24px;max-width:1800px;margin:0 auto}.cta-gen-controls{display:flex;flex-direction:column;gap:16px;max-height:none;overflow-y:auto;padding-right:8px}.cta-gen-controls::-webkit-scrollbar{width:6px}.cta-gen-controls::-webkit-scrollbar-track{background:var(--gray-200);border-radius:3px}.cta-gen-controls::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:3px}.cta-gen-panel{background:var(--white);border-radius:12px;padding:20px;border:1px solid var(--gray-200)}.cta-gen-panel h3{font-size:14px;font-weight:600;color:var(--gray-700);margin:0 0 16px;text-transform:uppercase;letter-spacing:.5px}.cta-gen-presets{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.cta-gen-preset-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:8px;cursor:pointer;transition:all .2s;font-size:12px}.cta-gen-preset-btn:hover{border-color:var(--info-color);background:#eff6ff}.cta-gen-preset-btn .preset-swatch{width:20px;height:20px;border-radius:4px;border:1px solid rgba(0,0,0,.1)}.cta-gen-preset-btn .preset-name{color:var(--gray-700);font-weight:500}.cta-gen-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}.cta-gen-row:last-child{margin-bottom:0}.cta-gen-row label{min-width:100px;font-size:13px;color:var(--gray-500)}.cta-gen-row input[type=range]{flex:1;height:6px;background:var(--gray-200);border-radius:3px;-webkit-appearance:none}.cta-gen-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--info-color);border-radius:50%;cursor:pointer}.cta-gen-row input[type=text],.cta-gen-row textarea,.cta-gen-row select{flex:1;padding:8px 12px;border:1px solid var(--gray-200);border-radius:6px;font-size:13px;background:var(--white)}.cta-gen-row input[type=text]:focus,.cta-gen-row textarea:focus,.cta-gen-row select:focus{outline:none;border-color:var(--info-color);box-shadow:0 0 0 3px #3b82f61a}.cta-gen-row textarea{resize:vertical}.cta-gen-row span{min-width:50px;text-align:right;font-size:12px;color:var(--gray-400)}.cta-gen-row input[type=checkbox]{width:16px;height:16px;margin-right:4px}.cta-gen-row input[type=color]{width:32px;height:32px;border:none;border-radius:6px;cursor:pointer;background:none}.cta-gen-btn-group{display:flex;gap:4px}.cta-gen-btn-group button{padding:6px 12px;border:1px solid var(--gray-200);background:var(--white);border-radius:6px;font-size:12px;cursor:pointer;text-transform:capitalize;transition:all .2s}.cta-gen-btn-group button:hover{border-color:var(--info-color)}.cta-gen-btn-group button.active{background:var(--info-color);color:var(--white);border-color:var(--info-color)}.cta-gen-color-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.cta-gen-color-row{display:flex;align-items:center;gap:8px}.cta-gen-color-row label{flex:1;font-size:12px;color:var(--gray-500)}.cta-gen-color-row input[type=color]{width:32px;height:32px;border:none;border-radius:6px;cursor:pointer;background:none}.cta-gen-preview-area{display:flex;flex-direction:column;gap:24px}.cta-gen-preview-area h3{font-size:14px;font-weight:600;color:var(--gray-700);margin:0;text-transform:uppercase;letter-spacing:.5px}.cta-gen-preview{border-radius:12px;border:2px solid #d1d5db;overflow:hidden}.cta-gen-code-output{background:var(--white);border-radius:12px;border:1px solid var(--gray-200);overflow:hidden}.cta-gen-code-actions{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--gray-200);flex-wrap:wrap}.cta-gen-code-actions button{padding:8px 16px;background:var(--gray-100);border:1px solid var(--gray-200);border-radius:6px;cursor:pointer;font-size:13px;color:var(--gray-700);transition:all .2s}.cta-gen-code-actions button:hover{background:var(--gray-200)}.cta-gen-code{margin:0;padding:16px;background:var(--gray-800);color:var(--gray-200);font-family:Monaco,Menlo,monospace;font-size:12px;line-height:1.6;overflow-x:auto;max-height:300px}.cta-gen-code code{white-space:pre}@media (max-width: 1200px){.cta-gen-layout{grid-template-columns:1fr}.cta-gen-controls{max-height:none;overflow:visible;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}}@media (max-width: 768px){.cta-generator{padding:16px}.cta-gen-controls,.cta-gen-color-grid,.cta-gen-presets{grid-template-columns:1fr}}