@import"https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap";:root{--bg: #020617;--surface: #0F172A;--surface-2: #1E293B;--border: #1E293B;--text: #F8FAFC;--text-secondary: #94A3B8;--text-muted: #64748B;--accent: #22C55E;--accent-hover: #16A34A;--danger: #EF4444;--danger-hover: #DC2626;--warning: #F59E0B;--font-sans: "Fira Sans", system-ui, -apple-system, sans-serif;--font-mono: "Fira Code", monospace;--radius: .5rem;--radius-lg: .75rem;--shadow: 0 1px 3px rgba(0,0,0,.3);--scrollbar: #1E293B;--scrollbar-hover: #334155}[data-theme=light]{--bg: #F8FAFC;--surface: #FFFFFF;--surface-2: #F1F5F9;--border: #E2E8F0;--text: #0F172A;--text-secondary: #475569;--text-muted: #94A3B8;--accent: #16A34A;--accent-hover: #15803D;--danger: #DC2626;--danger-hover: #B91C1C;--warning: #D97706;--shadow: 0 1px 3px rgba(0,0,0,.08);--scrollbar: #CBD5E1;--scrollbar-hover: #94A3B8}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer;border:none;outline:none}input,textarea{font-family:var(--font-sans);outline:none}a{color:var(--accent);text-decoration:none}.app{height:100vh;max-width:1280px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;padding:1.5rem}.header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}.header-left{display:flex;align-items:center;gap:.75rem}.header-left .logo{width:2rem;height:2rem;color:var(--accent)}.header h1{font-size:1.25rem;font-weight:600;letter-spacing:-.01em}.header .subtitle{font-size:.8rem;color:var(--text-secondary)}.layout{flex:1;overflow:hidden;display:grid;grid-template-columns:340px 1fr;gap:1.5rem;min-height:0}.sidebar{display:flex;flex-direction:column;gap:1rem;overflow-y:auto}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:var(--shadow)}.main-content>.card{display:flex;flex-direction:column;min-height:0;flex:1}.card-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin-bottom:1rem}.form-group{margin-bottom:.875rem}.form-group label{display:block;font-size:.75rem;font-weight:500;color:var(--text-secondary);margin-bottom:.375rem}.form-group input,.form-group textarea{width:100%;padding:.5rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem;color:var(--text);transition:border-color .2s}.form-group input:focus,.form-group textarea:focus{border-color:var(--accent)}.form-group textarea{resize:vertical;min-height:50px}.field-row{display:flex;gap:.375rem;margin-bottom:.375rem;align-items:center}.field-row input{flex:1;font-size:.8rem;padding:.375rem .5rem}.btn{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;border-radius:var(--radius);font-size:.8rem;font-weight:500;transition:all .15s;white-space:nowrap}.btn svg{width:1rem;height:1rem}.btn-primary{background:var(--accent);color:#020617;width:100%;justify-content:center;font-weight:600}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-sm{padding:.3rem .6rem;font-size:.75rem}.btn-ghost{background:transparent;color:var(--text-secondary);padding:.3rem;border-radius:var(--radius)}.btn-ghost:hover{color:var(--text);background:var(--surface-2)}.btn-danger{background:transparent;color:var(--danger);border:1px solid transparent}.btn-danger:hover{background:#ef44441a;border-color:var(--danger)}.btn-warning{background:transparent;color:var(--warning);border:1px solid transparent}.btn-warning:hover{background:#f59e0b1a;border-color:var(--warning)}.project-list{display:flex;flex-direction:column;gap:.25rem}.project-item{padding:.625rem .75rem;border-radius:var(--radius);cursor:pointer;font-size:.85rem;transition:all .15s;border:1px solid transparent;display:flex;justify-content:space-between;align-items:center}.project-item:hover{background:var(--surface-2);border-color:var(--border)}.project-item.active{background:#22c55e1a;border-color:var(--accent)}.project-item .name{display:flex;align-items:center;gap:.5rem}.project-item .name svg{width:1rem;height:1rem;color:var(--accent)}.project-item .meta{display:flex;align-items:center;gap:.5rem;font-size:.7rem;color:var(--text-muted);font-family:var(--font-mono)}.project-item .archived-badge{font-size:.6rem;padding:.1rem .35rem;border-radius:1rem;background:var(--surface-2);color:var(--text-muted);font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.05em}.project-empty{text-align:center;padding:2rem 1rem;color:var(--text-muted);font-size:.85rem}.main-content{overflow:hidden;display:flex;flex-direction:column;min-height:0}.main-content>.placeholder{flex:0 1 auto}.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5rem 2rem;color:var(--text-muted);text-align:center;gap:.75rem}.placeholder svg{width:3rem;height:3rem;color:var(--surface-2)}.placeholder h3{font-size:1rem;font-weight:500;color:var(--text-secondary)}.placeholder p{font-size:.85rem;max-width:320px}.records-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}.records-header-left{display:flex;align-items:center;gap:.75rem}.records-header-left .badge{background:var(--surface-2);color:var(--text-secondary);padding:.1rem .5rem;border-radius:1rem;font-size:.75rem;font-family:var(--font-mono)}.records-header-right{display:flex;align-items:center;gap:.5rem}.project-actions{display:flex;gap:.375rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border)}.project-info{display:grid;grid-template-columns:auto 1fr;gap:.25rem .75rem;font-size:.8rem;margin-bottom:.75rem;padding:.75rem;background:var(--bg);border-radius:var(--radius);flex-shrink:0}.project-info dt{color:var(--text-muted)}.project-info dd{color:var(--text-secondary);font-family:var(--font-mono)}.project-info dd.url{font-family:var(--font-mono);font-size:.75rem;word-break:break-all}.records-table-wrapper{overflow:auto;border:1px solid var(--border);border-radius:var(--radius);flex:1;min-height:0}.records-table-wrapper::-webkit-scrollbar{width:8px;height:8px}.records-table-wrapper::-webkit-scrollbar-track{background:transparent}.records-table-wrapper::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:4px}.records-table-wrapper::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-hover)}.records-table{width:100%;border-collapse:collapse;font-size:.85rem}.records-table th{text-align:left;font-size:.7rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;padding:.5rem .75rem;background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap}.records-table td{padding:.5rem .75rem;border-bottom:1px solid var(--border);vertical-align:top}.records-table tr:last-child td{border-bottom:none}.records-table tr:hover td{background:#ffffff05}.records-table .payload-cell{max-width:240px;overflow-x:auto;white-space:pre-wrap;font-family:var(--font-mono);font-size:.75rem;word-break:break-word}.records-table .time-cell{white-space:nowrap;font-size:.75rem;color:var(--text-muted);font-family:var(--font-mono)}.loading{text-align:center;padding:3rem;color:var(--text-muted);font-size:.85rem}.empty-records{text-align:center;padding:3rem 1rem;color:var(--text-muted);font-size:.85rem}.empty-records .hint{font-family:var(--font-mono);font-size:.75rem;color:var(--surface-2);margin-top:.5rem}.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;display:flex;flex-direction:column;gap:.5rem;z-index:100;pointer-events:none}.toast{pointer-events:auto;display:flex;align-items:center;gap:.5rem;padding:.625rem 1rem;border-radius:var(--radius);font-size:.85rem;font-weight:500;animation:slideUp .2s ease;box-shadow:0 4px 12px #0006;max-width:380px}.toast svg{width:1rem;height:1rem;flex-shrink:0}.toast.success{background:#22c55e26;color:var(--accent);border:1px solid rgba(34,197,94,.3)}.toast.error{background:#ef444426;color:var(--danger);border:1px solid rgba(239,68,68,.3)}@keyframes slideUp{0%{transform:translateY(.5rem);opacity:0}to{transform:translateY(0);opacity:1}}.form-error{font-size:.75rem;color:var(--danger);margin-top:.375rem}.archived-banner{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);border-radius:var(--radius);font-size:.8rem;color:var(--warning);margin-bottom:.75rem;flex-shrink:0}.archived-banner svg{width:1rem;height:1rem}.modal-overlay{position:fixed;inset:0;background:#020617b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem}.modal-content{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:1.25rem;box-shadow:0 20px 60px #00000080}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.modal-header .card-title{margin-bottom:0}.col-filter{position:relative;display:inline-flex}.col-filter-btn{display:inline-flex;align-items:center;gap:.35rem;padding:0;background:none;color:inherit;font:inherit;cursor:pointer;border:none;white-space:nowrap;position:relative}.col-filter-btn.active{color:var(--accent)}.col-filter-label{font-size:inherit}.col-filter-icon{display:flex;align-items:center;opacity:.4;transition:opacity .15s}.col-filter-btn:hover .col-filter-icon,.col-filter-btn.active .col-filter-icon{opacity:1}.col-filter-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);position:absolute;top:-2px;right:-6px}.col-filter-dropdown{position:absolute;top:calc(100% + 4px);left:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px #0006;z-index:50;min-width:220px;padding:.375rem;animation:fadeIn .12s ease}.col-filter-search{display:flex;align-items:center;gap:.375rem;padding:.375rem .5rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius)}.col-filter-search input{flex:1;background:none;border:none;color:var(--text);font-size:.8rem;outline:none;padding:0}.col-filter-search input::placeholder{color:var(--text-muted)}.col-filter-search svg{color:var(--text-muted);flex-shrink:0}.col-filter-clear{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:2px;display:flex;border-radius:2px}.col-filter-clear:hover{color:var(--text)}.col-filter-divider{height:1px;background:var(--border);margin:.25rem 0}.col-filter-sort{display:flex;flex-direction:column;gap:2px}.col-filter-sort-btn{display:flex;align-items:center;gap:.375rem;padding:.375rem .5rem;background:none;border:none;color:var(--text-secondary);font-size:.8rem;cursor:pointer;border-radius:var(--radius);text-align:left;width:100%}.col-filter-sort-btn:hover{background:var(--surface-2);color:var(--text)}.col-filter-sort-btn.active{background:#22c55e1a;color:var(--accent)}.col-filter-clear-all{display:flex;align-items:center;gap:.375rem;padding:.375rem .5rem;background:none;border:none;color:var(--text-muted);font-size:.75rem;cursor:pointer;border-radius:var(--radius);width:100%}.col-filter-clear-all:hover{background:var(--surface-2);color:var(--text)}.col-filter-check-search{margin:.25rem 0}.col-filter-check-search input{width:100%;padding:.375rem .5rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:.75rem;font-family:var(--font-sans);outline:none;box-sizing:border-box}.col-filter-check-search input:focus{border-color:var(--accent)}.col-filter-check-actions{display:flex;gap:.25rem;margin:.25rem 0}.col-filter-check-btn{flex:1;padding:.25rem .375rem;background:none;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);font-size:.7rem;cursor:pointer;text-align:center}.col-filter-check-btn:hover{background:var(--surface-2);color:var(--text)}.col-filter-check-list{max-height:180px;overflow-y:auto;margin:.25rem 0}.col-filter-check-item{display:flex;align-items:center;gap:.375rem;padding:.3rem .375rem;border-radius:var(--radius);cursor:pointer;font-size:.75rem;transition:background .1s}.col-filter-check-item:hover{background:var(--surface-2)}.col-filter-check-item.checked{background:#22c55e14}.col-filter-check-item input[type=checkbox]{accent-color:var(--accent);flex-shrink:0}.col-filter-check-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}.col-filter-check-count{color:var(--text-muted);font-size:.7rem;font-family:var(--font-mono);flex-shrink:0}.col-filter-check-empty{padding:.5rem;text-align:center;color:var(--text-muted);font-size:.75rem}.badge-filter{background:#22c55e26!important;color:var(--accent)!important;cursor:pointer;display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem!important;transition:background .15s}.badge-filter:hover{background:#22c55e40!important}.cell-id{font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted);white-space:nowrap}.col-id,.col-time{white-space:nowrap}.filter-info{padding:.5rem .75rem;font-size:.75rem;color:var(--text-muted);text-align:center;border-top:1px solid var(--border);background:var(--surface-2)}.fullscreen-overlay{position:fixed;inset:0;background:var(--bg);z-index:300;display:flex;flex-direction:column;animation:fadeIn .15s ease}.fullscreen-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}.fullscreen-header-left{display:flex;align-items:center;gap:.75rem}.fullscreen-header-right{display:flex;align-items:center;gap:.5rem}.fullscreen-body{flex:1;overflow:auto;padding:0}.fullscreen-body::-webkit-scrollbar{width:8px;height:8px}.fullscreen-body::-webkit-scrollbar-track{background:transparent}.fullscreen-body::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:4px}.fullscreen-body::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-hover)}.fullscreen-table{border:none!important;border-radius:0!important}.fullscreen-table .records-table th,.records-table thead{position:sticky;top:0;z-index:5}.name-edit input{background:var(--bg);border:1px solid var(--accent);border-radius:var(--radius);color:var(--text);font-size:1rem;font-weight:600;font-family:var(--font-sans);padding:.25rem .5rem;outline:none;width:100%;min-width:200px}.records-header-left h2,.fullscreen-header-left h2{font-size:1rem;font-weight:600;display:inline-flex;align-items:center;gap:.375rem;cursor:pointer;border-radius:var(--radius);padding:.15rem .3rem;transition:background .15s}.records-header-left h2:hover,.fullscreen-header-left h2:hover{background:var(--surface-2)}.records-header-left h2 svg,.fullscreen-header-left h2 svg{opacity:0;transition:opacity .15s;color:var(--text-muted)}.records-header-left h2:hover svg,.fullscreen-header-left h2:hover svg{opacity:1}.theme-toggle{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);transition:all .15s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.dashboard-section{margin-bottom:1rem}.dashboard-toggle{display:flex;align-items:center;gap:.5rem;padding:.625rem .75rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--text);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;width:100%;cursor:pointer;transition:background .15s}.dashboard-toggle:hover{background:var(--surface-2)}.dashboard-body{margin-top:.75rem}.dashboard-error{padding:.5rem .75rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius);color:var(--danger);font-size:.8rem;margin-top:.5rem}.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:.75rem}.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;text-align:center}.kpi-value{font-size:1.75rem;font-weight:700;font-family:var(--font-mono);color:var(--accent);line-height:1.2}.kpi-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}.charts-grid{display:flex;gap:.75rem}.charts-grid .chart-card{flex:1;min-width:0}.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}.chart-title{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.75rem}.chart-empty{display:flex;align-items:center;justify-content:center;height:200px;color:var(--text-muted);font-size:.85rem}@media(max-width:768px){.layout{grid-template-columns:1fr}.app{padding:1rem}.sidebar{position:static}}