:root{--font-family: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;--primary-color: #646cff;--bg-color: #f9fafb;--text-color: #213547;--sidebar-width: 400px;--banner-width-px: 1584px;--banner-height-px: 396px;--gradient-classic-navy: linear-gradient(135deg, #1e3c72, #2a5298);--gradient-midnight-blue: linear-gradient(135deg, #0f2027, #203a43, #2c5364);--gradient-charcoal: linear-gradient(135deg, #232526, #414345);--gradient-deep-ocean: linear-gradient(135deg, #141E30, #243B55);--gradient-bright-blue: linear-gradient(135deg, #2193b0, #6dd5ed);--gradient-royal-azure: linear-gradient(135deg, #00c6ff, #0072ff);--gradient-forest-dark: linear-gradient(135deg, #134E5E, #71B280);--gradient-emerald: linear-gradient(135deg, #108dc7, #ef8e38);--gradient-pure-green: linear-gradient(135deg, #11998e, #38ef7d);--gradient-nice-teal: linear-gradient(135deg, #0052D4, #4364F7, #6FB1FC);--gradient-coffee: linear-gradient(135deg, #3E5151, #DECBA4);--gradient-mystic-purple: linear-gradient(135deg, #2b1055, #7597de);--gradient-deep-brown: linear-gradient(135deg, #603813, #b29f94);--gradient-crimson: linear-gradient(135deg, #870000, #190a05);--gradient-purple-haze: linear-gradient(135deg, #8E2DE2, #4A00E0);--gradient-purple: linear-gradient(135deg, #8a2387, #e94057, #f27121);--gradient-ocean: linear-gradient(135deg, #2E3192, #1BFFFF);--gradient-forest: linear-gradient(135deg, #D4FC79, #96E6A1);--gradient-midnight: linear-gradient(to right, #232526, #414345);--panel-bg: #ffffff;--border-color: #e5e7eb}*{box-sizing:border-box}body{margin:0;font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-color);-webkit-font-smoothing:antialiased}#root{display:flex;height:100vh;width:100vw;overflow:hidden}.app-container{display:flex;width:100%;height:100%}@media(max-width:768px){.app-container{flex-direction:column-reverse;flex-direction:column;overflow-y:auto}#root{height:auto;min-height:100vh;overflow-y:auto}}.editor-panel{width:var(--sidebar-width);background:var(--panel-bg);border-right:1px solid var(--border-color);display:flex;flex-direction:column;overflow-y:auto;padding:1.5rem;box-shadow:4px 0 24px #00000005;z-index:10}@media(max-width:768px){.editor-panel{width:100%;border-right:none;border-top:1px solid var(--border-color);flex:1 0 auto;padding:1rem;overflow-y:visible}}.preview-panel{flex:1;display:flex;align-items:center;justify-content:center;background:#f0f2f5;background-image:linear-gradient(45deg,#e6e6e6 25%,transparent 25%),linear-gradient(-45deg,#e6e6e6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6e6e6 75%),linear-gradient(-45deg,transparent 75%,#e6e6e6 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;padding:2rem;overflow:hidden}@media(max-width:768px){.preview-panel{flex:0 0 auto;width:100%;padding:1rem;min-height:250px;border-bottom:1px solid var(--border-color)}}.form-section{margin-bottom:2rem}.form-section h3{font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;margin-bottom:1rem;border-bottom:1px solid var(--border-color);padding-bottom:.5rem}.form-group{margin-bottom:1rem}.form-group label{display:block;font-size:.85rem;font-weight:500;margin-bottom:.4rem;color:#374151}.form-input{width:100%;padding:.6rem;border:1px solid var(--border-color);border-radius:6px;font-size:.9rem;transition:all .2s}.form-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #646cff1a}.btn-download{width:100%;padding:.8rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:background .2s;font-size:1rem;margin-top:auto}.btn-download:hover{filter:brightness(1.1)}.flex-row{display:flex;gap:.5rem}.color-option{width:40px;height:40px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .2s}.color-option.active{border-color:#333;transform:scale(1.1)}