* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

:root {
	/* Improved Eye-Friendly Terminal Colors - Softer tones to reduce eye strain */
	--terminal-bg: #0a1628;           /* Deep blue-black instead of pure black */
	--terminal-fg: #c5d4e8;           /* Soft blue-gray for text (WCAG AA+) */
	--terminal-accent: #7dd3fc;       /* Soft cyan-blue accent */
	--terminal-dim: #64748b;          /* Muted slate for secondary text */
	--terminal-bright: #a5f3fc;       /* Bright but not harsh cyan */

	/* Cyan accents - Softer palette */
	--cyan: #67e8f9;                  /* Primary cyan (alias for cyan-bright) */
	--cyan-bright: #67e8f9;           /* Sky cyan (less intense than #00ffff) */
	--cyan-normal: #22d3ee;           /* Balanced cyan */
	--cyan-dim: #0891b2;              /* Muted cyan for borders */

	/* UI Elements - Better contrast ratios */
	--panel-bg: rgba(15, 23, 42, 0.95);  /* Slate-900 with transparency */
	--panel-border: #475569;          /* Slate-600 subtle border */
	--border-color: #475569;          /* Standard border color (alias for panel-border) */
	--hover-bg: rgba(51, 65, 85, 0.5);   /* Slate-700 hover */
	--active-bg: rgba(71, 85, 105, 0.6); /* Slate-600 active */

	/* Quantum Circuit Colors - More visible */
	--qubit-wire: #60a5fa;            /* Blue-400 for wires */
	--gate-bg: rgba(30, 41, 59, 1); /* Slate-800 gate background */
	--gate-border: #38bdf8;           /* Sky-400 gate border */
	--gate-glow: rgba(56, 189, 248, 0.4);  /* Softer glow */

	/* Drop Zone - More subtle */
	--dropzone-idle: rgba(56, 189, 248, 0.08);
	--dropzone-hover: rgba(56, 189, 248, 0.15);
	--dropzone-active: rgba(125, 211, 252, 0.25);

	/* Shadows & Glows - Reduced intensity */
	--glow-sm: 0 0 4px rgba(125, 211, 252, 0.3);
	--glow-md: 0 0 8px rgba(125, 211, 252, 0.35);
	--glow-lg: 0 0 12px rgba(125, 211, 252, 0.4);
	--glow-cyan: 0 0 10px rgba(103, 232, 249, 0.5);

	/* Spacing */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;

	/* Typography improvements */
	--font-size-xs: 10px;
	--font-size-sm: 12px;
	--font-size-base: 14px;
	--font-size-lg: 16px;
	--font-size-xl: 20px;
	--line-height-tight: 1.4;
	--line-height-normal: 1.6;
	--line-height-relaxed: 1.8;
}

body {
	font-family: 'Fira Code', 'Share Tech Mono', monospace;
	background: var(--terminal-bg);
	color: var(--terminal-fg);
	overflow: hidden;
	height: 100vh;
	cursor: default;
	user-select: none;
	font-size: var(--font-size-base);
	line-height: var(--line-height-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size-adjust: 0.5;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

/* Reduced Scanline Effect - Less distracting */
body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		rgba(125, 211, 252, 0.015) 50%,
		transparent 50%
	);
	background-size: 100% 4px;
	pointer-events: none;
	z-index: 9999;
	animation: scanlines 10s linear infinite;
	opacity: 0.5;
}

@keyframes scanlines {
	0% { transform: translateY(0); }
	100% { transform: translateY(4px); }
}

/* ========== Syntax Highlighting with Prism.js ========== */
/* Ensure Prism styles are applied correctly */
pre[class*="language-"],
code[class*="language-"] {
	text-shadow: none !important;
	text-decoration: none !important;
	border: none !important;
	line-height: 1.6 !important;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	text-indent: 0 !important;
	font-feature-settings: normal !important;
	font-variant-ligatures: none !important;
	font-kerning: none !important;
}

pre[class*="language-"] {
	margin: 0 !important;
	padding: 1em !important;
	overflow: auto;
	background: #000000 !important;
}

/* Remove any pseudo-elements that might exist */
pre[class*="language-"]::before,
pre[class*="language-"]::after,
code[class*="language-"]::before,
code[class*="language-"]::after,
.token::before,
.token::after {
	content: none !important;
	display: none !important;
}

/* Remove first-line pseudo-element styling */
pre[class*="language-"]::first-line,
code[class*="language-"]::first-line {
	text-indent: 0 !important;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

code[class*="language-"] {
	background: transparent !important;
	font-family: 'Fira Code', 'Share Tech Mono', monospace !important;
	font-size: inherit !important;
	line-height: inherit !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	white-space: pre !important;
	text-indent: 0 !important;
	font-feature-settings: normal !important;
	font-variant-ligatures: none !important;
	font-kerning: none !important;
}

/* Fix spacing for all token types - prevent visual shifts */
.token {
	padding: 0 !important;
	margin: 0 !important;
	display: inline !important;
	vertical-align: baseline !important;
	text-indent: 0 !important;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	line-height: inherit !important;
	font-size: inherit !important;
	font-family: inherit !important;
	white-space: pre !important;
	border: none !important;
	background: transparent !important;
	font-feature-settings: normal !important;
	font-variant-ligatures: none !important;
	font-kerning: none !important;
}

/* Ensure strings and other tokens don't have extra spacing or effects */
.token.string,
.token.comment,
.token.keyword,
.token.punctuation,
.token.operator,
.token.number,
.token.builtin,
.token.function,
.token.class-name,
.token.triple-quoted-string {
	display: inline !important;
	padding: 0 !important;
	margin: 0 !important;
	text-indent: 0 !important;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	text-decoration: none !important;
	text-transform: none !important;
	vertical-align: baseline !important;
	border: none !important;
	background: transparent !important;
}

/* CRT Flicker */
@keyframes flicker {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.98; }
}

/* Main Grid Layout */
.terminal-grid {
	display: grid;
	grid-template-columns: 197px 1fr 360px;
	grid-template-rows: 50px 1fr 220px;
	height: 100vh;
	gap: 2px;
	background: var(--terminal-bg);
	padding: 2px;
	transition: grid-template-columns 0.3s ease;
}

/* ============ HEADER BAR ============ */
.header-bar {
	grid-column: 1 / -1;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--space-lg);
	box-shadow: var(--glow-sm);
	position: relative;
}

.header-bar::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--terminal-accent) 50%,
		transparent 100%
	);
	box-shadow: var(--glow-sm);
}

.terminal-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--terminal-bright);
	position: relative;
	isolation: isolate;
	margin-left: -12px;
}

.title-icon {
	width: 48px;
	height: 48px;
	display: flex;
	border-radius: 4px;
	opacity: 0.9;
	filter: invert(87%) sepia(13%) saturate(1500%) hue-rotate(155deg) brightness(103%) contrast(98%) drop-shadow(0 0 6px rgba(165, 243, 252, 0.4));
	animation: iconPulse 4s ease-in-out infinite;
}

@keyframes iconPulse {
	0%, 100% {
		filter: invert(87%) sepia(13%) saturate(1500%) hue-rotate(155deg) brightness(103%) contrast(98%) drop-shadow(0 0 6px rgba(165, 243, 252, 0.4));
	}
	50% {
		filter: invert(87%) sepia(13%) saturate(1500%) hue-rotate(155deg) brightness(110%) contrast(98%) drop-shadow(0 0 12px rgba(165, 243, 252, 0.7));
	}
}

@keyframes pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.03); opacity: 0.95; }
}

@keyframes execute-pulse {
	0%, 100% {
		transform: scale(1);
		filter: brightness(1);
	}
	50% {
		transform: scale(1.05);
		filter: brightness(1.3);
	}
}

@keyframes glow-pulse {
	0%, 100% {
		box-shadow: 0 0 20px currentColor, 0 0 40px currentColor, inset 0 0 15px currentColor;
		filter: brightness(1);
	}
	50% {
		box-shadow: 0 0 30px currentColor, 0 0 60px currentColor, inset 0 0 20px currentColor;
		filter: brightness(1.2);
	}
}

@keyframes glow-spin {
	0% {
		box-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
		filter: brightness(1) hue-rotate(0deg);
	}
	50% {
		box-shadow: 0 0 30px currentColor, 0 0 60px currentColor;
		filter: brightness(1.3) hue-rotate(10deg);
	}
	100% {
		box-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
		filter: brightness(1) hue-rotate(0deg);
	}
}

.header-actions {
	display: flex;
	gap: var(--space-sm);
}

/* Buttons - Improved readability */
.btn {
	padding: 10px 18px;
	background: transparent;
	border: 1.5px solid var(--terminal-accent);
	color: var(--terminal-accent);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.25s ease;
	position: relative;
	overflow: hidden;
	border-radius: 2px;
}

.btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: var(--terminal-accent);
	transition: left 0.3s ease;
	z-index: -1;
	opacity: 0.9;
}

.btn:hover::before {
	left: 0;
}

.btn:hover {
	color: var(--terminal-bg);
	border-color: var(--terminal-bright);
	box-shadow: var(--glow-sm);
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn-primary {
	border-color: var(--cyan-bright);
	color: var(--cyan-bright);
}

.btn-primary::before {
	background: var(--cyan-bright);
}

.btn-danger {
	border-color: #fb7185;
	color: #fb7185;
}

.btn-danger::before {
	background: #fb7185;
}

/* Execute button - Smooth transitions for status changes */
#btn-execute {
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1),
				box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
				border-color 0.4s ease,
				color 0.4s ease,
				background 0.5s ease;
}

/* ============ SIDEBAR - COMPONENT LIBRARY ============ */
.sidebar {
	background: var(--panel-bg);
	border: none;
	overflow-y: auto;
	box-shadow: var(--glow-sm);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.sidebar-header {
	padding: 10px;
	border-bottom: 1px solid var(--panel-border);
	background: rgba(30, 41, 59, 0.5);
}

.sidebar-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: var(--space-sm);
	color: var(--terminal-bright);
}

.search-box {
	width: 100%;
	padding: 8px 10px;
	background: rgba(15, 23, 42, 0.8);
	border: 2px solid #334155;
	color: var(--terminal-fg);
	font-family: inherit;
	font-size: 12px;
	outline: none;
	transition: all 0.25s ease;
	border-radius: 6px;
}

.search-box:focus {
	border-color: var(--cyan-bright);
	box-shadow: 0 0 12px rgba(125, 211, 252, 0.4);
	background: rgba(15, 23, 42, 0.95);
}

.search-box::placeholder {
	color: #64748b;
	font-size: 13px;
	letter-spacing: 0.5px;
}

/* Component Categories - Better spacing */
.component-category {
	padding: var(--space-md) 0;
	border-bottom: 1px solid var(--panel-border);
	transition: all 0.2s ease;
}

.component-category:hover {
	background: var(--hover-bg);
}

.component-category:nth-child(1):hover {
	border-left: 3px solid #7dd3fc;
}

.component-category:nth-child(2):hover {
	border-left: 3px solid #7dd3fc;
}

.component-category:nth-child(3):hover {
	border-left: 3px solid #fbbf24;
}

.component-category:nth-child(4):hover {
	border-left: 3px solid #10b981;
}

.component-category:nth-child(5):hover {
	border-left: 3px solid #67e8f9;
}

.component-category:nth-child(6):hover {
	border-left: 3px solid #a78bfa;
}

.component-category:nth-child(7):hover {
	border-left: 3px solid #ec4899;
}

.component-category:nth-child(8):hover {
	border-left: 3px solid #f59e0b;
}

.category-label {
	padding: 0 var(--space-lg) var(--space-sm);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--terminal-bright);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	cursor: pointer;
	user-select: none;
	transition: all 0.2s ease;
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 0 0 12px rgba(255, 255, 255, 0.2);
}

.category-label:hover {
	color: var(--terminal-accent);
	text-shadow: 0 0 10px rgba(125, 211, 252, 0.6), 0 0 15px rgba(125, 211, 252, 0.4);
}

.category-label::after {
	content: '▼';
	margin-left: auto;
	font-size: 10px;
	transition: transform 0.3s ease;
}

