:root{--bg-primary:#0a0d14;--bg-secondary:#101522;--bg-card:#151b2d;--bg-panel:#182035;--border-color:#263352;--border-focus:#3b82f6;--text-main:#f1f5f9;--text-muted:#94a3b8;--text-dim:#64748b;--accent-blue:#3b82f6;--accent-purple:#8b5cf6;--accent-green:#10b981;--accent-amber:#f59e0b;--accent-red:#ef4444;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-main);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.5}.app-container{flex-direction:column;min-height:100vh;display:flex}.app-header{background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);z-index:50;justify-content:space-between;align-items:center;padding:.85rem 1.5rem;display:flex;position:sticky;top:0}.header-left{align-items:center;gap:.85rem;display:flex}.logo-icon{background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.75rem;display:flex}.logo-text h1{letter-spacing:-.02em;font-size:1.25rem;font-weight:700}.logo-text h1 span{color:var(--accent-blue)}.tagline{color:var(--text-muted);font-size:.75rem}.header-right{align-items:center;gap:1rem;display:flex}.provider-badge{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:20px;align-items:center;gap:.5rem;padding:.35rem .85rem;font-size:.8rem;font-weight:500;display:flex}.provider-dot{border-radius:50%;width:8px;height:8px}.dot-green{background-color:var(--accent-green);box-shadow:0 0 8px var(--accent-green)}.dot-amber{background-color:var(--accent-amber);box-shadow:0 0 8px var(--accent-amber)}.dot-blue{background-color:var(--accent-blue);box-shadow:0 0 8px var(--accent-blue)}.demo-banner{border-bottom:1px solid var(--border-color);color:#bfdbfe;background:linear-gradient(90deg,#1e1b4b,#172554);justify-content:space-between;align-items:center;padding:.6rem 1.5rem;font-size:.825rem;display:flex}.demo-banner strong{color:#60a5fa}.main-content{flex:1;grid-template-columns:1fr 1fr;gap:1.25rem;width:100%;max-width:1700px;margin:0 auto;padding:1.25rem 1.5rem;display:grid}@media (width<=1024px){.main-content{grid-template-columns:1fr}}.panel{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 4px 20px #0000004d}.panel-header{background-color:var(--bg-card);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:.75rem 1.25rem;display:flex}.panel-title{align-items:center;gap:.5rem;font-size:.95rem;font-weight:600;display:flex}.panel-actions{gap:.5rem;display:flex}.btn-secondary{background-color:var(--bg-panel);border:1px solid var(--border-color);color:var(--text-main);cursor:pointer;border-radius:6px;align-items:center;gap:.35rem;padding:.35rem .75rem;font-size:.775rem;font-weight:500;transition:all .15s;display:flex}.btn-secondary:hover{background-color:#1f293d;border-color:#3b82f6}.controls-bar{border-bottom:1px solid var(--border-color);background-color:#0d121e;flex-direction:column;gap:.75rem;padding:.85rem 1.25rem;display:flex}.control-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.control-group{align-items:center;gap:.5rem;display:flex}.control-label{color:var(--text-muted);font-size:.8rem;font-weight:500}.select-input{background-color:var(--bg-card);border:1px solid var(--border-color);color:var(--text-main);cursor:pointer;border-radius:6px;outline:none;padding:.4rem .75rem;font-size:.825rem}.select-input:focus{border-color:var(--border-focus)}.goal-pills{flex-wrap:wrap;gap:.4rem;display:flex}.goal-pill{background-color:var(--bg-card);border:1px solid var(--border-color);color:var(--text-muted);cursor:pointer;border-radius:16px;padding:.35rem .7rem;font-size:.75rem;font-weight:500;transition:all .15s}.goal-pill:hover{color:var(--text-main);border-color:#475569}.goal-pill.active{border-color:var(--accent-blue);color:#93c5fd;background:linear-gradient(135deg,#3b82f633,#8b5cf633);font-weight:600}.editor-container{background-color:#0b0e17;flex:1;min-height:400px;position:relative}.code-textarea{color:#e2e8f0;width:100%;height:100%;min-height:400px;font-family:var(--font-mono);resize:none;tab-size:4;background-color:#0000;border:none;outline:none;padding:1rem 1.25rem;font-size:.875rem;line-height:1.6}.code-textarea::placeholder{color:#475569}.code-display{color:#38bdf8;width:100%;height:100%;min-height:400px;font-family:var(--font-mono);white-space:pre;background-color:#0000;padding:1rem 1.25rem;font-size:.875rem;line-height:1.6;overflow:auto}.panel-footer{background-color:var(--bg-card);border-top:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:.85rem 1.25rem;display:flex}.char-count{color:var(--text-dim);font-size:.75rem}.btn-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#2563eb,#7c3aed);border:none;border-radius:8px;align-items:center;gap:.5rem;padding:.65rem 1.4rem;font-size:.875rem;font-weight:600;transition:all .2s;display:flex;box-shadow:0 4px 12px #2563eb59}.btn-primary:hover:not(:disabled){opacity:.95;transform:translateY(-1px);box-shadow:0 6px 16px #2563eb73}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.tabs-bar{background-color:var(--bg-card);border-bottom:1px solid var(--border-color);padding:0 1rem;display:flex}.tab-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;padding:.65rem 1rem;font-size:.825rem;font-weight:500;transition:all .15s}.tab-btn:hover{color:var(--text-main)}.tab-btn.active{color:var(--accent-blue);border-bottom-color:var(--accent-blue)}.explanation-container{flex-direction:column;gap:1.25rem;max-height:480px;padding:1.25rem;display:flex;overflow-y:auto}.section-box{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;padding:1rem}.section-box h4{align-items:center;gap:.4rem;margin-bottom:.6rem;font-size:.85rem;font-weight:600;display:flex}.bullet-list{flex-direction:column;gap:.5rem;list-style:none;display:flex}.bullet-list li{color:#cbd5e1;gap:.5rem;font-size:.825rem;line-height:1.5;display:flex}.bullet-list li:before{content:"▹";color:var(--accent-blue);font-weight:700}.empty-state{min-height:400px;color:var(--text-dim);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.85rem;padding:2rem;display:flex}.empty-icon{opacity:.4;font-size:3rem}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.meta-chip{color:var(--text-muted);gap:.5rem;font-size:.75rem;display:flex}