:root{--bg: #0f0f13;--panel: #17171d;--panel-2: #1d1d25;--border: #2a2a35;--text: #e8e8ef;--text-dim: #9a9aad;--accent: #7c6cf0;--accent-soft: rgba(124, 108, 240, .16);--danger: #e5534b;--radius: 10px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:-apple-system,PingFang SC,Noto Sans SC,Microsoft YaHei,sans-serif;background:var(--bg);color:var(--text);font-size:14px;overflow:hidden}.app-shell{height:100%;display:flex;flex-direction:column}.topbar{height:48px;flex:none;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--border)}.brand{font-weight:700;font-size:15px;letter-spacing:.2px}.brand .dot{color:var(--accent)}.topbar .sub{color:var(--text-dim);font-size:12px}.spacer{flex:1}.ghost-btn{background:transparent;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 14px;cursor:pointer;font-size:13px}.ghost-btn:hover{border-color:var(--accent);color:var(--accent)}.workspace{flex:1;display:flex;min-height:0}.chat-panel{width:320px;flex:none;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--border)}.panel-header{padding:14px 16px;font-weight:600;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}.panel-header .logo{color:var(--accent)}.badge{font-size:10px;font-weight:500;color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:2px 6px}.chat-list{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}.chat-empty{color:var(--text-dim);display:flex;flex-direction:column;gap:8px}.suggestion{text-align:left;background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;cursor:pointer;font-size:13px;line-height:1.5}.suggestion:hover{border-color:var(--accent)}.chat-msg{display:flex}.chat-msg.user{justify-content:flex-end}.chat-msg .bubble{max-width:88%;padding:10px 12px;border-radius:var(--radius);background:var(--panel-2);line-height:1.6;white-space:pre-wrap;word-break:break-word}.chat-msg.user .bubble{background:var(--accent);color:#fff}.chat-msg .bubble.thinking{color:var(--text-dim);animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{opacity:.45}}.chat-msg.error .bubble{background:#e5534b1f;border:1px solid rgba(229,83,75,.4)}.retry-btn{margin-left:8px;padding:2px 10px;font-size:12px;cursor:pointer;background:transparent;color:var(--danger);border:1px solid var(--danger);border-radius:6px}.retry-btn:hover:not(:disabled){background:var(--danger);color:#fff}.retry-btn:disabled{opacity:.4;cursor:not-allowed}.chat-input-row{flex:none;padding:12px;display:flex;gap:8px;border-top:1px solid var(--border)}.chat-input-row textarea{flex:1;resize:none;background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;font-size:13px;font-family:inherit;line-height:1.5}.chat-input-row textarea:focus{outline:none;border-color:var(--accent)}.send-btn{align-self:flex-end;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);padding:10px 18px;cursor:pointer;font-size:13px;font-weight:600}.send-btn:disabled{opacity:.4;cursor:not-allowed}.canvas-area{flex:1;min-width:0;display:flex;background:var(--bg)}.artboard-wrap{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 30% 20%,rgba(124,108,240,.06),transparent 55%),var(--bg)}.artboard-shadow{box-shadow:0 12px 48px #0000008c;border-radius:4px;overflow:hidden;flex:none}.side-panel{width:280px;flex:none;overflow-y:auto;background:var(--panel);border-left:1px solid var(--border)}.panel-section{padding:14px 16px;border-bottom:1px solid var(--border)}.panel-section h4{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}.hint{color:var(--text-dim);font-size:12px;line-height:1.6}.error-text{color:var(--danger);font-size:12px;line-height:1.5;word-break:break-all;margin-top:8px}.layer-list{list-style:none;display:flex;flex-direction:column;gap:4px}.layer{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;border:1px solid transparent}.layer:hover{background:var(--panel-2)}.layer.selected{background:var(--accent-soft);border-color:var(--accent)}.layer-icon{width:18px;text-align:center;font-size:12px;color:var(--text-dim);flex:none}.layer-name{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-actions{display:none;gap:2px}.layer:hover .layer-actions,.layer.selected .layer-actions{display:flex}.layer-actions button{background:transparent;border:none;color:var(--text-dim);cursor:pointer;padding:2px 5px;border-radius:4px;font-size:12px}.layer-actions button:hover{color:var(--text);background:var(--panel-2)}.panel-section label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-dim);margin-bottom:12px}.panel-section input,.panel-section select,.panel-section textarea{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit}.panel-section input:focus,.panel-section select:focus,.panel-section textarea:focus{outline:none;border-color:var(--accent)}.panel-section input[type=color]{padding:2px;height:34px}.retry-btn{width:100%;margin-top:8px;background:var(--danger);color:#fff;border:none;border-radius:8px;padding:8px 12px;cursor:pointer;font-size:13px}