/* ╔═══════════════════════════════════════════════════════════╗
	   ║  THEME TOGGLE — 156×54 Pill Track                      ║
	   ║  Avatar left, handle slides, inner glow bulb follows    ║
	   ╚═══════════════════════════════════════════════════════════╝ */

	.ka_tpNavSys__actnBtn--usr.n3d-thm {
		width: 156px;
		min-width: 156px;
		max-width: 156px;
		height: 54px;
		padding: 0;
		position: absolute;
		left: 10px;
		bottom: 10px;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		background: var(--n3d-alphablur-bg);
		border-radius: var(--n3d-radius-2xl);
		display: flex;
		align-items: center;
		overflow: visible;
		transition: background 0.5s ease,
			border-color 0.5s ease,
			box-shadow 0.5s ease;
	}

	/* ── Bulb indicator — left anchor ── */
	.n3d-thm__blb {
		position: absolute;
		left: 5px;
		top: 50%;
		transform: translateY(-50%);
		width: 42px;
		height: 42px;
		border-radius: 50%;
		z-index: 12;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: box-shadow 0.4s ease;
	}

	.n3d-thm__blb-ico {
		width: 26px;
		height: 26px;
		transition: filter 0.4s ease;
	}

	.n3d-thm__blb-glass,
	.n3d-thm__blb-bolt,
	.n3d-thm__blb-base,
	.n3d-thm__blb-tip,
	.n3d-thm__blb-band {
		transition: fill 0.4s ease, opacity 0.4s ease;
	}

	/* ── Separator ── */
	.n3d-thm__sep {
		position: absolute;
		left: 41px;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 28px;
		background: var(--n3d-brdr-clr-p);
		opacity: 0.4;
		z-index: 12;
	}

	/* ── State: OFF ── */
	.n3d-thm__blb[data-blb="0"] .n3d-thm__blb-glass { fill: var(--n3d-clr-txt-ter); opacity: 0.4; }
	.n3d-thm__blb[data-blb="0"] .n3d-thm__blb-bolt  { fill: var(--n3d-clr-txt-ter); opacity: 0.2; }
	.n3d-thm__blb[data-blb="0"] .n3d-thm__blb-base  { fill: var(--n3d-clr-txt-ter); opacity: 0.3; }
	.n3d-thm__blb[data-blb="0"] .n3d-thm__blb-tip   { fill: var(--n3d-clr-txt-ter); opacity: 0.25; }
	.n3d-thm__blb[data-blb="0"] .n3d-thm__blb-band  { fill: var(--n3d-clr-txt-ter); opacity: 0.2; }
	.n3d-thm__blb[data-blb="0"] .n3d-thm__blb-ico   { filter: none; }

	/* ── State: WARM ── */
	.n3d-thm__blb[data-blb="1"] .n3d-thm__blb-glass { fill: #ffb830; opacity: 0.9; }
	.n3d-thm__blb[data-blb="1"] .n3d-thm__blb-bolt  { fill: #ffffff; opacity: 0.95; }
	.n3d-thm__blb[data-blb="1"] .n3d-thm__blb-base  { fill: #e0a020; opacity: 0.7; }
	.n3d-thm__blb[data-blb="1"] .n3d-thm__blb-tip   { fill: #cc8800; opacity: 0.6; }
	.n3d-thm__blb[data-blb="1"] .n3d-thm__blb-band  { fill: #d09018; opacity: 0.5; }
	.n3d-thm__blb[data-blb="1"] .n3d-thm__blb-ico   { filter: drop-shadow(0 0 5px rgba(255,160,40,0.7)); }

	/* ── State: COOL ── */
	.n3d-thm__blb[data-blb="2"] .n3d-thm__blb-glass { fill: #4a9eff; opacity: 0.9; }
	.n3d-thm__blb[data-blb="2"] .n3d-thm__blb-bolt  { fill: #ffffff; opacity: 0.95; }
	.n3d-thm__blb[data-blb="2"] .n3d-thm__blb-base  { fill: #3080d0; opacity: 0.7; }
	.n3d-thm__blb[data-blb="2"] .n3d-thm__blb-tip   { fill: #2060a0; opacity: 0.6; }
	.n3d-thm__blb[data-blb="2"] .n3d-thm__blb-band  { fill: #2870b8; opacity: 0.5; }
	.n3d-thm__blb[data-blb="2"] .n3d-thm__blb-ico   { filter: drop-shadow(0 0 5px rgba(80,150,255,0.7)); }

	/* ── State: NEON ── */
	.n3d-thm__blb[data-blb="3"] .n3d-thm__blb-glass { fill: #90ff00; opacity: 0.9; }
	.n3d-thm__blb[data-blb="3"] .n3d-thm__blb-bolt  { fill: #ffffff; opacity: 0.95; }
	.n3d-thm__blb[data-blb="3"] .n3d-thm__blb-base  { fill: #73cc00; opacity: 0.7; }
	.n3d-thm__blb[data-blb="3"] .n3d-thm__blb-tip   { fill: #5aa000; opacity: 0.6; }
	.n3d-thm__blb[data-blb="3"] .n3d-thm__blb-band  { fill: #4200ff; opacity: 0.5; }
	.n3d-thm__blb[data-blb="3"] .n3d-thm__blb-ico   { filter: drop-shadow(0 0 4px rgba(144,255,0,0.5)) drop-shadow(0 0 8px rgba(66,0,255,0.3)); }

	/* ── Sunrise theme — dark bulb for contrast ── */
	[data-theme="sunrise"] .n3d-thm__blb[data-blb="0"] .n3d-thm__blb-glass { fill: #333; }
	[data-theme="sunrise"] .n3d-thm__blb[data-blb="0"] .n3d-thm__blb-bolt  { fill: #333; }
	[data-theme="sunrise"] .n3d-thm__blb[data-blb="0"] .n3d-thm__blb-base  { fill: #444; }
	[data-theme="sunrise"] .n3d-thm__blb[data-blb="0"] .n3d-thm__blb-tip   { fill: #555; }
	[data-theme="sunrise"] .n3d-thm__blb[data-blb="0"] .n3d-thm__blb-band  { fill: #444; }

	/* ── Handle — slides, overflow visible ── */
	.n3d-thm__handle {
		width: 48px;
		height: 42px;
		border-radius: var(--n3d-radius-2xl);
		position: absolute;
		top: 0.4rem;
		left: 102px;
		cursor: grab;
		z-index: 10;
		background: transparent;
		box-shadow: var(--n3d-shadow-inner-sm), inset var(--n3d-shadow-inner-lg);
		transition:
			left 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
			transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
			box-shadow 0.4s ease,
			border-radius 0.3s ease;
		transform-origin: center center;
	}

	.n3d-thm__handle:hover:not(.dragging) {
		transform: scale(1.06);
	}

	.n3d-thm__handle:active:not(.dragging) {
		transform: scale(0.92);
	}

	.n3d-thm__handle.dragging {
		cursor: grabbing;
		transform: scaleX(1.25) scaleY(1.25);
		border-radius: 24px;
	}

	.n3d-thm:focus-visible .n3d-thm__handle {
		box-shadow:
			var(--n3d-shadow-inner-xs),
			0 0 0 3px rgba(191,90,242,0.3);
	}

	/* ── Icons — sun LEFT, moon RIGHT ── */
	.n3d-thm__icn {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 22px;
		height: 22px;
		z-index: 1;
		pointer-events: none;
		transition:
			opacity 0.4s ease,
			color 0.4s ease,
			filter 0.4s ease;
	}

	.n3d-thm__icn--sun {
		left: 63px;
		top:52%;
		width: 22px;
		height: 22px;
		stroke: currentColor;
		stroke-width: 4;
		overflow: visible;
	}

	.n3d-thm__icn--moon {
		right: 18px;
		width: 22px;
		height: 22px;
		stroke: currentColor;
		stroke-width: 2.5;
	}


	/* ╔═══════════════════════════════════════════════════════════╗
	   ║  SVG ANIMATIONS — Rays rotate, stars twinkle            ║
	   ╚═══════════════════════════════════════════════════════════╝ */

	/* ── Sun rays — slow spin when active ── */
	.n3d-thm__rays {
		transform-origin: 256px 256px;
		transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.n3d-thm__ray {
		opacity: 0.6;
		transition: opacity 0.4s ease;
	}

	/* ── Sun body — pulse on activate ── */
	.n3d-thm__sun-body {
		transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
		transform-origin: 256px 256px;
	}

	/* ── Moon body — rock on activate ── */
	.n3d-thm__moon-body {
		transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
		transform-origin: 256px 256px;
	}

	/* ── Stars — twinkle with stagger ── */
	.n3d-thm__star {
		transform-origin: center;
		opacity: 0.5;
		transition: opacity 0.4s ease, transform 0.4s ease;
	}

	.n3d-thm__star:nth-child(1) { transition-delay: 0s; }
	.n3d-thm__star:nth-child(2) { transition-delay: 0.12s; }
	.n3d-thm__star:nth-child(3) { transition-delay: 0.24s; }


	/* ── KEYFRAMES ── */
	@keyframes n3d-ray-spin {
		from { transform: rotate(0deg); }
		to   { transform: rotate(360deg); }
	}

	@keyframes n3d-star-twinkle {
		0%, 100% { transform: scale(1); opacity: 0.7; }
		50%      { transform: scale(1.3); opacity: 1; }
	}

	@keyframes n3d-sun-pop {
		0%   { transform: scale(0.85); }
		50%  { transform: scale(1.08); }
		100% { transform: scale(1); }
	}

	@keyframes n3d-moon-rock {
		0%   { transform: rotate(0deg); }
		25%  { transform: rotate(-8deg); }
		75%  { transform: rotate(5deg); }
		100% { transform: rotate(0deg); }
	}


	/* ── SUNRISE ACTIVE — rays spin, sun pops ── */
	[data-theme="sunrise"] .n3d-thm__rays {
		animation: n3d-ray-spin 30s linear infinite;
	}

	[data-theme="sunrise"] .n3d-thm__ray {
		opacity: 1;
	}

	[data-theme="sunrise"] .n3d-thm__sun-body {
		animation: n3d-sun-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
	}


	/* ── SKYNIGHT ACTIVE — moon rocks, stars twinkle ── */
	[data-theme="skynight"] .n3d-thm__moon-body {
		animation: n3d-moon-rock 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
	}

	[data-theme="skynight"] .n3d-thm__star {
		opacity: 1;
		animation: n3d-star-twinkle 2s ease-in-out infinite;
	}

	[data-theme="skynight"] .n3d-thm__star:nth-child(1) { animation-delay: 0s; }
	[data-theme="skynight"] .n3d-thm__star:nth-child(2) { animation-delay: 0.7s; }
	[data-theme="skynight"] .n3d-thm__star:nth-child(3) { animation-delay: 1.4s; }


	/* ── Inactive state — no animation, dim ── */
	[data-theme="skynight"] .n3d-thm__rays {
		animation: none;
	}

	[data-theme="sunrise"] .n3d-thm__star {
		animation: none;
		opacity: 0.3;
	}


	/* ╔═══════════════════════════════════════════════════════════╗
	   ║  SKYNIGHT — moon LIT purple, sun OFF white              ║
	   ╚═══════════════════════════════════════════════════════════╝ */
	/* avatar removed — bulb indicator handles state */

	[data-theme="skynight"] .n3d-thm__icn--moon {
		opacity: 1;
		color: rgb(215, 194, 255);
		filter:
			drop-shadow(0 0 4px rgba(165, 126, 255, 0.574))
			drop-shadow(0 0 12px rgba(130, 58, 255, 0.3));
	}

	[data-theme="skynight"] .n3d-thm__icn--sun {
		opacity: 0.35;
		color: rgba(255,255,255,0.5);
		filter: none;
	}


	/* ╔═══════════════════════════════════════════════════════════╗
	   ║  SUNRISE — sun LIT orange, moon OFF dark                ║
	   ╚═══════════════════════════════════════════════════════════╝ */
	/* avatar removed — bulb indicator handles state */

	[data-theme="sunrise"] .n3d-thm__icn--sun {
		opacity: 1;
		color: rgba(44, 29, 0, 0.899);
		filter:
			drop-shadow(0 0 4px rgba(99, 0, 148, 0.361))
			drop-shadow(0 0 12px rgba(19, 0, 50, 0.3));
	}

	[data-theme="sunrise"] .n3d-thm__icn--moon {
		opacity: 0.3;
		color: rgba(0,0,0,0.4);
		filter: none;
	}