@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg-primary:#10131a;--bg-secondary:#161a25;--bg-tertiary:#1a1f2e;--text-primary:#e8ecf4;--text-secondary:#8a94a8;--accent:#f471b5;--border:#252b3d;--radius:8px}*{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#333;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}::-webkit-scrollbar-corner{background:0 0}html,body{height:100%}body{background:var(--bg-primary);color:var(--text-primary);font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#app{flex-direction:column;height:100vh;display:flex}#electron-titlebar{background:var(--bg-secondary);border-bottom:1px solid var(--border);-webkit-app-region:drag;app-region:drag;-webkit-user-select:none;user-select:none;flex-shrink:0;justify-content:center;align-items:center;height:36px;display:none}#electron-titlebar .titlebar-title{color:var(--text-secondary);font-size:13px;font-weight:500}body.is-electron #electron-titlebar{display:flex}body.is-electron .controls-header{display:none}#app-body{flex:1;min-height:0;display:flex}#panel-resizer{cursor:col-resize;background:var(--border);flex-shrink:0;width:5px;transition:background .15s;position:relative}#panel-resizer:after{content:"";position:absolute;inset:0 -4px}#panel-resizer:hover,#panel-resizer.dragging{background:var(--accent)}body.resizing{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}body.resizing *{cursor:col-resize!important;pointer-events:none!important}body.resizing #panel-resizer{pointer-events:auto!important}.controls-panel{background:var(--bg-secondary);border-right:none;flex-direction:column;flex-shrink:0;width:320px;min-width:220px;max-width:600px;display:flex;overflow-y:auto}.controls-header{border-bottom:1px solid var(--border);padding:20px}.controls-header h1{letter-spacing:-.02em;font-size:16px;font-weight:600}.controls-header p{color:var(--text-secondary);margin-top:4px;font-size:12px}.controls-body{flex-direction:column;flex:1;gap:16px;padding:16px 20px;display:flex}.control-group{flex-direction:column;gap:6px;display:flex}.control-group label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:500}#code-input{resize:vertical;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);width:100%;min-height:180px;color:var(--text-primary);tab-size:2;outline:none;padding:12px;font-family:Fira Code,monospace;font-size:13px;line-height:1.5;transition:border-color .15s}#code-input:focus{border-color:var(--accent)}select{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text-primary);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;outline:none;padding:8px 12px;font-family:Inter,sans-serif;font-size:13px}select:focus{border-color:var(--accent)}input[type=text]{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text-primary);outline:none;padding:8px 12px;font-family:Inter,sans-serif;font-size:13px}input[type=text]:focus{border-color:var(--accent)}.slider-row{align-items:center;gap:12px;display:flex}.slider-row input[type=range]{accent-color:var(--accent);flex:1;height:4px}.slider-value{color:var(--text-secondary);text-align:right;font-variant-numeric:tabular-nums;min-width:36px;font-size:12px}.checkbox-row{align-items:center;gap:8px;display:flex}.checkbox-row input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}.checkbox-row span{font-size:13px}#bg-presets,#wp-presets{flex-wrap:wrap;gap:8px;display:flex}#wp-presets{margin-top:4px}.gradient-builder{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);margin-top:6px;padding:10px}.gradient-builder .sub-label{color:var(--text-secondary);text-transform:none;letter-spacing:0;margin-bottom:8px;font-size:11px;display:block}.gradient-colors{align-items:center;gap:8px;display:flex}.gradient-colors input[type=color]{border:1px solid var(--border);background:var(--bg-secondary);cursor:pointer;border-radius:6px;width:32px;height:32px;padding:2px}.gradient-colors input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.gradient-colors input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.gradient-arrow{color:var(--text-secondary);font-size:14px}.gradient-colors select{background-position:right 6px center;flex:0;width:auto;min-width:70px;padding:6px 8px;font-size:12px}.btn-apply-gradient{background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:6px;padding:6px 12px;font-family:Inter,sans-serif;font-size:12px;font-weight:500;transition:background .15s}.btn-apply-gradient:hover{background:#7b8ff0}.gradient-preview-bar{background:linear-gradient(90deg,#f471b5,#c0457a);border-radius:3px;height:6px;margin-top:8px}.bg-preset-btn{cursor:pointer;border:2px solid #0000;border-radius:8px;outline:none;width:32px;height:32px;transition:border-color .15s,transform .1s}.bg-preset-btn:hover{transform:scale(1.1)}.bg-preset-btn.active{border-color:#fff}.window-style-picker{gap:10px;display:flex}.window-style-btn{background:var(--bg-primary);border:2px solid var(--border);cursor:pointer;border-radius:10px;flex-direction:column;flex:1;align-items:center;gap:6px;padding:10px 10px 8px;transition:border-color .15s,transform .1s;display:flex}.window-style-btn:hover{border-color:#444;transform:scale(1.03)}.window-style-btn.active{border-color:var(--accent)}.style-label{color:var(--text-secondary);font-family:Inter,sans-serif;font-size:11px}.window-style-btn.active .style-label{color:var(--text-primary)}.style-preview{aspect-ratio:16/10;border-radius:5px;width:100%;position:relative;overflow:hidden}.style-preview-solid{background:#1e1e1e}.style-preview-blur{-webkit-backdrop-filter:blur(4px);background:#1e1e1e73;border:1px solid #ffffff14;box-shadow:inset 0 0 20px #667eea26,inset 0 0 40px #764ba21a}.sp-titlebar{align-items:center;gap:3px;padding:4px 6px;display:flex}.sp-dot{border-radius:50%;width:5px;height:5px;display:inline-block}.sp-dot.r{background:#ff5f57}.sp-dot.y{background:#febc2e}.sp-dot.g{background:#28c840}.sp-lines{flex-direction:column;gap:3px;padding:2px 6px;display:flex}.sp-lines div{background:#ffffff26;border-radius:1px;height:2px}.sp-lines div:first-child{width:70%}.sp-lines div:nth-child(2){width:50%}.sp-lines div:nth-child(3){width:60%}.quality-picker{gap:6px;display:flex}.quality-btn{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);cursor:pointer;flex:1;padding:7px 10px;font-family:Inter,sans-serif;font-size:12px;font-weight:500;transition:border-color .15s,color .15s,background .15s}.quality-btn:hover{color:var(--text-primary);border-color:#444}.quality-btn.active{border-color:var(--accent);color:var(--text-primary);background:#667eea1a}.export-buttons{border-top:1px solid var(--border);gap:8px;padding:16px 20px;display:flex}.btn{border-radius:var(--radius);cursor:pointer;border:none;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 16px;font-family:Inter,sans-serif;font-size:13px;font-weight:500;transition:background .15s,transform .1s;display:flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:#7b8ff0}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:#2a2a2a}.btn-icon{width:100%;padding:10px 16px}@media (width<=900px){#app-body{flex-direction:column}.controls-panel{width:100%;min-width:unset;border-right:none;border-bottom:1px solid var(--border)}#preview-container{min-height:50vh}}#preview-container{background:#0a0a0a radial-gradient(circle at 1px 1px,#ffffff0d 1px,#0000 0) 0 0/24px 24px;flex:1;justify-content:center;align-items:center;min-height:400px;padding:24px;display:flex;overflow:auto}.preview-background{border-radius:4px;justify-content:center;align-items:center;min-width:200px;display:inline-flex}.window-frame{border-radius:12px;min-width:300px;max-width:100%;overflow:hidden}.window-titlebar{-webkit-user-select:none;user-select:none;align-items:center;height:40px;padding:0 16px;display:flex;position:relative}.traffic-lights{flex-shrink:0;gap:8px;display:flex}.dot{border-radius:50%;width:12px;height:12px;display:inline-block}.dot.red{background:#ff5f57;box-shadow:inset 0 0 0 1px #0000001f}.dot.yellow{background:#febc2e;box-shadow:inset 0 0 0 1px #0000001f}.dot.green{background:#28c840;box-shadow:inset 0 0 0 1px #0000001f}.window-title{color:#ffffff80;white-space:nowrap;text-overflow:ellipsis;max-width:60%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:13px;position:absolute;left:50%;overflow:hidden;transform:translate(-50%)}.titlebar-spacer{flex:1}.window-content pre{tab-size:2;margin:0;padding:20px 24px;font-family:Fira Code,JetBrains Mono,SF Mono,Cascadia Code,Consolas,monospace;line-height:1.6;overflow-x:auto}.window-content pre::-webkit-scrollbar{height:6px}.window-content pre::-webkit-scrollbar-track{background:0 0}.window-content pre::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.window-content pre::-webkit-scrollbar-thumb:hover{background:#ffffff40}.window-content pre code{font-family:inherit}.watermark{color:#ffffff1f;letter-spacing:.02em;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:2;font-family:Inter,-apple-system,sans-serif;font-size:11px;font-weight:500;position:absolute;bottom:12px;right:16px}.preview-background{position:relative}#preview-container .loading{color:#fff6;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px}