Inspector: Added scope for styles (#33456)

examples/jsm/inspector/Inspector.js

@@ -466,7 +466,7 @@ class Inspector extends RendererInspector {
 
 		if ( this.displayCycle.text.needsUpdate ) {
 
-			setText( 'fps-counter', this.fps.toFixed() );
+			setText( this.profiler.toggleButton.querySelector('.fps-counter'), this.fps.toFixed() );
 
 			this.performance.updateText( this, frame );
 			this.memory.updateText( this );

examples/jsm/inspector/tabs/Console.js

@@ -12,7 +12,7 @@ class Console extends Tab {
 		this.buildHeader();
 
 		this.logContainer = document.createElement( 'div' );
-		this.logContainer.id = 'console-log';
+		this.logContainer.classList.add( 'console-log' );
 		this.content.appendChild( this.logContainer );
 
 	}

examples/jsm/inspector/tabs/Performance.js

@@ -45,7 +45,8 @@ class Performance extends Tab {
 		label.appendChild( checkmark );
 		*/
 
-		const graphStats = new Item( 'Graph Stats', createValueSpan(), createValueSpan(), createValueSpan( 'graph-fps-counter' ) );
+		this.graphFpsCounter = createValueSpan();
+		const graphStats = new Item( 'Graph Stats', createValueSpan(), createValueSpan(), this.graphFpsCounter );
 		perfList.add( graphStats );
 
 		const graphItem = new Item( graphContainer );
@@ -243,7 +244,7 @@ class Performance extends Tab {
 
 		//
 
-		setText( 'graph-fps-counter', inspector.fps.toFixed() + ' FPS' );
+		setText( this.graphFpsCounter, inspector.fps.toFixed() + ' FPS' );
 
 		//
 

examples/jsm/inspector/ui/Profiler.js

@@ -19,11 +19,11 @@ export class Profiler extends EventDispatcher {
 		this.maxZIndex = 1002; // Track the highest z-index for detached windows (starts at base z-index from CSS)
 		this.nextTabOriginalIndex = 0; // Track the original order of tabs as they are added
 
-		Style.init();
-
 		this.setupShell();
 		this.setupResizing();
 
+		Style.init( this.domElement );
+
 		// Setup window resize listener and update mobile status
 		this.setupWindowResizeListener();
 
@@ -237,31 +237,32 @@ export class Profiler extends EventDispatcher {
 	setupShell() {
 
 		this.domElement = document.createElement( 'div' );
-		this.domElement.id = 'profiler-shell';
+
+		this.domElement.classList.add( 'three-inspector' );
 
 		this.toggleButton = document.createElement( 'button' );
-		this.toggleButton.id = 'profiler-toggle';
+		this.toggleButton.classList.add( 'profiler-toggle' );
 		this.toggleButton.innerHTML = `
-<span id="builtin-tabs-container"></span>
-<span id="toggle-text">
-	<span id="fps-counter">-</span>
+<span class="builtin-tabs-container"></span>
+<span class="toggle-text">
+	<span class="fps-counter">-</span>
 	<span class="fps-label">FPS</span>
 </span>
-<span id="toggle-icon">
+<span class="toggle-icon">
 	<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-device-ipad-horizontal-search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11.5 20h-6.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v5.5" /><path d="M9 17h2" /><path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M20.2 20.2l1.8 1.8" /></svg>
 </span>
 `;
 		this.toggleButton.onclick = () => this.togglePanel();
 
-		this.builtinTabsContainer = this.toggleButton.querySelector( '#builtin-tabs-container' );
+		this.builtinTabsContainer = this.toggleButton.querySelector( '.builtin-tabs-container' );
 
 		// Create mini-panel for builtin tabs (shown when panel is hidden)
 		this.miniPanel = document.createElement( 'div' );
-		this.miniPanel.id = 'profiler-mini-panel';
+		this.miniPanel.classList.add( 'profiler-mini-panel' );
 		this.miniPanel.className = 'profiler-mini-panel';
 
 		this.panel = document.createElement( 'div' );
-		this.panel.id = 'profiler-panel';
+		this.panel.classList.add( 'profiler-panel' );
 
 		const header = document.createElement( 'div' );
 		header.className = 'profiler-header';
@@ -285,7 +286,7 @@ export class Profiler extends EventDispatcher {
 		controls.className = 'profiler-controls';
 
 		this.floatingBtn = document.createElement( 'button' );
-		this.floatingBtn.id = 'floating-btn';
+		this.floatingBtn.classList.add( 'floating-btn' );
 		this.floatingBtn.title = 'Switch to Right Side';
 		this.floatingBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="21"></line></svg>';
 		this.floatingBtn.onclick = () => this.togglePosition();
@@ -305,12 +306,12 @@ export class Profiler extends EventDispatcher {
 		}
 
 		this.maximizeBtn = document.createElement( 'button' );
-		this.maximizeBtn.id = 'maximize-btn';
+		this.maximizeBtn.classList.add( 'maximize-btn' );
 		this.maximizeBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>';
 		this.maximizeBtn.onclick = () => this.toggleMaximize();
 
 		const hideBtn = document.createElement( 'button' );
-		hideBtn.id = 'hide-panel-btn';
+		hideBtn.classList.add( 'hide-panel-btn' );
 		hideBtn.textContent = '-';
 		hideBtn.onclick = () => this.togglePanel();
 
@@ -877,15 +878,15 @@ export class Profiler extends EventDispatcher {
 
 			if ( isDragging && hasMoved && previewWindow ) {
 
+				const finalX = parseInt( previewWindow.style.left ) + 200;
+				const finalY = parseInt( previewWindow.style.top ) + 20;
+
 				if ( previewWindow.parentNode ) {
 
 					previewWindow.parentNode.removeChild( previewWindow );
 
 				}
 
-				const finalX = parseInt( previewWindow.style.left ) + 200;
-				const finalY = parseInt( previewWindow.style.top ) + 20;
-
 				this.detachTab( tab, finalX, finalY );
 
 			} else if ( ! hasMoved ) {
@@ -975,7 +976,7 @@ export class Profiler extends EventDispatcher {
 		windowPanel.appendChild( windowHeader );
 		windowPanel.appendChild( windowContent );
 
-		document.body.appendChild( windowPanel );
+		this.domElement.appendChild( windowPanel );
 
 		return windowPanel;
 
@@ -1189,7 +1190,7 @@ export class Profiler extends EventDispatcher {
 		windowPanel.appendChild( windowHeader );
 		windowPanel.appendChild( windowContent );
 
-		document.body.appendChild( windowPanel );
+		this.domElement.appendChild( windowPanel );
 
 		// Setup window dragging
 		this.setupDetachedWindowDrag( windowPanel, windowHeader, tab );

examples/jsm/inspector/ui/Style.js

@@ -1,1666 +1,1668 @@
 export class Style {
 
-	static init() {
-
-		if ( document.getElementById( 'profiler-styles' ) ) return;
-
-		const css = `
-:root {
-	--profiler-bg: #1e1e24f5;
-	--profiler-header-bg: #2a2a33aa;
-	--profiler-header: #2a2a33;
-	--profiler-border: #4a4a5a;
-	--text-primary: #e0e0e0;
-	--text-secondary: #9a9aab;
-	--accent-color: #00aaff;
-	--color-green: #4caf50;
-	--color-yellow: #ffc107;
-	--color-red: #f44336;
-	--color-fps: rgb(63, 81, 181);
-	--color-call: rgba(255, 185, 34, 1);
-	--font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-	--font-mono: 'Fira Code', 'Courier New', Courier, monospace;
-}
+	static init( container ) {
+
+		const css = /* css */`
+@scope (.three-inspector) {
+
+	:scope {
+		--profiler-background: #1e1e24f5;
+		--profiler-header-background: #2a2a33aa;
+		--profiler-header: #2a2a33;
+		--profiler-border: #4a4a5a;
+		--text-primary: #e0e0e0;
+		--text-secondary: #9a9aab;
+		--color-accent: #00aaff;
+		--color-green: #4caf50;
+		--color-yellow: #ffc107;
+		--color-red: #f44336;
+		--color-fps: rgb(63, 81, 181);
+		--color-call: rgba(255, 185, 34, 1);
+		--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+		--font-mono: 'Courier New', Courier, monospace;
+	}
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Fira+Code&display=swap');
+	.profiler-panel *, .profiler-toggle * {
+		text-transform: initial;
+		line-height: normal;
+		box-sizing: border-box;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
 
-#profiler-panel *, #profiler-toggle * {
-	text-transform: initial;
-	line-height: normal;
-	box-sizing: border-box;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
+	.profiler-toggle {
+		position: fixed;
+		top: 15px;
+		right: 15px;
+		background-color: rgba(30, 30, 36, 0.85);
+		border: 1px solid #4a4a5a54;
+		border-radius: 12px 6px 6px 12px;
+		color: var(--text-primary);
+		cursor: pointer;
+		z-index: 1001;
+		transition: all 0.2s ease-in-out;
+		/*font-size: 14px;*/
+		font-size: 15px;
+		backdrop-filter: blur(8px);
+		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+		display: flex;
+		align-items: stretch;
+		padding: 0;
+		overflow: hidden;
+		font-family: var(--font-family);
+	}
 
-#profiler-toggle {
-	position: fixed;
-	top: 15px;
-	right: 15px;
-	background-color: rgba(30, 30, 36, 0.85);
-	border: 1px solid #4a4a5a54;
-	border-radius: 12px 6px 6px 12px;
-	color: var(--text-primary);
-	cursor: pointer;
-	z-index: 1001;
-	transition: all 0.2s ease-in-out;
-	/*font-size: 14px;*/
-	font-size: 15px;
-	backdrop-filter: blur(8px);
-	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-	display: flex;
-	align-items: stretch;
-	padding: 0;
-	overflow: hidden;
-	font-family: var(--font-family);
-}
+	.profiler-toggle.position-right.panel-open {
+		right: auto;
+		left: 15px;
+		border-radius: 6px 12px 12px 6px;
+		flex-direction: row-reverse;
+	}
 
-#profiler-toggle.position-right.panel-open {
-	right: auto;
-	left: 15px;
-	border-radius: 6px 12px 12px 6px;
-	flex-direction: row-reverse;
-}
+	.profiler-toggle.position-right.panel-open .builtin-tabs-container {
+		border-right: none;
+		border-left: 1px solid #262636;
+	}
 
-#profiler-toggle.position-right.panel-open #builtin-tabs-container {
-	border-right: none;
-	border-left: 1px solid #262636;
-}
+	.profiler-toggle:hover {
+		border-color: var(--color-accent);
+	}
 
-#profiler-toggle:hover {
-	border-color: var(--accent-color);
-}
+	.profiler-toggle.panel-open .toggle-icon {
+		background-color: rgba(0, 170, 255, 0.2);
+		color: var(--color-accent);
+	}
 
-#profiler-toggle.panel-open #toggle-icon {
-	background-color: rgba(0, 170, 255, 0.2);
-	color: var(--accent-color);
-}
+	.toggle-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 40px;
+		font-size: 20px;
+		transition: background-color 0.2s;
+	}
 
-#toggle-icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 40px;
-	font-size: 20px;
-	transition: background-color 0.2s;
-}
+	.profiler-toggle:hover .toggle-icon {
+		background-color: rgba(255, 255, 255, 0.05);
+	}
 
-#profiler-toggle:hover #toggle-icon {
-	background-color: rgba(255, 255, 255, 0.05);
-}
+	.profiler-toggle.panel-open:hover .toggle-icon {
+		background-color: rgba(0, 170, 255, 0.3);
+	}
 
-#profiler-toggle.panel-open:hover #toggle-icon {
-	background-color: rgba(0, 170, 255, 0.3);
-}
+	.toggle-separator {
+		width: 1px;
+		background-color: var(--profiler-border);
+	}
 
-.toggle-separator {
-	width: 1px;
-	background-color: var(--profiler-border);
-}
+	.toggle-text {
+		display: flex;
+		align-items: baseline;
+		padding: 8px 14px;
+		min-width: 80px;
+		justify-content: right;
+	}
 
-#toggle-text {
-	display: flex;
-	align-items: baseline;
-	padding: 8px 14px;
-	min-width: 80px;
-	justify-content: right;
-}
+	.toggle-text .fps-label {
+		font-size: 0.7em;
+		margin-left: 10px;
+		color: #999;
+	}
 
-#toggle-text .fps-label {
-	font-size: 0.7em;
-	margin-left: 10px;
-    color: #999;
-}
+	.builtin-tabs-container {
+		display: flex;
+		align-items: stretch;
+		gap: 0;
+		border-right: 1px solid #262636;
+		order: -1;
+	}
 
-#builtin-tabs-container {
-	display: flex;
-	align-items: stretch;
-	gap: 0;
-	border-right: 1px solid #262636;
-	order: -1;
-}
+	.builtin-tab-btn {
+		background: transparent;
+		border: none;
+		color: var(--text-secondary);
+		cursor: pointer;
+		padding: 8px 14px;
+		font-family: var(--font-family);
+		font-size: 13px;
+		font-weight: 600;
+		transition: all 0.2s;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 32px;
+		position: relative;
+	}
 
-.builtin-tab-btn {
-	background: transparent;
-	border: none;
-	color: var(--text-secondary);
-	cursor: pointer;
-	padding: 8px 14px;
-	font-family: var(--font-family);
-	font-size: 13px;
-	font-weight: 600;
-	transition: all 0.2s;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-width: 32px;
-	position: relative;
-}
+	.builtin-tab-btn svg {
+		width: 20px;
+		height: 20px;
+		stroke: currentColor;
+	}
 
-.builtin-tab-btn svg {
-	width: 20px;
-	height: 20px;
-	stroke: currentColor;
-}
+	.builtin-tab-btn:hover {
+		background-color: rgba(255, 255, 255, 0.08);
+		color: var(--color-accent);
+	}
 
-.builtin-tab-btn:hover {
-	background-color: rgba(255, 255, 255, 0.08);
-	color: var(--accent-color);
-}
+	.builtin-tab-btn:active {
+		background-color: rgba(255, 255, 255, 0.12);
+	}
 
-.builtin-tab-btn:active {
-	background-color: rgba(255, 255, 255, 0.12);
-}
+	.builtin-tab-btn.active {
+		background-color: rgba(0, 170, 255, 0.2);
+		color: var(--color-accent);
+	}
 
-.builtin-tab-btn.active {
-	background-color: rgba(0, 170, 255, 0.2);
-	color: var(--accent-color);
-}
+	.builtin-tab-btn.active:hover {
+		background-color: rgba(0, 170, 255, 0.3);
+	}
 
-.builtin-tab-btn.active:hover {
-	background-color: rgba(0, 170, 255, 0.3);
-}
+	.profiler-mini-panel {
+		position: fixed;
+		top: 60px;
+		right: 15px;
+		background-color: rgba(30, 30, 36, 0.85);
+		border: 1px solid #4a4a5a54;
+		border-radius: 8px;
+		color: var(--text-primary);
+		z-index: 9999;
+		backdrop-filter: blur(8px);
+		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
+		font-family: var(--font-family);
+		font-size: 11px;
+		width: 350px;
+		max-height: calc(100vh - 100px);
+		overflow-y: auto;
+		overflow-x: hidden;
+		display: none;
+		opacity: 0;
+		transform: translateY(-10px) scale(0.98);
+		transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
+					transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+	}
 
-#profiler-mini-panel {
-	position: fixed;
-	top: 60px;
-	right: 15px;
-	background-color: rgba(30, 30, 36, 0.85);
-	border: 1px solid #4a4a5a54;
-	border-radius: 8px;
-	color: var(--text-primary);
-	z-index: 9999;
-	backdrop-filter: blur(8px);
-	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
-	font-family: var(--font-family);
-	font-size: 11px;
-	width: 350px;
-	max-height: calc(100vh - 100px);
-	overflow-y: auto;
-	overflow-x: hidden;
-	display: none;
-	opacity: 0;
-	transform: translateY(-10px) scale(0.98);
-	transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
-	            transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-}
+	.profiler-mini-panel.position-right.panel-open {
+		right: auto;
+		left: 15px;
+	}
 
-#profiler-mini-panel.position-right.panel-open {
-	right: auto;
-	left: 15px;
-}
+	.profiler-mini-panel.visible {
+		display: block;
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
 
-#profiler-mini-panel.visible {
-	display: block;
-	opacity: 1;
-	transform: translateY(0) scale(1);
-}
+	.profiler-mini-panel::-webkit-scrollbar {
+		width: 6px;
+	}
 
-#profiler-mini-panel::-webkit-scrollbar {
-	width: 6px;
-}
+	.profiler-mini-panel::-webkit-scrollbar-track {
+		background: transparent;
+	}
 
-#profiler-mini-panel::-webkit-scrollbar-track {
-	background: transparent;
-}
+	.profiler-mini-panel::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.15);
+		border-radius: 3px;
+		transition: background 0.2s;
+	}
 