.component-category.collapsed .category-label::after {
	transform: rotate(-90deg);
}

.component-list {
	display: grid;
	grid-template-columns: repeat(4, 40px);
	gap: 6px;
	padding: 6px;
	max-height: 2000px;
	overflow: hidden;
	transition: max-height 0.3s ease;
	justify-content: center;
}

.component-category.collapsed .component-list {
	max-height: 0;
}

/* Color indicators for categories - Softer */
.category-label::before {
	content: '■';
	font-size: 14px;
}

.component-category:nth-child(1) .category-label::before {
	color: #7dd3fc;
	text-shadow: 0 0 12px rgba(125, 211, 252, 0.8), 0 0 20px rgba(125, 211, 252, 0.5);
}

.component-category:nth-child(2) .category-label::before {
	color: #7dd3fc;
	text-shadow: 0 0 12px rgba(125, 211, 252, 0.8), 0 0 20px rgba(125, 211, 252, 0.5);
}

.component-category:nth-child(3) .category-label::before {
	color: #fbbf24;
	text-shadow: 0 0 12px rgba(251, 191, 36, 0.8), 0 0 20px rgba(251, 191, 36, 0.5);
}

.component-category:nth-child(4) .category-label::before {
	color: #10b981;
	text-shadow: 0 0 12px rgba(16, 185, 129, 0.8), 0 0 20px rgba(16, 185, 129, 0.5);
}

.component-category:nth-child(5) .category-label::before {
	color: #67e8f9;
	text-shadow: 0 0 12px rgba(103, 232, 249, 0.8), 0 0 20px rgba(103, 232, 249, 0.5);
}

.component-category:nth-child(6) .category-label::before {
	color: #a78bfa;
	text-shadow: 0 0 12px rgba(167, 139, 250, 0.8), 0 0 20px rgba(167, 139, 250, 0.5);
}

.component-category:nth-child(7) .category-label::before {
	color: #ec4899;
	text-shadow: 0 0 12px rgba(236, 72, 153, 0.8), 0 0 20px rgba(236, 72, 153, 0.5);
}

.component-category:nth-child(8) .category-label::before {
	color: #f59e0b;
	text-shadow: 0 0 12px rgba(245, 158, 11, 0.8), 0 0 20px rgba(245, 158, 11, 0.5);
}

.gate-item {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 2px solid currentColor;
	border-radius: 4px;
	cursor: grab;
	transition: all 0.25s ease;
	position: relative;
	font-size: 16px;
	font-weight: 700;
	color: var(--cyan);
}

/* Tour highlight effect for gates */
.gate-item.tour-highlight {
	animation: tour-pulse 1.5s ease-in-out infinite;
	border: 2px solid var(--terminal-accent) !important;
	background: rgba(0, 255, 65, 0.15) !important;
	box-shadow: 0 0 20px rgba(0, 255, 65, 0.6),
	            0 0 40px rgba(0, 255, 65, 0.3),
	            inset 0 0 15px rgba(0, 255, 65, 0.2) !important;
	z-index: 10;
}

@keyframes tour-pulse {
	0%, 100% {
		box-shadow: 0 0 20px rgba(0, 255, 65, 0.6),
		            0 0 40px rgba(0, 255, 65, 0.3),
		            inset 0 0 15px rgba(0, 255, 65, 0.2);
		border-color: var(--terminal-accent);
	}
	50% {
		box-shadow: 0 0 30px rgba(0, 255, 65, 0.8),
		            0 0 60px rgba(0, 255, 65, 0.5),
		            inset 0 0 20px rgba(0, 255, 65, 0.3);
		border-color: rgba(0, 255, 65, 1);
	}
}

/* Gate item colors by category */
/* Section 1: SINGLE-QUBIT GATES - #7dd3fc */
.gate-item[data-gate="I"],
.gate-item[data-gate="H"],
.gate-item[data-gate="X"],
.gate-item[data-gate="Y"],
.gate-item[data-gate="Z"] {
	color: #7dd3fc;
}

/* Section 2: PARAMETRIC ROTATIONS - #fbbf24 */
.gate-item[data-gate="RX"],
.gate-item[data-gate="RY"],
.gate-item[data-gate="RZ"],
.gate-item[data-gate="R"] {
	color: #fbbf24;
}

/* Section 3: 2-QUBIT ROTATION GATES - #10b981 */
.gate-item[data-gate="RXX"],
.gate-item[data-gate="RYY"],
.gate-item[data-gate="RZZ"],
.gate-item[data-gate="RZX"] {
	color: #10b981;
}

/* Section 4: SX GATES - #67e8f9 */
.gate-item[data-gate="SX"],
.gate-item[data-gate="SXDG"] {
	color: #67e8f9;
}

/* Section 5: MULTI-QUBIT GATES - #a78bfa */
.gate-item[data-gate="CNOT"],
.gate-item[data-gate="CY"],
.gate-item[data-gate="CH"],
.gate-item[data-gate="CS"],
.gate-item[data-gate="CSDG"],
.gate-item[data-gate="CSX"],
.gate-item[data-gate="CU"],
.gate-item[data-gate="CU1"],
.gate-item[data-gate="CU3"],
.gate-item[data-gate="CRX"],
.gate-item[data-gate="CRY"],
.gate-item[data-gate="CRZ"],
.gate-item[data-gate="CPHASE"],
.gate-item[data-gate="CZ"],
.gate-item[data-gate="CT"],
.gate-item[data-gate="CTDG"],
.gate-item[data-gate="SWAP"],
.gate-item[data-gate="ISWAP"],
.gate-item[data-gate="DCX"],
.gate-item[data-gate="ECR"],
.gate-item[data-gate="CCX"],
.gate-item[data-gate="CCZ"],
.gate-item[data-gate="CSWAP"],
.gate-item[data-gate="C3X"] {
	color: #a78bfa;
}

/* Section 6: PHASE GATES - #ec4899 */
.gate-item[data-gate="S"],
.gate-item[data-gate="SDG"],
.gate-item[data-gate="T"],
.gate-item[data-gate="TDG"],
.gate-item[data-gate="PHASE"],
.gate-item[data-gate="P"],
.gate-item[data-gate="U"],
.gate-item[data-gate="U1"],
.gate-item[data-gate="U2"],
.gate-item[data-gate="U3"],
.gate-item[data-gate="GLOBALPHASE"] {
	color: #ec4899;
}

/* Section 7: MEASUREMENT - #f59e0b */
.gate-item[data-gate="MEASURE"],
.gate-item[data-gate="BARRIER"],
.gate-item[data-gate="RESET"],
.gate-item[data-gate="DELAY"] {
	color: #f59e0b;
}

.gate-item:hover {
	transform: scale(1.05);
	box-shadow: 0 0 16px currentColor;
}

.gate-item:active {
	cursor: grabbing;
	transform: scale(0.95);
}

.gate-item.dragging {
	opacity: 0.5;
	cursor: grabbing;
}

/* Hide gate-info elements since we only show icon in grid */
.gate-item .gate-info,
.gate-item .gate-name,
.gate-item .gate-desc {
	display: none;
}

.gate-icon {
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
}

/* Smaller font for C3X icon (3 control symbols) */
.gate-item[data-gate="C3X"] .gate-icon {
	font-size: 12px;
}

.gate-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: inherit;
	color: inherit;
	flex-shrink: 0;
}


.gate-info {
	flex: 1;
	min-width: 0;
}

.gate-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--terminal-bright);
	margin-bottom: 3px;
	line-height: var(--line-height-tight);
}

.gate-desc {
	font-size: 11px;
	color: var(--terminal-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: var(--line-height-tight);
}

/* ============ CANVAS AREA ============ */
.canvas-area {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	position: relative;
	overflow: auto;
	box-shadow: var(--glow-sm);
}

.canvas-toolbar {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	gap: var(--space-sm);
	padding: 10px 12px;
	background: rgba(30, 41, 59, 0.98);
	border-bottom: 1.5px solid var(--panel-border);
	z-index: 100;
	backdrop-filter: blur(10px);
}

.toolbar-btn {
	width: 36px;
	height: 36px;
	background: transparent;
	border: 1.5px solid var(--terminal-dim);
	color: var(--terminal-fg);
	font-size: 17px;
	border-radius: 3px;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.toolbar-btn:hover {
	border-color: var(--terminal-accent);
	color: var(--terminal-accent);
	box-shadow: 0 0 8px rgba(125, 211, 252, 0.6);
	background: rgba(125, 211, 252, 0.08);
}

/* Sidebar Toggle Button - Match select arrow size */
#btn-toggle-sidebar {
	font-size: 12px;
}

#btn-toggle-sidebar:hover {
	border-color: var(--terminal-accent);
	color: var(--terminal-accent);
	box-shadow: none;
	background: transparent;
}

/* Zoom Buttons */
.toolbar-btn-zoom {
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
}

.toolbar-btn-zoom-reset {
	width: auto;
	min-width: 50px;
	padding: 0 8px;
	font-size: 11px;
	font-weight: 600;
	font-family: 'Fira Code', monospace;
	letter-spacing: 0.5px;
}

.zoom-percentage {
	display: inline-block;
	font-size: 11px;
}

/* Toggle Switch (Real-time Simulation) */
.toggle-switch {
	width: 36px;
	height: 36px;
	background: transparent;
	border: 1.5px solid var(--terminal-dim);
	border-radius: 3px;
	cursor: pointer;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.2s;
}

.toggle-switch:hover {
	border-color: var(--terminal-accent);
	box-shadow: 0 0 8px rgba(125, 211, 252, 0.6);
	background: rgba(125, 211, 252, 0.08);
}

