/**
 * (FSD_DSA) Learn DSA Through Visualizations Stylesheet
 * FullStackDost UI / Theme Architecture.
 * High-Specificity Scoped CSS with Complete Theme Immunity.
 */

:root {
	--fsd-bg-root: #070a12;
	--fsd-bg-surface: #0f172a;
	--fsd-bg-card: #1e293b;
	--fsd-bg-card-hover: #273549;
	--fsd-border-subtle: rgba(255, 255, 255, 0.08);
	--fsd-border-light: rgba(255, 255, 255, 0.16);
	--fsd-border-sky: rgba(56, 189, 248, 0.45);
	--fsd-text-white: #ffffff;
	--fsd-text-bright: #f1f5f9;
	--fsd-text-dim: #94a3b8;
	--fsd-text-muted: #64748b;
	--fsd-accent-sky: #38bdf8;
	--fsd-accent-indigo: #6366f1;
	--fsd-accent-purple: #a855f7;
	--fsd-accent-emerald: #10b981;
	--fsd-accent-amber: #f59e0b;
	--fsd-accent-rose: #f43f5e;
	--fsd-radius-lg: 14px;
	--fsd-radius-md: 8px;
	--fsd-radius-sm: 6px;
}

/* ----------------------------------------------------
   ROOT CONTAINER & HIGH-SPECIFICITY RESETS
   ---------------------------------------------------- */
.fsd-dsa-wrapper,
body .fsd-dsa-wrapper,
body.fsd-ui-active .fsd-dsa-wrapper {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	background: var(--fsd-bg-root) !important;
	color: var(--fsd-text-bright) !important;
	border: 1px solid var(--fsd-border-subtle) !important;
	border-radius: var(--fsd-radius-lg) !important;
	box-shadow: 0 25px 40px -15px rgba(0, 0, 0, 0.6), 0 0 1px 1px rgba(255, 255, 255, 0.06) !important;
	overflow: hidden !important;
	margin: 28px 0 !important;
	position: relative !important;
	box-sizing: border-box !important;
	line-height: 1.5 !important;
}

.fsd-dsa-wrapper *,
body .fsd-dsa-wrapper *,
body.fsd-ui-active .fsd-dsa-wrapper * {
	box-sizing: border-box !important;
}

/* TOTAL BUTTON RESET TO PREVENT THEME LEAKAGE */
.fsd-dsa-wrapper button,
body .fsd-dsa-wrapper button,
body.fsd-ui-active .fsd-dsa-wrapper button,
.fsd-dsa-wrapper .fsd-btn,
body .fsd-dsa-wrapper .fsd-btn,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-btn,
.fsd-dsa-wrapper .fsd-diff-tab,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-diff-tab,
.fsd-dsa-wrapper .fsd-topic-btn,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-topic-btn,
.fsd-dsa-wrapper .fsd-code-tab,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-code-tab {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	text-transform: none !important;
	font-weight: 500 !important;
	font-size: inherit !important;
	line-height: normal !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	color: inherit !important;
}

/* Fullscreen Mode */
.fsd-dsa-wrapper.fsd-is-fullscreen {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	margin: 0 !important;
	border-radius: 0 !important;
	z-index: 999999 !important;
	max-width: none !important;
	display: flex !important;
	flex-direction: column !important;
	border: none !important;
}

/* Hide page scrollbar behind fullscreen overlay */
body.fsd-fullscreen-active,
html.fsd-fullscreen-active {
	overflow: hidden !important;
}

/* Hide ALL other page elements (WP header, nav, admin bar, sidebars) behind fullscreen */
body.fsd-fullscreen-active > *:not(.fsd-dsa-wrapper),
body.fsd-fullscreen-active #wpadminbar,
body.fsd-fullscreen-active header,
body.fsd-fullscreen-active .site-header,
body.fsd-fullscreen-active .masthead,
body.fsd-fullscreen-active .navbar,
body.fsd-fullscreen-active .sticky-header,
body.fsd-fullscreen-active .edupress-header,
body.fsd-fullscreen-active [class*="header-wrap"],
body.fsd-fullscreen-active [class*="site-nav"] {
	z-index: 0 !important;
	position: relative !important;
}

/* Body fills all remaining viewport height below header */
.fsd-dsa-wrapper.fsd-is-fullscreen .fsd-dsa-body {
	flex: 1 1 0% !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: hidden !important;
}

/* Sidebar stretches full height and scrolls independently */
.fsd-dsa-wrapper.fsd-is-fullscreen .fsd-dsa-sidebar {
	max-height: none !important;
	height: 100% !important;
	overflow-y: auto !important;
}

/* Content area fills remaining space and scrolls */
.fsd-dsa-wrapper.fsd-is-fullscreen .fsd-dsa-content {
	flex: 1 1 0% !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

/* Stage canvas scales up in fullscreen for larger visualizations */
.fsd-dsa-wrapper.fsd-is-fullscreen .fsd-stage-viewport {
	min-height: 340px !important;
}

/* Fullscreen button icon swap */
.fsd-dsa-wrapper.fsd-is-fullscreen .fsd-fullscreen-btn .dashicons-fullscreen-alt::before {
	content: "\f335" !important; /* dashicons-fullscreen-exit-alt */
}

/* ----------------------------------------------------
   HEADER & TOP TOOLBAR
   ---------------------------------------------------- */
.fsd-dsa-header {
	background: #0d1322 !important;
	border-bottom: 1px solid var(--fsd-border-subtle) !important;
	padding: 14px 20px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	flex-wrap: wrap !important;
}

.fsd-dsa-brand-area {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	flex-wrap: wrap !important;
}

.fsd-dsa-logo {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}

.fsd-dsa-icon {
	color: var(--fsd-accent-sky) !important;
	font-size: 22px !important;
	width: 36px !important;
	height: 36px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(56, 189, 248, 0.12) !important;
	border: 1px solid rgba(56, 189, 248, 0.25) !important;
	border-radius: 8px !important;
}

.fsd-dsa-heading {
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--fsd-text-white) !important;
	letter-spacing: -0.01em !important;
	line-height: 1.2 !important;
}