-#profiler-mini-panel::-webkit-scrollbar-thumb {
-	background: rgba(255, 255, 255, 0.15);
-	border-radius: 3px;
-	transition: background 0.2s;
-}
+	.profiler-mini-panel::-webkit-scrollbar-thumb:hover {
+		background: rgba(255, 255, 255, 0.25);
+	}
 
-#profiler-mini-panel::-webkit-scrollbar-thumb:hover {
-	background: rgba(255, 255, 255, 0.25);
-}
+	.mini-panel-content {
+		padding: 0;
+		font-size: 11px;
+		line-height: 1.5;
+		font-family: var(--font-mono);
+		letter-spacing: 0.3px;
+		user-select: none;
+		-webkit-user-select: none;
+	}
 
-.mini-panel-content {
-	padding: 0;
-	font-size: 11px;
-	line-height: 1.5;
-	font-family: var(--font-mono);
-	letter-spacing: 0.3px;
-	user-select: none;
-	-webkit-user-select: none;
-}
+	.mini-panel-content .profiler-content {
+		display: block !important;
+		background: transparent;
+	}
 
-.mini-panel-content .profiler-content {
-	display: block !important;
-	background: transparent;
-}
+	.mini-panel-content .list-scroll-wrapper {
+		max-height: calc(100vh - 120px);
+		overflow-y: auto;
+		overflow-x: hidden;
+		width: 100%;
+	}
 
-.mini-panel-content .list-scroll-wrapper {
-	max-height: calc(100vh - 120px);
-	overflow-y: auto;
-	overflow-x: hidden;
-	width: 100%;
-}
+	.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar {
+		width: 4px;
+	}
 
-.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar {
-	width: 4px;
-}
+	.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-track {
+		background: transparent;
+	}
 
-.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-track {
-	background: transparent;
-}
+	.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.1);
+		border-radius: 2px;
+	}
 
-.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-thumb {
-	background: rgba(255, 255, 255, 0.1);
-	border-radius: 2px;
-}
+	.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-thumb:hover {
+		background: rgba(255, 255, 255, 0.2);
+	}
 
-.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-thumb:hover {
-	background: rgba(255, 255, 255, 0.2);
-}
+	.mini-panel-content .parameters {
+		background: transparent;
+		border: none;
+		box-shadow: none;
+		padding: 4px;
+	}
 
-.mini-panel-content .parameters {
-	background: transparent;
-	border: none;
-	box-shadow: none;
-	padding: 4px;
-}
+	.mini-panel-content .list-container.parameters {
+		padding: 2px 6px 0px 6px !important;
+	}
 
-.mini-panel-content .list-container.parameters {
-	padding: 2px 6px 0px 6px !important;
-}
+	.mini-panel-content .list-header {
+		display: none;
+		padding: 2px 4px;
+		font-size: 11px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+	}
 
-.mini-panel-content .list-header {
-	display: none;
-	padding: 2px 4px;
-	font-size: 11px;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
-}
+	.mini-panel-content .list-item {
+		border-bottom: 1px solid rgba(74, 74, 90, 0.2);
+		transition: background-color 0.15s;
+	}
 
-.mini-panel-content .list-item {
-	border-bottom: 1px solid rgba(74, 74, 90, 0.2);
-	transition: background-color 0.15s;
-}
+	.mini-panel-content .list-item:last-child {
+		border-bottom: none;
+	}
 
-.mini-panel-content .list-item:last-child {
-	border-bottom: none;
-}
+	.mini-panel-content .list-item:hover {
+		background-color: rgba(255, 255, 255, 0.04);
+	}
 
-.mini-panel-content .list-item:hover {
-	background-color: rgba(255, 255, 255, 0.04);
-}
+	.mini-panel-content .list-item.actionable:hover {
+		background-color: rgba(255, 255, 255, 0.06);
+		cursor: pointer;
+	}
 
-.mini-panel-content .list-item.actionable:hover {
-	background-color: rgba(255, 255, 255, 0.06);
-	cursor: pointer;
-}
+	/* Style adjustments for lil-gui look */
+	.mini-panel-content .item-row {
+		padding: 3px 8px;
+		min-height: 24px;
+	}
 
-/* Style adjustments for lil-gui look */
-.mini-panel-content .item-row {
-	padding: 3px 8px;
-	min-height: 24px;
-}
+	.mini-panel-content .list-item-row {
+		padding: 1px 4px;
+		gap: 8px;
+		min-height: 21px;
+		align-items: center;
+	}
 
-.mini-panel-content .list-item-row {
-	padding: 1px 4px;
-	gap: 8px;
-	min-height: 21px;
-	align-items: center;
-}
+	.mini-panel-content input[type="checkbox"] {
+		width: 12px;
+		height: 12px;
+	}
 
-.mini-panel-content input[type="checkbox"] {
-	width: 12px;
-	height: 12px;
-}
+	.mini-panel-content input[type="range"] {
+		height: 18px;
+	}
 
-.mini-panel-content input[type="range"] {
-	height: 18px;
-}
+	.mini-panel-content .value-number input,
+	.mini-panel-content .value-slider input {
+		background-color: rgba(0, 0, 0, 0.3);
+		border: 1px solid rgba(74, 74, 90, 0.5);
+		font-size: 10px;
+	}
 