.toggle-track {
	width: 28px;
	height: 16px;
	background: rgba(71, 85, 105, 0.5);
	border-radius: 16px;
	position: relative;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-thumb {
	width: 12px;
	height: 12px;
	background: var(--terminal-dim);
	border-radius: 50%;
	position: absolute;
	left: 2px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toggle-switch.active {
	border-color: var(--terminal-accent);
}

.toggle-switch.active .toggle-track {
	background: rgba(103, 232, 249, 0.2);
}

.toggle-switch.active .toggle-thumb {
	left: calc(100% - 14px);
	background: var(--cyan);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toolbar-divider {
	width: 1px;
	background: var(--terminal-dim);
}

/* Circuit Viewport (scrollable container) */
.circuit-viewport {
	width: 100%;
	height: 100%;
	overflow: auto;
	position: relative;
	cursor: grab;
}

/* Empty state positioning within viewport */
.circuit-viewport > .empty-state {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
}

.circuit-viewport.dragging {
	cursor: grabbing;
	user-select: none;
}

/* Maintain cursor for interactive elements */
.circuit-viewport .gate-on-canvas,
.circuit-viewport .ansatz-gate,
.circuit-viewport .barrier-line,
.circuit-viewport .drop-zone {
	cursor: move !important;
}

.circuit-viewport .bloch-sphere-canvas-wrapper {
	cursor: pointer !important;
}

.circuit-viewport button,
.circuit-viewport input,
.circuit-viewport select,
.circuit-viewport textarea {
	cursor: auto !important;
}

/* Circuit Canvas Wrapper (zoom transform target) */
.circuit-canvas-wrapper {
	transform-origin: 0 0;
	transform: scale(var(--circuit-zoom, 1));
	transition: transform 0.15s ease-out;
	will-change: transform;
	display: inline-block;
	min-width: 100%;
}

/* Circuit Canvas */
.circuit-canvas {
	padding: var(--space-xl);
	min-height: 100%;
	min-width: 1800px;
	position: relative; /* For absolute positioning of empty-state */
}

/* IMPROVED QUBIT LINE WITH PRECISE DROP ZONES */
.qubit-line {
	display: flex;
	align-items: center;
	margin-bottom: 24px;
	position: relative;
	min-height: 68px;
}

.qubit-label {
	width: 102px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--cyan-bright);
	text-shadow: var(--glow-cyan);
	flex-shrink: 0;
}

.qubit-index {
	width: 27px;
	height: 27px;
	background: var(--terminal-bg);
	border: 2px solid var(--cyan-bright);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	box-shadow: var(--glow-cyan);
}

/* ENHANCED WIRE WITH DROP ZONES */
.qubit-wire-container {
	flex: 1;
	position: relative;
	height: 51px;
	display: flex;
	align-items: center;
}

.qubit-wire {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--qubit-wire);
	box-shadow: 0 0 2px var(--terminal-accent);
	pointer-events: none;
	z-index: 1;
}

/* PRECISE DROP ZONES */
.drop-zone {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background: var(--dropzone-idle);
	border: 1px dashed transparent;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	cursor: copy;
}

.drop-zone::before {
	content: '+';
	font-size: 24px;
	color: var(--terminal-dim);
	opacity: 0;
	transition: opacity 0.2s;
}

.drop-zone:hover {
	background: var(--dropzone-hover);
	border-color: var(--terminal-accent);
}

.drop-zone:hover::before {
	opacity: 0.5;
}

.drop-zone.drag-over {
	background: var(--dropzone-active);
	border-color: var(--cyan-bright);
	border-style: solid;
	box-shadow: var(--glow-cyan);
	transform: translateY(-50%) scaleY(1.1);
}

.drop-zone.drag-over::before {
	content: '⬇';
	color: var(--cyan-bright);
	opacity: 1;
	animation: bounce 0.5s ease-in-out infinite;
}

.drop-zone.drop-valid {
	background: rgba(34, 197, 94, 0.15);
	border-color: #22c55e;
	border-style: solid;
	box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
	transform: translateY(-50%) scaleY(1.05);
}

.drop-zone.drop-valid::before {
	content: '✓';
	color: #22c55e;
	opacity: 1;
	font-size: 20px;
}

.drop-zone.drop-invalid {
	background: rgba(239, 68, 68, 0.15);
	border-color: #ef4444;
	border-style: solid;
	box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.drop-zone.drop-invalid::before {
	content: '✗';
	color: #ef4444;
	opacity: 1;
	font-size: 20px;
}

.drop-zone.drop-occupied {
	background: rgba(251, 191, 36, 0.15);
	border-color: #fbbf24;
	border-style: solid;
	box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.drop-zone.drop-occupied::before {
	content: '⚠';
	color: #fbbf24;
	opacity: 1;
	font-size: 20px;
}

@keyframes bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

/* Classical Bit Wire */
.classical-wire-container {
	flex: 1;
	position: relative;
	height: 8px;
	display: flex;
	align-items: center;
	margin-top: -35px;
	margin-right: 174px; /* Match qubit wire end (bloch-sphere 160px + margin 14px) */
}

.classical-wire {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--cyan-dim);
	box-shadow: 0 0 3px var(--cyan-dim);
	pointer-events: none;
	z-index: 1;
}

.classical-wire::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 4px;
	background: repeating-linear-gradient(
		90deg,
		var(--cyan-dim) 0px,
		var(--cyan-dim) 2px,
		transparent 2px,
		transparent 4px
	);
}

.classical-label {
	width: 102px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	font-weight: 600;
	color: var(--cyan-dim);
	flex-shrink: 0;
}

.classical-index {
	width: 27px;
	height: 20px;
	background: rgba(0, 139, 139, 0.2);
	border: 1px solid var(--cyan-dim);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
}

/* Measurement connection line */
.measurement-line {
	position: absolute;
	width: 2px;
	/* background color set dynamically by JS */
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	pointer-events: none;
	/* box-shadow set dynamically by JS */
}

/* Measurement connection dot */
.measurement-dot {
	position: absolute;
	width: 12px;
	height: 12px;
	/* background color set dynamically by JS */
	border-radius: 50%;
	transform: translate(-50%, -50%);
	z-index: 11;
	pointer-events: none;
	/* box-shadow set dynamically by JS */
}

/* Control connection line for multi-qubit gates */
.control-line {
	position: absolute;
	width: 2px;
	/* background color set dynamically by JS */
	z-index: 5;
	pointer-events: none;
	opacity: 0.9;
	transform: translateX(-50%);
}

/* Measurement connection line - styled identically to control-line */
.measurement-line {
	position: absolute;
	width: 2px;
	/* background color set dynamically by JS */
	z-index: 5;
	pointer-events: none;
	opacity: 0.9;
	transform: translateX(-50%);
}

/* Control dot for CNOT/CZ gates */
.control-dot {
	position: absolute;
	width: 12px;
	height: 12px;
	/* background color set dynamically by JS */
	border-radius: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 11;
	pointer-events: none;
	/* box-shadow set dynamically by JS */
}

/* Gates on Canvas */
.gate-on-canvas {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: var(--gate-bg);
	border: 2px solid var(--gate-border);
	border-radius: 4px;
	padding: 0;
	font-weight: 700;
	font-size: 16px;
	color: var(--cyan-bright);
	cursor: move;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--glow-cyan);
	transition: all 0.2s;
	z-index: 10;
	user-select: none;
	backdrop-filter: blur(4px);
}

/* Color-coded canvas gates by type */
/* Section 2: SINGLE-QUBIT GATES - #7dd3fc */
.gate-on-canvas[data-gate="I"],
.gate-on-canvas[data-gate="H"],
.gate-on-canvas[data-gate="X"],
.gate-on-canvas[data-gate="Y"],
.gate-on-canvas[data-gate="Z"] {
	border-color: #7dd3fc;
	color: #7dd3fc;
	box-shadow: 0 0 10px rgba(125, 211, 252, 0.4);
	background: rgba(30, 41, 59, 1);
}

/* Section 3: PARAMETRIC ROTATIONS - #fbbf24 */
.gate-on-canvas[data-gate="RX"],
.gate-on-canvas[data-gate="RY"],
.gate-on-canvas[data-gate="RZ"],
.gate-on-canvas[data-gate="R"] {
	border-color: #fbbf24;
	color: #fbbf24;
	box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
	background: rgba(30, 41, 59, 1);
}

/* Section 4: 2-QUBIT ROTATION GATES - #10b981 */
.gate-on-canvas[data-gate="RXX"],
.gate-on-canvas[data-gate="RYY"],
.gate-on-canvas[data-gate="RZZ"],
.gate-on-canvas[data-gate="RZX"] {
	border-color: #10b981;
	color: #10b981;
	box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
	background: rgba(30, 41, 59, 1);
}

/* Section 5: SX GATES - #67e8f9 */
.gate-on-canvas[data-gate="SX"],
.gate-on-canvas[data-gate="SXDG"] {
	border-color: #67e8f9;
	color: #67e8f9;
	box-shadow: 0 0 10px rgba(103, 232, 249, 0.4);
	background: rgba(30, 41, 59, 1);
}

/* Section 6: MULTI-QUBIT GATES - #a78bfa */
.gate-on-canvas[data-gate="CNOT"],
.gate-on-canvas[data-gate="CY"],
.gate-on-canvas[data-gate="CH"],
.gate-on-canvas[data-gate="CS"],
.gate-on-canvas[data-gate="CSDG"],
.gate-on-canvas[data-gate="CSX"],
.gate-on-canvas[data-gate="CU"],
.gate-on-canvas[data-gate="CU1"],
.gate-on-canvas[data-gate="CU3"],
.gate-on-canvas[data-gate="CRX"],
.gate-on-canvas[data-gate="CRY"],
.gate-on-canvas[data-gate="CRZ"],
.gate-on-canvas[data-gate="CPHASE"],
.gate-on-canvas[data-gate="CZ"],
.gate-on-canvas[data-gate="SWAP"],
.gate-on-canvas[data-gate="ISWAP"],
.gate-on-canvas[data-gate="DCX"],
.gate-on-canvas[data-gate="ECR"],
.gate-on-canvas[data-gate="CCX"],
.gate-on-canvas[data-gate="CCZ"],
.gate-on-canvas[data-gate="CSWAP"],
.gate-on-canvas[data-gate="C3X"] {
	border-color: #a78bfa;
	color: #a78bfa;
	box-shadow: 0 0 10px rgba(167, 139, 250, 0.4);
	background: rgba(30, 41, 59, 1);
}

/* Section 7: PHASE GATES - #ec4899 */
.gate-on-canvas[data-gate="S"],
.gate-on-canvas[data-gate="SDG"],
.gate-on-canvas[data-gate="T"],
.gate-on-canvas[data-gate="TDG"],
.gate-on-canvas[data-gate="PHASE"],
.gate-on-canvas[data-gate="P"],
.gate-on-canvas[data-gate="U"],
.gate-on-canvas[data-gate="U1"],
.gate-on-canvas[data-gate="U2"],
.gate-on-canvas[data-gate="U3"],
.gate-on-canvas[data-gate="GLOBALPHASE"] {
	border-color: #ec4899;
	color: #ec4899;
	box-shadow: 0 0 10px rgba(236, 72, 153, 0.4);
	background: rgba(30, 41, 59, 1);
}

/* Section 8: MEASUREMENT - #f59e0b */
.gate-on-canvas[data-gate="MEASURE"],
.gate-on-canvas[data-gate="RESET"],
.gate-on-canvas[data-gate="DELAY"] {
	border-color: #f59e0b;
	color: #f59e0b;
	box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
	background: rgba(30, 41, 59, 1);
}

.gate-on-canvas:hover {
	transform: translateY(-50%) scale(1.05);
	z-index: 11;
}

/* Enhanced hover for each type - Softer glows */
.gate-on-canvas[data-gate="I"]:hover,
.gate-on-canvas[data-gate="H"]:hover,
.gate-on-canvas[data-gate="X"]:hover,
.gate-on-canvas[data-gate="Y"]:hover,
.gate-on-canvas[data-gate="Z"]:hover {
	box-shadow: 0 0 15px rgba(125, 211, 252, 0.7);
}

.gate-on-canvas[data-gate="RX"]:hover,
.gate-on-canvas[data-gate="RY"]:hover,
.gate-on-canvas[data-gate="RZ"]:hover,
.gate-on-canvas[data-gate="R"]:hover {
	box-shadow: 0 0 15px rgba(251, 191, 36, 0.7);
}

.gate-on-canvas[data-gate="SX"]:hover,
.gate-on-canvas[data-gate="SXDG"]:hover {
	box-shadow: 0 0 15px rgba(16, 185, 129, 0.7);
}

.gate-on-canvas[data-gate="CNOT"]:hover,
.gate-on-canvas[data-gate="CY"]:hover,
.gate-on-canvas[data-gate="CH"]:hover,
.gate-on-canvas[data-gate="CS"]:hover,
.gate-on-canvas[data-gate="CSDG"]:hover,
.gate-on-canvas[data-gate="CSX"]:hover,
.gate-on-canvas[data-gate="CU"]:hover,
.gate-on-canvas[data-gate="CU1"]:hover,
.gate-on-canvas[data-gate="CU3"]:hover,
.gate-on-canvas[data-gate="CRX"]:hover,
.gate-on-canvas[data-gate="CRY"]:hover,
.gate-on-canvas[data-gate="CRZ"]:hover,
.gate-on-canvas[data-gate="CPHASE"]:hover,
.gate-on-canvas[data-gate="CZ"]:hover,
.gate-on-canvas[data-gate="SWAP"]:hover,
.gate-on-canvas[data-gate="ISWAP"]:hover,
.gate-on-canvas[data-gate="DCX"]:hover,
.gate-on-canvas[data-gate="ECR"]:hover,
.gate-on-canvas[data-gate="CCX"]:hover,
.gate-on-canvas[data-gate="CCZ"]:hover,
.gate-on-canvas[data-gate="CSWAP"]:hover,
.gate-on-canvas[data-gate="C3X"]:hover {
	box-shadow: 0 0 15px rgba(167, 139, 250, 0.7);
}

.gate-on-canvas[data-gate="S"]:hover,
.gate-on-canvas[data-gate="SDG"]:hover,
.gate-on-canvas[data-gate="T"]:hover,
.gate-on-canvas[data-gate="TDG"]:hover,
.gate-on-canvas[data-gate="PHASE"]:hover,
.gate-on-canvas[data-gate="P"]:hover,
.gate-on-canvas[data-gate="U"]:hover,
.gate-on-canvas[data-gate="U1"]:hover,
.gate-on-canvas[data-gate="U2"]:hover,
.gate-on-canvas[data-gate="U3"]:hover,
.gate-on-canvas[data-gate="GLOBALPHASE"]:hover {
	box-shadow: 0 0 15px rgba(236, 72, 153, 0.7);
}

