.status-indicator{position:fixed;top:20px;right:20px;z-index:1000}.status-compact{display:flex;align-items:center;gap:12px;cursor:pointer;padding:8px 12px 8px 8px;border-radius:20px;background:#ffffff1a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .2s ease}.status-compact:hover{background:#ffffff26}.status-dot{width:16px;height:16px;border-radius:50%;animation:pulse 2s infinite}.status-dot-blue{background:#3b82f6;box-shadow:0 0 #3b82f6b3}.status-dot-green{background:#10b981;box-shadow:0 0 #10b981b3}.status-dot-unknown{background:#9ca3af;box-shadow:0 0 #9ca3afb3}.build-time{font-size:12px;color:#ffffffe6;font-family:Courier New,monospace;white-space:nowrap}@keyframes pulse{0%{box-shadow:0 0 #3b82f6b3}70%{box-shadow:0 0 0 8px #3b82f600}to{box-shadow:0 0 #3b82f600}}.status-details{position:absolute;top:50px;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:12px;min-width:250px;animation:slideIn .2s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.status-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px;border-bottom:1px solid #f3f4f6}.status-row:last-child{border-bottom:none}.status-label{font-weight:600;color:#6b7280}.status-value{color:#111827;font-family:Courier New,monospace;display:flex;align-items:center;gap:4px}.instance-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700}.instance-blue{background:#dbeafe;color:#1e40af}.instance-green{background:#d1fae5;color:#065f46}.instance-unknown{background:#f3f4f6;color:#6b7280}.port-info{font-size:11px;color:#9ca3af}.status-value.status-ok{color:#10b981;font-weight:600}.status-value.status-unknown{color:#9ca3af}.status-value.status-blue{color:#3b82f6;font-weight:600}.status-value.status-green{color:#10b981;font-weight:600}.trace-list-view{padding:20px;max-width:1400px;margin:0 auto}.trace-list-header{margin-bottom:20px}.trace-list-header h1{margin:0 0 10px;font-size:24px;color:#333}.location-info{font-size:14px;color:#666}.location-label{font-weight:600;margin-right:8px}.location-path{font-family:Courier New,monospace;background:#f5f5f5;padding:4px 8px;border-radius:4px}.stats-bar{display:flex;gap:20px;padding:15px;background:#f9f9f9;border-radius:8px;margin-bottom:20px}.stat-item{display:flex;gap:8px;align-items:center}.stat-label{font-weight:600;font-size:14px}.stat-value{font-size:18px;font-weight:700}.stat-success .stat-value{color:#22c55e}.stat-warning .stat-value{color:#f59e0b}.stat-error .stat-value{color:#ef4444}.filter-controls{margin-bottom:20px;display:flex;align-items:center;gap:10px}.filter-controls label{font-weight:600;font-size:14px}.filter-controls select{padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.loading-state,.error-state,.empty-state{text-align:center;padding:60px 20px}.spinner{width:40px;height:40px;margin:0 auto 20px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{color:#ef4444;margin-bottom:20px}.error-state button{padding:10px 20px;background:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer}.error-state button:hover{background:#2980b9}.trace-table-container{overflow-x:auto;border-radius:8px;box-shadow:0 1px 3px #0000001a}.trace-table{width:100%;border-collapse:collapse;background:#fff}.trace-table th{background:#f9fafb;padding:12px 16px;text-align:left;font-weight:600;font-size:14px;color:#374151;border-bottom:2px solid #e5e7eb}.trace-table tbody tr{cursor:pointer;transition:background-color .15s ease}.trace-table tbody tr:hover{background-color:#f9fafb}.trace-table tbody tr.status-success{border-left:4px solid #22c55e}.trace-table tbody tr.status-warning{border-left:4px solid #f59e0b}.trace-table tbody tr.status-error{border-left:4px solid #ef4444}.trace-table tbody tr.status-unknown{border-left:4px solid #9ca3af}.trace-table td{padding:12px 16px;border-bottom:1px solid #e5e7eb;font-size:14px}.timestamp-cell{font-family:Courier New,monospace;color:#6b7280;white-space:nowrap}.flow-cell{font-weight:500;color:#111827}.correlation-cell{font-family:Courier New,monospace;color:#6b7280}.status-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-weight:600;font-size:12px}.status-badge.status-success{background:#d1fae5;color:#065f46}.status-badge.status-warning{background:#fef3c7;color:#92400e}.status-badge.status-error{background:#fee2e2;color:#991b1b}.status-badge.status-unknown{background:#e5e7eb;color:#6b7280}.size-cell{color:#9ca3af;font-size:13px}:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color-scheme:light dark;color:#111827eb;background-color:#f8fafc}body{margin:0;min-height:100vh}*{box-sizing:border-box}a{color:inherit}.app-shell{display:grid;grid-template-columns:320px 1fr;grid-template-rows:auto 1fr;height:100vh;max-height:100vh;overflow:hidden}.header{grid-column:1 / span 2;padding:16px 280px 16px 24px;border-bottom:1px solid #cbd5f5;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:space-between}.sidebar{border-right:1px solid #cbd5f5;padding:16px 0;overflow-y:auto;background:#e2e8f0}.sidebar h2{padding:0 20px;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#475569;margin:12px 0}.flow-item{padding:10px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:.95rem;color:#0f172a}.flow-item.active{background:#cbd5f5;font-weight:600}.flow-item:hover{background:#dbeafe}.trace-group{padding-left:20px;border-top:1px solid rgba(15,23,42,.05)}.trace-group h3{margin:0;padding:12px 0 8px 20px;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#64748b}.trace-item{padding:8px 20px 8px 36px;font-size:.85rem;cursor:pointer;color:#1e293b}.trace-item.active{background:#bfdbfe;font-weight:600}.trace-item:hover{background:#e0f2fe}.content{padding:16px 24px 24px;overflow-y:auto}.metadata-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:16px}.metadata-card{background:#fff;border-radius:10px;padding:12px;border:1px solid #e2e8f0;box-shadow:0 1px 2px #0f172a0d}.metadata-card h4{margin:0 0 4px;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#64748b}.metadata-card span{font-size:.95rem;color:#0f172a}.events-list{margin-top:24px;display:flex;flex-direction:column;gap:12px}.event-card{background:#fff;border-radius:10px;border:1px solid #e2e8f0;padding:16px;box-shadow:0 1px 2px #0f172a0d}.event-card header{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.event-card h3{margin:0;font-size:1rem;color:#1e293b}.event-card time{font-size:.8rem;color:#64748b}.event-body{margin-top:12px;padding:12px;background:#f8fafc;border-radius:8px;font-family:ui-monospace,SFMono-Regular,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.85rem;color:#0f172a;overflow-x:auto;line-height:1.4;max-height:240px}.event-body pre{margin:0}.raw-trace{margin-top:24px;background:#0f172a;color:#e2e8f0;padding:16px;border-radius:10px;max-height:320px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.85rem}.empty-state{margin:80px auto;text-align:center;color:#64748b}.empty-state h2{font-weight:500;margin-bottom:8px}.empty-state p{margin:0;font-size:.95rem}