-.mini-panel-content .value-number input,
-.mini-panel-content .value-slider input {
-	background-color: rgba(0, 0, 0, 0.3);
-	border: 1px solid rgba(74, 74, 90, 0.5);
-	font-size: 10px;
-}
+	.mini-panel-content .value-number input:focus,
+	.mini-panel-content .value-slider input:focus {
+		border-color: var(--color-accent);
+	}
 
-.mini-panel-content .value-number input:focus,
-.mini-panel-content .value-slider input:focus {
-	border-color: var(--accent-color);
-}
+	.mini-panel-content .value-slider {
+		gap: 6px;
+	}
 
-.mini-panel-content .value-slider {
-	gap: 6px;
-}
+	/* Compact nested items */
+	.mini-panel-content .list-item .list-item {
+		margin-left: 8px;
+	}
 
-/* Compact nested items */
-.mini-panel-content .list-item .list-item {
-	margin-left: 8px;
-}
+	.mini-panel-content .list-item .list-item .item-row,
+	.mini-panel-content .list-item .list-item .list-item-row {
+		padding: 2px 6px;
+		min-height: 22px;
+	}
 
-.mini-panel-content .list-item .list-item .item-row,
-.mini-panel-content .list-item .list-item .list-item-row {
-	padding: 2px 6px;
-	min-height: 22px;
-}
+	/* Compact collapsible headers */
+	.mini-panel-content .collapsible .item-row,
+	.mini-panel-content .list-item-row.collapsible {
+		padding: 2px 8px;
+		font-weight: 600;
+		min-height: 16px;
+		display: flex;
+		align-items: center;
+	}
 
-/* Compact collapsible headers */
-.mini-panel-content .collapsible .item-row,
-.mini-panel-content .list-item-row.collapsible {
-	padding: 2px 8px;
-	font-weight: 600;
-	min-height: 16px;
-	display: flex;
-	align-items: center;
-}
+	.mini-panel-content .collapsible-icon {
+		font-size: 10px;
+		width: 14px;
+		height: 14px;
+	}
 
-.mini-panel-content .collapsible-icon {
-	font-size: 10px;
-	width: 14px;
-	height: 14px;
-}
+	.mini-panel-content .param-control input[type="range"] {
+		height: 12px;
+		margin-top: 1px;
+		padding-top: 5px;
+		user-select: none;
+		-webkit-user-select: none;
+		outline: none;
+	}
 
-.mini-panel-content .param-control input[type="range"] {
-	height: 12px;
-	margin-top: 1px;
-	padding-top: 5px;
-	user-select: none;
-	-webkit-user-select: none;
-	outline: none;
-}
+	.mini-panel-content .param-control input[type="range"]::-webkit-slider-thumb {
+		width: 14px;
+		height: 14px;
+		margin-top: -5px;
+		user-select: none;
+		-webkit-user-select: none;
+	}
 
-.mini-panel-content .param-control input[type="range"]::-webkit-slider-thumb {
-	width: 14px;
-	height: 14px;
-	margin-top: -5px;
-	user-select: none;
-	-webkit-user-select: none;
-}
+	.mini-panel-content .param-control input[type="range"]::-moz-range-thumb {
+		width: 14px;
+		height: 14px;
+		user-select: none;
+		-moz-user-select: none;
+	}
 
-.mini-panel-content .param-control input[type="range"]::-moz-range-thumb {
-	width: 14px;
-	height: 14px;
-	user-select: none;
-	-moz-user-select: none;
-}
+	.mini-panel-content .list-children-container {
+		padding-left: 0;
+	}
 
-.mini-panel-content .list-children-container {
-	padding-left: 0;
-}
+	.mini-panel-content .param-control input[type="number"] {
+		flex-basis: 60px !important;
+	}
 
-.mini-panel-content .param-control input[type="number"] {
-	flex-basis: 60px !important;
-}
+	.mini-panel-content .param-control {
+		align-items: center;
+	}
 
-.mini-panel-content .param-control {
-	align-items: center;
-}
+	.mini-panel-content .param-control select {
+		font-size: 11px;
+	}
 
-.mini-panel-content .param-control select {
-	font-size: 11px;
-}
+	.mini-panel-content .list-item-wrapper {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
 
-.mini-panel-content .list-item-wrapper {
-	margin-top: 0;
-	margin-bottom: 0;
-}
+	.profiler-panel {
+		position: fixed;
+		z-index: 1001 !important;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 350px;
+		background-color: var(--profiler-background);
+		backdrop-filter: blur(8px);
+		border-top: 2px solid var(--profiler-border);
+		color: var(--text-primary);
+		display: flex;
+		flex-direction: column;
+		z-index: 1000;
+		/*box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.5);*/
+		transform: translateY(100%);
+		transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.3s ease-out, width 0.3s ease-out;
+		font-family: var(--font-mono);
+	}
 
-#profiler-panel {
-	position: fixed;
-	z-index: 1001 !important;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	height: 350px;
-	background-color: var(--profiler-bg);
-	backdrop-filter: blur(8px);
-	border-top: 2px solid var(--profiler-border);
-	color: var(--text-primary);
-	display: flex;
-	flex-direction: column;
-	z-index: 1000;
-	/*box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.5);*/
-	transform: translateY(100%);
-	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.3s ease-out, width 0.3s ease-out;
-	font-family: var(--font-mono);
-}
+	.profiler-panel.resizing,
+	.profiler-panel.dragging {
+		transition: none;
+	}
 
-#profiler-panel.resizing,
-#profiler-panel.dragging {
-	transition: none;
-}
+	.profiler-panel.visible {
+		transform: translateY(0);
+	}
 
-#profiler-panel.visible {
-	transform: translateY(0);
-}
+	.profiler-panel.maximized {
+		height: 100vh;
+	}
 
-#profiler-panel.maximized {
-	height: 100vh;
-}
+	/* Position-specific styles */
+	.profiler-panel.position-top {
+		bottom: auto;
+		top: 0;
+		border-top: none;
+		border-bottom: 2px solid var(--profiler-border);
+		transform: translateY(-100%);
+	}
 
-/* Position-specific styles */
-#profiler-panel.position-top {
-	bottom: auto;
-	top: 0;
-	border-top: none;
-	border-bottom: 2px solid var(--profiler-border);
-	transform: translateY(-100%);
-}
+	.profiler-panel.position-top.visible {
+		transform: translateY(0);
+	}
 
-#profiler-panel.position-top.visible {
-	transform: translateY(0);
-}
+	.profiler-panel.position-bottom {
+		/* Default position - already defined above */
+	}
 
-#profiler-panel.position-bottom {
-	/* Default position - already defined above */
-}
+	.profiler-panel.position-left {
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: auto;
+		width: 350px;
+		height: 100%;
+		border-top: none;
+		border-right: 2px solid var(--profiler-border);
+		transform: translateX(-100%);
+	}
 
-#profiler-panel.position-left {
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: auto;
-	width: 350px;
-	height: 100%;
-	border-top: none;
-	border-right: 2px solid var(--profiler-border);
-	transform: translateX(-100%);
-}
+	.profiler-panel.position-left.visible {
+		transform: translateX(0);
+	}
 
-#profiler-panel.position-left.visible {
-	transform: translateX(0);
-}
+	.profiler-panel.position-right {
+		top: 0;
+		bottom: 0;
+		left: auto;
+		right: 0;
+		width: 350px;
+		height: 100%;
+		border-top: none;
+		border-left: 2px solid var(--profiler-border);
+		transform: translateX(100%);
+	}
 
-#profiler-panel.position-right {
-	top: 0;
-	bottom: 0;
-	left: auto;
-	right: 0;
-	width: 350px;
-	height: 100%;
-	border-top: none;
-	border-left: 2px solid var(--profiler-border);
-	transform: translateX(100%);
-}
+	.profiler-panel.position-right.visible {
+		transform: translateX(0);
+	}
 
-#profiler-panel.position-right.visible {
-	transform: translateX(0);
-}
+	.profiler-panel.position-floating {
+		border: 2px solid var(--profiler-border);
+		border-radius: 8px;
+		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+		transform: none !important;
+		overflow: hidden;
+	}
 
-#profiler-panel.position-floating {
-	border: 2px solid var(--profiler-border);
-	border-radius: 8px;
-	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-	transform: none !important;
-	overflow: hidden;
-}
+	.profiler-panel.position-floating.visible {
+		transform: none !important;
+	}
 
-#profiler-panel.position-floating.visible {
-	transform: none !important;
-}
+	.profiler-panel.position-floating .profiler-header {
+		border-radius: 6px 6px 0 0;
+	}
 
-#profiler-panel.position-floating .profiler-header {
-	border-radius: 6px 6px 0 0;
-}
+	.profiler-panel.position-floating .panel-resizer {
+		bottom: 0;
+		right: 0;
+		top: auto;
+		left: auto;
+		width: 16px;
+		height: 16px;
+		cursor: nwse-resize;
+		border-radius: 0 0 6px 0;
+	}
 
-#profiler-panel.position-floating .panel-resizer {
-	bottom: 0;
-	right: 0;
-	top: auto;
-	left: auto;
-	width: 16px;
-	height: 16px;
-	cursor: nwse-resize;
-	border-radius: 0 0 6px 0;
-}
+	.profiler-panel.position-floating .panel-resizer::after {
+		content: '';
+		position: absolute;
+		right: 2px;
+		bottom: 2px;
+		width: 10px;
+		height: 10px;
+		background: linear-gradient(135deg, transparent 0%, transparent 45%, var(--profiler-border) 45%, var(--profiler-border) 55%, transparent 55%);
+	}
 
-#profiler-panel.position-floating .panel-resizer::after {
-	content: '';
-	position: absolute;
-	right: 2px;
-	bottom: 2px;
-	width: 10px;
-	height: 10px;
-	background: linear-gradient(135deg, transparent 0%, transparent 45%, var(--profiler-border) 45%, var(--profiler-border) 55%, transparent 55%);
-}
 
+	.panel-resizer {
+		position: absolute;
+		top: -2px;
+		left: 0;
+		width: 100%;
+		height: 5px;
+		cursor: ns-resize;
+		z-index: 1001;
+		touch-action: none;
+	}
 
-.panel-resizer {
-	position: absolute;
-	top: -2px;
-	left: 0;
-	width: 100%;
-	height: 5px;
-	cursor: ns-resize;
-	z-index: 1001;
-	touch-action: none;
-}
+	.profiler-panel.position-top .panel-resizer {
+		top: auto;
+		bottom: -2px;
+	}
 
-#profiler-panel.position-top .panel-resizer {
-	top: auto;
-	bottom: -2px;
-}
+	.profiler-panel.position-left .panel-resizer {
+		top: 0;
+		left: auto;
+		right: -2px;
+		width: 5px;
+		height: 100%;
+		cursor: ew-resize;
+	}
 
-#profiler-panel.position-left .panel-resizer {
-	top: 0;
-	left: auto;
-	right: -2px;
-	width: 5px;
-	height: 100%;
-	cursor: ew-resize;
-}
+	.profiler-panel.position-right .panel-resizer {
+		top: 0;
+		left: -2px;
+		right: auto;
+		width: 5px;
+		height: 100%;
+		cursor: ew-resize;
+	}
 