.gate-on-canvas[data-gate="MEASURE"]:hover,
.gate-on-canvas[data-gate="RESET"]:hover,
.gate-on-canvas[data-gate="DELAY"]:hover {
	box-shadow: 0 0 15px rgba(245, 158, 11, 0.7);
}

.gate-on-canvas.selected {
	border-color: #fb7185;
	box-shadow: 0 0 12px rgba(251, 113, 133, 0.6);
	animation: selectPulse 1.5s ease-in-out infinite;
}

@keyframes selectPulse {
	0%, 100% { box-shadow: 0 0 12px rgba(251, 113, 133, 0.6); }
	50% { box-shadow: 0 0 18px rgba(251, 113, 133, 0.8); }
}

.gate-on-canvas.dragging {
	opacity: 0.7;
	cursor: grabbing;
	z-index: 100;
}

/* Drag Ghost - Less intense */
.drag-ghost {
	position: fixed;
	pointer-events: none;
	z-index: 10000;
	opacity: 0.85;
	background: var(--gate-bg);
	border: 2px solid var(--cyan-bright);
	padding: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cyan-bright);
	font-weight: 700;
	font-size: 16px;
	box-shadow: 0 0 20px rgba(103, 232, 249, 0.6);
	animation: dragFloat 0.6s ease-in-out infinite;
	border-radius: 4px;
}

@keyframes dragFloat {
	0%, 100% { transform: translateY(0) rotate(-1deg); }
	50% { transform: translateY(-3px) rotate(1deg); }
}

/* Empty State */
.empty-state {
	text-align: center;
	max-width: 500px;
	pointer-events: none; /* Allow clicks to pass through empty areas */
}

.empty-state > * {
	pointer-events: auto; /* Re-enable clicks on children (button, etc) */
}

.empty-icon {
	font-size: 64px;
	margin-bottom: var(--space-lg);
	opacity: 0.6;
	animation: pulse 3s ease-in-out infinite;
	color: var(--cyan);
}

@keyframes pulse {
	0%, 100% { opacity: 0.6; transform: scale(1); }
	50% { opacity: 0.9; transform: scale(1.05); }
}

.empty-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: var(--space-md);
	color: var(--terminal-accent);
}

.empty-text {
	font-size: 12px;
	color: var(--terminal-dim);
	line-height: 1.6;
	margin-bottom: var(--space-lg);
}

/* ============ PROPERTIES PANEL ============ */
.properties-panel {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	overflow-y: auto;
	box-shadow: var(--glow-sm);
}

.panel-header {
	padding: var(--space-md);
	border-bottom: 1px solid var(--panel-border);
	/*background: rgba(0, 40, 10, 0.5);*/
}

.panel-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--terminal-bright);
	margin-bottom: var(--space-xs);
}

.panel-subtitle {
	font-size: 10px;
	color: var(--terminal-dim);
}

.panel-content {
	padding: var(--space-md);
}

/* Probability Display */
.probability-display {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 6px;
	padding: 12px;
	overflow: hidden;
}


.probability-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	cursor: pointer;
	user-select: none;
}

.probability-bars {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 500px;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--cyan) transparent;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
}

.probability-bars::-webkit-scrollbar {
	width: 6px;
}

.probability-bars::-webkit-scrollbar-track {
	background: transparent;
}

.probability-bars::-webkit-scrollbar-thumb {
	background: var(--cyan);
	border-radius: 3px;
}

.probability-bar-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	font-family: 'Fira Code', monospace;
}

.probability-bar-label {
	min-width: 45px;
	color: var(--cyan);
	font-weight: 500;
}

.probability-bar-track {
	flex: 1;
	height: 18px;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid var(--border-color);
	border-radius: 2px;
	overflow: hidden;
	position: relative;
}

.probability-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--cyan), rgba(125, 211, 252, 0.6));
	transition: width 0.25s ease-out;
	box-shadow: 0 0 8px rgba(125, 211, 252, 0.5);
}

.probability-bar-value {
	min-width: 50px;
	text-align: right;
	color: var(--terminal-bright);
	font-weight: 600;
}

/* Stats */
.stats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
}

.stat-card {
	border: 1px solid var(--terminal-dim);
	padding: var(--space-md);
	transition: all 0.25s ease;
	border-radius: 3px;
}

.stat-card:hover {
	border-color: var(--terminal-accent);
	box-shadow: var(--glow-sm);
	transform: translateY(-2px);
}

.stat-value {
	font-size: 26px;
	font-weight: 600;
	color: var(--cyan-bright);
	text-shadow: 0 0 8px rgba(0, 255, 0, 0.6), 0 0 12px rgba(0, 255, 0, 0.4);
	line-height: 1.2;
	margin-bottom: 6px;
}

.stat-label {
	font-size: 10px;
	color: var(--terminal-dim);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	line-height: var(--line-height-tight);
}

/* Form Elements - Better readability */
.form-group {
	margin-bottom: var(--space-lg);
}

.form-label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--terminal-bright);
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.form-input,
.form-select {
	width: 100%;
	padding: 10px 12px;
	background: rgba(15, 23, 42, 0.8);
	border: 1.5px solid var(--terminal-dim);
	color: var(--terminal-fg);
	font-family: inherit;
	font-size: 13px;
	outline: none;
	transition: all 0.25s ease;
	border-radius: 3px;
	line-height: var(--line-height-normal);
}

.form-input:focus,
.form-select:focus {
	border-color: var(--terminal-accent);
	box-shadow: var(--glow-sm);
	background: rgba(15, 23, 42, 0.95);
}

.form-input:disabled,
.form-select:disabled {
	/*opacity: 0.5;
	cursor: not-allowed;
	background: rgba(15, 23, 42, 0.4);
	border-color: rgba(100, 116, 139, 0.3);
	color: rgba(226, 232, 240, 0.5);*/
}

.form-select {
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237dd3fc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
}

.form-select:disabled {
	cursor: not-allowed;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

/* Backend List - Better spacing */
.backend-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.backend-item {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 10px 12px;
	background: rgba(30, 41, 59, 0.4);
	border-radius: 3px;
	border: 1px solid var(--terminal-dim);
	cursor: pointer;
	transition: all 0.2s;
	font-size: 11px;
}

.backend-item:hover {
	background: var(--hover-bg);
	border-color: var(--terminal-accent);
}

.backend-item.selected {
	border-color: var(--cyan-bright);
	background: var(--active-bg);
	box-shadow: var(--glow-cyan);
}

.backend-status {
	width: 10px;
	height: 10px;
	background: var(--terminal-accent);
	box-shadow: 0 0 6px var(--terminal-accent);
	animation: blink 2.5s ease-in-out infinite;
	border-radius: 50%;
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

.backend-name {
	flex: 1;
	font-weight: 500;
	font-size: 13px;
	color: var(--terminal-bright);
}

.backend-qubits {
	color: var(--cyan-bright);
	font-size: 11px;
	font-weight: 600;
}

/* ============ CONSOLE - Better Readability ============ */
.console {
	grid-column: 1 / -1;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	overflow: visible;
	box-shadow: var(--glow-sm);
}

.console-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px var(--space-lg);
	border-bottom: 1.5px solid var(--panel-border);
	background: rgba(30, 41, 59, 0.5);
	cursor: pointer;
}

.console-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--terminal-bright);
}

.console-content {
	padding: var(--space-md) var(--space-lg) var(--space-xl) var(--space-lg);
	font-size: 13px;
	line-height: 1.4;
	max-height: 200px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow-y: auto !important;
	overflow-x: hidden;
}

.console-content::-webkit-scrollbar {
	width: 8px;
}

.console-content::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.5);
}

.console-content::-webkit-scrollbar-thumb {
	background: var(--terminal-dim);
	border: 1px solid var(--terminal-bg);
}

.console-content::-webkit-scrollbar-thumb:hover {
	background: var(--terminal-accent);
	box-shadow: var(--glow-sm);
}

.console-line {
	margin-bottom: 2px;
	display: flex;
	align-items: flex-start;
	gap: var(--space-md);
	padding: 2px 0;
	position: relative;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	transition: background-color 0.15s ease;
	border-radius: 2px;
	padding-left: 8px;
	padding-right: 8px;
	margin-left: -8px;
	margin-right: -8px;
}

.console-line:hover {
	background: rgba(125, 211, 252, 0.05);
}

.console-timestamp {
	color: var(--terminal-dim);
	flex-shrink: 0;
	font-size: 12px;
	user-select: text;
}

.console-message {
	flex: 1;
	color: var(--terminal-fg);
	line-height: 1.4;
	word-break: break-word;
	user-select: text;
	cursor: text;
}

.console-line.info .console-message {
	color: var(--cyan-bright);
}

.console-line.success .console-message {
	color: var(--terminal-accent);
}

.console-line.warning .console-message {
	color: #fbbf24;
}

.console-line.error .console-message {
	color: #fb7185;
}

/* Text selection in console */
.console-content ::selection {
	background: rgba(125, 211, 252, 0.3);
	color: inherit;
}

.console-content ::-moz-selection {
	background: rgba(125, 211, 252, 0.3);
	color: inherit;
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb {
	background: var(--terminal-dim);
	border: 1px solid var(--terminal-bg);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--terminal-accent);
	box-shadow: var(--glow-sm);
}

/* Notifications */
.notification {
	position: fixed;
	top: 60px;
	right: 20px;
	max-width: 400px;
	max-height: 400px;
	overflow-y: auto;
	background: var(--panel-bg);
	border: 2px solid var(--terminal-accent);
	padding: var(--space-md);
	box-shadow: var(--glow-lg);
	z-index: 10000;
	animation: slideIn 0.3s ease-out;
}

.notification::-webkit-scrollbar {
	width: 6px;
}

.notification::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.5);
}

.notification::-webkit-scrollbar-thumb {
	background: var(--terminal-dim);
	border-radius: 3px;
}

.notification::-webkit-scrollbar-thumb:hover {
	background: var(--terminal-accent);
}