.fsd-dsa-subheading {
	display: block !important;
	font-size: 12px !important;
	color: var(--fsd-text-dim) !important;
	margin-top: 2px !important;
}

.fsd-dsa-badges {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.fsd-dsa-pill {
	font-size: 11px !important;
	font-weight: 700 !important;
	padding: 3px 10px !important;
	border-radius: 999px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	display: inline-block !important;
	line-height: 1.4 !important;
}

.fsd-pill-category {
	background: rgba(99, 102, 241, 0.16) !important;
	color: #a5b4fc !important;
	border: 1px solid rgba(99, 102, 241, 0.35) !important;
}

.fsd-pill-difficulty {
	background: rgba(16, 185, 129, 0.16) !important;
	color: #6ee7b7 !important;
	border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.fsd-pill-difficulty.diff-intermediate {
	background: rgba(245, 158, 11, 0.16) !important;
	color: #fcd34d !important;
	border-color: rgba(245, 158, 11, 0.35) !important;
}

.fsd-pill-difficulty.diff-advanced {
	background: rgba(244, 63, 94, 0.16) !important;
	color: #fda4af !important;
	border-color: rgba(244, 63, 94, 0.35) !important;
}

/* ----------------------------------------------------
   CONTROL TOOLBAR & BUTTONS
   ---------------------------------------------------- */
.fsd-dsa-toolbar {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
}

.fsd-toolbar-playback,
.fsd-toolbar-actions {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

/* Clean, crisp control buttons */
.fsd-dsa-wrapper .fsd-btn,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-btn {
	background: #1e293b !important;
	color: var(--fsd-text-bright) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: var(--fsd-radius-md) !important;
	padding: 7px 14px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	gap: 6px !important;
	transition: all 0.15s ease !important;
	user-select: none !important;
}

.fsd-dsa-wrapper .fsd-btn:hover,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-btn:hover {
	background: #273549 !important;
	border-color: rgba(255, 255, 255, 0.25) !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
}

/* Primary Play Button */
.fsd-dsa-wrapper .fsd-btn-primary,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-btn-primary {
	background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
	border: 1px solid #60a5fa !important;
	color: #ffffff !important;
	box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35) !important;
}

.fsd-dsa-wrapper .fsd-btn-primary:hover,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-btn-primary:hover {
	background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%) !important;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.55) !important;
}

/* AI Tutor Button */
.fsd-dsa-wrapper .fsd-btn-ai,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-btn-ai {
	background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%) !important;
	border: 1px solid #c084fc !important;
	color: #ffffff !important;
	box-shadow: 0 2px 10px rgba(147, 51, 234, 0.35) !important;
}

.fsd-dsa-wrapper .fsd-btn-ai:hover,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-btn-ai:hover {
	background: linear-gradient(135deg, #581c87 0%, #7e22ce 100%) !important;
	box-shadow: 0 4px 14px rgba(168, 85, 247, 0.55) !important;
}

.fsd-dsa-wrapper .fsd-btn-icon,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-btn-icon {
	padding: 7px 10px !important;
}

/* Speed Selector */
.fsd-speed-selector {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: #1e293b !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: var(--fsd-radius-md) !important;
	padding: 3px 8px !important;
}

.fsd-speed-selector label {
	color: var(--fsd-accent-sky) !important;
	font-size: 14px !important;
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
}

.fsd-speed-select {
	background: transparent !important;
	border: none !important;
	color: #ffffff !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	padding: 4px 0 !important;
	outline: none !important;
	cursor: pointer !important;
}

/* ----------------------------------------------------
   MAIN BODY & SIDEBAR
   ---------------------------------------------------- */
.fsd-dsa-body {
	display: flex !important;
	min-height: 640px !important;
	position: relative !important;
}

/* Sidebar Topic Explorer */
.fsd-dsa-sidebar {
	width: 280px !important;
	min-width: 280px !important;
	background: #0b1120 !important;
	border-right: 1px solid var(--fsd-border-subtle) !important;
	display: flex !important;
	flex-direction: column !important;
	max-height: 820px !important;
	overflow-y: auto !important;
	transition: all 0.25s ease !important;
}

.fsd-dsa-wrapper.fsd-sidebar-collapsed .fsd-dsa-sidebar {
	display: none !important;
	width: 0 !important;
	min-width: 0 !important;
	padding: 0 !important;
	border-right: none !important;
}

.fsd-sidebar-search-wrap {
	position: relative !important;
	padding: 12px !important;
	border-bottom: 1px solid var(--fsd-border-subtle) !important;
}

.fsd-search-icon {
	position: absolute !important;
	left: 20px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: var(--fsd-text-dim) !important;
	font-size: 16px !important;
	pointer-events: none !important;
}

.fsd-topic-search-input {
	width: 100% !important;
	background: #1e293b !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: var(--fsd-radius-sm) !important;
	color: #ffffff !important;
	padding: 8px 28px 8px 32px !important;
	font-size: 12px !important;
	outline: none !important;
	transition: border-color 0.2s !important;
}

.fsd-topic-search-input:focus {
	border-color: var(--fsd-accent-sky) !important;
	box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
}

.fsd-search-clear {
	position: absolute !important;
	right: 20px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: none !important;
	border: none !important;
	color: var(--fsd-text-dim) !important;
	font-size: 16px !important;
	cursor: pointer !important;
	display: none !important;
}

/* Difficulty Tabs (Segmented Control Bar - NO BROKEN PILLS) */
.fsd-difficulty-tabs {
	display: flex !important;
	padding: 6px 10px !important;
	gap: 4px !important;
	border-bottom: 1px solid var(--fsd-border-subtle) !important;
	background: #090d18 !important;
}

.fsd-dsa-wrapper .fsd-diff-tab,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-diff-tab {
	flex: 1 !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	color: var(--fsd-text-dim) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	padding: 6px 4px !important;
	border-radius: 6px !important;
	text-align: center !important;
	white-space: nowrap !important;
	display: block !important;
	line-height: 1 !important;
	transition: all 0.15s !important;
}

.fsd-dsa-wrapper .fsd-diff-tab:hover,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-diff-tab:hover {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.05) !important;
}