-#profiler-panel.position-right .panel-resizer {
-	top: 0;
-	left: -2px;
-	right: auto;
-	width: 5px;
-	height: 100%;
-	cursor: ew-resize;
-}
+	.profiler-header {
+		display: flex;
+		background-color: var(--profiler-header-background);
+		border-bottom: 1px solid var(--profiler-border);
+		flex-shrink: 0;
+		justify-content: space-between;
+		align-items: stretch;
+
+		overflow-x: auto;
+		overflow-y: hidden;
+		width: calc(100% - 134px);
+		height: 38px;
+		user-select: none;
+		-webkit-user-select: none;
+	}
 
-.profiler-header {
-	display: flex;
-	background-color: var(--profiler-header-bg);
-	border-bottom: 1px solid var(--profiler-border);
-	flex-shrink: 0;
-	justify-content: space-between;
-	align-items: stretch;
-
-	overflow-x: auto;
-	overflow-y: hidden;
-	width: calc(100% - 134px);
-	height: 38px;
-	user-select: none;
-	-webkit-user-select: none;
-}
+	/* Adjust header width based on panel position */
+	.profiler-panel.position-right .profiler-header,
+	.profiler-panel.position-left .profiler-header {
+		width: calc(100% - 134px);
+	}
 
-/* Adjust header width based on panel position */
-#profiler-panel.position-right .profiler-header,
-#profiler-panel.position-left .profiler-header {
-	width: calc(100% - 134px);
-}
+	.profiler-panel.position-bottom .profiler-header,
+	.profiler-panel.position-top .profiler-header {
+		width: calc(100% - 134px);
+	}
 
-#profiler-panel.position-bottom .profiler-header,
-#profiler-panel.position-top .profiler-header {
-	width: calc(100% - 134px);
-}
+	/* Adjust header width when position toggle button is hidden (mobile) */
+	.profiler-panel.hide-position-toggle .profiler-header {
+		width: calc(100% - 90px);
+	}
 
-/* Adjust header width when position toggle button is hidden (mobile) */
-#profiler-panel.hide-position-toggle .profiler-header {
-	width: calc(100% - 90px);
-}
+	/* ===== RULES FOR WHEN THERE ARE NO TABS ===== */
 
-/* ===== RULES FOR WHEN THERE ARE NO TABS ===== */
+	/* Horizontal mode (bottom/top) without tabs */
+	.profiler-panel.position-bottom.no-tabs:not(.maximized),
+	.profiler-panel.position-top.no-tabs:not(.maximized) {
+		height: 38px !important;
+		min-height: 38px !important;
+	}
 
-/* Horizontal mode (bottom/top) without tabs */
-#profiler-panel.position-bottom.no-tabs:not(.maximized),
-#profiler-panel.position-top.no-tabs:not(.maximized) {
-	height: 38px !important;
-	min-height: 38px !important;
-}
+	.profiler-panel.position-bottom.no-tabs .profiler-header,
+	.profiler-panel.position-top.no-tabs .profiler-header {
+		width: 100%;
+		height: 38px;
+		border-bottom: none;
+	}
 
-#profiler-panel.position-bottom.no-tabs .profiler-header,
-#profiler-panel.position-top.no-tabs .profiler-header {
-	width: 100%;
-	height: 38px;
-	border-bottom: none;
-}
+	.profiler-panel.position-bottom.no-tabs .profiler-content-wrapper,
+	.profiler-panel.position-top.no-tabs .profiler-content-wrapper {
+		display: none;
+	}
 
-#profiler-panel.position-bottom.no-tabs .profiler-content-wrapper,
-#profiler-panel.position-top.no-tabs .profiler-content-wrapper {
-	display: none;
-}
+	.profiler-panel.position-bottom.no-tabs .panel-resizer,
+	.profiler-panel.position-top.no-tabs .panel-resizer {
+		display: none;
+	}
 
-#profiler-panel.position-bottom.no-tabs .panel-resizer,
-#profiler-panel.position-top.no-tabs .panel-resizer {
-	display: none;
-}
+	/* Vertical mode (right/left) without tabs */
+	.profiler-panel.position-right.no-tabs:not(.maximized),
+	.profiler-panel.position-left.no-tabs:not(.maximized) {
+		width: 45px !important;
+		min-width: 45px !important;
+	}
 
-/* Vertical mode (right/left) without tabs */
-#profiler-panel.position-right.no-tabs:not(.maximized),
-#profiler-panel.position-left.no-tabs:not(.maximized) {
-	width: 45px !important;
-	min-width: 45px !important;
-}
+	/* Vertical layout for header when no tabs */
+	.profiler-panel.position-right.no-tabs .profiler-header,
+	.profiler-panel.position-left.no-tabs .profiler-header {
+		width: 100%;
+		flex-direction: column;
+		height: 100%;
+		border-bottom: none;
+	}
 
-/* Vertical layout for header when no tabs */
-#profiler-panel.position-right.no-tabs .profiler-header,
-#profiler-panel.position-left.no-tabs .profiler-header {
-	width: 100%;
-	flex-direction: column;
-	height: 100%;
-	border-bottom: none;
-}
+	/* Vertical layout for controls when no tabs */
+	.profiler-panel.position-right.no-tabs .profiler-controls,
+	.profiler-panel.position-left.no-tabs .profiler-controls {
+		position: static;
+		flex-direction: column-reverse;
+		justify-content: flex-end;
+		width: 100%;
+		height: 100%;
+		border-bottom: none;
+		border-left: none;
+		background: transparent;
+	}
 
-/* Vertical layout for controls when no tabs */
-#profiler-panel.position-right.no-tabs .profiler-controls,
-#profiler-panel.position-left.no-tabs .profiler-controls {
-	position: static;
-	flex-direction: column-reverse;
-	justify-content: flex-end;
-	width: 100%;
-	height: 100%;
-	border-bottom: none;
-	border-left: none;
-	background: transparent;
-}
+	.profiler-panel.position-right.no-tabs .profiler-controls button,
+	.profiler-panel.position-left.no-tabs .profiler-controls button {
+		width: 100%;
+		height: 45px;
+		border-left: none;
+		border-top: none;
+		border-bottom: 1px solid var(--profiler-border);
+	}
 
-#profiler-panel.position-right.no-tabs .profiler-controls button,
-#profiler-panel.position-left.no-tabs .profiler-controls button {
-	width: 100%;
-	height: 45px;
-	border-left: none;
-	border-top: none;
-	border-bottom: 1px solid var(--profiler-border);
-}
+	.profiler-panel.position-right.no-tabs .profiler-content-wrapper,
+	.profiler-panel.position-left.no-tabs .profiler-content-wrapper {
+		display: none;
+	}
 
-#profiler-panel.position-right.no-tabs .profiler-content-wrapper,
-#profiler-panel.position-left.no-tabs .profiler-content-wrapper {
-	display: none;
-}
+	.profiler-panel.position-right.no-tabs .profiler-tabs,
+	.profiler-panel.position-left.no-tabs .profiler-tabs {
+		display: none;
+	}
 
-#profiler-panel.position-right.no-tabs .profiler-tabs,
-#profiler-panel.position-left.no-tabs .profiler-tabs {
-	display: none;
-}
+	.profiler-panel.position-right.no-tabs .panel-resizer,
+	.profiler-panel.position-left.no-tabs .panel-resizer {
+		display: none;
+	}
 
-#profiler-panel.position-right.no-tabs .panel-resizer,
-#profiler-panel.position-left.no-tabs .panel-resizer {
-	display: none;
-}
+	/* Hide position toggle on mobile without tabs */
+	.profiler-panel.hide-position-toggle.position-right.no-tabs:not(.maximized),
+	.profiler-panel.hide-position-toggle.position-left.no-tabs:not(.maximized) {
+		width: 45px !important;
+		min-width: 45px !important;
+	}
 
-/* Hide position toggle on mobile without tabs */
-#profiler-panel.hide-position-toggle.position-right.no-tabs:not(.maximized),
-#profiler-panel.hide-position-toggle.position-left.no-tabs:not(.maximized) {
-	width: 45px !important;
-	min-width: 45px !important;
-}
+	/* Hide drag indicator on mobile devices */
+	.profiler-panel.is-mobile .tab-btn.active::before {
+		display: none;
+	}
 
-/* Hide drag indicator on mobile devices */
-#profiler-panel.is-mobile .tab-btn.active::before {
-	display: none;
-}
+	.profiler-header::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
 
-.profiler-header::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
-}
+	.profiler-header::-webkit-scrollbar-track {
+		background: transparent;
+	}
 
-.profiler-header::-webkit-scrollbar-track {
-	background: transparent;
-}
+	.profiler-header::-webkit-scrollbar-thumb {
+		background-color: rgba(0, 0, 0, 0.25);
+		border-radius: 10px;
+		transition: background 0.3s ease;
+	}
 
-.profiler-header::-webkit-scrollbar-thumb {
-	background-color: rgba(0, 0, 0, 0.25);
-	border-radius: 10px;
-	transition: background 0.3s ease;
-}
+	.profiler-header::-webkit-scrollbar-thumb:hover {
+		background-color: rgba(0, 0, 0, 0.4);
+	}
 
-.profiler-header::-webkit-scrollbar-thumb:hover {
-	background-color: rgba(0, 0, 0, 0.4);
-}
+	.profiler-header::-webkit-scrollbar-corner {
+		background: transparent;
+	}
 
-.profiler-header::-webkit-scrollbar-corner {
-	background: transparent;
-}
+	.profiler-panel.dragging .profiler-header {
+		cursor: grabbing !important;
+	}
 
-#profiler-panel.dragging .profiler-header {
-	cursor: grabbing !important;
-}
+	.profiler-panel.dragging {
+		opacity: 0.8;
+	}
 
-#profiler-panel.dragging {
-	opacity: 0.8;
-}
+	.profiler-tabs {
+		display: flex;
+		cursor: grab;
+		position: relative;
+	}
 
-.profiler-tabs {
-	display: flex;
-	cursor: grab;
-	position: relative;
-}
+	.profiler-tabs:active {
+		cursor: grabbing;
+	}
 
-.profiler-tabs:active {
-	cursor: grabbing;
-}
+	.profiler-tabs::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
 
-.profiler-tabs::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
-}
+	.profiler-tabs::-webkit-scrollbar-track {
+		background: transparent;
+	}
 
-.profiler-tabs::-webkit-scrollbar-track {
-	background: transparent;
-}
+	.profiler-tabs::-webkit-scrollbar-thumb {
+		background-color: rgba(0, 0, 0, 0.25);
+		border-radius: 10px;
+		transition: background 0.3s ease;
+	}
 
-.profiler-tabs::-webkit-scrollbar-thumb {
-	background-color: rgba(0, 0, 0, 0.25);
-	border-radius: 10px;
-	transition: background 0.3s ease;
-}
+	.profiler-tabs::-webkit-scrollbar-thumb:hover {
+		background-color: rgba(0, 0, 0, 0.4);
+	}
 
-.profiler-tabs::-webkit-scrollbar-thumb:hover {
-	background-color: rgba(0, 0, 0, 0.4);
-}
+	.profiler-tabs::-webkit-scrollbar-corner {
+		background: transparent;
+	}
 
