@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap";:root{--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--font-mono: "JetBrains Mono", monospace;--bg-app: #f9fafb;--bg-panel: #ffffff;--bg-element: #f3f4f6;--text-primary: #111827;--text-secondary: #4b5563;--text-tertiary: #9ca3af;--accent: #111827;--border: #e5e7eb;--radius: 8px;font-family:var(--font-sans);line-height:1.5;font-weight:400;color-scheme:light;color:var(--text-primary);background-color:var(--bg-app);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;flex-direction:column;min-height:100vh}#app{width:100%;height:100vh;display:flex;flex-direction:row;overflow:hidden}.sidebar{width:260px;background-color:var(--bg-panel);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:1.5rem;box-sizing:border-box}.sidebar .logo{margin-bottom:2rem;font-size:1.25rem;color:var(--text-primary)}.sidebar-nav{display:flex;flex-direction:column;gap:.5rem}.sidebar-item{padding:.75rem 1rem;border-radius:var(--radius);color:var(--text-secondary);cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s;display:flex;justify-content:space-between;align-items:center}.sidebar-item:hover{background-color:var(--bg-element);color:var(--text-primary)}.sidebar-item.selected{background-color:var(--bg-element);color:var(--text-primary);font-weight:600}.badge{font-size:.7rem;background-color:var(--bg-element);border:1px solid var(--border);padding:.1rem .4rem;border-radius:999px;color:var(--text-tertiary);text-transform:uppercase;font-weight:600}#main-content{flex:1;display:flex;flex-direction:column;overflow-y:auto;position:relative;height:100%}nav{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box}.logo{font-weight:700;font-size:1.1rem;letter-spacing:-.02em}.nav-links a{color:var(--text-secondary);text-decoration:none;font-size:.9rem;margin-left:1.5rem;transition:color .2s}.nav-links a:hover{color:var(--text-primary)}.container{max-width:1000px;margin:0 auto;width:100%;padding:2rem;box-sizing:border-box;flex:1;display:flex;flex-direction:column}.hero{text-align:center;padding:6rem 0 4rem}h1{font-size:3.5rem;line-height:1.1;font-weight:600;letter-spacing:-.03em;margin:0 0 1rem;background:linear-gradient(180deg,#111,#666);-webkit-background-clip:text;background-clip:text;color:transparent}p.subtitle{font-size:1.25rem;color:var(--text-secondary);max-width:600px;margin:0 auto 3rem;line-height:1.6}.input-wrapper{position:relative;max-width:400px;margin:0 auto;display:flex}input{background:var(--bg-element);border:1px solid var(--border);color:var(--text-primary);padding:.8rem 1rem;border-radius:var(--radius);width:100%;font-size:1rem;transition:border-color .2s;font-family:inherit}input:focus{outline:none;border-color:var(--text-tertiary)}button{background:var(--accent);color:#fff;border:1px solid transparent;padding:0 1.2rem;border-radius:var(--radius);font-weight:600;margin-left:.5rem;cursor:pointer;font-size:.95rem;transition:opacity .2s}button:hover{opacity:.9}button.secondary{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}button.secondary:hover{color:var(--text-primary);border-color:var(--text-tertiary)}.auth-btn{background-color:#f3f4f6;color:#1f2937;border:1px solid #e5e7eb;padding:.5rem 1rem;font-size:.875rem;font-weight:500;border-radius:9999px;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.auth-btn:hover{background-color:#e5e7eb;transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.top-right{position:absolute;top:1.5rem;right:2rem;z-index:10}.top-left{position:absolute;top:1.5rem;left:2rem;z-index:10}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:4rem}.card{background:var(--bg-element);border:1px solid var(--border);padding:2rem;border-radius:var(--radius);transition:transform .2s;text-align:left}.card h3{margin-top:0;font-size:1.1rem;font-weight:600;margin-bottom:.5rem}.card p{color:var(--text-secondary);font-size:.95rem;line-height:1.6;margin:0}footer{text-align:center;padding:3rem;border-top:1px solid var(--border);margin-top:auto;color:var(--text-tertiary);font-size:.85rem}.trace-view{text-align:left;max-width:800px;margin:0 auto}.header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;border-bottom:1px solid var(--border);padding-bottom:1rem}.meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem}.meta-item{background:var(--bg-panel);padding:1rem;border-radius:var(--radius);border:1px solid var(--border)}.meta-label{display:block;font-size:.8rem;color:var(--text-tertiary);margin-bottom:.25rem;text-transform:uppercase;letter-spacing:.05em}.meta-value{font-weight:500}.meta-value.mono{font-family:var(--font-mono);font-size:.9rem}.code-block{margin-bottom:2rem}.code-block h4{margin:0 0 .5rem;font-size:.9rem;color:var(--text-secondary);font-weight:500}pre{background:var(--bg-panel);padding:1.5rem;border-radius:var(--radius);border:1px solid var(--border);overflow-x:auto;font-family:var(--font-mono);font-size:.85rem;color:#374151;margin:0}.error-msg{color:#ef4444;text-align:center;margin-top:2rem}.trace-table{width:100%;border-collapse:collapse;margin-top:2rem;background:var(--bg-panel);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}.trace-table th{text-align:left;padding:1rem;background:var(--bg-element);color:var(--text-secondary);font-weight:500;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border)}.trace-table td{padding:1rem;border-bottom:1px solid var(--border);color:var(--text-primary);font-size:.9rem}.trace-table tr:last-child td{border-bottom:none}.trace-table tr{cursor:pointer;transition:background-color .2s}.trace-table tr:hover{background-color:var(--bg-element)}.user-info{display:flex;align-items:center;gap:1rem}.user-email{font-size:.9rem;color:var(--text-secondary)}.status-badge{display:inline-block;padding:.25rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:600;text-transform:uppercase}.status-success{background-color:#dcfce7;color:#166534}.status-error{background-color:#fee2e2;color:#991b1b}.trace-uuid{font-family:var(--font-mono);color:var(--text-tertiary);font-size:.8rem}