@keyframes slideIn {
	from {
		transform: translateX(400px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideInRight {
	from {
		transform: translateX(120%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideOutRight {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(120%);
		opacity: 0;
	}
}

.notification-title {
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: var(--space-xs);
	color: var(--terminal-accent);
}

.notification.success {
	border-color: var(--terminal-accent);
}

.notification.error {
	border-color: #fb7185;
}

.notification.warning {
	border-color: #fbbf24;
}

/* Loading */
@keyframes spin {
	to { transform: rotate(360deg); }
}

/* Selection highlight */
::selection {
	background: var(--terminal-accent);
	color: var(--terminal-bg);
}

/* Bloch Sphere Container */
.bloch-sphere-container {
	width: 140px;
	position: relative;
	margin-left: 14px;
	margin-top: 0px;
	margin-bottom: 0px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	justify-content: center;
	transform: translateY(20px); /* Center vertically between qubit and classical bit lines */
}

.bloch-sphere-canvas-wrapper {
	width: 85px;
	height: 85px;
	position: relative;
	border: 2px solid rgba(103, 232, 249, 0.3);
	background: radial-gradient(circle at center, rgba(103, 232, 249, 0.15), rgba(0, 0, 0, 0.95));
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6),
				inset 0 0 20px rgba(103, 232, 249, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	margin-bottom: 6px;
}

.bloch-sphere-canvas-wrapper:hover {
	border-color: var(--cyan-bright);
	box-shadow: 0 0 30px rgba(103, 232, 249, 0.6),
				0 0 50px rgba(103, 232, 249, 0.3),
				inset 0 0 30px rgba(103, 232, 249, 0.2);
	transform: scale(1.05) translateY(-2px);
	background: radial-gradient(circle at center, rgba(103, 232, 249, 0.25), rgba(0, 0, 0, 0.95));
}

.bloch-sphere-canvas {
	width: 100%;
	height: 100%;
	display: block;
	filter: brightness(1.1) contrast(1.1);
}

.bloch-sphere-canvas-wrapper:hover .bloch-sphere-canvas {
	filter: brightness(1.3) contrast(1.2);
}

/* Probability Display */
/*.probability-display {
	width: 140px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-family: 'Fira Code', monospace;
	font-size: 10px;
}
*/
.prob-row {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 20px;
}

.prob-label {
	width: 24px;
	text-align: right;
	font-weight: 600;
	flex-shrink: 0;
	font-size: 11px;
}

.prob-bar-track {
	flex: 1;
	height: 16px;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid var(--terminal-dim);
	border-radius: 3px;
	overflow: hidden;
	position: relative;
}

.prob-bar-fill {
	height: 100%;
	transition: width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
	position: relative;
}

.prob-bar-fill-0 {
	background: linear-gradient(90deg,
		rgba(0, 247, 255, 0.9),
		rgba(0, 247, 255, 0.5));
	box-shadow: 0 0 6px rgba(0, 247, 255, 0.6);
}

.prob-bar-fill-1 {
	background: linear-gradient(90deg,
		rgba(74, 222, 128, 0.9),
		rgba(74, 222, 128, 0.5));
	box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
}

.prob-percentage {
	width: 32px;
	text-align: left;
	font-weight: 600;
	flex-shrink: 0;
	font-size: 11px;
}

/* Bloch Sphere Modal */
.bloch-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.95);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.bloch-modal.active {
	opacity: 1;
	pointer-events: all;
}

.bloch-modal-content {
	width: 650px;
	height: 650px;
	position: relative;
	border: 2px solid #7dd3fc;
	background: rgba(10, 22, 40, 0.95);
	border-radius: 8px;
	box-shadow: 0 0 40px rgba(125, 211, 252, 0.5);
	transform: scale(0.8);
	transition: transform 0.3s ease;
	overflow: hidden;
}

.bloch-modal.active .bloch-modal-content {
	transform: scale(1);
}

.bloch-modal-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: var(--space-md);
	background: rgba(10, 22, 40, 0.9);
	border-bottom: 1px solid #7dd3fc;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 10;
}

.bloch-modal-title {
	font-size: 14px;
	font-weight: 700;
	color: #7dd3fc;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.bloch-modal-canvas-container {
	width: 100%;
	height: 100%;
	padding-top: 50px;
}

.bloch-modal-canvas {
	width: 100%;
	height: 100%;
	display: block;
}

.bloch-modal-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--space-md);
	background: rgba(10, 22, 40, 0.9);
	border-top: 1px solid var(--cyan-bright);
	font-size: 12px;
	color: var(--terminal-fg);
}

.bloch-modal-state {
	font-size: 24px;
	font-weight: 700;
	color: var(--cyan-bright);
	text-align: center;
	margin-bottom: var(--space-sm);
}

.bloch-sphere-label {
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 11px;
	font-weight: 700;
	color: var(--cyan-bright);
	background: linear-gradient(135deg, rgba(10, 22, 40, 0.95), rgba(0, 0, 0, 0.95));
	padding: 4px 10px;
	border-radius: 4px;
	pointer-events: none;
	border: 1px solid rgba(103, 232, 249, 0.3);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8),
				0 0 15px rgba(103, 232, 249, 0.3);
	letter-spacing: 1px;
	text-shadow: 0 0 10px rgba(103, 232, 249, 0.8);
}

.bloch-sphere-container:hover .bloch-sphere-label {
	border-color: var(--cyan-bright);
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.9),
				0 0 20px rgba(103, 232, 249, 0.5);
	transform: translateX(-50%) translateY(-2px);
}

/* ========== Toolbar Tooltips ========== */
.toolbar-tooltip {
	position: fixed;
	background: rgba(10, 22, 40, 0.98);
	backdrop-filter: blur(10px);
	border: 1.5px solid #7dd3fc;
	border-radius: 4px;
	padding: 10px 14px;
	color: #e5e7eb;
	font-family: 'Fira Code', 'Share Tech Mono', monospace;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	max-width: 320px;
	z-index: 10000;
	pointer-events: none;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
				0 0 30px rgba(125, 211, 252, 0.3);
	opacity: 0;
	transform: translateY(-5px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	letter-spacing: 0.3px;
	overflow: visible;
	white-space: nowrap;
}

.toolbar-tooltip.show {
	opacity: 1;
	transform: translateY(0);
	animation: tooltipPulse 3s ease-in-out infinite;
}

.toolbar-tooltip::before {
	content: '';
	position: absolute;
	bottom: -6px;
	left: var(--arrow-offset, 50%);
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #7dd3fc;
	z-index: 10;
}

/* Inverted tooltip (for header buttons) - arrow at top pointing down */
.toolbar-tooltip.inverted {
	transform: translateY(5px);
}

.toolbar-tooltip.inverted.show {
	transform: translateY(0);
}

.toolbar-tooltip.inverted::before {
	display: none;
}

.toolbar-tooltip.inverted::after {
	content: '';
	position: absolute;
	top: -6px;
	left: var(--arrow-offset, 50%);
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #7dd3fc;
	z-index: 10;
}

/* ========== Gate Tooltips ========== */
.gate-tooltip {
	position: absolute;
	background: rgba(10, 22, 40, 0.98);
	border: 1.5px solid #7dd3fc;
	border-radius: 4px;
	padding: 10px 14px 10px 88px;
	color: #e5e7eb;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	max-width: 320px;
	z-index: 10000;
	pointer-events: none;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
				0 0 30px rgba(125, 211, 252, 0.3);
	opacity: 0;
	transform: translateY(-5px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	letter-spacing: 0.3px;
	overflow: visible;
}

.gate-tooltip::after {
	content: '';
	position: absolute;
	left: 12px;
	top: 50%;
	width: 70px;
	height: 70px;
	background-image: url('img/info.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transform: translateY(-50%);
	filter: brightness(0) saturate(100%) invert(75%) sepia(52%) saturate(495%) hue-rotate(160deg) brightness(103%) contrast(98%) drop-shadow(0 0 8px rgba(125, 211, 252, 0.6));
	transform-origin: center;
}

@keyframes iconSwing {
	0% {
		transform: translateY(-50%) translateX(0px);
	}
	12.5% {
		transform: translateY(-50%) translateX(2px);
	}
	25% {
		transform: translateY(-50%) translateX(3px);
	}
	37.5% {
		transform: translateY(-50%) translateX(2px);
	}
	50% {
		transform: translateY(-50%) translateX(0px);
	}
	62.5% {
		transform: translateY(-50%) translateX(-2px);
	}
	75% {
		transform: translateY(-50%) translateX(-3px);
	}
	87.5% {
		transform: translateY(-50%) translateX(-2px);
	}
	100% {
		transform: translateY(-50%) translateX(0px);
	}
}

.gate-tooltip.show {
	opacity: 1;
	transform: translateY(0);
	animation: tooltipPulse 3s ease-in-out infinite;
}

@keyframes tooltipPulse {
	0%, 100% {
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
					0 0 30px rgba(125, 211, 252, 0.3);
	}
	50% {
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
					0 0 40px rgba(125, 211, 252, 0.5),
					0 0 60px rgba(125, 211, 252, 0.2);
	}
}

.gate-tooltip::before {
	content: '';
	position: absolute;
	bottom: -6px;
	left: var(--arrow-offset, 50%);
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #7dd3fc;
	z-index: 10;
}

/* ========== Beta Access Splash Screen ========== */
.beta-splash {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: linear-gradient(135deg, #0a1628 0%, #0f1c2e 50%, #0a1628 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	transition: opacity 0.3s ease;
}

.beta-container {
	text-align: center;
	max-width: 480px;
	padding: 40px;
	background: rgba(15, 28, 46, 0.8);
	border: 2px solid #7dd3fc;
	border-radius: 8px;
	box-shadow: 0 0 40px rgba(125, 211, 252, 0.3),
				inset 0 0 20px rgba(125, 211, 252, 0.1);
	animation: fadeIn 0.5s ease-in;
}

.beta-logo {
	margin-bottom: 24px;
	animation: pulse 3s ease-in-out infinite;
}

.beta-title {
	font-size: 42px;
	font-weight: 700;
	letter-spacing: 3px;
	color: #a5f3fc;
	margin: 0 0 8px 0;
	text-transform: uppercase;
	text-shadow: 0 0 20px rgba(165, 243, 252, 0.5);
}

.beta-subtitle {
	font-size: 14px;
	color: #7dd3fc;
	letter-spacing: 2px;
	margin-bottom: 16px;
	text-transform: uppercase;
	opacity: 0.8;
}

.beta-status {
	display: inline-block;
	padding: 6px 16px;
	background: rgba(125, 211, 252, 0.1);
	border: 1px solid #7dd3fc;
	border-radius: 4px;
	color: #7dd3fc;
	font-size: 11px;
	letter-spacing: 1.5px;
	margin-bottom: 32px;
	text-transform: uppercase;
	animation: glow 2s ease-in-out infinite;
}

.beta-form {
	margin-bottom: 24px;
}

.beta-label {
	display: block;
	font-size: 12px;
	color: #7dd3fc;
	letter-spacing: 1.5px;
	margin-bottom: 12px;
	text-transform: uppercase;
	font-weight: 600;
}

.beta-input {
	width: 100%;
	padding: 14px 16px;
	background: rgba(10, 22, 40, 0.6);
	border: 2px solid #334155;
	border-radius: 4px;
	color: #a5f3fc;
	font-size: 16px;
	font-family: 'Fira Code', monospace;
	letter-spacing: 2px;
	text-align: center;
	text-transform: uppercase;
	transition: all 0.3s ease;
	margin-bottom: 8px;
}

.beta-input:focus {
	outline: none;
	border-color: #7dd3fc;
	box-shadow: 0 0 20px rgba(125, 211, 252, 0.3);
	background: rgba(10, 22, 40, 0.8);
}

.beta-input::placeholder {
	color: #475569;
	text-transform: none;
	letter-spacing: 1px;
}

.beta-error {
	display: none;
	padding: 12px;
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid #ef4444;
	border-radius: 4px;
	color: #fca5a5;
	font-size: 13px;
	margin-bottom: 16px;
	animation: shake 0.5s ease;
}

.beta-button {
	width: 100%;
	padding: 14px 24px;
	background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
	border: none;
	border-radius: 4px;
	color: #0a1628;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: 'Fira Code', monospace;
	box-shadow: 0 0 20px rgba(125, 211, 252, 0.3);
}

.beta-button:hover {
	background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);
	box-shadow: 0 0 30px rgba(125, 211, 252, 0.5);
	transform: translateY(-2px);
}

.beta-button:active {
	transform: translateY(0);
}

.beta-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.beta-footer {
	font-size: 11px;
	color: #64748b;
	letter-spacing: 0.5px;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes glow {
	0%, 100% {
		box-shadow: 0 0 10px rgba(125, 211, 252, 0.2);
	}
	50% {
		box-shadow: 0 0 20px rgba(125, 211, 252, 0.4);
	}
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-10px); }
	75% { transform: translateX(10px); }
}

/* ========== FEEDBACK MODAL ========== */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.9);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 40px;
	animation: fadeIn 0.2s ease;
}

.modal-overlay.active {
	display: flex;
}

.modal-content {
	background: var(--panel-bg);
	border: 2px solid var(--terminal-accent);
	border-radius: 4px;
	padding: 24px;
	max-width: 700px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	box-shadow: 0 0 40px rgba(125, 211, 252, 0.5);
	animation: slideIn 0.3s ease;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--terminal-dim);
}

.modal-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--terminal-accent);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
}

.modal-body {
	margin-bottom: 20px;
}

.modal-footer {
	display: flex;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--terminal-dim);
	justify-content: flex-end;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Feedback button glow effect */
#btn-feedback:hover {
	box-shadow: 0 0 16px rgba(125, 211, 252, 0.6) !important;
	transform: translateY(-1px);
}

#btn-feedback:active {
	transform: translateY(0);
}

/* ========== Shepherd.js Onboarding Tour Customization ========== */
/* IMPORTANT: These styles ONLY apply to Shepherd.js tours, not to the main UI */

