@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--bg-primary:#f8fafc;--bg-secondary:#f1f5f9;--bg-card:#fff;--bg-card-hover:#fff;--bg-input:#fff;--border-color:#e2e8f0;--border-highlight:#c7d2fe;--primary:#4f46e5;--primary-hover:#4338ca;--primary-light:#e0e7ff;--primary-glow:#4f46e526;--accent-req:#7c3aed;--accent-req-light:#f5f3ff;--accent-arch:#0284c7;--accent-arch-light:#f0f9ff;--accent-prompt:#059669;--accent-prompt-light:#ecfdf5;--text-main:#0f172a;--text-body:#334155;--text-muted:#64748b;--text-dim:#94a3b8;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--shadow-sm:0 1px 3px 0 #0000000d, 0 1px 2px -1px #0000000d;--shadow-main:0 4px 20px -2px #0f172a0f, 0 2px 6px -1px #0f172a0a;--shadow-hover:0 12px 30px -4px #0f172a1f, 0 4px 12px -2px #0f172a0f;--transition:all .2s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-primary);color:var(--text-main);background-image:radial-gradient(at 0 0,#6366f10a 0,#0000 50%),radial-gradient(at 100% 0,#0ea5e90a 0,#0000 50%),radial-gradient(at 50% 100%,#10b98108 0,#0000 50%);background-attachment:fixed;max-width:100vw;min-height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6;overflow-x:hidden}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}code,pre,.font-mono{font-family:JetBrains Mono,monospace}.glass-panel{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-main);transition:var(--transition);max-width:100%}.btn{border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);white-space:nowrap;border:1px solid #0000;outline:none;justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-size:.875rem;font-weight:600;display:inline-flex}.btn-primary{color:#fff;background:linear-gradient(135deg,#4f46e5,#4338ca);box-shadow:0 4px 12px #4f46e540}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px #4f46e559}.btn-secondary{color:var(--text-body);box-shadow:var(--shadow-sm);background:#fff;border-color:#cbd5e1}.btn-secondary:hover{color:var(--text-main);background:#f8fafc;border-color:#94a3b8}.btn-req{color:#fff;background:linear-gradient(135deg,#7c3aed,#6d28d9);box-shadow:0 4px 12px #7c3aed40}.btn-arch{color:#fff;background:linear-gradient(135deg,#0284c7,#0369a1);box-shadow:0 4px 12px #0284c740}.btn-prompt{color:#fff;background:linear-gradient(135deg,#059669,#047857);box-shadow:0 4px 12px #05966940}.btn-sm{border-radius:var(--radius-sm);padding:6px 12px;font-size:.8rem}.badge{white-space:nowrap;border-radius:20px;align-items:center;gap:4px;padding:4px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.badge-purple{color:#6b21a8;background:#f3e8ff;border:1px solid #d8b4fe}.badge-cyan{color:#075985;background:#e0f2fe;border:1px solid #7dd3fc}.badge-emerald{color:#065f46;background:#d1fae5;border:1px solid #6ee7b7}.badge-amber{color:#92400e;background:#fef3c7;border:1px solid #fde68a}.input-field,.textarea-field{background:var(--bg-input);border-radius:var(--radius-md);width:100%;max-width:100%;color:var(--text-main);transition:var(--transition);border:1px solid #cbd5e1;padding:8px 12px;font-size:.875rem;box-shadow:0 1px 2px #00000008}.input-field:focus,.textarea-field:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);background:#fff;outline:none}.input-field::placeholder,.textarea-field::placeholder{color:var(--text-dim)}.markdown-preview{color:#1e293b;overflow-wrap:break-word;word-break:break-word;width:100%;max-width:100%;font-size:.925rem;line-height:1.75}.markdown-preview h1,.markdown-preview h2,.markdown-preview h3{color:#0f172a;letter-spacing:-.01em;word-break:break-word;margin-top:1.2em;margin-bottom:.5em;font-weight:700}.markdown-preview h1{border-bottom:2px solid #e2e8f0;padding-bottom:8px;font-size:1.4rem}.markdown-preview h2{font-size:1.2rem}.markdown-preview h3{font-size:1.05rem}.markdown-preview p{word-break:break-word;margin-bottom:.9em}.markdown-preview ul,.markdown-preview ol{margin-bottom:.9em;padding-left:1.4em}.markdown-preview table{border-collapse:collapse;width:100%;max-width:100%;box-shadow:var(--shadow-sm);word-break:break-word;border-radius:8px;margin:1em 0;display:block;overflow-x:auto}.markdown-preview th,.markdown-preview td{text-align:left;border:1px solid #e2e8f0;min-width:90px;padding:8px 12px}.markdown-preview th{color:#0f172a;background:#f1f5f9;font-weight:600}.markdown-preview tr:nth-child(2n){background:#f8fafc}.markdown-preview blockquote{border-left:4px solid var(--primary);color:#334155;background:#f0f4ff;border-radius:0 8px 8px 0;margin:1em 0;padding:10px 14px}.markdown-preview code{color:#4f46e5;word-break:break-all;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 6px;font-size:.85em}.markdown-preview pre{color:#f8fafc;white-space:pre-wrap;word-break:break-all;max-width:100%;box-shadow:var(--shadow-sm);background:#0f172a;border-radius:10px;margin:1em 0;padding:14px;overflow-x:auto}.markdown-preview pre code{color:#f8fafc;white-space:pre-wrap;word-break:break-all;background:0 0;border:none;padding:0}.spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.grid-responsive-2col{grid-template-columns:1.05fr .95fr;gap:24px;display:grid}.grid-responsive-2col-sm{grid-template-columns:1fr 1fr;gap:12px;display:grid}@media (width<=1024px){.grid-responsive-2col{grid-template-columns:1fr!important;gap:16px!important}}@media (width<=768px){html,body,#root{max-width:100vw!important;overflow-x:hidden!important}main{max-width:100vw!important;padding:0 10px 20px!important;overflow-x:hidden!important}.grid-responsive-2col-sm{grid-template-columns:1fr!important;gap:8px!important}.glass-panel{box-sizing:border-box!important;border-radius:12px!important;max-width:100%!important;padding:14px!important}h1{font-size:1.25rem!important}h2{font-size:1.1rem!important}h3{font-size:.975rem!important}.btn{padding:7px 12px;font-size:.8rem}.hide-on-mobile{display:none!important}.mobile-full-width{width:100%!important}.markdown-preview svg,.mermaid{overflow-x:auto;max-width:100%!important;height:auto!important}.markdown-preview pre{white-space:pre-wrap!important;word-break:break-all!important;padding:10px!important;font-size:.775rem!important}}