:root{--bg: #0d0d0f;--panel: #18181c;--panel-2: #1e1e24;--border: #2a2a32;--text: #e4e4e8;--text-dim: #888892;--accent: #e8a838;--accent-2: #4a9eff;--ai-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--radius: 8px;--slider-h: 4px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden;display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:var(--panel);border-bottom:1px solid var(--border);flex-shrink:0;height:52px;gap:12px}.logo{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;flex-shrink:0}.logo-icon{width:28px;height:28px;background:linear-gradient(135deg,var(--accent),#d4642a);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px}.logo-sub{color:var(--text-dim);font-size:12px;font-weight:400}.header-actions{display:flex;gap:8px;flex-shrink:0}.btn{padding:7px 14px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);border-radius:var(--radius);font-size:13px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px;white-space:nowrap}.btn:hover{background:#28282e;border-color:#3a3a42}.btn-primary{background:var(--accent);border-color:var(--accent);color:#1a1a1a;font-weight:600}.btn-primary:hover{background:#f0b448}.ai-bar{background:var(--panel);border-bottom:1px solid var(--border);padding:10px 20px;display:flex;gap:10px;align-items:center;flex-shrink:0}.ai-input-wrap{flex:1;display:flex;align-items:center;background:var(--panel-2);border:1px solid var(--border);border-radius:20px;padding:0 16px;transition:border-color .2s;position:relative}.ai-input-wrap:focus-within{border-color:var(--accent-2);box-shadow:0 0 0 2px #4a9eff26}.ai-icon{font-size:16px;margin-right:8px;background:var(--ai-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.ai-input{flex:1;background:none;border:none;color:var(--text);font-size:14px;padding:10px 0;outline:none;font-family:inherit}.ai-input::placeholder{color:var(--text-dim)}.ai-btn{padding:8px 18px;background:var(--ai-gradient);border:none;color:#fff;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap;display:flex;align-items:center;gap:6px}.ai-btn:hover{opacity:.9;transform:scale(1.02)}.ai-btn:disabled{opacity:.5;cursor:wait;transform:none}.ai-suggestions{display:flex;gap:6px;flex-shrink:0;overflow-x:auto;max-width:40%}.ai-suggestion-chip{padding:5px 12px;background:var(--panel-2);border:1px solid var(--border);border-radius:14px;font-size:12px;color:var(--text-dim);cursor:pointer;transition:all .15s;white-space:nowrap}.ai-suggestion-chip:hover{color:var(--text);border-color:var(--accent-2);background:#4a9eff1a}.ai-result{background:linear-gradient(135deg,#667eea1f,#764ba21f);border-bottom:1px solid rgba(102,126,234,.2);padding:10px 20px;display:none;align-items:flex-start;gap:10px;flex-shrink:0}.ai-result.show{display:flex}.ai-result-icon{font-size:18px;flex-shrink:0}.ai-result-content{flex:1}.ai-result-title{font-size:13px;font-weight:600;color:#a5b4fc;margin-bottom:2px}.ai-result-desc{font-size:12px;color:var(--text-dim);line-height:1.5}.ai-result-tags{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}.ai-result-tag{font-size:10px;padding:2px 8px;background:#667eea26;border-radius:10px;color:#a5b4fc}.ai-result-close{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:16px;padding:0;flex-shrink:0}.ai-result-close:hover{color:var(--text)}.ai-thinking{display:inline-flex;gap:3px;align-items:center}.ai-thinking span{width:5px;height:5px;background:#a5b4fc;border-radius:50%;animation:ai-bounce 1.2s infinite ease-in-out}.ai-thinking span:nth-child(2){animation-delay:.15s}.ai-thinking span:nth-child(3){animation-delay:.3s}@keyframes ai-bounce{0%,80%,to{transform:scale(.5);opacity:.5}40%{transform:scale(1);opacity:1}}main{display:flex;flex:1;overflow:hidden}.preset-panel{width:200px;background:var(--panel);border-right:1px solid var(--border);overflow-y:auto;flex-shrink:0}.panel-title{padding:12px 16px 8px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);font-weight:600}.preset-list{padding:0 8px 12px}.preset-card{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius);cursor:pointer;transition:background .15s;margin-bottom:2px}.preset-card:hover{background:var(--panel-2)}.preset-card.active{background:var(--panel-2);box-shadow:inset 2px 0 0 var(--accent)}.preset-swatch{width:32px;height:32px;border-radius:6px;flex-shrink:0;border:1px solid rgba(255,255,255,.08)}.preset-info{flex:1;min-width:0}.preset-name{font-size:13px;font-weight:500}.preset-desc{font-size:11px;color:var(--text-dim)}.canvas-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#0a0a0c;position:relative}.canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:20px;position:relative}.canvas-container{position:relative;max-width:100%;max-height:100%;border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 30px #00000080}#canvas{display:block;max-width:100%;max-height:100%}#originalCanvas{position:absolute;top:0;left:0;max-width:100%;max-height:100%;clip-path:inset(0 50% 0 0);pointer-events:none}.split-handle{position:absolute;top:0;bottom:0;width:2px;background:#fff;cursor:ew-resize;z-index:10;box-shadow:0 0 8px #00000080}.split-handle:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;background:#fff;border-radius:50%;box-shadow:0 2px 8px #0000004d}.split-handle:before{content:"⇄";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;font-size:14px;color:#333;font-weight:700}.status-bar{padding:6px 16px;background:var(--panel);border-top:1px solid var(--border);display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);flex-shrink:0}.controls-panel{width:260px;background:var(--panel);border-left:1px solid var(--border);overflow-y:auto;flex-shrink:0}.control-group{padding:12px 16px;border-bottom:1px solid var(--border)}.control-group-title{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);font-weight:600;margin-bottom:10px}.slider-row{display:flex;align-items:center;margin-bottom:10px;gap:8px}.slider-label{font-size:12px;width:56px;flex-shrink:0;color:var(--text)}.slider-input{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:var(--slider-h);background:var(--border);border-radius:2px;outline:none;cursor:pointer}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--accent)}.slider-input::-moz-range-thumb{width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;border:2px solid var(--panel)}.slider-value{font-size:11px;width:36px;text-align:right;color:var(--text-dim);font-variant-numeric:tabular-nums;flex-shrink:0}.color-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.color-row label{font-size:12px;width:56px;flex-shrink:0}.color-picker{width:32px;height:22px;border:1px solid var(--border);border-radius:4px;cursor:pointer;background:none;padding:0}.reset-btn{width:100%;padding:8px;margin-top:4px;border:1px solid var(--border);background:var(--panel-2);color:var(--text-dim);border-radius:var(--radius);font-size:12px;cursor:pointer;transition:all .15s}.reset-btn:hover{color:var(--text);border-color:#3a3a42}.toast{position:fixed;bottom:60px;left:50%;transform:translate(-50%) translateY(100px);background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:10px 20px;border-radius:var(--radius);font-size:13px;z-index:1000;transition:transform .3s;box-shadow:0 4px 20px #0006}.toast.show{transform:translate(-50%) translateY(0)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#3a3a42}.loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#0a0a0cb3;display:flex;align-items:center;justify-content:center;z-index:100;display:none}.loading-overlay.show{display:flex}.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:none;align-items:center;justify-content:center;z-index:2000}.modal-overlay.show{display:flex}.modal{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:24px;width:440px;max-width:90vw}.modal-title{font-size:16px;font-weight:600;margin-bottom:8px}.modal-desc{font-size:13px;color:var(--text-dim);margin-bottom:16px;line-height:1.5}.modal-field{margin-bottom:14px}.modal-field label{font-size:12px;font-weight:600;display:block;margin-bottom:4px}.modal-field input,.modal-field select{width:100%;padding:8px 12px;background:var(--panel-2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;font-family:inherit;outline:none}.modal-field input:focus{border-color:var(--accent-2)}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}.modal-hint{font-size:11px;color:var(--text-dim);margin-top:4px}.modal-hint a{color:var(--accent-2)}@media(max-width:900px){.preset-panel{width:160px}.controls-panel{width:220px}.ai-suggestions{max-width:30%}}@media(max-width:700px){main{flex-direction:column}.preset-panel{width:100%;height:auto;max-height:100px;border-right:none;border-bottom:1px solid var(--border)}.preset-list{display:flex;gap:8px;padding:8px;overflow-x:auto}.preset-card{flex-shrink:0;min-width:140px}.controls-panel{width:100%;height:auto;max-height:180px;border-left:none;border-top:1px solid var(--border)}.ai-suggestions,.logo-sub{display:none}.header-actions{gap:4px}.header-actions .btn{padding:6px 8px;font-size:12px}.ai-bar{padding:8px 12px;flex-wrap:wrap}.ai-input-wrap{min-width:100%;order:1}.ai-btn{order:2;flex:1;justify-content:center}.canvas-wrap{padding:8px}.status-bar{flex-direction:column;gap:2px;align-items:center}}.preset-card,.ai-suggestion-chip,.btn,.ai-btn{touch-action:manipulation}.split-handle:after{width:40px;height:40px}