*{margin:0;padding:0;box-sizing:border-box}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;height:100%}h1,h2,h3,h4,h5,h6{line-height:1.2;margin-bottom:1rem}a{text-decoration:none;color:inherit}button{font-family:inherit;cursor:pointer}button:disabled{cursor:not-allowed}.theme-toggle-button{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;transition:all .2s}.theme-toggle-button:hover{background-color:var(--color-accent)}.theme-icon{position:absolute;width:20px;height:20px;color:var(--color-foreground);transition:all .3s}.theme-icon-light{transform:rotate(0) scale(1);opacity:1}.theme-icon-dark{transform:rotate(90deg) scale(0);opacity:0}.dark .theme-icon-light{transform:rotate(-90deg) scale(0);opacity:0}.dark .theme-icon-dark{transform:rotate(0) scale(1);opacity:1}:root{--radius: .625rem;--color-background: #ffffff;--color-foreground: #050505;--color-card: #ffffff;--color-card-foreground: #050505;--color-popover: #ffffff;--color-popover-foreground: #050505;--color-primary: #050505;--color-primary-foreground: #fbfbfb;--color-secondary: #f7f7f7;--color-secondary-foreground: #050505;--color-muted: #f7f7f7;--color-muted-foreground: #8e8e8e;--color-accent: #f7f7f7;--color-accent-foreground: #050505;--color-destructive: #ef4444;--color-border: #ebebeb;--color-input: #ebebeb;--color-ring: #b5b5b5}.dark{--color-background: #050505;--color-foreground: #fbfbfb;--color-card: #141414;--color-card-foreground: #fbfbfb;--color-popover: #141414;--color-popover-foreground: #fbfbfb;--color-primary: #fbfbfb;--color-primary-foreground: #050505;--color-secondary: #262626;--color-secondary-foreground: #fbfbfb;--color-muted: #262626;--color-muted-foreground: #b5b5b5;--color-accent: #262626;--color-accent-foreground: #fbfbfb;--color-destructive: #dc2626;--color-border: rgba(255, 255, 255, .1);--color-input: rgba(255, 255, 255, .15);--color-ring: #8e8e8e}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-background);color:var(--color-foreground);transition:background-color .3s,color .3s}.app{min-height:100vh;display:flex;flex-direction:column;background-color:var(--color-background)}.app-header{border-bottom:1px solid var(--color-border);background-color:var(--color-background);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-container{max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between}.header-left{display:flex;align-items:center;gap:1rem}.header-icon{width:32px;height:32px;color:var(--color-primary)}.header-text h1{font-size:1.5rem;font-weight:700;color:var(--color-foreground);margin-bottom:.25rem}.header-text p{font-size:.875rem;color:var(--color-muted-foreground)}.desktop-only{display:initial}.mobile-only{display:none}.header-right{display:flex;align-items:center;gap:1rem}.badge{display:inline-flex;align-items:center;padding:.25rem .75rem;font-size:.75rem;font-weight:500;border:1px solid var(--color-border);border-radius:var(--radius);background-color:var(--color-background);color:var(--color-foreground)}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;max-width:1200px;margin:1rem auto 2rem;padding:0 2rem}.card{background-color:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.5rem;transition:box-shadow .2s,transform .2s;cursor:default}.card:hover{box-shadow:0 10px 25px #0000000d;transform:translateY(-2px)}.card-header{display:flex;align-items:center;gap:1rem}.card-icon{width:32px;height:32px;color:var(--color-primary);flex-shrink:0}.card h3{font-size:1.125rem;font-weight:600;margin-bottom:0;color:var(--color-foreground)}.card-description{font-size:.875rem;line-height:1.5;color:var(--color-muted-foreground);display:block;margin-top:.75rem}.app-nav{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;justify-content:flex-end}.nav-tabs{display:flex;gap:2px;border-bottom:1px solid var(--color-border)}.nav-link{padding:.75rem 1.5rem;background:var(--color-card);border:1px solid var(--color-border);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;color:var(--color-muted-foreground);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;text-decoration:none;text-align:center;position:relative;top:1px}.nav-link:hover{color:var(--color-foreground);background-color:var(--color-accent)}.nav-link.active{background-color:var(--color-accent);color:var(--color-foreground);border-bottom:1px solid var(--color-accent)}.app-main{flex:1;max-width:1200px;width:100%;margin:0 auto;padding:2rem;background-color:var(--color-card);border:1px solid var(--color-border);border-top:none;border-radius:0 0 var(--radius) var(--radius)}.component-container{background-color:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);padding:2rem;margin-bottom:2rem}.component-header{margin-bottom:2rem}.component-header h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem;color:var(--color-foreground)}.component-header p{color:var(--color-muted-foreground)}.auth-section{display:flex;align-items:center;gap:1rem}.auth-info{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;background-color:var(--color-secondary);border-radius:var(--radius)}.auth-status{font-size:.875rem;color:var(--color-foreground)}.optional-auth{position:relative}.optional-auth summary{cursor:pointer;padding:.5rem 1rem;background-color:var(--color-secondary);border-radius:var(--radius);font-size:.875rem;color:var(--color-muted-foreground);-webkit-user-select:none;user-select:none;transition:background-color .2s}.optional-auth summary:hover{background-color:var(--color-accent);color:var(--color-foreground)}.optional-auth[open] .auth-buttons{position:absolute;top:calc(100% + .5rem);right:0;background-color:var(--color-popover);border:1px solid var(--color-border);border-radius:var(--radius);padding:.5rem;box-shadow:0 10px 25px #0000001a;display:flex;flex-direction:column;gap:.5rem;min-width:200px}.btn{padding:.75rem 1.5rem;border:1px solid var(--color-border);border-radius:var(--radius);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;background-color:var(--color-background);color:var(--color-foreground)}.btn:hover{background-color:var(--color-accent)}.btn-primary{background-color:var(--color-primary);color:var(--color-primary-foreground);border-color:var(--color-primary)}.btn-primary:hover{opacity:.9}.btn-secondary{background-color:var(--color-secondary);color:var(--color-secondary-foreground)}.btn-danger{background-color:var(--color-destructive);color:#fff;border-color:var(--color-destructive)}.disconnect-button{padding:.5rem 1rem;background-color:transparent;color:var(--color-destructive);border:1px solid var(--color-destructive);border-radius:var(--radius);font-size:.75rem;cursor:pointer;transition:all .2s}.disconnect-button:hover{background-color:var(--color-destructive);color:#fff}.icon-button{padding:.5rem;background-color:transparent;border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.icon-button:hover{background-color:var(--color-accent)}.icon-button svg{width:20px;height:20px}.icon-outline{stroke:var(--color-muted-foreground);fill:none}.icon-filled{stroke:var(--color-primary);fill:var(--color-primary)}.auth-icon{position:relative}.auth-icon summary{list-style:none}.auth-icon summary::-webkit-details-marker{display:none}.auth-icon[open] .auth-dropdown{position:absolute;top:calc(100% + .5rem);right:0;background-color:var(--color-popover);border:1px solid var(--color-border);border-radius:var(--radius);padding:.5rem;box-shadow:0 10px 25px #0000001a;display:flex;flex-direction:column;gap:.5rem;min-width:200px;z-index:1000}.input-group{margin-bottom:1.5rem}.input-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--color-foreground)}input[type=text],input[type=number],textarea{width:100%;padding:.75rem;background-color:var(--color-background);border:1px solid var(--color-input);border-radius:var(--radius);font-size:.875rem;color:var(--color-foreground);transition:border-color .2s}input:focus,textarea:focus{outline:none;border-color:var(--color-ring)}.file-drop-zone{border:2px dashed var(--color-border);border-radius:var(--radius);padding:3rem;text-align:center;cursor:pointer;transition:all .2s;background-color:var(--color-background)}.file-drop-zone:hover{border-color:var(--color-ring);background-color:var(--color-secondary)}.file-drop-zone.dragging{border-color:var(--color-primary);background-color:var(--color-accent)}.message{padding:1rem;border-radius:var(--radius);margin-bottom:1rem;font-size:.875rem}.error-message{background-color:#ef44441a;color:var(--color-destructive);border:1px solid rgba(239,68,68,.2)}.success-message{background-color:#22c55e1a;color:#22c55e;border:1px solid rgba(34,197,94,.2)}.event-id-display,.detail-row.clickable{padding:1rem;background-color:var(--color-secondary);border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;transition:all .2s}.event-id-display:hover,.detail-row.clickable:hover{background-color:var(--color-accent);transform:translateY(-1px)}.event-id-code,.full-hash,.full-event-id{font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:.75rem;word-break:break-all;color:var(--color-foreground)}.app-footer{border-top:1px solid var(--color-border);padding:2rem;text-align:center;background-color:var(--color-background)}.app-footer p{font-size:.875rem;color:var(--color-muted-foreground)}.timestamp-list{display:flex;flex-direction:column;gap:1rem}.timestamp-item{background-color:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);padding:1rem 1.5rem;transition:all .2s;cursor:pointer;display:flex;gap:1rem;align-items:flex-start}.timestamp-item:hover{box-shadow:0 4px 12px #0000000d}.timestamp-item.selected{background-color:var(--color-accent);border-color:var(--color-primary)}.timestamp-checkbox{flex-shrink:0;padding-top:.25rem}.timestamp-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer}.timestamp-content{flex:1;min-width:0}.bulk-actions-toolbar{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background-color:var(--color-secondary);border:1px solid var(--color-border);border-radius:var(--radius);margin-bottom:1rem;gap:1rem}.bulk-actions-left{display:flex;align-items:center;gap:.75rem}.bulk-actions-right{display:flex;gap:.5rem;flex-wrap:wrap}.select-all-button{background:none;border:none;padding:.25rem;cursor:pointer;display:flex;align-items:center;color:var(--color-foreground);transition:opacity .2s}.select-all-button:hover{opacity:.7}.selection-count{font-size:.875rem;color:var(--color-muted-foreground);font-weight:500}.bulk-action-btn{display:flex;align-items:center;gap:.25rem;padding:.5rem .75rem;font-size:.875rem}.bulk-action-btn:disabled{opacity:.5;cursor:not-allowed}.bulk-action-text{display:inline}@media (max-width: 768px){.bulk-action-text{display:none}.bulk-actions-toolbar,.bulk-action-btn{padding:.5rem}}@media (max-width: 768px){.desktop-only{display:none!important}.mobile-only{display:initial}.header-container{padding:.75rem 1rem}.header-text h1{font-size:1.5rem}.header-text p{font-size:.75rem}.header-icon{width:28px;height:28px}.feature-grid{grid-template-columns:1fr;padding:0;gap:0;margin:.5rem 0}.card{border-radius:0;border-left:none;border-right:none;border-top:none;padding:.75rem 1rem;cursor:pointer;margin:0}.card:first-child{border-top:1px solid var(--color-border)}.card:hover{box-shadow:none;transform:none}.card-header{display:flex;align-items:center;gap:.75rem}.card-icon{width:24px;height:24px}.card h3{font-size:1rem}.card-description{display:none;margin-top:.5rem;padding-left:calc(24px + .75rem)}.card.expanded .card-description{display:block;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.app-nav{padding:0 1rem;margin-top:.5rem;justify-content:flex-end}.nav-tabs{gap:1px;width:100%}.nav-link{flex:1;padding:.5rem .75rem;font-size:.8rem}.app-main{padding:0 1rem 1rem;background-color:var(--color-card);border:1px solid var(--color-border);border-top:none;border-left:none;border-right:none;border-radius:0}.component-container{padding:1rem;border-radius:0;border-left:none;border-right:none}}.loading{display:flex;align-items:center;justify-content:center;padding:2rem;color:var(--color-muted-foreground)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinning{animation:spin 1s linear infinite;display:inline-block}.empty-state{text-align:center;padding:3rem;color:var(--color-muted-foreground)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);max-width:600px;width:90%;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--color-border)}.close-button{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--color-muted-foreground);transition:color .2s}.close-button:hover{color:var(--color-foreground)}.modal-body{padding:1.5rem}