/* =============================================================
   Lumino Dark Mode — lumino.css v1.1
   ============================================================= */

/* ── Base toggle wrapper ─────────────────────────────────────── */
#lumino-wrap {
	position: fixed;
	z-index: 2147483647;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
}
#lumino-wrap:focus { outline: none; }
#lumino-wrap:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 3px;
	border-radius: inherit;
}
#lumino-wrap:active { transform: scale(0.88); }

/* ── Track ───────────────────────────────────────────────────── */
#lumino-track {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 8px;
	box-sizing: border-box;
	overflow: hidden;
	transition: background 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}

/* ── Icons ───────────────────────────────────────────────────── */
.lumino-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	z-index: 1;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1), color 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lumino-icon svg { width: 100%; height: 100%; display: block; }

/* ── Thumb ───────────────────────────────────────────────────── */
#lumino-thumb {
	position: absolute;
	border-radius: 50%;
	z-index: 2;
	transition: left 0.4s cubic-bezier(0.34,1.56,0.64,1),
				background 0.45s ease,
				box-shadow 0.45s ease;
}

/* ── Shared icon opacity states ──────────────────────────────── */
#lumino-wrap:not(.lumino-night) .lumino-sun  { opacity: 1;    transform: scale(1.2); }
#lumino-wrap:not(.lumino-night) .lumino-moon { opacity: 0.25; transform: scale(0.8); }
#lumino-wrap.lumino-night       .lumino-sun  { opacity: 0.25; transform: scale(0.8); }
#lumino-wrap.lumino-night       .lumino-moon { opacity: 1;    transform: scale(1.2); }

/* =============================================================
   STYLE 1 — GLASSMORPHISM
   Day: frosted white glass | Night: deep space glass + indigo thumb
   ============================================================= */
#lumino-wrap.lumino-style-style-1 #lumino-track {
	background: rgba(240,240,255,0.75);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1.5px solid rgba(255,255,255,0.65);
	box-shadow: 0 4px 20px rgba(99,102,241,0.15), 0 1px 4px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
}
#lumino-wrap.lumino-style-style-1 .lumino-sun  { color: #f59e0b; }
#lumino-wrap.lumino-style-style-1 .lumino-moon { color: #94a3b8; }
#lumino-wrap.lumino-style-style-1 #lumino-thumb {
	background: linear-gradient(135deg, #6366f1, #8b5cf6);
	box-shadow: 0 2px 10px rgba(99,102,241,0.55);
}
#lumino-wrap.lumino-style-style-1.lumino-night #lumino-track {
	background: rgba(15,12,41,0.92);
	border-color: rgba(99,102,241,0.4);
	box-shadow: 0 4px 24px rgba(99,102,241,0.3), 0 1px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}
#lumino-wrap.lumino-style-style-1.lumino-night .lumino-sun  { color: #fbbf24; }
#lumino-wrap.lumino-style-style-1.lumino-night .lumino-moon { color: #a5b4fc; }
#lumino-wrap.lumino-style-style-1.lumino-night #lumino-thumb {
	background: linear-gradient(135deg, #a78bfa, #6366f1);
	box-shadow: 0 0 14px rgba(167,139,250,0.75);
}

/* =============================================================
   STYLE 2 — NEUMORPHIC
   Day: soft raised light | Night: soft raised dark
   ============================================================= */
#lumino-wrap.lumino-style-style-2 #lumino-track {
	background: #e0e5ec;
	box-shadow: 6px 6px 12px #b8bec7, -4px -4px 8px #ffffff;
	border: none;
}
#lumino-wrap.lumino-style-style-2 .lumino-sun  { color: #f59e0b; }
#lumino-wrap.lumino-style-style-2 .lumino-moon { color: #94a3b8; }
#lumino-wrap.lumino-style-style-2 #lumino-thumb {
	background: linear-gradient(145deg, #ffffff, #e0e5ec);
	box-shadow: 3px 3px 6px #b8bec7, -2px -2px 4px #ffffff;
}
#lumino-wrap.lumino-style-style-2.lumino-night #lumino-track {
	background: #1e2433;
	box-shadow: 5px 5px 10px #141926, -3px -3px 7px #283042;
}
#lumino-wrap.lumino-style-style-2.lumino-night .lumino-sun  { color: #fbbf24; }
#lumino-wrap.lumino-style-style-2.lumino-night .lumino-moon { color: #93c5fd; }
#lumino-wrap.lumino-style-style-2.lumino-night #lumino-thumb {
	background: linear-gradient(145deg, #3b4560, #252d3d);
	box-shadow: 2px 2px 5px #141926, -1px -1px 3px #283042;
}

