:root{--bg-color:#1a1a1a;--primary-surface-color:#2a2a2a;--secondary-surface-color:#333;--border-color:#444;--text-color:#e0e0e0;--text-color-muted:#999;--link-color-default:#333;--accent-color:#0af;--highlight-color:#fa0;--session-highlight-color:#7fd1ff;--root-node-color:#f55;--header-height:60px;--panel-width:1140px;--app-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--app-title-font:var(--app-font)}:root[data-graph-palette="aurora"]{--accent-color:#0af;--highlight-color:#fa0;--session-highlight-color:#7fd1ff;--root-node-color:#f55;--link-color-default:#333}:root[data-graph-palette="monochrome"]{--accent-color:#f5f5f5;--highlight-color:#cfcfcf;--session-highlight-color:#e0e0e0;--root-node-color:#fff;--link-color-default:#9a9a9a}:root[data-graph-palette="monochrome-warm"]{--accent-color:#f0f0f0;--highlight-color:#ffe27a;--session-highlight-color:#fff3b0;--root-node-color:#fff2a8;--link-color-default:#3a3a3a}:root[data-graph-palette="midnight"]{--accent-color:#7f5af0;--highlight-color:#ff5470;--session-highlight-color:#a29aff;--root-node-color:#60efff;--link-color-default:#29294a}:root[data-graph-palette="oceanic"]{--accent-color:#00b4d8;--highlight-color:#48cae4;--session-highlight-color:#90e0ef;--root-node-color:#0077b6;--link-color-default:#023047}body{font-family:var(--app-font);margin:0;background-color:var(--bg-color);color:var(--text-color);overflow:hidden}#app-shell{min-height:100vh;display:flex;flex-direction:column}.app-header{display:grid;grid-template-columns:auto minmax(340px,1fr) auto;align-items:center;padding:0 24px;height:var(--header-height);background-color:var(--primary-surface-color);border-bottom:1px solid var(--border-color);gap:24px}.logo-title{display:flex;align-items:center;gap:16px}.header-logo{width:44px;height:44px}.logo-copy{display:flex;flex-direction:column;gap:4px}.app-title{font-family:var(--app-title-font);font-size:1.48rem;font-weight:600;margin:0;letter-spacing:.04em}.app-tagline{margin:0;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-color-muted)}.brand-dot{color:var(--highlight-color)}.header-filter{display:flex;flex-direction:row;align-items:center;gap:16px;justify-content:flex-end;justify-self:stretch;position:relative;flex-wrap:wrap;flex:1 1 auto}.filter-shell{position:relative;display:flex;align-items:stretch;background:rgba(0,0,0,0.4);border-radius:6px;border:1px solid rgba(255,255,255,0.12);padding:0;overflow:hidden;transition:border-color .2s,box-shadow .2s;flex:0 1 50%;min-width:min(360px,100%);max-width:min(520px,100%)}.filter-shell:focus-within{border-color:var(--accent-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-color) 14%,transparent)}.filter-overlay{position:absolute;inset:0;padding:10px 48px 10px 18px;display:block;pointer-events:none;font-family:var(--app-font);font-size:.85rem;letter-spacing:.01em;color:transparent;white-space:pre;overflow:hidden;line-height:1.4}.filter-overlay span{padding:0;display:inline}.filter-overlay .token-field{color:#7fd1ff}.filter-overlay .token-operator{color:#ffad66}.filter-overlay .token-logical{color:#b58cff;text-transform:uppercase}.filter-overlay .token-value{color:#9cffb9}.filter-overlay .token-paren{color:#ffd1ff}.filter-overlay .token-error{color:#ff6b6b;text-decoration:underline wavy rgba(255,107,107,0.5)}.filter-overlay .token-comment{color:#6c757d;font-style:italic}.filter-input{position:relative;flex:1;background:transparent;border:0;color:transparent;caret-color:var(--accent-color);font-family:var(--app-font);font-size:.85rem;padding:10px 48px 10px 18px;letter-spacing:.01em;outline:0;line-height:1.4}.filter-input::placeholder{color:rgba(255,255,255,0.25)}.filter-clear-btn{position:absolute;right:8px;top:50%;width:28px;height:28px;border:0;border-radius:6px;transform:translateY(-50%);background:rgba(255,255,255,0.08);color:var(--text-color-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;line-height:0;transition:background .2s,color .2s,transform .2s,opacity .2s;opacity:0;pointer-events:none}.filter-clear-btn.visible{opacity:1;pointer-events:auto}.filter-clear-btn:hover{background:color-mix(in srgb,var(--accent-color) 22%,transparent);color:var(--accent-color);transform:translateY(-50%) scale(1.05)}.filter-clear-btn:active{transform:translateY(-50%) scale(0.95)}.filter-suggestions{position:absolute;top:calc(100% + 6px);left:0;right:0;background:rgba(26,32,38,0.96);border:1px solid color-mix(in srgb,var(--accent-color) 22%,transparent);border-radius:6px;box-shadow:0 22px 48px rgba(0,0,0,0.45);padding:6px 0;display:none;flex-direction:column;max-height:280px;overflow-y:auto;z-index:30}.filter-suggestions.visible{display:flex}.filter-suggestions__header{padding:6px 12px;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-color-muted);border-top:1px solid rgba(255,255,255,0.06)}.filter-suggestion-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;font-family:var(--app-font);font-size:.8rem;color:var(--text-color);cursor:pointer;transition:background .2s,color .2s}.filter-suggestion-item:hover,.filter-suggestion-item.active{background:color-mix(in srgb,var(--accent-color) 18%,transparent);color:var(--accent-color)}.filter-suggestion-icon{width:16px;text-align:center;opacity:.9;margin-right:6px;color:var(--text-color-muted)}.filter-suggestion-label{flex:1}.filter-suggestion-hint{color:var(--text-color-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}.filter-meta{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-color-muted);display:flex;align-items:center;gap:10px;min-height:18px;padding-left:0;margin-right:8px;justify-content:flex-end;flex:0 0 auto;white-space:nowrap;text-align:right;order:-1}.filter-meta .status-ok{color:#6fe3b5}.filter-meta .status-error{color:#ff6b6b}.filter-meta .status-empty{color:var(--text-color-muted)}.graph-file-badge{position:absolute;top:20px;left:20px;background:rgba(0,0,0,0.6);color:var(--text-color);font-size:.85rem;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,0.08);letter-spacing:.03em;z-index:3;pointer-events:none;display:flex;flex-direction:column;gap:10px;width:clamp(220px,22vw,340px);box-shadow:0 8px 24px rgba(0,0,0,0.35);backdrop-filter:blur(6px)}.graph-file-badge__header{display:flex;flex-direction:column;gap:6px}.graph-protocol-legend{display:none;align-items:center;gap:12px;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-color-muted);border-top:1px solid rgba(255,255,255,0.08);padding-top:8px;margin-top:2px;flex-wrap:wrap;pointer-events:none}.graph-protocol-legend.is-visible{display:flex}.graph-protocol-legend__item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.graph-protocol-legend__swatch{width:10px;height:10px;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.4);background:var(--accent-color)}.graph-file-path{display:flex;align-items:baseline;gap:8px;font-size:.68rem;letter-spacing:.14em;color:var(--text-color-muted);white-space:nowrap;overflow:hidden;min-width:0}.graph-file-brand{font-weight:600;color:var(--text-color);letter-spacing:.1em;display:inline-flex;align-items:baseline;gap:2px}.graph-file-separator{color:var(--text-color-muted);font-size:.72rem;line-height:1}.graph-file-name{flex:1;min-width:0;font-family:var(--app-font);font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.05em;color:var(--text-color);text-transform:none}.graph-file-meta{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-color-muted)}.graph-timeline-spark{width:100%;height:24px;display:block;box-sizing:border-box;filter:drop-shadow(0 8px 18px rgba(0,0,0,0.35))}.graph-timeline-spark.is-empty{display:none}.graph-timeline-spark .spark-background{fill:rgba(8,18,28,0.85);stroke:rgba(255,255,255,0.12);stroke-width:1}.graph-timeline-spark .spark-grid--vertical line{stroke:rgba(255,255,255,0.06);stroke-width:.45;stroke-dasharray:2 2}.graph-timeline-spark .spark-grid--horizontal line{stroke:rgba(255,255,255,0.05);stroke-width:.35;stroke-dasharray:1.2 2}.graph-timeline-spark .spark-bars{mix-blend-mode:screen}.graph-timeline-spark .spark-bar{opacity:.72;transition:opacity .2s ease,transform .2s ease}.graph-timeline-spark.has-highlight .spark-bars:not(.spark-bars--highlight) .spark-bar{opacity:.38}.graph-timeline-spark .spark-bars--highlight{mix-blend-mode:normal}.graph-timeline-spark .spark-bar--highlight{opacity:.95;stroke:rgba(0,0,0,0.25);stroke-width:.4}.graph-timeline-spark .spark-bar--latest{opacity:1;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--highlight-color) 35%,transparent))}.graph-timeline-spark .spark-bar--empty{opacity:.22}.graph-timeline-spark .spark-baseline{stroke:rgba(255,255,255,0.18);stroke-width:.65;stroke-linecap:round}.replay-status{margin-top:12px;padding:12px 14px;border-radius:12px;background:linear-gradient(155deg,rgba(10,20,32,0.94),rgba(14,22,34,0.72));border:1px solid rgba(255,255,255,0.08);box-shadow:0 12px 28px rgba(0,0,0,0.42);display:grid;gap:10px;color:var(--text-color);backdrop-filter:blur(4px);transition:opacity .3s ease,transform .3s ease;transform-origin:center top}.replay-status--hidden{display:none}.replay-status__header{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}.replay-status__label{font-weight:600;color:var(--highlight-color)}.replay-status__time{display:inline-flex;align-items:baseline;gap:6px;font-size:.76rem;color:var(--text-color-muted)}.replay-status__divider{opacity:.4}.replay-status__bar{position:relative;width:100%;height:6px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05)}.replay-status__bar-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--accent-color) 50%,rgba(255,255,255,0)),color-mix(in srgb,var(--highlight-color) 88%,rgba(255,255,255,0)));box-shadow:0 0 12px color-mix(in srgb,var(--highlight-color) 45%,transparent);transition:width .25s ease,box-shadow .25s ease}.replay-status__footer{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;color:var(--text-color-muted)}.replay-status__footer span{letter-spacing:.05em}.replay-status__cancel{border:0;background:0;color:var(--highlight-color);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;padding:2px 0;cursor:pointer;transition:color .2s ease,opacity .2s ease}.replay-status__cancel:hover{color:color-mix(in srgb,var(--highlight-color) 85%,#fff 8%);opacity:.9}.replay-status__cancel:focus-visible{outline:0;text-decoration:underline}.replay-status--complete .replay-status__label{color:var(--session-highlight-color)}.replay-status--complete .replay-status__bar-fill{background:linear-gradient(90deg,color-mix(in srgb,var(--session-highlight-color) 60%,transparent),color-mix(in srgb,var(--accent-color) 85%,transparent));box-shadow:0 0 14px color-mix(in srgb,var(--session-highlight-color) 55%,transparent)}.replay-status--paused .replay-status__label{color:color-mix(in srgb,var(--accent-color) 70%,white 10%)}.header-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-self:end}.panel-width-control{display:flex;align-items:center;gap:8px;background-color:var(--secondary-surface-color);border:1px solid var(--border-color);padding:6px 10px;border-radius:5px;font-size:.8rem;color:var(--text-color-muted)}.panel-width-control label{text-transform:uppercase;font-weight:600;letter-spacing:.05em}.panel-width-control input[type="range"]{width:110px}.panel-width-control span{font-family:var(--app-font);color:var(--text-color)}.header-toggle{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.12);background:rgba(14,20,28,0.55);color:var(--text-color-muted);cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease;user-select:none}.header-toggle:hover{border-color:color-mix(in srgb,var(--accent-color) 35%,transparent);color:var(--text-color)}.header-toggle:focus-within{outline:0;border-color:var(--accent-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-color) 25%,transparent);color:var(--text-color)}.header-toggle input{appearance:none;width:38px;height:20px;border-radius:999px;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.12);position:relative;transition:background .2s ease,border-color .2s ease;cursor:pointer}.header-toggle input::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,0.85);transition:transform .2s ease,background .2s ease}.header-toggle input:checked{background:rgba(0,170,255,0.28);border-color:rgba(0,170,255,0.75)}.header-toggle input:checked::after{transform:translateX(16px);background:rgba(10,16,24,0.92)}.header-toggle__text{text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;pointer-events:none}.upload-btn,.toggle-button,.control-btn,.control-select{padding:8px 16px;border:1px solid var(--border-color);background-color:var(--secondary-surface-color);color:var(--text-color);border-radius:5px;cursor:pointer;font-size:.9rem;font-family:var(--app-title-font);transition:background-color .2s,color .2s}.upload-btn{border-color:var(--accent-color);background-color:var(--accent-color);color:#fff}.toggle-button{background-color:transparent;color:var(--accent-color);border-color:var(--accent-color)}.toggle-button.icon-only{width:38px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:9px}.toggle-button.icon-only .icon{width:20px;height:20px;display:grid;place-items:center}.toggle-button.icon-only .icon svg{width:20px;height:20px}.toggle-button.icon-only .icon-expand{display:none}.toggle-button.icon-only.is-collapsed .icon-expand{display:grid}.toggle-button.icon-only.is-collapsed .icon-collapse{display:none}.upload-btn:hover{background-color:#08c}.control-btn--ghost{background-color:transparent;color:var(--text-color-muted);border-color:var(--border-color)}.control-btn--ghost:hover{color:var(--text-color);background-color:rgba(255,255,255,0.06)}.control-btn--accent{border-color:color-mix(in srgb,var(--highlight-color) 65%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--highlight-color) 24%,rgba(10,18,28,0.88)),rgba(10,18,28,0.95));color:var(--text-color);box-shadow:0 0 0 1px rgba(255,255,255,0.04),0 12px 28px rgba(0,0,0,0.38);transition:transform .15s ease,box-shadow .2s ease}.control-btn--accent:hover{background:color-mix(in srgb,var(--highlight-color) 18%,rgba(12,22,34,0.95));border-color:color-mix(in srgb,var(--highlight-color) 85%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--highlight-color) 35%,transparent),0 16px 32px rgba(0,0,0,0.44);transform:translateY(-1px)}.control-btn--accent.is-active{color:#06111f;background:color-mix(in srgb,var(--highlight-color) 82%,rgba(255,255,255,0.08));border-color:color-mix(in srgb,var(--highlight-color) 92%,rgba(0,0,0,0.22));box-shadow:0 0 0 1px color-mix(in srgb,var(--highlight-color) 55%,transparent),0 18px 36px rgba(0,0,0,0.48);transform:translateY(-1px)}.control-btn--accent:focus-visible{outline:2px solid color-mix(in srgb,var(--highlight-color) 80%,rgba(255,255,255,0.25));outline-offset:3px}.toggle-button:hover{background-color:color-mix(in srgb,var(--accent-color) 10%,transparent)}.control-btn:hover,.control-select:hover{background-color:var(--border-color)}.control-btn:disabled,.control-btn--ghost:disabled,.toggle-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.sticky-notes-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}.sticky-note{position:absolute;width:220px;min-height:160px;max-height:800px;background:rgba(32,36,42,0.82);border:1px solid transparent;border-radius:12px;box-shadow:0 18px 36px rgba(0,0,0,0.35);backdrop-filter:blur(6px);color:var(--text-color);padding:12px 12px 16px;display:flex;flex-direction:column;gap:8px;pointer-events:auto;transition:width .2s ease,min-height .2s ease,padding .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,height .2s ease;overflow:visible;box-sizing:border-box}.sticky-note.is-editing,.sticky-note:focus-within,.sticky-note:hover{border-color:rgba(255,255,255,0.22)}.sticky-note.is-editing{border-color:color-mix(in srgb,var(--accent-color) 55%,rgba(255,255,255,0.18))}.sticky-note-header{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-color-muted);cursor:grab;user-select:none}.sticky-note-header__label{flex:1}.sticky-note-header-controls{display:flex;align-items:center;gap:6px;margin-left:auto;cursor:default}.sticky-note-header-controls .sticky-note-close{flex:0 0 auto}.sticky-note-footer{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:2px}.sticky-note-footer .sticky-note-variant-buttons{flex:0 1 auto}.sticky-note-variant-buttons{display:inline-flex;align-items:center;justify-content:center;gap:4px;background:rgba(14,20,28,0.7);border:1px solid rgba(255,255,255,0.14);border-radius:8px;padding:2px;flex-wrap:nowrap;min-width:0}.sticky-note-variant-button{border:0;background:transparent;color:var(--text-color-muted);width:26px;height:26px;border-radius:6px;cursor:pointer;display:grid;place-items:center;font-size:.78rem;line-height:1;transition:background .2s ease,color .2s ease,box-shadow .2s ease}.sticky-note-variant-button::before{content:attr(data-icon)}.sticky-note-variant-button:hover{background:rgba(255,255,255,0.08);color:var(--text-color)}.sticky-note-variant-button:focus-visible{outline:0;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-color) 30%,transparent)}.sticky-note-variant-button.is-active{background:color-mix(in srgb,var(--accent-color) 25%,transparent);color:color-mix(in srgb,var(--accent-color) 90%,#fff)}.sticky-note.is-editing .sticky-note-variant-button.is-active{background:color-mix(in srgb,var(--accent-color) 35%,transparent)}.sticky-note-header:active{cursor:grabbing}.sticky-note-close{border:0;background:rgba(0,170,255,0.12);color:var(--accent-color);width:22px;height:22px;border-radius:6px;cursor:pointer;display:grid;place-items:center;font-size:1rem;line-height:1;transition:background .2s ease,color .2s ease,transform .2s ease}.sticky-note-close:hover{background:rgba(0,170,255,0.25);color:#fff}.sticky-note-close:active{transform:scale(0.92)}.sticky-note-content{flex:1 1 auto;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.12);border-radius:8px;padding:10px;outline:0;font-size:.9rem;line-height:1.4;overflow-y:auto;transition:max-height .2s ease}.sticky-note-content:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px rgba(0,170,255,0.2)}.sticky-note-content:empty::before{content:attr(data-placeholder);color:rgba(255,255,255,0.35)}.sticky-note-compact{display:none;font-size:.77rem;line-height:1.4;color:var(--text-color);cursor:pointer;position:relative;text-align:center}.sticky-note-compact__text{display:block;overflow:hidden;text-overflow:ellipsis}.sticky-note.is-compact{width:auto;min-height:auto;max-height:none;padding:10px 12px;gap:6px;box-shadow:0 12px 24px rgba(0,0,0,0.45);background:rgba(24,30,38,0.9);border:1px solid transparent;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease;display:inline-flex;flex-direction:column;justify-content:flex-start;max-width:24ch}.sticky-note.is-compact::before,.sticky-note.is-compact::after{pointer-events:none}.sticky-note.is-compact .sticky-note-header{display:none}.sticky-note.is-compact .sticky-note-content{display:none}.sticky-note.is-compact .sticky-note-footer{display:none}.sticky-note.is-compact .sticky-note-compact{display:flex;align-items:flex-start;justify-content:flex-start;padding:0;text-align:left}.sticky-note.is-compact .sticky-note-compact__text{display:block;line-height:1.4;-webkit-line-clamp:unset;max-height:none;white-space:pre-wrap;word-break:break-word}.sticky-note.is-compact:hover,.sticky-note.is-compact:focus-within{border-color:color-mix(in srgb,var(--accent-color) 45%,transparent)}.sticky-note.is-compact:hover{transform:translateY(-1px)}.sticky-note.is-compact:focus-within{outline:0;box-shadow:0 0 0 2px rgba(0,170,255,0.25)}.sticky-note.is-compact[data-variant="card"]{border-radius:12px}.sticky-note.is-compact[data-variant="arrow-right"]{padding-right:32px;border-radius:12px 20px 20px 12px}.sticky-note.is-compact[data-variant="arrow-right"]::after{content:'';position:absolute;top:50%;right:-1px;transform:translateY(-50%);border-width:13px 0 13px 15px;border-style:solid;border-color:transparent transparent transparent rgba(255,255,255,0.28);filter:drop-shadow(0 0 6px rgba(0,0,0,0.4))}.sticky-note.is-compact[data-variant="arrow-left"]{padding-left:32px;border-radius:20px 12px 12px 20px}.sticky-note.is-compact[data-variant="arrow-left"]::after{content:'';position:absolute;top:50%;left:-1px;transform:translateY(-50%);border-width:13px 15px 13px 0;border-style:solid;border-color:transparent rgba(255,255,255,0.28) transparent transparent;filter:drop-shadow(0 0 6px rgba(0,0,0,0.4))}.sticky-note.is-compact[data-variant="alert"]{padding-top:34px;border-radius:14px;color:color-mix(in srgb,var(--highlight-color) 85%,#fff7d9)}.sticky-note.is-compact[data-variant="alert"]::before{content:'!';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:var(--highlight-color);color:#141414;font-weight:700;font-size:.9rem;display:grid;place-items:center;box-shadow:0 0 10px color-mix(in srgb,var(--highlight-color) 55%,transparent)}.sticky-note.is-compact[data-variant="thin-arrow-right"]{padding-bottom:28px}.sticky-note.is-compact[data-variant="thin-arrow-right"]::after{content:'';position:absolute;left:18px;right:30px;bottom:10px;height:1.5px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,0.12),rgba(255,255,255,0.45))}.sticky-note.is-compact[data-variant="thin-arrow-right"]::before{content:'';position:absolute;right:10px;bottom:6px;border-width:6px 0 6px 9px;border-style:solid;border-color:transparent transparent transparent rgba(255,255,255,0.55)}.sticky-note.is-compact[data-variant="thin-arrow-left"]{padding-bottom:28px}.sticky-note.is-compact[data-variant="thin-arrow-left"]::after{content:'';position:absolute;left:30px;right:18px;bottom:10px;height:1.5px;border-radius:999px;background:linear-gradient(270deg,rgba(255,255,255,0.12),rgba(255,255,255,0.45))}.sticky-note.is-compact[data-variant="thin-arrow-left"]::before{content:'';position:absolute;left:10px;bottom:6px;border-width:6px 9px 6px 0;border-style:solid;border-color:transparent rgba(255,255,255,0.55) transparent transparent}.sticky-note.is-editing::before,.sticky-note.is-editing::after,.sticky-note.is-editing[data-variant="arrow-right"]::after,.sticky-note.is-editing[data-variant="arrow-left"]::after,.sticky-note.is-editing[data-variant="thin-arrow-right"]::before,.sticky-note.is-editing[data-variant="thin-arrow-right"]::after,.sticky-note.is-editing[data-variant="thin-arrow-left"]::before,.sticky-note.is-editing[data-variant="thin-arrow-left"]::after{content:none !important;display:none !important}.main-container{display:flex;height:calc(100vh - var(--header-height))}#graph-container{flex-grow:1;position:relative;cursor:grab;background-color:#212121}#graph-container:active{cursor:grabbing}#network-graph{width:100%;height:100%;display:block}.graph-danger-stripe{position:absolute;top:0;right:0;width:8px;height:100%;pointer-events:none;opacity:.6;background:linear-gradient(90deg,rgba(0,0,0,0) 10%,rgba(0,0,0,0.5) 100%),repeating-linear-gradient(135deg,rgba(255,255,255,0.18) 0,rgba(255,255,255,0.18) 6px,rgba(0,0,0,0.3) 6px,rgba(0,0,0,0.3) 12px);z-index:1}.node-group{cursor:pointer;filter:url(#drop-shadow);transition:opacity .3s}.node-group.replay-hidden{opacity:0;pointer-events:none}.node-group.replay-visible{opacity:1}.node-group.replay-visible .node-label{opacity:1}.node-group.pinned-node .node-outer-circle{stroke:var(--highlight-color)}.node-outer-circle{stroke:var(--node-stroke-color,var(--accent-color));stroke-width:2px;fill:none;transition:stroke-width .2s,stroke .2s;transform-box:fill-box;transform-origin:center}.node-outer-circle.replay-pulse{animation:replay-node-pulse .65s ease-out}.node-inner-circle{stroke:#111;stroke-width:2px;fill:var(--node-fill-color,var(--accent-color));transition:fill .2s}.root-node .node-outer-circle{--node-stroke-color:var(--root-node-color);stroke:var(--root-node-color)}.root-node .node-inner-circle{--node-fill-color:var(--root-node-color);fill:var(--root-node-color)}.port-marker{fill:var(--highlight-color);stroke:var(--bg-color);stroke-width:1px}.node-label{fill:var(--text-color-muted);text-anchor:middle;pointer-events:none;transition:font-size .2s,opacity .3s ease}.node-label.hidden{display:none}.link-group{transition:opacity .3s}.link-group.replay-hidden{opacity:0;pointer-events:none}.link-group.replay-visible{opacity:1}.link{stroke:var(--text-color-muted);stroke-opacity:.6;fill:none;transition:stroke-opacity .2s,stroke .2s}.link.replay-pulse{animation:replay-link-pulse .55s ease-out;stroke-opacity:1}.link.root-link{stroke-dasharray:2 4;stroke:var(--border-color)}.link-group.replay-visible .link-text{fill:var(--text-color);opacity:.85}.node-pin-control{display:none;cursor:pointer;pointer-events:auto}.node-pin-control circle{fill:color-mix(in srgb,var(--accent-color) 20%,transparent);stroke:var(--accent-color);stroke-width:1.4px}.node-pin-control path{stroke:var(--accent-color);stroke-width:1.4px;fill:none;stroke-linecap:round}.node-group.pinned-node .node-pin-control{display:block}.link-text{fill:var(--text-color-muted);text-anchor:middle;pointer-events:none;transition:font-size .2s}@keyframes replay-node-pulse{0%{transform:scale(0.4);stroke-width:6px;opacity:0}55%{transform:scale(1.18);stroke-width:3px;opacity:1}100%{transform:scale(1);stroke-width:2px;opacity:1}}@keyframes replay-link-pulse{0%{stroke-opacity:.1;filter:drop-shadow(0 0 0 rgba(0,0,0,0))}45%{stroke-opacity:1;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--highlight-color) 65%,transparent))}100%{stroke-opacity:.85;filter:drop-shadow(0 0 0 rgba(0,0,0,0))}}#graph-container.is-replaying .graph-background{opacity:.96;filter:saturate(1.08);transition:filter .3s ease,opacity .3s ease}#graph-container.is-replaying .link{stroke-opacity:.35}#graph-container.is-replaying .link.replay-pulse{stroke-opacity:1}.link-text textPath{dominant-baseline:central;stroke:var(--bg-color);paint-order:stroke}.faded{opacity:.25}.node-outer-circle.highlighted{stroke:var(--highlight-color);stroke-width:4px}.node-outer-circle.session-highlighted{stroke:var(--session-highlight-color);stroke-width:4px}.link.highlighted{stroke:var(--highlight-color)}.link.session-highlighted{stroke:var(--session-highlight-color)}.link.highlighted,.link.session-highlighted{stroke-opacity:1}#side-panel{width:var(--panel-width);flex-shrink:0;background-color:var(--primary-surface-color);border-left:1px solid var(--border-color);transition:width .3s ease-in-out;display:flex;flex-direction:column;position:relative;z-index:5}#side-panel.collapsed{width:0;border-left:0}.panel-tabs{display:flex;flex-shrink:0;border-bottom:1px solid var(--border-color)}.tab-btn{padding:12px 20px;background:0;border:0;color:var(--text-color-muted);cursor:pointer;font-family:var(--app-title-font);font-size:.9rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border-bottom:2px solid transparent}.tab-btn.active{color:var(--accent-color);border-bottom-color:var(--accent-color)}.tab-btn.hidden{display:none}.tab-content{display:none;overflow-y:auto;height:100%}.tab-content.active{display:block}#side-panel .tab-content{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.22) rgba(255,255,255,0.06)}#side-panel .tab-content::-webkit-scrollbar{width:10px;height:10px}#side-panel .tab-content::-webkit-scrollbar-track{background:rgba(255,255,255,0.06);border-radius:999px}#side-panel .tab-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.22);border-radius:999px;border:2px solid transparent;background-clip:padding-box}#side-panel .tab-content::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.32)}#side-panel .tab-content::-webkit-scrollbar-corner{background:transparent}.filter-suggestions{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.22) rgba(255,255,255,0.06)}.filter-suggestions::-webkit-scrollbar{width:10px;height:10px}.filter-suggestions::-webkit-scrollbar-track{background:rgba(255,255,255,0.06);border-radius:999px}.filter-suggestions::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.22);border-radius:999px;border:2px solid transparent;background-clip:padding-box}.filter-suggestions::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.32)}#tab-content-sequence{padding:20px}#tab-content-sequence.active{display:flex;flex-direction:column;min-height:0}#sequence-diagram-container{flex:1;min-height:360px;position:relative;display:flex;flex-direction:column;gap:16px}.sequence-placeholder{color:var(--text-color-muted);text-align:center;margin-top:80px;font-size:.95rem}.sequence-table-wrapper{flex:1;display:none;grid-template-rows:auto auto 1fr auto;gap:16px;min-height:0}.sequence-table-wrapper.active{display:grid}.sequence-heading,.http-heading{margin:0;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:var(--text-color-muted)}.sequence-summary,.http-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.sequence-summary__metric,.http-summary__metric{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.35)}.sequence-summary__label,.http-summary__label{text-transform:uppercase;letter-spacing:.12em;font-size:.65rem;color:var(--text-color-muted)}.sequence-summary__value,.http-summary__value{font-size:1rem;color:var(--highlight-color);font-variant-numeric:tabular-nums}.sequence-summary__hint,.http-summary__hint{font-size:.7rem;color:var(--text-color-muted)}.sequence-table-scroll,.http-table-scroll{flex:1;overflow-y:auto;border-radius:10px;border:1px solid rgba(255,255,255,0.05);background:rgba(0,0,0,0.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);min-height:0}.sequence-table-scroll::-webkit-scrollbar,.http-table-scroll::-webkit-scrollbar{width:8px}.sequence-table-scroll::-webkit-scrollbar-thumb,.http-table-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:4px}.sequence-table-scroll::-webkit-scrollbar-thumb:hover,.http-table-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.12)}.sequence-table,.http-table{width:100%;border-collapse:collapse;font-size:.82rem;min-width:680px}.sequence-table thead th,.http-table thead th{position:sticky;top:0;z-index:2;background-color:rgba(0,0,0,0.65);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--text-color-muted)}.sequence-table th,.sequence-table td,.http-table th,.http-table td{border-bottom:1px solid var(--border-color);padding:10px 14px;white-space:nowrap;text-align:left;vertical-align:middle}.sequence-table tbody tr,.http-table tbody tr{transition:background-color .2s;cursor:pointer}.sequence-table tbody tr:hover,.http-table tbody tr:hover{background:color-mix(in srgb,var(--accent-color) 8%,transparent)}.sequence-table tbody tr.active,.http-table tbody tr.active{background:color-mix(in srgb,var(--accent-color) 15%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-color) 25%,transparent)}.sequence-flow-cell{min-width:240px}.payload-panel{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:12px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.06);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.4)}.payload-panel__header{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.payload-panel__title{text-transform:uppercase;letter-spacing:.08em;font-size:.74rem;color:var(--text-color-muted)}.payload-panel__meta{font-family:var(--app-font);font-size:.76rem;color:var(--text-color)}.payload-panel__empty{display:flex;align-items:center;justify-content:center;min-height:160px;border:1px dashed rgba(255,255,255,0.08);border-radius:10px;color:var(--text-color-muted);font-size:.85rem;padding:24px;text-align:center;background:rgba(0,0,0,0.2)}.payload-panel__body{display:none;gap:16px;grid-template-columns:1fr}.payload-panel--tcp .payload-panel__body{grid-template-columns:1fr}.payload-panel--http .payload-panel__body{grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr)}.payload-panel--http .payload-panel__column--primary .payload-panel__content{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}.payload-panel__column{display:flex;flex-direction:column;gap:8px;min-width:0}.payload-panel__column-title{text-transform:uppercase;letter-spacing:.12em;font-size:.65rem;color:var(--text-color-muted)}.payload-panel__content{margin:0;padding:14px;border-radius:10px;background:rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.05);color:var(--text-color);font-family:var(--app-font);font-size:.78rem;line-height:1.48;overflow:auto;max-height:240px;white-space:pre}.payload-panel__column--secondary .payload-panel__content,.payload-panel--tcp .payload-panel__column--primary .payload-panel__content{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.76rem}.payload-panel__content::-webkit-scrollbar{width:8px;height:8px}.payload-panel__content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:4px}.payload-panel__content::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.18)}.payload-panel__note{display:none;font-size:.72rem;color:var(--text-color-muted);background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.04);border-radius:8px;padding:8px 12px}.flow-marker{display:flex;align-items:center;gap:10px;color:var(--text-color);font-size:.78rem}.flow-marker__endpoint{display:flex;align-items:center;gap:6px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flow-marker__dot{width:10px;height:10px;border-radius:50%;background:var(--dot-color,var(--accent-color));box-shadow:0 0 8px rgba(0,0,0,0.45);flex-shrink:0}.flow-marker__label{color:var(--text-color);font-variant-numeric:tabular-nums}.flow-marker__arrow{width:32px;height:16px;stroke:rgba(255,255,255,0.55);stroke-width:2.2;fill:none}.flow-marker__arrow path{stroke-linecap:round;stroke-linejoin:round}.flow-marker--inbound .flow-marker__arrow{transform:scaleX(-1)}.flag-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent-color) 12%,transparent);color:var(--accent-color);font-size:.7rem;font-weight:600;letter-spacing:.04em;margin-right:6px;text-transform:uppercase}.direction-pill{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;font-weight:600}.direction-pill--outbound{background:color-mix(in srgb,var(--accent-color) 15%,transparent);color:var(--accent-color)}.direction-pill--inbound{background:color-mix(in srgb,var(--highlight-color) 18%,transparent);color:var(--highlight-color)}.http-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:6px;padding:3px 8px;font-size:.68rem;letter-spacing:.08em;font-weight:600;margin-right:8px}.http-badge--request{background:color-mix(in srgb,var(--accent-color) 18%,transparent);color:var(--accent-color)}.http-badge--response{background:color-mix(in srgb,var(--highlight-color) 18%,transparent);color:var(--highlight-color)}.http-info{display:flex;align-items:center;gap:10px;white-space:normal}.http-info__text{color:var(--text-color);font-size:.78rem;line-height:1.4}.http-flags-cell .flag-badge:last-child{margin-right:0}.media-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.media-summary__metric{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.05);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.35)}.media-summary__label{text-transform:uppercase;letter-spacing:.12em;font-size:.65rem;color:var(--text-color-muted)}.media-summary__value{font-size:1.1rem;color:var(--highlight-color);font-variant-numeric:tabular-nums}.media-summary__hint{font-size:.7rem;color:var(--text-color-muted)}.media-details{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}.media-details__item{flex:1 1 clamp(180px,24%,240px);min-width:160px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.media-details__item--compact{flex:0 1 140px;min-width:130px}.media-details__item--narrow{flex:0 1 110px;min-width:110px}.media-details__item--medium{flex:1 1 180px;min-width:150px}.media-details__item--stretch{flex:1 1 260px;min-width:200px}.media-details__label{text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;color:var(--text-color-muted)}.media-details__value{font-size:.9rem;color:var(--text-color);font-variant-numeric:tabular-nums;word-break:break-word;overflow-wrap:anywhere}.media-details__item{box-sizing:border-box}@media(max-width:720px){.media-details__item{flex-basis:100%}}.media-waveform{background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.05);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.3);overflow:hidden;box-sizing:border-box;position:relative}.media-waveform__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.media-waveform__title{text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;color:var(--text-color-muted)}.media-waveform__canvas{width:100%;max-width:100%;height:144px;display:block;border-radius:10px;background:rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.05);box-sizing:border-box}.media-waveform__legend{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.74rem;color:var(--text-color-muted);flex-wrap:wrap}.media-heading{letter-spacing:.08em;text-transform:uppercase}.media-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.media-controls__buttons{display:flex;align-items:center;gap:10px}.media-controls__buttons button{padding:8px 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent-color) 30%,transparent);background:color-mix(in srgb,var(--accent-color) 12%,transparent);color:var(--accent-color);font-size:.85rem;cursor:pointer;transition:background .2s,transform .2s}.media-controls__buttons button:hover{background:color-mix(in srgb,var(--accent-color) 20%,transparent);transform:translateY(-1px)}.media-controls__buttons button:disabled{opacity:.45;cursor:not-allowed}.media-progress{flex:1;min-width:220px;display:flex;align-items:center;gap:10px}.media-progress__bar{position:relative;flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden;cursor:pointer}.media-progress__fill{position:absolute;inset:0;width:0;background:linear-gradient(90deg,color-mix(in srgb,var(--accent-color) 85%,transparent),color-mix(in srgb,var(--highlight-color) 85%,transparent));transition:width .1s linear}.media-progress__time{font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--text-color-muted);min-width:70px;text-align:right}.media-alert{padding:14px 16px;border-radius:10px;background:color-mix(in srgb,var(--highlight-color) 12%,transparent);border:1px solid color-mix(in srgb,var(--highlight-color) 35%,transparent);color:color-mix(in srgb,var(--highlight-color) 75%,#fff7da);font-size:.85rem;margin-bottom:12px}#tab-content-http,#tab-content-sip,#tab-content-media{padding:20px}#tab-content-http.active,#tab-content-sip.active,#tab-content-media.active{display:flex;flex-direction:column;min-height:0}#http-session-container,#sip-session-container,#media-session-container{flex:1;display:flex;flex-direction:column;gap:16px;min-height:0}#media-session-container{overflow-y:auto}.http-session-wrapper,.sip-session-wrapper,.media-session-wrapper{flex:1;display:none;gap:16px;min-height:0}.http-session-wrapper.active,.sip-session-wrapper.active{display:grid;grid-template-rows:auto auto 1fr auto}.media-session-wrapper{flex:1;display:none;flex-direction:column;gap:24px;min-height:0}.media-session-wrapper.active{display:flex}.media-experimental-banner{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--accent-color) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent-color) 35%,transparent);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2);color:var(--accent-color);font-size:.85rem;letter-spacing:.04em;text-transform:uppercase}.media-experimental-banner strong{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}.media-experimental-banner span{color:rgba(180,230,255,0.92);font-size:.78rem;letter-spacing:normal;text-transform:none}.media-description{margin:-2px 0 4px;color:var(--text-color-muted);font-size:.85rem}.media-stream{display:flex;flex-direction:column;gap:16px;padding:18px;border-radius:16px;border:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.35);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.3);min-height:0;width:100%;box-sizing:border-box;overflow:visible;flex:0 0 auto}.media-stream>*{min-width:0}.media-stream__header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.media-stream__title{margin:0;font-size:1rem;letter-spacing:.05em;text-transform:uppercase}.media-stream__tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.media-stream__tag{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent-color) 28%,transparent);background:color-mix(in srgb,var(--accent-color) 12%,transparent);color:rgba(180,230,255,0.9)}.media-stream .http-table-scroll{flex:1 1 auto;min-height:0;max-height:clamp(220px,38vh,360px);overflow-y:auto;overflow-x:auto;max-width:100%}.media-stream .media-waveform{flex:0 0 auto;width:100%;max-width:100%;align-self:stretch}.http-placeholder,.sip-placeholder,.media-placeholder{color:var(--text-color-muted);text-align:center;margin-top:80px;font-size:.95rem}#tab-content-filter-history{padding:20px}#tab-content-filter-history.active{display:flex;flex-direction:column}#filter-history-container{flex:1;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.filter-history-empty{color:var(--text-color-muted);text-align:center;margin-top:60px;font-size:.9rem}.filter-history-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.filter-history-item{background:rgba(255,255,255,0.04);border:1px solid color-mix(in srgb,var(--accent-color) 18%,transparent);border-radius:12px;padding:14px 18px;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:border-color .2s,transform .2s;position:relative}.filter-history-item.preset::before{content:'Preset';position:absolute;top:12px;right:12px;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-color);background:color-mix(in srgb,var(--accent-color) 12%,transparent);border-radius:999px;padding:2px 8px}.filter-history-item:hover{border-color:var(--accent-color);transform:translateY(-1px)}.filter-history-item:focus{outline:2px solid var(--accent-color);outline-offset:2px;border-color:var(--accent-color)}.filter-history-query{font-family:var(--app-font);font-size:.82rem;color:var(--accent-color);word-break:break-word}.filter-history-meta{display:flex;align-items:center;gap:14px;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-color-muted);flex-wrap:wrap}.filter-history-meta span{display:inline-flex;align-items:center;gap:4px}.filter-history-meta .stat{color:var(--highlight-color)}.filter-history-label{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--text-color-muted)}.filter-history-guidance{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-color-muted);background:color-mix(in srgb,var(--accent-color) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent-color) 16%,transparent);border-radius:10px;padding:10px 14px}.filter-history-auto-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-color-muted);cursor:pointer}.filter-history-auto-toggle input{appearance:none;width:32px;height:18px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent-color) 35%,transparent);background:rgba(255,255,255,0.05);position:relative;transition:background .2s ease,border-color .2s ease;cursor:pointer}.filter-history-auto-toggle input::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,0.6);transition:transform .2s ease,background .2s ease}.filter-history-auto-toggle input:checked{background:rgba(111,227,181,0.28);border-color:rgba(111,227,181,0.9)}.filter-history-auto-toggle input:checked::after{transform:translateX(12px);background:rgba(10,16,24,0.9)}.filter-history-auto-toggle span{pointer-events:none}.filter-history-item.auto-apply-active{border-color:rgba(111,227,181,0.9);box-shadow:0 8px 18px rgba(111,227,181,0.12)}.filter-history-item.auto-apply-active .filter-history-query{color:#6fe3b5}.filter-history-item.auto-apply-active .filter-history-meta .stat{color:#6fe3b5}.auto-apply-badge{display:inline-flex;align-items:center;gap:6px;font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:#6fe3b5;background:rgba(111,227,181,0.12);border-radius:999px;padding:2px 10px}.about-panel{padding:24px 28px;display:flex;flex-direction:column;gap:16px;color:var(--text-color)}.about-panel a{color:color-mix(in srgb,var(--accent-color) 85%,#a9d7ff);text-decoration:underline;text-decoration-thickness:1px}.about-panel a:hover{color:#fff;text-decoration-color:color-mix(in srgb,var(--accent-color) 65%,transparent)}.about-panel a:visited{color:color-mix(in srgb,var(--accent-color) 70%,#b7dfff)}.about-panel h2{margin:0;font-size:1.1rem;color:var(--accent-color)}.about-section-title{margin:8px 0 2px;font-size:.96rem;font-weight:600;letter-spacing:.04em;color:color-mix(in srgb,var(--accent-color) 78%,#dfe9ff)}.about-panel ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;color:var(--text-color-muted)}.about-panel li strong{color:var(--text-color)}.about-protocols{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.about-protocol-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(240,240,240,0.95);border:1px solid rgba(255,255,255,0.08);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2)}.about-protocol-chip::before{display:none}.about-protocol-chip.DNS{color:#333}.graph-lower-left{position:absolute;left:20px;bottom:20px;display:flex;flex-direction:column;gap:12px;pointer-events:none;z-index:4;align-items:flex-start}.graph-subtitle{padding:6px 12px;border-radius:8px;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.08);color:var(--text-color-muted);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;line-height:1.4;max-width:320px}.graph-subtitle.is-empty{display:none}.packet-indicator{position:relative;padding:14px 18px;border-radius:10px;background:rgba(0,0,0,0.65);color:var(--text-color);display:flex;flex-direction:column;gap:12px;font-size:.82rem;letter-spacing:.02em;box-shadow:0 6px 18px rgba(0,0,0,0.35);pointer-events:none;backdrop-filter:blur(5px);min-width:280px}.packet-indicator .indicator-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}.packet-indicator .indicator-item{display:flex;flex-direction:column;gap:2px}.packet-indicator .indicator-label{text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;color:var(--text-color-muted)}.packet-indicator .indicator-value{font-size:1.05rem;font-weight:600;color:var(--accent-color);font-variant-numeric:tabular-nums}.packet-indicator .indicator-subtext{font-size:.7rem;color:var(--text-color-muted)}.packet-indicator .indicator-session-summary{display:flex;flex-wrap:wrap;gap:12px;font-size:.74rem;color:var(--text-color-muted);text-transform:uppercase;letter-spacing:.08em}.packet-indicator .indicator-session-summary span{display:flex;align-items:center;gap:6px}.packet-indicator .indicator-session-summary strong{color:var(--highlight-color);font-size:.85rem}.packet-indicator.session{border:1px solid color-mix(in srgb,var(--highlight-color) 35%,transparent);background:rgba(0,0,0,0.55)}.packet-indicator.session .indicator-value{color:var(--highlight-color)}.packet-indicator.session .indicator-subtext{color:color-mix(in srgb,var(--highlight-color) 75%,transparent)}.packet-indicator.session .indicator-session-summary{color:color-mix(in srgb,var(--highlight-color) 75%,transparent)}#packet-table,#session-table{width:100%;border-collapse:collapse;font-size:.85rem}#packet-table thead th,#session-table thead th{background-color:var(--secondary-surface-color);position:sticky;top:0;z-index:1}#packet-table th,#packet-table td,#session-table th,#session-table td{border-bottom:1px solid var(--border-color);padding:10px 15px;text-align:left;white-space:nowrap}#packet-table tbody tr,#session-table tbody tr{cursor:pointer;transition:background-color .2s}#packet-table tbody tr:hover,#session-table tbody tr:hover{background-color:var(--secondary-surface-color)}#packet-table tbody tr.highlighted{background-color:color-mix(in srgb,var(--highlight-color) 20%,transparent) !important}#packet-table tbody tr.session-highlighted{background-color:color-mix(in srgb,var(--session-highlight-color) 28%,transparent) !important}#session-table tbody tr.highlighted{background-color:color-mix(in srgb,var(--highlight-color) 20%,transparent) !important}#session-table tbody tr.session-highlighted{background-color:color-mix(in srgb,var(--session-highlight-color) 28%,transparent) !important}.session-progress{display:flex;align-items:center;gap:10px}.session-progress__bar{position:relative;flex:1;height:10px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden}.session-progress__fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,color-mix(in srgb,var(--accent-color) 90%,transparent),color-mix(in srgb,var(--accent-color) 55%,transparent));border-radius:inherit;transition:width .3s ease;min-width:0}.session-progress__value{min-width:82px;text-align:right;font-feature-settings:"tnum";font-size:.78rem;color:var(--text-color)}.session-progress--bytes .session-progress__fill{background:linear-gradient(90deg,color-mix(in srgb,var(--highlight-color) 90%,transparent),color-mix(in srgb,var(--highlight-color) 55%,transparent))}.session-progress--bytes .session-progress__value{color:color-mix(in srgb,var(--highlight-color) 95%,transparent)}#tab-content-settings{padding:20px}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}.settings-field{display:flex;flex-direction:column;gap:8px}.settings-field>label{font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-color-muted);display:flex;align-items:center;gap:6px;font-size:.68rem}.settings-field>label span[id$="-val"]{font-family:var(--app-font);color:var(--text-color);letter-spacing:0;text-transform:none}.settings-field input[type="range"]{width:100%}.settings-field select.control-select,.settings-field .control-text-input{width:100%;margin:0}.settings-field-group .control-text-input{width:80%}.settings-field--full{grid-column:1 / -1}.settings-field-group{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}.settings-checkbox{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.12);background:rgba(14,20,28,0.45);color:var(--text-color-muted);cursor:pointer;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;transition:border-color .2s ease,color .2s ease,background .2s ease}.settings-checkbox:hover{border-color:color-mix(in srgb,var(--accent-color) 35%,transparent);color:var(--text-color)}.settings-checkbox input{appearance:none;width:18px;height:18px;border-radius:4px;border:1px solid rgba(255,255,255,0.28);background:rgba(0,0,0,0.45);position:relative;cursor:pointer;transition:border-color .2s ease,background .2s ease}.settings-checkbox input:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.settings-checkbox input:checked{background:var(--accent-color);border-color:var(--accent-color)}.settings-checkbox input:checked::after{content:'';position:absolute;top:2px;left:6px;width:4px;height:8px;border:2px solid rgba(14,18,28,0.92);border-top:0;border-left:0;transform:rotate(45deg)}.settings-checkbox input:checked+span{color:var(--text-color)}.settings-checkbox span{pointer-events:none;color:inherit}.settings-inline-group{grid-column:1 / -1;display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}.settings-inline-group .settings-checkbox{flex:0 0 auto}.settings-inline-group .control-btn{flex:1 1 200px;min-width:180px}.settings-actions{display:flex;gap:12px;flex-wrap:wrap}.settings-actions .control-btn{flex:1 1 220px;margin-top:0}#graph-palette{grid-column:1 / -1}#graph-palette-label,#graph-pattern-label{grid-column:1 / -1;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-color-muted);margin:8px 0 4px}.palette-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}.palette-option{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.12);background:rgba(14,20,28,0.65);color:var(--text-color-muted);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,color .2s ease,background .2s ease;font:inherit;line-height:1.15;user-select:none;appearance:none;width:100%;box-sizing:border-box;min-height:70px}.palette-option__swatches{display:flex;justify-content:center;align-items:center;gap:6px;width:100%;min-width:0;max-width:140px;margin:0 auto}.palette-option__swatch{flex:0 1 28px;height:10px;border-radius:3px;background:rgba(255,255,255,0.2);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.35)}.palette-option__label{order:-1;text-transform:uppercase;letter-spacing:.1em;font-size:.6rem;color:inherit;white-space:nowrap;opacity:.82;text-align:center}.palette-option__label::selection{color:inherit}.palette-option:hover{border-color:color-mix(in srgb,var(--accent-color) 40%,transparent);color:var(--text-color);transform:translateY(-1px)}.palette-option:focus-visible{outline:0;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-color) 30%,transparent)}.palette-option.is-active{border-color:var(--accent-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-color) 25%,transparent);color:var(--accent-color);background:color-mix(in srgb,var(--accent-color) 14%,transparent)}.palette-option.is-active .palette-option__label{color:inherit}.palette-option.is-active .palette-option__swatch{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2)}@media(max-width:960px){.palette-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-field-group{grid-template-columns:1fr}}@media(max-width:640px){.palette-picker{grid-template-columns:1fr}}.pattern-picker{grid-column:1 / -1}.custom-palette-controls{grid-column:1 / -1}@media(max-width:960px){.settings-grid{grid-template-columns:1fr}}#graph-pattern{grid-column:1 / -1}#graph-pattern{display:flex;gap:10px;overflow-x:auto;padding:4px 0}#graph-pattern::-webkit-scrollbar{height:6px}#graph-pattern::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:999px}.pattern-option{flex:0 0 132px;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.12);background:rgba(14,20,28,0.65);color:var(--text-color-muted);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,color .2s ease,background .2s ease;font:inherit;line-height:1.15;user-select:none;appearance:none;box-sizing:border-box}.pattern-option__preview{width:100%;height:42px;border-radius:8px;border:1px solid rgba(255,255,255,0.12);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.35);background-color:#1a1a1a}.pattern-option__label{text-transform:uppercase;letter-spacing:.1em;font-size:.6rem;color:inherit;text-align:center}.pattern-option:hover{border-color:color-mix(in srgb,var(--accent-color) 35%,transparent);color:var(--text-color);transform:translateY(-1px)}.pattern-option:focus-visible{outline:0;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-color) 30%,transparent)}.pattern-option.is-active{border-color:var(--accent-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-color) 25%,transparent);color:var(--accent-color);background:color-mix(in srgb,var(--accent-color) 14%,transparent)}.pattern-option.is-active .pattern-option__label{color:inherit}.pattern-option.is-active .pattern-option__preview{border-color:color-mix(in srgb,var(--accent-color) 55%,transparent);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25)}.palette-option--custom{position:relative}.palette-option--custom::after{content:'Custom';position:absolute;top:8px;right:12px;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--accent-color) 70%,#ffffff21)}.custom-palette-controls{grid-column:1 / -1;display:flex;flex-direction:column;gap:14px;padding:14px;border-radius:10px;border:1px dashed rgba(255,255,255,0.16);background:rgba(10,14,20,0.55)}.custom-palette-controls__title{margin:0;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-color-muted)}.custom-palette-controls__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.custom-palette-field{display:flex;flex-direction:column;gap:6px;font-size:.78rem;color:var(--text-color-muted);letter-spacing:.05em;text-transform:uppercase}.custom-palette-inputs{display:flex;gap:8px;align-items:center}.custom-palette-inputs input[type="color"]{width:44px;height:36px;padding:0;border:0;background:transparent}.custom-palette-inputs input[type="text"]{flex:0 0 88px;width:88px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:6px;padding:8px 8px;color:var(--text-color);font-family:var(--app-font);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.custom-palette-inputs input[type="text"]::placeholder{color:rgba(255,255,255,0.28)}.custom-palette-helper{margin:0;font-size:.7rem;letter-spacing:.08em;color:var(--text-color-muted)}.custom-palette-inputs input[type="text"].is-invalid{border-color:rgba(255,87,87,0.8);background:rgba(255,87,87,0.12);color:#ffdede}.control-text-input{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);border-radius:6px;padding:8px 10px;color:var(--text-color);font-size:.82rem;letter-spacing:.02em;font-family:var(--app-title-font);transition:border-color .2s ease,box-shadow .2s ease}.control-text-input::placeholder{color:rgba(255,255,255,0.32);letter-spacing:.12em;text-transform:uppercase}.control-text-input:focus{outline:0;border-color:var(--accent-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-color) 20%,transparent)}input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:8px;background:var(--secondary-surface-color);border-radius:5px;outline:0}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--accent-color);cursor:pointer;border-radius:50%}#welcome-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--text-color-muted)}#welcome-message.hidden{display:none}.protocol-tag{display:inline-block;padding:3px 6px;border-radius:4px;color:#fff;font-size:.75rem;margin-right:4px;font-weight:500}.ETH{background-color:#3498db}.IPv4{background-color:#2ecc71}.TCP{background-color:#e67e22}.UDP{background-color:#9b59b6}.HTTP{background-color:#e74c3c}.TLS{background-color:#34495e}.DNS{background-color:#f1c40f;color:#333}.SIP{background-color:#1abc9c}.RTP{background-color:#d35400}.RTCP{background-color:#8e44ad}#loader{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10}.loader-hidden{display:none !important}.spinner{border:8px solid #444;border-top:8px solid var(--accent-color);border-radius:50%;width:60px;height:60px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}#tooltip{position:absolute;background-color:rgba(0,0,0,0.85);color:#fff;padding:8px 12px;border-radius:4px;font-size:.9rem;pointer-events:none;border:1px solid var(--border-color)}.tooltip-hidden{display:none}