-.profiler-tabs::-webkit-scrollbar-corner {
-	background: transparent;
-}
+	.profiler-controls {
+		display: flex;
+		position: absolute;
+		right: 0;
+		top: 0;
+		height: 38px;
+		background: var(--profiler-header-background);
+		border-bottom: 1px solid var(--profiler-border);
+	}
 
-.profiler-controls {
-	display: flex;
-	position: absolute;
-	right: 0;
-	top: 0;
-	height: 38px;
-	background: var(--profiler-header-bg);
-	border-bottom: 1px solid var(--profiler-border);
-}
+	.tab-btn {
+		position: relative;
+		background: transparent;
+		border: none;
+		/*border-right: 1px solid var(--profiler-border);*/
+		color: var(--text-secondary);
+		padding: 8px 18px;
+		cursor: default;
+		display: flex;
+		align-items: center;
+		font-family: var(--font-family);
+		font-weight: 600;
+		font-size: 14px;
+		user-select: none;
+		transition: opacity 0.2s, transform 0.2s;
+		touch-action: pan-x;
+		white-space: nowrap;
+	}
 
-.tab-btn {
-	position: relative;
-	background: transparent;
-	border: none;
-	/*border-right: 1px solid var(--profiler-border);*/
-	color: var(--text-secondary);
-	padding: 8px 18px;
-	cursor: default;
-	display: flex;
-	align-items: center;
-	font-family: var(--font-family);
-	font-weight: 600;
-	font-size: 14px;
-	user-select: none;
-	transition: opacity 0.2s, transform 0.2s;
-	touch-action: pan-x;
-}
+	.tab-btn.active {
+		border-bottom: 2px solid var(--color-accent);
+		color: white;
+	}
 
-.tab-btn.active {
-	border-bottom: 2px solid var(--accent-color);
-	color: white;
-}
+	.tab-btn.active::before {
+		content: '⋮⋮';
+		position: absolute;
+		left: 3px;
+		top: calc(50% - .1rem);
+		transform: translateY(-50%);
+		color: var(--profiler-border);
+		font-size: 18px;
+		letter-spacing: -2px;
+		opacity: 0.6;
+	}
 
-.tab-btn.active::before {
-	content: '⋮⋮';
-	position: absolute;
-	left: 3px;
-	top: calc(50% - .1rem);
-	transform: translateY(-50%);
-	color: var(--profiler-border);
-	font-size: 18px;
-	letter-spacing: -2px;
-	opacity: 0.6;
-}
+	.tab-btn.no-detach.active::before {
+		display: none;
+	}
 
-.tab-btn.no-detach.active::before {
-	display: none;
-}
+	.floating-btn,
+	.maximize-btn,
+	.hide-panel-btn {
+		background: transparent;
+		border: none;
+		border-left: 1px solid var(--profiler-border);
+		color: var(--text-secondary);
+		width: 45px;
+		height: 100%;
+		cursor: pointer;
+		transition: all 0.2s;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
 
-#floating-btn,
-#maximize-btn,
-#hide-panel-btn {
-	background: transparent;
-	border: none;
-	border-left: 1px solid var(--profiler-border);
-	color: var(--text-secondary);
-	width: 45px;
-	height: 100%;
-	cursor: pointer;
-	transition: all 0.2s;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-}
+	/* Disable transitions in vertical mode to avoid broken animations */
+	.profiler-panel.position-right .floating-btn,
+	.profiler-panel.position-right .maximize-btn,
+	.profiler-panel.position-right .hide-panel-btn,
+	.profiler-panel.position-left .floating-btn,
+	.profiler-panel.position-left .maximize-btn,
+	.profiler-panel.position-left .hide-panel-btn {
+		transition: background-color 0.2s, color 0.2s;
+	}
 
-/* Disable transitions in vertical mode to avoid broken animations */
-#profiler-panel.position-right #floating-btn,
-#profiler-panel.position-right #maximize-btn,
-#profiler-panel.position-right #hide-panel-btn,
-#profiler-panel.position-left #floating-btn,
-#profiler-panel.position-left #maximize-btn,
-#profiler-panel.position-left #hide-panel-btn {
-	transition: background-color 0.2s, color 0.2s;
-}
+	.floating-btn:hover,
+	.maximize-btn:hover,
+	.hide-panel-btn:hover {
+		background-color: rgba(255, 255, 255, 0.1);
+		color: var(--text-primary);
+	}
 
-#floating-btn:hover,
-#maximize-btn:hover,
-#hide-panel-btn:hover {
-	background-color: rgba(255, 255, 255, 0.1);
-	color: var(--text-primary);
-}
+	/* Hide maximize button when there are no tabs */
+	.profiler-panel.position-right.no-tabs .maximize-btn,
+	.profiler-panel.position-left.no-tabs .maximize-btn,
+	.profiler-panel.position-bottom.no-tabs .maximize-btn,
+	.profiler-panel.position-top.no-tabs .maximize-btn {
+		display: none !important;
+	}
 
-/* Hide maximize button when there are no tabs */
-#profiler-panel.position-right.no-tabs #maximize-btn,
-#profiler-panel.position-left.no-tabs #maximize-btn,
-#profiler-panel.position-bottom.no-tabs #maximize-btn,
-#profiler-panel.position-top.no-tabs #maximize-btn {
-	display: none !important;
-}
+	.profiler-content-wrapper {
+		flex-grow: 1;
+		overflow: hidden;
+		position: relative;
+	}
 
-.profiler-content-wrapper {
-	flex-grow: 1;
-	overflow: hidden;
-	position: relative;
-}
+	.profiler-content {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		overflow-y: auto;
+		font-size: 13px;
+		visibility: hidden;
+		opacity: 0;
+		transition: opacity 0.2s, visibility 0.2s;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		user-select: none;
+		-webkit-user-select: none;
+	}
 
-.profiler-content {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	overflow-y: auto;
-	font-size: 13px;
-	visibility: hidden;
-	opacity: 0;
-	transition: opacity 0.2s, visibility 0.2s;
-	box-sizing: border-box;
-	display: flex;
-	flex-direction: column;
-	user-select: none;
-	-webkit-user-select: none;
-}
+	.profiler-content.active {
+		visibility: visible;
+		opacity: 1;
+	}
 
-.profiler-content.active {
-	visibility: visible;
-	opacity: 1;
-}
+	.profiler-content {
+		overflow: auto; /* make sure scrollbars can appear */
+	}
 
-.profiler-content {
-	overflow: auto; /* make sure scrollbars can appear */
-}
+	.profiler-content::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
 
-.profiler-content::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
-}
+	.profiler-content::-webkit-scrollbar-track {
+		background: transparent;
+	}
 
-.profiler-content::-webkit-scrollbar-track {
-	background: transparent;
-}
+	.profiler-content::-webkit-scrollbar-thumb {
+		background-color: rgba(0, 0, 0, 0.25);
+		border-radius: 10px;
+		transition: background 0.3s ease;
+	}
 
-.profiler-content::-webkit-scrollbar-thumb {
-	background-color: rgba(0, 0, 0, 0.25);
-	border-radius: 10px;
-	transition: background 0.3s ease;
-}
+	.profiler-content::-webkit-scrollbar-thumb:hover {
+		background-color: rgba(0, 0, 0, 0.4);
+	}
 
-.profiler-content::-webkit-scrollbar-thumb:hover {
-	background-color: rgba(0, 0, 0, 0.4);
-}
+	.profiler-content::-webkit-scrollbar-corner {
+		background: transparent;
+	}
 
-.profiler-content::-webkit-scrollbar-corner {
-	background: transparent;
-}
+	.profiler-content {
+		scrollbar-width: thin; /* "auto" | "thin" */
+		scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+	}
 
-.profiler-content {
-	scrollbar-width: thin; /* "auto" | "thin" */
-	scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
-}
+	.list-item-row {
+		display: grid;
+		align-items: center;
+		padding: 4px 8px;
+		border-radius: 3px;
+		transition: background-color 0.2s;
+		gap: 10px;
+		border-bottom: none;
+		user-select: none;
+		-webkit-user-select: none;
+	}
 
-.list-item-row {
-	display: grid;
-	align-items: center;
-	padding: 4px 8px;
-	border-radius: 3px;
-	transition: background-color 0.2s;
-	gap: 10px;
-	border-bottom: none;
-	user-select: none;
-	-webkit-user-select: none;
-}
+	.parameters .list-item-row {
+		min-height: 31px;
+	}
 
-.parameters .list-item-row {
-	min-height: 31px;
-}
+	.mini-panel-content .parameters .list-item-row {
+		min-height: 21px;
+	}
 
-.mini-panel-content .parameters .list-item-row {
-	min-height: 21px;
-}
+	.list-item-wrapper {
+		margin-top: 2px;
+		margin-bottom: 2px;
+		user-select: none;
+		-webkit-user-select: none;
+	}
 
-.list-item-wrapper {
-	margin-top: 2px;
-	margin-bottom: 2px;
-	user-select: none;
-	-webkit-user-select: none;
-}
+	.list-item-wrapper:first-child {
+		/*margin-top: 0;*/
+	}
 
-.list-item-wrapper:first-child {
-	/*margin-top: 0;*/
-}
+	.list-item-wrapper:not(.header-wrapper):nth-child(odd) > .list-item-row {
+		background-color: rgba(0,0,0,0.1);
+	}
 
-.list-item-wrapper:not(.header-wrapper):nth-child(odd) > .list-item-row {
-	background-color: rgba(0,0,0,0.1);
-}
+	.list-item-wrapper.header-wrapper>.list-item-row {
+		color: var(--color-accent);
+		background-color: rgba(0, 170, 255, 0.1);
+	}
 
-.list-item-wrapper.header-wrapper>.list-item-row {
-	color: var(--accent-color);
-	background-color: rgba(0, 170, 255, 0.1);
-}
+	.list-item-wrapper.header-wrapper>.list-item-row>.list-item-cell:first-child {
+		font-weight: 600;
+		line-height: 1;
+	}
 
-.list-item-wrapper.header-wrapper>.list-item-row>.list-item-cell:first-child {
-	font-weight: 600;
-	line-height: 1;
-}
+	.list-item-row.collapsible,
+	.list-item-row.actionable {
+		cursor: pointer;
+	}
 
-.list-item-row.collapsible,
-.list-item-row.actionable {
-	cursor: pointer;
-}
+	.list-item-row.collapsible {
+		background-color: rgba(0, 170, 255, 0.15) !important;
+		min-height: 23px;
+	}
 
-.list-item-row.collapsible {
-	background-color: rgba(0, 170, 255, 0.15) !important;
-	min-height: 23px;
-}
+	.list-item-row.collapsible.alert,
+	.list-item-row.alert {
+		background-color: rgba(244, 67, 54, 0.1) !important;
+	}
 