/* =============================================================
   STYLE 3 — SUNSET
   Day: orange fire gradient | Night: deep midnight ember
   ============================================================= */
#lumino-wrap.lumino-style-style-3 #lumino-track {
	background: linear-gradient(135deg, #ff6b35, #f7c59f 50%, #ffbe0b);
	box-shadow: 0 4px 20px rgba(255,107,53,0.5), 0 1px 4px rgba(0,0,0,0.1);
	border: 1px solid rgba(255,107,53,0.3);
}
#lumino-wrap.lumino-style-style-3 .lumino-sun  { color: #7c2d12; }
#lumino-wrap.lumino-style-style-3 .lumino-moon { color: #92400e; }
#lumino-wrap.lumino-style-style-3 #lumino-thumb {
	background: linear-gradient(135deg, #fff7ed, #ffffff);
	box-shadow: 0 3px 10px rgba(255,107,53,0.4);
}
#lumino-wrap.lumino-style-style-3.lumino-night #lumino-track {
	background: linear-gradient(135deg, #0c0a09, #1c0a00 50%, #431407);
	border-color: rgba(255,107,53,0.4);
	box-shadow: 0 4px 20px rgba(255,107,53,0.25), 0 1px 4px rgba(0,0,0,0.5);
}
#lumino-wrap.lumino-style-style-3.lumino-night .lumino-sun  { color: #fb923c; }
#lumino-wrap.lumino-style-style-3.lumino-night .lumino-moon { color: #fed7aa; }
#lumino-wrap.lumino-style-style-3.lumino-night #lumino-thumb {
	background: linear-gradient(135deg, #f97316, #ea580c);
	box-shadow: 0 3px 14px rgba(249,115,22,0.65), 0 0 0 3px rgba(249,115,22,0.15);
}

/* =============================================================
   STYLE 4 — DAY / NIGHT SCENE
   Day: sky blue + sun thumb + cloud | Night: space + moon thumb + stars
   ============================================================= */
#lumino-wrap.lumino-style-style-4 #lumino-track {
	background: linear-gradient(135deg, #87ceeb, #b0e0ff);
	box-shadow: 0 4px 16px rgba(135,206,235,0.5);
	border: none;
}
#lumino-wrap.lumino-style-style-4 .lumino-sun  { color: #f59e0b; font-size: 13px; }
#lumino-wrap.lumino-style-style-4 .lumino-moon { color: #7dd3fc; font-size: 11px; }
#lumino-wrap.lumino-style-style-4 #lumino-thumb {
	background: linear-gradient(135deg, #ffd700, #ffa500);
	box-shadow: 0 0 12px rgba(255,215,0,0.65);
}
#lumino-wrap.lumino-style-style-4.lumino-night #lumino-track {
	background: linear-gradient(135deg, #0f0c29, #1a1040);
	box-shadow: 0 4px 16px rgba(15,12,41,0.8);
}
#lumino-wrap.lumino-style-style-4.lumino-night .lumino-sun  { color: #fbbf24; }
#lumino-wrap.lumino-style-style-4.lumino-night .lumino-moon { color: #e2e8f0; }
#lumino-wrap.lumino-style-style-4.lumino-night #lumino-thumb {
	background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
	box-shadow: 0 0 12px rgba(226,232,240,0.5);
}

/* =============================================================
   STYLE 5 — ICON LABELS (☀ ☽ always visible)
   Day: dark track + amber sun thumb | Night: midnight + indigo thumb
   ============================================================= */