/* Tour modal overlay - only affects Shepherd modals */
.shepherd-modal-overlay-container.shepherd-modal-is-visible {
	background: rgba(10, 22, 40, 0.85) !important;
	backdrop-filter: blur(3px);
	z-index: 9999 !important;
}

/* Tour step container - scoped to Shepherd elements only */
.shepherd-element.visualq-tour-step {
	background: linear-gradient(135deg,
		rgba(15, 23, 42, 0.98) 0%,
		rgba(30, 41, 59, 0.98) 100%) !important;
	border: 2px solid var(--cyan-normal) !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8),
				0 0 40px rgba(34, 211, 238, 0.3),
				inset 0 1px 0 rgba(125, 211, 252, 0.1) !important;
	max-width: 420px !important;
	padding: 0 !important;
	font-family: 'Courier New', monospace !important;
	z-index: 10002 !important;
}

/* Tour step header - scoped to Shepherd tour steps only */
.shepherd-element.visualq-tour-step .shepherd-header {
	background: linear-gradient(90deg,
		rgba(34, 211, 238, 0.15) 0%,
		rgba(103, 232, 249, 0.05) 100%);
	border-bottom: 1px solid var(--cyan-dim);
	padding: 16px 20px;
	border-radius: 10px 10px 0 0;
}

.shepherd-element.visualq-tour-step .shepherd-title {
	color: var(--cyan-bright) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-shadow: 0 0 10px rgba(103, 232, 249, 0.5);
	margin: 0 !important;
}

/* Cancel button (X) - scoped to Shepherd tour only */
.shepherd-element.visualq-tour-step .shepherd-cancel-icon {
	color: var(--terminal-dim) !important;
	font-size: 24px !important;
	transition: all 0.2s ease;
	opacity: 0.7;
}

.shepherd-element.visualq-tour-step .shepherd-cancel-icon:hover {
	color: var(--cyan-bright) !important;
	opacity: 1;
	transform: scale(1.1);
}

/* Tour step content - scoped to Shepherd tour only */
.shepherd-element.visualq-tour-step .shepherd-text {
	color: #e2e8f0 !important;  /* Brighter white for better readability */
	font-size: 14px !important;
	line-height: 1.7 !important;
	padding: 20px !important;
}

.shepherd-element.visualq-tour-step .shepherd-text p {
	margin: 0 0 12px 0 !important;
	color: #e2e8f0 !important;  /* Brighter white */
}

.shepherd-element.visualq-tour-step .shepherd-text p:last-child {
	margin-bottom: 0 !important;
}

.shepherd-element.visualq-tour-step .shepherd-text strong {
	color: #67e8f9 !important;  /* Brighter cyan */
	font-weight: 700;
	text-shadow: 0 0 8px rgba(103, 232, 249, 0.4);
}

.shepherd-element.visualq-tour-step .shepherd-text ul {
	margin: 12px 0 !important;
	padding-left: 24px !important;
	color: #e2e8f0 !important;  /* Brighter white */
}

.shepherd-element.visualq-tour-step .shepherd-text li {
	margin: 6px 0 !important;
	color: #e2e8f0 !important;  /* Brighter white */
}

/* Tour step footer (buttons) - scoped to Shepherd tour only */
.shepherd-element.visualq-tour-step .shepherd-footer {
	background: rgba(15, 23, 42, 0.5);
	border-top: 1px solid var(--cyan-dim);
	padding: 16px 20px;
	border-radius: 0 0 10px 10px;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

/* Tour buttons - ONLY affects Shepherd tour buttons, not main UI buttons */
.shepherd-element.visualq-tour-step .shepherd-button {
	background: linear-gradient(135deg, var(--cyan-dim) 0%, var(--cyan-normal) 100%) !important;
	color: #0a1628 !important;
	border: none !important;
	padding: 10px 20px !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	box-shadow: 0 2px 8px rgba(34, 211, 238, 0.3),
				inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.shepherd-element.visualq-tour-step .shepherd-button:hover {
	background: linear-gradient(135deg, var(--cyan-normal) 0%, var(--cyan-bright) 100%) !important;
	box-shadow: 0 4px 16px rgba(34, 211, 238, 0.5),
				0 0 20px rgba(103, 232, 249, 0.4),
				inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
	transform: translateY(-2px);
}

.shepherd-element.visualq-tour-step .shepherd-button:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(34, 211, 238, 0.3),
				inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Secondary button (Skip, Back) - scoped to Shepherd tour only */
.shepherd-element.visualq-tour-step .shepherd-button.shepherd-button-secondary {
	background: rgba(100, 116, 139, 0.2) !important;
	color: var(--terminal-dim) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2),
				inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.shepherd-element.visualq-tour-step .shepherd-button.shepherd-button-secondary:hover {
	background: rgba(100, 116, 139, 0.3) !important;
	color: var(--terminal-fg) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
				inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
	transform: translateY(-2px);
}

/* Arrow pointer - scoped to Shepherd tour only */
.shepherd-element.visualq-tour-step .shepherd-arrow::before {
	background: linear-gradient(135deg,
		rgba(15, 23, 42, 0.98) 0%,
		rgba(30, 41, 59, 0.98) 100%) !important;
	border: 2px solid var(--cyan-normal) !important;
}

/* Completion step with special glow effect */
.shepherd-element.tour-completion-step {
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8),
				0 0 50px rgba(34, 211, 238, 0.5),
				0 0 80px rgba(103, 232, 249, 0.3),
				inset 0 1px 0 rgba(125, 211, 252, 0.1) !important;
	animation: completionGlow 3s ease-in-out infinite;
}

@keyframes completionGlow {
	0%, 100% {
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8),
					0 0 50px rgba(34, 211, 238, 0.5),
					0 0 80px rgba(103, 232, 249, 0.3),
					inset 0 1px 0 rgba(125, 211, 252, 0.1);
	}
	50% {
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8),
					0 0 60px rgba(34, 211, 238, 0.7),
					0 0 100px rgba(103, 232, 249, 0.5),
					inset 0 1px 0 rgba(125, 211, 252, 0.2);
	}
}

/* Highlight element being referenced */
.shepherd-enabled.shepherd-element-attached-top .shepherd-target,
.shepherd-enabled.shepherd-element-attached-bottom .shepherd-target,
.shepherd-enabled.shepherd-element-attached-left .shepherd-target,
.shepherd-enabled.shepherd-element-attached-right .shepherd-target {
	box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.5),
				0 0 20px rgba(103, 232, 249, 0.4) !important;
	border-radius: 8px;
	animation: tourPulse 2s ease-in-out infinite;
}

@keyframes tourPulse {
	0%, 100% {
		box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.5),
					0 0 20px rgba(103, 232, 249, 0.4);
	}
	50% {
		box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.7),
					0 0 30px rgba(103, 232, 249, 0.6),
					0 0 50px rgba(103, 232, 249, 0.3);
	}
}

/* Notification animations */
@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideOutRight {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(100px);
	}
}

/* Mobile responsiveness for tour - scoped to Shepherd elements only */
@media (max-width: 768px) {
	.shepherd-element.visualq-tour-step {
		max-width: calc(100vw - 40px) !important;
		margin: 20px !important;
	}

	.shepherd-element.visualq-tour-step .shepherd-text {
		font-size: 13px !important;
		padding: 16px !important;
	}

	.shepherd-element.visualq-tour-step .shepherd-footer {
		flex-direction: column;
		gap: 8px;
	}

	.shepherd-element.visualq-tour-step .shepherd-button {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================================================
   MISSING CSS CLASSES - Recovered Styles
   ============================================================================ */

/* ANSATZ Gates */
.ansatz-gate {
	position: absolute;
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.2));
	border: 2px solid #8b5cf6;
	border-radius: 4px;
	padding: 8px 12px;
	color: #c4b5fd;
	font-weight: 700;
	font-size: 14px;
	cursor: move;
	box-shadow: 0 0 12px rgba(139, 92, 246, 0.5),
				inset 0 0 8px rgba(139, 92, 246, 0.2);
	transition: all 0.2s;
	user-select: none;
	z-index: 10;
}

.ansatz-gate:hover {
	border-color: #a78bfa;
	box-shadow: 0 0 20px rgba(167, 139, 250, 0.7),
				inset 0 0 12px rgba(167, 139, 250, 0.3);
	transform: scale(1.05);
}

.ansatz-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: rgba(139, 92, 246, 0.1);
	border: 1px solid rgba(139, 92, 246, 0.3);
	border-radius: 4px;
}

/* Barrier Line */
.barrier-line {
	position: absolute;
	width: 2px;
	background: repeating-linear-gradient(
		0deg,
		#fbbf24 0px,
		#fbbf24 10px,
		transparent 10px,
		transparent 20px
	);
	box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
	z-index: 5;
	pointer-events: none;
}

/* Backend Jobs Display */
.backend-jobs {
	font-size: 10px;
	color: var(--terminal-dim);
	margin-top: 2px;
}

/* Connection Status */
.connection-status-value {
	color: var(--cyan);
	font-weight: 600;
	font-family: 'Fira Code', monospace;
}

/* Console Collapsed State - Uses transition below */

/* Context Menu */
.context-menu {
	position: fixed;
	background: rgba(10, 25, 35, 0.98);
	border: 1px solid var(--cyan);
	border-radius: 4px;
	padding: 4px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8),
				0 0 20px rgba(103, 232, 249, 0.3);
	z-index: 10000;
	min-width: 160px;
}

.context-menu button {
	width: 100%;
	padding: 8px 12px;
	background: transparent;
	border: none;
	color: var(--cyan);
	text-align: left;
	cursor: pointer;
	font-family: 'Fira Code', monospace;
	font-size: 12px;
	font-weight: 500;
	transition: all 0.2s;
}

.context-menu button:hover {
	background: rgba(103, 232, 249, 0.1);
	color: var(--cyan-bright);
}

/* Custom Checkbox - Same style as number spinners */
.custom-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
	color: var(--terminal-fg);
	font-family: 'Fira Code', monospace;
	font-size: 12px;
}

.custom-checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	border: 1px solid rgba(103, 232, 249, 0.3);
	border-radius: 2px;
	background: rgba(103, 232, 249, 0.1);
	cursor: pointer;
	position: relative;
	transition: all 0.2s;
	flex-shrink: 0;
}

.custom-checkbox input[type="checkbox"]:hover {
	background: rgba(103, 232, 249, 0.2);
	border-color: var(--cyan);
}

.custom-checkbox input[type="checkbox"]:active {
	background: rgba(103, 232, 249, 0.3);
	transform: scale(0.95);
}

.custom-checkbox input[type="checkbox"]:checked {
	background: rgba(103, 232, 249, 0.25);
	border-color: var(--cyan);
}

.custom-checkbox input[type="checkbox"]:checked::after {
	content: '✓';
	position: absolute;
	color: var(--cyan);
	font-size: 14px;
	font-weight: 900;
	line-height: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.custom-checkbox label {
	cursor: pointer;
	margin: 0;
}

/* Visualization Buttons */
.density-matrix-btn,
.hinton-plot-btn,
.state-vector-btn {
	padding: 6px 12px;
	background: rgba(103, 232, 249, 0.05);
	border: 1px solid rgba(103, 232, 249, 0.4);
	border-radius: 3px;
	color: rgba(103, 232, 249, 0.8);
	font-family: 'Fira Code', monospace;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.density-matrix-btn:hover,
.hinton-plot-btn:hover,
.state-vector-btn:hover {
	background: rgba(103, 232, 249, 0.12);
	border-color: rgba(103, 232, 249, 0.6);
	color: var(--cyan);
	box-shadow: 0 0 6px rgba(103, 232, 249, 0.2);
}

.density-matrix-btn.active,
.hinton-plot-btn.active,
.state-vector-btn.active {
	background: rgba(103, 232, 249, 0.2);
	border-color: var(--cyan);
	color: var(--cyan);
	box-shadow: 0 0 8px rgba(103, 232, 249, 0.3);
}

/* Error Dialog */
.error-dialog-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	backdrop-filter: blur(4px);
}

.error-dialog {
	background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
	border: 2px solid #ef4444;
	border-radius: 8px;
	padding: 24px;
	max-width: 500px;
	width: 90%;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9),
				0 0 40px rgba(239, 68, 68, 0.3);
}