-.list-item-row.collapsible.alert,
-.list-item-row.alert {
-	background-color: rgba(244, 67, 54, 0.1) !important;
-}
+	@media (hover: hover) {
 
-@media (hover: hover) {
+		.list-item-row:hover:not(.collapsible):not(.no-hover),
+		.list-item-row:hover:not(.no-hover),
+		.list-item-row.actionable:hover,
+		.list-item-row.collapsible.actionable:hover {
+			background-color: rgba(255, 255, 255, 0.05) !important;
+		}
 
-	.list-item-row:hover:not(.collapsible):not(.no-hover),
-	.list-item-row:hover:not(.no-hover),
-	.list-item-row.actionable:hover,
-	.list-item-row.collapsible.actionable:hover {
-		background-color: rgba(255, 255, 255, 0.05) !important;
-	}
+		.list-item-row.collapsible:hover {
+			background-color: rgba(0, 170, 255, 0.25) !important;
+		}
 
-	.list-item-row.collapsible:hover {
-		background-color: rgba(0, 170, 255, 0.25) !important;
 	}
 
-}
+	.list-item-cell {
+		white-space: pre;
+		display: flex;
+		align-items: center;
+		user-select: none;
+		-webkit-user-select: none;
+	}
 
-.list-item-cell {
-	white-space: pre;
-	display: flex;
-	align-items: center;
-	user-select: none;
-	-webkit-user-select: none;
-}
+	.list-item-cell:not(:first-child) {
+		justify-content: flex-end;
+		font-weight: 600;
+	}
 
-.list-item-cell:not(:first-child) {
-	justify-content: flex-end;
-	font-weight: 600;
-}
+	.list-header {
+		display: grid;
+		align-items: center;
+		padding: 4px 8px;
+		font-weight: 600;
+		color: var(--text-secondary);
+		padding-bottom: 6px;
+		border-bottom: 1px solid var(--profiler-border);
+		margin-bottom: 5px;
+		gap: 10px;
+		user-select: none;
+		-webkit-user-select: none;
+	}
 
-.list-header {
-	display: grid;
-	align-items: center;
-	padding: 4px 8px;
-	font-weight: 600;
-	color: var(--text-secondary);
-	padding-bottom: 6px;
-	border-bottom: 1px solid var(--profiler-border);
-	margin-bottom: 5px;
-	gap: 10px;
-	user-select: none;
-	-webkit-user-select: none;
-}
+	.list-item-wrapper.section-start {
+		margin-top: 5px;
+		margin-bottom: 5px;
+	}
 
-.list-item-wrapper.section-start {
-	margin-top: 5px;
-	margin-bottom: 5px;
-}
+	.list-header .list-header-cell:not(:first-child) {
+		text-align: right;
+	}
 
-.list-header .list-header-cell:not(:first-child) {
-	text-align: right;
-}
+	.list-children-container {
+		padding-left: 1.5em;
+		overflow: hidden;
+		transition: max-height 0.1s ease-out;
+		margin-top: 2px;
+	}
 
-.list-children-container {
-	padding-left: 1.5em;
-	overflow: hidden;
-	transition: max-height 0.1s ease-out;
-	margin-top: 2px;
-}
+	.list-children-container.closed {
+		max-height: 0;
+	}
 
-.list-children-container.closed {
-	max-height: 0;
-}
+	.item-toggler {
+		display: inline-block;
+		margin-right: 0.8em;
+		text-align: left;
+	}
 
-.item-toggler {
-	display: inline-block;
-	margin-right: 0.8em;
-	text-align: left;
-}
+	.list-item-row.open .item-toggler::before {
+		content: '-';
+	}
 
-.list-item-row.open .item-toggler::before {
-	content: '-';
-}
+	.list-item-row:not(.open) .item-toggler::before {
+		content: '+';
+	}
 
-.list-item-row:not(.open) .item-toggler::before {
-	content: '+';
-}
+	.list-item-cell .value.good {
+		color: var(--color-green);
+	}
 
-.list-item-cell .value.good {
-	color: var(--color-green);
-}
+	.list-item-cell .value.warn {
+		color: var(--color-yellow);
+	}
 
-.list-item-cell .value.warn {
-	color: var(--color-yellow);
-}
+	.list-item-cell .value.bad {
+		color: var(--color-red);
+	}
 
-.list-item-cell .value.bad {
-	color: var(--color-red);
-}
+	.list-scroll-wrapper {
+		width: max-content;
+		min-width: 100%;
+		display: flex;
+		flex-direction: column;
+		min-height: 100%;
+	}
 
-.list-scroll-wrapper {
-	width: max-content;
-	min-width: 100%;
-	display: flex;
-	flex-direction: column;
-	min-height: 100%;
-}
+	.list-container.parameters .list-item-row:not(.collapsible) {
+	}
 
-.list-container.parameters .list-item-row:not(.collapsible) {
-}
+	.graph-container {
+		width: 100%;
+		box-sizing: border-box;
+		padding: 8px 0;
+		position: relative;
+	}
 
-.graph-container {
-	width: 100%;
-	box-sizing: border-box;
-	padding: 8px 0;
-	position: relative;
-}
+	.graph-svg {
+		width: 100%;
+		height: 80px;
+		background-color: var(--profiler-header);
+		border: 1px solid var(--profiler-border);
+		border-radius: 4px;
+	}
 
-.graph-svg {
-	width: 100%;
-	height: 80px;
-	background-color: var(--profiler-header);
-	border: 1px solid var(--profiler-border);
-	border-radius: 4px;
-}
+	.graph-path {
+		stroke-width: 2;
+		fill-opacity: 0.4;
+	}
 
-.graph-path {
-	stroke-width: 2;
-	fill-opacity: 0.4;
-}
+	.console-header {
+		padding: 10px;
+		border-bottom: 1px solid var(--profiler-border);
+		display: flex;
+		gap: 20px;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: space-between;
+	}
 
-.console-header {
-	padding: 10px;
-	border-bottom: 1px solid var(--profiler-border);
-	display: flex;
-	gap: 20px;
-	flex-shrink: 0;
-	align-items: center;
-	justify-content: space-between;
-}
+	.console-buttons-group {
+		display: flex;
+		gap: 20px;
+	}
 
-.console-buttons-group {
-	display: flex;
-	gap: 20px;
-}
+	.console-filter-input {
+		background-color: var(--profiler-background);
+		border: 1px solid var(--profiler-border);
+		color: var(--text-primary);
+		border-radius: 4px;
+		padding: 4px 8px;
+		font-family: var(--font-mono);
+		flex-grow: 1;
+		max-width: 300px;
+		border-radius: 15px;
+	}
 
-.console-filter-input {
-	background-color: var(--profiler-bg);
-	border: 1px solid var(--profiler-border);
-	color: var(--text-primary);
-	border-radius: 4px;
-	padding: 4px 8px;
-	font-family: var(--font-mono);
-	flex-grow: 1;
-	max-width: 300px;
-	border-radius: 15px;
-}
+	.console-filter-input:focus {
+		outline: none;
+		border-color: var(--text-secondary);
+	}
 
-.console-filter-input:focus {
-	outline: none;
-	border-color: var(--text-secondary);
-}
+	.console-copy-button {
+		background: transparent;
+		border: none;
+		color: var(--text-secondary);
+		cursor: pointer;
+		padding: 4px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 4px;
+		transition: color 0.2s, background-color 0.2s;
+	}
 
-.console-copy-button {
-	background: transparent;
-	border: none;
-	color: var(--text-secondary);
-	cursor: pointer;
-	padding: 4px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: 4px;
-	transition: color 0.2s, background-color 0.2s;
-}
+	.console-copy-button:hover {
+		color: var(--text-primary);
+		background-color: var(--profiler-hover);
+	}
 
-.console-copy-button:hover {
-	color: var(--text-primary);
-	background-color: var(--profiler-hover);
-}
+	.console-copy-button.copied {
+		color: var(--color-green);
+	}
 
-.console-copy-button.copied {
-	color: var(--color-green);
-}
+	.console-log {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		padding: 10px;
+		overflow-y: auto;
+		flex-grow: 1;
+		user-select: text;
+		-webkit-user-select: text;
+	}
 
-#console-log {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	padding: 10px;
-	overflow-y: auto;
-	flex-grow: 1;
-	user-select: text;
-	-webkit-user-select: text;
-}
+	.log-message {
+		padding: 2px 5px;
+		white-space: pre-wrap;
+		word-break: break-all;
+		border-radius: 3px;
+		line-height: 1.5 !important;
+	}
 
-.log-message {
-	padding: 2px 5px;
-	white-space: pre-wrap;
-	word-break: break-all;
-	border-radius: 3px;
-	line-height: 1.5 !important;
-}
+	.log-message.hidden {
+		display: none;
+	}
 
-.log-message.hidden {
-	display: none;
-}
+	.log-message.info {
+		color: var(--text-primary);
+	}
 
-.log-message.info {
-	color: var(--text-primary);
-}
+	.log-message.warn {
+		color: var(--color-yellow);
+	}
 
-.log-message.warn {
-	color: var(--color-yellow);
-}
+	.log-message.error {
+		color: #f9dedc;
+		background-color: rgba(244, 67, 54, 0.1);
+	}
 
-.log-message.error {
-	color: #f9dedc;
-	background-color: rgba(244, 67, 54, 0.1);
-}
+	.log-prefix {
+		color: var(--text-secondary);
+		margin-right: 8px;
+	}
 
-.log-prefix {
-	color: var(--text-secondary);
-	margin-right: 8px;
-}
+	.log-code {
+		background-color: rgba(255, 255, 255, 0.1);
+		border-radius: 3px;
+		padding: 1px 4px;
+	}
 
-.log-code {
-	background-color: rgba(255, 255, 255, 0.1);
-	border-radius: 3px;
-	padding: 1px 4px;
-}
+	.thumbnail-container {
+		display: flex;
+		align-items: center;
+	}
 
-.thumbnail-container {
-	display: flex;
-	align-items: center;
-}
+	.thumbnail-svg {
+		width: 40px;
+		height: 22.5px;
+		flex-shrink: 0;
+		margin-right: 8px;
+	}
 
-.thumbnail-svg {
-	width: 40px;
-	height: 22.5px;
-	flex-shrink: 0;
-	margin-right: 8px;
-}
+	.param-control {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 10px;
+		width: 100%;
+	}
 
-.param-control {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 10px;
-	width: 100%;
-}
+	.param-control input,
+	.param-control select,
+	.param-control button {
+		background-color: var(--profiler-background);
+		border: 1px solid var(--profiler-border);
+		color: var(--text-primary);
+		border-radius: 4px;
+		padding: 4px 6px;
+		padding-bottom: 2px;
+		font-family: var(--font-mono);
+		width: 100%;
+		box-sizing: border-box;
+	}
 
-.param-control input,
-.param-control select,
-.param-control button {
-	background-color: var(--profiler-bg);
-	border: 1px solid var(--profiler-border);
-	color: var(--text-primary);
-	border-radius: 4px;
-	padding: 4px 6px;
-	padding-bottom: 2px;
-	font-family: var(--font-mono);
-	width: 100%;
-	box-sizing: border-box;
-}
+	.param-control input:focus {
+		outline: none;
+		border-color: var(--color-accent);
+	}
 
-.param-control input:focus {
-	outline: none;
-	border-color: var(--accent-color);
-}
+	.param-control select {
+		padding-top: 3px;
+		padding-bottom: 1px;
+	}
 
-.param-control select {
-	padding-top: 3px;
-	padding-bottom: 1px;
-}
+	.param-control input[type="number"] {
+		cursor: ns-resize;
+	}
 
