:root{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-tertiary: #0f3460;--bg-surface: #1e2a4a;--text-primary: #e8e8e8;--text-secondary: #a0a0b0;--text-muted: #6b6b80;--accent: #e94560;--accent-hover: #ff6b81;--accent-dim: rgba(233, 69, 96, .15);--success: #2ecc71;--warning: #f39c12;--error: #e74c3c;--border: #2a2a4a;--chat-width: 380px;--topbar-height: 48px;--statusbar-height: 28px;--radius: 6px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:var(--bg-primary);color:var(--text-primary);height:100vh;overflow:hidden}#root{height:100vh;display:flex;flex-direction:column}.topbar{height:var(--topbar-height);background:var(--bg-secondary);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:12px;flex-shrink:0}.topbar-logo{font-weight:700;font-size:15px;color:var(--accent);letter-spacing:.5px;margin-right:8px}.topbar select{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius);padding:6px 12px;font-size:13px;cursor:pointer;outline:none}.topbar select:hover{border-color:var(--accent)}.topbar-btn{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius);padding:6px 14px;font-size:13px;cursor:pointer;transition:all .15s}.topbar-btn:hover{border-color:var(--accent);background:var(--accent-dim)}.topbar-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.topbar-btn.primary:hover{background:var(--accent-hover)}.topbar-btn:disabled{opacity:.4;cursor:not-allowed}.topbar-spacer{flex:1}.topbar-status{font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:6px}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.status-dot.running{background:var(--success)}.status-dot.stopped{background:var(--text-muted)}.status-dot.starting{background:var(--warning);animation:pulse 1s infinite}.status-dot.error{background:var(--error)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.main-layout{display:flex;flex:1;overflow:hidden}.chat-panel{width:var(--chat-width);background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}.chat-message{padding:10px 14px;border-radius:var(--radius);font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-width:95%}.chat-message.user{background:var(--bg-tertiary);align-self:flex-end;border-bottom-right-radius:2px}.chat-message.assistant{background:var(--bg-surface);align-self:flex-start;border-bottom-left-radius:2px}.chat-message.tool-activity{background:transparent;color:var(--text-muted);font-size:11px;padding:4px 8px;align-self:flex-start;font-family:SF Mono,Fira Code,monospace}.chat-message.tool-activity .tool-name{color:var(--warning)}.chat-message code{background:#0000004d;padding:1px 4px;border-radius:3px;font-family:SF Mono,Fira Code,monospace;font-size:12px}.chat-message pre{background:#0000004d;padding:8px 10px;border-radius:4px;overflow-x:auto;margin:6px 0;font-size:12px}.chat-message pre code{background:none;padding:0}.chat-input-area{padding:12px;border-top:1px solid var(--border)}.chat-input-wrapper{display:flex;gap:8px}.chat-input{flex:1;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);padding:10px 14px;font-size:13px;outline:none;resize:none;font-family:inherit;min-height:42px;max-height:120px}.chat-input:focus{border-color:var(--accent)}.chat-input::placeholder{color:var(--text-muted)}.chat-send-btn{background:var(--accent);border:none;border-radius:var(--radius);color:#fff;padding:0 16px;font-size:13px;cursor:pointer;font-weight:600;transition:background .15s}.chat-send-btn:hover{background:var(--accent-hover)}.chat-send-btn:disabled{opacity:.4;cursor:not-allowed}.preview-panel{flex:1;display:flex;flex-direction:column;background:var(--bg-primary)}.preview-iframe{flex:1;border:none;background:#fff}.preview-placeholder{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;color:var(--text-muted)}.preview-placeholder h2{font-size:24px;font-weight:700;color:var(--accent)}.preview-placeholder p{font-size:14px;max-width:400px;text-align:center;line-height:1.6}.statusbar{height:var(--statusbar-height);background:var(--bg-secondary);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 16px;font-size:11px;color:var(--text-muted);gap:16px;flex-shrink:0}.statusbar-item{display:flex;align-items:center;gap:4px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:24px;min-width:400px;max-width:500px}.modal h3{font-size:16px;margin-bottom:12px}.modal p{font-size:13px;color:var(--text-secondary);margin-bottom:16px;line-height:1.5}.modal-actions{display:flex;gap:8px;justify-content:flex-end}