body{-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,system-ui,sans-serif}#root{width:100%;height:100vh;overflow:hidden}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f0f1a;--surface:#1a1a2e;--surface2:#242440;--border:#ffffff1a;--text:#e8e8f0;--text-muted:#889;--accent:#7c6df0;--accent-hover:#9d8ff5;--accent-glow:#7c6df04d;--header-h:56px;--toolbar-w:56px;--panel-title-h:48px}body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;overflow:hidden}.app{flex-direction:column;width:100vw;height:100vh;display:flex}.app-header{height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--border);z-index:10;flex-shrink:0;align-items:center;gap:16px;padding:0 16px;display:flex}.app-logo{align-items:center;gap:6px;margin-right:8px;display:flex}.logo-icon{color:var(--accent);font-size:18px}.logo-text{letter-spacing:-.3px;font-size:16px;font-weight:700}.header-controls{align-items:center;gap:10px;margin-left:auto;display:flex}.brush-size{color:var(--text-muted);align-items:center;gap:6px;font-size:12px;display:flex}.brush-size input[type=range]{width:80px;accent-color:var(--accent)}.brush-size span{min-width:30px;color:var(--text-muted);font-size:11px}button{cursor:pointer;border:none;border-radius:8px;font-family:inherit;font-size:13px;transition:all .15s}.btn-icon{background:var(--surface2);color:var(--text);border:1px solid var(--border);padding:6px 10px}.btn-icon:hover{background:var(--border)}.btn-primary{background:var(--accent);color:#fff;padding:6px 14px;font-weight:500}.btn-primary:hover{background:var(--accent-hover)}.app-body{flex:1;display:flex;overflow:hidden}.panel-divider{background:var(--border);flex-shrink:0;width:1px}.panel-title{height:var(--panel-title-h);color:var(--text-muted);background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:center;align-items:center;padding:0 52px;font-size:14px;font-weight:500;display:flex;position:relative}.panel-btn{height:28px;color:var(--text-muted);white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;gap:4px;padding:0 8px;font-size:13px;transition:all .15s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.panel-btn:hover{background:var(--surface2);border-color:var(--border);color:var(--text)}.panel-btn-left{font-size:16px;left:8px}.panel-btn-right{right:8px}.reset-btn:hover{color:#f87171;background:#f8717114;border-color:#f8717166}.sketch-panel{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.sketch-content{flex:1;display:flex;overflow:hidden}.canvas-wrapper{background:#f5f5f5;flex:1;overflow:hidden}.canvas-wrapper canvas{display:block}.toolbar{width:var(--toolbar-w);background:var(--surface);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;align-items:center;gap:2px;padding:8px 0;display:flex}.tool-btn{width:40px;height:40px;color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;font-size:18px;transition:all .15s;display:flex;position:relative}.tool-btn:hover{background:var(--surface2);color:var(--text)}.tool-btn.active{background:var(--surface2);color:var(--accent);border-color:var(--accent)}.tool-btn[title]:hover:after{content:attr(title);background:var(--surface);border:1px solid var(--border);white-space:nowrap;z-index:100;pointer-events:none;color:var(--text);border-radius:6px;padding:3px 8px;font-size:11px;position:absolute;top:50%;left:48px;transform:translateY(-50%)}.toolbar-divider{background:var(--border);width:32px;height:1px;margin:4px 0}.rendering-panel{flex-direction:column;flex-shrink:0;width:50%;display:flex;overflow:hidden}.refresh-btn{background:var(--surface2);border:1px solid var(--border);width:32px;height:32px;color:var(--text-muted);border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:18px;transition:all .15s;display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.refresh-btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}.refresh-btn:disabled{opacity:.4;cursor:not-allowed}.refresh-btn.dirty{color:var(--accent);border-color:var(--accent);animation:1.5s ease-in-out infinite pulse-ring}@keyframes pulse-ring{0%,to{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 0 6px #0000}}.rendering-body{background:#f5f5f5;flex-direction:column;flex:1;align-items:center;gap:16px;padding:24px;display:flex;overflow-y:auto}.render-placeholder{flex:1;justify-content:center;align-items:center;width:100%;display:flex}.render-placeholder span{color:#999;font-size:13px}.render-result{background:#fff;border:1px solid #ddd;border-radius:10px;width:100%;overflow:hidden}.render-result img{width:100%;display:block}.render-actions{background:#f9f9f9;border-top:1px solid #eee;gap:8px;padding:10px;display:flex}.render-actions button{color:#333;background:#fff;border:1px solid #ddd;border-radius:6px;flex:1;padding:7px;font-size:12px}.render-actions .place-btn{background:var(--accent);color:#fff;border-color:#0000}.render-actions button:hover{opacity:.85}.generating-placeholder{background:#e8e8e8;border-radius:10px;flex:1;justify-content:center;align-items:flex-end;width:100%;min-height:320px;padding-bottom:24px;display:flex;position:relative;overflow:hidden}.generating-shimmer{background:linear-gradient(105deg,#0000 30%,#7c6df026 50%,#c471ed26 60%,#0000 70%) 0 0/200% 100%;animation:1.6s ease-in-out infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.generating-label{color:#666;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffffbf;border:1px solid #00000014;border-radius:99px;align-items:center;gap:8px;padding:8px 16px;font-size:13px;display:flex;position:relative}.generating-spinner{border:2px solid #0000001f;border-top-color:var(--accent);border-radius:50%;flex-shrink:0;width:14px;height:14px;animation:.7s linear infinite spin;display:inline-block}.ai-spinner{border:3px solid #0000001a;border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.imagine-controls{gap:8px;width:100%;display:flex}.style-select{color:#333;cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:8px;flex:1;height:40px;padding:0 10px;font-family:inherit;font-size:13px}.style-select:focus{border-color:var(--accent);outline:none}.style-select:disabled{opacity:.5;cursor:not-allowed}.imagine-btn{background:linear-gradient(135deg, var(--accent), #c471ed);color:#fff;white-space:nowrap;border-radius:8px;flex-shrink:0;align-items:center;gap:6px;height:40px;padding:0 20px;font-size:14px;font-weight:600;transition:opacity .15s,box-shadow .2s;display:flex}.imagine-btn:hover:not(:disabled){opacity:.9;box-shadow:0 0 16px var(--accent-glow)}.imagine-btn:disabled{opacity:.5;cursor:not-allowed}.imagine-btn.dirty{box-shadow:0 0 12px var(--accent-glow)}.ai-error{color:#c0392b;background:#c0392b14;border:1px solid #c0392b33;border-radius:8px;width:100%;padding:10px;font-size:12px}.color-picker-wrapper{align-items:center;gap:6px;display:flex}.color-swatch{border:2px solid var(--border);cursor:pointer;border-radius:6px;width:28px;height:28px;position:relative;overflow:visible}.color-swatch input[type=color]{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.preset-colors{gap:4px;display:flex}.preset-dot{cursor:pointer;border:2px solid #0000;border-radius:50%;width:18px;height:18px;transition:transform .1s}.preset-dot:hover{transform:scale(1.2)}.preset-dot.active{border-color:var(--text)}.sketch-panel.expanded{flex:1}.rendering-panel.expanded{width:100%}@media (width<=1200px){.app-header{gap:8px;padding:0 10px}.header-controls{gap:6px}.brush-size input[type=range]{width:60px}.brush-size label{display:none}.logo-text{font-size:14px}.tool-btn{width:44px;height:44px;font-size:20px}.toolbar{width:52px;padding:6px 0}.imagine-controls{flex-direction:column;gap:6px}.imagine-btn{justify-content:center;width:100%}.style-select{width:100%}.rendering-body{padding:16px}}