#lumino-wrap.lumino-style-style-5 #lumino-track {
	background: #1e293b;
	box-shadow: 0 4px 16px rgba(0,0,0,0.35);
	border: none;
}
#lumino-wrap.lumino-style-style-5 .lumino-sun  { color: rgba(255,255,255,0.5); }
#lumino-wrap.lumino-style-style-5 .lumino-moon { color: rgba(255,255,255,0.35); }
/* Override shared opacity — icons always at 0.5/0.35 for label look */
#lumino-wrap.lumino-style-style-5:not(.lumino-night) .lumino-sun  { opacity: 0.9; transform: none; color: #fbbf24; }
#lumino-wrap.lumino-style-style-5:not(.lumino-night) .lumino-moon { opacity: 0.4; transform: none; color: rgba(255,255,255,0.4); }
#lumino-wrap.lumino-style-style-5.lumino-night       .lumino-sun  { opacity: 0.4; transform: none; color: rgba(255,255,255,0.4); }
#lumino-wrap.lumino-style-style-5.lumino-night       .lumino-moon { opacity: 0.9; transform: none; color: #a5b4fc; }
#lumino-wrap.lumino-style-style-5 #lumino-thumb {
	background: linear-gradient(135deg, #fbbf24, #f59e0b);
	box-shadow: 0 0 12px rgba(251,191,36,0.55);
}
#lumino-wrap.lumino-style-style-5.lumino-night #lumino-track {
	background: #020617;
	border: 1px solid rgba(99,102,241,0.3);
	box-shadow: 0 4px 20px rgba(99,102,241,0.2);
}
#lumino-wrap.lumino-style-style-5.lumino-night #lumino-thumb {
	background: linear-gradient(135deg, #818cf8, #6366f1);
	box-shadow: 0 0 14px rgba(99,102,241,0.65);
}

/* =============================================================
   STYLE 6 — AURORA NEON
   Day: dark base + golden thumb | Night: dark base + pink/purple thumb
   ============================================================= */
#lumino-wrap.lumino-style-style-6 #lumino-track {
	background: #0f0c29;
	border: 1px solid rgba(167,139,250,0.2);
	box-shadow: 0 4px 16px rgba(15,12,41,0.6);
}
#lumino-wrap.lumino-style-style-6 .lumino-sun  { color: #fde68a; }
#lumino-wrap.lumino-style-style-6 .lumino-moon { color: #a78bfa; }
#lumino-wrap.lumino-style-style-6 #lumino-thumb {
	background: linear-gradient(135deg, #fde68a, #fbbf24);
	box-shadow: 0 0 14px rgba(251,191,36,0.7);
}
#lumino-wrap.lumino-style-style-6.lumino-night #lumino-track {
	background: #0f0c29;
	border-color: rgba(244,114,182,0.4);
	box-shadow: 0 0 20px rgba(192,132,252,0.25);
}
#lumino-wrap.lumino-style-style-6.lumino-night .lumino-sun  { color: #fbbf24; }
#lumino-wrap.lumino-style-style-6.lumino-night .lumino-moon { color: #f0abfc; }
#lumino-wrap.lumino-style-style-6.lumino-night #lumino-thumb {
	background: linear-gradient(135deg, #f472b6, #c084fc);
	box-shadow: 0 0 16px rgba(244,114,182,0.75), 0 0 32px rgba(192,132,252,0.3);
}

/* =============================================================
   DARK MODE — invert entire page
   ============================================================= */
html { transition: filter 0.4s ease; }

html.lumino-dark { filter: invert(1) hue-rotate(180deg); }
html.lumino-dark img,
html.lumino-dark video,
html.lumino-dark iframe,
html.lumino-dark canvas,
html.lumino-dark picture,
html.lumino-dark embed,
html.lumino-dark object,
html.lumino-dark svg image { filter: invert(1) hue-rotate(180deg); }
html.lumino-dark #lumino-wrap { filter: invert(1) hue-rotate(180deg); }

/* =============================================================
   LIGHT MODE — for dark base themes
   ============================================================= */
html.lumino-light { filter: invert(1) hue-rotate(180deg); }
html.lumino-light img,
html.lumino-light video,
html.lumino-light iframe,
html.lumino-light canvas,
html.lumino-light picture,
html.lumino-light embed,
html.lumino-light object,
html.lumino-light svg image { filter: invert(1) hue-rotate(180deg); }
html.lumino-light #lumino-wrap { filter: invert(1) hue-rotate(180deg); }