:root{--bg: #f7f7f8;--bg-elevated: #ffffff;--surface: #ffffff;--surface-strong: #f4f4f5;--surface-hover: #ececef;--border: #e4e4e7;--border-strong: #d4d4d8;--text: #18181b;--text-soft: #3f3f46;--text-muted: #71717a;--brand: #2f54eb;--brand-hover: #2443c4;--brand-text: #2443c4;--violet: #2f54eb;--violet-soft: #eef2ff;--violet-text: #2443c4;--cyan: #0284c7;--cyan-soft: #f0f9ff;--cyan-text: #0369a1;--amber: #d97706;--amber-soft: #fffbeb;--amber-text: #b45309;--green: #16a34a;--green-soft: #ecfdf3;--green-text: #15803d;--red: #dc2626;--red-soft: #fef2f2;--red-text: #b91c1c;--pink: #db2777;--gradient: var(--brand);--gradient-text: linear-gradient(var(--text), var(--text));--glow-violet: 0 0 0 3px rgba(47, 84, 235, .12);--glow-cyan: 0 0 0 3px rgba(2, 132, 199, .12);--layer-database: #d97706;--layer-backend: #4f46e5;--layer-frontend: #0891b2;--radius-sm: 6px;--radius: 8px;--radius-lg: 10px;--radius-xl: 14px;--shadow: 0 1px 2px rgba(16, 24, 40, .05);--shadow-pop: 0 12px 32px -8px rgba(16, 24, 40, .18);--font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;--ease: cubic-bezier(.22, 1, .36, 1)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit;color:inherit}h1,h2,h3,h4{margin:0;letter-spacing:-.01em;line-height:1.25;font-weight:600}button{cursor:pointer}p{margin:0}code,pre,.mono{font-family:var(--font-mono)}::selection{background:#c7d2fe}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#d4d4d8;border-radius:10px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:#a1a1aa;background-clip:padding-box}.gradient-text{color:var(--text)}.muted{color:var(--text-muted)}.soft{color:var(--text-soft)}@keyframes fade-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:scale(.92) translateY(14px)}60%{opacity:1;transform:scale(1.02) translateY(0)}to{transform:scale(1)}}@keyframes pulse-ring{0%{box-shadow:0 0 #2f54eb59}70%{box-shadow:0 0 0 8px #2f54eb00}to{box-shadow:0 0 #2f54eb00}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes blink{50%{opacity:0}}.animate-fade-up{animation:fade-up .5s var(--ease) both}.animate-pop{animation:pop-in .55s var(--ease) both}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.glass{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.glass-flat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-weight:500;font-size:13.5px;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow);transition:background .15s,border-color .15s,color .15s,opacity .15s}.btn:hover:not(:disabled){background:var(--surface-strong)}.btn:focus-visible{outline:2px solid var(--brand);outline-offset:1px}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.btn-primary{border-color:var(--brand);background:var(--brand);color:#fff}.btn.btn-primary:hover:not(:disabled){background:var(--brand-hover);border-color:var(--brand-hover)}.btn.btn-success{border-color:var(--green);background:var(--green);color:#fff}.btn.btn-success:hover:not(:disabled){background:var(--green-text);border-color:var(--green-text)}.btn.btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--text-soft)}.btn.btn-ghost:hover:not(:disabled){background:var(--surface-strong);color:var(--text)}.btn.btn-lg{height:42px;padding:0 20px;font-size:15px}.btn.btn-sm{height:30px;padding:0 10px;font-size:13px}.btn.btn-icon{width:32px;height:32px;padding:0}.btn.pulse{animation:pulse-ring 1.8s infinite}.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:500;background:var(--surface-strong);border:1px solid var(--border);color:var(--text-soft);white-space:nowrap}.badge.violet{background:var(--violet-soft);border-color:#c7d2fe;color:var(--violet-text)}.badge.cyan{background:var(--cyan-soft);border-color:#bae6fd;color:var(--cyan-text)}.badge.amber{background:var(--amber-soft);border-color:#fde68a;color:var(--amber-text)}.badge.green{background:var(--green-soft);border-color:#bbf7d0;color:var(--green-text)}.badge.red{background:var(--red-soft);border-color:#fecaca;color:var(--red-text)}.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}.badge .dot.live{animation:blink 1.2s infinite}.layer-database{--layer: var(--layer-database);--layer-soft: var(--amber-soft)}.layer-backend{--layer: var(--layer-backend);--layer-soft: var(--violet-soft)}.layer-frontend{--layer: var(--layer-frontend);--layer-soft: var(--cyan-soft)}.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text-muted)}.step-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.step-header h2{font-size:18px;font-weight:600;margin-top:4px}.step-header p{color:var(--text-muted);margin-top:4px;max-width:680px}.input,.textarea{width:100%;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:7px 10px;outline:none;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}.input::placeholder,.textarea::placeholder{color:#a1a1aa}.input:focus,.textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px #2f54eb26}.textarea{resize:vertical;min-height:72px;line-height:1.5}.spinner{width:14px;height:14px;border-radius:50%;border:2px solid #e4e4e7;border-top-color:var(--brand);animation:spin .8s linear infinite;flex:none}.skeleton{border-radius:var(--radius-sm);background:linear-gradient(90deg,#f4f4f5,#e9e9ec,#f4f4f5);background-size:200% 100%;animation:shimmer 1.6s linear infinite}.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:5px;border:1px solid var(--border-strong);border-bottom-width:2px;font-family:var(--font-mono);font-size:11px;color:var(--text-soft);background:var(--surface)}.empty-state{display:grid;place-items:center;gap:10px;padding:48px 24px;text-align:center;color:var(--text-muted)}.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-weight:600;font-size:11.5px;color:#fff;flex:none}