/* Gate Element (for sidebar) */
.gate-element {
	padding: 8px;
	background: rgba(103, 232, 249, 0.05);
	border: 1px solid rgba(103, 232, 249, 0.2);
	border-radius: 4px;
	cursor: grab;
	transition: all 0.2s;
}

.gate-element:hover {
	background: rgba(103, 232, 249, 0.1);
	border-color: var(--cyan);
	box-shadow: 0 0 8px rgba(103, 232, 249, 0.3);
}

.gate-element:active {
	cursor: grabbing;
}

/* Inline Probability Display */
.inline-prob-display {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	background: rgba(103, 232, 249, 0.1);
	border: 1px solid rgba(103, 232, 249, 0.3);
	border-radius: 3px;
	font-family: 'Fira Code', monospace;
	font-size: 10px;
}

.inline-prob-qubit {
	color: var(--cyan);
	font-weight: 600;
}

/* Code Highlighting */
.language-python {
	background: rgba(0, 0, 0, 0.5);
	padding: 16px;
	border-radius: 4px;
	border: 1px solid var(--border-color);
}

/* Notification Toast */
.notification-toast,
.standalone-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	min-width: 320px;
	max-width: 480px;
	max-height: 100px;
	background: rgba(10, 25, 35, 0.98);
	border: 1px solid var(--cyan);
	border-radius: 8px;
	padding: 16px 20px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8),
				0 0 20px rgba(103, 232, 249, 0.4);
	color: var(--cyan);
	font-family: 'Fira Code', monospace;
	font-size: 15px;
	z-index: 10000;
	animation: slideInUp 0.3s ease;
	overflow: hidden;
}

@keyframes slideInUp {
	from {
		transform: translateY(100px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Toast scrollbar */
.notification-toast *::-webkit-scrollbar,
.standalone-toast *::-webkit-scrollbar {
	width: 4px;
}

.notification-toast *::-webkit-scrollbar-track,
.standalone-toast *::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.3);
}

.notification-toast *::-webkit-scrollbar-thumb,
.standalone-toast *::-webkit-scrollbar-thumb {
	background: var(--terminal-dim);
	border-radius: 2px;
}

.notification-toast *::-webkit-scrollbar-thumb:hover,
.standalone-toast *::-webkit-scrollbar-thumb:hover {
	background: var(--terminal-accent);
}

/* Number Input Wrapper */
.number-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.number-input-wrapper input[type="number"] {
	width: 100%;
	padding-right: 25px; /* Space for spinners */
	-moz-appearance: textfield; /* Firefox */
}

/* Hide native spinners in Chrome, Safari, Edge, Opera */
.number-input-wrapper input[type="number"]::-webkit-outer-spin-button,
.number-input-wrapper input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.number-spinners {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 2px;
	pointer-events: all;
}

.number-spinner-btn {
	width: 18px;
	height: 14px;
	padding: 0;
	background: rgba(103, 232, 249, 0.1);
	border: 1px solid rgba(103, 232, 249, 0.3);
	color: var(--cyan);
	font-size: 9px;
	line-height: 1;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
}

.number-spinner-btn:hover {
	background: rgba(103, 232, 249, 0.2);
	border-color: var(--cyan);
}

.number-spinner-btn:active {
	background: rgba(103, 232, 249, 0.3);
	transform: scale(0.95);
}

/* Modal Overlays */
.settings-modal,
.validation-dialog-overlay,
.session-expired-modal,
.session-recovery-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	backdrop-filter: blur(4px);
}

.validation-dialog {
	background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
	border: 2px solid var(--cyan);
	border-radius: 8px;
	padding: 24px;
	max-width: 600px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9),
				0 0 40px rgba(103, 232, 249, 0.3);
}

/* Sidebar Collapsed State */
.sidebar-collapsed {
	grid-template-columns: 0 1fr 360px !important;
}

.sidebar-collapsed .sidebar {
	transform: translateX(-100%);
	opacity: 0;
	pointer-events: none;
}

.sidebar-collapsed .canvas-area {
	margin-left: 0;
}

/* State Vector Display */
.state-vector-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 8px;
	border-bottom: 1px solid rgba(103, 232, 249, 0.1);
	font-family: 'Fira Code', monospace;
	font-size: 11px;
}

.state-vector-basis {
	min-width: 40px;
	color: var(--cyan);
	font-weight: 500;
}

.state-vector-amplitude {
	flex: 1;
	color: var(--cyan);
	font-weight: 600;
}

.state-vector-probability {
	min-width: 60px;
	color: var(--terminal-bright);
	text-align: right;
}

.state-vector-bar {
	width: 100px;
	height: 12px;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid var(--terminal-dim);
	border-radius: 2px;
	overflow: hidden;
	position: relative;
}

.state-vector-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--cyan), rgba(103, 232, 249, 0.5));
	transition: width 0.25s ease-out;
	box-shadow: 0 0 6px rgba(103, 232, 249, 0.5);
}

/* Bloch Probability Display */
.bloch-probability-display {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: 'Fira Code', monospace;
	font-size: 11px;
	margin-top: 6px;
	width: 100%;
}

/* Tool Section Styles (from tools-config.js) */
.tool-section {
	margin-bottom: 12px;
	border: none;
	border-radius: 6px;
	background: rgba(15, 23, 42, 0.5);
	overflow: hidden;
	transition: all 0.3s ease;
}

.tool-section:last-child {
	margin-bottom: 0;
}

.tool-section .component-list {
	max-height: 2000px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow: hidden;
}

.tool-section.collapsed .component-list {
	max-height: 0 !important;
	opacity: 0;
}

.tool-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: rgba(103, 232, 249, 0.05);
	cursor: pointer;
	transition: all 0.2s;
	user-select: none;
}

.tool-section-header:hover {
	background: rgba(103, 232, 249, 0.1);
}

.tool-section-header-content {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
}

.tool-section-icon {
	font-size: 18px;
	color: var(--cyan);
	line-height: 1;
}

.tool-section-title {
	font-size: 12px;
	font-weight: 500;
	color: var(--terminal-bright);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.tool-section-toggle {
	background: transparent;
	border: none;
	color: var(--terminal-accent);
	width: 24px;
	height: 24px;
	border-radius: 3px;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
	padding: 0;
	font-family: 'Fira Code', monospace;
}

.tool-section-toggle:hover {
	color: var(--terminal-accent);
}

/* Toolbar Stats */
.toolbar-stats {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-left: auto;
	padding: 0 12px;
	border: 1.5px solid var(--terminal-dim);
	border-radius: 3px;
	height: 36px;
	background: rgba(15, 23, 42, 0.8);
}

.toolbar-stat {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.toolbar-stat-label {
	font-size: 10px;
	color: var(--terminal-dim);
	font-weight: 600;
}

.toolbar-stat-value {
	font-size: 13px;
	color: var(--cyan);
	font-weight: 700;
	min-width: 20px;
	text-align: center;
}

/* Console Toggle Button */
.console-toggle-btn {
	background: transparent;
	border: 1.5px solid var(--terminal-accent);
	color: var(--terminal-accent);
	padding: 4px 10px;
	border-radius: 3px;
	cursor: pointer;
	font-family: 'Fira Code', monospace;
	font-size: 12px;
	font-weight: 600;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.console-toggle-btn:hover {
	border-color: var(--terminal-accent);
	color: var(--terminal-accent);
}

/* Visualization Headers (Common styles for all viz panels) */
.viz-header-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.viz-title {
	font-size: 12px;
	font-weight: 500;
	color: var(--terminal-bright);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.viz-subtitle {
	font-size: 10px;
	font-weight: 500;
	color: var(--terminal-bright);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.viz-toggle-btn {
	background: transparent;
	border: none;
	color: var(--terminal-accent);
	width: 24px;
	height: 24px;
	border-radius: 3px;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
	transition: all 0.2s;
	padding: 0;
	font-family: 'Fira Code', monospace;
	display: flex;
	align-items: center;
	justify-content: center;
}

.viz-toggle-btn:hover {
	color: var(--terminal-accent);
}

/* State Vector Visualization */
.state-vector-display {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 6px;
	padding: 12px;
	margin-top: 16px;
	overflow: hidden;
}

.state-vector-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	cursor: pointer;
	user-select: none;
}

.state-vector-controls {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	padding: 8px;
	background: transparent;
	border-radius: 4px;
	justify-content: center;
	max-height: 100px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow: hidden;
}

.state-vector-container {
	max-height: 800px;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--cyan) transparent;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
}

.state-vector-container::-webkit-scrollbar {
	width: 6px;
}

.state-vector-container::-webkit-scrollbar-track {
	background: transparent;
}

.state-vector-container::-webkit-scrollbar-thumb {
	background: var(--cyan);
	border-radius: 3px;
}

.state-vector-info {
	margin-top: 8px;
	padding: 8px;
	background: rgba(103, 232, 249, 0.05);
	border-radius: 4px;
	font-size: 10px;
	color: var(--terminal-bright);
	max-height: 100px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow: hidden;
}

/* Density Matrix Visualization */
.density-matrix-display {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 6px;
	padding: 12px;
	margin-top: 16px;
	overflow: hidden;
}

.density-matrix-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	cursor: pointer;
	user-select: none;
}

.density-matrix-controls {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	justify-content: center;
	max-height: 100px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow: hidden;
}

.density-matrix-canvas-container {
	width: 100%;
	min-height: 200px;
	max-height: 600px;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: max-height 0.3s ease, min-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
}

.density-matrix-info {
	margin-top: 8px;
	padding: 8px;
	background: rgba(103, 232, 249, 0.05);
	border-radius: 4px;
	font-size: 10px;
	color: var(--terminal-bright);
	max-height: 100px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow: hidden;
}

/* Hinton Plot Visualization */
.hinton-plot-display {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 6px;
	padding: 12px;
	margin-top: 16px;
	overflow: hidden;
}

.hinton-plot-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	cursor: pointer;
	user-select: none;
}

.hinton-plot-controls {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	justify-content: center;
	max-height: 100px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow: hidden;
}

.hinton-canvas-container {
	width: 100%;
	min-height: 200px;
	max-height: 600px;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: max-height 0.3s ease, min-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
}

.hinton-info {
	margin-top: 8px;
	padding: 8px;
	background: rgba(103, 232, 249, 0.05);
	border-radius: 4px;
	font-size: 10px;
	color: var(--terminal-bright);
	max-height: 100px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow: hidden;
}

/* Pauli Vector Visualization */
.pauli-vector-display {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 6px;
	padding: 12px;
	margin-top: 16px;
	overflow: hidden;
}

.pauli-vector-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	cursor: pointer;
	user-select: none;
}

.pauli-vector-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 8px 8px 8px 0;
	max-height: 1300px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--cyan) transparent;
}

.pauli-vector-container::-webkit-scrollbar {
	width: 6px;
}

.pauli-vector-container::-webkit-scrollbar-track {
	background: transparent;
}

.pauli-vector-container::-webkit-scrollbar-thumb {
	background: var(--cyan);
	border-radius: 3px;
}

.pauli-qubit-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.pauli-qubit-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--terminal-accent);
	min-width: 25px;
	font-family: 'Fira Code', monospace;
	flex-shrink: 0;
}

.pauli-operators {
	display: flex;
	gap: 12px;
	flex: 1;
	padding-right: 8px;
}

.pauli-operator {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex: 1;
}

.pauli-operator-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--cyan);
	font-family: 'Fira Code', monospace;
}

.pauli-bar-container {
	width: 100%;
	height: 60px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--terminal-dim);
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.2);
}

.pauli-bar-baseline {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--cyan);
	opacity: 0.8;
}

.pauli-bar {
	width: 40px;
	position: absolute;
	border-radius: 2px;
	transition: height 0.25s ease-out;
}

.pauli-bar.positive {
	background: linear-gradient(to top, rgba(34, 197, 94, 0.6), rgba(34, 197, 94, 0.9));
	border: 1px solid rgba(34, 197, 94, 1);
	bottom: 50%;
}

