:root{--bg-dark: #0f172a;--panel-bg: rgba(30, 41, 59, .95);--border-color: #334155;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--accent: #3b82f6;--accent-hover: #2563eb;--success: #10b981;--error: #ef4444;--font-sans: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-dark);color:var(--text-primary);height:100vh;overflow:hidden}.app-container{display:flex;height:100%}.control-panel{width:400px;background:var(--panel-bg);border-right:1px solid var(--border-color);display:flex;flex-direction:column;z-index:10;box-shadow:4px 0 24px #0003}.panel-header{padding:1rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.logo{text-decoration:none;color:var(--text-primary);display:flex;align-items:center;gap:.5rem;font-weight:600}.logo-text{font-size:1.1rem}.header-links a{color:var(--text-secondary);text-decoration:none;font-size:.85rem;margin-left:1rem;transition:color .2s}.header-links a:hover{color:var(--accent)}.panel-content{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:1rem;gap:1rem}.config-section{padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.input-group{display:flex;gap:.5rem}.form-select,.form-input{background:#0f172a99;border:1px solid var(--border-color);color:var(--text-primary);padding:.5rem;border-radius:4px;font-size:.9rem;outline:none}.form-select:focus,.form-input:focus{border-color:var(--accent)}.form-select{width:120px}.form-input{flex:1}.section-label{font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.examples-grid{display:grid;grid-template-columns:1fr;gap:.5rem}.example-chip{background:#33415580;border:1px solid transparent;color:var(--text-secondary);padding:.5rem .75rem;border-radius:6px;font-size:.85rem;cursor:pointer;text-align:left;transition:all .2s;display:flex;align-items:center;gap:.5rem}.example-chip:hover{background:#334155cc;color:var(--text-primary);border-color:var(--border-color);transform:translate(2px)}.chat-section{flex:1;display:flex;flex-direction:column;min-height:0;background:#0f172a4d;border-radius:8px;border:1px solid var(--border-color);overflow:hidden}.activity-log{flex:1;padding:1rem;overflow-y:auto;font-family:var(--font-mono);font-size:.85rem;display:flex;flex-direction:column;gap:.5rem}.log-item{line-height:1.4;animation:fadeIn .3s ease}.log-item.user{color:var(--text-primary);font-weight:500;border-left:2px solid var(--accent);padding-left:.5rem}.log-item.agent{color:var(--text-secondary)}.log-item.error{color:var(--error)}.log-item.success{color:var(--success)}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.input-area{padding:.75rem;border-top:1px solid var(--border-color);background:#1e293b80;display:flex;gap:.5rem}.task-input{flex:1;background:transparent;border:none;color:var(--text-primary);font-family:var(--font-sans);font-size:.95rem;resize:none;outline:none;line-height:1.4}.btn-run{width:36px;height:36px;border-radius:50%;background:var(--accent);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;align-self:flex-end}.btn-run:hover{background:var(--accent-hover)}.btn-run:disabled{background:var(--text-secondary);opacity:.5;cursor:not-allowed}.terminal-section{height:120px;background:#000;border-radius:6px;border:1px solid var(--border-color);display:flex;flex-direction:column;font-family:var(--font-mono)}.terminal-header{background:#1e293b;padding:.25rem .5rem;font-size:.75rem;color:var(--text-secondary);display:flex;justify-content:space-between;border-bottom:1px solid #333}.terminal-status{font-size:.7rem;text-transform:uppercase}.terminal-output{flex:1;padding:.5rem;overflow-y:auto;font-size:.8rem;color:#cbd5e1;white-space:pre-wrap}.term-line{margin-bottom:2px}.term-cmd{color:#facc15}.term-out{color:#94a3b8}.term-err{color:#ef4444}.preview-panel{flex:1;display:flex;flex-direction:column;background:#1e1e1e;position:relative}.preview-header{padding:.75rem 1.5rem;background:var(--panel-bg);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.preview-title{font-size:.9rem;font-weight:500;display:flex;align-items:center;gap:.5rem}.preview-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 8px #10b98166}.btn-icon{background:transparent;border:none;color:var(--text-secondary);font-size:1.1rem;cursor:pointer;padding:4px;border-radius:4px;transition:color .2s}.btn-icon:hover{color:var(--text-primary);background:#ffffff1a}.preview-container-wrapper{flex:1;padding:2rem;display:flex;align-items:center;justify-content:center;background-image:radial-gradient(#334155 1px,transparent 1px);background-size:20px 20px}.preview-frame{width:100%;height:100%;border:none;background:#fff;border-radius:8px;box-shadow:0 0 50px #00000080;transition:opacity .3s}.toast{position:absolute;bottom:2rem;right:2rem;background:var(--panel-bg);border:1px solid var(--border-color);padding:.75rem 1.25rem;border-radius:6px;box-shadow:0 4px 12px #0000004d;font-size:.9rem;display:flex;align-items:center;gap:.5rem;animation:slideUp .3s ease}.toast.hidden{display:none}.toast:before{content:"✓";color:var(--success);font-weight:700}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}