@import "https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=JetBrains+Mono:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-base:#05080f;--bg-surface:#090d16;--bg-elevated:#101524;--bg-subtle:#161d2f;--border:#1b243b;--border-hover:#263354;--text-primary:#f0f4fc;--text-secondary:#94a3b8;--text-muted:#4e5d78;--accent:#0ea5e9;--accent-rgb:14, 165, 233;--accent-dim:#0ea5e914;--accent-mid:#0ea5e926;--accent-border:#0ea5e94d;--accent-glow:#0ea5e91f;--green:#10b981;--green-dim:#10b98114;--green-border:#10b98140;--green-glow:#10b9811f;--red:#f43f5e;--red-dim:#f43f5e14;--amber:#f59e0b;--amber-dim:#f59e0b14;--python-yellow:#ffde57}:root[data-theme=light]{--bg-base:#f8fafc;--bg-surface:#fff;--bg-elevated:#f1f5f9;--bg-subtle:#e2e8f0;--border:#cbd5e1;--border-hover:#94a3b8;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--accent:#0284c7;--accent-rgb:2, 132, 199;--accent-dim:#0284c714;--accent-mid:#0284c726;--accent-border:#0284c74d;--accent-glow:#0284c71f;--green:#059669;--green-dim:#05966914;--green-border:#05966940;--green-glow:#0596691f;--red:#e11d48;--red-dim:#e11d4814;--amber:#d97706;--amber-dim:#d9770614;--python-yellow:#ca8a04}:root{--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-xxl:48px;--font-mono:"JetBrains Mono", "Fira Code", monospace;--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;--radius-container:8px;--radius-interactive:6px;--fs-xs:11px;--fs-sm:12px;--fs-base:14px;--fs-lead:16px;--fs-h3:18px;--fs-h2:24px;--fs-h1:32px;--ease-out:cubic-bezier(.25, .46, .45, .94);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--duration-fast:.15s;--duration-normal:.2s;--duration-slow:.3s}html,body{height:100%;font-family:var(--font-sans);background:var(--bg-base);color:var(--text-primary);font-size:var(--fs-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}#root{border:none;flex-direction:column;width:100%;max-width:100%;min-height:100vh;margin:0;display:flex}code,pre{font-family:var(--font-mono)}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}.section-label,.btn-primary,.btn-accent,.pill,.status-badge,.logo-name,.logo-tag,.brand-sub,.kbd,.panel-title,.panel-subtitle,code,pre,kbd{font-family:var(--font-mono);letter-spacing:-.02em}h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);letter-spacing:-.03em;line-height:1.2}.layout{background-image:linear-gradient(#1b243b1a 1px,#0000 1px),linear-gradient(90deg,#1b243b1a 1px,#0000 1px);background-size:24px 24px;grid-template-columns:280px 1fr;width:100%;min-height:100vh;display:grid}.sidebar{background:var(--bg-surface);border-right:1px solid var(--border);flex-direction:column;height:100vh;display:flex;position:sticky;top:0;overflow:hidden}.sidebar-logo{align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-md);border-bottom:1px solid var(--border);background:linear-gradient(135deg, var(--bg-surface) 0%, rgba(var(--accent-rgb), .04) 100%);display:flex;position:relative;overflow:hidden}.sidebar-logo:after{content:"";bottom:0;left:var(--space-md);right:var(--space-md);background:linear-gradient(90deg, transparent, var(--accent-border), transparent);height:1px;position:absolute}.logo-icon-custom{background:var(--accent-dim);border:1.5px solid var(--accent-border);width:32px;height:32px;color:var(--accent);border-radius:var(--radius-interactive);flex-shrink:0;justify-content:center;align-items:center;display:flex;box-shadow:0 0 10px #0ea5e91a}.brand-group{flex-direction:column;line-height:1.2;display:flex}.brand-name{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-primary);letter-spacing:-.03em;font-weight:700}.brand-sub{color:var(--text-muted);letter-spacing:.1em;font-size:9px;font-weight:600}.sidebar-body{padding:var(--space-md) 0;gap:var(--space-md);flex-direction:column;flex:1;display:flex;overflow-y:auto}.sidebar-section{padding:0 var(--space-md);gap:var(--space-sm);flex-direction:column;display:flex}.section-label{font-size:var(--fs-xs);font-family:var(--font-mono);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;padding:var(--space-xs) 0;align-items:center;gap:var(--space-sm);font-weight:700;display:flex}.section-label:before{content:"";background:var(--accent);border-radius:50%;flex-shrink:0;width:3px;height:3px;display:inline-block}.health-grid{flex-direction:column;gap:6px;display:flex}.health-row{padding:var(--space-sm) 10px;border-radius:var(--radius-interactive);background:var(--bg-elevated);border:1px solid var(--border);transition:border-color var(--duration-fast) var(--ease-out);justify-content:space-between;align-items:center;display:flex}.health-row:hover{border-color:var(--border-hover)}.health-label{color:var(--text-secondary);font-size:11px;font-weight:500}.health-val{font-family:var(--font-mono);color:var(--text-primary);font-size:10px}.health-refresh-btn{color:var(--text-muted);cursor:pointer;padding:var(--space-xs);border-radius:var(--radius-interactive);transition:color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), transform var(--duration-normal) var(--ease-out);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.health-refresh-btn:hover{color:var(--accent);background:var(--accent-dim)}.health-refresh-btn:active{transform:rotate(180deg)}.pulse-dot{border-radius:50%;width:6px;height:6px;position:relative}.pulse-dot:after{content:"";opacity:0;border-radius:50%;animation:1.8s cubic-bezier(.215,.61,.355,1) infinite pulse-ring;position:absolute;inset:-3px}.pulse-green{background-color:var(--green)}.pulse-green:after{border:2px solid var(--green)}.pulse-red{background-color:var(--red)}.pulse-red:after{border:2px solid var(--red)}.pulse-amber{background-color:var(--amber)}.pulse-amber:after{border:2px solid var(--amber)}@keyframes pulse-ring{0%{opacity:0;transform:scale(.5)}50%{opacity:.5}to{opacity:0;transform:scale(1.6)}}@keyframes thinking-glow{0%{border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-dim)}50%{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-mid), 0 0 20px var(--accent-glow)}to{border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-dim)}}.prompt-textarea.thinking{animation:thinking-glow 2s var(--ease-out) infinite}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}.sidebar-divider{background:var(--border);height:1px;margin:4px 0}.create-form{flex-direction:column;gap:10px;display:flex}.field-input{background:var(--bg-elevated);border:1px solid var(--border);width:100%;color:var(--text-primary);font-family:var(--font-sans);border-radius:var(--radius-interactive);transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);outline:none;padding:10px 12px;font-size:12px}.field-input::placeholder{color:var(--text-muted)}.field-input:focus{border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-dim), 0 0 0 1px var(--accent-border)}.field-help-label{color:var(--text-muted);margin-top:4px;font-size:10px;font-weight:500}.template-cards{flex-direction:column;gap:6px;display:flex}.template-card{padding:var(--space-sm) 10px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-interactive);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);-webkit-user-select:none;user-select:none;outline:none}.template-card:hover{border-color:var(--border-hover);background:var(--bg-subtle);transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.template-card:active{transform:translateY(0)}.template-card.selected{border-color:var(--accent-border);background:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-border), 0 4px 16px var(--accent-glow)}.template-card-header{align-items:center;gap:8px;margin-bottom:3px;display:flex}.template-icon{font-size:12px}.template-card-title{font-family:var(--font-mono);color:var(--text-primary);font-size:11px;font-weight:600}.template-card-desc{color:var(--text-secondary);font-size:10px;line-height:1.4}.btn-primary,.btn-accent,.btn-success,.btn-danger{font-family:var(--font-mono);border-radius:var(--radius-interactive);cursor:pointer;transition:opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), background var(--duration-fast) var(--ease-out);border:none;outline:none;justify-content:center;align-items:center;gap:6px;font-weight:600;display:inline-flex;position:relative}.btn-primary:hover,.btn-accent:hover{opacity:.95;transform:translateY(-2px);box-shadow:0 4px 16px #0ea5e94d}.btn-success:hover{opacity:.95;transform:translateY(-2px);box-shadow:0 4px 16px #10b9814d}.btn-danger:hover{opacity:.95;transform:translateY(-2px);box-shadow:0 4px 12px #f43f5e4d}.btn-primary:active,.btn-accent:active,.btn-success:active,.btn-danger:active{box-shadow:none;transform:translateY(0)scale(.98)}.btn-primary:disabled,.btn-accent:disabled,.btn-success:disabled,.btn-danger:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;transform:none}.btn-primary{background:var(--accent);color:#fff;padding:var(--space-sm) var(--space-md);font-size:11px}.sidebar-warning-note{border-radius:var(--radius-interactive);background:var(--amber-dim);color:var(--amber);border:1px solid #f59e0b33;align-items:flex-start;gap:8px;margin-top:auto;padding:10px 12px;font-size:10px;line-height:1.4;display:flex}.search-container{margin-bottom:4px}.search-input{background-color:var(--bg-base);border-color:var(--border);padding:var(--space-sm) 10px;transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out)}.search-input:focus{border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-dim), 0 0 0 1px var(--accent-border)}.sort-toggle{background:var(--bg-base);border:1px solid var(--border);border-radius:5px;align-items:center;gap:2px;padding:2px;display:flex}.sort-btn{color:var(--text-secondary);font-family:var(--font-sans);letter-spacing:.03em;cursor:pointer;background:0 0;border:none;border-radius:3px;padding:3px 7px;font-size:9px;font-weight:600;transition:background .12s,color .12s}.sort-btn:hover{background:var(--bg-elevated);color:var(--text-primary)}.sort-btn.sort-active{background:var(--bg-elevated);color:var(--accent);border:1px solid var(--accent-border)}.session-list{flex-direction:column;gap:5px;max-height:250px;padding-right:2px;display:flex;overflow-y:auto}.session-item{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-interactive);padding:var(--space-sm) var(--space-md);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);outline:none}.session-item:hover{border-color:var(--border-hover);background:#19233a4d;transform:translate(2px)}.session-item.selected{border-color:var(--accent-border);background:var(--accent-dim);box-shadow:inset 2px 0 0 var(--accent)}.session-item-top{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.session-name{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:6px;font-size:12px;font-weight:600;display:flex;overflow:hidden}.status-dot{border-radius:50%;flex-shrink:0;width:5px;height:5px}.dot-active{background-color:var(--green)}.dot-completed{background-color:var(--accent)}.dot-failed{background-color:var(--red)}.session-meta{color:var(--text-secondary);align-items:center;gap:6px;font-size:10px;display:flex}.main{background:var(--bg-base);flex-direction:column;height:100vh;display:flex;overflow:hidden}.welcome{flex:1;grid-template-columns:1.2fr 1fr;justify-content:center;align-items:center;gap:40px;width:100%;max-width:1100px;margin:0 auto;padding:40px;display:grid}.welcome-inner{border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:var(--radius-container);background:#ffffff05;flex-direction:column;gap:20px;width:100%;max-width:520px;padding:32px;display:flex;box-shadow:0 10px 30px #00000040}.welcome-brand{flex-direction:column;gap:6px;display:flex}.welcome-eyebrow{font-size:10px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:600}.welcome-inner h1{font-size:var(--fs-h2);font-weight:800;font-family:var(--font-sans);color:var(--text-primary);letter-spacing:-.04em;line-height:1.15}.welcome-sub{font-size:var(--fs-base);color:var(--text-secondary);line-height:1.7}.welcome-steps{flex-direction:column;gap:24px;margin:8px 0;display:flex;position:relative}.welcome-step{align-items:flex-start;gap:16px;display:flex;position:relative}.welcome-step:not(:last-child):after{content:"";background:var(--border);width:2px;height:calc(100% - 16px);position:absolute;top:32px;left:14px}.step-num{background:var(--accent-dim);border:1.5px solid var(--accent-border);width:28px;height:28px;color:var(--accent);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-top:1px;display:flex}.step-text{color:var(--text-secondary);font-size:12px;line-height:1.5}.step-text strong{color:var(--text-primary)}.welcome-cta-btn{padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-interactive);align-self:flex-start;font-size:12px;font-weight:600}.welcome-preview-panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-container);flex-direction:column;width:100%;max-width:520px;height:250px;margin:0 auto;display:flex;overflow:hidden;box-shadow:0 10px 30px #00000040}.preview-header{background:var(--bg-elevated);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:8px 16px;display:flex}.preview-tabs{gap:8px;display:flex}.preview-tab{font-family:var(--font-mono);color:var(--text-secondary);border-radius:var(--radius-interactive);cursor:pointer;-webkit-user-select:none;user-select:none;padding:4px 8px;font-size:11px;transition:background .12s,color .12s}.preview-tab:hover{background:var(--bg-subtle);color:var(--text-primary)}.preview-tab.active{background:var(--bg-subtle);color:var(--accent)}.preview-badge{font-family:var(--font-mono);color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:4px;padding:2px 6px;font-size:10px}.preview-footer{background:var(--bg-elevated);border-top:1px solid var(--border);justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.preview-status{color:var(--text-secondary);align-items:center;gap:8px;font-size:11px;display:flex}.btn-success-mini{background:var(--green-dim);border:1px solid var(--green-border);color:var(--green);font-family:var(--font-mono);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-interactive);cursor:pointer;transition:opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);font-size:11px;font-weight:600}.btn-success-mini:hover{opacity:.95;box-shadow:0 2px 8px var(--green-glow);transform:translateY(-1px)}.btn-success-mini:active{box-shadow:none;transform:translateY(0)scale(.98)}.btn-success-mini:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;transform:none}.preview-diff-line{font-size:11px;display:block}@media (width<=1024px){.welcome{grid-template-columns:1fr;gap:32px;max-width:520px}}.playground{flex-direction:column;height:100%;display:flex}.pg-topbar{background:var(--bg-surface);border-bottom:1px solid var(--border);padding:var(--space-md) var(--space-lg);justify-content:space-between;align-items:center;display:flex;position:relative}.pg-topbar:after{content:"";background:linear-gradient(90deg, var(--accent) 0%, transparent 100%);width:60px;height:2px;position:absolute;bottom:-1px;left:0}.pg-breadcrumb{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px;font-weight:700}.pg-title{font-size:var(--fs-lead);font-weight:700;font-family:var(--font-sans);color:var(--text-primary);letter-spacing:-.03em;margin-bottom:var(--space-xs)}.pg-meta{align-items:center;gap:var(--space-sm);font-size:var(--fs-xs);color:var(--text-secondary);font-family:var(--font-mono);display:flex}.pg-meta-item code{background:var(--bg-elevated);border:1px solid var(--border);color:var(--accent);border-radius:3px;padding:1px 5px;font-size:10.5px}.copyable-badge{background:var(--bg-elevated);border:1px solid var(--border);cursor:pointer;border-radius:4px;align-items:center;gap:6px;padding:2px 6px;transition:border-color .15s,background .15s;display:inline-flex}.copyable-badge:hover{border-color:var(--border-hover);background:var(--bg-subtle)}.copy-icon{color:var(--text-muted);align-items:center;display:inline-flex}.copyable-badge:hover .copy-icon{color:var(--text-secondary)}.copy-icon svg.checkmark{color:var(--green)}.pg-workspace{flex:1;grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.pg-panel{flex-direction:column;height:100%;display:flex;overflow:hidden}.pg-left{border-right:1px solid var(--border);background:var(--bg-base)}.pg-right{background:var(--bg-surface)}.panel-header{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border);background:var(--bg-surface);position:relative}.pg-left .panel-header:before,.pg-right .panel-header:before{content:"";background:var(--accent);opacity:.6;width:2px;position:absolute;top:0;bottom:0;left:0}.panel-title{font-size:var(--fs-sm);font-family:var(--font-mono);color:var(--text-primary);text-transform:uppercase;letter-spacing:.05em;font-weight:700}.panel-subtitle{font-size:var(--fs-xs);font-family:var(--font-sans);color:var(--text-secondary);margin-top:var(--space-xs);letter-spacing:0;font-weight:400;line-height:1.5}.panel-body{padding:20px;overflow-y:auto}.prompt-form{flex-direction:column;height:100%;display:flex}.prompt-textarea{background:var(--bg-elevated);border:1px solid var(--border);width:100%;min-height:180px;color:var(--text-primary);font-family:var(--font-sans);font-size:var(--fs-base);padding:var(--space-md);border-radius:var(--radius-container);resize:none;transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);outline:none;flex:1;line-height:1.6}.prompt-textarea:focus{border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-dim), 0 0 16px var(--accent-glow)}.prompt-textarea:disabled{opacity:.65;cursor:not-allowed}.prompt-locked-banner{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:var(--radius-container);font-family:var(--font-mono);color:var(--text-secondary);border:1px solid var(--border);z-index:10;background:#05080fcc;justify-content:center;align-items:center;font-size:12px;font-weight:500;display:flex;position:absolute;inset:0}.prompt-suggestions{flex-direction:column;gap:6px;margin-top:12px;display:flex}.suggestions-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:10px;font-weight:600}.suggestions-chips{flex-wrap:wrap;gap:6px;display:flex}.suggestion-chip{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;border-radius:99px;padding:4px 10px;font-size:11px;transition:background .15s,border-color .15s,color .15s}.suggestion-chip:hover{border-color:var(--accent-border);background:var(--accent-dim);color:var(--text-primary)}.suggestion-chip:disabled{opacity:.5;cursor:not-allowed}.prompt-textarea-footer{justify-content:space-between;align-items:center;gap:12px;margin-top:14px;display:flex}.prompt-hint{color:var(--text-muted);font-size:11px}.prompt-hint .kbd{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);border-radius:3px;padding:1px 4px;font-size:10px}.btn-accent{background:linear-gradient(135deg, var(--accent) 0%, #0284c7 100%);color:#fff;padding:var(--space-sm) var(--space-md);box-shadow:0 2px 8px var(--accent-glow);font-size:12px}.pg-tasks-container{padding:16px}.task-list{flex-direction:column;gap:14px;display:flex}.task-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-container);transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-fast) var(--ease-out);overflow:hidden}.task-card:hover{border-color:var(--border-hover);box-shadow:0 4px 20px #0003}.task-card.expanded{box-shadow:0 2px 12px #00000026}.task-card-header{padding:var(--space-sm) var(--space-md);justify-content:space-between;align-items:center;gap:var(--space-md);transition:background var(--duration-fast) var(--ease-out);background:#19233a26;display:flex}.task-card-header:hover{background:#19233a40}.task-prompt-text{color:var(--text-primary);font-size:12px;font-weight:600}.task-header-right{flex-shrink:0;align-items:center;gap:8px;display:flex}.task-id{font-family:var(--font-mono);color:var(--text-muted);background:var(--bg-base);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-size:10px}.status-badge{text-transform:uppercase;border-radius:3px;padding:1px 6px;font-size:10px;font-weight:600}.deploy-progress-container{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-interactive);margin:12px 16px 4px;padding:12px}.deploy-progress-header{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:10px;font-weight:600;display:flex}.pipeline-status-badge{font-family:var(--font-mono);text-transform:uppercase;border-radius:3px;padding:1px 6px;font-size:9px}.pipeline-active{background:var(--accent-dim);color:var(--accent)}.pipeline-done{background:var(--green-dim);color:var(--green)}.pipeline-failed{background:var(--red-dim);color:var(--red)}.deploy-progress-steps{justify-content:space-between;align-items:center;padding:0 4px;display:flex}.progress-step-item{z-index:2;flex-direction:column;align-items:center;gap:4px;display:flex}.step-circle{background:var(--bg-base);border:1px solid var(--border);width:18px;height:18px;color:var(--text-muted);font-family:var(--font-mono);border-radius:50%;justify-content:center;align-items:center;font-size:10px;font-weight:700;transition:all .25s;display:flex}.step-label{color:var(--text-muted);font-size:9px;font-weight:500}.progress-step-item.done .step-circle{background:var(--green-dim);border-color:var(--green);color:var(--green)}.progress-step-item.done .step-label{color:var(--green)}.progress-step-item.active .step-circle{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);box-shadow:0 0 6px var(--accent-dim)}.progress-step-item.active .step-label{color:var(--accent)}.progress-step-item.failed .step-circle{background:var(--red-dim);border-color:var(--red);color:var(--red)}.progress-step-item.failed .step-label{color:var(--red)}.step-circle .spinning-dot{background-color:var(--accent);border-radius:50%;width:6px;height:6px;animation:1s ease-in-out infinite pulse-glow}.step-connector{background:var(--border);z-index:1;flex:1;height:2px;margin:-12px -8px 0;transition:background .25s}.step-connector.active{background:var(--accent-border)}.diff-viewer-wrapper{flex-direction:column;display:flex}.diff-container{flex-direction:column;gap:10px;padding:12px 16px;display:flex}.diff-file{border:1px solid var(--border);border-radius:var(--radius-interactive);background:var(--bg-surface);overflow:hidden}.diff-file-header{background:var(--bg-elevated);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.diff-file.collapsed .diff-file-header{border-bottom:none}.collapse-arrow{color:var(--text-muted);width:12px;margin-right:4px;font-size:8px;transition:transform .15s;display:inline-block}.diff-file-path{font-family:var(--font-mono);color:var(--text-primary);align-items:center;font-size:11px;display:flex}.diff-action-tag{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;border-radius:3px;padding:2px 6px;font-size:9px;font-weight:700}.diff-act-create{background:var(--green-dim);color:var(--green);border:1px solid var(--green-border)}.diff-act-delete{background:var(--red-dim);color:var(--red)}.diff-act-update{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-border)}.diff-code{font-family:var(--font-mono);background:var(--bg-base);color:var(--text-secondary);margin:0;padding:12px;font-size:11.5px;line-height:1.65;overflow-x:auto}.diff-line-add{color:#22c55e;background:#22c55e0d;margin:0 -12px;padding:0 4px 0 16px;display:block}.diff-line-del{color:#f43f5e;background:#f43f5e0d;margin:0 -12px;padding:0 4px 0 16px;display:block}.diff-line-ctx{padding:0 4px 0 16px;display:block}.diff-sign{width:12px;color:var(--text-muted);-webkit-user-select:none;user-select:none;font-weight:600;display:inline-block}.infra-block{border:1px solid var(--border);border-radius:var(--radius-interactive);background:var(--bg-surface);overflow:hidden}.infra-block.collapsed .infra-header{border-bottom:none}.infra-header{background:var(--bg-elevated);font-family:var(--font-mono);color:var(--text-primary);border-bottom:1px solid var(--border);align-items:center;padding:8px 12px;font-size:11px;font-weight:600;display:flex}.infra-code{font-family:var(--font-mono);background:var(--bg-base);color:var(--text-secondary);margin:0;padding:12px;font-size:11.5px;line-height:1.65;overflow-x:auto}.infra-line{display:block}.hl-comment{color:#4e5d78;font-style:italic}.hl-string{color:#38bdf8}.hl-keyword{color:#f43f5e;font-weight:600}.hl-number{color:#f59e0b}.hl-function{color:#10b981}.hl-type{color:#a78bfa}.diff-lang-badge{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#a78bfa;background:#a78bfa1f;border:1px solid #a78bfa40;border-radius:3px;align-items:center;margin-left:6px;padding:1px 5px;font-size:9px;font-weight:700;display:inline-flex}.task-actions{border-top:1px solid var(--border);background:var(--bg-surface);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.task-actions-buttons{gap:8px;display:flex}.btn-success{background:var(--green);color:#fff;padding:6px 12px;font-size:11px}.btn-danger{color:var(--red);background:#f43f5e26;border:1px solid #f43f5e40;padding:6px 12px;font-size:11px}.empty-tasks{background:var(--bg-surface);border:1px dashed var(--border);border-radius:var(--radius-container);padding:var(--space-xxl) var(--space-lg);text-align:center;color:var(--text-secondary);align-items:center;gap:var(--space-md);flex-direction:column;display:flex}.empty-tasks-icon{background:var(--accent-dim);border:1.5px solid var(--accent-border);width:48px;height:48px;color:var(--accent);margin-bottom:var(--space-xs);border-radius:50%;justify-content:center;align-items:center;display:flex}.empty-tasks-title{font-family:var(--font-sans);font-size:var(--fs-lead);color:var(--text-primary);letter-spacing:-.02em;font-weight:700}.empty-tasks-desc{font-size:var(--fs-sm);color:var(--text-secondary);max-width:280px;line-height:1.6}.empty-tasks-steps{gap:var(--space-xs);margin-top:var(--space-xs);text-align:left;flex-direction:column;width:100%;max-width:280px;display:flex}.empty-tasks-step{align-items:center;gap:var(--space-sm);font-size:var(--fs-xs);color:var(--text-muted);font-family:var(--font-mono);display:flex}.empty-tasks-step:before{content:"→";color:var(--accent);flex-shrink:0;font-size:10px}.empty-text{font-size:var(--fs-xs);color:var(--text-muted);text-align:center;padding:var(--space-sm) 0}.center-loader{justify-content:center;align-items:center;gap:var(--space-md);height:100%;color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--fs-sm);flex-direction:column;font-weight:500;display:flex}.center-loader-label{align-items:center;gap:var(--space-sm);display:flex}@keyframes spin{to{transform:rotate(360deg)}}.spinning{animation:1s linear infinite spin;display:inline-block}.connection-status{font-family:var(--font-mono);font-size:10px}.status-connected{color:var(--green);align-items:center;gap:6px;font-weight:600;display:inline-flex}.status-disconnected{color:var(--amber);align-items:center;gap:6px;font-weight:600;display:inline-flex}.status-connected .status-dot{background-color:var(--green);box-shadow:0 0 6px var(--green)}.status-disconnected .status-dot{background-color:var(--amber);box-shadow:0 0 6px var(--amber)}.visually-hidden{clip:rect(0, 0, 0, 0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}.skip-link{background:var(--accent);color:#fff;border-radius:var(--radius-interactive);z-index:9999;font-family:var(--font-mono);padding:8px 16px;font-size:11px;font-weight:600;text-decoration:none;transition:top .2s;position:absolute;top:-40px;left:20px}.skip-link:focus{top:10px}button:focus-visible,input:focus-visible,textarea:focus-visible,.session-item:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.error-banner{border-bottom:2px solid var(--red);color:var(--red);padding:10px var(--space-lg);font-family:var(--font-mono);font-size:var(--fs-xs);justify-content:space-between;align-items:center;gap:var(--space-md);z-index:1000;animation:banner-slide-in .2s var(--ease-out);background:linear-gradient(135deg,#f43f5e14 0%,#f43f5e0a 100%);font-weight:600;display:flex}@keyframes banner-slide-in{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.error-banner button{color:var(--red);cursor:pointer;background:0 0;border:none;border-radius:3px;align-items:center;padding:4px;display:flex}.error-banner button:hover{background:#f43f5e1a}.bento-grid{gap:var(--space-xs);margin-top:var(--space-xs);grid-template-columns:1.2fr .8fr;display:grid}.bento-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-interactive);min-height:52px;transition:border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);flex-direction:column;justify-content:space-between;padding:10px 12px;display:flex}.bento-card:hover{border-color:var(--border-hover);background-color:var(--bg-subtle);transform:translateY(-1px);box-shadow:0 4px 10px #0003}.bento-api{grid-column:span 2}.bento-db{grid-column:span 1}.bento-stat{text-align:center;background:linear-gradient(135deg, var(--bg-elevated) 0%, rgba(var(--accent-rgb), .03) 100%);grid-column:span 1;justify-content:center;align-items:center}.bento-host{flex-direction:row;grid-column:span 2;justify-content:space-between;align-items:center}.bento-label{font-family:var(--font-mono);color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px;font-size:8px;font-weight:700}.bento-value-row{align-items:center;gap:var(--space-sm);display:flex}.bento-val{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-primary);letter-spacing:-.01em;font-weight:700}.bento-number{font-family:var(--font-mono);font-size:var(--fs-h3);color:var(--accent);font-weight:800;line-height:1}.bento-tag{font-family:var(--font-mono);color:var(--green);background:var(--green-dim);border:1px solid var(--green-border);border-radius:var(--radius-interactive);padding:1px 5px;font-size:9px;font-weight:700}.spec-sheet{border-radius:var(--radius-interactive);margin-top:var(--space-lg);color:#332d24;background-color:#f7f4eb;border:1px solid #332d24;padding:14px 16px;position:relative;box-shadow:0 6px 18px #00000040}.spec-sheet:before{content:"";pointer-events:none;border-radius:inherit;background-image:radial-gradient(#0000000d 1px,#0000 0);background-size:8px 8px;position:absolute;inset:0}.spec-sheet-header{border-bottom:1.5px solid #332d24;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:6px;display:flex}.spec-sheet-title{font-family:var(--font-mono);letter-spacing:.06em;color:#2b251e;font-size:9px;font-weight:800}.spec-sheet-serial{font-family:var(--font-mono);color:#7a6e5d;font-size:8px;font-weight:700}.spec-sheet-grid{grid-template-columns:1fr 1fr;gap:8px 12px;display:grid}.spec-item{flex-direction:column;display:flex}.spec-item .spec-label{font-family:var(--font-mono);color:#7a6e5d;letter-spacing:.04em;margin-bottom:1px;font-size:8px;font-weight:700}.spec-item .spec-value{font-family:var(--font-sans);color:#2b251e;font-size:11px;font-weight:700}.spec-sheet-footer{text-align:right;border-top:1px dashed #cfc8b8;margin-top:10px;padding-top:6px}.spec-stamp{font-family:var(--font-mono);color:#7a6e5d;letter-spacing:.05em;font-size:8px;font-weight:800}.tech-icon{transition:transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out)}button:hover .tech-icon,.template-card:hover .tech-icon,.bento-card:hover .tech-icon{color:var(--accent);transform:scale(1.1)}.tech-icon.duotone{opacity:.9}.session-item:hover{background:linear-gradient(90deg, var(--bg-subtle) 0%, rgba(var(--accent-rgb), .03) 100%)}.template-card:hover{background:linear-gradient(135deg, var(--bg-subtle) 0%, rgba(var(--accent-rgb), .02) 100%)}.field-group{margin-bottom:var(--space-xs);flex-direction:column;gap:4px;display:flex}.field-label{font-family:var(--font-mono);color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;font-size:8px;font-weight:700}.field-helper{color:var(--text-muted);margin-top:1px;font-size:9px}.prompt-textarea{resize:vertical}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}.field-error{animation:shake .4s var(--ease-out);border-color:var(--red)!important}.pulsing-badge-dot{border-radius:50%;width:6px;height:6px;display:inline-block;position:relative}.pulsing-badge-dot:after{content:"";animation:badge-pulse-ring 1.8s var(--ease-out) infinite;opacity:0;border-radius:50%;position:absolute;inset:-2.5px}@keyframes badge-pulse-ring{0%{opacity:.8;transform:scale(.5)}to{opacity:0;transform:scale(2)}}.pulsing-badge-dot.blue{background-color:var(--accent)}.pulsing-badge-dot.blue:after{border:1.5px solid var(--accent)}.pulsing-badge-dot.amber{background-color:var(--amber)}.pulsing-badge-dot.amber:after{border:1.5px solid var(--amber)}.pill-blue{color:var(--accent);background:#0ea5e914;border:1px solid #0ea5e933}.pill-green{color:var(--green);background:#10b98114;border:1px solid #10b98133}.pill-red{color:var(--red);background:#f43f5e14;border:1px solid #f43f5e33}.pill-amber{color:var(--amber);background:#f59e0b14;border:1px solid #f59e0b33}.status-pending{color:var(--amber);background:#f59e0b0f;border:1px solid #f59e0b26}.status-processing{color:var(--accent);background:#0ea5e90f;border:1px solid #0ea5e926}.status-completed{color:var(--green);background:#10b9810f;border:1px solid #10b98126}.status-failed{color:var(--red);background:#f43f5e0f;border:1px solid #f43f5e26}.diff-line-container{transition:background-color var(--duration-fast) var(--ease-out);font-family:var(--font-mono);font-variant-ligatures:normal;align-items:stretch;font-size:11.5px;line-height:1.6;display:flex}.diff-line-container:hover{background-color:#ffffff05!important}.diff-line-num{text-align:right;width:32px;padding-right:var(--space-sm);color:var(--text-muted);-webkit-user-select:none;user-select:none;border-right:1px solid var(--border);opacity:.65}.diff-line-content{padding-left:var(--space-sm);white-space:pre-wrap;word-break:break-all;flex:1}.copy-code-btn{border:1px solid var(--border);color:var(--text-muted);font-family:var(--font-mono);border-radius:var(--radius-interactive);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);background:0 0;outline:none;padding:3px 8px;font-size:8px;font-weight:700}.copy-code-btn:hover{border-color:var(--accent-border);color:var(--accent);background:var(--accent-dim);transform:scale(1.05)}.copy-code-btn.copied{border-color:var(--green-border);color:var(--green);background:var(--green-dim)}.mobile-header{background:var(--bg-surface);border-bottom:1px solid var(--border);height:48px;padding:0 var(--space-md);align-items:center;gap:var(--space-md);z-index:1500;display:none;position:sticky;top:0}.hamburger-btn{color:var(--text-primary);cursor:pointer;border-radius:var(--radius-interactive);width:32px;height:32px;transition:background-color var(--duration-fast) var(--ease-out);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.hamburger-btn:hover{background-color:var(--bg-elevated)}.mobile-title{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-primary);letter-spacing:-.01em;font-weight:700}.sidebar-overlay-backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1900;background:#0009;position:fixed;inset:0}button,select,input,a{min-height:32px}@media (width<=768px){.layout{grid-template-columns:1fr;padding-top:0}.sidebar{z-index:2000;width:280px;transition:left var(--duration-normal) var(--ease-out);position:fixed;top:0;bottom:0;left:-280px;box-shadow:6px 0 24px #0006}.layout.sidebar-open .sidebar{left:0}.mobile-header{display:flex}.health-refresh-btn,.sort-btn,.copy-code-btn,.hamburger-btn,.btn-primary,.btn-accent,.btn-success,.btn-danger{min-height:44px;padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.field-input,.prompt-textarea{font-size:var(--fs-base)}}.skeleton-list{gap:var(--space-sm);padding:var(--space-xs);flex-direction:column;display:flex}.skeleton-item{background:linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-subtle) 50%, var(--bg-elevated) 75%);border-radius:var(--radius-interactive);border:1px solid var(--border);background-size:200% 100%;height:44px;animation:1.6s linear infinite shimmer-load}@keyframes shimmer-load{0%{background-position:-200% 0}to{background-position:200% 0}}.prompt-chips-container{margin-top:var(--space-md);margin-bottom:var(--space-md);gap:var(--space-sm);flex-direction:column;display:flex}.chips-label{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}.prompt-chips{gap:var(--space-sm);flex-wrap:wrap;display:flex}.prompt-chip{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--fs-xs);border-radius:var(--radius-interactive);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);white-space:nowrap;justify-content:center;align-items:center;padding:6px 12px;display:inline-flex;min-height:28px!important}.prompt-chip:hover{background:var(--bg-subtle);border-color:var(--accent-border);color:var(--accent);box-shadow:0 2px 8px var(--accent-dim);transform:translateY(-1px)}.prompt-chip:active{transform:translateY(0)}.prompt-chip:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}