.pauli-bar.negative {
	background: linear-gradient(to bottom, rgba(103, 232, 249, 0.6), rgba(103, 232, 249, 0.9));
	border: 1px solid rgba(103, 232, 249, 1);
	top: 50%;
}

.pauli-value {
	font-size: 10px;
	font-weight: 600;
	color: var(--terminal-bright);
	margin-top: 4px;
	font-family: 'Fira Code', monospace;
	position: absolute;
	bottom: -20px;
}

.pauli-vector-info {
	margin-top: 24px;
	padding: 8px;
	background: rgba(103, 232, 249, 0.05);
	border-radius: 4px;
	font-size: 10px;
	color: var(--terminal-bright);
	text-align: center;
	max-height: 100px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow: hidden;
}

/* ============================================================================ */
/* COLLAPSED STATES FOR VISUALIZATION PANELS */
/* ============================================================================ */

/* Probability Display Collapsed - Hide content, keep header */
.probability-display.collapsed .probability-header {
	margin-bottom: 0;
}

.probability-display.collapsed .viz-subtitle {
	display: none;
}

.probability-display.collapsed .probability-bars {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden !important;
}

/* Density Matrix Display Collapsed - Hide content, keep header */
.density-matrix-display.collapsed .density-matrix-header {
	margin-bottom: 0;
}

.density-matrix-display.collapsed .viz-subtitle {
	display: none;
}

.density-matrix-display.collapsed .density-matrix-controls {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.density-matrix-display.collapsed .density-matrix-canvas-container {
	max-height: 0 !important;
	min-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.density-matrix-display.collapsed .density-matrix-info {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

/* Hinton Plot Display Collapsed - Hide content, keep header */
.hinton-plot-display.collapsed .hinton-plot-header {
	margin-bottom: 0;
}

.hinton-plot-display.collapsed .viz-subtitle {
	display: none;
}

.hinton-plot-display.collapsed .hinton-plot-controls {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.hinton-plot-display.collapsed .hinton-canvas-container {
	max-height: 0 !important;
	min-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.hinton-plot-display.collapsed .hinton-info {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

/* State Vector Display Collapsed - Hide content, keep header */
.state-vector-display.collapsed .state-vector-header {
	margin-bottom: 0;
}

.state-vector-display.collapsed .viz-subtitle {
	display: none;
}

.state-vector-display.collapsed .state-vector-controls {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.state-vector-display.collapsed .state-vector-container {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.state-vector-display.collapsed .state-vector-info {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

/* Pauli Vector Display Collapsed - Hide content, keep header */
.pauli-vector-display.collapsed .pauli-vector-header {
	margin-bottom: 0;
}

.pauli-vector-display.collapsed .viz-subtitle {
	display: none;
}

.pauli-vector-display.collapsed .pauli-vector-container {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.pauli-vector-display.collapsed .pauli-vector-info {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

/* Execution Config Display */
.execution-config-display {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 6px;
	padding: 12px;
	margin-bottom: 16px;
	overflow: hidden;
}

.execution-config-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	cursor: pointer;
	user-select: none;
}

.execution-config-content {
	max-height: 2000px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow: hidden;
}

/* Execution Config Display Collapsed - Hide content, keep header */
.execution-config-display.collapsed .execution-config-header {
	margin-bottom: 0;
}

.execution-config-display.collapsed .viz-subtitle {
	display: none;
}

.execution-config-display.collapsed .execution-config-content {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

/* Q-Sphere Visualization */
.qsphere-display {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 6px;
	padding: 12px;
	margin-top: 16px;
	overflow: hidden;
}

.qsphere-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	cursor: pointer;
	user-select: none;
}

.qsphere-canvas-container {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 12px 0;
	max-height: 350px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow: visible;
}

.qsphere-canvas-container canvas {
	max-width: 100%;
	height: auto;
	cursor: grab;
	border-radius: 6px;
	background: #0f172a;
	filter: brightness(1.3) contrast(1.15) saturate(1.2);
	box-shadow:
		0 0 30px rgba(102, 187, 255, 0.5),
		0 0 50px rgba(102, 187, 255, 0.3),
		0 0 70px rgba(0, 255, 102, 0.2),
		inset 0 0 80px rgba(102, 187, 255, 0.15);
}

.qsphere-canvas-container canvas:active {
	cursor: grabbing;
}

.qsphere-phase-wheel {
	position: absolute;
	bottom: 20px;
	left: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.qsphere-phase-wheel canvas {
	width: 100px !important;
	height: 100px !important;
	cursor: default !important;
	background: transparent !important;
}

.phase-label {
	position: absolute;
	color: rgba(255, 255, 255, 0.8);
	font-size: 11px;
	font-family: 'Fira Code', monospace;
}

.phase-label-top {
	top: -5px;
	left: 50%;
	transform: translateX(-50%);
}

.phase-label-right {
	right: -20px;
	top: 50%;
	transform: translateY(-50%);
}

.phase-label-bottom {
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
}

.phase-label-left {
	left: -25px;
	top: 50%;
	transform: translateY(-50%);
}

.phase-wheel-title {
	margin-top: 8px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 12px;
	font-weight: 500;
	font-family: 'Fira Code', monospace;
}

.qsphere-info {
	margin-top: 8px;
	padding: 8px;
	background: rgba(103, 232, 249, 0.05);
	border-radius: 4px;
	font-size: 10px;
	color: var(--terminal-bright);
	text-align: center;
	max-height: 100px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow: hidden;
}

/* Q-Sphere Display Collapsed */
.qsphere-display.collapsed .qsphere-header {
	margin-bottom: 0;
}

.qsphere-display.collapsed .viz-subtitle {
	display: none;
}

.qsphere-display.collapsed .qsphere-canvas-container {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.qsphere-display.collapsed .qsphere-info {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

/* Fidelity & Error Metrics Display */
.fidelity-metrics-display {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 6px;
	padding: 12px;
	margin-top: 16px;
	overflow: hidden;
}

.fidelity-metrics-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	cursor: pointer;
	user-select: none;
}

.fidelity-metrics-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0;
	max-height: 500px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow: hidden;
}

.metric-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	background: rgba(103, 232, 249, 0.05);
	border-radius: 4px;
	border-left: 3px solid var(--cyan-dim);
	transition: all 0.2s;
}

.metric-row:hover {
	background: rgba(103, 232, 249, 0.1);
	border-left-color: var(--cyan-bright);
}

.metric-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--cyan);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.metric-value {
	font-size: 13px;
	font-weight: 700;
	color: var(--terminal-bright);
	font-family: 'Fira Code', monospace;
}

.fidelity-metrics-info {
	margin-top: 8px;
	padding: 8px;
	background: rgba(103, 232, 249, 0.05);
	border-radius: 4px;
	font-size: 10px;
	color: var(--terminal-bright);
	text-align: center;
	max-height: 100px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow: hidden;
}

/* Fidelity & Error Metrics Display Collapsed */
.fidelity-metrics-display.collapsed .fidelity-metrics-header {
	margin-bottom: 0;
}

.fidelity-metrics-display.collapsed .viz-subtitle {
	display: none;
}

.fidelity-metrics-display.collapsed .fidelity-metrics-content {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.fidelity-metrics-display.collapsed .fidelity-metrics-info {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

/* Circuit Depth Analyzer Display */
.circuit-depth-display {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 6px;
	padding: 12px;
	margin-top: 16px;
	overflow: hidden;
}

.circuit-depth-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	cursor: pointer;
	user-select: none;
}

.circuit-depth-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0;
	max-height: 500px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow: hidden;
}

.circuit-depth-info {
	margin-top: 8px;
	padding: 8px;
	background: rgba(103, 232, 249, 0.05);
	border-radius: 4px;
	font-size: 10px;
	color: var(--terminal-bright);
	text-align: center;
	max-height: 100px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow: hidden;
}

#depthChartCanvas {
	display: block;
	margin: 12px auto 0 auto;
	border-radius: 4px;
	background: rgba(15, 23, 42, 0.5);
}

/* Circuit Depth Analyzer Display Collapsed */
.circuit-depth-display.collapsed .circuit-depth-header {
	margin-bottom: 0;
}

.circuit-depth-display.collapsed .viz-subtitle {
	display: none;
}

.circuit-depth-display.collapsed .circuit-depth-content {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.circuit-depth-display.collapsed .circuit-depth-info {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.circuit-depth-display.collapsed #depthChartCanvas {
	display: none;
}

/* Entanglement Diagram Display */
.entanglement-diagram-display {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 6px;
	padding: 12px;
	margin-top: 16px;
	overflow: hidden;
}

.entanglement-diagram-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	cursor: pointer;
	user-select: none;
}

.entanglement-diagram-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0;
	max-height: 500px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow: hidden;
}

.entanglement-diagram-info {
	margin-top: 8px;
	padding: 8px;
	background: rgba(103, 232, 249, 0.05);
	border-radius: 4px;
	font-size: 10px;
	color: var(--terminal-bright);
	text-align: center;
	max-height: 100px;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
	overflow: hidden;
}

#entanglementCanvas {
	display: block;
	margin: 12px auto 0 auto;
	border-radius: 4px;
	background: rgba(15, 23, 42, 0.5);
}

/* Entanglement Diagram Display Collapsed */
.entanglement-diagram-display.collapsed .entanglement-diagram-header {
	margin-bottom: 0;
}

.entanglement-diagram-display.collapsed .viz-subtitle {
	display: none;
}

.entanglement-diagram-display.collapsed .entanglement-diagram-content {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.entanglement-diagram-display.collapsed .entanglement-diagram-info {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.entanglement-diagram-display.collapsed #entanglementCanvas {
	display: none;
}

/* Error Mitigation Checkboxes */
.mitigation-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.mitigation-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: rgba(103, 232, 249, 0.03);
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s;
	user-select: none;
	color: var(--terminal-fg);
	font-family: 'Fira Code', monospace;
}

.mitigation-checkbox:hover {
	background: rgba(103, 232, 249, 0.08);
}

.mitigation-checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	border: 1px solid rgba(103, 232, 249, 0.3);
	border-radius: 2px;
	background: rgba(103, 232, 249, 0.1);
	cursor: pointer;
	position: relative;
	transition: all 0.2s;
	flex-shrink: 0;
}

.mitigation-checkbox input[type="checkbox"]:hover {
	background: rgba(103, 232, 249, 0.2);
	border-color: var(--cyan);
}

.mitigation-checkbox input[type="checkbox"]:active {
	background: rgba(103, 232, 249, 0.3);
	transform: scale(0.95);
}

.mitigation-checkbox input[type="checkbox"]:checked {
	background: rgba(103, 232, 249, 0.25);
	border-color: var(--cyan);
}

.mitigation-checkbox input[type="checkbox"]:checked::after {
	content: '✓';
	position: absolute;
	color: var(--cyan);
	font-size: 14px;
	font-weight: 900;
	line-height: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.mitigation-checkbox span {
	font-size: 13px;
	color: var(--terminal-fg);
	font-weight: 500;
	cursor: pointer;
}

/* Disabled checkbox styles */
.mitigation-checkbox input[type="checkbox"]:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: rgba(100, 116, 139, 0.1);
	border-color: rgba(100, 116, 139, 0.3);
}

.mitigation-checkbox input[type="checkbox"]:disabled:hover {
	background: rgba(100, 116, 139, 0.1);
	border-color: rgba(100, 116, 139, 0.3);
	transform: none;
}

.mitigation-checkbox:has(input:disabled) {
	cursor: not-allowed;
	opacity: 0.5;
}

.mitigation-checkbox:has(input:disabled):hover {
	background: rgba(103, 232, 249, 0.03);
}

.mitigation-checkbox:has(input:disabled) span {
	cursor: not-allowed;
}

/* Form Helper Text */
.form-helper-text {
	margin-top: 4px;
	font-size: 10px;
	color: var(--terminal-dim);
	font-style: italic;
}

/* Console Collapsed */
.console-collapsed {
	grid-template-rows: 50px 1fr 40px !important;
}

.console.collapsed .console-header {
	margin-bottom: 0;
}

.console.collapsed .console-content {
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden !important;
}