-.param-control input[type="number"] {
-	cursor: ns-resize;
-}
+	.param-control input[type="color"] {
+		padding: 2px;
+	}
 
-.param-control input[type="color"] {
-	padding: 2px;
-}
+	.param-control button {
+		cursor: pointer;
+		transition: background-color 0.2s;
+	}
 
-.param-control button {
-	cursor: pointer;
-	transition: background-color 0.2s;
-}
+	.param-control button:hover {
+		background-color: var(--profiler-header);
+	}
 
-.param-control button:hover {
-	background-color: var(--profiler-header);
-}
+	.param-control-vector {
+		display: flex;
+		gap: 5px;
+	}
 
-.param-control-vector {
-	display: flex;
-	gap: 5px;
-}
+	.custom-checkbox {
+		display: inline-flex;
+		align-items: center;
+		cursor: pointer;
+		gap: 8px;
+		will-change: transform;
+	}
 
-.custom-checkbox {
-	display: inline-flex;
-	align-items: center;
-	cursor: pointer;
-	gap: 8px;
-	will-change: transform;
-}
+	.custom-checkbox input {
+		display: none;
+	}
 
-.custom-checkbox input {
-	display: none;
-}
+	.custom-checkbox .checkmark {
+		width: 14px;
+		height: 14px;
+		border: 1px solid var(--color-accent);
+		border-radius: 3px;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		transition: background-color 0.2s, border-color 0.2s;
+	}
 
-.custom-checkbox .checkmark {
-	width: 14px;
-	height: 14px;
-	border: 1px solid var(--accent-color);
-	border-radius: 3px;
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	transition: background-color 0.2s, border-color 0.2s;
-}
+	.custom-checkbox .checkmark::after {
+		content: '';
+		width: 6px;
+		height: 6px;
+		background-color: var(--color-accent);
+		border-radius: 1px;
+		display: block;
+		transform: scale(0);
+		transition: transform 0.2s;
+	}
 
-.custom-checkbox .checkmark::after {
-	content: '';
-	width: 6px;
-	height: 6px;
-	background-color: var(--accent-color);
-	border-radius: 1px;
-	display: block;
-	transform: scale(0);
-	transition: transform 0.2s;
-}
+	.custom-checkbox input:checked+.checkmark {
+		border-color: var(--color-accent);
+	}
 
-.custom-checkbox input:checked+.checkmark {
-	border-color: var(--accent-color);
-}
+	.custom-checkbox input:checked+.checkmark::after {
+		transform: scale(1);
+	}
 
-.custom-checkbox input:checked+.checkmark::after {
-	transform: scale(1);
-}
+	.param-control input[type="range"] {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 100%;
+		height: 16px;
+		background: var(--profiler-header);
+		border-radius: 5px;
+		border: 1px solid var(--profiler-border);
+		outline: none;
+		padding: 0px;
+		padding-top: 8px;
+	}
 
-.param-control input[type="range"] {
-	-webkit-appearance: none;
-	appearance: none;
-	width: 100%;
-	height: 16px;
-	background: var(--profiler-header);
-	border-radius: 5px;
-	border: 1px solid var(--profiler-border);
-	outline: none;
-	padding: 0px;
-	padding-top: 8px;
-}
+	.param-control input[type="range"]::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 18px;
+		height: 18px;
+		background: var(--profiler-background);
+		border: 1px solid var(--color-accent);
+		border-radius: 3px;
+		cursor: pointer;
+		margin-top: -8px;
+	}
 
-.param-control input[type="range"]::-webkit-slider-thumb {
-	-webkit-appearance: none;
-	appearance: none;
-	width: 18px;
-	height: 18px;
-	background: var(--profiler-bg);
-	border: 1px solid var(--accent-color);
-	border-radius: 3px;
-	cursor: pointer;
-	margin-top: -8px;
-}
+	.param-control input[type="range"]::-moz-range-thumb {
+		width: 18px;
+		height: 18px;
+		background: var(--profiler-background);
+		border: 2px solid var(--color-accent);
+		border-radius: 3px;
+		cursor: pointer;
+	}
 
-.param-control input[type="range"]::-moz-range-thumb {
-	width: 18px;
-	height: 18px;
-	background: var(--profiler-bg);
-	border: 2px solid var(--accent-color);
-	border-radius: 3px;
-	cursor: pointer;
-}
+	.param-control input[type="range"]::-moz-range-track {
+		width: 100%;
+		height: 16px;
+		background: var(--profiler-header);
+		border-radius: 5px;
+		border: 1px solid var(--profiler-border);
+	}
 
-.param-control input[type="range"]::-moz-range-track {
-	width: 100%;
-	height: 16px;
-	background: var(--profiler-header);
-	border-radius: 5px;
-	border: 1px solid var(--profiler-border);
-}
+	/* Override .param-control styles for mini-panel-content */
+	.mini-panel-content input,
+	.mini-panel-content select,
+	.mini-panel-content button {
+		padding: 2px 4px;
+		height: 21px;
+		line-height: 1.4;
+		padding-top: 4px;
+	}
 
-/* Override .param-control styles for mini-panel-content */
-.mini-panel-content input,
-.mini-panel-content select,
-.mini-panel-content button {
-	padding: 2px 4px;
-	height: 21px;
-	line-height: 1.4;
-	padding-top: 4px;
-}
+	.mini-panel-content .param-control input,
+	.mini-panel-content .param-control select,
+	.mini-panel-content .param-control button {
+		background-color: #1e1e24c2;
+		line-height: 1.0;
+	}
 
-.mini-panel-content .param-control input,
-.mini-panel-content .param-control select,
-.mini-panel-content .param-control button {
-	background-color: #1e1e24c2;
-	line-height: 1.0;
-}
+	.mini-panel-content .param-control select {
+		padding: 2px 2px;
+		padding-top: 3px;
+	}
 
-.mini-panel-content .param-control select {
-	padding: 2px 2px;
-	padding-top: 3px;
-}
+	.mini-panel-content .param-control input[type="number"]::-webkit-outer-spin-button,
+	.mini-panel-content .param-control input[type="number"]::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
 
-.mini-panel-content .param-control input[type="number"]::-webkit-outer-spin-button,
-.mini-panel-content .param-control input[type="number"]::-webkit-inner-spin-button {
-	-webkit-appearance: none;
-	margin: 0;
-}
+	.mini-panel-content .param-control input[type="number"] {
+		-moz-appearance: textfield;
+	}
 
-.mini-panel-content .param-control input[type="number"] {
-	-moz-appearance: textfield;
-}
+	.mini-panel-content .list-item-cell span {
+		position: relative;
+		top: 1px;
+		margin-left: 2px;
+	}
 
-.mini-panel-content .list-item-cell span {
-	position: relative;
-	top: 1px;
-	margin-left: 2px;
-}
+	.mini-panel-content .custom-checkbox .checkmark {
+		width: 12px;
+		height: 12px;
+		margin-bottom: 2px;
+		will-change: transform;
+	}
 
-.mini-panel-content .custom-checkbox .checkmark {
-	width: 12px;
-	height: 12px;
-	margin-bottom: 2px;
-	will-change: transform;
-}
+	.mini-panel-content .list-container.parameters .list-item-row:not(.collapsible) {
+		margin-bottom: 2px;
+	}
 