.fsd-dsa-wrapper .fsd-diff-tab.active,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-diff-tab.active {
	background: #1e293b !important;
	border-color: rgba(56, 189, 248, 0.3) !important;
	color: var(--fsd-accent-sky) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Progress Box */
.fsd-progress-box {
	padding: 10px 14px !important;
	border-bottom: 1px solid var(--fsd-border-subtle) !important;
}

.fsd-progress-header {
	display: flex !important;
	justify-content: space-between !important;
	font-size: 11px !important;
	margin-bottom: 6px !important;
	color: var(--fsd-text-dim) !important;
}

.fsd-progress-bar-bg {
	background: #1e293b !important;
	height: 4px !important;
	border-radius: 999px !important;
	overflow: hidden !important;
}

.fsd-progress-bar-fill {
	height: 100% !important;
	background: linear-gradient(90deg, var(--fsd-accent-sky), var(--fsd-accent-emerald)) !important;
	transition: width 0.3s ease !important;
}

/* Category List & Accordion */
.fsd-category-list {
	padding: 8px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

.fsd-category-group {
	border-radius: var(--fsd-radius-sm) !important;
	overflow: hidden !important;
}

.fsd-category-title {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 10px !important;
	background: rgba(255, 255, 255, 0.03) !important;
	cursor: pointer !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--fsd-text-bright) !important;
	border-radius: 6px !important;
	user-select: none !important;
	transition: background 0.15s !important;
}

.fsd-category-title:hover {
	background: rgba(255, 255, 255, 0.08) !important;
}

.fsd-cat-name {
	flex: 1 !important;
}

.fsd-cat-count {
	font-size: 10px !important;
	background: #1e293b !important;
	padding: 1px 6px !important;
	border-radius: 999px !important;
	color: var(--fsd-text-dim) !important;
}

.fsd-cat-toggle-arrow {
	font-size: 14px !important;
	transition: transform 0.2s !important;
}

.fsd-category-group.is-collapsed .fsd-cat-toggle-arrow {
	transform: rotate(-90deg) !important;
}

.fsd-category-group.is-collapsed .fsd-topic-items {
	display: none !important;
}

.fsd-topic-items {
	list-style: none !important;
	margin: 0 !important;
	padding: 4px 0 6px 8px !important;
}

.fsd-topic-item {
	margin: 2px 0 !important;
}

/* Topic Item Buttons (Clean list items - NOT GIANT PILLS) */
.fsd-dsa-wrapper .fsd-topic-btn,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-topic-btn {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	color: var(--fsd-text-dim) !important;
	padding: 7px 10px !important;
	border-radius: 6px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	text-align: left !important;
	cursor: pointer !important;
	transition: all 0.15s !important;
	box-sizing: border-box !important;
}

.fsd-dsa-wrapper .fsd-topic-btn:hover,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-topic-btn:hover {
	background: #1e293b !important;
	color: #ffffff !important;
}

.fsd-topic-item.active .fsd-topic-btn,
body.fsd-ui-active .fsd-topic-item.active .fsd-topic-btn {
	background: rgba(56, 189, 248, 0.12) !important;
	border-color: rgba(56, 189, 248, 0.35) !important;
	color: var(--fsd-accent-sky) !important;
	font-weight: 700 !important;
}

.fsd-topic-icon {
	font-size: 14px !important;
	width: 14px !important;
	height: 14px !important;
	color: var(--fsd-text-muted) !important;
}

.fsd-topic-item.active .fsd-topic-icon {
	color: var(--fsd-accent-sky) !important;
}

.fsd-topic-name {
	flex: 1 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.fsd-topic-diff-badge {
	font-size: 9px !important;
	padding: 1px 5px !important;
	border-radius: 3px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

.fsd-diff-beginner {
	background: rgba(16, 185, 129, 0.2) !important;
	color: #6ee7b7 !important;
}

.fsd-diff-intermediate {
	background: rgba(245, 158, 11, 0.2) !important;
	color: #fcd34d !important;
}

.fsd-diff-advanced {
	background: rgba(244, 63, 94, 0.2) !important;
	color: #fda4af !important;
}

.fsd-check-mark {
	font-size: 14px !important;
	color: var(--fsd-accent-emerald) !important;
	display: none !important;
}

.fsd-topic-item.is-mastered .fsd-check-mark {
	display: inline-block !important;
}

/* ----------------------------------------------------
   MAIN CONTENT AREA
   ---------------------------------------------------- */
.fsd-dsa-content {
	flex: 1 !important;
	padding: 24px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	overflow-x: hidden !important;
	background: radial-gradient(circle at 50% 10%, #0d1424 0%, #070a12 100%) !important;
}

.fsd-content-header {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 16px !important;
}

.fsd-active-title {
	margin: 0 0 6px 0 !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	color: #ffffff !important;
	letter-spacing: -0.02em !important;
	line-height: 1.2 !important;
}

.fsd-active-summary {
	margin: 0 !important;
	font-size: 14px !important;
	color: #cbd5e1 !important;
	line-height: 1.6 !important;
	max-width: 820px !important;
}

.fsd-status-badge {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	padding: 4px 10px !important;
	border-radius: 999px !important;
	border: 1px solid var(--fsd-border-subtle) !important;
	background: #1e293b !important;
	white-space: nowrap !important;
}

.fsd-status-dot {
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	background: var(--fsd-text-muted) !important;
}

.fsd-status-idle .fsd-status-dot {
	background: var(--fsd-text-muted) !important;
}

.fsd-status-running {
	border-color: var(--fsd-border-sky) !important;
	color: var(--fsd-accent-sky) !important;
}

.fsd-status-running .fsd-status-dot {
	background: var(--fsd-accent-sky) !important;
	box-shadow: 0 0 10px rgba(56, 189, 248, 0.8) !important;
}

.fsd-status-complete {
	border-color: rgba(16, 185, 129, 0.4) !important;
	color: var(--fsd-accent-emerald) !important;
}

.fsd-status-complete .fsd-status-dot {
	background: var(--fsd-accent-emerald) !important;
	box-shadow: 0 0 10px rgba(16, 185, 129, 0.8) !important;
}

/* Dynamic Step Narration HUD */
.fsd-narration-hud {
	background: #0d1527 !important;
	border: 1px solid rgba(56, 189, 248, 0.3) !important;
	border-left: 4px solid var(--fsd-accent-sky) !important;
	border-radius: var(--fsd-radius-sm) !important;
	padding: 12px 18px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	font-size: 13px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.fsd-narration-icon {
	color: var(--fsd-accent-sky) !important;
	font-size: 20px !important;
}

.fsd-narration-content {
	flex: 1 !important;
	color: #f1f5f9 !important;
}

.fsd-narration-step {
	color: var(--fsd-accent-sky) !important;
	margin-right: 6px !important;
	font-weight: 700 !important;
}

.fsd-step-counter {
	font-size: 11px !important;
	color: var(--fsd-text-dim) !important;
	font-weight: 700 !important;
	background: #1e293b !important;
	padding: 4px 10px !important;
	border-radius: 4px !important;
	white-space: nowrap !important;
}

/* Custom Data Input Drawer */
.fsd-custom-input-drawer {
	background: #0f172a !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: var(--fsd-radius-md) !important;
	padding: 16px !important;
}

.fsd-drawer-inner {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.fsd-drawer-field label {
	display: block !important;
	font-size: 12px !important;
	margin-bottom: 6px !important;
	color: var(--fsd-text-bright) !important;
}

.fsd-input {
	width: 100% !important;
	background: #1e293b !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
	padding: 8px 12px !important;
	border-radius: var(--fsd-radius-sm) !important;
	font-size: 13px !important;
	outline: none !important;
}

.fsd-input:focus {
	border-color: var(--fsd-accent-sky) !important;
}

.fsd-drawer-actions {
	display: flex !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
}

/* ----------------------------------------------------
   VISUALIZATION STAGE & STATS
   ---------------------------------------------------- */
.fsd-stage-container {
	background: #060911 !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: var(--fsd-radius-md) !important;
	box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8) !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 380px !important;
	position: relative !important;
	overflow: hidden !important;
}

.fsd-stage-viewport {
	flex: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 24px 20px !important;
	min-height: 330px !important;
	position: relative !important;
	overflow: auto !important;
}

.fsd-stage-canvas {
	width: 100% !important;
	height: 100% !important;
	min-height: 300px !important;
	display: flex !important;
	align-items: flex-end !important;
	justify-content: center !important;
	position: relative !important;
}

.fsd-stage-stats {
	background: #0b1120 !important;
	border-top: 1px solid var(--fsd-border-subtle) !important;
	padding: 10px 18px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-around !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
	font-size: 12px !important;
}

.fsd-stat-item {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	color: var(--fsd-text-dim) !important;
}

.fsd-stat-val {
	color: var(--fsd-accent-sky) !important;
	font-family: monospace !important;
	font-size: 13px !important;
}

/* ----------------------------------------------------
   GUI VISUALIZERS (BARS, NODES, STACK, QUEUE, ETC)
   ---------------------------------------------------- */

/* Array Bars */
.fsd-bar-container {
	display: flex !important;
	align-items: flex-end !important;
	justify-content: center !important;
	gap: 12px !important;
	height: 280px !important;
	width: 100% !important;
	padding: 0 10px 10px 10px !important;
}

.fsd-bar-col {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	flex: 1 !important;
	max-width: 58px !important;
	height: 100% !important;
	justify-content: flex-end !important;
	position: relative !important;
	transition: transform 0.25s ease !important;
}

.fsd-bar {
	width: 100% !important;
	background: linear-gradient(180deg, #38bdf8 0%, #1e40af 100%) !important;
	border-radius: 6px 6px 2px 2px !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: center !important;
	padding-top: 6px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
	transition: height 0.25s ease, background 0.25s ease !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

.fsd-bar-idx {
	margin-top: 8px !important;
	font-size: 11px !important;
	color: var(--fsd-text-dim) !important;
	font-family: monospace !important;
}

.fsd-bar-col.is-comparing .fsd-bar {
	background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%) !important;
	box-shadow: 0 0 16px rgba(245, 158, 11, 0.7) !important;
	transform: scale(1.04) !important;
}

.fsd-bar-col.is-swapping .fsd-bar {
	background: linear-gradient(180deg, #f43f5e 0%, #be123c 100%) !important;
	box-shadow: 0 0 16px rgba(244, 63, 94, 0.8) !important;
	transform: scale(1.08) !important;
}

.fsd-bar-col.is-sorted .fsd-bar {
	background: linear-gradient(180deg, #10b981 0%, #047857 100%) !important;
	box-shadow: 0 0 16px rgba(16, 185, 129, 0.7) !important;
}

.fsd-bar-col.is-pointer-low::before,
.fsd-bar-col.is-pointer-high::before,
.fsd-bar-col.is-pointer-mid::before {
	content: "PTR" !important;
	position: absolute !important;
	top: -26px !important;
	font-size: 9px !important;
	font-weight: 800 !important;
	padding: 2px 5px !important;
	border-radius: 4px !important;
	letter-spacing: 0.05em !important;
	color: #ffffff !important;
}

.fsd-bar-col.is-pointer-low::before { content: "LOW" !important; background: #2563eb !important; }
.fsd-bar-col.is-pointer-mid::before { content: "MID" !important; background: #f59e0b !important; }
.fsd-bar-col.is-pointer-high::before { content: "HIGH" !important; background: #ef4444 !important; }

/* Linked List */
.fsd-ll-container {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	padding: 20px !important;
	width: 100% !important;
}

.fsd-ll-node {
	display: flex !important;
	align-items: center !important;
	background: #1e293b !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: var(--fsd-radius-sm) !important;
	overflow: hidden !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
	position: relative !important;
}

.fsd-ll-data {
	padding: 10px 16px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	background: #1e293b !important;
}

.fsd-ll-next {
	padding: 10px 10px !important;
	background: #0f172a !important;
	border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
	font-size: 11px !important;
	color: var(--fsd-accent-sky) !important;
}

.fsd-ll-arrow {
	font-size: 20px !important;
	color: var(--fsd-accent-sky) !important;
	margin: 0 4px !important;
}

.fsd-ll-null {
	padding: 8px 14px !important;
	background: #334155 !important;
	border-radius: 4px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #cbd5e1 !important;
}

.fsd-ll-node.is-active {
	border-color: var(--fsd-accent-sky) !important;
	box-shadow: 0 0 16px rgba(56, 189, 248, 0.6) !important;
}

/* Stack Tube */
.fsd-stack-container {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 220px !important;
	margin: 0 auto !important;
}

.fsd-stack-tube {
	width: 100% !important;
	min-height: 240px !important;
	border: 3px solid #475569 !important;
	border-top: none !important;
	border-radius: 0 0 16px 16px !important;
	background: rgba(15, 23, 42, 0.8) !important;
	display: flex !important;
	flex-direction: column-reverse !important;
	padding: 8px !important;
	gap: 6px !important;
}

.fsd-stack-item {
	background: linear-gradient(90deg, #3b82f6, #6366f1) !important;
	border-radius: 8px !important;
	padding: 10px !important;
	text-align: center !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.fsd-stack-top-pointer {
	margin-top: 10px !important;
	font-size: 12px !important;
	color: var(--fsd-accent-sky) !important;
	font-weight: 700 !important;
}

/* Queue Conveyor */
.fsd-queue-track {
	display: flex !important;
	align-items: center !important;
	border-top: 2px dashed #475569 !important;
	border-bottom: 2px dashed #475569 !important;
	padding: 16px 8px !important;
	gap: 10px !important;
	min-width: 320px !important;
	overflow-x: auto !important;
}

.fsd-queue-item {
	background: linear-gradient(135deg, #10b981, #059669) !important;
	padding: 12px 18px !important;
	border-radius: 8px !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	box-shadow: 0 0 14px rgba(16, 185, 129, 0.5) !important;
}

/* SVG Trees & Graphs */
.fsd-tree-svg,
.fsd-graph-svg {
	width: 100% !important;
	height: 320px !important;
}

.fsd-svg-edge {
	stroke: #475569 !important;
	stroke-width: 2.5 !important;
	transition: stroke 0.25s ease, stroke-width 0.25s ease !important;
}

.fsd-svg-edge.is-active {
	stroke: #f59e0b !important;
	stroke-width: 4 !important;
	filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.8)) !important;
}

.fsd-svg-edge.is-traversed {
	stroke: #10b981 !important;
	stroke-width: 3 !important;
}

.fsd-svg-weight {
	fill: #38bdf8 !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	font-family: monospace !important;
	text-anchor: middle !important;
	dominant-baseline: central !important;
}

.fsd-svg-node {
	fill: #1e293b !important;
	stroke: #64748b !important;
	stroke-width: 2.5 !important;
	transition: all 0.25s ease !important;
}

.fsd-svg-node.is-active {
	fill: #2563eb !important;
	stroke: #93c5fd !important;
	filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.8)) !important;
}

.fsd-svg-node.is-found {
	fill: #059669 !important;
	stroke: #6ee7b7 !important;
	filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.9)) !important;
}

.fsd-svg-text {
	fill: #ffffff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-anchor: middle !important;
	dominant-baseline: central !important;
	pointer-events: none !important;
}

/* Graph Container & HUD (Call Stack / Queue) */
.fsd-graph-container {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	height: 100% !important;
	gap: 10px !important;
}

.fsd-graph-svg {
	width: 100% !important;
	max-height: 250px !important;
}

.fsd-graph-hud {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 8px 16px !important;
	border-radius: var(--fsd-radius-sm) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	background: #0f172a !important;
	border: 1px solid var(--fsd-border-subtle) !important;
}

.fsd-stack-hud {
	background: rgba(147, 51, 234, 0.12) !important;
	border-color: rgba(168, 85, 247, 0.35) !important;
	color: #e9d5ff !important;
}

.fsd-queue-hud {
	background: rgba(56, 189, 248, 0.12) !important;
	border-color: rgba(56, 189, 248, 0.35) !important;
	color: #bae6fd !important;
}

.fsd-hud-title {
	font-size: 12px !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
}

.fsd-hud-items {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
}

.fsd-hud-pill {
	background: #1e293b !important;
	color: #ffffff !important;
	font-family: monospace !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	padding: 3px 9px !important;
	border-radius: 4px !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	transition: all 0.2s ease !important;
}

.fsd-hud-pill.is-top {
	background: #9333ea !important;
	border-color: #c084fc !important;
	box-shadow: 0 0 10px rgba(168, 85, 247, 0.7) !important;
}

.fsd-hud-empty {
	font-style: italic !important;
	color: var(--fsd-text-muted) !important;
	font-size: 11px !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-svg-edge.is-active {
	stroke: #f59e0b !important;
}
.fsd-dsa-wrapper.fsd-theme-light .fsd-svg-edge.is-traversed {
	stroke: #10b981 !important;
}
.fsd-dsa-wrapper.fsd-theme-light .fsd-svg-weight {
	fill: #2563eb !important;
}
.fsd-dsa-wrapper.fsd-theme-light .fsd-stack-hud {
	background: #faf5ff !important;
	border-color: #d8b4fe !important;
	color: #6b21a8 !important;
}
.fsd-dsa-wrapper.fsd-theme-light .fsd-queue-hud {
	background: #f0f9ff !important;
	border-color: #bae6fd !important;
	color: #0369a1 !important;
}
.fsd-dsa-wrapper.fsd-theme-light .fsd-hud-pill {
	background: #ffffff !important;
	color: #0f172a !important;
	border-color: #cbd5e1 !important;
}
.fsd-dsa-wrapper.fsd-theme-light .fsd-hud-pill.is-top {
	background: #9333ea !important;
	color: #ffffff !important;
	border-color: #7e22ce !important;
}
.fsd-dsa-wrapper.fsd-theme-light .fsd-hud-empty {
	color: #94a3b8 !important;
}

/* ----------------------------------------------------
   COMPLEXITY & CODE DECKS
   ---------------------------------------------------- */
.fsd-intel-deck {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
	gap: 14px !important;
}

.fsd-complexity-card {
	background: #0f172a !important;
	border: 1px solid var(--fsd-border-subtle) !important;
	border-radius: var(--fsd-radius-md) !important;
	padding: 16px !important;
}

.fsd-card-header {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin-bottom: 12px !important;
	color: var(--fsd-accent-sky) !important;
}

.fsd-card-header h4 {
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
}

.fsd-complexity-grid {
	display: flex !important;
	justify-content: space-between !important;
	gap: 8px !important;
	flex-wrap: nowrap !important;
}

.fsd-comp-col {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	text-align: center !important;
}

.fsd-comp-tag {
	font-size: 10px !important;
	color: var(--fsd-text-dim) !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
}

.fsd-comp-code {
	font-size: 11px !important;
	color: #38bdf8 !important;
	background: #070a12 !important;
	padding: 4px 6px !important;
	border-radius: 4px !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	display: block !important;
	font-family: monospace !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	text-align: center !important;
}

.fsd-real-world-text {
	margin: 0 !important;
	font-size: 13px !important;
	color: #cbd5e1 !important;
	line-height: 1.6 !important;
}

/* Multi-Language Code Deck */
.fsd-code-deck {
	background: #070a12 !important;
	border: 1px solid var(--fsd-border-subtle) !important;
	border-radius: var(--fsd-radius-md) !important;
	overflow: hidden !important;
}

.fsd-code-header {
	background: #0f172a !important;
	border-bottom: 1px solid var(--fsd-border-subtle) !important;
	padding: 8px 14px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
}

.fsd-code-tabs {
	display: flex !important;
	gap: 4px !important;
}

.fsd-dsa-wrapper .fsd-code-tab,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-code-tab {
	background: transparent !important;
	border: 1px solid transparent !important;
	color: var(--fsd-text-dim) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	padding: 6px 12px !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	transition: all 0.15s !important;
}

.fsd-dsa-wrapper .fsd-code-tab:hover,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-code-tab:hover {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.06) !important;
}

.fsd-dsa-wrapper .fsd-code-tab.active,
body.fsd-ui-active .fsd-dsa-wrapper .fsd-code-tab.active {
	background: #1e293b !important;
	border-color: rgba(56, 189, 248, 0.3) !important;
	color: var(--fsd-accent-sky) !important;
}

.fsd-code-actions {
	display: flex !important;
	gap: 8px !important;
}

.fsd-btn-sm {
	padding: 5px 10px !important;
	font-size: 11px !important;
}

.fsd-code-body {
	padding: 16px !important;
	max-height: 320px !important;
	overflow-y: auto !important;
}

.fsd-code-pre {
	margin: 0 !important;
	background: transparent !important;
	padding: 0 !important;
}

.fsd-code-block {
	font-family: "Fira Code", Menlo, Monaco, Consolas, monospace !important;
	font-size: 13px !important;
	color: #e2e8f0 !important;
	line-height: 1.6 !important;
	white-space: pre !important;
}

/* AI Tutor Backdrop */
.fsd-ai-backdrop {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: rgba(0, 0, 0, 0.5) !important;
	backdrop-filter: blur(2px) !important;
	z-index: 100 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
	transition: opacity 0.25s ease, visibility 0.25s !important;
}

.fsd-ai-backdrop.is-open {
	opacity: 1 !important;
	pointer-events: auto !important;
	visibility: visible !important;
}

/* AI Tutor Slideout Drawer */
.fsd-ai-tutor-drawer {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	width: 380px !important;
	max-width: 90% !important;
	height: 100% !important;
	background: #0f172a !important;
	border-left: 1px solid rgba(168, 85, 247, 0.35) !important;
	box-shadow: -15px 0 35px rgba(0, 0, 0, 0.75) !important;
	z-index: 120 !important;
	display: flex !important;
	flex-direction: column !important;
	backdrop-filter: blur(16px) !important;
	transform: translateX(105%) !important;
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, visibility 0.28s !important;
}

.fsd-ai-tutor-drawer.is-open {
	transform: translateX(0) !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	visibility: visible !important;
}

.fsd-ai-drawer-header {
	padding: 14px 18px !important;
	background: #151b2e !important;
	border-bottom: 1px solid var(--fsd-border-subtle) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.fsd-ai-title {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.fsd-ai-avatar {
	font-size: 22px !important;
	color: #c084fc !important;
}

.fsd-ai-title h4 {
	margin: 0 !important;
	font-size: 14px !important;
	color: #ffffff !important;
}

.fsd-ai-status-online {
	font-size: 10px !important;
	color: #34d399 !important;
}

.fsd-ai-close-btn {
	background: rgba(255, 255, 255, 0.08) !important;
	border: none !important;
	color: var(--fsd-text-dim) !important;
	font-size: 20px !important;
	line-height: 1 !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.15s ease !important;
}

.fsd-ai-close-btn:hover {
	background: rgba(244, 63, 94, 0.2) !important;
	color: #fb7185 !important;
}

.fsd-ai-prompts {
	padding: 10px 14px !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	border-bottom: 1px solid var(--fsd-border-subtle) !important;
	background: rgba(255, 255, 255, 0.02) !important;
}

.fsd-ai-chip {
	background: #1e293b !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: #cbd5e1 !important;
	font-size: 11px !important;
	padding: 5px 10px !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	transition: all 0.15s !important;
}

.fsd-ai-chip:hover {
	border-color: var(--fsd-accent-purple) !important;
	color: #ffffff !important;
	background: rgba(168, 85, 247, 0.2) !important;
}

.fsd-ai-chat-messages {
	flex: 1 !important;
	padding: 14px !important;
	overflow-y: auto !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.fsd-ai-msg {
	display: flex !important;
	gap: 10px !important;
}

.fsd-ai-msg-bot .fsd-msg-bubble {
	background: #1e293b !important;
	color: #f1f5f9 !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 4px 12px 12px 12px !important;
	padding: 12px !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
}

.fsd-ai-msg-user {
	justify-content: flex-end !important;
}

.fsd-ai-msg-user .fsd-msg-bubble {
	background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
	color: #ffffff !important;
	border-radius: 12px 12px 4px 12px !important;
	padding: 10px 14px !important;
	font-size: 13px !important;
}

.fsd-ai-input-bar {
	padding: 10px 14px !important;
	border-top: 1px solid var(--fsd-border-subtle) !important;
	display: flex !important;
	gap: 8px !important;
	background: #0b1120 !important;
}

.fsd-ai-text-input {
	flex: 1 !important;
	background: #1e293b !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: #ffffff !important;
	padding: 8px 12px !important;
	border-radius: var(--fsd-radius-sm) !important;
	font-size: 12px !important;
	outline: none !important;
}

.fsd-ai-text-input:focus {
	border-color: var(--fsd-accent-purple) !important;
}

/* Responsive adjustments */
@media (max-width: 960px) {
	.fsd-dsa-body {
		flex-direction: column !important;
	}
	.fsd-dsa-sidebar {
		width: 100% !important;
		min-width: 100% !important;
		max-height: 280px !important;
		border-right: none !important;
		border-bottom: 1px solid var(--fsd-border-subtle) !important;
	}
	.fsd-ai-tutor-drawer {
		width: 100% !important;
	}
}

@media (max-width: 640px) {
	.fsd-dsa-header {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.fsd-dsa-toolbar {
		justify-content: space-between !important;
	}
	.fsd-toolbar-playback {
		flex: 1 !important;
	}
}

/* ====================================================
   LIGHT THEME DESIGN SYSTEM (FullStackDost SaaS Aesthetic)
   ==================================================== */
.fsd-dsa-wrapper.fsd-theme-light,
body .fsd-dsa-wrapper.fsd-theme-light,
body.fsd-ui-active .fsd-dsa-wrapper.fsd-theme-light {
	background: #ffffff !important;
	color: #1e293b !important;
	border-color: #e2e8f0 !important;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08), 0 0 1px 1px rgba(0, 0, 0, 0.04) !important;
}

/* Light Header */
.fsd-dsa-wrapper.fsd-theme-light .fsd-dsa-header {
	background: #f8fafc !important;
	border-bottom: 1px solid #e2e8f0 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-dsa-heading {
	color: #0f172a !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-dsa-subheading {
	color: #64748b !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-dsa-icon {
	background: #eff6ff !important;
	border-color: #bfdbfe !important;
	color: #2563eb !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-pill-category {
	background: #e0e7ff !important;
	color: #4338ca !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-pill-difficulty {
	background: #dcfce7 !important;
	color: #15803d !important;
}

/* Light Buttons & Controls */
.fsd-dsa-wrapper.fsd-theme-light .fsd-btn-control,
.fsd-dsa-wrapper.fsd-theme-light .fsd-btn-secondary,
.fsd-dsa-wrapper.fsd-theme-light .fsd-btn-icon,
.fsd-dsa-wrapper.fsd-theme-light .fsd-toggle-theme {
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	color: #334155 !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-btn-control:hover,
.fsd-dsa-wrapper.fsd-theme-light .fsd-btn-secondary:hover,
.fsd-dsa-wrapper.fsd-theme-light .fsd-btn-icon:hover,
.fsd-dsa-wrapper.fsd-theme-light .fsd-toggle-theme:hover {
	background: #f1f5f9 !important;
	border-color: #94a3b8 !important;
	color: #0f172a !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-btn-primary {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
	color: #ffffff !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-btn-ai {
	background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%) !important;
	border: 1px solid #c084fc !important;
	color: #ffffff !important;
	box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-speed-selector {
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-speed-selector label {
	color: #2563eb !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-speed-select {
	color: #0f172a !important;
}

/* Light Sidebar */
.fsd-dsa-wrapper.fsd-theme-light .fsd-dsa-sidebar {
	background: #f8fafc !important;
	border-right: 1px solid #e2e8f0 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-sidebar-search-wrap {
	border-bottom: 1px solid #e2e8f0 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-topic-search-input {
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	color: #0f172a !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-topic-search-input::placeholder {
	color: #94a3b8 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-search-icon {
	color: #94a3b8 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-search-clear {
	color: #94a3b8 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-difficulty-tabs {
	background: #f1f5f9 !important;
	border-bottom: 1px solid #e2e8f0 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-diff-tab {
	background: transparent !important;
	color: #64748b !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-diff-tab.active {
	background: #ffffff !important;
	color: #2563eb !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
	font-weight: 700 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-progress-box {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-progress-label,
.fsd-dsa-wrapper.fsd-theme-light .fsd-progress-count {
	color: #475569 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-progress-bar-bg {
	background: #e2e8f0 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-progress-bar-fill {
	background: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-category-title {
	color: #475569 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-category-title:hover {
	background: #f1f5f9 !important;
	color: #0f172a !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-cat-count {
	background: #e2e8f0 !important;
	color: #334155 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-topic-btn {
	color: #334155 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-topic-btn:hover {
	background: #e2e8f0 !important;
	color: #0f172a !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-topic-item.active .fsd-topic-btn {
	background: #eff6ff !important;
	border-color: #bfdbfe !important;
	color: #1d4ed8 !important;
	font-weight: 700 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-topic-item.active .fsd-topic-icon {
	color: #2563eb !important;
}

/* Light Main Content Area */
.fsd-dsa-wrapper.fsd-theme-light .fsd-dsa-content {
	background: #ffffff !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-active-title {
	color: #0f172a !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-active-summary {
	color: #475569 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-status-badge {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	color: #334155 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-status-running {
	background: #eff6ff !important;
	border-color: #93c5fd !important;
	color: #1d4ed8 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-status-complete {
	background: #ecfdf5 !important;
	border-color: #a7f3d0 !important;
	color: #047857 !important;
}

/* Light Narration HUD */
.fsd-dsa-wrapper.fsd-theme-light .fsd-narration-hud {
	background: #eff6ff !important;
	border: 1px solid #bfdbfe !important;
	border-left: 4px solid #2563eb !important;
	color: #1e3a8a !important;
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-narration-icon {
	color: #2563eb !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-narration-content {
	color: #1e293b !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-step-counter {
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	color: #334155 !important;
}

/* Light Stage Viewport & Canvas */
.fsd-dsa-wrapper.fsd-theme-light .fsd-stage-container {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-stage-viewport {
	background: radial-gradient(circle at center, #ffffff 0%, #f1f5f9 100%) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-stage-stats {
	background: #ffffff !important;
	border-top: 1px solid #e2e8f0 !important;
	color: #64748b !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-stage-stats span strong {
	color: #0f172a !important;
}

/* Light Array Bars */
.fsd-dsa-wrapper.fsd-theme-light .fsd-bar {
	background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
	box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2) !important;
	color: #ffffff !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-bar-col.is-comparing .fsd-bar {
	background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
	box-shadow: 0 0 14px rgba(245, 158, 11, 0.6) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-bar-col.is-swapping .fsd-bar {
	background: linear-gradient(180deg, #ec4899 0%, #be185d 100%) !important;
	box-shadow: 0 0 14px rgba(236, 72, 153, 0.6) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-bar-col.is-sorted .fsd-bar {
	background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
	box-shadow: 0 0 14px rgba(16, 185, 129, 0.6) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-bar-idx {
	color: #64748b !important;
	font-weight: 600 !important;
}

/* Light SVG Nodes & Edges */
.fsd-dsa-wrapper.fsd-theme-light .fsd-svg-edge {
	stroke: #94a3b8 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-svg-edge.is-active {
	stroke: #2563eb !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-svg-node {
	fill: #ffffff !important;
	stroke: #3b82f6 !important;
	stroke-width: 2.5px !important;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08)) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-svg-text {
	fill: #0f172a !important;
	font-weight: 700 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-svg-node.is-active {
	fill: #eff6ff !important;
	stroke: #2563eb !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-svg-node.is-found {
	fill: #d1fae5 !important;
	stroke: #059669 !important;
}

/* Light Linked List & Stacks */
.fsd-dsa-wrapper.fsd-theme-light .fsd-stack-item {
	background: #ffffff !important;
	border: 1.5px solid #3b82f6 !important;
	color: #0f172a !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-stack-item.is-top {
	background: #eff6ff !important;
	border-color: #2563eb !important;
	color: #1d4ed8 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-ll-node-box {
	background: #ffffff !important;
	border: 1.5px solid #3b82f6 !important;
	color: #0f172a !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-ll-arrow {
	color: #94a3b8 !important;
}

/* Light Chessboard / Matrix Grid */
.fsd-dsa-wrapper.fsd-theme-light .cell-dark {
	background: #e2e8f0 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .cell-light {
	background: #ffffff !important;
}

.fsd-dsa-wrapper.fsd-theme-light .cell-has-queen {
	background: #dbeafe !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-grid-cell {
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	color: #0f172a !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-grid-cell.is-active {
	background: #dbeafe !important;
	border-color: #2563eb !important;
	color: #1d4ed8 !important;
}

/* Light Complexity Cards */
.fsd-dsa-wrapper.fsd-theme-light .fsd-complexity-card {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-card-header h4 {
	color: #0f172a !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-card-header {
	color: #2563eb !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-comp-tag {
	color: #64748b !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-comp-code {
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	color: #1d4ed8 !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-real-world-text {
	color: #334155 !important;
}

/* Light Code Deck */
.fsd-dsa-wrapper.fsd-theme-light .fsd-code-deck {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-code-header {
	background: #f1f5f9 !important;
	border-bottom: 1px solid #e2e8f0 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-code-tab {
	color: #64748b !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-code-tab:hover {
	color: #0f172a !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-code-tab.active {
	background: #ffffff !important;
	color: #2563eb !important;
	border-bottom-color: #2563eb !important;
	box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-code-action-btn {
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	color: #334155 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-code-action-btn:hover {
	background: #e2e8f0 !important;
	color: #0f172a !important;
}

/* Light Custom Input Drawer */
.fsd-dsa-wrapper.fsd-theme-light .fsd-custom-input-drawer {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-drawer-field label {
	color: #334155 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-input {
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	color: #0f172a !important;
}

/* Light AI Tutor Drawer */
.fsd-dsa-wrapper.fsd-theme-light .fsd-ai-tutor-drawer {
	background: #ffffff !important;
	border-left: 1px solid #e2e8f0 !important;
	box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-ai-drawer-header {
	background: #f8fafc !important;
	border-bottom: 1px solid #e2e8f0 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-ai-title h4 {
	color: #0f172a !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-ai-avatar {
	color: #7c3aed !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-ai-close-btn {
	background: #e2e8f0 !important;
	color: #475569 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-ai-prompts {
	background: #f8fafc !important;
	border-bottom: 1px solid #e2e8f0 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-ai-chip {
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	color: #334155 !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-ai-chip:hover {
	background: #faf5ff !important;
	border-color: #a855f7 !important;
	color: #7e22ce !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-ai-chat-messages {
	background: #ffffff !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-ai-msg-bot .fsd-msg-bubble {
	background: #f1f5f9 !important;
	color: #1e293b !important;
	border: 1px solid #e2e8f0 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-ai-msg-user .fsd-msg-bubble {
	background: #2563eb !important;
	color: #ffffff !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-ai-input-bar {
	background: #f8fafc !important;
	border-top: 1px solid #e2e8f0 !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-ai-text-input {
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	color: #0f172a !important;
}

.fsd-dsa-wrapper.fsd-theme-light .fsd-ai-backdrop {
	background: rgba(0, 0, 0, 0.3) !important;
}