-.mini-panel-content .list-container.parameters .list-item-row:not(.collapsible) {
-	margin-bottom: 2px;
-}
+	@media screen and (max-width: 450px) and (orientation: portrait) {
 
-@media screen and (max-width: 450px) and (orientation: portrait) {
+		.console-filter-input {
+			max-width: 100px;
+		}
 
-	.console-filter-input {
-		max-width: 100px;
 	}
 
-}
+	/* Touch device optimizations */
+	@media (hover: none) and (pointer: coarse) {
+
+		.panel-resizer {
+			top: -10px !important;
+			height: 20px !important;
+		}
+
+		.profiler-panel.position-top .panel-resizer {
+			top: auto !important;
+			bottom: -10px !important;
+			height: 20px !important;
+		}
+
+		.profiler-panel.position-left .panel-resizer {
+			right: -10px !important;
+			width: 20px !important;
+			height: 100% !important;
+		}
+
+		.profiler-panel.position-right .panel-resizer {
+			left: -10px !important;
+			width: 20px !important;
+			height: 100% !important;
+		}
+
+		.detached-tab-resizer-top,
+		.detached-tab-resizer-bottom {
+			height: 10px !important;
+		}
+
+		.detached-tab-resizer-left,
+		.detached-tab-resizer-right {
+			width: 10px !important;
+		}
 
-/* Touch device optimizations */
-@media (hover: none) and (pointer: coarse) {
-
-	.panel-resizer {
-		top: -10px !important;
-		height: 20px !important;
 	}
 
-	#profiler-panel.position-top .panel-resizer {
-		top: auto !important;
-		bottom: -10px !important;
-		height: 20px !important;
+	.drag-preview-indicator {
+		position: fixed;
+		background-color: rgba(0, 170, 255, 0.2);
+		border: 2px dashed var(--color-accent);
+		z-index: 999;
+		pointer-events: none;
+		transition: all 0.2s ease-out;
 	}
 
-	#profiler-panel.position-left .panel-resizer {
-		right: -10px !important;
-		width: 20px !important;
-		height: 100% !important;
+	/* Detached Tab Windows */
+	.detached-tab-panel {
+		position: fixed;
+		width: 500px;
+		height: 400px;
+		background: var(--profiler-background);
+		border: 1px solid var(--profiler-border);
+		border-radius: 8px;
+		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+		z-index: 1002;
+		display: flex;
+		flex-direction: column;
+		backdrop-filter: blur(10px);
+		overflow: hidden;
+		opacity: 1;
+		visibility: visible;
+		transition: opacity 0.2s, visibility 0.2s;
 	}
 
-	#profiler-panel.position-right .panel-resizer {
-		left: -10px !important;
-		width: 20px !important;
-		height: 100% !important;
+	.profiler-panel:not(.visible) ~ * .detached-tab-panel,
+	body:has(.profiler-panel:not(.visible)) .detached-tab-panel {
+		opacity: 0;
+		visibility: hidden;
+		pointer-events: none;
 	}
 
-	.detached-tab-resizer-top,
-	.detached-tab-resizer-bottom {
-		height: 10px !important;
+	.detached-tab-header {
+		background: var(--profiler-header-background);
+		padding: 0 7px 0 15px;
+		font-family: var(--font-family);
+		font-size: 14px;
+		color: var(--text-primary);
+		font-weight: 600;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-bottom: 1px solid var(--profiler-border);
+		cursor: grab;
+		user-select: none;
+		height: 38px;
+		flex-shrink: 0;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		touch-action: none;
 	}
 
-	.detached-tab-resizer-left,
-	.detached-tab-resizer-right {
-		width: 10px !important;
+	.detached-tab-header:active {
+		cursor: grabbing;
 	}
 
-}
-
-.drag-preview-indicator {
-	position: fixed;
-	background-color: rgba(0, 170, 255, 0.2);
-	border: 2px dashed var(--accent-color);
-	z-index: 999;
-	pointer-events: none;
-	transition: all 0.2s ease-out;
-}
-
-/* Detached Tab Windows */
-.detached-tab-panel {
-	position: fixed;
-	width: 500px;
-	height: 400px;
-	background: var(--profiler-bg);
-	border: 1px solid var(--profiler-border);
-	border-radius: 8px;
-	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
-	z-index: 1002;
-	display: flex;
-	flex-direction: column;
-	backdrop-filter: blur(10px);
-	overflow: hidden;
-	opacity: 1;
-	visibility: visible;
-	transition: opacity 0.2s, visibility 0.2s;
-}
-
-#profiler-panel:not(.visible) ~ * .detached-tab-panel,
-body:has(#profiler-panel:not(.visible)) .detached-tab-panel {
-	opacity: 0;
-	visibility: hidden;
-	pointer-events: none;
-}
-
-.detached-tab-header {
-	background: var(--profiler-header-bg);
-	padding: 0 7px 0 15px;
-	font-family: var(--font-family);
-	font-size: 14px;
-	color: var(--text-primary);
-	font-weight: 600;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	border-bottom: 1px solid var(--profiler-border);
-	cursor: grab;
-	user-select: none;
-	height: 38px;
-	flex-shrink: 0;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	touch-action: none;
-}
-
-.detached-tab-header:active {
-	cursor: grabbing;
-}
+	.detached-header-controls {
+		display: flex;
+		gap: 5px;
+	}
 
-.detached-header-controls {
-	display: flex;
-	gap: 5px;
-}
+	.detached-reattach-btn {
+		background: transparent;
+		border: none;
+		color: var(--text-secondary);
+		font-family: var(--font-family);
+		font-size: 18px;
+		line-height: 1;
+		cursor: pointer;
+		padding: 4px 8px;
+		border-radius: 4px;
+		transition: all 0.2s;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
 
-.detached-reattach-btn {
-	background: transparent;
-	border: none;
-	color: var(--text-secondary);
-	font-family: var(--font-family);
-	font-size: 18px;
-	line-height: 1;
-	cursor: pointer;
-	padding: 4px 8px;
-	border-radius: 4px;
-	transition: all 0.2s;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
+	.detached-reattach-btn:hover {
+		background: rgba(0, 170, 255, 0.2);
+		color: var(--color-accent);
+	}
 
-.detached-reattach-btn:hover {
-	background: rgba(0, 170, 255, 0.2);
-	color: var(--accent-color);
-}
+	.detached-tab-content {
+		flex: 1;
+		overflow: auto;
+		position: relative;
+		background: var(--profiler-background);
+	}
 
-.detached-tab-content {
-	flex: 1;
-	overflow: auto;
-	position: relative;
-	background: var(--profiler-bg);
-}
+	.detached-tab-content::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
 
-.detached-tab-content::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
-}
+	.detached-tab-content::-webkit-scrollbar-track {
+		background: transparent;
+	}
 
-.detached-tab-content::-webkit-scrollbar-track {
-	background: transparent;
-}
+	.detached-tab-content::-webkit-scrollbar-thumb {
+		background-color: rgba(0, 0, 0, 0.25);
+		border-radius: 10px;
+		transition: background 0.3s ease;
+	}
 
-.detached-tab-content::-webkit-scrollbar-thumb {
-	background-color: rgba(0, 0, 0, 0.25);
-	border-radius: 10px;
-	transition: background 0.3s ease;
-}
+	.detached-tab-content::-webkit-scrollbar-thumb:hover {
+		background-color: rgba(0, 0, 0, 0.4);
+	}
 
-.detached-tab-content::-webkit-scrollbar-thumb:hover {
-	background-color: rgba(0, 0, 0, 0.4);
-}
+	.detached-tab-content::-webkit-scrollbar-corner {
+		background: transparent;
+	}
 
-.detached-tab-content::-webkit-scrollbar-corner {
-	background: transparent;
-}
+	.detached-tab-content .profiler-content {
+		display: block !important;
+		height: 100%;
+		visibility: visible !important;
+		opacity: 1 !important;
+		position: relative !important;
+	}
 
-.detached-tab-content .profiler-content {
-	display: block !important;
-	height: 100%;
-	visibility: visible !important;
-	opacity: 1 !important;
-	position: relative !important;
-}
+	.detached-tab-content .profiler-content > * {
+		font-family: var(--font-mono);
+		color: var(--text-primary);
+	}
 
-.detached-tab-content .profiler-content > * {
-	font-family: var(--font-mono);
-	color: var(--text-primary);
-}
+	.detached-tab-resizer {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		width: 20px;
+		height: 20px;
+		cursor: nwse-resize;
+		z-index: 10;
+		touch-action: none;
+	}
 
-.detached-tab-resizer {
-	position: absolute;
-	bottom: 0;
-	right: 0;
-	width: 20px;
-	height: 20px;
-	cursor: nwse-resize;
-	z-index: 10;
-	touch-action: none;
-}
+	.detached-tab-resizer::after {
+		content: '';
+		position: absolute;
+		bottom: 2px;
+		right: 2px;
+		width: 12px;
+		height: 12px;
+		border-right: 2px solid var(--profiler-border);
+		border-bottom: 2px solid var(--profiler-border);
+		border-bottom-right-radius: 6px;
+		opacity: 0.5;
+	}
 
-.detached-tab-resizer::after {
-	content: '';
-	position: absolute;
-	bottom: 2px;
-	right: 2px;
-	width: 12px;
-	height: 12px;
-	border-right: 2px solid var(--profiler-border);
-	border-bottom: 2px solid var(--profiler-border);
-	border-bottom-right-radius: 6px;
-	opacity: 0.5;
-}
+	.detached-tab-resizer:hover::after {
+		opacity: 1;
+		border-color: var(--color-accent);
+	}
 
-.detached-tab-resizer:hover::after {
-	opacity: 1;
-	border-color: var(--accent-color);
-}
+	/* Edge resizers */
+	.detached-tab-resizer-top {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 5px;
+		cursor: ns-resize;
+		z-index: 10;
+		touch-action: none;
+	}
 
-/* Edge resizers */
-.detached-tab-resizer-top {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	height: 5px;
-	cursor: ns-resize;
-	z-index: 10;
-	touch-action: none;
-}
+	.detached-tab-resizer-right {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		width: 5px;
+		cursor: ew-resize;
+		z-index: 10;
+		touch-action: none;
+	}
 
-.detached-tab-resizer-right {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	width: 5px;
-	cursor: ew-resize;
-	z-index: 10;
-	touch-action: none;
-}
+	.detached-tab-resizer-bottom {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 5px;
+		cursor: ns-resize;
+		z-index: 10;
+		touch-action: none;
+	}
 
-.detached-tab-resizer-bottom {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	height: 5px;
-	cursor: ns-resize;
-	z-index: 10;
-	touch-action: none;
-}
+	.detached-tab-resizer-left {
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		width: 5px;
+		cursor: ew-resize;
+		z-index: 10;
+		touch-action: none;
+	}
 
-.detached-tab-resizer-left {
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	width: 5px;
-	cursor: ew-resize;
-	z-index: 10;
-	touch-action: none;
-}
+	/* Input number spin buttons - hide arrows */
+	/* Chrome, Safari, Edge, Opera */
+	.profiler-panel input[type="number"]::-webkit-outer-spin-button,
+	.profiler-panel input[type="number"]::-webkit-inner-spin-button,
+	.detached-tab-content input[type="number"]::-webkit-outer-spin-button,
+	.detached-tab-content input[type="number"]::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
 
-/* Input number spin buttons - hide arrows */
-/* Chrome, Safari, Edge, Opera */
-#profiler-panel input[type="number"]::-webkit-outer-spin-button,
-#profiler-panel input[type="number"]::-webkit-inner-spin-button,
-.detached-tab-content input[type="number"]::-webkit-outer-spin-button,
-.detached-tab-content input[type="number"]::-webkit-inner-spin-button {
-	-webkit-appearance: none;
-	margin: 0;
-}
+	/* Firefox */
+	.profiler-panel input[type="number"],
+	.detached-tab-content input[type="number"] {
+		-moz-appearance: textfield;
+	}
 
-/* Firefox */
-#profiler-panel input[type="number"],
-.detached-tab-content input[type="number"] {
-	-moz-appearance: textfield;
-}
+	.panel-action-btn {
+		background: transparent;
+		color: var(--text-primary);
+		border: 1px solid var(--profiler-border);
+		border-radius: 4px;
+		padding: 6px 12px;
+		cursor: pointer;
+		font-family: var(--font-family);
+		font-size: 12px;
+		transition: background-color 0.2s;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 
-.panel-action-btn {
-	background: transparent;
-	color: var(--text-primary);
-	border: 1px solid var(--profiler-border);
-	border-radius: 4px;
-	padding: 6px 12px;
-	cursor: pointer;
-	font-family: var(--font-family);
-	font-size: 12px;
-	transition: background-color 0.2s;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
+	.panel-action-btn:hover {
+		background-color: rgba(255, 255, 255, 0.05);
+	}
 
-.panel-action-btn:hover {
-	background-color: rgba(255, 255, 255, 0.05);
 }
 `;
+
 		const styleElement = document.createElement( 'style' );
-		styleElement.id = 'profiler-styles';
 		styleElement.textContent = css;
-		document.head.appendChild( styleElement );
+
+		container.appendChild( styleElement );
 
 	}
 

examples/jsm/inspector/ui/Tab.js

@@ -31,13 +31,13 @@ export class Tab extends EventDispatcher {
 
 		super();
 
-		this.id = title.toLowerCase();
+		this.id = title.toLowerCase().replace( /\s+/g, '-' );
 		this.button = document.createElement( 'button' );
 		this.button.className = 'tab-btn';
 		this.button.textContent = title;
 
 		this.content = document.createElement( 'div' );
-		this.content.id = `${this.id}-content`;
+		this.content.classList.add( `${this.id}-content` );
 		this.content.className = 'profiler-content';
 
 		this._isActive = false;

examples/jsm/inspector/ui/utils.js

@@ -1,21 +1,17 @@
-export function createValueSpan( id = null ) {
+export function createValueSpan() {
 
 	const span = document.createElement( 'span' );
 	span.className = 'value';
 
-	if ( id !== null ) span.id = id;
-
 	return span;
 
 }
 
 export function setText( element, text ) {
 
-	const el = element instanceof HTMLElement ? element : document.getElementById( element );
-
-	if ( el && el.textContent !== text ) {
+	if ( element && element.textContent !== text ) {
 
-		el.textContent = text;
+		element.textContent = text;
 
 	}
 
@@ -23,9 +19,7 @@ export function setText( element, text ) {
 
 export function getText( element ) {
 
-	const el = element instanceof HTMLElement ? element : document.getElementById( element );
-
-	return el ? el.textContent : null;
+	return element ? element.textContent : null;
 
 }
 

test/e2e/clean-page.js

@@ -8,8 +8,7 @@
 	/* Remove gui and fonts */
 
 	const style = document.createElement( 'style' );
-	style.type = 'text/css';
-	style.innerHTML = '#info, #profiler-shell, button, input, body > div.lil-gui, body > div.lbl { display: none !important; }';
+	style.innerHTML = '#info, .three-inspector, button, input, body > div.lil-gui, body > div.lbl { display: none !important; }';
 
 	document.querySelector( 'head' ).appendChild( style );