/*
 * LIGAHOSTING - UNIFIED DESIGN SYSTEM
 * Cyber-tech interface inspired by modern game server panels.
 * This is the single source of truth for visual styling.
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
	--lh-bg: #050611;
	--lh-bg-deep: #03040c;
	--lh-panel: #0b0c20;
	--lh-panel-2: #10122b;
	--lh-panel-3: #151738;
	--lh-line: rgba(127, 124, 255, 0.18);
	--lh-line-strong: rgba(133, 129, 255, 0.34);
	--lh-text: #e9e9ff;
	--lh-soft: #a2a4c5;
	--lh-muted: #686b92;
	--lh-purple: #8077ff;
	--lh-violet: #a16eff;
	--lh-cyan: #23d7ed;
	--lh-cyan-bright: #65f3ff;
	--lh-red: #ff4d71;
	--lh-green: #25e6a7;
	--lh-yellow: #ffc94a;
	--lh-radius: 10px;
	--lh-radius-sm: 7px;
	--lh-font: "Inter", system-ui, sans-serif;
	--lh-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
	--lh-spectrum: linear-gradient(90deg, var(--lh-purple), var(--lh-cyan), var(--lh-red));
	--lh-spectrum-soft: linear-gradient(120deg, rgba(128,119,255,.22), rgba(35,215,237,.12) 55%, rgba(255,77,113,.08));
	--lh-glow: 0 0 22px rgba(70, 123, 255, 0.12);
	--lh-glow-cyan: 0 0 22px rgba(35, 215, 237, 0.18);
}

* {
	box-sizing: border-box;
	scrollbar-width: thin;
	scrollbar-color: #292d61 transparent;
}

*::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

*::-webkit-scrollbar-thumb {
	background: #292d61;
	border-radius: 10px;
}

html {
	color-scheme: dark;
	background: var(--lh-bg);
}

body.app-shell {
	position: relative;
	min-height: 100vh;
	overflow-x: hidden;
	background:
		linear-gradient(rgba(116, 113, 255, 0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(116, 113, 255, 0.022) 1px, transparent 1px),
		radial-gradient(ellipse 70% 35% at 50% -10%, rgba(93, 72, 255, 0.12), transparent 70%),
		linear-gradient(135deg, #050611 0%, #070817 50%, #050711 100%) !important;
	background-attachment: fixed !important;
	background-size: 32px 32px, 32px 32px, auto, auto !important;
	color: var(--lh-text);
	font-family: var(--lh-font) !important;
	letter-spacing: 0;
}

body.app-shell::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 0%, rgba(35, 215, 237, 0.016) 50%, transparent 100%);
	background-size: 100% 6px;
	opacity: 0.6;
}

body.app-shell::after {
	content: "";
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: min(48vw, 780px);
	height: min(32vw, 500px);
	pointer-events: none;
	background: radial-gradient(ellipse at bottom right, rgba(35, 215, 237, 0.07), transparent 68%);
}

::selection {
	background: rgba(35, 215, 237, 0.3);
	color: #fff;
}

/* Typography */
.app-shell h1,
.app-shell h2,
.app-shell h3,
.app-shell h4,
.app-shell h5,
.app-shell h6 {
	color: var(--lh-text);
	letter-spacing: 0;
}

.app-shell h1,
.app-shell h2 {
	text-shadow: 0 0 28px rgba(128, 119, 255, 0.14);
}

.app-shell code,
.app-shell pre,
.app-shell kbd,
.app-shell samp,
.app-shell .font-mono,
.app-shell [class*="text-2xl"].font-bold,
.app-shell [class*="text-3xl"].font-bold,
.app-shell [class*="text-4xl"].font-bold,
.app-shell td:first-child,
.app-shell input[type="number"] {
	font-family: var(--lh-mono) !important;
}

.app-shell .text-gradient {
	background: var(--lh-spectrum);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 12px rgba(35, 215, 237, 0.15));
	animation: lh-signal-glitch 8s steps(1, end) infinite;
}

.app-shell .text-white { color: var(--lh-text) !important; }
.app-shell .text-gray-300 { color: #c5c7e2 !important; }
.app-shell .text-gray-400,
.app-shell .text-white\/60,
.app-shell .text-white\/70 { color: var(--lh-soft) !important; }
.app-shell .text-gray-500,
.app-shell .text-white\/30,
.app-shell .text-white\/40,
.app-shell .text-white\/50 { color: var(--lh-muted) !important; }
.app-shell .text-indigo-300,
.app-shell .text-indigo-400,
.app-shell .text-primary,
.app-shell .text-primary-400,
.app-shell .text-blue-300,
.app-shell .text-blue-400,
.app-shell .text-cyan-400 { color: var(--lh-cyan) !important; }
.app-shell .text-purple-400 { color: var(--lh-violet) !important; }
.app-shell .text-green-400,
.app-shell .text-emerald-400 { color: var(--lh-green) !important; }
.app-shell .text-yellow-400,
.app-shell .text-amber-400 { color: var(--lh-yellow) !important; }
.app-shell .text-red-300,
.app-shell .text-red-400 { color: var(--lh-red) !important; }

/* Top navigation, deliberately horizontal */
.app-shell > header.app-topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(6, 7, 20, 0.93) !important;
	border-color: var(--lh-line) !important;
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(18px) saturate(130%);
	-webkit-backdrop-filter: blur(18px) saturate(130%);
}

.app-shell > header.app-topbar::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 1px;
	background: var(--lh-spectrum);
	opacity: 0.36;
}

.app-topbar img {
	filter: drop-shadow(0 0 10px rgba(35, 215, 237, 0.16));
}

.app-topbar nav a,
.app-topbar nav button,
.app-topbar > div a,
.app-topbar > div button {
	border-radius: var(--lh-radius-sm) !important;
}

.app-topbar nav a {
	position: relative;
	color: #8f92b8 !important;
}

.app-topbar nav a i {
	color: #7478a8;
	transition: color 160ms ease;
}

.app-topbar nav a:hover {
	background: rgba(128, 119, 255, 0.08) !important;
	color: var(--lh-text) !important;
}

.app-topbar nav a:hover i {
	color: var(--lh-cyan);
}

.app-topbar .nav-link-active,
.app-topbar nav a[class*="bg-primary-500"] {
	background: linear-gradient(120deg, rgba(128, 119, 255, 0.23), rgba(35, 215, 237, 0.11)) !important;
	color: #fff !important;
	box-shadow:
		inset 0 0 0 1px rgba(128, 119, 255, 0.3),
		0 0 18px rgba(89, 78, 255, 0.1);
}

.app-topbar .nav-link-active i,
.app-topbar nav a[class*="bg-primary-500"] i {
	color: var(--lh-cyan) !important;
}

.app-topbar .nav-link-active::after,
.app-topbar nav a[class*="bg-primary-500"]::after {
	content: "";
	position: absolute;
	right: 8px;
	bottom: -14px;
	left: 8px;
	height: 2px;
	background: var(--lh-cyan);
	border-radius: 2px;
	box-shadow: 0 0 12px var(--lh-cyan);
}

.app-shell-admin .app-topbar nav > div > div:first-child span {
	background: rgba(128, 119, 255, 0.12) !important;
	border: 1px solid rgba(128, 119, 255, 0.25) !important;
	color: #beb9ff !important;
	font-family: var(--lh-mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

#mobileMenu,
#mobile-menu {
	background: rgba(7, 8, 24, 0.98) !important;
	border-color: var(--lh-line) !important;
}

/* Main content */
.app-shell main {
	position: relative;
}

.app-shell main > div,
.app-shell main > section > div {
	position: relative;
}

.app-shell section.py-8,
.app-shell section.py-12 {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

/* Panels and cards */
.app-shell .glass-card,
.app-shell .card,
.app-shell .modern-card,
.app-shell .section-card,
.app-shell .stat-card,
.app-shell .stat-mini,
.app-shell .filter-card,
.app-shell .invoice-card,
.app-shell .detail-card,
.app-shell .edit-card,
.app-shell .service-stat,
.app-shell .ticket-card {
	position: relative;
	background:
		linear-gradient(rgba(116, 113, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(116, 113, 255, 0.025) 1px, transparent 1px),
		linear-gradient(155deg, rgba(19, 21, 51, 0.98), rgba(9, 10, 29, 0.98)) !important;
	background-size: 22px 22px, 22px 22px, auto !important;
	border: 1px solid var(--lh-line) !important;
	border-radius: var(--lh-radius) !important;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.015);
	backdrop-filter: none !important;
}

.app-shell .glass-card::before,
.app-shell .section-card::before,
.app-shell .stat-card::before,
.app-shell .invoice-card::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: -1px;
	right: 12px;
	left: 12px;
	height: 1px;
	pointer-events: none;
	background: var(--lh-spectrum);
	opacity: 0.55;
	box-shadow: 0 0 12px rgba(35, 215, 237, 0.22);
}

.app-shell .glass-card:hover,
.app-shell .section-card:hover,
.app-shell .stat-card:hover,
.app-shell .stat-mini:hover,
.app-shell .service-stat:hover,
.app-shell .ticket-card:hover {
	border-color: var(--lh-line-strong) !important;
	box-shadow: 0 14px 38px rgba(0, 0, 0, 0.3), var(--lh-glow);
	transform: translateY(-1px) !important;
}

.app-shell .gradient-border-top {
	border-top-color: var(--lh-line) !important;
}

.app-shell .gradient-border-top::before {
	top: -1px;
	right: 12px;
	left: 12px;
	width: auto;
	height: 1px;
	background: var(--lh-spectrum);
	opacity: 0.75;
}

.app-shell .section-header,
.app-shell .card-header,
.app-shell [class*="border-b"][class*="bg-indigo"] {
	position: relative;
	background: var(--lh-spectrum-soft) !important;
	border-color: var(--lh-line) !important;
}

.app-shell .section-header::after,
.app-shell .card-header::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(128, 119, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(128, 119, 255, 0.05) 1px, transparent 1px);
	background-size: 20px 20px;
	mask-image: linear-gradient(90deg, black, transparent);
}

.app-shell .stat-card::before,
.app-shell .stat-card.primary::before,
.app-shell .stat-card.success::before,
.app-shell .stat-card.warning::before,
.app-shell .stat-card.info::before,
.app-shell .stat-card.danger::before {
	top: -1px !important;
	right: 12px !important;
	bottom: auto !important;
	left: 12px !important;
	width: auto !important;
	height: 1px !important;
	background: var(--lh-spectrum) !important;
	opacity: 0.58 !important;
}

.app-shell .icon-circle,
.app-shell .section-header .icon-wrap {
	border: 1px solid var(--lh-line) !important;
	border-radius: var(--lh-radius-sm) !important;
	background: rgba(128, 119, 255, 0.09) !important;
	box-shadow: inset 0 0 18px rgba(128, 119, 255, 0.035);
}

.app-shell .icon-circle::after {
	border-radius: var(--lh-radius-sm) !important;
	opacity: 0.08 !important;
}

.app-shell .rounded-3xl,
.app-shell .rounded-2xl,
.app-shell .rounded-xl {
	border-radius: var(--lh-radius) !important;
}

.app-shell .rounded-lg {
	border-radius: var(--lh-radius-sm) !important;
}

/* Homepage hero becomes a technical command surface */
.app-shell-public main > div > .relative.overflow-hidden:first-child {
	border: 1px solid var(--lh-line-strong);
	border-radius: var(--lh-radius) !important;
	background: #08091c;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}

.app-shell-public main > div > .relative.overflow-hidden:first-child::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--lh-spectrum);
	box-shadow: 0 0 18px rgba(35, 215, 237, 0.4);
}

.app-shell-public main > div > .relative.overflow-hidden:first-child > .absolute:first-child {
	background:
		linear-gradient(rgba(128,119,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(128,119,255,.05) 1px, transparent 1px),
		linear-gradient(125deg, rgba(128,119,255,.22), rgba(35,215,237,.08) 62%, rgba(255,77,113,.08)) !important;
	background-size: 24px 24px, 24px 24px, auto !important;
}

/* Buttons */
.app-shell .btn-gradient,
.app-shell .btn-primary,
.app-shell .btn-grd-primary,
.app-shell button.bg-indigo-500,
.app-shell a.bg-indigo-500 {
	position: relative;
	overflow: hidden;
	background: linear-gradient(110deg, #7168ed 0%, #347fd2 48%, #20bcd0 100%) !important;
	border: 1px solid rgba(101, 243, 255, 0.34) !important;
	border-radius: var(--lh-radius-sm) !important;
	box-shadow: 0 0 0 1px rgba(128, 119, 255, 0.12), 0 0 20px rgba(61, 106, 232, 0.18) !important;
	color: #fff !important;
	font-weight: 700 !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
	transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
}

.app-shell .btn-gradient::after,
.app-shell .btn-primary::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -45%;
	width: 35%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
	transform: skewX(-20deg);
	transition: left 350ms ease;
}

.app-shell .btn-gradient:hover::after,
.app-shell .btn-primary:hover::after {
	left: 120%;
}

.app-shell .btn-gradient:hover,
.app-shell .btn-primary:hover,
.app-shell button.bg-indigo-500:hover,
.app-shell a.bg-indigo-500:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
	box-shadow: 0 0 0 1px rgba(128,119,255,.28), 0 0 25px rgba(35,215,237,.23) !important;
}

.app-shell .btn-danger,
.app-shell button[class*="bg-red-500"],
.app-shell a[class*="bg-red-500"] {
	background: rgba(255, 77, 113, 0.11) !important;
	border: 1px solid rgba(255, 77, 113, 0.28) !important;
	color: var(--lh-red) !important;
	box-shadow: none !important;
}

.app-shell .btn-success,
.app-shell button[class*="bg-green-500"],
.app-shell a[class*="bg-green-500"] {
	background: rgba(37, 230, 167, 0.09) !important;
	border: 1px solid rgba(37, 230, 167, 0.24) !important;
	color: var(--lh-green) !important;
	box-shadow: none !important;
}

.app-shell button[class*="bg-white/5"],
.app-shell a[class*="bg-white/5"] {
	background: rgba(128, 119, 255, 0.045) !important;
	border: 1px solid var(--lh-line) !important;
	color: #c7c8e6 !important;
}

.app-shell button[class*="bg-white/5"]:hover,
.app-shell a[class*="bg-white/5"]:hover {
	background: rgba(128, 119, 255, 0.11) !important;
	border-color: var(--lh-line-strong) !important;
	color: #fff !important;
}

.app-shell button:focus-visible,
.app-shell a:focus-visible,
.app-shell input:focus-visible,
.app-shell select:focus-visible,
.app-shell textarea:focus-visible {
	outline: 1px solid var(--lh-cyan);
	outline-offset: 3px;
}

/* Forms */
.app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.app-shell select,
.app-shell textarea,
.app-shell .form-control,
.app-shell .form-select,
.app-shell .form-input,
.app-shell .filter-input {
	background: rgba(13, 15, 39, 0.92) !important;
	border: 1px solid var(--lh-line) !important;
	border-radius: var(--lh-radius-sm) !important;
	color: var(--lh-text) !important;
	box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.13);
	transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease !important;
}

.app-shell input:not([type="checkbox"]):not([type="radio"]):focus,
.app-shell select:focus,
.app-shell textarea:focus,
.app-shell .form-control:focus,
.app-shell .form-select:focus,
.app-shell .form-input:focus,
.app-shell .filter-input:focus {
	background: #10132e !important;
	border-color: rgba(35, 215, 237, 0.65) !important;
	box-shadow: 0 0 0 3px rgba(35, 215, 237, 0.07), inset 0 0 20px rgba(35, 215, 237, 0.025) !important;
	outline: none !important;
}

.app-shell input::placeholder,
.app-shell textarea::placeholder {
	color: var(--lh-muted) !important;
	opacity: 1;
}

.app-shell select {
	color-scheme: dark;
}

.app-shell select option {
	background: #0d0f27;
	color: var(--lh-text);
}

.app-shell input[type="checkbox"],
.app-shell input[type="radio"] {
	accent-color: var(--lh-cyan);
}

.app-shell label {
	color: #c0c2dd;
}

/* Tables */
.app-shell table {
	border-collapse: separate;
	border-spacing: 0;
	color: var(--lh-text);
}

.app-shell table thead,
.app-shell .table-header-gradient,
.app-shell table thead[class*="bg-white/5"] {
	background:
		linear-gradient(rgba(128,119,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(128,119,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(128,119,255,.11), rgba(35,215,237,.035)) !important;
	background-size: 18px 18px, 18px 18px, auto !important;
}

.app-shell table thead th {
	border-color: var(--lh-line) !important;
	color: #9295bb !important;
	font-family: var(--lh-mono) !important;
	font-size: 0.66rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.075em !important;
}

.app-shell table tbody tr {
	background: rgba(5, 6, 17, 0.18);
	transition: background 130ms ease, box-shadow 130ms ease;
}

.app-shell table tbody tr:hover,
.app-shell .invoice-row:hover {
	background: linear-gradient(90deg, rgba(128, 119, 255, 0.07), rgba(35, 215, 237, 0.025)) !important;
	box-shadow: inset 2px 0 0 var(--lh-cyan);
	transform: none !important;
}

.app-shell table td,
.app-shell table th,
.app-shell .divide-white\/10 > :not([hidden]) ~ :not([hidden]),
.app-shell .divide-white\/5 > :not([hidden]) ~ :not([hidden]) {
	border-color: rgba(128, 119, 255, 0.11) !important;
}

.app-shell table td {
	color: #c6c7df;
}

.app-shell code {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.45rem;
	background: rgba(35, 215, 237, 0.075) !important;
	border: 1px solid rgba(35, 215, 237, 0.16);
	border-radius: 5px !important;
	color: var(--lh-cyan-bright) !important;
	font-size: 0.76rem;
	text-shadow: 0 0 10px rgba(35, 215, 237, 0.22);
}

/* Status pills */
.app-shell span[class*="rounded-full"],
.app-shell .badge,
.app-shell [class*="status-badge"] {
	border-radius: 999px !important;
	font-family: var(--lh-mono);
	font-weight: 700;
	letter-spacing: 0.035em;
}

.app-shell span[class*="rounded-full"][class*="bg-green-500"],
.app-shell .badge-success {
	background: rgba(37, 230, 167, 0.1) !important;
	border: 1px solid rgba(37, 230, 167, 0.22);
	color: var(--lh-green) !important;
	box-shadow: 0 0 15px rgba(37, 230, 167, 0.08);
}

.app-shell span[class*="rounded-full"][class*="bg-yellow-500"],
.app-shell .badge-warning {
	background: rgba(255, 201, 74, 0.1) !important;
	border: 1px solid rgba(255, 201, 74, 0.22);
	color: var(--lh-yellow) !important;
}

.app-shell span[class*="rounded-full"][class*="bg-red-500"],
.app-shell .badge-danger {
	background: rgba(255, 77, 113, 0.1) !important;
	border: 1px solid rgba(255, 77, 113, 0.22);
	color: var(--lh-red) !important;
}

.app-shell span[class*="rounded-full"][class*="bg-blue-500"],
.app-shell span[class*="rounded-full"][class*="bg-indigo-500"],
.app-shell .badge-primary {
	background: rgba(35, 215, 237, 0.08) !important;
	border: 1px solid rgba(35, 215, 237, 0.2);
	color: var(--lh-cyan) !important;
}

.app-shell .status-badge.paid {
	background: rgba(37, 230, 167, 0.1) !important;
	border: 1px solid rgba(37, 230, 167, 0.22) !important;
	color: var(--lh-green) !important;
}

.app-shell .status-badge.unpaid {
	background: rgba(255, 201, 74, 0.1) !important;
	border: 1px solid rgba(255, 201, 74, 0.22) !important;
	color: var(--lh-yellow) !important;
}

.app-shell .status-badge.cancelled {
	background: rgba(255, 77, 113, 0.1) !important;
	border: 1px solid rgba(255, 77, 113, 0.22) !important;
	color: var(--lh-red) !important;
}

.app-shell .status-badge.draft {
	background: rgba(128, 119, 255, 0.09) !important;
	border: 1px solid var(--lh-line) !important;
	color: #b2afea !important;
}

/* Utility color overrides */
.app-shell .bg-dark-600,
.app-shell .bg-dark-600\/50,
.app-shell .bg-dark-700,
.app-shell .bg-dark-700\/50,
.app-shell .bg-dark-800,
.app-shell .bg-dark-800\/80 {
	background-color: rgba(12, 14, 37, 0.92) !important;
}

.app-shell .bg-indigo-500\/10,
.app-shell .bg-indigo-500\/20,
.app-shell .bg-blue-500\/20,
.app-shell .bg-primary-500\/20 {
	background-color: rgba(128, 119, 255, 0.1) !important;
}

.app-shell .border-white\/5,
.app-shell .border-white\/10,
.app-shell .border-white\/20,
.app-shell .border-indigo-500\/20,
.app-shell .border-indigo-500\/30,
.app-shell .border-primary-500\/30 {
	border-color: var(--lh-line) !important;
}

/* Shop */
.shop-page .shop-intro h2 {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
}

.shop-page .shop-intro h2::before {
	content: "// ";
	color: var(--lh-cyan);
	font-family: var(--lh-mono);
	font-size: 0.55em;
	vertical-align: middle;
	text-shadow: 0 0 12px var(--lh-cyan);
	animation: lh-signal-glitch 6s steps(1, end) infinite;
}

.shop-page .hosting-switcher {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	width: min(100%, 760px);
	margin-right: auto;
	margin-left: auto;
	padding: 5px;
	gap: 5px;
	background: rgba(9, 10, 29, 0.94);
	border: 1px solid var(--lh-line);
	border-radius: var(--lh-radius);
	box-shadow: var(--lh-glow);
}

.shop-page .hosting-switcher button {
	min-height: 42px;
	padding: 0.6rem 0.9rem;
	border-radius: var(--lh-radius-sm) !important;
	font-size: 0.8rem;
}

.shop-page .hosting-switcher button:not(.active) {
	background: transparent !important;
	border-color: transparent !important;
}

.shop-page .package-card {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	overflow: hidden;
	transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.shop-page .package-card:hover {
	border-color: rgba(35, 215, 237, 0.34) !important;
	box-shadow: 0 14px 38px rgba(0,0,0,.35), var(--lh-glow-cyan);
	transform: translateY(-3px);
}

.shop-page .package-card > .p-6:first-child {
	position: relative;
	background: var(--lh-spectrum-soft);
}

.shop-page .package-card > .p-6:first-child::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(128,119,255,.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(128,119,255,.06) 1px, transparent 1px);
	background-size: 18px 18px;
	mask-image: linear-gradient(90deg, black, transparent);
	pointer-events: none;
}

.shop-page .package-card > .p-6:last-child {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.shop-page .package-card .space-y-3 {
	flex: 1;
}

.shop-page .package-card .space-y-3 > div {
	padding-bottom: 0.55rem;
	border-bottom: 1px solid rgba(128, 119, 255, 0.09);
}

.shop-page .package-price {
	font-family: var(--lh-mono);
	color: #fff;
	text-shadow: 0 0 18px rgba(35, 215, 237, 0.2);
}

.shop-page .payment-choice {
	background: rgba(9, 10, 29, 0.7) !important;
	border: 1px solid var(--lh-line) !important;
}

.shop-page .payment-choice:has(input:checked) {
	background: linear-gradient(120deg, rgba(128,119,255,.13), rgba(35,215,237,.05)) !important;
	border-color: rgba(35, 215, 237, 0.35) !important;
	box-shadow: inset 2px 0 0 var(--lh-cyan);
}

.shop-page .order-summary-total {
	background: var(--lh-spectrum-soft) !important;
	border-color: var(--lh-line-strong) !important;
}

/* Service provisioning resembles a server control panel */
.workspace-page .service-row td:first-child > div > div:first-child {
	background: rgba(128, 119, 255, 0.1) !important;
	border: 1px solid rgba(128, 119, 255, 0.3);
	box-shadow: 0 0 18px rgba(128, 119, 255, 0.1);
}

.provisioning-progress > div {
	border: 1px solid rgba(35, 215, 237, 0.12);
	background: #070819 !important;
}

.provisioning-progress-bar {
	background: var(--lh-spectrum) !important;
	box-shadow: 0 0 12px rgba(35, 215, 237, 0.4);
}

/* Admin-specific legacy component normalization */
.app-shell-admin .service-stat,
.app-shell-admin .ticket-card {
	border-radius: var(--lh-radius) !important;
}

.app-shell-admin .service-stat::before {
	top: -1px !important;
	left: 12px !important;
	width: calc(100% - 24px) !important;
	height: 1px !important;
	transform: none !important;
	background: var(--lh-spectrum) !important;
	opacity: 0.45;
}

.app-shell-admin .package-row:hover {
	background: rgba(128, 119, 255, 0.07) !important;
	transform: translateX(2px) !important;
}

.app-shell-admin .action-btn {
	border: 1px solid var(--lh-line) !important;
	border-radius: var(--lh-radius-sm) !important;
	background: rgba(128, 119, 255, 0.07) !important;
	box-shadow: none !important;
}

.app-shell-admin .action-btn.view { color: var(--lh-cyan) !important; }
.app-shell-admin .action-btn.edit { color: var(--lh-yellow) !important; }
.app-shell-admin .action-btn.delete,
.app-shell-admin .action-btn.pdf,
.app-shell-admin .action-btn.special-on { color: var(--lh-red) !important; }

.app-shell-admin .filter-input option {
	background: #0d0f27 !important;
	color: var(--lh-text) !important;
}

/* Dialogs and dropdowns */
.app-shell #notifDropdown,
.app-shell [id$="Dropdown"]:not(select),
.app-shell .swal2-popup,
.app-shell [id$="Modal"] > div:last-child {
	background: rgba(9, 10, 29, 0.98) !important;
	border: 1px solid var(--lh-line-strong) !important;
	border-radius: var(--lh-radius) !important;
	box-shadow: 0 22px 60px rgba(0,0,0,.48), var(--lh-glow) !important;
	color: var(--lh-text) !important;
}

.app-shell .swal2-title,
.app-shell .swal2-html-container {
	color: var(--lh-text) !important;
}

.app-shell .trumbowyg-box,
.app-shell .trumbowyg-editor,
.app-shell .trumbowyg-button-pane {
	background: #0c0e25 !important;
	border-color: var(--lh-line) !important;
	color: var(--lh-text) !important;
}

/* Footer */
.app-shell-public footer {
	background:
		linear-gradient(rgba(128,119,255,.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(128,119,255,.02) 1px, transparent 1px),
		#050610 !important;
	background-size: 28px 28px !important;
	border-color: var(--lh-line) !important;
}

.app-shell-public footer a:hover {
	color: var(--lh-cyan) !important;
}

@media (max-width: 1279px) {
	.app-topbar .nav-link-active::after,
	.app-topbar nav a[class*="bg-primary-500"]::after {
		display: none;
	}
}

@media (max-width: 768px) {
	.app-shell section.py-8,
	.app-shell section.py-12 {
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
	}

	.app-shell .glass-card,
	.app-shell .section-card,
	.app-shell .stat-card {
		box-shadow: 0 8px 22px rgba(0,0,0,.22);
	}

	.shop-page .hosting-switcher {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.shop-page .package-card:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.app-shell *,
	.app-shell *::before,
	.app-shell *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

@keyframes lh-signal-glitch {
	0%, 89%, 93%, 100% {
		transform: translate(0);
		text-shadow: 0 0 12px rgba(35, 215, 237, 0.22);
	}
	90% {
		transform: translateX(1px);
		text-shadow: -1px 0 var(--lh-red), 1px 0 var(--lh-cyan);
	}
	91% {
		transform: translateX(-1px);
		text-shadow: 1px 0 var(--lh-purple), -1px 0 var(--lh-red);
	}
	92% {
		transform: translate(0);
	}
}

/* =========================================================
   PUBLIC EXPERIENCE V2
   Structural redesign: text navigation, editorial homepage,
   compact partner area and a deliberately quiet footer.
   ========================================================= */
.lh-public-header {
	height: 72px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
	background: rgba(5, 6, 15, 0.9) !important;
	box-shadow: none !important;
}

.lh-public-header::after {
	display: none !important;
}

.app-shell-public main > div:has(.lh-home-hero) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.lh-header-inner,
.lh-header-inner > div {
	height: 100%;
}

.lh-brand img {
	width: auto;
	height: 28px;
	max-width: 220px;
	filter: none;
}

.lh-public-nav {
	height: 100%;
	gap: 2rem !important;
}

.lh-public-nav a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #8589a7 !important;
	font-size: 0.82rem;
	font-weight: 600;
}

.lh-public-nav a i,
.lh-mobile-menu a i,
.lh-account-actions > a i {
	display: none !important;
}

.lh-public-nav a:hover,
.lh-public-nav .nav-link-active {
	background: transparent !important;
	box-shadow: none !important;
	color: #f2f3ff !important;
}

.lh-public-nav .nav-link-active::after {
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	height: 2px !important;
	background: linear-gradient(90deg, var(--lh-purple), var(--lh-cyan)) !important;
	box-shadow: none !important;
}

.lh-account-actions > a {
	border-radius: 6px !important;
	font-size: 0.8rem !important;
}

.lh-account-actions > a:not(.btn-gradient) {
	padding: 0.55rem 0.8rem !important;
	background: transparent !important;
	border: 0 !important;
	color: #a4a7c1 !important;
}

.lh-account-actions > .btn-gradient {
	padding: 0.55rem 1rem !important;
	background: #f2f3ff !important;
	border: 1px solid #f2f3ff !important;
	box-shadow: none !important;
	color: #080914 !important;
	text-shadow: none !important;
}

.lh-account-actions > .btn-gradient::after {
	display: none;
}

.lh-menu-button {
	padding: 0.55rem 0.75rem;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 6px;
	background: transparent;
	color: #d8daed;
	font-size: 0.78rem;
	font-weight: 700;
}

.lh-mobile-menu {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	max-height: calc(100vh - 68px);
	overflow-y: auto;
	border-top: 1px solid rgba(255,255,255,.08);
	background: rgba(6,7,17,.98) !important;
	box-shadow: 0 22px 45px rgba(0,0,0,.35);
}

.lh-mobile-menu a {
	border-radius: 5px !important;
	background: transparent !important;
}

/* Home hero */
.lh-home-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.14fr) minmax(360px, .86fr);
	align-items: center;
	min-height: 610px;
	gap: clamp(3rem, 7vw, 8rem);
	padding: clamp(3.5rem, 7vw, 7rem) 0;
	border-bottom: 1px solid rgba(255,255,255,.07);
}

.lh-eyebrow {
	margin: 0 0 1rem;
	color: var(--lh-cyan);
	font-family: var(--lh-mono);
	font-size: 0.69rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}

.lh-hero-copy h1 {
	max-width: 820px;
	margin: 0;
	color: #f4f5ff;
	font-size: clamp(3rem, 6.5vw, 6.3rem);
	font-weight: 750;
	letter-spacing: 0;
	line-height: .99;
	text-shadow: none;
}

.lh-hero-lead {
	max-width: 650px;
	margin: 1.7rem 0 0;
	color: #a5a8bf;
	font-size: clamp(1rem, 1.4vw, 1.18rem);
	line-height: 1.75;
}

.lh-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 2.2rem;
}

.lh-button-primary,
.lh-button-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: .75rem 1.25rem;
	border-radius: 6px;
	font-size: .82rem;
	font-weight: 750;
	transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.lh-button-primary {
	background: #f1f2ff;
	border: 1px solid #f1f2ff;
	color: #080914;
}

.lh-button-primary:hover {
	background: #fff;
	color: #080914;
	transform: translateY(-1px);
}

.lh-button-secondary {
	background: transparent;
	border: 1px solid rgba(255,255,255,.15);
	color: #d2d4e6;
}

.lh-button-secondary:hover {
	border-color: rgba(35,215,237,.5);
	color: #fff;
}

.lh-hero-proof {
	display: grid;
	grid-template-columns: repeat(3, max-content);
	gap: clamp(1.3rem, 4vw, 3.5rem);
	margin-top: 3.5rem;
}

.lh-hero-proof div {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.lh-hero-proof strong {
	color: #f2f3ff;
	font-family: var(--lh-mono);
	font-size: .95rem;
}

.lh-hero-proof span {
	color: #70748f;
	font-size: .7rem;
}

.lh-hero-console {
	position: relative;
	padding: 1.1rem;
	overflow: hidden;
	background:
		linear-gradient(rgba(116,113,255,.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(116,113,255,.03) 1px, transparent 1px),
		rgba(9,10,27,.82);
	background-size: 24px 24px;
	border: 1px solid rgba(128,119,255,.2);
	border-radius: 12px;
	box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

.lh-hero-console::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--lh-purple), var(--lh-cyan), var(--lh-red));
}

.lh-console-topline,
.lh-node-feature,
.lh-console-metrics {
	position: relative;
	z-index: 1;
}

.lh-console-topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .35rem .35rem 1rem;
	border-bottom: 1px solid rgba(255,255,255,.07);
	color: #b9bbd1;
	font-size: .72rem;
	font-weight: 700;
}

.lh-live-label {
	color: var(--lh-green);
	font-family: var(--lh-mono);
	font-size: .62rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.lh-live-label::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: .4rem;
	border-radius: 50%;
	background: var(--lh-green);
	box-shadow: 0 0 10px var(--lh-green);
}

.lh-live-label.is-warning,
.lh-node-load.is-warning {
	color: var(--lh-yellow);
}

.lh-live-label.is-warning::before {
	background: var(--lh-yellow);
	box-shadow: 0 0 10px var(--lh-yellow);
}

.lh-node-feature {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: .75rem;
	padding: 1rem;
	background: rgba(128,119,255,.035);
	border: 1px solid rgba(128,119,255,.12);
	border-radius: 7px;
}

.lh-node-feature > div {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.lh-console-label {
	color: #777b99;
	font-size: .63rem;
	text-transform: uppercase;
	letter-spacing: .07em;
}

.lh-node-feature strong {
	font-size: .88rem;
}

.lh-node-feature code {
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	color: #777b99 !important;
	font-size: .62rem;
	text-shadow: none;
}

.lh-node-load {
	color: var(--lh-cyan);
	font-family: var(--lh-mono);
	font-size: 1rem;
}

.lh-console-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .65rem;
	margin-top: .75rem;
}

.lh-console-metrics div {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: .8rem;
	border-top: 1px solid rgba(255,255,255,.08);
}

.lh-console-metrics span {
	color: #70748f;
	font-size: .58rem;
	text-transform: uppercase;
}

.lh-console-metrics strong {
	font-family: var(--lh-mono);
	font-size: .66rem;
}

/* Home content */
.lh-product-section,
.lh-reasons,
.lh-testimonials,
.lh-partners {
	padding: clamp(4rem, 7vw, 7rem) 0;
	border-bottom: 1px solid rgba(255,255,255,.07);
}

.lh-section-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 2.5rem;
}

.lh-section-heading h2,
.lh-partners h2 {
	max-width: 740px;
	margin: 0;
	color: #f2f3ff;
	font-size: clamp(2rem, 4vw, 4rem);
	font-weight: 720;
	letter-spacing: 0;
	line-height: 1.05;
	text-shadow: none;
}

.lh-section-heading > a,
.lh-partners > div:first-child > a {
	flex-shrink: 0;
	padding-bottom: .25rem;
	border-bottom: 1px solid rgba(35,215,237,.45);
	color: #d3d5e7;
	font-size: .78rem;
	font-weight: 700;
}

.lh-product-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-bottom: 2rem;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

.lh-product-tabs button,
.lh-product-tabs a {
	padding: .85rem 1.25rem;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0 !important;
	background: transparent !important;
	color: #737794 !important;
	font-size: .76rem;
	font-weight: 700;
}

.lh-product-tabs button:hover,
.lh-product-tabs a:hover,
.lh-product-tabs button.active {
	border-bottom-color: var(--lh-cyan);
	color: #f1f2ff !important;
}

.lh-home-products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.lh-product-card {
	overflow: hidden;
	background: rgba(10,11,28,.65);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 9px;
	transition: border-color 150ms ease, transform 150ms ease, background 150ms ease;
}

.lh-product-card:hover {
	background: rgba(13,14,34,.82);
	border-color: rgba(35,215,237,.3);
	transform: translateY(-2px);
}

.lh-product-card.is-disabled {
	opacity: .52;
}

.lh-product-image {
	display: block;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	background: #080914;
}

.lh-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .78;
	filter: saturate(.75);
	transition: opacity 200ms ease, filter 200ms ease, transform 300ms ease;
}

.lh-product-card:hover .lh-product-image img {
	opacity: 1;
	filter: saturate(1);
	transform: scale(1.025);
}

.lh-product-body {
	padding: 1.25rem;
}

.lh-product-card-text .lh-product-body {
	min-height: 270px;
}

.lh-product-name,
.lh-product-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.lh-product-name h3 {
	margin: 0;
	font-size: .95rem;
	font-weight: 700;
}

.lh-product-name span {
	color: var(--lh-green);
	font-family: var(--lh-mono);
	font-size: .56rem;
	text-transform: uppercase;
}

.lh-product-specs {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin: 1.1rem 0;
}

.lh-product-specs span {
	padding: .3rem .45rem;
	background: rgba(255,255,255,.025);
	border: 1px solid rgba(255,255,255,.07);
	border-radius: 4px;
	color: #8b8faa;
	font-family: var(--lh-mono);
	font-size: .57rem;
}

.lh-product-description {
	min-height: 70px;
	margin: 1.25rem 0;
	color: #8c90aa;
	font-size: .8rem;
	line-height: 1.7;
}

.lh-product-bottom {
	padding-top: 1rem;
	border-top: 1px solid rgba(255,255,255,.07);
}

.lh-product-bottom p {
	display: flex;
	align-items: baseline;
	gap: .3rem;
	margin: 0;
}

.lh-product-bottom strong {
	color: #f0f1fd;
	font-family: var(--lh-mono);
	font-size: 1rem;
}

.lh-product-bottom small {
	color: #686c87;
	font-size: .57rem;
}

.lh-product-bottom > a,
.lh-product-disabled {
	color: var(--lh-cyan);
	font-size: .68rem;
	font-weight: 750;
}

.lh-reason-grid,
.lh-quote-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.08);
}

.lh-reason-grid article,
.lh-quote-grid blockquote {
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: #080915;
}

.lh-reason-grid article span {
	color: var(--lh-cyan);
	font-family: var(--lh-mono);
	font-size: .62rem;
}

.lh-reason-grid h3 {
	margin: 2.8rem 0 .75rem;
	font-size: 1rem;
}

.lh-reason-grid p,
.lh-quote-grid p,
.lh-partners > div:first-child > p:not(.lh-eyebrow) {
	margin: 0;
	color: #8f92aa;
	font-size: .8rem;
	line-height: 1.75;
}

.lh-quote-grid blockquote {
	display: flex;
	min-height: 240px;
	flex-direction: column;
	justify-content: space-between;
}

.lh-quote-grid p {
	color: #c0c2d5;
	font-size: .9rem;
}

.lh-quote-grid footer {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin-top: 2rem;
	padding: 0;
	background: transparent !important;
	border: 0 !important;
}

.lh-quote-grid footer strong {
	font-size: .76rem;
}

.lh-quote-grid footer span {
	color: #686c87;
	font-size: .66rem;
}

.lh-partners {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr);
	align-items: center;
	gap: clamp(3rem, 8vw, 9rem);
}

.lh-partners > div:first-child > p:not(.lh-eyebrow) {
	max-width: 600px;
	margin: 1.25rem 0 1.75rem;
}

.lh-partner-list {
	border-top: 1px solid rgba(255,255,255,.1);
}

.lh-partner-list a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	min-height: 88px;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid rgba(255,255,255,.1);
	transition: padding 150ms ease, border-color 150ms ease;
}

.lh-partner-list a:hover {
	border-color: rgba(35,215,237,.3);
	padding-left: .5rem;
}

.lh-partner-list span {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.lh-partner-list strong {
	color: #e8e9f5;
	font-size: .8rem;
}

.lh-partner-list small {
	color: #6f738d;
	font-family: var(--lh-mono);
	font-size: .58rem;
	text-transform: uppercase;
}

.lh-partner-list img {
	max-width: 125px;
	max-height: 34px;
	opacity: .7;
	filter: grayscale(.2);
	transition: opacity 150ms ease, filter 150ms ease;
}

.lh-partner-list a:hover img {
	opacity: 1;
	filter: grayscale(0);
}

/* Footer */
.lh-footer {
	border-top: 1px solid rgba(255,255,255,.08);
	background: #05060f !important;
}

.lh-footer-main {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) 1.7fr;
	gap: clamp(3rem, 8vw, 8rem);
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}

.lh-footer-brand img {
	height: 26px;
}

.lh-footer-brand p {
	max-width: 380px;
	margin: 1.2rem 0 0;
	color: #777b94;
	font-size: .76rem;
	line-height: 1.75;
}

.lh-footer-links {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.lh-footer-links > div {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.lh-footer-label {
	margin-bottom: .25rem;
	color: #d6d8e7;
	font-size: .7rem;
	font-weight: 750;
}

.lh-footer-links a,
.lh-footer-legal {
	color: #73778f;
	font-size: .7rem;
}

.lh-footer-meta {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 2rem;
	padding-top: 1.1rem;
	padding-bottom: 1.1rem;
	border-top: 1px solid rgba(255,255,255,.07);
}

.lh-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.lh-footer-trust,
.lh-footer-payments {
	display: flex;
	align-items: center;
	gap: .65rem;
}

.lh-footer-trust img {
	height: 30px;
}

.lh-footer-payments {
	justify-content: flex-end;
}

.lh-footer-payments img {
	max-width: 64px;
	height: 20px;
	object-fit: contain;
	opacity: .55;
}

.lh-cookie-bar {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	left: 1rem;
	z-index: 60;
	display: flex;
	max-width: 720px;
	margin: auto;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .8rem 1rem;
	background: rgba(8,9,21,.97);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 7px;
	box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

.lh-cookie-bar.hidden {
	display: none;
}

.lh-cookie-bar p {
	margin: 0;
	color: #8d91aa;
	font-size: .68rem;
}

.lh-cookie-bar > div {
	display: flex;
	gap: .5rem;
}

.lh-cookie-bar button {
	padding: .45rem .7rem;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 5px;
	background: transparent;
	color: #c7c9d8;
	font-size: .65rem;
	font-weight: 700;
}

/* Admin navigation V2 */
.app-shell-admin .app-topbar {
	height: 66px;
	background: rgba(5,6,15,.94) !important;
	border-bottom: 1px solid rgba(255,255,255,.075) !important;
	box-shadow: none !important;
}

.app-shell-admin .app-topbar::after {
	display: none;
}

.app-shell-admin .app-topbar nav,
.app-shell-admin .app-topbar nav > div {
	height: 100%;
}

.app-shell-admin .app-topbar nav a i,
.app-shell-admin #mobile-menu a i {
	display: none;
}

.app-shell-admin .app-topbar nav a {
	padding: .55rem .6rem !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: .72rem !important;
}

.app-shell-admin .app-topbar nav a[class*="bg-primary-500"] {
	color: #f2f3ff !important;
}

.app-shell-admin .app-topbar nav a[class*="bg-primary-500"]::after {
	right: .6rem !important;
	bottom: -13px !important;
	left: .6rem !important;
	height: 2px !important;
	box-shadow: none !important;
}

.app-shell-admin #mobile-menu {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	max-height: calc(100vh - 66px);
	overflow-y: auto;
	box-shadow: 0 22px 45px rgba(0,0,0,.4);
}

.lh-admin-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: .4rem .65rem !important;
	border: 1px solid rgba(255,255,255,.1) !important;
	border-radius: 5px !important;
	color: #9da1bb !important;
	font-size: .66rem !important;
	font-weight: 700;
}

.lh-admin-action-danger {
	border-color: rgba(255,77,113,.2) !important;
	color: var(--lh-red) !important;
}

@media (max-width: 1024px) {
	.lh-home-hero,
	.lh-partners {
		grid-template-columns: 1fr;
	}

	.lh-home-hero {
		min-height: auto;
	}

	.lh-hero-console {
		max-width: 680px;
	}

	.lh-home-products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.lh-public-header {
		height: 64px;
	}

	.lh-brand img {
		height: 23px;
		max-width: 150px;
	}

	.lh-account-actions > a {
		display: none !important;
	}

	.lh-account-actions {
		gap: 0 !important;
	}

	.lh-home-hero {
		gap: 2.5rem;
		padding: 3.5rem 0;
	}

	.lh-hero-copy h1 {
		font-size: clamp(2.8rem, 14vw, 4.5rem);
	}

	.lh-hero-proof {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}

	.lh-console-metrics {
		grid-template-columns: 1fr;
	}

	.lh-section-heading {
		align-items: start;
		flex-direction: column;
	}

	.lh-home-products,
	.lh-reason-grid,
	.lh-quote-grid,
	.lh-partner-list,
	.lh-footer-main,
	.lh-footer-links,
	.lh-footer-meta {
		grid-template-columns: 1fr;
	}

	.lh-product-tabs {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.lh-product-tabs button,
	.lh-product-tabs a {
		text-align: center;
	}

	.lh-footer-main {
		gap: 2.5rem;
	}

	.lh-footer-links {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}

	.lh-footer-meta {
		justify-items: start;
	}

	.lh-footer-payments {
		justify-content: flex-start;
	}
}

/* =========================================================
   PUBLIC EXPERIENCE V3
   Compact scale, resilient navigation and unified storefront.
   ========================================================= */
.lh-public-header {
	height: 68px;
}

.lh-public-nav {
	gap: clamp(.85rem, 1.45vw, 1.5rem) !important;
}

.lh-public-nav a {
	font-size: .75rem;
}

.lh-account-actions > a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	white-space: nowrap;
}

.lh-account-actions > a span {
	display: inline !important;
}

.lh-home-hero {
	grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
	min-height: 510px;
	gap: clamp(2.5rem, 5vw, 5rem);
	padding: clamp(3.25rem, 5vw, 5rem) 0;
}

.lh-hero-copy h1 {
	max-width: 700px;
	font-size: clamp(2.7rem, 5vw, 4.75rem);
	line-height: 1.03;
}

.lh-hero-lead {
	max-width: 620px;
	margin-top: 1.25rem;
	font-size: clamp(.88rem, 1.1vw, 1rem);
	line-height: 1.7;
}

.lh-hero-actions {
	margin-top: 1.65rem;
}

.lh-hero-proof {
	margin-top: 2.3rem;
}

.lh-node-load {
	min-width: 64px;
	text-align: right;
	font-size: .78rem;
}

.lh-console-metrics strong {
	font-size: .59rem;
	line-height: 1.4;
}

.lh-product-section,
.lh-reasons,
.lh-testimonials,
.lh-partners {
	padding: clamp(3.5rem, 5.5vw, 5.5rem) 0;
}

.lh-section-heading h2,
.lh-partners h2 {
	font-size: clamp(1.8rem, 3.2vw, 3.15rem);
	line-height: 1.1;
}

.lh-discord-float {
	display: none;
}

.app-shell-public .lh-discord-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 80;
	display: flex;
	width: 52px;
	height: 52px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(126, 137, 255, .55);
	border-radius: 50%;
	background: #5865f2;
	box-shadow: 0 14px 35px rgba(22, 25, 70, .55), 0 0 0 5px rgba(88, 101, 242, .08);
	color: #fff !important;
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.app-shell-public .lh-discord-float:hover {
	background: #6875ff;
	box-shadow: 0 16px 42px rgba(43, 51, 150, .55), 0 0 0 7px rgba(88, 101, 242, .11);
	color: #fff !important;
	transform: translateY(-2px);
}

.app-shell-public .lh-discord-float i {
	font-size: 1.25rem;
}

.app-shell-public .lh-discord-float span {
	display: none;
}

.app-shell-public main > div:has(.lh-store-catalog) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.app-shell-public main > div:has(.lh-store-config) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.lh-store-catalog {
	padding: clamp(3rem, 5vw, 5rem) 0 clamp(4rem, 7vw, 7rem);
}

.lh-store-heading {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
	align-items: end;
	gap: clamp(2rem, 6vw, 6rem);
	margin: 0 0 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255,255,255,.08);
	text-align: left !important;
}

.shop-page .lh-store-heading h2 {
	max-width: 760px;
	margin: 0;
	font-size: clamp(2rem, 3.8vw, 3.8rem);
	font-weight: 740;
	line-height: 1.06;
}

.shop-page .lh-store-heading h2::before {
	display: none;
}

.lh-store-heading > div:first-child > p:last-child {
	max-width: 650px;
	margin: 1rem 0 0;
	color: #8f93aa;
	font-size: .82rem;
	line-height: 1.7;
}

.lh-store-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid rgba(255,255,255,.1);
	border-bottom: 1px solid rgba(255,255,255,.1);
}

.lh-store-facts span {
	display: flex;
	min-height: 76px;
	flex-direction: column;
	justify-content: center;
	gap: .3rem;
	padding: .75rem;
	color: #73778f;
	font-size: .6rem;
	text-align: center;
}

.lh-store-facts span + span {
	border-left: 1px solid rgba(255,255,255,.08);
}

.lh-store-facts strong {
	color: #e9eaf5;
	font-family: var(--lh-mono);
	font-size: .78rem;
}

.shop-page .hosting-switcher {
	display: flex;
	width: 100%;
	margin: 0 0 1.75rem !important;
	padding: 0;
	gap: 0;
	overflow-x: auto;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255,255,255,.09);
	border-radius: 0;
	box-shadow: none;
	scrollbar-width: none;
}

.shop-page .hosting-switcher::-webkit-scrollbar {
	display: none;
}

.shop-page .hosting-switcher button {
	width: auto !important;
	min-height: 42px;
	flex: 0 0 auto;
	padding: .7rem 1.1rem !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #727690 !important;
	font-size: .7rem;
	font-weight: 700;
}

.shop-page .hosting-switcher button i {
	display: none;
}

.shop-page .hosting-switcher button:hover,
.shop-page .hosting-switcher button.active {
	border-bottom-color: var(--lh-cyan) !important;
	color: #f3f4ff !important;
}

.lh-store-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.shop-page .lh-store-card {
	display: flex;
	min-width: 0;
	min-height: 100%;
	flex-direction: column;
	overflow: hidden;
	background: rgba(9,10,25,.72) !important;
	border: 1px solid rgba(255,255,255,.085) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.shop-page .lh-store-card:hover {
	background: rgba(12,13,31,.9) !important;
	border-color: rgba(35,215,237,.32) !important;
	box-shadow: none !important;
	transform: translateY(-2px);
}

.lh-store-card-image {
	display: block;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	background: #080914;
}

.lh-store-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .75;
	filter: saturate(.8);
	transition: opacity 180ms ease, filter 180ms ease, transform 240ms ease;
}

.lh-store-card:hover .lh-store-card-image img {
	opacity: .95;
	filter: saturate(1);
	transform: scale(1.02);
}

.shop-page .lh-store-card > .p-6.border-b {
	padding: 1rem 1.1rem !important;
	background: transparent !important;
	border-color: rgba(255,255,255,.07) !important;
	text-align: left !important;
}

.shop-page .lh-store-card > .p-6.border-b::after {
	display: none;
}

.shop-page .lh-store-card h4 {
	font-size: .9rem !important;
}

.shop-page .lh-store-card > .p-6:last-child {
	padding: 1rem 1.1rem 1.1rem !important;
	text-align: left !important;
}

.shop-page .lh-store-card .mb-4:first-child span {
	padding: .25rem .4rem !important;
	border: 1px solid rgba(43,225,158,.18);
	border-radius: 3px !important;
	background: rgba(43,225,158,.06) !important;
	font-family: var(--lh-mono);
	font-size: .53rem !important;
	text-transform: uppercase;
}

.shop-page .lh-store-card .space-y-3 {
	margin-bottom: 1rem !important;
}

.shop-page .lh-store-card .space-y-3 > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .48rem 0 !important;
	border-bottom: 1px solid rgba(255,255,255,.06);
	color: #aaaec2 !important;
	font-size: .68rem;
}

.shop-page .lh-store-card .space-y-3 > div::before {
	color: #626780;
	font-family: var(--lh-mono);
	font-size: .52rem;
	text-transform: uppercase;
}

.shop-page .lh-store-card .space-y-3 > div:nth-child(1)::before { content: "CPU"; }
.shop-page .lh-store-card .space-y-3 > div:nth-child(2)::before { content: "Memory"; }
.shop-page .lh-store-card .space-y-3 > div:nth-child(3)::before { content: "Storage"; }
.shop-page .lh-store-card .space-y-3 > div:nth-child(4)::before { content: "Capacity"; }

.shop-page .lh-store-card .space-y-3 i {
	display: none;
}

.shop-page .lh-store-card .package-price {
	margin: auto 0 .8rem !important;
	padding-top: .8rem;
	border-top: 1px solid rgba(255,255,255,.07);
	font-size: 1.15rem !important;
	text-align: left;
	text-shadow: none;
}

.shop-page .lh-store-card .package-price span {
	font-size: .62rem !important;
}

.shop-page .lh-store-card > .p-6:last-child > a,
.shop-page .lh-store-card > .p-6:last-child > button {
	min-height: 40px;
	padding: .6rem .8rem !important;
	border: 1px solid rgba(255,255,255,.12) !important;
	border-radius: 5px !important;
	background: #f0f1fc !important;
	box-shadow: none !important;
	color: #090a16 !important;
	font-size: .68rem !important;
}

.shop-page .lh-store-card > .p-6:last-child > a i,
.shop-page .lh-store-card > .p-6:last-child > button i {
	display: none;
}

.lh-store-discord-mark {
	display: flex;
	aspect-ratio: 16 / 7;
	flex-direction: column;
	justify-content: flex-end;
	gap: .35rem;
	padding: 1.25rem;
	background:
		linear-gradient(rgba(88,101,242,.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(88,101,242,.06) 1px, transparent 1px),
		linear-gradient(135deg, rgba(88,101,242,.2), rgba(35,215,237,.05));
	background-size: 22px 22px, 22px 22px, auto;
}

.lh-store-discord-mark span {
	color: var(--lh-cyan);
	font-family: var(--lh-mono);
	font-size: .55rem;
	text-transform: uppercase;
}

.lh-store-discord-mark strong {
	font-size: .9rem;
}

.lh-store-config {
	padding: clamp(2.5rem, 4vw, 4rem) 0 clamp(4rem, 6vw, 6rem);
}

.lh-store-config > div > .text-center:first-child h2 {
	margin-bottom: 1.5rem !important;
	font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
}

.lh-store-config .glass-card {
	border-radius: 8px !important;
	box-shadow: none !important;
}

.lh-store-config .config-feature-header {
	border-radius: 7px 7px 0 0 !important;
	background: rgba(128,119,255,.07) !important;
}

.lh-store-config #serverConfigForm .glass-card {
	background: rgba(9,10,25,.72) !important;
	border-color: rgba(255,255,255,.09) !important;
}

.lh-store-config .order-summary-total {
	border-radius: 6px !important;
	box-shadow: inset 2px 0 0 var(--lh-cyan);
}

.lh-store-config .order-summary-total h5 {
	font-size: 1.3rem !important;
}

.lh-store-config #proceedCheckoutBtn,
.lh-store-config a[href$="shop"] {
	border-radius: 5px !important;
}

@media (max-width: 1100px) {
	.lh-home-hero,
	.lh-partners {
		grid-template-columns: 1fr;
	}

	.lh-hero-console {
		max-width: 720px;
	}

	.lh-store-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lh-store-heading {
		grid-template-columns: 1fr;
	}

	.lh-store-facts {
		max-width: 620px;
	}
}

@media (max-width: 1279px) {
	.lh-account-actions > a {
		display: none !important;
	}
}

@media (max-width: 768px) {
	.lh-public-header {
		height: 62px;
	}

	.lh-home-hero {
		gap: 2rem;
		padding: 2.75rem 0;
	}

	.lh-hero-copy h1 {
		font-size: clamp(2.25rem, 11vw, 3rem);
		line-height: 1.06;
	}

	.lh-hero-lead {
		font-size: .82rem;
	}

	.lh-hero-proof {
		margin-top: 1.8rem;
	}

	.lh-product-section,
	.lh-reasons,
	.lh-testimonials,
	.lh-partners {
		padding: 3.25rem 0;
	}

	.lh-section-heading h2,
	.lh-partners h2 {
		font-size: 1.8rem;
	}

	.lh-store-grid {
		grid-template-columns: 1fr;
	}

	.lh-store-heading {
		margin-bottom: 1.5rem;
		padding-bottom: 1.5rem;
	}

	.shop-page .lh-store-heading h2 {
		font-size: 2.1rem;
	}

	.lh-store-facts span {
		min-height: 64px;
		padding: .5rem .3rem;
	}

	.lh-discord-float {
		right: 14px;
		bottom: 14px;
		width: 48px;
		height: 48px;
	}
}

/* =========================================================
   PUBLIC EXPERIENCE V4
   Cohesive navigation, catalog controls, infrastructure and footer.
   ========================================================= */
body.app-shell {
	background:
		linear-gradient(180deg, rgba(128,119,255,.045) 0, transparent 320px),
		linear-gradient(112deg, #05060d 0%, #090a15 48%, #050710 100%) !important;
	background-attachment: fixed !important;
	background-size: auto !important;
}

body.app-shell::before {
	background:
		linear-gradient(rgba(143,148,196,.026) 1px, transparent 1px),
		linear-gradient(90deg, rgba(143,148,196,.026) 1px, transparent 1px) !important;
	background-size: 52px 52px !important;
	opacity: .72;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 48%, transparent 92%);
	mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 48%, transparent 92%);
}

body.app-shell::after {
	inset: 0;
	width: auto;
	height: auto;
	background:
		linear-gradient(118deg, transparent 0 65%, rgba(35,215,237,.018) 65% 65.2%, transparent 65.2%),
		linear-gradient(180deg, transparent 78%, rgba(255,77,113,.018)) !important;
}

.app-shell-public main {
	position: relative;
}

.app-shell-public main > div {
	position: relative;
	z-index: 1;
}

.lh-public-header {
	height: 66px !important;
	background: rgba(5,6,14,.88) !important;
	border-bottom-color: rgba(145,150,204,.13) !important;
	backdrop-filter: blur(20px) saturate(120%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(120%) !important;
}

.lh-public-header::after {
	display: block !important;
	background: linear-gradient(90deg, transparent 7%, rgba(128,119,255,.42), rgba(35,215,237,.28), rgba(255,77,113,.25), transparent 93%) !important;
	opacity: .55 !important;
}

.lh-header-inner {
	max-width: 1536px !important;
}

.lh-brand img {
	height: 25px !important;
}

.lh-public-nav {
	gap: 1.25rem !important;
}

.lh-public-nav a {
	font-size: .72rem !important;
	letter-spacing: 0;
}

.lh-account-actions {
	flex-shrink: 0;
}

.lh-account-actions > a {
	min-height: 36px;
	padding: .5rem .75rem !important;
	font-size: .7rem !important;
}

.lh-menu-button {
	display: inline-flex;
	min-width: 68px;
	min-height: 36px;
	align-items: center;
	justify-content: center;
	padding: .5rem .8rem;
	border-color: rgba(128,119,255,.28);
	background: rgba(128,119,255,.07);
	color: #e8e9f8;
	font-family: var(--lh-mono);
	font-size: .67rem;
	text-transform: uppercase;
}

.lh-menu-button:hover,
.lh-menu-button[aria-expanded="true"] {
	border-color: rgba(35,215,237,.48);
	background: rgba(35,215,237,.08);
	color: #fff;
}

.lh-mobile-menu {
	top: 66px;
	padding: .65rem 0;
	border-top: 0;
	border-bottom: 1px solid rgba(128,119,255,.2);
	background: rgba(6,7,17,.975) !important;
	box-shadow: 0 24px 48px rgba(0,0,0,.44);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
}

.lh-mobile-menu > div {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: 1536px;
	gap: .35rem;
	margin: 0 auto;
}

.lh-mobile-menu a {
	min-height: 40px;
	padding: .65rem .8rem !important;
	border: 1px solid transparent;
	color: #989cb7 !important;
	font-size: .7rem;
	font-weight: 650;
}

.lh-mobile-menu a:hover,
.lh-mobile-menu a.nav-link-active {
	border-color: rgba(128,119,255,.2);
	background: rgba(128,119,255,.07) !important;
	color: #f2f3ff !important;
}

.lh-home-hero {
	grid-template-columns: minmax(0, 1.03fr) minmax(390px, .82fr);
	min-height: 560px;
	gap: clamp(2.5rem, 6vw, 6.5rem);
	padding: clamp(3.25rem, 6vw, 5.75rem) 0;
}

.lh-hero-copy h1 {
	max-width: 720px;
	font-size: clamp(2.8rem, 5.3vw, 5.25rem);
	line-height: 1.01;
}

.lh-hero-lead {
	max-width: 600px;
	margin-top: 1.4rem;
	font-size: clamp(.88rem, 1.1vw, 1rem);
	line-height: 1.75;
}

.lh-hero-actions {
	margin-top: 1.8rem;
}

.lh-button-primary,
.lh-button-secondary {
	min-height: 42px;
	padding: .68rem 1rem;
	font-size: .72rem;
}

.lh-hero-proof {
	gap: clamp(1.2rem, 3vw, 2.8rem);
	margin-top: 2.6rem;
}

.lh-infrastructure-panel {
	position: relative;
	overflow: hidden;
	padding: 1.15rem;
	border: 1px solid rgba(128,119,255,.22);
	border-radius: 8px;
	background:
		linear-gradient(rgba(128,119,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(128,119,255,.035) 1px, transparent 1px),
		rgba(8,9,23,.82);
	background-size: 28px 28px, 28px 28px, auto;
	box-shadow: 0 28px 70px rgba(0,0,0,.28);
}

.lh-infrastructure-panel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: var(--lh-spectrum);
	opacity: .78;
}

.lh-infrastructure-panel .lh-console-topline {
	padding: .25rem .2rem 1rem;
}

.lh-console-topline > div {
	display: flex;
	flex-direction: column;
	gap: .18rem;
}

.lh-console-topline > div span {
	color: #e5e6f4;
	font-size: .7rem;
}

.lh-console-topline > div small {
	color: #696e8a;
	font-family: var(--lh-mono);
	font-size: .5rem;
	font-weight: 500;
}

.lh-location-list {
	position: relative;
	z-index: 1;
}

.lh-location-row {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) auto;
	align-items: center;
	gap: .8rem;
	padding: .92rem .25rem;
	border-bottom: 1px solid rgba(255,255,255,.07);
}

.lh-location-index {
	display: inline-flex;
	width: 32px;
	height: 26px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(35,215,237,.25);
	border-radius: 4px;
	background: rgba(35,215,237,.055);
	color: var(--lh-cyan);
	font-family: var(--lh-mono);
	font-size: .56rem;
	font-weight: 700;
}

.lh-location-row > div {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: .18rem;
}

.lh-location-row strong {
	color: #e7e8f4;
	font-size: .72rem;
}

.lh-location-row code {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: #6f748e !important;
	font-size: .55rem;
	text-shadow: none !important;
}

.lh-location-row .lh-node-load {
	padding: .26rem .38rem;
	border: 1px solid rgba(37,230,167,.2);
	border-radius: 4px;
	background: rgba(37,230,167,.05);
	color: var(--lh-green);
	font-size: .62rem;
}

.lh-platform-line {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: .22rem .75rem;
	padding: 1rem .25rem .15rem;
}

.lh-platform-line > span {
	grid-row: span 2;
	padding-right: .75rem;
	border-right: 1px solid rgba(255,255,255,.08);
	color: #686d89;
	font-family: var(--lh-mono);
	font-size: .5rem;
	text-transform: uppercase;
}

.lh-platform-line strong {
	font-size: .68rem;
}

.lh-platform-line small {
	color: #70748d;
	font-family: var(--lh-mono);
	font-size: .49rem;
}

.lh-product-section,
.lh-reasons,
.lh-testimonials,
.lh-partners {
	position: relative;
	padding: clamp(3.75rem, 6vw, 6rem) 0;
}

.lh-product-section::before,
.lh-testimonials::before {
	content: "";
	position: absolute;
	inset: 0 50%;
	z-index: -1;
	width: 100vw;
	transform: translateX(-50%);
	background: linear-gradient(90deg, rgba(128,119,255,.018), rgba(35,215,237,.025) 48%, rgba(255,77,113,.012));
}

.lh-section-heading {
	margin-bottom: 2rem;
}

.lh-section-heading h2,
.lh-partners h2 {
	font-size: clamp(1.85rem, 3.3vw, 3.25rem);
}

.lh-category-bar {
	display: flex;
	align-items: center;
	gap: .3rem;
	margin-bottom: 1.4rem;
	padding: .3rem;
	border: 1px solid rgba(128,119,255,.17);
	border-radius: 8px;
	background: rgba(8,9,22,.72);
}

.lh-category-bar button,
.lh-category-bar a {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .55rem .78rem;
	border: 1px solid transparent;
	border-radius: 5px !important;
	background: transparent !important;
	color: #777c99 !important;
	font-size: .66rem;
	font-weight: 700;
	white-space: nowrap;
	transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.lh-category-bar button span {
	display: inline-flex;
	min-width: 20px;
	height: 18px;
	align-items: center;
	justify-content: center;
	padding: 0 .28rem;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 3px;
	background: rgba(255,255,255,.025);
	color: #8f94ae;
	font-family: var(--lh-mono);
	font-size: .52rem;
}

.lh-category-bar button:hover,
.lh-category-bar a:hover {
	color: #e7e8f5 !important;
}

.lh-category-bar button.active {
	border-color: rgba(35,215,237,.28);
	background: linear-gradient(110deg, rgba(128,119,255,.14), rgba(35,215,237,.08)) !important;
	color: #f4f5ff !important;
}

.lh-category-bar button.active span {
	border-color: rgba(35,215,237,.24);
	color: var(--lh-cyan);
}

.lh-catalog-empty {
	grid-column: 1 / -1;
	padding: 2.75rem 1.5rem;
	border: 1px dashed rgba(128,119,255,.24);
	border-radius: 8px;
	background: rgba(9,10,24,.54);
	text-align: center;
}

.lh-catalog-empty strong {
	color: #e7e8f3;
	font-size: .78rem;
}

.lh-catalog-empty p {
	max-width: 520px;
	margin: .55rem auto 0;
	color: #737894;
	font-size: .68rem;
	line-height: 1.7;
}

.lh-home-products,
.lh-store-grid {
	gap: .85rem;
}

.lh-product-card,
.lh-store-card {
	border-radius: 8px !important;
}

.lh-reason-grid,
.lh-quote-grid {
	border-color: rgba(128,119,255,.13);
	background: rgba(128,119,255,.13);
}

.lh-reason-grid article,
.lh-quote-grid blockquote {
	background: rgba(7,8,19,.9);
}

.lh-partners {
	gap: clamp(2.5rem, 7vw, 7rem);
}

.lh-footer {
	position: relative;
	border-top-color: rgba(128,119,255,.18);
	background:
		linear-gradient(rgba(128,119,255,.026) 1px, transparent 1px),
		linear-gradient(90deg, rgba(128,119,255,.026) 1px, transparent 1px),
		linear-gradient(180deg, rgba(9,10,23,.98), #05060e) !important;
	background-size: 44px 44px, 44px 44px, auto !important;
}

.lh-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: var(--lh-spectrum);
	opacity: .58;
}

.lh-footer-signal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(255,255,255,.07);
}

.lh-footer-status,
.lh-footer-support {
	display: flex;
	align-items: center;
}

.lh-footer-status {
	gap: .7rem;
}

.lh-footer-status > span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--lh-green);
	box-shadow: 0 0 12px rgba(37,230,167,.8);
}

.lh-footer-status > div {
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.lh-footer-status strong {
	font-size: .66rem;
}

.lh-footer-status small,
.lh-footer-support span {
	color: #717691;
	font-family: var(--lh-mono);
	font-size: .49rem;
}

.lh-footer-support {
	gap: .8rem;
}

.lh-footer-support a {
	padding-bottom: .16rem;
	border-bottom: 1px solid rgba(35,215,237,.38);
	color: #dfe1ef;
	font-size: .63rem;
	font-weight: 700;
}

.lh-footer-main {
	grid-template-columns: minmax(260px, .9fr) 1.5fr;
	padding-top: 2.7rem;
	padding-bottom: 2.7rem;
}

.lh-footer-brand img {
	height: 24px;
}

.lh-footer-brand p {
	max-width: 420px;
	margin-top: 1rem;
	font-size: .68rem;
}

.lh-footer-label {
	color: #cfd1e1;
	font-family: var(--lh-mono);
	font-size: .53rem;
	text-transform: uppercase;
}

.lh-footer-links a {
	color: #777c96;
	font-size: .66rem;
	transition: color 150ms ease, transform 150ms ease;
}

.lh-footer-links a:hover,
.lh-footer-legal a:hover {
	color: var(--lh-cyan);
}

.lh-footer-meta {
	padding-top: .85rem;
	padding-bottom: .85rem;
}

.lh-footer-legal {
	font-size: .61rem;
}

.lh-footer-trust img {
	height: 27px;
	opacity: .76;
}

.lh-footer-payments img {
	height: 17px;
	opacity: .48;
}

.lh-discord-float {
	border-radius: 8px !important;
}

@media (max-width: 1535px) {
	.lh-account-actions > a {
		display: none !important;
	}
}

@media (min-width: 1536px) {
	.lh-public-nav,
	.lh-admin-desktop-nav,
	.lh-admin-desktop-actions {
		display: flex !important;
	}

	.lh-menu-button,
	.lh-mobile-menu,
	.lh-admin-menu-button,
	.lh-admin-mobile-menu {
		display: none !important;
	}
}

@media (max-width: 1100px) {
	.lh-home-hero {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.lh-infrastructure-panel {
		max-width: 720px;
	}

	.lh-mobile-menu > div {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 800px) {
	.lh-mobile-menu > div {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lh-category-bar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lh-category-bar button,
	.lh-category-bar a {
		width: 100%;
		white-space: normal;
	}

	.lh-footer-signal {
		align-items: flex-start;
		flex-direction: column;
		gap: 1rem;
	}
}

@media (max-width: 640px) {
	body.lh-menu-open {
		overflow: hidden;
	}

	.lh-public-header {
		height: 60px !important;
	}

	.lh-brand img {
		height: 21px !important;
	}

	.lh-mobile-menu {
		top: 60px;
	}

	.lh-mobile-menu > div {
		grid-template-columns: 1fr;
	}

	.lh-home-hero {
		padding: 2.7rem 0 3.25rem;
	}

	.lh-hero-copy h1 {
		font-size: clamp(2.15rem, 11vw, 2.85rem);
	}

	.lh-hero-proof {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: .65rem;
	}

	.lh-hero-proof strong {
		font-size: .7rem;
	}

	.lh-hero-proof span {
		font-size: .55rem;
	}

	.lh-infrastructure-panel {
		padding: .9rem;
	}

	.lh-console-topline {
		align-items: flex-start;
		gap: .7rem;
	}

	.lh-platform-line {
		grid-template-columns: 1fr;
	}

	.lh-platform-line > span {
		grid-row: auto;
		padding: 0 0 .45rem;
		border-right: 0;
		border-bottom: 1px solid rgba(255,255,255,.08);
	}

	.lh-category-bar {
		grid-template-columns: 1fr 1fr;
	}

	.lh-footer-main {
		gap: 2rem;
	}

	.lh-footer-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =========================================================
   PUBLIC EXPERIENCE V5
   Isolated public navigation and quieter visual rhythm.
   ========================================================= */
.app-shell-public > .lh-public-header {
	position: sticky;
	top: 0;
	z-index: 80;
	height: 72px !important;
	border-bottom: 1px solid rgba(140, 146, 192, .14) !important;
	background: rgba(5, 6, 15, .92) !important;
	box-shadow: 0 12px 35px rgba(0, 0, 0, .2) !important;
	backdrop-filter: blur(22px) saturate(125%) !important;
	-webkit-backdrop-filter: blur(22px) saturate(125%) !important;
}

.app-shell-public > .lh-public-header::after {
	right: 0 !important;
	left: 0 !important;
	display: block !important;
	width: auto !important;
	height: 1px !important;
	background: linear-gradient(90deg, transparent 3%, rgba(128, 119, 255, .34) 28%, rgba(35, 215, 237, .42) 62%, rgba(255, 77, 113, .24) 86%, transparent 97%) !important;
	opacity: .7 !important;
}

.app-shell-public .lh-header-shell {
	display: grid;
	width: min(100% - 40px, 1480px);
	height: 100%;
	grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
	align-items: center;
	gap: 1.5rem;
	margin: 0 auto;
}

.app-shell-public .lh-brand {
	display: inline-flex;
	width: max-content;
	align-items: center;
}

.app-shell-public .lh-brand img {
	display: block;
	width: auto;
	height: 27px !important;
	max-width: 205px;
	filter: none !important;
}

.app-shell-public .lh-primary-nav {
	display: none;
	height: 100%;
	align-items: center;
	justify-content: center;
	gap: clamp(1.1rem, 1.75vw, 1.9rem) !important;
}

.app-shell-public .lh-primary-nav-link,
.app-shell-public .lh-primary-nav-link:hover,
.app-shell-public .lh-primary-nav-link.is-active {
	position: relative;
	display: inline-flex;
	height: 100%;
	min-height: 0;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 2px 0 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: .78rem !important;
	font-weight: 650;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
}

.app-shell-public .lh-primary-nav-link {
	color: #8d92ad !important;
	transition: color 160ms ease !important;
}

.app-shell-public .lh-primary-nav-link:hover {
	color: #e9eaf5 !important;
}

.app-shell-public .lh-primary-nav-link.is-active {
	color: #fff !important;
}

.app-shell-public .lh-primary-nav-link i {
	display: none !important;
}

.app-shell-public .lh-primary-nav-link::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	transform: translateX(-50%);
	border-radius: 2px 2px 0 0;
	background: linear-gradient(90deg, var(--lh-purple), var(--lh-cyan));
	box-shadow: 0 0 12px rgba(35, 215, 237, .38);
	opacity: 0;
	transition: width 170ms ease, opacity 170ms ease;
}

.app-shell-public .lh-primary-nav-link:hover::before {
	width: 14px;
	opacity: .55;
}

.app-shell-public .lh-primary-nav-link.is-active::before {
	width: 100%;
	opacity: 1;
}

.app-shell-public .lh-primary-nav-link::after,
.app-shell-public .lh-primary-nav-link.is-active::after {
	display: none !important;
	content: none !important;
}

.app-shell-public .lh-account-actions {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: flex-end;
	gap: .45rem !important;
}

.app-shell-public .lh-account-actions > a {
	display: none !important;
	min-height: 38px;
	align-items: center;
	justify-content: center;
	padding: .58rem .85rem !important;
	border: 1px solid rgba(145, 150, 204, .16) !important;
	border-radius: 6px !important;
	background: rgba(255, 255, 255, .018) !important;
	box-shadow: none !important;
	color: #b4b8cd !important;
	font-size: .73rem !important;
	font-weight: 650;
}

.app-shell-public .lh-account-actions > a:hover {
	border-color: rgba(35, 215, 237, .26) !important;
	background: rgba(35, 215, 237, .045) !important;
	color: #f4f5ff !important;
}

.app-shell-public .lh-account-actions > a.btn-gradient {
	border-color: rgba(35, 215, 237, .34) !important;
	background: linear-gradient(110deg, rgba(128, 119, 255, .2), rgba(35, 215, 237, .13)) !important;
	color: #fff !important;
}

.app-shell-public .lh-account-actions > a::after {
	display: none !important;
	content: none !important;
}

.app-shell-public .lh-menu-button {
	display: inline-flex;
	min-width: 74px;
	min-height: 38px;
	align-items: center;
	justify-content: center;
	padding: .55rem .8rem;
	border: 1px solid rgba(145, 150, 204, .2);
	border-radius: 6px;
	background: rgba(255, 255, 255, .025);
	color: #d5d7e6;
	font-family: inherit;
	font-size: .71rem;
	font-weight: 700;
	text-transform: none;
}

.app-shell-public .lh-menu-button:hover,
.app-shell-public .lh-menu-button[aria-expanded="true"] {
	border-color: rgba(35, 215, 237, .35);
	background: rgba(35, 215, 237, .065);
	color: #fff;
}

.app-shell-public .lh-mobile-menu {
	position: absolute;
	top: 72px;
	right: 0;
	left: 0;
	max-height: calc(100vh - 72px);
	padding: .7rem 0 .85rem;
	overflow-y: auto;
	border-top: 0;
	border-bottom: 1px solid rgba(128, 119, 255, .2);
	background: rgba(6, 7, 17, .985) !important;
	box-shadow: 0 28px 55px rgba(0, 0, 0, .42);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
}

.app-shell-public .lh-mobile-menu.hidden {
	display: none !important;
}

.app-shell-public .lh-mobile-menu-grid {
	display: grid;
	width: min(100% - 32px, 1100px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .4rem;
	margin: 0 auto;
	padding: 0;
}

.app-shell-public .lh-mobile-nav-link,
.app-shell-public .lh-mobile-nav-link:hover,
.app-shell-public .lh-mobile-nav-link.is-active {
	position: relative;
	display: flex;
	min-height: 42px;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: .7rem .8rem !important;
	border: 1px solid transparent !important;
	border-radius: 6px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #979bb4 !important;
	font-size: .72rem;
	font-weight: 650;
	text-align: center;
}

.app-shell-public .lh-mobile-nav-link i {
	display: none !important;
}

.app-shell-public .lh-mobile-nav-link:hover {
	border-color: rgba(145, 150, 204, .14) !important;
	background: rgba(255, 255, 255, .025) !important;
	color: #e9eaf4 !important;
}

.app-shell-public .lh-mobile-nav-link.is-active {
	border-color: rgba(35, 215, 237, .24) !important;
	background: linear-gradient(110deg, rgba(128, 119, 255, .09), rgba(35, 215, 237, .055)) !important;
	color: #fff !important;
}

.app-shell-public .lh-mobile-nav-link::after {
	display: none !important;
	content: none !important;
}

/* Public page rhythm: smaller headings, more separation, quieter surfaces. */
body.app-shell-public {
	background:
		linear-gradient(180deg, rgba(128, 119, 255, .035) 0, transparent 300px),
		linear-gradient(125deg, #05060e 0%, #080a14 52%, #050710 100%) !important;
}

body.app-shell-public::before {
	background:
		linear-gradient(rgba(143, 148, 196, .018) 1px, transparent 1px),
		linear-gradient(90deg, rgba(143, 148, 196, .018) 1px, transparent 1px) !important;
	background-size: 56px 56px !important;
	opacity: .62;
}

.app-shell-public .lh-home-hero {
	min-height: 525px;
	gap: clamp(2.5rem, 5vw, 5.5rem);
	padding: clamp(3.25rem, 5vw, 5rem) 0;
}

.app-shell-public .lh-hero-copy h1 {
	max-width: 650px;
	font-size: clamp(2.75rem, 4.65vw, 4.55rem);
	line-height: 1.035;
}

.app-shell-public .lh-hero-lead {
	max-width: 560px;
	font-size: clamp(.85rem, 1vw, .95rem);
}

.app-shell-public .lh-infrastructure-panel {
	border-color: rgba(145, 150, 204, .18);
	background:
		linear-gradient(rgba(128, 119, 255, .025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(128, 119, 255, .025) 1px, transparent 1px),
		rgba(8, 9, 22, .82);
	background-size: 30px 30px, 30px 30px, auto;
	box-shadow: 0 28px 65px rgba(0, 0, 0, .24);
}

.app-shell-public .lh-product-section,
.app-shell-public .lh-reasons,
.app-shell-public .lh-testimonials,
.app-shell-public .lh-partners {
	padding: clamp(3.5rem, 5vw, 5.25rem) 0;
}

.app-shell-public .lh-section-heading h2,
.app-shell-public .lh-partners h2 {
	font-size: clamp(1.75rem, 2.8vw, 2.75rem);
}

.app-shell-public .lh-category-bar {
	width: max-content;
	max-width: 100%;
	gap: .2rem;
	padding: .26rem;
	border-color: rgba(145, 150, 204, .14);
	background: rgba(7, 8, 19, .72);
}

.app-shell-public .lh-category-bar button,
.app-shell-public .lh-category-bar a {
	min-height: 38px;
	padding: .58rem .82rem;
	font-size: .7rem;
}

.app-shell-public .lh-category-bar button.active {
	border-color: rgba(35, 215, 237, .22);
	background: rgba(35, 215, 237, .06) !important;
}

.app-shell-public .lh-footer {
	background:
		linear-gradient(rgba(128, 119, 255, .018) 1px, transparent 1px),
		linear-gradient(90deg, rgba(128, 119, 255, .018) 1px, transparent 1px),
		linear-gradient(180deg, rgba(8, 9, 20, .985), #05060d) !important;
	background-size: 56px 56px, 56px 56px, auto !important;
}

@media (min-width: 1180px) {
	.app-shell-public > .lh-public-header.is-guest .lh-primary-nav,
	.app-shell-public > .lh-public-header.is-guest .lh-account-actions > a {
		display: flex !important;
	}

	.app-shell-public > .lh-public-header.is-guest .lh-menu-button {
		display: none !important;
	}
}

@media (min-width: 1536px) {
	.app-shell-public > .lh-public-header.is-authenticated .lh-primary-nav,
	.app-shell-public > .lh-public-header.is-authenticated .lh-account-actions > a {
		display: flex !important;
	}

	.app-shell-public > .lh-public-header.is-authenticated .lh-menu-button {
		display: none !important;
	}
}

@media (max-width: 1179px) {
	.app-shell-public .lh-header-shell {
		grid-template-columns: 1fr auto;
	}
}

@media (max-width: 800px) {
	.app-shell-public .lh-header-shell {
		width: min(100% - 28px, 1480px);
	}

	.app-shell-public .lh-mobile-menu-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.app-shell-public .lh-category-bar {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.app-shell-public > .lh-public-header {
		height: 62px !important;
	}

	.app-shell-public .lh-brand img {
		height: 22px !important;
		max-width: 165px;
	}

	.app-shell-public .lh-menu-button {
		min-width: 64px;
		min-height: 36px;
	}

	.app-shell-public .lh-mobile-menu {
		top: 62px;
		max-height: calc(100vh - 62px);
	}

	.app-shell-public .lh-mobile-menu-grid {
		grid-template-columns: 1fr 1fr;
	}

	.app-shell-public .lh-home-hero {
		padding-top: 2.8rem;
	}

	.app-shell-public .lh-hero-copy h1 {
		font-size: clamp(2.2rem, 11vw, 2.9rem);
	}
}

/* =========================================================
   UNIFIED EXPERIENCE V6
   Brighter graphite-indigo surfaces and complete shop flow.
   ========================================================= */
:root {
	--lh-bg: #0b0e1f;
	--lh-bg-deep: #080a17;
	--lh-panel: #12162e;
	--lh-panel-2: #181d39;
	--lh-panel-3: #202645;
	--lh-line: rgba(151, 158, 220, .22);
	--lh-line-strong: rgba(126, 200, 244, .38);
	--lh-text: #f0f2ff;
	--lh-soft: #b3b8d2;
	--lh-muted: #7e85a6;
}

html {
	background: var(--lh-bg-deep);
}

body.app-shell,
body.app-shell-public {
	background:
		linear-gradient(180deg, rgba(128, 119, 255, .09) 0, transparent 360px),
		linear-gradient(125deg, #0d1022 0%, #12162b 48%, #0a0e1e 100%) !important;
}

body.app-shell::before,
body.app-shell-public::before {
	background:
		linear-gradient(rgba(164, 172, 230, .028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(164, 172, 230, .028) 1px, transparent 1px) !important;
	background-size: 56px 56px !important;
	opacity: .72;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .8) 62%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .8) 62%, transparent 100%);
}

body.app-shell::after,
body.app-shell-public::after {
	inset: 0;
	width: auto;
	height: auto;
	background:
		linear-gradient(118deg, transparent 0 64%, rgba(35, 215, 237, .035) 64% 64.15%, transparent 64.15%),
		linear-gradient(180deg, transparent 74%, rgba(128, 119, 255, .045)) !important;
}

.app-shell > header.app-topbar,
.app-shell-public > .lh-public-header {
	background: rgba(11, 14, 31, .9) !important;
}

.app-shell .glass-card,
.app-shell .card,
.app-shell .modern-card,
.app-shell .section-card,
.app-shell .stat-card,
.app-shell .stat-mini,
.app-shell .filter-card,
.app-shell .invoice-card,
.app-shell .detail-card,
.app-shell .edit-card,
.app-shell .service-stat,
.app-shell .ticket-card {
	background:
		linear-gradient(rgba(158, 166, 226, .025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(158, 166, 226, .025) 1px, transparent 1px),
		linear-gradient(150deg, rgba(29, 34, 65, .97), rgba(18, 22, 46, .98)) !important;
	background-size: 24px 24px, 24px 24px, auto !important;
	border-color: rgba(151, 158, 220, .24) !important;
	box-shadow: 0 14px 34px rgba(2, 4, 14, .18), inset 0 1px 0 rgba(255, 255, 255, .025);
}

.app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.app-shell select,
.app-shell textarea,
.app-shell .form-control,
.app-shell .form-select,
.app-shell .form-input,
.app-shell .filter-input {
	background: rgba(20, 25, 51, .96) !important;
	border-color: rgba(151, 158, 220, .24) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}

.app-shell input:not([type="checkbox"]):not([type="radio"]):focus,
.app-shell select:focus,
.app-shell textarea:focus,
.app-shell .form-control:focus,
.app-shell .form-select:focus,
.app-shell .form-input:focus,
.app-shell .filter-input:focus {
	background: #1a2140 !important;
}

.app-shell select option {
	background: #171c37;
}

.app-shell .bg-dark-600,
.app-shell .bg-dark-600\/50,
.app-shell .bg-dark-700,
.app-shell .bg-dark-700\/50,
.app-shell .bg-dark-800,
.app-shell .bg-dark-800\/80 {
	background-color: rgba(20, 25, 51, .94) !important;
}

.app-shell table tbody tr {
	background: rgba(18, 23, 47, .42);
}

.app-shell table tbody tr:nth-child(even) {
	background: rgba(24, 29, 57, .34);
}

.app-shell table tbody tr:hover,
.app-shell .invoice-row:hover {
	background: linear-gradient(90deg, rgba(128, 119, 255, .13), rgba(35, 215, 237, .055)) !important;
}

.app-shell-public .lh-infrastructure-panel {
	background:
		linear-gradient(rgba(164, 172, 230, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(164, 172, 230, .04) 1px, transparent 1px),
		linear-gradient(145deg, rgba(28, 34, 67, .96), rgba(17, 22, 46, .98));
	background-size: 30px 30px, 30px 30px, auto;
	border-color: rgba(151, 158, 220, .28);
}

.lh-location-row {
	grid-template-columns: 46px minmax(0, 1fr) auto;
	padding: 1rem .35rem;
}

.lh-location-flag {
	display: inline-flex;
	width: 38px;
	height: 28px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 5px;
	background: rgba(255, 255, 255, .055);
	box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
	font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
	font-size: 1.18rem;
	line-height: 1;
}

.lh-location-row code {
	color: #9da4c1 !important;
}

.app-shell-public .lh-category-bar {
	border-color: rgba(151, 158, 220, .22);
	background: rgba(22, 27, 54, .88);
	box-shadow: 0 10px 28px rgba(3, 5, 15, .14);
}

.shop-page .lh-store-card,
.lh-product-card {
	background: linear-gradient(150deg, rgba(28, 34, 65, .94), rgba(18, 23, 48, .96)) !important;
	border-color: rgba(151, 158, 220, .23) !important;
	box-shadow: 0 12px 28px rgba(2, 4, 14, .14) !important;
}

.shop-page .lh-store-card:hover,
.lh-product-card:hover {
	background: linear-gradient(150deg, rgba(33, 40, 76, .98), rgba(20, 26, 53, .98)) !important;
	border-color: rgba(35, 215, 237, .38) !important;
	box-shadow: 0 18px 38px rgba(2, 4, 14, .2) !important;
}

.lh-store-card-image {
	background: #14182f;
}

.lh-store-card-image img {
	opacity: .86;
	filter: saturate(.9) brightness(1.05);
}

.lh-store-heading {
	border-bottom-color: rgba(151, 158, 220, .2);
}

.lh-store-facts {
	border-top-color: rgba(151, 158, 220, .2);
	border-bottom-color: rgba(151, 158, 220, .2);
	background: rgba(25, 30, 59, .42);
}

.lh-store-facts span + span {
	border-left-color: rgba(151, 158, 220, .16);
}

/* Product configuration */
.lh-store-config {
	padding: clamp(2.8rem, 5vw, 5rem) 0 clamp(4rem, 7vw, 7rem);
}

.lh-config-shell {
	width: min(100% - 40px, 1360px);
	margin: 0 auto;
}

.lh-config-heading {
	display: grid;
	grid-template-columns: minmax(280px, .72fr) minmax(480px, 1.28fr);
	align-items: end;
	gap: 1rem clamp(2rem, 5vw, 5rem);
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(151, 158, 220, .2);
	text-align: left;
}

.lh-config-heading > .lh-eyebrow,
.lh-config-heading > h2,
.lh-config-heading > p:not(.lh-eyebrow) {
	grid-column: 1;
}

.lh-config-heading > .lh-eyebrow {
	align-self: end;
	margin-bottom: 0;
}

.lh-config-heading > h2 {
	margin: .35rem 0 .75rem !important;
	font-size: clamp(2rem, 3.5vw, 3.5rem) !important;
	line-height: 1.06;
}

.lh-config-heading > p:not(.lh-eyebrow) {
	max-width: 520px;
	margin: 0;
	color: #9da3bd;
	font-size: .8rem;
	line-height: 1.7;
}

.lh-included-card {
	grid-column: 2;
	grid-row: 1 / span 3;
	overflow: hidden;
	border-radius: 8px !important;
}

.lh-store-config .config-feature-header {
	padding: .8rem 1rem;
	border-bottom: 1px solid rgba(151, 158, 220, .16);
	border-radius: 0 !important;
	background: rgba(128, 119, 255, .075) !important;
}

.lh-store-config .config-feature-header h6 {
	color: #d9dcef;
	font-family: var(--lh-mono);
	font-size: .58rem;
	font-weight: 700;
	text-transform: uppercase;
}

.lh-included-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	padding: .65rem 1rem .85rem;
}

.lh-included-feature {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: .55rem;
	padding: .55rem 0;
	border-bottom: 1px solid rgba(151, 158, 220, .1);
	color: #b8bdd4;
	font-size: .68rem;
}

.lh-included-feature:nth-child(odd) {
	padding-right: 1rem;
}

.lh-included-feature:nth-child(even) {
	padding-left: 1rem;
	border-left: 1px solid rgba(151, 158, 220, .1);
}

.lh-included-feature i {
	width: 14px;
	flex: 0 0 14px;
	color: var(--lh-cyan);
	font-size: .66rem;
	text-align: center;
}

.lh-store-config #serverConfigForm {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
	align-items: start;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.lh-store-config #selectedPackageId {
	display: none;
}

.lh-config-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .9rem;
}

.lh-config-loading {
	grid-column: 1 / -1;
	display: flex;
	min-height: 190px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: .7rem;
	border: 1px dashed rgba(151, 158, 220, .25);
	border-radius: 8px;
	background: rgba(23, 28, 56, .52);
	color: #9ca3bd;
	font-size: .72rem;
}

.lh-store-config #configOptionsContainer .glass-card {
	height: 100%;
	padding: 1rem !important;
	border-color: rgba(151, 158, 220, .24) !important;
	background: linear-gradient(150deg, rgba(29, 35, 68, .97), rgba(19, 24, 50, .98)) !important;
}

.lh-store-config #configOptionsContainer .glass-card h6 {
	margin-bottom: .45rem !important;
	color: #eef0fb;
	font-size: .78rem;
	text-align: left !important;
}

.lh-store-config #configOptionsContainer .glass-card p {
	margin-bottom: .8rem !important;
	font-size: .66rem !important;
	line-height: 1.55;
	text-align: left !important;
}

.lh-config-checkout {
	position: sticky;
	top: 94px;
}

.lh-checkout-card {
	padding: 1.15rem !important;
	border-radius: 8px !important;
	background: linear-gradient(150deg, rgba(31, 37, 72, .98), rgba(20, 25, 52, .99)) !important;
}

.lh-checkout-card label {
	font-size: .7rem !important;
}

.lh-checkout-card input,
.lh-checkout-card select,
.lh-checkout-card button {
	min-height: 42px;
}

.lh-store-config .payment-choice {
	padding: .72rem !important;
	border-radius: 6px !important;
	background: rgba(24, 29, 57, .8) !important;
}

.lh-store-config .payment-choice span {
	font-size: .7rem;
}

.lh-store-config .payment-choice p {
	margin-top: .15rem;
	font-size: .61rem !important;
}

.lh-store-config .order-summary-total {
	margin-top: 1rem;
	padding: 1rem !important;
	border-color: rgba(35, 215, 237, .24) !important;
	background: linear-gradient(110deg, rgba(128, 119, 255, .14), rgba(35, 215, 237, .075)) !important;
}

.lh-store-config .order-summary-total h5 {
	font-size: 1.35rem !important;
}

.lh-checkout-actions {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .65rem;
	margin-top: .75rem;
}

.lh-checkout-actions > a,
.lh-checkout-actions > button {
	min-height: 42px;
	justify-content: center;
	padding: .65rem .8rem !important;
	border-radius: 6px !important;
	font-size: .68rem !important;
}

.lh-checkout-actions > button {
	width: 100%;
}

.app-shell-public .lh-footer {
	background:
		linear-gradient(rgba(158, 166, 226, .025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(158, 166, 226, .025) 1px, transparent 1px),
		linear-gradient(180deg, rgba(18, 22, 43, .99), #0a0d1b) !important;
	background-size: 56px 56px, 56px 56px, auto !important;
}

@media (max-width: 1050px) {
	.lh-config-heading {
		grid-template-columns: 1fr;
	}

	.lh-config-heading > .lh-eyebrow,
	.lh-config-heading > h2,
	.lh-config-heading > p:not(.lh-eyebrow),
	.lh-included-card {
		grid-column: 1;
		grid-row: auto;
	}

	.lh-store-config #serverConfigForm {
		grid-template-columns: 1fr;
	}

	.lh-config-checkout {
		position: static;
	}
}

@media (max-width: 680px) {
	.lh-config-shell {
		width: min(100% - 28px, 1360px);
	}

	.lh-included-grid,
	.lh-config-options {
		grid-template-columns: 1fr;
	}

	.lh-included-feature:nth-child(odd),
	.lh-included-feature:nth-child(even) {
		padding-right: 0;
		padding-left: 0;
		border-left: 0;
	}

	.lh-checkout-actions {
		grid-template-columns: 1fr;
	}
}

/* Shared public/client pages */
.app-shell-public .lh-mobile-menu {
	background: rgba(15, 19, 39, .985) !important;
}

.workspace-page {
	padding-top: 2.5rem !important;
	padding-bottom: 4rem !important;
}

.workspace-page > div {
	width: min(100% - 40px, 1480px);
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.workspace-page > div > .lh-client-page-header {
	min-height: 58px;
	align-items: center;
	margin-bottom: 1.25rem !important;
}

.workspace-page > div > .lh-client-page-header h4 {
	font-size: 1.25rem !important;
}

.workspace-page > div > .lh-client-page-header h4 i {
	display: none;
}

.workspace-page > div > .grid:first-of-type > .glass-card {
	overflow: hidden;
	border-top: 1px solid rgba(151, 158, 220, .26) !important;
}

.workspace-page > div > .grid:first-of-type > .glass-card::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 2px;
	background: var(--lh-spectrum);
	opacity: .48;
}

.workspace-page .filter-btn {
	min-height: 36px;
	padding: .5rem .68rem !important;
	border-color: rgba(151, 158, 220, .18) !important;
	border-radius: 5px !important;
	background: rgba(26, 32, 63, .68) !important;
	box-shadow: none !important;
	font-size: .64rem !important;
}

.workspace-page .filter-btn.active {
	border-color: rgba(35, 215, 237, .34) !important;
	background: rgba(35, 215, 237, .08) !important;
	color: #fff !important;
}

.workspace-page .glass-card.overflow-hidden {
	border-color: rgba(151, 158, 220, .25) !important;
}

.workspace-page table th {
	background: rgba(128, 119, 255, .055);
}

.workspace-page table td {
	padding-top: .85rem !important;
	padding-bottom: .85rem !important;
}

.workspace-page table td a[class*="w-10"],
.workspace-page table td button[class*="w-10"] {
	width: 34px !important;
	height: 34px !important;
	border: 1px solid rgba(151, 158, 220, .18) !important;
	border-radius: 5px !important;
	box-shadow: none !important;
}

.lh-auth-page {
	position: relative;
	min-height: calc(100vh - 72px);
	padding: 3.5rem 1rem;
}

.lh-auth-page::before {
	content: "";
	position: absolute;
	inset: 2rem 50% auto;
	width: min(780px, 90vw);
	height: 280px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse, rgba(128, 119, 255, .13), transparent 68%);
	pointer-events: none;
}

.lh-auth-card {
	padding: 1.5rem !important;
	border-color: rgba(151, 158, 220, .27) !important;
	background: linear-gradient(150deg, rgba(31, 37, 72, .98), rgba(19, 24, 49, .99)) !important;
}

.lh-auth-card > .text-center:first-child {
	margin-bottom: 1.5rem !important;
	text-align: left !important;
}

.lh-auth-card > .text-center:first-child > div:first-child {
	display: none !important;
}

.lh-auth-card > .text-center:first-child h2 {
	margin-bottom: .35rem !important;
	font-size: 1.45rem !important;
}

.lh-auth-card > .text-center:first-child p {
	font-size: .72rem;
}

.lh-auth-card label {
	font-size: .68rem !important;
}

.lh-auth-card input,
.lh-auth-card select,
.lh-auth-card button,
.lh-auth-card a[class*="py-3"] {
	min-height: 42px;
}

.lh-auth-card p.font-semibold {
	margin: 1.5rem 0 .8rem !important;
	padding-bottom: .55rem;
	border-bottom: 1px solid rgba(151, 158, 220, .14);
	color: #dfe2f2 !important;
	font-family: var(--lh-mono);
	font-size: .57rem;
	text-transform: uppercase;
}

.lh-contact-page > div {
	width: min(100% - 40px, 1220px);
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.lh-contact-form-card,
.lh-contact-info-card {
	height: 100%;
	padding: 1.5rem !important;
}

.lh-contact-form-card > .text-center {
	margin-bottom: 1.5rem !important;
	text-align: left !important;
}

.lh-contact-form-card > .text-center > div:first-child {
	display: none !important;
}

.lh-contact-form-card > .text-center h2 {
	font-size: 1.45rem !important;
}

.lh-contact-info-card h4 {
	margin-bottom: 1.1rem !important;
	font-size: 1rem !important;
}

.lh-contact-info-card .space-y-4 > div {
	padding: .15rem 0;
}

.lh-contact-info-card p {
	font-size: .68rem;
	line-height: 1.65;
}

.lh-news-page > div {
	width: min(100% - 40px, 1320px);
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.lh-news-header {
	padding: 1.25rem !important;
	border-color: rgba(151, 158, 220, .26) !important;
}

.lh-news-header > .absolute {
	background: linear-gradient(90deg, rgba(128, 119, 255, .1), rgba(35, 215, 237, .04)) !important;
}

.lh-news-header h1 {
	margin-bottom: .25rem !important;
	font-size: 1.35rem !important;
}

.lh-news-header h1 > div {
	display: none !important;
}

.lh-news-page .glass-card {
	border-radius: 8px !important;
}

.lh-news-page .glass-card:hover {
	transform: translateY(-1px) !important;
}

@media (max-width: 680px) {
	.workspace-page > div,
	.lh-contact-page > div,
	.lh-news-page > div {
		width: min(100% - 28px, 1480px);
	}

	.workspace-page {
		padding-top: 1.8rem !important;
	}

	.lh-auth-page {
		padding: 2rem .85rem;
	}

	.lh-auth-card,
	.lh-contact-form-card,
	.lh-contact-info-card {
		padding: 1.1rem !important;
	}
}

/* Remaining shared surfaces, overlays and utilities */
.app-shell .inner-card,
.app-shell .profile-card,
.app-shell .services-card,
.app-shell .table-card,
.app-shell .users-search-card,
.app-shell .users-section-card,
.app-shell .package-card {
	background: linear-gradient(150deg, rgba(29, 35, 68, .97), rgba(19, 24, 50, .98)) !important;
	border: 1px solid rgba(151, 158, 220, .24) !important;
	border-radius: 8px !important;
	box-shadow: 0 12px 28px rgba(2, 4, 14, .14) !important;
}

.app-shell #notifDropdown,
.app-shell [id$="Dropdown"]:not(select),
.app-shell .swal2-popup,
.app-shell [id$="Modal"] > div:last-child,
.app-shell .modal-content {
	background: linear-gradient(150deg, rgba(31, 37, 72, .99), rgba(18, 23, 47, .995)) !important;
	border-color: rgba(151, 158, 220, .3) !important;
	box-shadow: 0 24px 60px rgba(2, 4, 14, .38) !important;
}

.app-shell .trumbowyg-box,
.app-shell .trumbowyg-editor,
.app-shell .trumbowyg-button-pane {
	background: #171d39 !important;
	border-color: rgba(151, 158, 220, .24) !important;
}

.app-shell .trumbowyg-button-pane button:hover,
.app-shell .trumbowyg-button-pane button.trumbowyg-active {
	background: rgba(35, 215, 237, .09) !important;
}

.app-shell nav[aria-label="Pagination"],
.app-shell .pagination {
	gap: .25rem;
}

.app-shell nav[aria-label="Pagination"] a,
.app-shell nav[aria-label="Pagination"] span,
.app-shell .pagination a,
.app-shell .pagination span {
	border-color: rgba(151, 158, 220, .2) !important;
	border-radius: 5px !important;
	background: rgba(25, 31, 61, .72) !important;
	box-shadow: none !important;
}

.lh-cookie-bar {
	background: linear-gradient(150deg, rgba(31, 37, 72, .985), rgba(18, 23, 47, .99)) !important;
	border-color: rgba(151, 158, 220, .28);
}

.app-shell-public .lh-discord-float {
	border-color: rgba(150, 158, 255, .68);
	border-radius: 50% !important;
	background: linear-gradient(145deg, #6975ff, #4e5de1);
	box-shadow: 0 14px 34px rgba(18, 23, 75, .42), 0 0 0 5px rgba(88, 101, 242, .1);
}

.app-shell-admin .app-topbar {
	background: rgba(11, 14, 31, .94) !important;
	border-bottom-color: rgba(151, 158, 220, .18) !important;
}

.app-shell-admin #mobile-menu {
	background: rgba(15, 19, 39, .985) !important;
}

/* =========================================================
   PUBLIC EXPERIENCE V7
   Compact icon dock, featured games and searchable catalog.
   ========================================================= */
body.app-shell,
body.app-shell-public {
	background:
		linear-gradient(135deg, rgba(77, 91, 190, .1) 0%, transparent 32%),
		linear-gradient(225deg, rgba(25, 183, 211, .055) 0%, transparent 28%),
		linear-gradient(145deg, #12172e 0%, #151b35 48%, #0c1429 100%) !important;
}

body.app-shell::before,
body.app-shell-public::before {
	background:
		linear-gradient(rgba(177, 185, 236, .032) 1px, transparent 1px),
		linear-gradient(90deg, rgba(177, 185, 236, .032) 1px, transparent 1px),
		linear-gradient(135deg, transparent 0 49.85%, rgba(35, 215, 237, .018) 49.85% 50.15%, transparent 50.15%) !important;
	background-size: 64px 64px, 64px 64px, 260px 260px !important;
	opacity: .8;
}

.app-shell-public > .lh-public-header {
	height: 74px !important;
	border-bottom: 1px solid rgba(170, 178, 230, .16) !important;
	background: rgba(14, 18, 38, .9) !important;
	box-shadow: 0 14px 34px rgba(3, 5, 17, .2) !important;
}

.app-shell-public > .lh-public-header::after {
	display: none !important;
	content: none !important;
}

.app-shell-public .lh-header-shell {
	width: min(100% - 40px, 1480px);
	grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
	gap: 1.25rem;
}

.app-shell-public .lh-primary-nav {
	height: auto;
	gap: .25rem !important;
	padding: .28rem;
	border: 1px solid rgba(164, 173, 230, .17);
	border-radius: 9px;
	background: rgba(25, 31, 61, .7);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 8px 24px rgba(2, 4, 14, .12);
}

.app-shell-public .lh-primary-nav-link,
.app-shell-public .lh-primary-nav-link:hover,
.app-shell-public .lh-primary-nav-link.is-active {
	height: 38px;
	gap: .45rem;
	padding: .6rem .72rem !important;
	border: 1px solid transparent !important;
	border-radius: 6px !important;
	font-size: .7rem !important;
	transition: color 150ms ease, border-color 150ms ease, background 150ms ease, transform 150ms ease !important;
}

.app-shell-public .lh-primary-nav-link {
	color: #a1a7c3 !important;
}

.app-shell-public .lh-primary-nav-link i {
	display: inline-flex !important;
	width: 13px;
	align-items: center;
	justify-content: center;
	color: #7f87ac !important;
	font-size: .65rem;
	transition: color 150ms ease;
}

.app-shell-public .lh-primary-nav-link:hover {
	border-color: rgba(164, 173, 230, .13) !important;
	background: rgba(255, 255, 255, .035) !important;
	color: #f1f3ff !important;
	transform: translateY(-1px);
}

.app-shell-public .lh-primary-nav-link:hover i {
	color: var(--lh-cyan) !important;
}

.app-shell-public .lh-primary-nav-link.is-active {
	border-color: rgba(104, 214, 239, .27) !important;
	background: linear-gradient(120deg, rgba(112, 105, 235, .2), rgba(35, 215, 237, .09)) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 5px 15px rgba(4, 7, 24, .16) !important;
	color: #fff !important;
	transform: none;
}

.app-shell-public .lh-primary-nav-link.is-active i {
	color: var(--lh-cyan) !important;
}

.app-shell-public .lh-primary-nav-link::before,
.app-shell-public .lh-primary-nav-link::after,
.app-shell-public .lh-primary-nav-link:hover::before,
.app-shell-public .lh-primary-nav-link.is-active::before {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	content: none !important;
}

.app-shell-public .lh-account-actions > a {
	border-color: rgba(164, 173, 230, .18) !important;
	background: rgba(25, 31, 61, .55) !important;
}

.app-shell-public .lh-account-actions > a.btn-gradient {
	border-color: rgba(103, 218, 241, .34) !important;
	background: linear-gradient(120deg, #6961d8, #277fa3) !important;
	box-shadow: 0 8px 20px rgba(23, 75, 127, .18) !important;
}

.app-shell-public .lh-account-actions > a {
	gap: .42rem;
}

.app-shell-public .lh-account-actions > a i {
	display: inline-flex !important;
	color: #8e97b9 !important;
	font-size: .66rem;
}

.app-shell-public .lh-account-actions > a.btn-gradient i {
	color: #d8f9ff !important;
}

.app-shell-public .lh-menu-button {
	gap: .45rem;
	background: rgba(25, 31, 61, .7);
}

.app-shell-public .lh-menu-button i {
	color: var(--lh-cyan);
	font-size: .72rem;
}

.app-shell-public .lh-mobile-nav-link,
.app-shell-public .lh-mobile-nav-link:hover,
.app-shell-public .lh-mobile-nav-link.is-active {
	justify-content: flex-start;
	gap: .55rem;
	padding: .72rem .85rem !important;
	text-align: left;
}

.app-shell-public .lh-mobile-nav-link i {
	display: inline-flex !important;
	width: 16px;
	align-items: center;
	justify-content: center;
	color: #7f87ac;
	font-size: .7rem;
}

.app-shell-public .lh-mobile-nav-link.is-active i {
	color: var(--lh-cyan);
}

.app-shell-public .lh-home-hero,
.app-shell-public .lh-product-section,
.app-shell-public .lh-store-catalog {
	position: relative;
	isolation: isolate;
}

.app-shell-public .lh-home-hero::before {
	content: "";
	position: absolute;
	inset: 0 50%;
	z-index: -1;
	width: 100vw;
	transform: translateX(-50%);
	border-bottom: 1px solid rgba(168, 176, 229, .13);
	background:
		linear-gradient(rgba(159, 169, 230, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(159, 169, 230, .03) 1px, transparent 1px),
		linear-gradient(120deg, rgba(97, 89, 210, .09), rgba(28, 151, 184, .045) 58%, rgba(17, 22, 45, .16));
	background-size: 44px 44px, 44px 44px, auto;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.app-shell-public .lh-home-hero {
	border-bottom: 0;
}

.app-shell-public .lh-hero-actions a {
	gap: .48rem;
}

.app-shell-public .lh-hero-actions a i {
	font-size: .67rem;
}

.app-shell-public .lh-product-section::before {
	background:
		linear-gradient(90deg, rgba(103, 94, 218, .055), rgba(36, 182, 209, .07) 50%, rgba(103, 94, 218, .04)),
		linear-gradient(rgba(173, 181, 232, .02) 1px, transparent 1px);
	background-size: auto, 100% 42px;
}

.lh-featured-caption {
	max-width: 300px;
	color: #969db9;
	font-size: .68rem;
	line-height: 1.65;
	text-align: right;
}

.lh-featured-games {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.lh-featured-games .lh-product-card {
	border-color: rgba(164, 173, 230, .25) !important;
	background: linear-gradient(150deg, rgba(34, 41, 77, .97), rgba(21, 27, 54, .98)) !important;
}

.lh-featured-games .lh-product-image {
	position: relative;
}

.lh-featured-games .lh-product-image::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 42%;
	background: linear-gradient(to top, rgba(18, 23, 47, .74), transparent);
	pointer-events: none;
}

.app-shell-public .lh-reason-grid article {
	background: linear-gradient(150deg, rgba(31, 38, 72, .9), rgba(20, 26, 53, .96));
}

.app-shell-public .lh-reason-grid article > span {
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(35, 215, 237, .24);
	border-radius: 6px;
	background: rgba(35, 215, 237, .065);
	color: var(--lh-cyan);
	font-size: .72rem;
}

.lh-view-all-games {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1rem;
	padding: .9rem;
	border: 1px solid rgba(164, 173, 230, .22);
	border-radius: 8px;
	background:
		linear-gradient(120deg, rgba(111, 103, 229, .11), rgba(35, 215, 237, .055)),
		rgba(25, 31, 61, .76);
	box-shadow: 0 12px 28px rgba(3, 5, 17, .13);
}

.lh-view-all-games > div,
.lh-view-all-games > a {
	display: flex;
	align-items: center;
}

.lh-view-all-games > div {
	gap: .8rem;
}

.lh-view-all-icon {
	display: inline-flex;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(35, 215, 237, .24);
	border-radius: 6px;
	background: rgba(35, 215, 237, .07);
	color: var(--lh-cyan);
}

.lh-view-all-games p {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	margin: 0;
}

.lh-view-all-games strong {
	color: #f0f2ff;
	font-size: .76rem;
}

.lh-view-all-games small {
	color: #8991ad;
	font-size: .61rem;
}

.lh-view-all-games > a {
	min-height: 42px;
	gap: .7rem;
	padding: .65rem .85rem;
	border: 1px solid rgba(35, 215, 237, .32);
	border-radius: 6px;
	background: linear-gradient(120deg, #6961d8, #277fa3);
	box-shadow: 0 8px 20px rgba(22, 74, 126, .2);
	color: #fff;
	font-size: .68rem;
	font-weight: 750;
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.lh-view-all-games > a:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 11px 25px rgba(22, 74, 126, .28);
}

.lh-game-catalog-tools {
	display: grid;
	grid-template-columns: minmax(280px, .72fr) minmax(0, 1.8fr);
	align-items: start;
	gap: .75rem 1rem;
	margin: 0 0 1.15rem;
	padding: .85rem;
	border: 1px solid rgba(164, 173, 230, .22);
	border-radius: 8px;
	background: linear-gradient(145deg, rgba(32, 39, 74, .94), rgba(22, 28, 56, .96));
	box-shadow: 0 14px 34px rgba(3, 5, 17, .14);
}

.lh-game-catalog-tools[hidden] {
	display: none !important;
}

.lh-game-search {
	position: relative;
	display: flex;
	align-items: center;
}

.lh-game-search > i {
	position: absolute;
	left: .85rem;
	z-index: 1;
	color: var(--lh-cyan);
	font-size: .72rem;
	pointer-events: none;
}

.lh-game-search input {
	width: 100%;
	min-height: 46px;
	padding: .72rem 2.65rem .72rem 2.25rem !important;
	border-color: rgba(164, 173, 230, .25) !important;
	border-radius: 6px !important;
	background: rgba(17, 22, 45, .78) !important;
	font-size: .7rem;
}

.lh-game-search button {
	position: absolute;
	right: .5rem;
	display: inline-flex;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(164, 173, 230, .18);
	border-radius: 5px;
	background: rgba(255, 255, 255, .03);
	color: #a6acc6;
	font-size: .65rem;
}

.lh-game-search button[hidden] {
	display: none !important;
}

.lh-game-filter-row {
	display: flex;
	gap: .38rem;
	padding-bottom: .2rem;
	overflow-x: auto;
	scrollbar-width: thin;
}

.lh-game-filter-row button {
	display: inline-flex;
	min-height: 46px;
	flex: 0 0 auto;
	align-items: center;
	gap: .48rem;
	padding: .45rem .58rem;
	border: 1px solid rgba(164, 173, 230, .16);
	border-radius: 6px;
	background: rgba(18, 23, 48, .56);
	color: #a5abc5;
	font-size: .64rem;
	font-weight: 700;
	transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.lh-game-filter-row button:hover {
	border-color: rgba(35, 215, 237, .24);
	color: #edf0ff;
}

.lh-game-filter-row button.active {
	border-color: rgba(35, 215, 237, .35);
	background: linear-gradient(120deg, rgba(111, 103, 229, .18), rgba(35, 215, 237, .09));
	color: #fff;
}

.lh-game-filter-row button img {
	width: 27px;
	height: 27px;
	border-radius: 4px;
	object-fit: cover;
}

.lh-game-filter-row button > i {
	display: inline-flex;
	width: 27px;
	height: 27px;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background: rgba(128, 119, 255, .1);
	color: var(--lh-cyan);
}

.lh-game-filter-row button small {
	display: inline-flex;
	min-width: 18px;
	height: 18px;
	align-items: center;
	justify-content: center;
	padding: 0 .25rem;
	border-radius: 4px;
	background: rgba(255, 255, 255, .045);
	color: #8f97b4;
	font-family: var(--lh-mono);
	font-size: .48rem;
}

.lh-game-result-meta {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: .7rem;
	border-top: 1px solid rgba(164, 173, 230, .12);
}

.lh-game-result-meta span {
	color: #dfe2f2;
	font-family: var(--lh-mono);
	font-size: .56rem;
}

.lh-game-result-meta small {
	color: #7f87a4;
	font-size: .55rem;
}

.shop-page .lh-store-card[hidden] {
	display: none !important;
}

.lh-store-card-image {
	position: relative;
}

.lh-store-game-label {
	position: absolute;
	right: .65rem;
	bottom: .65rem;
	display: inline-flex;
	padding: .28rem .42rem;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 4px;
	background: rgba(13, 17, 36, .82);
	color: #f0f2ff;
	font-size: .52rem;
	font-weight: 750;
	backdrop-filter: blur(10px);
}

.lh-catalog-empty > i {
	display: inline-flex;
	margin-bottom: .8rem;
	color: var(--lh-cyan);
	font-size: 1rem;
}

.lh-location-flag {
	position: relative;
	display: inline-block;
	width: 38px;
	height: 26px;
	flex: 0 0 38px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 4px;
	box-shadow: 0 5px 14px rgba(0, 0, 0, .2);
	font-size: 0;
}

.lh-flag-ro {
	background: linear-gradient(90deg, #002b7f 0 33.333%, #fcd116 33.333% 66.666%, #ce1126 66.666% 100%);
}

.lh-flag-de {
	background: linear-gradient(180deg, #161616 0 33.333%, #d00 33.333% 66.666%, #ffce00 66.666% 100%);
}

@media (max-width: 1179px) {
	.app-shell-public .lh-header-shell {
		width: min(100% - 32px, 1480px);
		grid-template-columns: minmax(0, 1fr) auto;
		gap: .8rem;
	}

	.app-shell-public .lh-primary-nav {
		display: none !important;
	}

	.app-shell-public .lh-account-actions {
		min-width: max-content;
	}
}

@media (max-width: 1050px) {
	.lh-featured-games {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lh-game-catalog-tools {
		grid-template-columns: 1fr;
	}

	.lh-game-result-meta {
		grid-column: 1;
	}
}

@media (max-width: 700px) {
	.app-shell-public > .lh-public-header {
		height: 64px !important;
	}

	.app-shell-public .lh-header-shell {
		width: calc(100% - 28px);
		grid-template-columns: minmax(0, 1fr) auto;
		gap: .65rem;
	}

	.app-shell-public .lh-brand {
		min-width: 0;
	}

	.app-shell-public .lh-brand img {
		width: min(100%, 168px);
		height: auto !important;
		max-width: 168px;
	}

	.app-shell-public .lh-account-actions {
		width: auto;
		gap: .4rem !important;
	}

	.app-shell-public .lh-menu-button {
		width: 40px;
		min-width: 40px;
		height: 40px;
		min-height: 40px;
		padding: 0;
		border-radius: 7px;
	}

	.app-shell-public .lh-menu-button span {
		display: none;
	}

	.app-shell-public .lh-menu-button i {
		font-size: .8rem;
	}

	.app-shell-public .lh-mobile-menu {
		top: 64px;
		max-height: calc(100vh - 64px);
	}

	.lh-featured-caption {
		display: none;
	}

	.lh-featured-games {
		grid-template-columns: 1fr;
	}

	.lh-view-all-games,
	.lh-game-result-meta {
		align-items: stretch;
		flex-direction: column;
	}

	.lh-view-all-games > a {
		justify-content: center;
	}

	.lh-game-catalog-tools {
		padding: .65rem;
	}

	.lh-game-filter-row button {
		min-height: 42px;
	}
}

/* =========================================================
   PUBLIC EXPERIENCE V8
   Interactive regions, technical depth and richer surfaces.
   ========================================================= */
body.app-shell-public {
	background:
		linear-gradient(112deg, rgba(93, 104, 214, .13) 0%, transparent 30%),
		linear-gradient(248deg, rgba(28, 174, 203, .08) 0%, transparent 25%),
		linear-gradient(180deg, #171d39 0%, #121831 42%, #0d152b 100%) !important;
}

body.app-shell-public::before {
	background:
		linear-gradient(rgba(184, 191, 239, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(184, 191, 239, .045) 1px, transparent 1px),
		repeating-linear-gradient(135deg, transparent 0 86px, rgba(35, 215, 237, .022) 86px 87px, transparent 87px 174px) !important;
	background-size: 64px 64px, 64px 64px, auto !important;
	opacity: .9;
}

body.app-shell-public::after {
	position: fixed;
	inset: 74px 0 0;
	z-index: -1;
	width: auto;
	height: auto;
	background:
		linear-gradient(90deg, transparent 7%, rgba(128, 119, 255, .05) 7% 7.08%, transparent 7.08% 93%, rgba(35, 215, 237, .04) 93% 93.08%, transparent 93.08%),
		repeating-linear-gradient(180deg, transparent 0 119px, rgba(183, 190, 235, .018) 119px 120px) !important;
	opacity: .78;
	pointer-events: none;
}

.app-shell-public main > div:has(.lh-home-hero) {
	position: relative;
}

.app-shell-public main > div:has(.lh-home-hero)::before,
.app-shell-public main > div:has(.lh-home-hero)::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

.app-shell-public main > div:has(.lh-home-hero)::before {
	top: 24px;
	right: -22px;
	width: 180px;
	height: 72px;
	border-top: 1px solid rgba(35, 215, 237, .18);
	border-right: 1px solid rgba(35, 215, 237, .18);
	background:
		linear-gradient(90deg, transparent 0 18px, rgba(35, 215, 237, .16) 18px 20px, transparent 20px 62px, rgba(128, 119, 255, .2) 62px 64px, transparent 64px);
	opacity: .7;
}

.app-shell-public main > div:has(.lh-home-hero)::after {
	top: 118px;
	left: -24px;
	width: 74px;
	height: 210px;
	border-bottom: 1px solid rgba(128, 119, 255, .2);
	border-left: 1px solid rgba(128, 119, 255, .2);
	background: repeating-linear-gradient(180deg, transparent 0 26px, rgba(128, 119, 255, .16) 26px 27px);
	opacity: .55;
}

.app-shell-public .lh-home-hero::before {
	background:
		linear-gradient(rgba(174, 182, 234, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(174, 182, 234, .04) 1px, transparent 1px),
		repeating-linear-gradient(135deg, transparent 0 132px, rgba(35, 215, 237, .03) 132px 133px, transparent 133px 264px),
		linear-gradient(120deg, rgba(100, 91, 217, .13), rgba(29, 157, 188, .07) 58%, rgba(17, 22, 45, .12));
	background-size: 44px 44px, 44px 44px, auto, auto;
}

.app-shell-public .lh-home-hero::after {
	content: "";
	position: absolute;
	inset: auto 50% 0;
	z-index: -1;
	width: 100vw;
	height: 72px;
	transform: translateX(-50%);
	background:
		linear-gradient(90deg, transparent, rgba(35, 215, 237, .1) 24%, rgba(128, 119, 255, .12) 50%, rgba(35, 215, 237, .08) 76%, transparent),
		repeating-linear-gradient(90deg, transparent 0 42px, rgba(175, 183, 235, .035) 42px 43px);
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000);
	mask-image: linear-gradient(to bottom, transparent, #000);
	pointer-events: none;
}

.app-shell-public .lh-hero-proof {
	position: relative;
	overflow: hidden;
	border-top: 1px solid rgba(164, 173, 230, .16);
	border-bottom: 1px solid rgba(164, 173, 230, .12);
	background: rgba(26, 32, 62, .28);
}

.app-shell-public .lh-hero-proof::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 2px;
	background: var(--lh-cyan);
	box-shadow: 0 0 16px rgba(35, 215, 237, .45);
}

.app-shell-public .lh-infrastructure-panel {
	overflow: hidden;
	border-color: rgba(133, 203, 234, .34);
	background:
		linear-gradient(rgba(174, 183, 235, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(174, 183, 235, .045) 1px, transparent 1px),
		linear-gradient(145deg, rgba(34, 42, 82, .98), rgba(19, 26, 55, .99));
	background-size: 28px 28px, 28px 28px, auto;
	box-shadow: 0 26px 64px rgba(3, 7, 25, .3), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.app-shell-public .lh-infrastructure-panel::before {
	height: 2px;
	background: linear-gradient(90deg, var(--lh-purple), var(--lh-cyan) 54%, rgba(255, 89, 119, .7));
	opacity: .9;
}

.app-shell-public .lh-infrastructure-panel::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 126px;
	height: 126px;
	border-left: 1px solid rgba(35, 215, 237, .12);
	background:
		repeating-linear-gradient(135deg, transparent 0 9px, rgba(35, 215, 237, .04) 9px 10px),
		linear-gradient(225deg, rgba(35, 215, 237, .08), transparent 68%);
	clip-path: polygon(25% 0, 100% 0, 100% 75%);
	pointer-events: none;
}

.lh-region-selector-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: .85rem 0 .25rem;
	color: #d9ddec;
	font-family: var(--lh-mono);
	font-size: .52rem;
	font-weight: 700;
	text-transform: uppercase;
}

.lh-region-selector-label small {
	color: #79829f;
	font-family: inherit;
	font-size: .47rem;
	font-weight: 500;
	text-transform: none;
}

.app-shell-public .lh-location-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .55rem;
}

.app-shell-public .lh-location-row {
	position: relative;
	display: grid;
	width: 100%;
	min-width: 0;
	grid-template-columns: 38px minmax(0, 1fr) auto 10px;
	align-items: center;
	gap: .65rem;
	padding: .8rem;
	overflow: hidden;
	border: 1px solid rgba(164, 173, 230, .16);
	border-radius: 7px;
	background: rgba(16, 22, 48, .62);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.app-shell-public .lh-location-row::before {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 2px;
	background: linear-gradient(90deg, var(--lh-purple), var(--lh-cyan));
	transform: scaleX(0);
	transform-origin: left;
	opacity: 0;
	transition: transform 180ms ease, opacity 180ms ease;
}

.app-shell-public .lh-location-row:hover {
	border-color: rgba(35, 215, 237, .27);
	background: rgba(29, 38, 75, .76);
	transform: translateY(-1px);
}

.app-shell-public .lh-location-row:focus-visible {
	outline: 2px solid rgba(35, 215, 237, .62);
	outline-offset: 3px;
}

.app-shell-public .lh-location-row.is-active {
	border-color: rgba(35, 215, 237, .42);
	background: linear-gradient(125deg, rgba(112, 104, 231, .17), rgba(35, 215, 237, .085));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 10px 22px rgba(3, 8, 25, .18);
}

.app-shell-public .lh-location-row.is-active::before {
	transform: scaleX(1);
	opacity: .85;
}

.app-shell-public .lh-location-copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: .18rem;
}

.app-shell-public .lh-location-row strong,
.app-shell-public .lh-location-row code {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-shell-public .lh-location-row > i {
	color: #66708e;
	font-size: .52rem;
	transition: color 160ms ease, transform 160ms ease;
}

.app-shell-public .lh-location-row.is-active > i {
	color: var(--lh-cyan);
	transform: translateX(2px);
}

.app-shell-public .lh-location-row .lh-node-load {
	min-width: 46px;
	padding: .28rem .36rem;
	border: 1px solid rgba(35, 215, 237, .16);
	border-radius: 4px;
	background: rgba(35, 215, 237, .055);
	color: #62e6c1;
	text-align: center;
}

.app-shell-public .lh-platform-line {
	display: grid;
	grid-template-columns: minmax(180px, .75fr) minmax(0, 1.25fr);
	align-items: stretch;
	gap: .75rem;
	margin-top: .75rem;
	padding: .75rem;
	border: 1px solid rgba(164, 173, 230, .16);
	border-radius: 7px;
	background: rgba(15, 21, 46, .72);
}

.lh-platform-title {
	display: flex;
	min-width: 0;
	justify-content: center;
	flex-direction: column;
	padding: .25rem .75rem .25rem .25rem;
	border-right: 1px solid rgba(164, 173, 230, .13);
}

.lh-platform-title > span {
	color: #7f89a9;
	font-family: var(--lh-mono);
	font-size: .48rem;
	font-weight: 700;
	text-transform: uppercase;
}

.lh-platform-title strong {
	margin: .32rem 0 .15rem;
	color: #f5f7ff;
	font-size: .82rem;
	line-height: 1.3;
}

.lh-platform-title small {
	color: #8390ad;
	font-family: var(--lh-mono);
	font-size: .49rem;
}

.lh-platform-specs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .4rem;
}

.lh-platform-specs > span {
	display: flex;
	min-width: 0;
	justify-content: center;
	flex-direction: column;
	gap: .2rem;
	padding: .55rem;
	border: 1px solid rgba(164, 173, 230, .1);
	border-radius: 5px;
	background: rgba(128, 119, 255, .035);
}

.lh-platform-specs i {
	margin-bottom: .12rem;
	color: var(--lh-cyan);
	font-size: .6rem;
}

.lh-platform-specs small {
	color: #7883a2;
	font-family: var(--lh-mono);
	font-size: .43rem;
	text-transform: uppercase;
}

.lh-platform-specs strong {
	overflow: hidden;
	color: #dfe4f6;
	font-size: .55rem;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-shell-public .lh-infrastructure-panel[data-active-region="germany"] .lh-platform-specs i,
.app-shell-public .lh-infrastructure-panel[data-active-region="germany"] .lh-location-row.is-active > i {
	color: #ffcf4a;
}

.app-shell-public .lh-infrastructure-panel[data-active-region="germany"] .lh-location-row.is-active {
	border-color: rgba(255, 207, 74, .32);
	background: linear-gradient(125deg, rgba(112, 104, 231, .14), rgba(255, 207, 74, .055));
}

.app-shell-public .lh-product-section,
.app-shell-public .lh-reasons,
.app-shell-public .lh-testimonials,
.app-shell-public .lh-partners {
	position: relative;
}

.app-shell-public .lh-product-section::after,
.app-shell-public .lh-reasons::after,
.app-shell-public .lh-testimonials::after,
.app-shell-public .lh-partners::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 54px;
	height: 1px;
	background: linear-gradient(90deg, var(--lh-cyan), transparent);
	box-shadow: 0 0 12px rgba(35, 215, 237, .2);
}

.lh-featured-games .lh-product-card {
	position: relative;
	overflow: hidden;
	transition: border-color 170ms ease, transform 170ms ease, box-shadow 170ms ease !important;
}

.lh-featured-games .lh-product-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: 74px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--lh-cyan));
	opacity: .55;
	transition: width 180ms ease, opacity 180ms ease;
}

.lh-featured-games .lh-product-card:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 22px 46px rgba(3, 7, 24, .25) !important;
}

.lh-featured-games .lh-product-card:hover::before {
	width: 100%;
	opacity: .9;
}

.lh-featured-games .lh-product-image img {
	transition: transform 300ms ease, filter 300ms ease !important;
}

.lh-featured-games .lh-product-card:hover .lh-product-image img {
	transform: scale(1.025);
	filter: saturate(1.06) brightness(1.05);
}

.app-shell-public .lh-reason-grid article,
.app-shell-public .lh-quote-grid blockquote,
.app-shell-public .lh-partner-list a {
	position: relative;
	overflow: hidden;
}

.app-shell-public .lh-reason-grid article::after,
.app-shell-public .lh-quote-grid blockquote::after,
.app-shell-public .lh-partner-list a::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(35, 215, 237, .3), transparent);
	transform: scaleX(.2);
	opacity: .35;
	transition: transform 180ms ease, opacity 180ms ease;
}

.app-shell-public .lh-reason-grid article:hover::after,
.app-shell-public .lh-quote-grid blockquote:hover::after,
.app-shell-public .lh-partner-list a:hover::after {
	transform: scaleX(1);
	opacity: .8;
}

.app-shell-public .lh-reason-grid article:hover > span {
	border-color: rgba(35, 215, 237, .42);
	background: rgba(35, 215, 237, .11);
	transform: translateY(-1px);
}

.app-shell-public .lh-footer {
	border-top-color: rgba(118, 202, 234, .2) !important;
	background:
		linear-gradient(rgba(174, 182, 234, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(174, 182, 234, .03) 1px, transparent 1px),
		repeating-linear-gradient(135deg, transparent 0 110px, rgba(35, 215, 237, .02) 110px 111px),
		linear-gradient(180deg, rgba(17, 23, 47, .99), #090d1d) !important;
	background-size: 56px 56px, 56px 56px, auto, auto !important;
}

.app-shell-public .lh-store-facts span {
	gap: .38rem;
}

.app-shell-public .lh-store-facts i {
	color: var(--lh-cyan);
	font-size: .62rem;
}

@media (max-width: 820px) {
	.app-shell-public .lh-location-list,
	.app-shell-public .lh-platform-line {
		grid-template-columns: 1fr;
	}

	.lh-platform-title {
		padding: .25rem .25rem .7rem;
		border-right: 0;
		border-bottom: 1px solid rgba(164, 173, 230, .13);
	}
}

@media (max-width: 700px) {
	body.app-shell-public::after,
	.app-shell-public main > div:has(.lh-home-hero)::before,
	.app-shell-public main > div:has(.lh-home-hero)::after {
		display: none;
	}

	.lh-region-selector-label {
		align-items: flex-start;
		flex-direction: column;
		gap: .22rem;
	}

	.app-shell-public .lh-location-row {
		grid-template-columns: 38px minmax(0, 1fr) auto 8px;
		padding: .72rem;
	}

	.app-shell-public .lh-platform-line {
		padding: .65rem;
	}

	.lh-platform-specs {
		grid-template-columns: 1fr;
	}

	.lh-platform-specs > span {
		display: grid;
		grid-template-columns: 16px 58px minmax(0, 1fr);
		align-items: center;
		gap: .35rem;
	}

	.lh-platform-specs i {
		margin: 0;
	}

	.lh-platform-specs strong {
		text-align: right;
	}
}

@media (prefers-reduced-motion: reduce) {
	.app-shell-public .lh-location-row,
	.app-shell-public .lh-location-row::before,
	.lh-featured-games .lh-product-card,
	.lh-featured-games .lh-product-card::before,
	.lh-featured-games .lh-product-image img {
		transition: none !important;
	}
}

/* =========================================================
   PUBLIC EXPERIENCE V9
   One visual language for home, catalog and configuration.
   ========================================================= */
body.app-shell-public {
	background:
		linear-gradient(118deg, rgba(92, 105, 207, .09), transparent 34%),
		linear-gradient(242deg, rgba(31, 170, 196, .055), transparent 28%),
		#111831 !important;
}

body.app-shell-public::before {
	background:
		linear-gradient(rgba(177, 186, 235, .026) 1px, transparent 1px),
		linear-gradient(90deg, rgba(177, 186, 235, .026) 1px, transparent 1px) !important;
	background-size: 56px 56px !important;
	opacity: .62;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 70%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 70%, transparent 100%);
}

body.app-shell-public::after,
.app-shell-public main > div:has(.lh-home-hero)::before,
.app-shell-public main > div:has(.lh-home-hero)::after,
.app-shell-public .lh-home-hero::after,
.app-shell-public .lh-product-section::before,
.app-shell-public .lh-testimonials::before,
.app-shell-public .lh-product-section::after,
.app-shell-public .lh-reasons::after,
.app-shell-public .lh-testimonials::after,
.app-shell-public .lh-partners::after {
	display: none !important;
	content: none !important;
}

.app-shell-public .lh-home-hero::before {
	background:
		linear-gradient(rgba(177, 186, 235, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(177, 186, 235, .03) 1px, transparent 1px),
		linear-gradient(120deg, rgba(106, 97, 220, .07), rgba(35, 215, 237, .025), transparent 68%);
	background-size: 56px 56px, 56px 56px, auto;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}

.app-shell-public .lh-infrastructure-panel {
	border-color: rgba(164, 173, 230, .16);
	background: linear-gradient(145deg, rgba(27, 35, 69, .82), rgba(18, 25, 52, .9));
	box-shadow: 0 14px 34px rgba(4, 8, 25, .13);
}

.app-shell-public .lh-infrastructure-panel::after {
	display: none;
	content: none;
}

.app-shell-public .lh-location-row {
	background: rgba(18, 25, 53, .58);
}

.app-shell-public .lh-platform-line {
	border-color: rgba(164, 173, 230, .12);
	background: rgba(18, 25, 53, .58);
}

.app-shell-public .lh-platform-specs > span {
	border: 0;
	background: rgba(255, 255, 255, .018);
}

.app-shell-public .lh-product-section,
.app-shell-public .lh-reasons,
.app-shell-public .lh-testimonials,
.app-shell-public .lh-partners {
	padding: clamp(3.6rem, 5vw, 5.4rem) 0;
	border-bottom: 0 !important;
}

.app-shell-public .lh-product-section + .lh-reasons,
.app-shell-public .lh-reasons + .lh-testimonials,
.app-shell-public .lh-testimonials + .lh-partners {
	border-top: 0;
}

.app-shell-public .lh-section-heading {
	margin-bottom: 1.6rem;
}

.app-shell-public .lh-section-heading h2,
.app-shell-public .lh-partners h2 {
	font-size: clamp(1.7rem, 2.75vw, 2.7rem);
	line-height: 1.08;
}

/* Home metrics and testimonial cards */
.app-shell-public .lh-hero-proof {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .55rem;
	margin-top: 2rem;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
}

.app-shell-public .lh-hero-proof::before {
	display: none;
	content: none;
}

.app-shell-public .lh-hero-proof > div {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: .62rem;
	padding: .7rem;
	border: 1px solid rgba(164, 173, 230, .14);
	border-radius: 7px;
	background: rgba(25, 33, 66, .58);
}

.app-shell-public .lh-hero-proof i {
	display: inline-flex;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(35, 215, 237, .16);
	border-radius: 5px;
	background: rgba(35, 215, 237, .055);
	color: var(--lh-cyan);
	font-size: .58rem;
}

.app-shell-public .lh-hero-proof p {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: .14rem;
	margin: 0;
}

.app-shell-public .lh-hero-proof strong {
	color: #f0f3ff;
	font-family: var(--lh-mono);
	font-size: .72rem;
	white-space: nowrap;
}

.app-shell-public .lh-hero-proof span {
	overflow: hidden;
	color: #7f89a7;
	font-size: .52rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-shell-public .lh-reason-grid,
.app-shell-public .lh-quote-grid {
	gap: .75rem;
	border: 0;
	background: transparent;
}

.app-shell-public .lh-reason-grid article,
.app-shell-public .lh-quote-grid blockquote {
	border: 1px solid rgba(164, 173, 230, .15);
	border-radius: 8px;
	background: linear-gradient(145deg, rgba(27, 35, 69, .8), rgba(18, 25, 52, .88)) !important;
	box-shadow: 0 12px 30px rgba(4, 8, 25, .11);
}

.app-shell-public .lh-reason-grid article {
	padding: 1.25rem;
}

.app-shell-public .lh-reason-grid h3 {
	margin: 1.1rem 0 .55rem;
}

.app-shell-public .lh-quote-grid blockquote {
	min-height: 190px;
	padding: 1.3rem;
}

.app-shell-public .lh-quote-grid blockquote > i {
	display: inline-flex;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(35, 215, 237, .16);
	border-radius: 5px;
	background: rgba(35, 215, 237, .045);
	color: var(--lh-cyan);
	font-size: .58rem;
}

.app-shell-public .lh-quote-grid p {
	margin: .8rem 0 0;
	font-size: .75rem;
	line-height: 1.7;
}

.app-shell-public .lh-quote-grid footer {
	margin-top: 1rem;
	padding-top: .8rem;
	border-top: 1px solid rgba(164, 173, 230, .1) !important;
}

/* Store catalog header and navigation */
.app-shell-public .lh-store-catalog {
	padding: clamp(2.5rem, 4vw, 4rem) 0 clamp(4rem, 6vw, 6rem);
}

.app-shell-public .lh-store-heading {
	grid-template-columns: minmax(0, 1fr) minmax(400px, .9fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	margin-bottom: 1.4rem;
	padding: 0;
	border: 0;
}

.app-shell-public .shop-page .lh-store-heading h2 {
	max-width: 620px;
	font-size: clamp(1.9rem, 2.8vw, 2.8rem);
	line-height: 1.04;
}

.app-shell-public .lh-store-heading > div:first-child > p:last-child {
	max-width: 630px;
	margin-top: .8rem;
	font-size: .72rem;
	line-height: 1.7;
}

.lh-store-regions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .65rem;
}

.lh-store-region {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: .7rem;
	padding: .8rem;
	border: 1px solid rgba(164, 173, 230, .15);
	border-radius: 7px;
	background: rgba(25, 33, 66, .62);
}

.lh-store-region p {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: .18rem;
	margin: 0;
}

.lh-store-region small {
	color: #7f89a8;
	font-family: var(--lh-mono);
	font-size: .46rem;
	text-transform: uppercase;
}

.lh-store-region strong,
.lh-store-region code {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lh-store-region strong {
	color: #e8ebf8;
	font-size: .62rem;
}

.lh-store-region code {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: #75809d !important;
	font-size: .47rem;
}

.lh-store-nav-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 1rem;
	margin: 1.6rem 0 1rem;
	padding-top: 1.15rem;
	border-top: 1px solid rgba(164, 173, 230, .1);
}

.lh-store-nav-shell > div,
.lh-store-external-links {
	display: flex;
	flex-direction: column;
	gap: .48rem;
}

.lh-store-nav-label {
	color: #737e9b;
	font-family: var(--lh-mono);
	font-size: .46rem;
	font-weight: 700;
	text-transform: uppercase;
}

.app-shell-public .lh-store-nav-shell .lh-category-bar {
	width: max-content;
	margin: 0;
	padding: .25rem;
	border-color: rgba(164, 173, 230, .14);
	background: rgba(19, 26, 54, .62);
}

.app-shell-public .lh-store-nav-shell .lh-category-bar button {
	min-height: 38px;
	gap: .48rem;
	padding: .52rem .68rem !important;
	border-radius: 5px !important;
}

.app-shell-public .lh-store-nav-shell .lh-category-bar button > span {
	display: inline;
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: .64rem;
}

.app-shell-public .lh-store-nav-shell .lh-category-bar button > small {
	display: inline-flex;
	min-width: 18px;
	height: 18px;
	align-items: center;
	justify-content: center;
	padding: 0 .25rem;
	border: 1px solid rgba(164, 173, 230, .12);
	border-radius: 3px;
	background: rgba(255, 255, 255, .025);
	color: #8791ad;
	font-family: var(--lh-mono);
	font-size: .48rem;
}

.lh-store-external-links {
	align-items: flex-end;
}

.lh-store-external-links > div {
	display: flex;
	gap: .45rem;
}

.lh-store-external-links a {
	display: inline-flex;
	min-height: 38px;
	align-items: center;
	gap: .45rem;
	padding: .52rem .65rem;
	border: 1px solid rgba(164, 173, 230, .13);
	border-radius: 5px;
	background: rgba(19, 26, 54, .5);
	color: #929bb7;
	font-size: .58rem;
	font-weight: 700;
}

.lh-store-external-links a:hover {
	border-color: rgba(35, 215, 237, .23);
	color: #eef1fc;
}

.lh-store-external-links a i:first-child {
	color: #7d88a8;
}

.lh-store-external-links a i:last-child {
	color: #626d8c;
	font-size: .43rem;
}

.app-shell-public .lh-game-catalog-tools {
	margin-bottom: 1rem;
	border-color: rgba(164, 173, 230, .14);
	background: rgba(23, 31, 62, .65);
	box-shadow: none;
}

/* Product configuration */
.app-shell-public .lh-store-config {
	padding: clamp(2rem, 3.5vw, 3.5rem) 0 clamp(4rem, 6vw, 6rem);
}

.app-shell-public .lh-config-shell {
	width: min(100% - 40px, 1260px);
}

.app-shell-public .lh-config-heading {
	grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
	align-items: stretch;
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding: 0;
	border: 0;
}

.lh-config-intro {
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: .3rem 1.2rem .3rem 0;
}

.lh-config-title {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
}

.lh-config-title > span,
.lh-config-section-title > span,
.lh-checkout-heading > span {
	display: inline-flex;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(35, 215, 237, .18);
	border-radius: 6px;
	background: rgba(35, 215, 237, .055);
	color: var(--lh-cyan);
	font-size: .68rem;
}

.lh-config-title > .lh-config-game-thumb {
	width: 64px;
	height: 64px;
	flex-basis: 64px;
	padding: 0;
	overflow: hidden;
	border-color: rgba(164, 173, 230, .18);
	background: #11182f;
}

.lh-config-game-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.9) brightness(.92);
}

.app-shell-public .lh-config-title h2 {
	margin: 0 0 .45rem !important;
	font-size: clamp(1.8rem, 3vw, 2.65rem) !important;
	line-height: 1.04;
}

.lh-config-title p {
	max-width: 470px;
	margin: 0;
	color: #8f99b5;
	font-size: .67rem;
	line-height: 1.65;
}

.lh-config-steps {
	display: flex;
	gap: .35rem;
	margin-top: 1.2rem;
}

.lh-config-steps span {
	display: inline-flex;
	align-items: center;
	gap: .38rem;
	color: #6e7896;
	font-family: var(--lh-mono);
	font-size: .47rem;
	font-weight: 700;
	text-transform: uppercase;
}

.lh-config-steps span + span::before {
	content: "";
	width: 20px;
	height: 1px;
	margin-right: .1rem;
	background: rgba(164, 173, 230, .16);
}

.lh-config-steps i {
	display: inline-flex;
	width: 18px;
	height: 18px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(164, 173, 230, .16);
	border-radius: 50%;
	font-style: normal;
	font-size: .43rem;
}

.lh-config-steps .is-active {
	color: #dce2f2;
}

.lh-config-steps .is-active i {
	border-color: rgba(35, 215, 237, .35);
	background: rgba(35, 215, 237, .08);
	color: var(--lh-cyan);
}

.app-shell-public .lh-included-card {
	grid-column: 2;
	grid-row: auto;
	border-color: rgba(164, 173, 230, .15) !important;
	background: rgba(24, 32, 64, .68) !important;
	box-shadow: none !important;
}

.app-shell-public .lh-store-config .config-feature-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .68rem .85rem;
	background: rgba(128, 119, 255, .045) !important;
}

.app-shell-public .lh-store-config .config-feature-header h6 {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: 0;
}

.app-shell-public .lh-store-config .config-feature-header h6 i {
	color: var(--lh-cyan);
	font-size: .55rem;
}

.app-shell-public .lh-store-config .config-feature-header > span {
	color: #73809d;
	font-family: var(--lh-mono);
	font-size: .45rem;
}

.app-shell-public .lh-included-grid {
	padding: .45rem .85rem .6rem;
}

.app-shell-public .lh-included-feature {
	padding-top: .42rem;
	padding-bottom: .42rem;
	font-size: .58rem;
}

.app-shell-public .lh-store-config #serverConfigForm {
	grid-template-columns: minmax(0, 1fr) 350px;
	gap: 1rem;
}

.lh-config-builder {
	min-width: 0;
}

.lh-config-section-title,
.lh-checkout-heading {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin-bottom: .75rem;
}

.lh-config-section-title > div,
.lh-checkout-heading > div {
	display: flex;
	flex-direction: column;
	gap: .14rem;
}

.lh-config-section-title strong,
.lh-checkout-heading strong {
	color: #edf0fb;
	font-size: .7rem;
}

.lh-config-section-title small,
.lh-checkout-heading small {
	color: #78839f;
	font-size: .52rem;
}

.lh-config-section-title > span,
.lh-checkout-heading > span {
	width: 32px;
	height: 32px;
	flex-basis: 32px;
	font-size: .58rem;
}

.app-shell-public .lh-config-options {
	gap: .7rem;
}

.lh-config-option-group {
	min-width: 0;
}

.app-shell-public .lh-store-config #configOptionsContainer .glass-card {
	padding: .85rem !important;
	border-color: rgba(164, 173, 230, .14) !important;
	background: rgba(24, 32, 64, .66) !important;
	box-shadow: none !important;
}

.lh-option-card-heading {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin-bottom: .55rem;
}

.lh-option-card-heading > span {
	display: inline-flex;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(35, 215, 237, .14);
	border-radius: 5px;
	background: rgba(35, 215, 237, .045);
	color: var(--lh-cyan);
	font-size: .55rem;
}

.lh-option-card-heading > div {
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.lh-option-card-heading small {
	color: #6c7795;
	font-family: var(--lh-mono);
	font-size: .42rem;
	text-transform: uppercase;
}

.app-shell-public .lh-store-config #configOptionsContainer .lh-option-card-heading h6 {
	margin: 0 !important;
	font-size: .66rem;
	text-transform: none;
}

.app-shell-public .lh-store-config #configOptionsContainer .glass-card > p {
	margin: 0 0 .65rem 2.85rem !important;
	color: #7e89a6 !important;
	font-size: .53rem !important;
}

.app-shell-public .lh-store-config #configOptionsContainer input,
.app-shell-public .lh-store-config #configOptionsContainer select {
	min-height: 40px;
	padding: .58rem .68rem !important;
	border-radius: 5px !important;
	background: rgba(14, 21, 47, .78) !important;
	font-size: .66rem;
}

.app-shell-public .lh-store-config #configOptionsContainer small {
	font-size: .5rem;
}

.app-shell-public .location-availability-status {
	display: flex;
	align-items: flex-start;
	gap: .4rem;
	margin-top: .5rem !important;
	padding: .5rem .55rem;
	border: 1px solid rgba(164, 173, 230, .12);
	border-radius: 5px;
	background: rgba(17, 24, 50, .7);
	font-size: .5rem !important;
	line-height: 1.5;
}

.app-shell-public .location-availability-status::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: 0 0 6px;
	margin-top: .22rem;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 9px currentColor;
}

.app-shell-public .lh-config-checkout {
	top: 88px;
}

.app-shell-public .lh-checkout-card {
	padding: .9rem !important;
	border-color: rgba(164, 173, 230, .16) !important;
	background: rgba(20, 28, 58, .88) !important;
	box-shadow: 0 14px 34px rgba(3, 7, 23, .13) !important;
}

.app-shell-public .lh-checkout-heading {
	margin: 0 0 .85rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid rgba(164, 173, 230, .11);
}

.app-shell-public .lh-checkout-card > .mb-4 {
	margin-bottom: .75rem !important;
}

.app-shell-public .lh-checkout-card label {
	margin-bottom: .38rem !important;
	color: #9da7c1 !important;
	font-size: .57rem !important;
}

.app-shell-public .lh-checkout-card input,
.app-shell-public .lh-checkout-card select,
.app-shell-public .lh-checkout-card button {
	min-height: 40px;
	border-radius: 5px !important;
	font-size: .64rem;
}

.app-shell-public .lh-store-config .payment-choice {
	padding: .58rem !important;
	border-color: rgba(164, 173, 230, .13) !important;
	background: rgba(15, 22, 48, .68) !important;
}

.app-shell-public .lh-store-config .payment-choice:has(input:checked) {
	border-color: rgba(35, 215, 237, .32) !important;
	background: rgba(35, 215, 237, .045) !important;
}

.app-shell-public .lh-store-config .order-summary-total {
	margin-top: .75rem;
	padding: .8rem !important;
	border-color: rgba(35, 215, 237, .2) !important;
	background: rgba(35, 215, 237, .045) !important;
	box-shadow: none !important;
}

.app-shell-public .lh-store-config .order-summary-total h5 {
	font-size: 1.08rem !important;
}

.app-shell-public .lh-checkout-actions {
	grid-template-columns: 84px minmax(0, 1fr);
}

.app-shell-public .lh-checkout-actions > a,
.app-shell-public .lh-checkout-actions > button {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}

.app-shell-public .lh-checkout-actions > button:disabled {
	border-color: rgba(164, 173, 230, .12) !important;
	background: rgba(31, 39, 73, .7) !important;
	box-shadow: none !important;
	color: #717b99 !important;
	cursor: not-allowed;
}

@media (max-width: 1050px) {
	.app-shell-public .lh-store-heading,
	.app-shell-public .lh-config-heading {
		grid-template-columns: 1fr;
	}

	.app-shell-public .lh-included-card {
		grid-column: 1;
	}

	.app-shell-public .lh-store-config #serverConfigForm {
		grid-template-columns: 1fr;
	}

	.app-shell-public .lh-config-checkout {
		position: static;
	}
}

@media (max-width: 760px) {
	.app-shell-public .lh-hero-proof,
	.lh-store-regions,
	.app-shell-public .lh-config-options {
		grid-template-columns: 1fr;
	}

	.app-shell-public .lh-store-nav-shell {
		grid-template-columns: 1fr;
	}

	.lh-store-external-links {
		align-items: flex-start;
	}

	.lh-store-external-links > div {
		flex-wrap: wrap;
	}

	.app-shell-public .lh-config-shell {
		width: min(100% - 28px, 1260px);
	}

	.lh-config-intro {
		padding-right: 0;
	}

	.lh-config-steps span + span::before {
		width: 8px;
	}

	.app-shell-public .lh-included-grid {
		grid-template-columns: 1fr;
	}

	.app-shell-public .lh-included-feature:nth-child(odd),
	.app-shell-public .lh-included-feature:nth-child(even) {
		padding-right: 0;
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 520px) {
	.app-shell-public .lh-store-nav-shell .lh-category-bar {
		display: grid;
		width: 100%;
		grid-template-columns: 1fr 1fr;
	}

	.app-shell-public .lh-store-nav-shell .lh-category-bar button {
		width: 100%;
	}

	.lh-config-title {
		flex-direction: column;
	}

	.lh-config-steps {
		justify-content: space-between;
	}

	.lh-config-steps span + span::before {
		display: none;
	}
}

/* =========================================================
   PUBLIC EXPERIENCE V10
   Consistent scale, icon language and hardware presentation.
   ========================================================= */
.app-shell-public .lh-hero-proof > div {
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	text-align: left !important;
}

.app-shell-public .lh-hero-proof i,
.app-shell-public .lh-reason-grid article > span,
.app-shell-public .lh-config-section-title > span,
.app-shell-public .lh-checkout-heading > span,
.app-shell-public .lh-option-card-heading > span,
.app-shell-public .lh-quote-grid blockquote > i {
	border-color: rgba(35, 215, 237, .22) !important;
	background: rgba(35, 215, 237, .075) !important;
	color: var(--lh-cyan) !important;
	box-shadow: inset 0 0 0 1px rgba(35, 215, 237, .025);
}

.app-shell-public .lh-reason-grid article {
	display: grid !important;
	grid-template-columns: 38px minmax(0, 1fr);
	align-items: start;
	gap: .85rem;
	padding: 1.1rem !important;
}

.app-shell-public .lh-reason-grid article > span {
	display: inline-flex;
	width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	border: 1px solid;
	border-radius: 6px;
	font-size: .72rem;
}

.app-shell-public .lh-reason-grid article > div {
	min-width: 0;
}

.app-shell-public .lh-reason-grid h3 {
	margin: .05rem 0 .38rem !important;
	font-size: .88rem;
}

.app-shell-public .lh-reason-grid p {
	margin: 0 !important;
	font-size: .7rem;
	line-height: 1.65;
}

.app-shell-public .lh-featured-games .lh-product-card,
.app-shell-public .lh-featured-games .lh-product-image {
	overflow: hidden;
}

.app-shell-public .lh-featured-games .lh-product-card:hover {
	transform: translateY(-1px) !important;
}

.app-shell-public .lh-featured-games .lh-product-card:hover .lh-product-image img {
	transform: none !important;
}

.app-shell-public .lh-featured-games .lh-product-image img {
	transform: none !important;
	transition: filter .22s ease, opacity .22s ease !important;
}

.app-shell-public .lh-featured-games .lh-product-card:hover .lh-product-image img {
	filter: saturate(1.02) brightness(.98);
}

.app-shell-public .lh-featured-games .lh-product-bottom > a {
	display: inline-flex;
	min-height: 34px;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .48rem .68rem;
	border: 1px solid rgba(35, 215, 237, .25);
	border-radius: 5px;
	background: rgba(35, 215, 237, .08);
	color: #dffcff;
	font-size: .62rem;
	font-weight: 800;
	line-height: 1;
}

.app-shell-public .lh-featured-games .lh-product-bottom > a i {
	color: var(--lh-cyan);
	font-size: .52rem;
	transition: transform .18s ease;
}

.app-shell-public .lh-featured-games .lh-product-bottom > a:hover {
	border-color: rgba(35, 215, 237, .48);
	background: rgba(35, 215, 237, .14);
	color: #fff;
}

.app-shell-public .lh-featured-games .lh-product-bottom > a:hover i {
	transform: translateX(2px);
}

.lh-store-region {
	align-items: flex-start;
	padding: .9rem;
}

.lh-store-region em {
	overflow: hidden;
	color: #9ca6c1;
	font-size: .52rem;
	font-style: normal;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lh-store-region code {
	margin-top: .08rem;
	color: var(--lh-cyan) !important;
}

.app-shell-public .lh-store-config {
	padding-top: clamp(2.4rem, 4vw, 4rem);
}

.app-shell-public .lh-config-shell {
	width: min(100% - 44px, 1380px);
}

.app-shell-public .lh-config-heading {
	grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
	gap: 1.35rem;
	margin-bottom: 1.65rem;
}

.lh-config-intro {
	padding-right: 1.5rem;
}

.lh-config-title {
	gap: 1rem;
}

.lh-config-title > .lh-config-game-thumb {
	width: 76px;
	height: 76px;
	flex-basis: 76px;
	border-radius: 7px;
}

.app-shell-public .lh-config-title h2 {
	margin-bottom: .55rem !important;
	font-size: clamp(2rem, 3vw, 3rem) !important;
}

.lh-config-title p {
	max-width: 540px;
	font-size: .78rem;
	line-height: 1.7;
}

.lh-config-steps {
	gap: .45rem;
	margin-top: 1.45rem;
}

.lh-config-steps span {
	gap: .42rem;
	font-size: .55rem;
}

.lh-config-steps i {
	width: 21px;
	height: 21px;
	font-size: .5rem;
}

.app-shell-public .lh-included-card {
	border-radius: 8px !important;
}

.app-shell-public .lh-store-config .config-feature-header {
	padding: .82rem 1rem;
}

.app-shell-public .lh-store-config .config-feature-header h6 {
	gap: .55rem;
	font-size: .7rem;
}

.app-shell-public .lh-store-config .config-feature-header h6 i {
	font-size: .64rem;
}

.app-shell-public .lh-store-config .config-feature-header > span {
	font-size: .5rem;
}

.app-shell-public .lh-included-grid {
	padding: .55rem 1rem .75rem;
}

.app-shell-public .lh-included-feature {
	gap: .58rem;
	padding-top: .52rem;
	padding-bottom: .52rem;
	font-size: .68rem;
}

.app-shell-public .lh-included-feature i {
	color: var(--lh-cyan);
	font-size: .62rem;
}

.app-shell-public .lh-store-config #serverConfigForm {
	grid-template-columns: minmax(0, 1fr) 390px;
	gap: 1.25rem;
}

.lh-config-section-title,
.lh-checkout-heading {
	gap: .8rem;
	margin-bottom: .95rem;
}

.lh-config-section-title > span,
.lh-checkout-heading > span {
	width: 38px;
	height: 38px;
	flex-basis: 38px;
	font-size: .68rem;
}

.lh-config-section-title strong,
.lh-checkout-heading strong {
	font-size: .82rem;
}

.lh-config-section-title small,
.lh-checkout-heading small {
	font-size: .61rem;
	line-height: 1.45;
}

.app-shell-public .lh-config-options {
	gap: .85rem;
}

.app-shell-public .lh-store-config #configOptionsContainer .glass-card {
	padding: 1rem !important;
	border-radius: 8px !important;
}

.lh-option-card-heading {
	gap: .65rem;
	margin-bottom: .7rem;
}

.app-shell-public .lh-option-card-heading > span {
	width: 34px;
	height: 34px;
	flex-basis: 34px;
	font-size: .64rem;
}

.lh-option-card-heading small {
	font-size: .48rem;
}

.app-shell-public .lh-store-config #configOptionsContainer .lh-option-card-heading h6 {
	font-size: .78rem;
	line-height: 1.3;
}

.app-shell-public .lh-store-config #configOptionsContainer .glass-card > p {
	margin: 0 0 .75rem 3.05rem !important;
	font-size: .64rem !important;
	line-height: 1.55;
}

.app-shell-public .lh-store-config #configOptionsContainer input,
.app-shell-public .lh-store-config #configOptionsContainer select {
	min-height: 46px;
	padding: .68rem .8rem !important;
	font-size: .76rem;
}

.app-shell-public .lh-store-config #configOptionsContainer small {
	font-size: .59rem;
	line-height: 1.5;
}

.app-shell-public .location-availability-status {
	gap: .48rem;
	margin-top: .65rem !important;
	padding: .62rem .68rem;
	font-size: .6rem !important;
}

.app-shell-public .lh-config-checkout {
	top: 94px;
}

.app-shell-public .lh-checkout-card {
	padding: 1.05rem !important;
	border-radius: 8px !important;
}

.app-shell-public .lh-checkout-heading {
	margin-bottom: 1rem;
	padding-bottom: .9rem;
}

.app-shell-public .lh-checkout-card > .mb-4 {
	margin-bottom: .9rem !important;
}

.app-shell-public .lh-checkout-card label {
	margin-bottom: .45rem !important;
	font-size: .68rem !important;
}

.app-shell-public .lh-checkout-card input,
.app-shell-public .lh-checkout-card select,
.app-shell-public .lh-checkout-card button {
	min-height: 44px;
	font-size: .74rem;
}

.app-shell-public .lh-store-config .payment-choice {
	padding: .72rem !important;
}

.app-shell-public .lh-store-config .payment-choice span {
	font-size: .7rem;
}

.app-shell-public .lh-store-config .payment-choice p {
	margin-top: .18rem;
	font-size: .61rem;
}

.app-shell-public .lh-store-config .order-summary-total {
	margin-top: .9rem;
	padding: 1rem !important;
}

.app-shell-public .lh-store-config .order-summary-total h5 {
	font-size: 1.28rem !important;
}

.app-shell-public .lh-store-config .order-summary-total p,
.app-shell-public .lh-store-config .order-summary-total small {
	font-size: .7rem !important;
}

.app-shell-public .lh-checkout-actions {
	grid-template-columns: 96px minmax(0, 1fr);
	gap: .65rem;
}

.app-shell-public .lh-checkout-actions > a,
.app-shell-public .lh-checkout-actions > button {
	min-height: 46px;
	font-size: .7rem;
}

.app-shell-public .lh-footer-status > div {
	justify-content: center;
}

@media (max-width: 1180px) {
	.app-shell-public .lh-config-heading {
		grid-template-columns: 1fr;
	}

	.app-shell-public .lh-included-card {
		grid-column: 1;
	}

	.app-shell-public .lh-store-config #serverConfigForm {
		grid-template-columns: minmax(0, 1fr) 360px;
	}
}

@media (max-width: 980px) {
	.app-shell-public .lh-store-config #serverConfigForm {
		grid-template-columns: 1fr;
	}

	.app-shell-public .lh-config-checkout {
		position: static;
	}
}

@media (max-width: 760px) {
	.app-shell-public .lh-config-shell {
		width: min(100% - 28px, 1380px);
	}

	.lh-config-intro {
		padding-right: 0;
	}

	.app-shell-public .lh-reason-grid article {
		grid-template-columns: 36px minmax(0, 1fr);
	}

	.app-shell-public .lh-featured-games .lh-product-bottom > a {
		min-height: 36px;
	}
}

/* =========================================================
   PUBLIC EXPERIENCE V11
   Remove repetition and make every public component feel related.
   ========================================================= */
.app-shell-public .lh-infrastructure-panel[data-active-region="germany"] .lh-platform-specs i,
.app-shell-public .lh-infrastructure-panel[data-active-region="germany"] .lh-location-row.is-active > i,
.app-shell-public .lh-infrastructure-panel[data-active-region="romania"] .lh-platform-specs i,
.app-shell-public .lh-infrastructure-panel[data-active-region="romania"] .lh-location-row.is-active > i {
	color: var(--lh-cyan) !important;
}

.app-shell-public .lh-infrastructure-panel[data-active-region="germany"] .lh-location-row.is-active,
.app-shell-public .lh-infrastructure-panel[data-active-region="romania"] .lh-location-row.is-active {
	border-color: rgba(35, 215, 237, .42) !important;
	background: linear-gradient(125deg, rgba(112, 104, 231, .17), rgba(35, 215, 237, .085)) !important;
}

.app-shell-public .lh-location-flag {
	opacity: 1 !important;
	filter: none !important;
	box-shadow: 0 5px 14px rgba(0, 0, 0, .2) !important;
}

.app-shell-public .lh-location-row {
	min-height: 66px;
}

.app-shell-public .lh-location-row .lh-node-load {
	border-color: rgba(35, 215, 237, .18);
	background: rgba(35, 215, 237, .06);
	color: #70e7c5;
}

.app-shell-public .lh-platform-specs > span {
	display: grid;
	grid-template-columns: 25px minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-content: center;
	align-items: center;
	column-gap: .5rem;
	row-gap: .12rem;
}

.app-shell-public .lh-platform-specs i {
	display: inline-flex;
	width: 25px;
	height: 25px;
	grid-column: 1;
	grid-row: 1 / span 2;
	align-items: center;
	justify-content: center;
	margin: 0;
	border: 1px solid rgba(35, 215, 237, .16);
	border-radius: 5px;
	background: rgba(35, 215, 237, .055);
}

.app-shell-public .lh-platform-specs small,
.app-shell-public .lh-platform-specs strong {
	grid-column: 2;
	margin: 0;
}

.app-shell-public .lh-platform-specs small {
	grid-row: 1;
}

.app-shell-public .lh-platform-specs strong {
	grid-row: 2;
}

.app-shell-public .lh-reason-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
}

.app-shell-public .lh-reason-grid article {
	position: relative;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: .95rem;
	min-height: 0;
	padding: 1.25rem !important;
	overflow: hidden;
}

.app-shell-public .lh-reason-grid article::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, rgba(35, 215, 237, .65), rgba(128, 119, 255, .28), transparent 78%);
}

.app-shell-public .lh-reason-grid article > span {
	width: 42px;
	height: 42px;
	font-size: .78rem;
}

.app-shell-public .lh-reason-grid article > div > small {
	display: block;
	margin: .02rem 0 .32rem;
	color: var(--lh-cyan);
	font-family: var(--lh-mono);
	font-size: .48rem;
	font-weight: 800;
	text-transform: uppercase;
}

.app-shell-public .lh-reason-grid h3 {
	margin: 0 0 .48rem !important;
	font-size: .94rem;
	line-height: 1.3;
}

.app-shell-public .lh-reason-grid p {
	min-height: 3.45em;
	color: #919bb6;
	font-size: .7rem;
	line-height: 1.72;
}

.app-shell-public .lh-reason-grid ul {
	display: grid;
	gap: .38rem;
	margin: .85rem 0 0;
	padding: .72rem 0 0;
	border-top: 1px solid rgba(164, 173, 230, .1);
	list-style: none;
}

.app-shell-public .lh-reason-grid li {
	display: flex;
	align-items: center;
	gap: .42rem;
	color: #c4cada;
	font-size: .59rem;
	font-weight: 650;
}

.app-shell-public .lh-reason-grid li::before {
	content: "";
	width: 5px;
	height: 5px;
	flex: 0 0 5px;
	border-radius: 50%;
	background: var(--lh-cyan);
	box-shadow: 0 0 8px rgba(35, 215, 237, .45);
}

.app-shell-public .lh-store-heading {
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.app-shell-public .lh-store-regions {
	display: flex;
	justify-content: flex-end;
	gap: .55rem;
}

.app-shell-public .lh-store-region {
	min-width: 155px;
	align-items: center;
	gap: .65rem;
	padding: .7rem .78rem;
	border-color: rgba(164, 173, 230, .14);
	background: rgba(22, 30, 60, .58);
}

.app-shell-public .lh-store-region .lh-location-flag {
	width: 30px;
	height: 21px;
	flex-basis: 30px;
	border-radius: 3px;
}

.app-shell-public .lh-store-region p {
	gap: .18rem;
}

.app-shell-public .lh-store-region strong {
	color: #eef2fc;
	font-size: .68rem;
}

.app-shell-public .lh-store-region small {
	display: flex;
	align-items: center;
	gap: .3rem;
	color: #7f8ba8;
	font-size: .46rem;
	text-transform: none;
}

.app-shell-public .lh-store-region small::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--lh-green);
	box-shadow: 0 0 7px rgba(37, 230, 167, .45);
}

.app-shell-public .lh-store-region em,
.app-shell-public .lh-store-region code {
	display: none !important;
}

.app-shell-public .lh-game-result-meta small {
	color: #7f8aa7;
}

.app-shell-public .lh-store-card-image,
.app-shell-public .lh-store-card-image img {
	overflow: hidden;
	transform: none !important;
}

.app-shell-public .lh-store-card:hover .lh-store-card-image img {
	transform: none !important;
	filter: saturate(1.03) brightness(.98);
}

.app-shell-public .lh-store-card {
	transition: border-color .18s ease, box-shadow .18s ease !important;
}

.app-shell-public .lh-store-card:hover {
	transform: none !important;
	border-color: rgba(35, 215, 237, .25) !important;
	box-shadow: 0 16px 34px rgba(3, 7, 23, .18) !important;
}

.app-shell-public .lh-store-card > .p-6:last-child > a,
.app-shell-public .lh-store-card > .p-6:last-child > button {
	min-height: 42px;
	border: 1px solid rgba(35, 215, 237, .24) !important;
	border-radius: 5px !important;
	background: rgba(35, 215, 237, .075) !important;
	color: #ecfeff !important;
	box-shadow: none !important;
}

.app-shell-public .lh-store-card > .p-6:last-child > a:hover {
	border-color: rgba(35, 215, 237, .46) !important;
	background: rgba(35, 215, 237, .14) !important;
}

.app-shell-public .lh-config-checkout {
	display: flex;
	flex-direction: column;
}

.app-shell-public .lh-checkout-card {
	padding: 0 !important;
	overflow: hidden;
	border-color: rgba(164, 173, 230, .14) !important;
	border-radius: 8px 8px 0 0 !important;
	background: rgba(24, 32, 64, .66) !important;
	box-shadow: none !important;
}

.app-shell-public .lh-checkout-heading {
	margin: 0 !important;
	padding: 1rem !important;
	border-bottom: 1px solid rgba(164, 173, 230, .11);
	background: rgba(128, 119, 255, .035);
}

.app-shell-public .lh-checkout-section {
	margin: 0;
	padding: .9rem 1rem;
	border-bottom: 1px solid rgba(164, 173, 230, .09);
}

.app-shell-public .lh-checkout-section > label {
	display: flex !important;
	align-items: center;
	gap: .42rem;
	margin: 0 0 .5rem !important;
	color: #b6bfd5 !important;
	font-size: .65rem !important;
	font-weight: 750;
}

.app-shell-public .lh-checkout-section > label i {
	width: 15px;
	color: var(--lh-cyan);
	font-size: .58rem;
	text-align: center;
}

.app-shell-public .lh-promo-row {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .45rem !important;
}

.app-shell-public .lh-promo-row input,
.app-shell-public .lh-promo-row button,
.app-shell-public .lh-checkout-section > select {
	min-height: 44px;
	border: 1px solid rgba(164, 173, 230, .15) !important;
	border-radius: 5px !important;
	background: rgba(14, 21, 47, .76) !important;
	color: #e8edf9 !important;
	font-size: .7rem !important;
}

.app-shell-public .lh-promo-row input,
.app-shell-public .lh-checkout-section > select {
	width: 100%;
	padding: .68rem .72rem !important;
}

.app-shell-public .lh-promo-row button {
	padding: .6rem .78rem !important;
	border-color: rgba(35, 215, 237, .24) !important;
	background: rgba(35, 215, 237, .075) !important;
	color: #e7fdff !important;
	font-weight: 800;
}

.app-shell-public .lh-promo-row button:hover {
	border-color: rgba(35, 215, 237, .44) !important;
	background: rgba(35, 215, 237, .13) !important;
}

.app-shell-public #couponMessage {
	margin-top: .4rem !important;
	font-size: .56rem;
}

.app-shell-public .lh-checkout-section .space-y-2 {
	display: grid;
	gap: .45rem;
}

.app-shell-public .lh-store-config .payment-choice {
	padding: 0 !important;
	overflow: hidden;
	border-color: rgba(164, 173, 230, .12) !important;
	border-radius: 6px !important;
	background: rgba(15, 22, 48, .58) !important;
}

.app-shell-public .lh-store-config .payment-choice > label {
	display: grid !important;
	grid-template-columns: 16px 32px minmax(0, 1fr);
	gap: .62rem !important;
	min-height: 62px;
	align-items: center;
	margin: 0 !important;
	padding: .65rem .7rem;
}

.app-shell-public .lh-payment-icon {
	display: inline-flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(35, 215, 237, .14);
	border-radius: 5px;
	background: rgba(35, 215, 237, .045);
	color: var(--lh-cyan);
	font-size: .62rem;
}

.app-shell-public .lh-store-config .payment-choice:has(input:checked) {
	border-color: rgba(35, 215, 237, .34) !important;
	background: rgba(35, 215, 237, .055) !important;
	box-shadow: inset 2px 0 0 var(--lh-cyan);
}

.app-shell-public .lh-store-config .payment-choice:has(input:checked) .lh-payment-icon {
	border-color: rgba(35, 215, 237, .28);
	background: rgba(35, 215, 237, .1);
}

.app-shell-public .lh-store-config .payment-choice span {
	font-size: .68rem;
}

.app-shell-public .lh-store-config .payment-choice p {
	margin: .14rem 0 0 !important;
	font-size: .57rem !important;
	line-height: 1.45;
}

.app-shell-public .lh-store-config .order-summary-total {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: .2rem 1rem;
	margin: 0 !important;
	padding: 1rem !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: rgba(35, 215, 237, .035) !important;
	text-align: left !important;
}

.app-shell-public .lh-store-config .order-summary-total h5 {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin: 0 !important;
	color: #f2f6ff;
	font-family: var(--lh-mono);
	font-size: 1.24rem !important;
	white-space: nowrap;
}

.app-shell-public .lh-store-config #billingPeriod {
	grid-column: 1;
	grid-row: 1;
	color: var(--lh-cyan);
	font-size: .66rem !important;
	font-weight: 800;
}

.app-shell-public .lh-store-config #priceBreakdown {
	grid-column: 1;
	grid-row: 2;
	color: #8490ad;
	font-size: .58rem !important;
}

.app-shell-public .lh-checkout-actions {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: .55rem;
	margin: 0 !important;
	padding: .75rem;
	border: 1px solid rgba(164, 173, 230, .14);
	border-top: 0;
	border-radius: 0 0 8px 8px;
	background: rgba(24, 32, 64, .66);
}

.app-shell-public .lh-checkout-actions > a,
.app-shell-public .lh-checkout-actions > button {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	border: 1px solid rgba(164, 173, 230, .15) !important;
	border-radius: 5px !important;
	background: rgba(14, 21, 47, .7) !important;
	color: #cbd2e4 !important;
	font-size: .67rem !important;
	font-weight: 800;
}

.app-shell-public .lh-checkout-actions > button:not(:disabled) {
	border-color: rgba(35, 215, 237, .3) !important;
	background: rgba(35, 215, 237, .09) !important;
	color: #effeff !important;
}

.app-shell-public .lh-checkout-actions > button:not(:disabled):hover {
	border-color: rgba(35, 215, 237, .5) !important;
	background: rgba(35, 215, 237, .15) !important;
}

@media (max-width: 1050px) {
	.app-shell-public .lh-store-heading {
		grid-template-columns: 1fr;
	}

	.app-shell-public .lh-store-regions {
		justify-content: flex-start;
	}
}

@media (max-width: 820px) {
	.app-shell-public .lh-reason-grid {
		grid-template-columns: 1fr;
	}

	.app-shell-public .lh-reason-grid p {
		min-height: 0;
	}
}

@media (max-width: 560px) {
	.app-shell-public .lh-store-regions {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.app-shell-public .lh-store-region {
		min-width: 0;
	}
}

/* =========================================================
   PUBLIC EXPERIENCE V12
   Final configurator composition and explicit catalog visibility.
   ========================================================= */
.app-shell-public [data-shop-panel][hidden],
.app-shell-public [data-game-card][hidden],
.app-shell-public .lh-game-catalog-tools[hidden] {
	display: none !important;
}

.app-shell-public .lh-store-config #serverConfigForm {
	grid-template-columns: minmax(0, 1fr) 410px;
	gap: 1.35rem;
	align-items: start;
}

.app-shell-public .lh-config-builder {
	padding: 1rem;
	border: 1px solid rgba(164, 173, 230, .12);
	border-radius: 8px;
	background: rgba(18, 26, 54, .38);
}

.app-shell-public .lh-config-section-title {
	margin-bottom: 1rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid rgba(164, 173, 230, .1);
}

.app-shell-public .lh-config-options {
	gap: .8rem;
}

.app-shell-public .lh-store-config #configOptionsContainer .glass-card {
	position: relative;
	padding: 1rem !important;
	overflow: hidden;
	border-color: rgba(164, 173, 230, .14) !important;
	background: rgba(24, 32, 64, .62) !important;
	transition: border-color .18s ease, background .18s ease;
}

.app-shell-public .lh-store-config #configOptionsContainer .glass-card::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 2px;
	background: var(--lh-cyan);
	opacity: .35;
}

.app-shell-public .lh-store-config #configOptionsContainer .glass-card:focus-within {
	border-color: rgba(35, 215, 237, .3) !important;
	background: rgba(25, 34, 68, .72) !important;
}

.app-shell-public .lh-option-card-heading {
	margin-bottom: .75rem;
}

.app-shell-public .lh-option-card-heading small {
	color: #71809f;
}

.app-shell-public .lh-store-config #configOptionsContainer .glass-card > p {
	margin: -.15rem 0 .78rem 2.98rem !important;
	color: #8994af !important;
}

.app-shell-public .lh-store-config #configOptionsContainer select,
.app-shell-public .lh-store-config #configOptionsContainer input[type="number"],
.app-shell-public .lh-store-config #configOptionsContainer input[type="text"] {
	min-height: 46px;
	border-color: rgba(164, 173, 230, .16) !important;
	background: rgba(12, 19, 43, .74) !important;
	color: #edf1fc !important;
}

.app-shell-public .lh-store-config #configOptionsContainer select:disabled,
.app-shell-public .lh-store-config #configOptionsContainer option:disabled {
	color: #737d99 !important;
}

.app-shell-public .location-availability-status {
	position: relative;
	min-height: 38px;
	align-items: center;
	margin-top: .58rem !important;
	padding: .58rem .68rem .58rem 1.75rem !important;
	border-color: rgba(164, 173, 230, .13);
	background: rgba(13, 20, 44, .58);
	font-size: .59rem !important;
	font-weight: 700;
}

.app-shell-public .location-availability-status::before {
	position: absolute;
	left: .7rem;
	margin: 0;
}

.app-shell-public .location-availability-status.text-emerald-400 {
	border-color: rgba(37, 230, 167, .2);
	background: rgba(37, 230, 167, .045);
}

.app-shell-public .location-availability-status.text-red-400 {
	border-color: rgba(255, 89, 119, .2);
	background: rgba(255, 89, 119, .045);
}

.app-shell-public .lh-config-loading {
	grid-column: 1 / -1;
	min-height: 180px;
	align-content: center;
	justify-items: center;
	gap: .65rem;
	border: 1px dashed rgba(164, 173, 230, .15);
	border-radius: 7px;
	background: rgba(16, 23, 49, .4);
	color: #8a95b0;
}

.app-shell-public .lh-config-checkout {
	top: 86px;
}

.app-shell-public .lh-checkout-card {
	overflow: hidden;
	border: 1px solid rgba(164, 173, 230, .15) !important;
	border-radius: 8px !important;
	background: rgba(22, 30, 61, .82) !important;
	box-shadow: 0 16px 36px rgba(3, 7, 23, .15) !important;
}

.app-shell-public .lh-checkout-heading {
	background: rgba(128, 119, 255, .045);
}

.app-shell-public .lh-summary-product {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) auto;
	align-items: center;
	gap: .7rem;
	padding: .85rem 1rem;
	border-bottom: 1px solid rgba(164, 173, 230, .1);
	background: rgba(14, 21, 47, .32);
}

.app-shell-public .lh-summary-product img {
	width: 42px;
	height: 42px;
	border: 1px solid rgba(164, 173, 230, .16);
	border-radius: 5px;
	object-fit: cover;
}

.app-shell-public .lh-summary-product > div {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: .15rem;
}

.app-shell-public .lh-summary-product small {
	color: #76829f;
	font-family: var(--lh-mono);
	font-size: .46rem;
	text-transform: uppercase;
}

.app-shell-public .lh-summary-product strong {
	overflow: hidden;
	color: #eef2fc;
	font-size: .72rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-shell-public .lh-summary-selected {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .28rem .38rem;
	border: 1px solid rgba(37, 230, 167, .2);
	border-radius: 4px;
	background: rgba(37, 230, 167, .045);
	color: #66e7be;
	font-family: var(--lh-mono);
	font-size: .47rem;
	font-weight: 800;
}

.app-shell-public .lh-summary-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid rgba(164, 173, 230, .1);
}

.app-shell-public .lh-summary-details > div {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: .28rem;
	padding: .7rem 1rem;
}

.app-shell-public .lh-summary-details > div + div {
	border-left: 1px solid rgba(164, 173, 230, .1);
}

.app-shell-public .lh-summary-details span {
	display: flex;
	align-items: center;
	gap: .35rem;
	color: #76829f;
	font-size: .5rem;
	font-weight: 750;
}

.app-shell-public .lh-summary-details span i {
	color: var(--lh-cyan);
	font-size: .48rem;
}

.app-shell-public .lh-summary-details strong {
	overflow: hidden;
	color: #dce2f1;
	font-size: .61rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-shell-public .lh-payment-list {
	display: grid;
	gap: .45rem;
}

.app-shell-public .lh-store-config .payment-choice > label {
	cursor: pointer;
}

.app-shell-public .lh-store-config .payment-choice input {
	width: 14px;
	height: 14px;
	accent-color: var(--lh-cyan);
}

.app-shell-public .lh-store-config .payment-choice input:disabled + .lh-payment-icon,
.app-shell-public .lh-store-config .payment-choice:has(input:disabled) {
	opacity: .55;
}

.app-shell-public .lh-store-config .payment-choice #balanceWarning {
	color: #ff7890;
}

.app-shell-public .lh-store-config .order-summary-total {
	grid-template-columns: minmax(0, 1fr) auto;
	padding: .85rem 1rem !important;
	border-top: 1px solid rgba(35, 215, 237, .1) !important;
	border-bottom: 1px solid rgba(164, 173, 230, .1) !important;
}

.app-shell-public .lh-store-config .order-summary-total h5 {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.app-shell-public .lh-store-config #billingPeriod,
.app-shell-public .lh-store-config #priceBreakdown {
	grid-column: 1;
}

.app-shell-public .lh-store-config #priceBreakdown {
	max-width: 235px;
	line-height: 1.55;
}

.app-shell-public .lh-checkout-actions {
	margin: 0 !important;
	padding: .75rem !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: rgba(11, 18, 41, .35) !important;
}

.app-shell-public .lh-checkout-actions > button:not(:disabled) i {
	transition: transform .18s ease;
}

.app-shell-public .lh-checkout-actions > button:not(:disabled):hover i {
	transform: translateX(2px);
}

@media (max-width: 1180px) {
	.app-shell-public .lh-store-config #serverConfigForm {
		grid-template-columns: minmax(0, 1fr) 370px;
	}
}

@media (max-width: 980px) {
	.app-shell-public .lh-store-config #serverConfigForm {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.app-shell-public .lh-summary-product {
		grid-template-columns: 38px minmax(0, 1fr);
	}

	.app-shell-public .lh-summary-selected {
		grid-column: 1 / -1;
		width: max-content;
	}

	.app-shell-public .lh-summary-details {
		grid-template-columns: 1fr;
	}

	.app-shell-public .lh-summary-details > div + div {
		border-top: 1px solid rgba(164, 173, 230, .1);
		border-left: 0;
	}
}

.app-shell-public .lh-config-message {
	grid-column: 1 / -1;
	display: flex;
	min-height: 92px;
	align-items: center;
	gap: .75rem;
	padding: 1rem;
	border: 1px solid rgba(37, 230, 167, .17);
	border-radius: 7px;
	background: rgba(37, 230, 167, .04);
}

.app-shell-public .lh-config-message > i {
	display: inline-flex;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(37, 230, 167, .2);
	border-radius: 5px;
	background: rgba(37, 230, 167, .07);
	color: #66e7be;
	font-size: .7rem;
}

.app-shell-public .lh-config-message > div {
	display: flex;
	flex-direction: column;
	gap: .22rem;
}

.app-shell-public .lh-config-message strong {
	color: #e7f8f2;
	font-size: .72rem;
}

.app-shell-public .lh-config-message span {
	color: #8998ad;
	font-size: .61rem;
}

.app-shell-public .lh-config-message.is-error {
	border-color: rgba(255, 89, 119, .18);
	background: rgba(255, 89, 119, .04);
}

.app-shell-public .lh-config-message.is-error > i {
	border-color: rgba(255, 89, 119, .2);
	background: rgba(255, 89, 119, .07);
	color: #ff7890;
}

.app-shell-public .lh-store-config #configOptionsContainer input[type="checkbox"],
.app-shell-public .lh-store-config #configOptionsContainer input[type="radio"] {
	width: 15px;
	height: 15px;
	accent-color: var(--lh-cyan);
}

.app-shell-public .lh-store-config #configOptionsContainer label {
	color: #c5ccdc;
	font-size: .67rem;
}

.app-shell-public .lh-store-config #configOptionsContainer .space-y-2 {
	display: grid;
	gap: .42rem;
}

.app-shell-public .lh-store-config #configOptionsContainer .space-y-2 > label,
.app-shell-public .lh-store-config #configOptionsContainer .mb-2 > label {
	min-height: 38px;
	padding: .48rem .58rem;
	border: 1px solid rgba(164, 173, 230, .11);
	border-radius: 5px;
	background: rgba(13, 20, 44, .5);
}

.app-shell-public .lh-store-config #configOptionsContainer .space-y-2 > label:has(input:checked),
.app-shell-public .lh-store-config #configOptionsContainer .mb-2 > label:has(input:checked) {
	border-color: rgba(35, 215, 237, .28);
	background: rgba(35, 215, 237, .055);
}

/* =========================================================
   PUBLIC EXPERIENCE V13
   Deeper canvas and a coherent interactive effects system.
   ========================================================= */
@keyframes lh-grid-drift {
	from { background-position: 0 0, 0 0, 0 0; }
	to { background-position: 56px 56px, 56px 56px, 0 0; }
}

@keyframes lh-accent-flow {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

@keyframes lh-soft-pulse {
	0%, 100% { opacity: .58; }
	50% { opacity: 1; }
}

@keyframes lh-shine-pass {
	0% { transform: translateX(-145%) skewX(-18deg); }
	100% { transform: translateX(245%) skewX(-18deg); }
}

body.app-shell-public {
	background:
		linear-gradient(118deg, rgba(96, 104, 214, .085), transparent 35%),
		linear-gradient(245deg, rgba(25, 181, 205, .045), transparent 31%),
		linear-gradient(180deg, #0c1328 0%, #0d152b 48%, #0a1124 100%) !important;
}

body.app-shell-public::before {
	display: block !important;
	content: "" !important;
	position: fixed;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(rgba(177, 186, 235, .024) 1px, transparent 1px),
		linear-gradient(90deg, rgba(177, 186, 235, .024) 1px, transparent 1px),
		linear-gradient(135deg, transparent 0 48%, rgba(35, 215, 237, .012) 48% 52%, transparent 52%) !important;
	background-size: 56px 56px, 56px 56px, 168px 168px !important;
	opacity: .82;
	animation: lh-grid-drift 32s linear infinite;
	pointer-events: none;
}

body.app-shell-public::after {
	display: block !important;
	content: "" !important;
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .008), transparent 24%, transparent 76%, rgba(35, 215, 237, .012)),
		repeating-linear-gradient(180deg, transparent 0 3px, rgba(8, 13, 29, .055) 3px 4px);
	opacity: .65;
	pointer-events: none;
}

.app-shell-public > .lh-public-header {
	border-bottom-color: rgba(164, 173, 230, .14) !important;
	background: rgba(8, 13, 29, .88) !important;
	box-shadow: 0 12px 34px rgba(3, 7, 22, .26);
	backdrop-filter: blur(18px) saturate(1.12);
}

.app-shell-public > .lh-public-header::after {
	display: block !important;
	content: "" !important;
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 4%, rgba(128, 119, 255, .68), rgba(35, 215, 237, .72), rgba(255, 89, 119, .42), transparent 96%);
	background-size: 180% 100%;
	animation: lh-accent-flow 8s ease-in-out infinite;
	opacity: .72;
}

.app-shell-public .lh-header-shell {
	position: relative;
}

.app-shell-public .lh-primary-nav {
	border-color: rgba(164, 173, 230, .13);
	background: rgba(15, 22, 48, .62);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 10px 24px rgba(3, 7, 23, .14);
}

.app-shell-public .lh-primary-nav-link {
	transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.app-shell-public .lh-primary-nav-link:hover {
	transform: translateY(-1px);
	background: rgba(35, 215, 237, .045) !important;
	box-shadow: inset 0 0 0 1px rgba(35, 215, 237, .1);
}

.app-shell-public .lh-primary-nav-link.is-active {
	background: linear-gradient(120deg, rgba(128, 119, 255, .16), rgba(35, 215, 237, .075)) !important;
	box-shadow: inset 0 0 0 1px rgba(35, 215, 237, .16), 0 7px 18px rgba(5, 20, 45, .2);
}

.app-shell-public .lh-button-primary,
.app-shell-public .lh-button-secondary,
.app-shell-public .lh-view-all-games > a,
.app-shell-public .lh-store-card > .p-6:last-child > a,
.app-shell-public .lh-featured-games .lh-product-bottom > a,
.app-shell-public .lh-checkout-actions > a,
.app-shell-public .lh-checkout-actions > button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.app-shell-public .lh-button-primary::after,
.app-shell-public .lh-button-secondary::after,
.app-shell-public .lh-view-all-games > a::after,
.app-shell-public .lh-store-card > .p-6:last-child > a::after,
.app-shell-public .lh-featured-games .lh-product-bottom > a::after,
.app-shell-public .lh-checkout-actions > button::after {
	content: "";
	position: absolute;
	inset: -45% auto -45% -35%;
	z-index: -1;
	width: 34%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
	transform: translateX(-145%) skewX(-18deg);
	pointer-events: none;
}

.app-shell-public .lh-button-primary:hover::after,
.app-shell-public .lh-button-secondary:hover::after,
.app-shell-public .lh-view-all-games > a:hover::after,
.app-shell-public .lh-store-card > .p-6:last-child > a:hover::after,
.app-shell-public .lh-featured-games .lh-product-bottom > a:hover::after,
.app-shell-public .lh-checkout-actions > button:not(:disabled):hover::after {
	animation: lh-shine-pass .72s ease-out;
}

.app-shell-public .lh-button-primary:hover,
.app-shell-public .lh-view-all-games > a:hover,
.app-shell-public .lh-store-card > .p-6:last-child > a:hover,
.app-shell-public .lh-featured-games .lh-product-bottom > a:hover,
.app-shell-public .lh-checkout-actions > button:not(:disabled):hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 25px rgba(14, 112, 151, .19), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

.app-shell-public .lh-button-secondary:hover,
.app-shell-public .lh-checkout-actions > a:hover {
	transform: translateY(-1px);
	border-color: rgba(164, 173, 230, .3) !important;
	box-shadow: 0 9px 22px rgba(3, 7, 23, .19);
}

.app-shell-public .lh-home-hero,
.app-shell-public .lh-product-section,
.app-shell-public .lh-reasons,
.app-shell-public .lh-testimonials,
.app-shell-public .lh-partners,
.app-shell-public .lh-store-catalog,
.app-shell-public .lh-store-config {
	position: relative;
}

.app-shell-public .lh-home-hero::before {
	display: block !important;
	content: "" !important;
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(177, 186, 235, .026) 1px, transparent 1px),
		linear-gradient(90deg, rgba(177, 186, 235, .026) 1px, transparent 1px),
		linear-gradient(112deg, rgba(128, 119, 255, .055), rgba(35, 215, 237, .018) 48%, transparent 76%);
	background-size: 56px 56px, 56px 56px, auto;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	opacity: .88;
}

.app-shell-public .lh-eyebrow {
	text-shadow: 0 0 18px rgba(35, 215, 237, .24);
}

.app-shell-public .lh-hero-copy h1,
.app-shell-public .lh-section-heading h2,
.app-shell-public .lh-store-heading h2,
.app-shell-public .lh-config-title h2 {
	text-shadow: 0 8px 30px rgba(4, 8, 28, .34);
}

.app-shell-public .lh-infrastructure-panel,
.app-shell-public .lh-config-builder,
.app-shell-public .lh-checkout-card,
.app-shell-public .lh-game-catalog-tools {
	box-shadow:
		0 18px 42px rgba(3, 7, 23, .2),
		inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

.app-shell-public .lh-infrastructure-panel {
	border-color: rgba(35, 215, 237, .2) !important;
	background:
		linear-gradient(rgba(164, 173, 230, .032) 1px, transparent 1px),
		linear-gradient(90deg, rgba(164, 173, 230, .032) 1px, transparent 1px),
		linear-gradient(145deg, rgba(25, 34, 69, .92), rgba(13, 20, 44, .96)) !important;
	background-size: 30px 30px, 30px 30px, auto !important;
}

.app-shell-public .lh-infrastructure-panel::before {
	height: 2px;
	background: linear-gradient(90deg, var(--lh-purple), var(--lh-cyan), rgba(255, 89, 119, .74), var(--lh-cyan), var(--lh-purple)) !important;
	background-size: 250% 100% !important;
	animation: lh-accent-flow 6s ease-in-out infinite;
	opacity: .9;
}

.app-shell-public .lh-location-row,
.app-shell-public .lh-platform-specs > span,
.app-shell-public .lh-hero-proof > div,
.app-shell-public .lh-store-region,
.app-shell-public .lh-summary-details > div {
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.app-shell-public .lh-location-row:hover,
.app-shell-public .lh-hero-proof > div:hover,
.app-shell-public .lh-store-region:hover {
	transform: translateY(-1px);
	border-color: rgba(35, 215, 237, .27);
	background: rgba(27, 38, 75, .68);
	box-shadow: 0 10px 24px rgba(3, 8, 25, .16);
}

.app-shell-public .lh-platform-specs > span:hover,
.app-shell-public .lh-summary-details > div:hover {
	border-color: rgba(35, 215, 237, .16);
	background: rgba(35, 215, 237, .035);
}

.app-shell-public .lh-location-row.is-active {
	box-shadow: inset 2px 0 0 var(--lh-cyan), 0 10px 24px rgba(3, 8, 25, .18) !important;
}

.app-shell-public .lh-live-label::before,
.app-shell-public .lh-footer-status > span,
.app-shell-public .lh-summary-selected i {
	animation: lh-soft-pulse 2.2s ease-in-out infinite;
}

.app-shell-public .lh-featured-games .lh-product-card,
.app-shell-public .lh-store-card,
.app-shell-public .lh-reason-grid article,
.app-shell-public .lh-quote-grid blockquote,
.app-shell-public .lh-store-config #configOptionsContainer .glass-card,
.app-shell-public .lh-included-card {
	position: relative;
	border-color: rgba(164, 173, 230, .14) !important;
	background: linear-gradient(145deg, rgba(24, 33, 66, .76), rgba(13, 20, 43, .9)) !important;
	box-shadow: 0 14px 32px rgba(3, 7, 23, .15), inset 0 1px 0 rgba(255, 255, 255, .018) !important;
	transition: border-color .22s ease, box-shadow .22s ease, background .22s ease, transform .22s ease !important;
}

.app-shell-public .lh-featured-games .lh-product-card:hover,
.app-shell-public .lh-store-card:hover,
.app-shell-public .lh-reason-grid article:hover,
.app-shell-public .lh-quote-grid blockquote:hover,
.app-shell-public .lh-store-config #configOptionsContainer .glass-card:hover {
	border-color: rgba(35, 215, 237, .25) !important;
	background: linear-gradient(145deg, rgba(27, 38, 76, .84), rgba(14, 22, 47, .94)) !important;
	box-shadow: 0 18px 38px rgba(3, 8, 27, .23), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.app-shell-public .lh-featured-games .lh-product-card::before,
.app-shell-public .lh-store-card::before,
.app-shell-public .lh-reason-grid article::before,
.app-shell-public .lh-quote-grid blockquote::before,
.app-shell-public .lh-store-config #configOptionsContainer .glass-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	width: auto;
	height: 1px;
	background: linear-gradient(90deg, rgba(128, 119, 255, .48), rgba(35, 215, 237, .62), rgba(255, 89, 119, .28), transparent 88%);
	background-size: 180% 100%;
	opacity: .52;
	transform: none;
	transition: opacity .2s ease;
	pointer-events: none;
}

.app-shell-public .lh-featured-games .lh-product-card:hover::before,
.app-shell-public .lh-store-card:hover::before,
.app-shell-public .lh-reason-grid article:hover::before,
.app-shell-public .lh-quote-grid blockquote:hover::before,
.app-shell-public .lh-store-config #configOptionsContainer .glass-card:hover::before {
	opacity: 1;
	animation: lh-accent-flow 2.8s ease-in-out infinite;
}

.app-shell-public .lh-featured-games .lh-product-image::after,
.app-shell-public .lh-store-card-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 48%, rgba(8, 13, 29, .72));
	opacity: .52;
	transition: opacity .22s ease;
	pointer-events: none;
}

.app-shell-public .lh-featured-games .lh-product-card:hover .lh-product-image::after,
.app-shell-public .lh-store-card:hover .lh-store-card-image::after {
	opacity: .28;
}

.app-shell-public .lh-store-config #configOptionsContainer .glass-card:focus-within,
.app-shell-public .lh-checkout-card:focus-within {
	border-color: rgba(35, 215, 237, .29) !important;
	box-shadow: 0 18px 40px rgba(3, 8, 27, .22), inset 0 0 0 1px rgba(35, 215, 237, .05) !important;
}

.app-shell-public .lh-store-config input:focus,
.app-shell-public .lh-store-config select:focus,
.app-shell-public .lh-game-search input:focus {
	outline: none;
	border-color: rgba(35, 215, 237, .42) !important;
	box-shadow: 0 0 0 3px rgba(35, 215, 237, .07), 0 8px 18px rgba(3, 8, 27, .12) !important;
}

.app-shell-public .lh-store-config .payment-choice,
.app-shell-public .lh-store-config #configOptionsContainer .space-y-2 > label,
.app-shell-public .lh-store-config #configOptionsContainer .mb-2 > label {
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.app-shell-public .lh-store-config .payment-choice:hover,
.app-shell-public .lh-store-config #configOptionsContainer .space-y-2 > label:hover,
.app-shell-public .lh-store-config #configOptionsContainer .mb-2 > label:hover {
	transform: translateX(1px);
	border-color: rgba(35, 215, 237, .22) !important;
	background: rgba(35, 215, 237, .04) !important;
}

.app-shell-public .lh-store-config .order-summary-total {
	background:
		linear-gradient(110deg, rgba(128, 119, 255, .07), rgba(35, 215, 237, .045)),
		rgba(10, 17, 38, .55) !important;
}

.app-shell-public .lh-footer {
	border-top-color: rgba(164, 173, 230, .13) !important;
	background:
		linear-gradient(rgba(164, 173, 230, .018) 1px, transparent 1px),
		linear-gradient(90deg, rgba(164, 173, 230, .018) 1px, transparent 1px),
		linear-gradient(180deg, rgba(9, 15, 33, .97), #070c1b) !important;
	background-size: 56px 56px, 56px 56px, auto !important;
	box-shadow: 0 -16px 38px rgba(3, 7, 23, .17);
}

.app-shell-public .lh-footer::before {
	background: linear-gradient(90deg, transparent, rgba(128, 119, 255, .54), rgba(35, 215, 237, .66), rgba(255, 89, 119, .34), transparent) !important;
	background-size: 180% 100% !important;
	animation: lh-accent-flow 9s ease-in-out infinite;
}

.app-shell-public .lh-discord-float {
	border-color: rgba(123, 131, 255, .35) !important;
	background: rgba(29, 35, 77, .92) !important;
	box-shadow: 0 14px 34px rgba(3, 7, 23, .28), 0 0 24px rgba(100, 110, 255, .12) !important;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.app-shell-public .lh-discord-float:hover {
	transform: translateY(-2px);
	border-color: rgba(35, 215, 237, .38) !important;
	background: rgba(34, 43, 88, .96) !important;
	box-shadow: 0 18px 38px rgba(3, 7, 23, .3), 0 0 30px rgba(35, 215, 237, .14) !important;
}

@media (max-width: 760px) {
	body.app-shell-public::before {
		background-size: 44px 44px, 44px 44px, 132px 132px !important;
	}

	.app-shell-public .lh-featured-games .lh-product-card:hover,
	.app-shell-public .lh-store-card:hover,
	.app-shell-public .lh-reason-grid article:hover,
	.app-shell-public .lh-quote-grid blockquote:hover {
		transform: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.app-shell-public::before,
	.app-shell-public > .lh-public-header::after,
	.app-shell-public .lh-infrastructure-panel::before,
	.app-shell-public .lh-footer::before,
	.app-shell-public .lh-live-label::before,
	.app-shell-public .lh-footer-status > span,
	.app-shell-public .lh-summary-selected i {
		animation: none !important;
	}

	.app-shell-public .lh-button-primary:hover::after,
	.app-shell-public .lh-button-secondary:hover::after,
	.app-shell-public .lh-view-all-games > a:hover::after,
	.app-shell-public .lh-store-card > .p-6:last-child > a:hover::after,
	.app-shell-public .lh-featured-games .lh-product-bottom > a:hover::after,
	.app-shell-public .lh-checkout-actions > button:not(:disabled):hover::after {
		animation: none !important;
	}
}

/* Secondary public pages inherit the same visual energy. */
.app-shell-public .workspace-page,
.app-shell-public .lh-auth-page,
.app-shell-public .lh-contact-page,
.app-shell-public .lh-news-page {
	position: relative;
	isolation: isolate;
}

.app-shell-public .workspace-page::before,
.app-shell-public .lh-contact-page::before,
.app-shell-public .lh-news-page::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(115deg, rgba(128, 119, 255, .038), transparent 34%),
		linear-gradient(245deg, rgba(35, 215, 237, .02), transparent 31%);
	pointer-events: none;
}

.app-shell-public .lh-auth-page::before {
	inset: 0;
	width: auto;
	height: auto;
	transform: none;
	background:
		linear-gradient(rgba(164, 173, 230, .022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(164, 173, 230, .022) 1px, transparent 1px),
		linear-gradient(125deg, rgba(128, 119, 255, .055), rgba(35, 215, 237, .018), transparent 72%);
	background-size: 56px 56px, 56px 56px, auto;
	-webkit-mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .3) 76%, transparent);
	mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .3) 76%, transparent);
	opacity: .9;
}

.app-shell-public .workspace-page > div > .lh-client-page-header,
.app-shell-public .lh-news-header {
	position: relative;
	overflow: hidden;
	border-color: rgba(164, 173, 230, .14) !important;
	background: linear-gradient(125deg, rgba(24, 33, 67, .68), rgba(13, 20, 43, .75)) !important;
	box-shadow: 0 14px 32px rgba(3, 7, 23, .14);
}

.app-shell-public .workspace-page > div > .lh-client-page-header::before,
.app-shell-public .lh-news-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, rgba(128, 119, 255, .56), rgba(35, 215, 237, .64), rgba(255, 89, 119, .26), transparent 85%);
	background-size: 180% 100%;
	animation: lh-accent-flow 7s ease-in-out infinite;
}

.app-shell-public .glass-card,
.app-shell-public .invoice-card,
.app-shell-public .services-card,
.app-shell-public .service-stat,
.app-shell-public .ticket-card,
.app-shell-public .lh-auth-card,
.app-shell-public .lh-contact-form-card,
.app-shell-public .lh-contact-info-card,
.app-shell-public .lh-news-page .glass-card {
	border-color: rgba(164, 173, 230, .14) !important;
	background: linear-gradient(145deg, rgba(24, 33, 66, .74), rgba(13, 20, 43, .9)) !important;
	box-shadow: 0 15px 34px rgba(3, 7, 23, .17), inset 0 1px 0 rgba(255, 255, 255, .02) !important;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.app-shell-public .glass-card:hover,
.app-shell-public .invoice-card:hover,
.app-shell-public .services-card:hover,
.app-shell-public .service-stat:hover,
.app-shell-public .ticket-card:hover,
.app-shell-public .lh-contact-info-card:hover,
.app-shell-public .lh-news-page .glass-card:hover {
	border-color: rgba(35, 215, 237, .23) !important;
	background: linear-gradient(145deg, rgba(27, 38, 76, .82), rgba(14, 22, 47, .94)) !important;
	box-shadow: 0 19px 40px rgba(3, 8, 27, .23), inset 0 1px 0 rgba(255, 255, 255, .03) !important;
}

.app-shell-public .lh-auth-card,
.app-shell-public .lh-contact-form-card,
.app-shell-public .lh-contact-info-card {
	position: relative;
	overflow: hidden;
}

.app-shell-public .lh-auth-card::after,
.app-shell-public .lh-contact-form-card::after,
.app-shell-public .lh-contact-info-card::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(90deg, var(--lh-purple), var(--lh-cyan), rgba(255, 89, 119, .55), transparent);
	background-size: 180% 100%;
	animation: lh-accent-flow 7s ease-in-out infinite;
	opacity: .7;
	pointer-events: none;
}

.app-shell-public .lh-auth-card:focus-within,
.app-shell-public .lh-contact-form-card:focus-within {
	border-color: rgba(35, 215, 237, .28) !important;
	box-shadow: 0 20px 44px rgba(3, 8, 27, .24), inset 0 0 0 1px rgba(35, 215, 237, .04) !important;
}

.app-shell-public .workspace-page input,
.app-shell-public .workspace-page select,
.app-shell-public .workspace-page textarea,
.app-shell-public .lh-auth-card input,
.app-shell-public .lh-auth-card select,
.app-shell-public .lh-contact-form-card input,
.app-shell-public .lh-contact-form-card select,
.app-shell-public .lh-contact-form-card textarea {
	border-color: rgba(164, 173, 230, .15) !important;
	background: rgba(10, 17, 38, .68) !important;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

.app-shell-public .workspace-page input:focus,
.app-shell-public .workspace-page select:focus,
.app-shell-public .workspace-page textarea:focus,
.app-shell-public .lh-auth-card input:focus,
.app-shell-public .lh-auth-card select:focus,
.app-shell-public .lh-contact-form-card input:focus,
.app-shell-public .lh-contact-form-card select:focus,
.app-shell-public .lh-contact-form-card textarea:focus {
	outline: none;
	border-color: rgba(35, 215, 237, .42) !important;
	background: rgba(12, 21, 46, .84) !important;
	box-shadow: 0 0 0 3px rgba(35, 215, 237, .065), 0 8px 18px rgba(3, 8, 27, .12) !important;
}

.app-shell-public .workspace-page table tbody tr,
.app-shell-public .invoice-row,
.app-shell-public .service-row {
	transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.app-shell-public .workspace-page table tbody tr:hover,
.app-shell-public .invoice-row:hover,
.app-shell-public .service-row:hover {
	background: linear-gradient(90deg, rgba(128, 119, 255, .08), rgba(35, 215, 237, .035), transparent) !important;
	box-shadow: inset 2px 0 0 rgba(35, 215, 237, .55);
}

.app-shell-public .workspace-page .filter-btn,
.app-shell-public .workspace-page table td a[class*="w-10"],
.app-shell-public .workspace-page table td button[class*="w-10"] {
	transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.app-shell-public .workspace-page .filter-btn:hover,
.app-shell-public .workspace-page table td a[class*="w-10"]:hover,
.app-shell-public .workspace-page table td button[class*="w-10"]:hover {
	transform: translateY(-1px);
	border-color: rgba(35, 215, 237, .28) !important;
	background: rgba(35, 215, 237, .055) !important;
	box-shadow: 0 8px 18px rgba(3, 8, 27, .16) !important;
}

.app-shell-public span[class*="rounded-full"],
.app-shell-public .badge,
.app-shell-public [class*="status-badge"] {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 5px 12px rgba(3, 7, 23, .11);
}

@media (prefers-reduced-motion: reduce) {
	.app-shell-public .workspace-page > div > .lh-client-page-header::before,
	.app-shell-public .lh-news-header::before,
	.app-shell-public .lh-auth-card::after,
	.app-shell-public .lh-contact-form-card::after,
	.app-shell-public .lh-contact-info-card::after {
		animation: none !important;
	}
}

/* =========================================================
   PUBLIC EXPERIENCE V14
   One continuous canvas for every secondary public route.
   ========================================================= */
@keyframes lh-canvas-signal {
	0%, 100% { transform: translate3d(-4%, 0, 0); opacity: .34; }
	50% { transform: translate3d(4%, 0, 0); opacity: .62; }
}

body.app-secondary-canvas main {
	position: relative;
	isolation: isolate;
	min-height: calc(100vh - 66px);
	overflow: hidden;
	background:
		linear-gradient(122deg, rgba(128, 119, 255, .065), transparent 28%),
		linear-gradient(238deg, rgba(35, 215, 237, .038), transparent 31%),
		linear-gradient(180deg, rgba(17, 27, 56, .52), rgba(10, 17, 37, .24) 46%, rgba(8, 14, 31, .54)) !important;
}

body.app-secondary-canvas main::before,
body.app-secondary-canvas main::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

body.app-secondary-canvas main::before {
	background:
		linear-gradient(rgba(177, 186, 235, .025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(177, 186, 235, .025) 1px, transparent 1px),
		linear-gradient(118deg, transparent 0 20%, rgba(128, 119, 255, .024) 20% 20.12%, transparent 20.12% 71%, rgba(35, 215, 237, .02) 71% 71.12%, transparent 71.12%);
	background-size: 56px 56px, 56px 56px, auto;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .72) 72%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .72) 72%, transparent 100%);
	opacity: .88;
}

body.app-secondary-canvas main::after {
	inset: 0 -12%;
	background:
		linear-gradient(90deg, transparent 4%, rgba(128, 119, 255, .12), rgba(35, 215, 237, .1), rgba(255, 89, 119, .06), transparent 96%) 50% 104px / 100% 1px no-repeat,
		linear-gradient(90deg, transparent 10%, rgba(35, 215, 237, .045), transparent 90%) 50% calc(100% - 80px) / 100% 1px no-repeat;
	animation: lh-canvas-signal 14s ease-in-out infinite;
}

body.app-secondary-canvas main > div {
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.app-secondary-canvas main > div > section,
body.app-secondary-canvas main > div > .lh-auth-page {
	position: relative;
	min-height: min(72vh, 860px);
	margin: 0;
	padding-top: clamp(2.6rem, 5vw, 5.2rem) !important;
	padding-bottom: clamp(3.8rem, 7vw, 7rem) !important;
	background: transparent !important;
}

body.app-secondary-canvas main > div > section::before,
body.app-secondary-canvas main > div > .lh-auth-page::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent 5%, rgba(128, 119, 255, .22), rgba(35, 215, 237, .16), transparent 95%);
	opacity: .55;
	pointer-events: none;
}

body.app-secondary-canvas main > div > section > div,
body.app-secondary-canvas .workspace-page > div,
body.app-secondary-canvas .lh-contact-page > div,
body.app-secondary-canvas .lh-news-page > div {
	width: min(100% - 48px, 1420px);
	margin-right: auto !important;
	margin-left: auto !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

body.app-secondary-canvas .lh-contact-page,
body.app-secondary-canvas .lh-news-page,
body.app-secondary-canvas .workspace-page,
body.app-secondary-canvas .lh-auth-page {
	background: transparent !important;
}

body.app-secondary-canvas .lh-contact-page::before,
body.app-secondary-canvas .lh-news-page::before,
body.app-secondary-canvas .workspace-page::before,
body.app-secondary-canvas .lh-auth-page::before {
	display: none !important;
}

body.app-secondary-canvas .glass-card,
body.app-secondary-canvas .card,
body.app-secondary-canvas .modern-card,
body.app-secondary-canvas .section-card,
body.app-secondary-canvas .profile-card,
body.app-secondary-canvas .detail-card,
body.app-secondary-canvas .edit-card,
body.app-secondary-canvas .invoice-card,
body.app-secondary-canvas .services-card,
body.app-secondary-canvas .service-stat,
body.app-secondary-canvas .ticket-card,
body.app-secondary-canvas .lh-auth-card,
body.app-secondary-canvas .lh-contact-form-card,
body.app-secondary-canvas .lh-contact-info-card {
	background:
		linear-gradient(rgba(164, 173, 230, .022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(164, 173, 230, .022) 1px, transparent 1px),
		linear-gradient(145deg, rgba(25, 35, 70, .86), rgba(13, 21, 45, .94)) !important;
	background-size: 34px 34px, 34px 34px, auto !important;
	border-color: rgba(164, 173, 230, .17) !important;
	box-shadow:
		0 18px 42px rgba(3, 7, 23, .2),
		inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

body.app-secondary-canvas .glass-card:hover,
body.app-secondary-canvas .card:hover,
body.app-secondary-canvas .modern-card:hover,
body.app-secondary-canvas .section-card:hover,
body.app-secondary-canvas .profile-card:hover,
body.app-secondary-canvas .detail-card:hover,
body.app-secondary-canvas .edit-card:hover,
body.app-secondary-canvas .invoice-card:hover,
body.app-secondary-canvas .services-card:hover,
body.app-secondary-canvas .service-stat:hover,
body.app-secondary-canvas .ticket-card:hover,
body.app-secondary-canvas .lh-contact-info-card:hover {
	border-color: rgba(35, 215, 237, .25) !important;
	background:
		linear-gradient(rgba(35, 215, 237, .025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(35, 215, 237, .025) 1px, transparent 1px),
		linear-gradient(145deg, rgba(28, 40, 79, .9), rgba(14, 23, 49, .96)) !important;
	background-size: 34px 34px, 34px 34px, auto !important;
	box-shadow:
		0 22px 48px rgba(3, 8, 27, .26),
		inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

body.app-secondary-canvas .lh-news-header {
	margin-bottom: 1.25rem !important;
	background:
		linear-gradient(118deg, rgba(128, 119, 255, .12), rgba(35, 215, 237, .045) 58%, transparent),
		linear-gradient(145deg, rgba(27, 38, 76, .9), rgba(14, 22, 47, .96)) !important;
}

body.app-secondary-canvas .lh-news-header > .absolute {
	opacity: .34;
}

body.app-secondary-canvas .lh-news-page .space-y-6 {
	display: grid;
	gap: 1rem;
}

body.app-secondary-canvas .lh-news-page .glass-card {
	overflow: hidden;
}

body.app-secondary-canvas .lh-news-page .glass-card:hover {
	transform: translateY(-2px) !important;
}

body.app-secondary-canvas .lh-contact-page .grid {
	align-items: stretch;
}

.lh-secondary-heading {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 2rem;
	margin-bottom: 1.25rem;
	padding: 1.45rem 1.55rem;
	overflow: hidden;
	border: 1px solid rgba(164, 173, 230, .16);
	border-radius: 8px;
	background:
		linear-gradient(rgba(164, 173, 230, .024) 1px, transparent 1px),
		linear-gradient(90deg, rgba(164, 173, 230, .024) 1px, transparent 1px),
		linear-gradient(125deg, rgba(27, 38, 76, .84), rgba(13, 21, 45, .9));
	background-size: 34px 34px, 34px 34px, auto;
	box-shadow: 0 16px 36px rgba(3, 7, 23, .17);
}

.lh-secondary-heading::before,
.lh-secondary-heading::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.lh-secondary-heading::before {
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, var(--lh-purple), var(--lh-cyan), rgba(255, 89, 119, .42), transparent 88%);
}

.lh-secondary-heading::after {
	inset: auto -12% 0 42%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(35, 215, 237, .5), transparent);
	animation: lh-canvas-signal 9s ease-in-out infinite;
}

.lh-secondary-heading .lh-eyebrow {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin-bottom: .65rem;
}

.lh-secondary-heading h1 {
	margin: 0;
	color: #f2f4fd;
	font-size: clamp(1.55rem, 2.4vw, 2.35rem);
	line-height: 1.08;
}

.lh-secondary-heading > div:first-child > p:last-child {
	max-width: 700px;
	margin: .7rem 0 0;
	color: #929db7;
	font-size: .72rem;
	line-height: 1.7;
}

.lh-secondary-heading-meta {
	display: grid;
	gap: .45rem;
	min-width: 235px;
}

.lh-secondary-heading-meta span {
	display: flex;
	align-items: center;
	gap: .55rem;
	min-height: 36px;
	padding: .5rem .65rem;
	border: 1px solid rgba(164, 173, 230, .12);
	border-radius: 5px;
	background: rgba(10, 17, 38, .46);
	color: #b3bdd2;
	font-family: var(--lh-mono);
	font-size: .56rem;
}

.lh-secondary-heading-meta i {
	width: 15px;
	color: var(--lh-cyan);
	text-align: center;
}

body.app-secondary-canvas .lh-contact-form-card,
body.app-secondary-canvas .lh-contact-info-card {
	border-top: 1px solid rgba(35, 215, 237, .23) !important;
}

body.app-secondary-canvas .lh-contact-info-card .space-y-4 > div:not([class*="border-t"]) {
	padding: .72rem .8rem;
	border: 1px solid rgba(164, 173, 230, .1);
	border-radius: 6px;
	background: rgba(10, 17, 38, .34);
	transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

body.app-secondary-canvas .lh-contact-info-card .space-y-4 > div:not([class*="border-t"]):hover {
	transform: translateX(2px);
	border-color: rgba(35, 215, 237, .2);
	background: rgba(35, 215, 237, .035);
}

body.app-secondary-canvas .lh-contact-info-card .space-y-4 > div[class*="border-t"] {
	display: none;
}

body.app-secondary-canvas .lh-affiliate-transfer {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(35, 215, 237, .18) !important;
	background:
		linear-gradient(rgba(35, 215, 237, .022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(35, 215, 237, .022) 1px, transparent 1px),
		linear-gradient(135deg, rgba(25, 37, 73, .82), rgba(13, 22, 47, .92)) !important;
	background-size: 30px 30px, 30px 30px, auto !important;
}

body.app-secondary-canvas .lh-affiliate-transfer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, var(--lh-purple), var(--lh-cyan), var(--lh-green), transparent);
	opacity: .75;
	pointer-events: none;
}

body.app-secondary-canvas .lh-affiliate-receive {
	border: 1px solid rgba(37, 230, 167, .14);
	background: rgba(8, 17, 35, .48) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
}

body.app-secondary-canvas .lh-affiliate-transfer-button {
	border: 1px solid rgba(37, 230, 167, .26) !important;
	background: linear-gradient(110deg, rgba(23, 148, 125, .95), rgba(27, 184, 166, .95)) !important;
	box-shadow: 0 10px 24px rgba(7, 72, 66, .2);
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.app-secondary-canvas .lh-affiliate-transfer-button:hover:not(:disabled) {
	transform: translateY(-1px);
	border-color: rgba(101, 243, 255, .38) !important;
	background: linear-gradient(110deg, rgba(27, 164, 139, .98), rgba(32, 197, 181, .98)) !important;
	box-shadow: 0 14px 30px rgba(7, 72, 66, .26);
}

body.app-secondary-canvas .prose {
	color: #b9c2d8;
}

body.app-secondary-canvas .prose h1,
body.app-secondary-canvas .prose h2,
body.app-secondary-canvas .prose h3,
body.app-secondary-canvas .prose h4 {
	color: #f0f3fc;
}

body.app-secondary-canvas .prose a {
	color: var(--lh-cyan);
}

body.app-secondary-canvas .prose hr {
	border-color: rgba(164, 173, 230, .15);
}

@media (max-width: 760px) {
	body.app-secondary-canvas main > div > section,
	body.app-secondary-canvas main > div > .lh-auth-page {
		min-height: 62vh;
		padding-top: 2rem !important;
		padding-bottom: 3.5rem !important;
	}

	body.app-secondary-canvas main > div > section > div,
	body.app-secondary-canvas .workspace-page > div,
	body.app-secondary-canvas .lh-contact-page > div,
	body.app-secondary-canvas .lh-news-page > div {
		width: min(100% - 28px, 1420px);
	}

	body.app-secondary-canvas main::before {
		background-size: 44px 44px, 44px 44px, auto;
	}

	.lh-secondary-heading {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 1.15rem;
	}

	.lh-secondary-heading-meta {
		grid-template-columns: 1fr;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.app-secondary-canvas main::after,
	.lh-secondary-heading::after {
		animation: none !important;
	}
}

/* =========================================================
   CLIENT COMPONENT PASS V15
   Reusable headers, compact icons, alerts and table actions.
   ========================================================= */
body.app-secondary-canvas main > div > .lh-flash-message {
	min-height: 0 !important;
	padding: 1rem 0 0 !important;
}

body.app-secondary-canvas main > div > .lh-flash-message::before {
	display: none !important;
}

body.app-secondary-canvas .lh-flash-message > div {
	width: min(100% - 48px, 1420px);
	max-width: 1420px !important;
}

.lh-flash-alert {
	position: relative;
	display: flex;
	min-height: 48px;
	align-items: center;
	padding: .78rem 1rem .78rem 2.8rem !important;
	overflow: hidden;
	border-radius: 7px !important;
	background: rgba(11, 20, 42, .9) !important;
	box-shadow: 0 12px 28px rgba(3, 7, 23, .18), inset 0 1px 0 rgba(255, 255, 255, .02);
	font-size: .7rem;
	font-weight: 700;
}

.lh-flash-alert::before {
	content: "\f05a";
	position: absolute;
	left: 1rem;
	color: currentColor;
	font-family: "Font Awesome 7 Free";
	font-size: .78rem;
	font-weight: 900;
}

.lh-flash-alert::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, currentColor, transparent 80%);
	opacity: .6;
}

.lh-client-page-header {
	position: relative;
	display: flex;
	min-height: 76px;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
	padding: 1rem 1.05rem;
	overflow: hidden;
	border: 1px solid rgba(164, 173, 230, .16);
	border-radius: 8px;
	background:
		linear-gradient(rgba(164, 173, 230, .022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(164, 173, 230, .022) 1px, transparent 1px),
		linear-gradient(125deg, rgba(25, 35, 70, .84), rgba(13, 21, 45, .92));
	background-size: 34px 34px, 34px 34px, auto;
	box-shadow: 0 15px 34px rgba(3, 7, 23, .17);
}

.lh-client-page-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, var(--lh-purple), var(--lh-cyan), rgba(255, 89, 119, .42), transparent 88%);
	opacity: .78;
}

.lh-client-page-title {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: .75rem;
}

.lh-client-page-title > div {
	min-width: 0;
}

.lh-client-page-title h2,
.lh-client-page-title h3 {
	margin: 0;
	color: #eef2fc;
	font-size: .92rem;
	font-weight: 780;
}

.lh-client-page-title h2 {
	font-size: 1rem;
}

.lh-client-page-title p {
	margin: .2rem 0 0;
	color: #7e8ba8;
	font-size: .57rem;
	line-height: 1.55;
}

.lh-secondary-button {
	display: inline-flex;
	min-height: 34px;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .48rem .7rem;
	border: 1px solid rgba(164, 173, 230, .16);
	border-radius: 5px;
	background: rgba(164, 173, 230, .045);
	color: #b9c3d8;
	font-size: .62rem;
	font-weight: 750;
	transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.lh-secondary-button:hover {
	transform: translateY(-1px);
	border-color: rgba(35, 215, 237, .3);
	background: rgba(35, 215, 237, .07);
	color: var(--lh-cyan);
}

.lh-icon-tile,
.lh-row-icon,
.lh-stat-icon,
.lh-empty-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(35, 215, 237, .2);
	border-radius: 6px;
	background: rgba(35, 215, 237, .06);
	color: var(--lh-cyan);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.lh-icon-tile {
	width: 38px;
	height: 38px;
	font-size: .72rem;
}

.lh-icon-tile.is-muted {
	width: 32px;
	height: 32px;
	border-color: rgba(164, 173, 230, .14);
	background: rgba(164, 173, 230, .045);
	color: #9ba7c2;
	font-size: .62rem;
}

.lh-row-icon {
	width: 36px;
	height: 36px;
	font-size: .65rem;
}

.lh-stat-icon {
	width: 32px;
	height: 32px;
	border-color: rgba(164, 173, 230, .14);
	background: rgba(164, 173, 230, .045);
	color: #aab4ca;
	font-size: .65rem;
}

.lh-empty-icon {
	width: 48px;
	height: 48px;
	margin: 0 auto 1rem;
	border-color: rgba(164, 173, 230, .16);
	background: rgba(164, 173, 230, .045);
	color: #8996b1;
	font-size: .9rem;
}

.lh-empty-icon.is-warning {
	border-color: rgba(255, 201, 74, .22);
	background: rgba(255, 201, 74, .055);
	color: var(--lh-yellow);
}

.lh-stat-grid {
	gap: .75rem !important;
}

.lh-stat-card {
	--lh-stat-color: var(--lh-cyan);
	overflow: hidden;
}

.lh-stat-card::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, var(--lh-stat-color), transparent 82%);
	opacity: .78;
}

.lh-stat-card.is-success { --lh-stat-color: var(--lh-green); }
.lh-stat-card.is-warning { --lh-stat-color: var(--lh-yellow); }
.lh-stat-card.is-danger { --lh-stat-color: var(--lh-red); }
.lh-stat-card.is-purple { --lh-stat-color: var(--lh-violet); }

.lh-stat-card .lh-stat-icon {
	border-color: color-mix(in srgb, var(--lh-stat-color) 28%, transparent);
	background: color-mix(in srgb, var(--lh-stat-color) 7%, transparent);
	color: var(--lh-stat-color);
}

.lh-stat-icon.is-success,
.lh-row-icon.is-success {
	border-color: rgba(37, 230, 167, .22);
	background: rgba(37, 230, 167, .065);
	color: var(--lh-green);
}

.lh-stat-icon.is-warning,
.lh-row-icon.is-warning {
	border-color: rgba(255, 197, 72, .22);
	background: rgba(255, 197, 72, .065);
	color: var(--lh-yellow);
}

.lh-stat-icon.is-danger,
.lh-row-icon.is-danger {
	border-color: rgba(255, 89, 119, .22);
	background: rgba(255, 89, 119, .065);
	color: var(--lh-red);
}

.lh-stat-icon.is-info,
.lh-row-icon.is-info {
	border-color: rgba(35, 215, 237, .22);
	background: rgba(35, 215, 237, .065);
	color: var(--lh-cyan);
}

.lh-stat-card h6 {
	color: #929db7 !important;
	font-size: .62rem !important;
}

.lh-stat-card h4 {
	margin: .18rem 0 0 !important;
	font-family: var(--lh-mono) !important;
	font-size: .95rem !important;
}

.lh-filter-bar {
	padding: .75rem .9rem !important;
}

.lh-table-card {
	overflow: hidden;
}

.lh-table-card-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .78rem 1rem;
	border-bottom: 1px solid rgba(164, 173, 230, .12);
	background: rgba(128, 119, 255, .035);
}

.lh-action-icon {
	display: inline-flex;
	width: 32px !important;
	height: 32px !important;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	border: 1px solid rgba(164, 173, 230, .16) !important;
	border-radius: 5px !important;
	background: rgba(164, 173, 230, .045) !important;
	color: #aab4ca !important;
	font-size: .62rem;
	box-shadow: none !important;
	transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease !important;
}

.lh-action-icon:hover {
	transform: translateY(-1px);
	border-color: rgba(35, 215, 237, .32) !important;
	background: rgba(35, 215, 237, .075) !important;
	color: var(--lh-cyan) !important;
}

.lh-action-icon.is-success {
	border-color: rgba(37, 230, 167, .18) !important;
	color: var(--lh-green) !important;
}

.lh-action-icon.is-danger {
	border-color: rgba(255, 89, 119, .18) !important;
	color: var(--lh-red) !important;
}

.lh-action-icon.is-info,
.lh-action-icon.is-primary {
	border-color: rgba(35, 215, 237, .18) !important;
	color: var(--lh-cyan) !important;
}

.btn-action.is-success {
	border-color: rgba(37, 230, 167, .2) !important;
	background: rgba(37, 230, 167, .07) !important;
	color: var(--lh-green) !important;
}

.btn-action.is-success:hover {
	border-color: rgba(37, 230, 167, .38) !important;
	background: rgba(37, 230, 167, .12) !important;
}

.lh-notification-summary {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin: 0 0 .8rem;
}

.lh-notification-summary span {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .38rem .55rem;
	border: 1px solid rgba(164, 173, 230, .12);
	border-radius: 4px;
	background: rgba(13, 21, 45, .56);
	color: #7f8ca8;
	font-family: var(--lh-mono);
	font-size: .49rem;
}

.lh-notification-summary strong {
	color: var(--lh-cyan);
}

.lh-notifications-page .notif-row {
	transition: background .18s ease, box-shadow .18s ease;
}

.lh-notifications-page .notif-row.unread {
	background: rgba(35, 215, 237, .025);
	box-shadow: inset 2px 0 0 rgba(35, 215, 237, .58);
}

.lh-notifications-page .notif-row:hover {
	background: rgba(35, 215, 237, .035) !important;
}

.lh-page-flow {
	display: grid;
	gap: 1rem;
}

.lh-page-flow > .p-6 {
	padding: 0 !important;
}

.lh-news-feature-icon,
.lh-security-icon,
.lh-state-icon,
.lh-auth-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(35, 215, 237, .2);
	border-radius: 7px;
	background: rgba(35, 215, 237, .06);
	color: var(--lh-cyan);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.lh-news-feature-icon {
	width: 42px;
	height: 42px;
	font-size: .72rem;
}

.lh-security-icon {
	width: 48px;
	height: 48px;
	margin: 0 auto .75rem;
	font-size: .9rem;
}

.lh-security-icon.is-success {
	border-color: rgba(37, 230, 167, .22);
	background: rgba(37, 230, 167, .06);
	color: var(--lh-green);
}

.lh-state-page .glass-card {
	max-width: 680px;
	margin-right: auto;
	margin-left: auto;
}

.lh-state-icon {
	width: 54px;
	height: 54px;
	margin: 0 auto 1rem;
	font-size: 1rem;
}

.lh-state-icon.is-success {
	border-color: rgba(37, 230, 167, .24);
	background: rgba(37, 230, 167, .065);
	color: var(--lh-green);
}

.lh-state-icon.is-danger {
	border-color: rgba(255, 89, 119, .24);
	background: rgba(255, 89, 119, .065);
	color: var(--lh-red);
}

.lh-state-icon.is-info {
	border-color: rgba(35, 215, 237, .24);
	background: rgba(35, 215, 237, .065);
	color: var(--lh-cyan);
}

.lh-state-icon.is-pulsing {
	animation: lh-soft-pulse 2.2s ease-in-out infinite;
}

.lh-auth-icon {
	width: 36px;
	height: 36px;
	margin: 0 0 .75rem;
	font-size: .68rem;
}

.lh-auth-card > .text-center:first-child > .lh-auth-icon,
.lh-contact-form-card > .text-center > .lh-auth-icon {
	display: inline-flex !important;
}

.lh-security-page .glass-card {
	border-top: 1px solid rgba(35, 215, 237, .24) !important;
}

.lh-affiliates-page .lh-stat-card h3,
.lh-stat-card h3 {
	margin: .18rem 0 0 !important;
	font-family: var(--lh-mono) !important;
	font-size: .95rem !important;
}

.lh-affiliate-amount {
	margin: 0 0 .45rem;
	color: var(--lh-green);
	font-family: var(--lh-mono);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 800;
}

.lh-language-switch {
	display: flex;
	justify-content: flex-end;
	gap: .45rem;
	margin-bottom: 1rem;
}

.lh-language-button {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 34px;
	padding: .35rem .55rem;
	border: 1px solid rgba(164, 173, 230, .14);
	border-radius: 5px;
	background: rgba(164, 173, 230, .04);
	color: #8e99b4;
	transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.lh-language-button img {
	width: 20px;
	height: 20px;
	border-radius: 3px;
}

.lh-language-button:hover,
.lh-language-button.is-active {
	border-color: rgba(35, 215, 237, .32);
	background: rgba(35, 215, 237, .07);
	color: var(--lh-cyan);
}

.lh-legal-page .prose {
	color: #aab4ca;
	font-size: .78rem;
	line-height: 1.8;
}

.lh-gamepanel-frame {
	height: calc(100vh - 220px);
	min-height: 560px;
}

.lh-auth-title {
	margin: 0 0 .3rem;
	color: #f4f6ff;
	font-size: 1rem;
	font-weight: 800;
}

.lh-invoice-payment-page .lh-client-page-header {
	margin-bottom: 1rem;
}

.lh-ticket-detail-page .grid > .glass-card {
	border-radius: 7px !important;
	background: rgba(15, 24, 50, .72) !important;
}

.lh-admin-metric-value {
	margin: .12rem 0 0;
	color: #eef2fc;
	font-family: var(--lh-mono);
	font-size: 1.18rem;
	font-weight: 800;
}

.lh-admin-overview-icon {
	display: inline-flex;
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	margin: 0 auto .75rem;
	border: 1px solid rgba(35, 215, 237, .2);
	border-radius: 7px;
	background: rgba(35, 215, 237, .06);
	color: var(--lh-cyan);
}

.lh-admin-overview-value {
	margin-bottom: .2rem;
	color: var(--lh-cyan);
	font-family: var(--lh-mono);
	font-size: 1.45rem;
	font-weight: 800;
}

.app-shell-admin .stat-mini > .lh-stat-icon,
.app-shell-admin .service-stat > .lh-stat-icon {
	margin: 0 auto .55rem;
}

.app-shell-admin .stat-mini > .lh-admin-metric-value {
	text-align: center;
}

.app-shell-admin .lh-client-page-header + .grid,
.app-shell-admin .lh-client-page-header + .glass-card {
	margin-top: 0;
}

.app-shell-admin .lh-admin-dashboard .section-header {
	min-height: 58px;
	padding: .72rem .9rem;
	gap: .6rem;
}

.app-shell-admin .lh-admin-dashboard .service-stat {
	padding: 1rem;
}

.lh-loading-icon {
	display: inline-flex;
	width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	margin: 0 auto .6rem;
	border: 1px solid rgba(35, 215, 237, .2);
	border-radius: 7px;
	background: rgba(35, 215, 237, .06);
	color: var(--lh-cyan);
	font-size: .75rem;
}

.lh-maintenance-indicator {
	animation: blink 1.5s infinite;
}

.lh-maintenance-progress {
	animation: progress-move 3s ease-in-out infinite;
}

.lh-news-page .lh-news-feature-icon + div {
	min-width: 0;
}

@media (max-width: 680px) {
	body.app-secondary-canvas .lh-flash-message > div {
		width: min(100% - 28px, 1420px);
	}

	.lh-client-page-header {
		align-items: stretch;
		flex-direction: column;
	}

	.lh-client-page-header > a,
	.lh-client-page-header > form,
	.lh-client-page-header > form button {
		width: 100%;
		justify-content: center;
	}

	.lh-gamepanel-frame {
		height: calc(100vh - 190px);
		min-height: 480px;
	}
}

@media (max-width: 1699px) {
	.app-shell-admin .lh-admin-desktop-nav,
	.app-shell-admin .lh-admin-desktop-actions {
		display: none !important;
	}

	.app-shell-admin .lh-admin-menu-button {
		display: inline-flex !important;
	}

	.app-shell-admin .lh-admin-mobile-menu:not(.hidden) {
		display: block !important;
	}
}

@media (min-width: 1700px) {
	.app-shell-admin .lh-admin-desktop-nav,
	.app-shell-admin .lh-admin-desktop-actions {
		display: flex !important;
	}

	.app-shell-admin .lh-admin-menu-button,
	.app-shell-admin .lh-admin-mobile-menu {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lh-state-icon.is-pulsing {
		animation: none !important;
	}
}

/* =========================================================
   AURORA EXPERIENCE V16
   Complete chromatic modernization: a vivid multi-hue palette
   (violet, fuchsia, cyan, amber, emerald), aurora canvas,
   gradient actions and rotating per-card accent colors.
   ========================================================= */
:root {
	--lh-bg: #0c0f26;
	--lh-bg-deep: #080a1c;
	--lh-panel: #151a3c;
	--lh-panel-2: #1b214b;
	--lh-panel-3: #232b5e;
	--lh-line: rgba(167, 139, 250, 0.2);
	--lh-line-strong: rgba(192, 132, 252, 0.44);
	--lh-text: #f3f4ff;
	--lh-soft: #bcc1e2;
	--lh-muted: #868dba;
	--lh-purple: #8b5cf6;
	--lh-violet: #c084fc;
	--lh-cyan: #22d3ee;
	--lh-cyan-bright: #67e8f9;
	--lh-red: #fb7185;
	--lh-green: #34d399;
	--lh-yellow: #fbbf24;
	--lh-pink: #818cf8;
	--lh-orange: #fb923c;
	--lh-sky: #38bdf8;
	--ac-violet: 139, 92, 246;
	--ac-pink: 99, 102, 241;
	--ac-fuchsia: 124, 58, 237;
	--ac-cyan: 34, 211, 238;
	--ac-sky: 56, 189, 248;
	--ac-amber: 251, 191, 36;
	--ac-orange: 251, 146, 60;
	--ac-emerald: 52, 211, 153;
	--lh-spectrum: linear-gradient(90deg, #6366f1, #8b5cf6 40%, #a855f7 68%, #22d3ee);
	--lh-spectrum-soft: linear-gradient(120deg, rgba(139, 92, 246, 0.24), rgba(109, 40, 217, 0.14) 38%, rgba(34, 211, 238, 0.12) 72%, rgba(251, 191, 36, 0.08));
	--lh-glow: 0 0 26px rgba(139, 92, 246, 0.18);
	--lh-glow-cyan: 0 0 26px rgba(34, 211, 238, 0.2);
}

::selection {
	background: rgba(109, 40, 217, 0.4);
	color: #fff;
}

* {
	scrollbar-color: #584ec2 transparent;
}

*::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #7c3aed, #818cf8);
}

/* ---------------------------------------------------------
   Aurora canvas: layered color fields instead of flat navy.
   --------------------------------------------------------- */
@keyframes lh-aurora-drift {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
	40% { transform: translate3d(2.2%, -1.6%, 0) scale(1.05); opacity: 1; }
	70% { transform: translate3d(-1.8%, 1.4%, 0) scale(0.97); opacity: 0.9; }
}

body.app-shell,
body.app-shell-public {
	background:
		radial-gradient(ellipse 56% 42% at 12% -8%, rgba(139, 92, 246, 0.17), transparent 64%),
		radial-gradient(ellipse 44% 34% at 88% -2%, rgba(109, 40, 217, 0.11), transparent 60%),
		radial-gradient(ellipse 52% 42% at 82% 102%, rgba(34, 211, 238, 0.09), transparent 62%),
		radial-gradient(ellipse 40% 32% at 4% 92%, rgba(251, 146, 60, 0.06), transparent 60%),
		linear-gradient(132deg, #0e1130 0%, #141939 46%, #0b0e27 100%) !important;
	background-attachment: fixed !important;
}

body.app-shell::before,
body.app-shell-public::before {
	background:
		linear-gradient(rgba(196, 181, 253, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(196, 181, 253, 0.03) 1px, transparent 1px) !important;
	background-size: 56px 56px !important;
	opacity: 0.7;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.78) 62%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.78) 62%, transparent 100%);
}

body.app-shell::after,
body.app-shell-public::after {
	inset: 0;
	width: auto;
	height: auto;
	background:
		radial-gradient(ellipse 30% 24% at 70% 30%, rgba(124, 58, 237, 0.05), transparent 70%),
		radial-gradient(ellipse 26% 22% at 24% 62%, rgba(56, 189, 248, 0.05), transparent 70%),
		linear-gradient(180deg, transparent 76%, rgba(139, 92, 246, 0.05)) !important;
	animation: lh-aurora-drift 22s ease-in-out infinite;
}

body.app-secondary-canvas main {
	background:
		radial-gradient(ellipse 48% 36% at 10% -8%, rgba(139, 92, 246, 0.13), transparent 62%),
		radial-gradient(ellipse 40% 30% at 92% -4%, rgba(109, 40, 217, 0.085), transparent 58%),
		radial-gradient(ellipse 46% 38% at 84% 104%, rgba(34, 211, 238, 0.075), transparent 60%),
		linear-gradient(180deg, rgba(22, 28, 64, 0.52), rgba(12, 17, 42, 0.26) 46%, rgba(10, 14, 36, 0.55)) !important;
}

body.app-secondary-canvas main::after {
	background:
		linear-gradient(90deg, transparent 4%, rgba(139, 92, 246, 0.16), rgba(109, 40, 217, 0.12) 42%, rgba(34, 211, 238, 0.12) 70%, rgba(251, 191, 36, 0.07), transparent 96%) 50% 104px / 100% 1px no-repeat,
		linear-gradient(90deg, transparent 10%, rgba(124, 58, 237, 0.055), transparent 90%) 50% calc(100% - 80px) / 100% 1px no-repeat;
}

body.app-secondary-canvas main > div > section::before,
body.app-secondary-canvas main > div > .lh-auth-page::after {
	background: linear-gradient(90deg, transparent 5%, rgba(139, 92, 246, 0.28), rgba(109, 40, 217, 0.2) 48%, rgba(34, 211, 238, 0.2), transparent 95%);
	opacity: 0.6;
}

.app-shell-public .lh-home-hero::before {
	background:
		linear-gradient(rgba(196, 181, 253, 0.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(196, 181, 253, 0.028) 1px, transparent 1px),
		linear-gradient(112deg, rgba(139, 92, 246, 0.085), rgba(109, 40, 217, 0.035) 44%, rgba(34, 211, 238, 0.025) 72%, transparent);
	background-size: 56px 56px, 56px 56px, auto;
}

/* ---------------------------------------------------------
   Top navigation: glassy, with a vivid spectrum edge and
   a distinct hue per destination.
   --------------------------------------------------------- */
.app-shell > header.app-topbar,
.app-shell-public > .lh-public-header {
	background: rgba(14, 17, 40, 0.88) !important;
	border-color: rgba(167, 139, 250, 0.18) !important;
}

.app-shell > header.app-topbar::after {
	background: var(--lh-spectrum);
	opacity: 0.55;
}

.app-shell .lh-primary-nav-link i,
.app-shell .lh-mobile-nav-link i {
	transition: color 0.16s ease, transform 0.16s ease;
}

.app-shell .lh-primary-nav-link:nth-child(7n+1) i,
.app-shell .lh-mobile-nav-link:nth-child(7n+1) i { color: #a78bfa !important; }
.app-shell .lh-primary-nav-link:nth-child(7n+2) i,
.app-shell .lh-mobile-nav-link:nth-child(7n+2) i { color: #818cf8 !important; }
.app-shell .lh-primary-nav-link:nth-child(7n+3) i,
.app-shell .lh-mobile-nav-link:nth-child(7n+3) i { color: #38bdf8 !important; }
.app-shell .lh-primary-nav-link:nth-child(7n+4) i,
.app-shell .lh-mobile-nav-link:nth-child(7n+4) i { color: #fbbf24 !important; }
.app-shell .lh-primary-nav-link:nth-child(7n+5) i,
.app-shell .lh-mobile-nav-link:nth-child(7n+5) i { color: #34d399 !important; }
.app-shell .lh-primary-nav-link:nth-child(7n+6) i,
.app-shell .lh-mobile-nav-link:nth-child(7n+6) i { color: #fb923c !important; }
.app-shell .lh-primary-nav-link:nth-child(7n+7) i,
.app-shell .lh-mobile-nav-link:nth-child(7n+7) i { color: #22d3ee !important; }

.app-shell .lh-primary-nav-link:hover i {
	transform: translateY(-1px);
}

.app-shell .lh-primary-nav-link.is-active,
.app-shell-public .lh-primary-nav-link.is-active {
	background: linear-gradient(120deg, rgba(139, 92, 246, 0.3), rgba(109, 40, 217, 0.16)) !important;
	color: #fff !important;
	box-shadow:
		inset 0 0 0 1px rgba(192, 132, 252, 0.34),
		0 6px 20px rgba(139, 92, 246, 0.2) !important;
}

.app-topbar .nav-link-active::after,
.app-topbar nav a[class*="bg-primary-500"]::after {
	background: linear-gradient(90deg, #c084fc, #818cf8);
	box-shadow: 0 0 12px rgba(109, 40, 217, 0.7);
}

#notifDropdown {
	background: linear-gradient(165deg, rgba(32, 37, 78, 0.97), rgba(18, 21, 49, 0.98)) !important;
	border: 1px solid rgba(167, 139, 250, 0.28) !important;
	box-shadow: 0 24px 60px rgba(5, 7, 25, 0.6), 0 0 30px rgba(139, 92, 246, 0.1) !important;
}

/* ---------------------------------------------------------
   Actions: violet-to-pink gradient primaries, tinted
   glass secondaries.
   --------------------------------------------------------- */
.app-shell .lh-button-primary,
.app-shell .btn-gradient,
.app-shell .lh-affiliate-transfer-button,
.app-shell-public .lh-view-all-games > a,
.app-shell-public .lh-store-card > .p-6:last-child > a,
.app-shell-public .lh-featured-games .lh-product-bottom > a,
.app-shell-public .lh-checkout-actions > button:not(:disabled) {
	background: linear-gradient(118deg, #7c3aed 0%, #a855f7 44%, #6d28d9 100%) !important;
	border-color: rgba(216, 180, 254, 0.38) !important;
	color: #fff !important;
	box-shadow:
		0 8px 24px rgba(147, 51, 234, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.app-shell .lh-button-primary:hover,
.app-shell .btn-gradient:hover,
.app-shell .lh-affiliate-transfer-button:hover,
.app-shell-public .lh-view-all-games > a:hover,
.app-shell-public .lh-store-card > .p-6:last-child > a:hover,
.app-shell-public .lh-featured-games .lh-product-bottom > a:hover,
.app-shell-public .lh-checkout-actions > button:not(:disabled):hover {
	transform: translateY(-1px);
	filter: brightness(1.08) saturate(1.05);
	box-shadow:
		0 12px 32px rgba(168, 85, 247, 0.42),
		0 4px 14px rgba(109, 40, 217, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.app-shell .lh-button-secondary,
.app-shell .lh-secondary-button,
.app-shell-public .lh-checkout-actions > a {
	border-color: rgba(167, 139, 250, 0.32) !important;
	background: rgba(139, 92, 246, 0.09) !important;
	color: #ddd3fe;
}

.app-shell .lh-button-secondary:hover,
.app-shell .lh-secondary-button:hover,
.app-shell-public .lh-checkout-actions > a:hover {
	transform: translateY(-1px);
	border-color: rgba(99, 102, 241, 0.45) !important;
	background: rgba(109, 40, 217, 0.11) !important;
	color: #fff;
	box-shadow: 0 9px 24px rgba(109, 40, 217, 0.18) !important;
}

/* ---------------------------------------------------------
   Headings and eyebrows pick up warmth.
   --------------------------------------------------------- */
.app-shell-public .lh-eyebrow,
.lh-secondary-heading .lh-eyebrow {
	color: #c084fc !important;
	text-shadow: 0 0 18px rgba(124, 58, 237, 0.32);
}

.lh-secondary-heading::before {
	background: linear-gradient(90deg, #6366f1, #8b5cf6 40%, #a855f7 68%, rgba(34, 211, 238, 0.6), transparent 92%);
}

.lh-client-page-title i,
.lh-store-heading h2 i,
.lh-config-title h2 i {
	color: #c084fc !important;
}

/* ---------------------------------------------------------
   Cards: brighter tinted glass with a per-card accent that
   rotates through the palette.
   --------------------------------------------------------- */
.app-shell .glass-card,
.app-shell .card,
.app-shell .modern-card,
.app-shell .section-card,
.app-shell .stat-card,
.app-shell .stat-mini,
.app-shell .filter-card,
.app-shell .invoice-card,
.app-shell .detail-card,
.app-shell .edit-card,
.app-shell .service-stat,
.app-shell .ticket-card,
body.app-secondary-canvas .glass-card,
body.app-secondary-canvas .card,
body.app-secondary-canvas .modern-card,
body.app-secondary-canvas .section-card,
body.app-secondary-canvas .profile-card,
body.app-secondary-canvas .detail-card,
body.app-secondary-canvas .edit-card,
body.app-secondary-canvas .invoice-card,
body.app-secondary-canvas .services-card,
body.app-secondary-canvas .service-stat,
body.app-secondary-canvas .ticket-card,
body.app-secondary-canvas .lh-auth-card,
body.app-secondary-canvas .lh-contact-form-card,
body.app-secondary-canvas .lh-contact-info-card {
	background:
		linear-gradient(rgba(196, 181, 253, 0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(196, 181, 253, 0.022) 1px, transparent 1px),
		linear-gradient(150deg, rgba(38, 45, 96, 0.88), rgba(20, 25, 58, 0.95)) !important;
	background-size: 34px 34px, 34px 34px, auto !important;
	border-color: rgba(167, 139, 250, 0.2) !important;
	box-shadow:
		0 18px 42px rgba(5, 8, 28, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.app-shell .glass-card:hover,
.app-shell .card:hover,
.app-shell .modern-card:hover,
.app-shell .section-card:hover,
.app-shell .invoice-card:hover,
.app-shell .detail-card:hover,
.app-shell .edit-card:hover,
.app-shell .service-stat:hover,
.app-shell .ticket-card:hover,
body.app-secondary-canvas .glass-card:hover,
body.app-secondary-canvas .card:hover,
body.app-secondary-canvas .modern-card:hover,
body.app-secondary-canvas .section-card:hover,
body.app-secondary-canvas .profile-card:hover,
body.app-secondary-canvas .detail-card:hover,
body.app-secondary-canvas .edit-card:hover,
body.app-secondary-canvas .invoice-card:hover,
body.app-secondary-canvas .services-card:hover,
body.app-secondary-canvas .service-stat:hover,
body.app-secondary-canvas .ticket-card:hover,
body.app-secondary-canvas .lh-contact-info-card:hover {
	border-color: rgba(var(--lh-ac, var(--ac-fuchsia)), 0.42) !important;
	background:
		linear-gradient(rgba(var(--lh-ac, var(--ac-fuchsia)), 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--lh-ac, var(--ac-fuchsia)), 0.03) 1px, transparent 1px),
		linear-gradient(150deg, rgba(43, 51, 106, 0.92), rgba(22, 28, 64, 0.97)) !important;
	background-size: 34px 34px, 34px 34px, auto !important;
	box-shadow:
		0 22px 50px rgba(5, 9, 30, 0.3),
		0 0 30px rgba(var(--lh-ac, var(--ac-fuchsia)), 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Accent rotation across grids of equivalent items. */
.lh-stat-grid > :nth-child(5n+1),
.lh-reason-grid > :nth-child(5n+1),
.lh-quote-grid > :nth-child(5n+1),
.lh-included-grid > :nth-child(5n+1),
.lh-store-grid > :nth-child(5n+1),
.lh-contact-page .lh-contact-info-card:nth-child(5n+1) { --lh-ac: var(--ac-violet); }

.lh-stat-grid > :nth-child(5n+2),
.lh-reason-grid > :nth-child(5n+2),
.lh-quote-grid > :nth-child(5n+2),
.lh-included-grid > :nth-child(5n+2),
.lh-store-grid > :nth-child(5n+2),
.lh-contact-page .lh-contact-info-card:nth-child(5n+2) { --lh-ac: var(--ac-pink); }

.lh-stat-grid > :nth-child(5n+3),
.lh-reason-grid > :nth-child(5n+3),
.lh-quote-grid > :nth-child(5n+3),
.lh-included-grid > :nth-child(5n+3),
.lh-store-grid > :nth-child(5n+3),
.lh-contact-page .lh-contact-info-card:nth-child(5n+3) { --lh-ac: var(--ac-sky); }

.lh-stat-grid > :nth-child(5n+4),
.lh-reason-grid > :nth-child(5n+4),
.lh-quote-grid > :nth-child(5n+4),
.lh-included-grid > :nth-child(5n+4),
.lh-store-grid > :nth-child(5n+4),
.lh-contact-page .lh-contact-info-card:nth-child(5n+4) { --lh-ac: var(--ac-amber); }

.lh-stat-grid > :nth-child(5n+5),
.lh-reason-grid > :nth-child(5n+5),
.lh-quote-grid > :nth-child(5n+5),
.lh-included-grid > :nth-child(5n+5),
.lh-store-grid > :nth-child(5n+5),
.lh-contact-page .lh-contact-info-card:nth-child(5n+5) { --lh-ac: var(--ac-emerald); }

/* Product cards rotate hues too (plain nth-child for broad
   browser support; an offset by non-card siblings is harmless). */
.lh-featured-games .lh-product-card:nth-child(5n+1),
.lh-product-section .lh-product-card:nth-child(5n+1) { --lh-ac: var(--ac-violet); }
.lh-featured-games .lh-product-card:nth-child(5n+2),
.lh-product-section .lh-product-card:nth-child(5n+2) { --lh-ac: var(--ac-pink); }
.lh-featured-games .lh-product-card:nth-child(5n+3),
.lh-product-section .lh-product-card:nth-child(5n+3) { --lh-ac: var(--ac-sky); }
.lh-featured-games .lh-product-card:nth-child(5n+4),
.lh-product-section .lh-product-card:nth-child(5n+4) { --lh-ac: var(--ac-amber); }
.lh-featured-games .lh-product-card:nth-child(5n+5),
.lh-product-section .lh-product-card:nth-child(5n+5) { --lh-ac: var(--ac-emerald); }

/* The stat-card top line follows the rotating accent. */
.lh-stat-card {
	--lh-stat-color: rgb(var(--lh-ac, var(--ac-cyan)));
}

.lh-stat-card::after {
	height: 2px;
	opacity: 0.9;
}

/* Reason, included and quote cards expose the accent on
   their top edge and icon. */
.lh-reason-grid > *,
.lh-included-grid > *,
.lh-quote-grid > *,
.lh-contact-page .lh-contact-info-card {
	position: relative;
}

.lh-reason-grid > *::after,
.lh-included-grid > *::after,
.lh-quote-grid > *::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(90deg, rgba(var(--lh-ac, var(--ac-violet)), 0.85), rgba(var(--lh-ac, var(--ac-violet)), 0.06) 86%);
	border-radius: inherit;
	pointer-events: none;
	opacity: 0.85;
}

.lh-reason-grid > * i,
.lh-included-grid .lh-included-feature i {
	color: rgb(var(--lh-ac, var(--ac-cyan))) !important;
}

/* Store/product cards: accent ring and glow on hover. */
.app-shell-public .lh-store-card:hover,
.app-shell-public .lh-product-card:hover {
	border-color: rgba(var(--lh-ac, var(--ac-cyan)), 0.5) !important;
	box-shadow:
		0 24px 54px rgba(5, 9, 30, 0.36),
		0 0 34px rgba(var(--lh-ac, var(--ac-cyan)), 0.14) !important;
}

.app-shell-public .lh-store-card .lh-store-game-label,
.app-shell-public .lh-product-card .lh-product-name {
	transition: color 0.18s ease;
}

.app-shell-public .lh-store-card:hover .lh-store-game-label,
.app-shell-public .lh-product-card:hover .lh-product-name {
	color: rgb(var(--lh-ac, var(--ac-cyan))) !important;
}

/* ---------------------------------------------------------
   Icon tiles: tinted violet-fuchsia by default; semantic
   variants (success/warning/danger/info) keep their colors.
   --------------------------------------------------------- */
.lh-icon-tile,
.lh-row-icon,
.lh-empty-icon,
.lh-action-icon {
	border-color: rgba(167, 139, 250, 0.28);
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(109, 40, 217, 0.07));
	color: #c4b5fd;
}

.lh-stat-icon {
	border-color: rgba(var(--lh-ac, var(--ac-violet)), 0.3);
	background: rgba(var(--lh-ac, var(--ac-violet)), 0.09);
	color: rgb(var(--lh-ac, var(--ac-violet)));
}

.lh-auth-icon,
.lh-news-feature-icon {
	border-color: rgba(192, 132, 252, 0.32) !important;
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(109, 40, 217, 0.1)) !important;
	color: #d8b4fe !important;
}

/* ---------------------------------------------------------
   Forms: violet focus ring with a pink edge.
   --------------------------------------------------------- */
.app-shell input[type="text"]:focus,
.app-shell input[type="email"]:focus,
.app-shell input[type="password"]:focus,
.app-shell input[type="number"]:focus,
.app-shell input[type="search"]:focus,
.app-shell input[type="url"]:focus,
.app-shell textarea:focus,
.app-shell select:focus {
	border-color: rgba(192, 132, 252, 0.58) !important;
	box-shadow:
		0 0 0 3px rgba(168, 85, 247, 0.16),
		0 0 18px rgba(109, 40, 217, 0.08) !important;
	outline: none !important;
}

/* ---------------------------------------------------------
   Tables: violet header text and tinted row hover.
   --------------------------------------------------------- */
.app-shell .lh-table-card thead th,
.app-shell table thead th {
	color: #b6aef5 !important;
}

.app-shell .lh-table-card tbody tr:hover > td {
	background: rgba(139, 92, 246, 0.06) !important;
}

.lh-table-card-heading {
	border-bottom-color: rgba(167, 139, 250, 0.16);
	background: linear-gradient(90deg, rgba(139, 92, 246, 0.07), rgba(109, 40, 217, 0.03) 60%, transparent);
}

/* ---------------------------------------------------------
   Footer: spectrum edge and warmer labels.
   --------------------------------------------------------- */
.app-shell-public .lh-footer::before {
	background: var(--lh-spectrum) !important;
	opacity: 0.5;
}

.lh-footer-label {
	color: #c4b5fd !important;
}

.lh-footer-links a:hover,
.lh-footer-legal a:hover {
	color: #818cf8 !important;
}

/* ---------------------------------------------------------
   Announcement bar and flash messages.
   --------------------------------------------------------- */
.app-shell .bg-primary-900\/20 {
	background:
		linear-gradient(110deg, rgba(139, 92, 246, 0.16), rgba(109, 40, 217, 0.09) 55%, rgba(34, 211, 238, 0.07)) !important;
	border-color: rgba(192, 132, 252, 0.28) !important;
}

/* ---------------------------------------------------------
   Admin keeps the same family with a deeper violet cast.
   --------------------------------------------------------- */
.app-shell-admin > header.app-topbar {
	background: rgba(17, 14, 38, 0.92) !important;
}

.app-shell-admin .lh-admin-action:hover {
	border-color: rgba(192, 132, 252, 0.4) !important;
	color: #e9d5ff !important;
}

/* ---------------------------------------------------------
   Motion safety.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body.app-shell::after,
	body.app-shell-public::after {
		animation: none !important;
	}
}

/* =========================================================
   PAGE POLISH V17
   Every route gets its own accent hue, and each page's key
   components are tuned to it: headers, icons, heroes, forms,
   legal prose, status pages and the storefront.
   ========================================================= */

/* Route accents: one signature color per destination. */
body.app-page-home { --page-ac: var(--ac-violet); }
body.app-page-shop { --page-ac: var(--ac-violet); }
body.app-page-services { --page-ac: var(--ac-sky); }
body.app-page-invoices { --page-ac: var(--ac-emerald); }
body.app-page-ticket { --page-ac: var(--ac-amber); }
body.app-page-affiliates,
body.app-page-aff { --page-ac: var(--ac-pink); }
body.app-page-news { --page-ac: var(--ac-violet); }
body.app-page-contact { --page-ac: var(--ac-cyan); }
body.app-page-tos { --page-ac: var(--ac-sky); }
body.app-page-privacy { --page-ac: var(--ac-emerald); }
body.app-page-login { --page-ac: var(--ac-violet); }
body.app-page-register { --page-ac: var(--ac-pink); }
body.app-page-recover,
body.app-page-checkpwkey { --page-ac: var(--ac-amber); }
body.app-page-gamepanel { --page-ac: var(--ac-orange); }
body.app-page-user { --page-ac: var(--ac-fuchsia); }
body.app-page-orders { --page-ac: var(--ac-emerald); }

/* ---------------------------------------------------------
   Client page headers carry the route color.
   --------------------------------------------------------- */
.lh-client-page-header {
	border-color: rgba(var(--page-ac, var(--ac-violet)), 0.24);
	background:
		radial-gradient(ellipse 46% 130% at 0% 0%, rgba(var(--page-ac, var(--ac-violet)), 0.12), transparent 60%),
		linear-gradient(rgba(196, 181, 253, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(196, 181, 253, 0.02) 1px, transparent 1px),
		linear-gradient(125deg, rgba(31, 39, 82, 0.86), rgba(16, 22, 50, 0.93));
	background-size: auto, 34px 34px, 34px 34px, auto;
}

.lh-client-page-header::before {
	height: 2px;
	background: linear-gradient(90deg, rgb(var(--page-ac, var(--ac-violet))), rgba(var(--page-ac, var(--ac-violet)), 0.25) 55%, transparent 90%);
	opacity: 0.95;
}

.lh-client-page-title > .lh-icon-tile {
	border-color: rgba(var(--page-ac, var(--ac-violet)), 0.36);
	background: rgba(var(--page-ac, var(--ac-violet)), 0.13);
	color: rgb(var(--page-ac, var(--ac-violet)));
	box-shadow: none;
}

.lh-client-page-title p {
	color: #99a3c8;
}

.lh-secondary-heading {
	border-color: rgba(var(--page-ac, var(--ac-violet)), 0.22);
}

/* ---------------------------------------------------------
   Home: hero, infrastructure, reasons, quotes, partners.
   --------------------------------------------------------- */
.app-shell-public .lh-home-hero .lh-hero-copy h1 {
	background: linear-gradient(102deg, #ffffff 28%, #ddd0ff 56%, #c9b8f0 86%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
}

.lh-hero-proof div:nth-child(1) i { color: #34d399 !important; }
.lh-hero-proof div:nth-child(2) i { color: #c084fc !important; }
.lh-hero-proof div:nth-child(3) i { color: #38bdf8 !important; }

.lh-hero-proof strong {
	color: #fff;
}

.lh-infrastructure-panel {
	border-color: rgba(167, 139, 250, 0.28) !important;
	box-shadow:
		0 24px 56px rgba(5, 8, 28, 0.34),
		0 0 36px rgba(139, 92, 246, 0.1) !important;
}

.lh-live-label {
	color: #6ee7b7 !important;
}

.lh-live-label::before {
	background: #34d399 !important;
	box-shadow: 0 0 10px rgba(52, 211, 153, 0.8) !important;
}

.lh-live-label.is-warning {
	color: var(--lh-yellow) !important;
}

.lh-live-label.is-warning::before {
	background: var(--lh-yellow) !important;
	box-shadow: 0 0 10px rgba(251, 191, 36, 0.7) !important;
}

.lh-location-row.is-active {
	border-color: rgba(192, 132, 252, 0.4) !important;
	background: linear-gradient(100deg, rgba(139, 92, 246, 0.16), rgba(109, 40, 217, 0.06) 70%) !important;
}

.lh-node-load:not(.is-warning) {
	color: #6ee7b7 !important;
}

.lh-platform-specs span:nth-child(1) i { color: #818cf8 !important; }
.lh-platform-specs span:nth-child(2) i { color: #38bdf8 !important; }
.lh-platform-specs span:nth-child(3) i { color: #fbbf24 !important; }

.lh-reason-grid article span {
	border-color: rgba(var(--lh-ac, var(--ac-violet)), 0.34) !important;
	background: rgba(var(--lh-ac, var(--ac-violet)), 0.12) !important;
	color: rgb(var(--lh-ac, var(--ac-violet))) !important;
	box-shadow: none;
}

.lh-reason-grid article small {
	color: rgb(var(--lh-ac, var(--ac-violet))) !important;
}

.lh-reason-grid article ul li::before,
.lh-included-feature i {
	color: rgb(var(--lh-ac, var(--ac-emerald)));
}

.lh-quote-grid blockquote {
	border-left: 2px solid rgba(var(--lh-ac, var(--ac-violet)), 0.55) !important;
}

.lh-quote-grid blockquote > i {
	color: rgba(var(--lh-ac, var(--ac-violet)), 0.85) !important;
}

.lh-quote-grid footer strong {
	color: rgb(var(--lh-ac, var(--ac-violet))) !important;
}

.lh-view-all-games {
	border-color: rgba(167, 139, 250, 0.26) !important;
	background:
		linear-gradient(108deg, rgba(139, 92, 246, 0.14), rgba(109, 40, 217, 0.08) 48%, rgba(34, 211, 238, 0.06)) !important;
}

.lh-view-all-icon {
	border-color: rgba(99, 102, 241, 0.36) !important;
	background: rgba(109, 40, 217, 0.12) !important;
	color: #818cf8 !important;
}

.lh-partners {
	border-color: rgba(167, 139, 250, 0.22) !important;
}

.lh-partners > div:first-child > a {
	color: #818cf8 !important;
}

.lh-partner-list > a:hover {
	border-color: rgba(99, 102, 241, 0.4) !important;
	box-shadow: 0 14px 32px rgba(109, 40, 217, 0.14) !important;
}

/* ---------------------------------------------------------
   Storefront: tabs, search and external links.
   --------------------------------------------------------- */
.lh-category-bar button {
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.lh-category-bar button:hover {
	border-color: rgba(192, 132, 252, 0.4) !important;
	color: #fff !important;
}

.lh-category-bar button.active {
	border-color: rgba(192, 132, 252, 0.45) !important;
	background: linear-gradient(115deg, rgba(139, 92, 246, 0.3), rgba(109, 40, 217, 0.15)) !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(139, 92, 246, 0.2) !important;
}

.lh-category-bar button.active i {
	color: #e9d5ff !important;
}

.lh-category-bar button small {
	border-color: rgba(99, 102, 241, 0.35) !important;
	background: rgba(109, 40, 217, 0.14) !important;
	color: #818cf8 !important;
}

.lh-store-external-links a:hover {
	border-color: rgba(56, 189, 248, 0.42) !important;
	color: #7dd3fc !important;
}

.lh-game-search input:focus {
	border-color: rgba(192, 132, 252, 0.55) !important;
}

.lh-store-region.is-active,
.lh-store-regions .is-active {
	border-color: rgba(52, 211, 153, 0.45) !important;
	background: rgba(52, 211, 153, 0.1) !important;
}

/* Configurator: steps and payment options pick up color. */
.lh-config-steps [data-step].is-active,
.lh-config-steps .is-active {
	border-color: rgba(192, 132, 252, 0.45) !important;
	background: linear-gradient(115deg, rgba(139, 92, 246, 0.24), rgba(109, 40, 217, 0.1)) !important;
	color: #fff !important;
}

.lh-option-card-heading i {
	color: #c084fc !important;
}

.lh-payment-icon {
	border-color: rgba(167, 139, 250, 0.3) !important;
	background: rgba(139, 92, 246, 0.1) !important;
	color: #c4b5fd !important;
}

.lh-promo-row input:focus {
	border-color: rgba(251, 191, 36, 0.5) !important;
}

.lh-summary-product strong,
.lh-summary-selected strong {
	color: #e9d5ff;
}

/* ---------------------------------------------------------
   Auth pages: spectrum crown, tinted icon, friendly links.
   --------------------------------------------------------- */
.lh-auth-card {
	position: relative;
}

.lh-auth-card::after {
	content: "";
	position: absolute;
	top: 0;
	right: 14%;
	left: 14%;
	height: 2px;
	border-radius: 2px;
	background: var(--lh-spectrum);
	opacity: 0.75;
	pointer-events: none;
}

.lh-auth-card .lh-auth-icon {
	width: 52px;
	height: 52px;
	margin: 0 auto 0.9rem;
	font-size: 1rem;
	border-radius: 14px;
	border-color: rgba(var(--page-ac, var(--ac-violet)), 0.38) !important;
	background: rgba(var(--page-ac, var(--ac-violet)), 0.13) !important;
	color: rgb(var(--page-ac, var(--ac-violet))) !important;
	box-shadow: none !important;
}

.app-shell input[type="checkbox"],
.app-shell input[type="radio"] {
	accent-color: #a855f7;
}

/* ---------------------------------------------------------
   Legal pages: readable, colorful prose.
   --------------------------------------------------------- */
.lh-language-button.is-active {
	border-color: rgba(192, 132, 252, 0.45) !important;
	background: linear-gradient(115deg, rgba(139, 92, 246, 0.26), rgba(109, 40, 217, 0.12)) !important;
}

.lh-legal-page .prose h1,
.lh-legal-page .prose h2,
.lh-legal-page .prose h3,
.lh-legal-page .prose h4 {
	color: #e4ddff !important;
}

.lh-legal-page .prose a {
	color: #818cf8 !important;
}

.lh-legal-page .prose strong {
	color: #fff !important;
}

.lh-legal-page .prose ul li::marker,
.lh-legal-page .prose ol li::marker {
	color: #c084fc;
}

/* ---------------------------------------------------------
   Status pages: expressive but still calm.
   --------------------------------------------------------- */
.lh-state-page h1 {
	background: linear-gradient(115deg, #a78bfa, #818cf8 55%, #fbbf24);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 6px 24px rgba(139, 92, 246, 0.3));
}

.lh-state-icon {
	border-radius: 16px;
}

.lh-state-icon:not(.is-success):not(.is-danger):not(.is-info) {
	border-color: rgba(192, 132, 252, 0.36);
	background: rgba(139, 92, 246, 0.12);
	color: #c4b5fd;
}

/* ---------------------------------------------------------
   Game panel frame.
   --------------------------------------------------------- */
.lh-gamepanel-frame {
	border-color: rgba(251, 146, 60, 0.32) !important;
	box-shadow:
		0 22px 48px rgba(5, 8, 28, 0.3),
		0 0 30px rgba(251, 146, 60, 0.08) !important;
}

/* ---------------------------------------------------------
   News and tickets: list rhythm.
   --------------------------------------------------------- */
.lh-news-header {
	border-color: rgba(167, 139, 250, 0.26) !important;
	background:
		linear-gradient(118deg, rgba(139, 92, 246, 0.16), rgba(109, 40, 217, 0.06) 58%, transparent),
		linear-gradient(145deg, rgba(31, 40, 84, 0.9), rgba(16, 23, 50, 0.96)) !important;
}

.ticket-alt {
	border-left: 2px solid rgba(251, 191, 36, 0.5) !important;
}

.lh-empty-state .lh-empty-icon {
	border-color: rgba(var(--page-ac, var(--ac-violet)), 0.32);
	background: rgba(var(--page-ac, var(--ac-violet)), 0.1);
	color: rgb(var(--page-ac, var(--ac-violet)));
}

/* ---------------------------------------------------------
   Affiliates: money widgets in warm tones.
   --------------------------------------------------------- */
.lh-affiliate-amount,
.lh-affiliate-receive {
	color: #6ee7b7 !important;
}

.lh-affiliate-transfer {
	border-color: rgba(99, 102, 241, 0.28) !important;
}

/* ---------------------------------------------------------
   Footer signal: a readable tinted band, not a decoration.
   --------------------------------------------------------- */
.lh-footer-signal {
	position: relative;
	align-items: center;
	margin-top: 1rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid rgba(167, 139, 250, 0.22);
	border-radius: 12px;
	background: linear-gradient(100deg, rgba(139, 92, 246, 0.12), rgba(109, 40, 217, 0.055) 48%, rgba(34, 211, 238, 0.05)) !important;
	opacity: 1;
}

.lh-footer-status > span {
	width: 9px;
	height: 9px;
	background: #34d399;
	box-shadow: 0 0 12px rgba(52, 211, 153, 0.85);
}

.lh-footer-status strong {
	color: #eef1ff;
	font-size: 0.74rem;
}

.lh-footer-support {
	align-items: center;
	gap: 0.85rem;
}

.lh-footer-support span {
	color: #9aa3c7;
	font-size: 0.58rem;
}

.lh-footer-support a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid rgba(192, 132, 252, 0.4);
	border-radius: 999px;
	background: rgba(139, 92, 246, 0.13);
	color: #ede9fe;
	font-size: 0.63rem;
	font-weight: 700;
	line-height: 1;
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.lh-footer-support a:hover {
	border-color: rgba(99, 102, 241, 0.5);
	background: rgba(109, 40, 217, 0.15);
	color: #fff;
	transform: translateY(-1px);
}

.lh-discord-float {
	background: linear-gradient(135deg, #6366f1, #8b5cf6 55%, #a855f7) !important;
	box-shadow: 0 12px 30px rgba(99, 102, 241, 0.4) !important;
}

.lh-cookie-bar {
	border-color: rgba(167, 139, 250, 0.3) !important;
}

/* =========================================================
   MOTION & DEPTH V18
   Micro-interactions, scroll reveals, accessible focus,
   table rhythm and admin/profile alignment with the
   aurora palette.
   ========================================================= */

/* Scroll reveal: .lh-reveal is added only by JS to elements
   below the fold, so content can never stay hidden without it. */
@keyframes lh-rise {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

.lh-reveal {
	opacity: 0;
}

.lh-reveal.lh-in {
	animation: lh-rise 0.6s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.lh-reveal {
		opacity: 1 !important;
	}

	.lh-reveal.lh-in {
		animation: none !important;
	}
}

/* ---------------------------------------------------------
   Micro-interactions.
   --------------------------------------------------------- */
.lh-product-card,
.lh-store-card,
.lh-stat-card,
.lh-included-card,
.lh-reason-grid > article,
.lh-quote-grid > blockquote,
.lh-partner-list > a {
	transition: transform 0.22s ease, border-color 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}

.app-shell-public .lh-store-card:hover,
.app-shell-public .lh-product-card:not(.is-disabled):hover,
.lh-reason-grid > article:hover,
.lh-quote-grid > blockquote:hover,
.lh-partner-list > a:hover {
	transform: translateY(-3px);
}

.lh-stat-card:hover {
	transform: translateY(-2px);
}

.app-shell .lh-button-primary:active,
.app-shell .btn-gradient:active,
.app-shell .lh-button-secondary:active,
.app-shell .lh-secondary-button:active {
	transform: translateY(0) scale(0.985);
}

.lh-icon-tile,
.lh-row-icon,
.lh-stat-icon,
.lh-empty-icon,
.lh-auth-icon {
	transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.lh-brand img,
.app-topbar img {
	transition: filter 0.2s ease, transform 0.2s ease;
}

.lh-brand:hover img {
	transform: scale(1.02);
}

.lh-discord-float {
	transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.lh-discord-float:hover {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 18px 40px rgba(99, 102, 241, 0.5) !important;
}

/* ---------------------------------------------------------
   Accessible, on-palette focus rings.
   --------------------------------------------------------- */
.app-shell a:focus-visible,
.app-shell button:focus-visible,
.app-shell [role="tab"]:focus-visible,
.app-shell input:focus-visible,
.app-shell select:focus-visible,
.app-shell textarea:focus-visible {
	outline: 2px solid rgba(192, 132, 252, 0.75) !important;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ---------------------------------------------------------
   Section headings get a spectrum kicker.
   --------------------------------------------------------- */
.app-shell-public .lh-section-heading h2,
.app-shell-public .lh-store-heading h2 {
	position: relative;
	display: inline-block;
	padding-bottom: 0.55rem;
}

.app-shell-public .lh-section-heading h2::after,
.app-shell-public .lh-store-heading h2::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 58px;
	height: 3px;
	border-radius: 3px;
	background: var(--lh-spectrum);
	opacity: 0.9;
}

/* ---------------------------------------------------------
   Tables: zebra rhythm + clearer hover.
   --------------------------------------------------------- */
.lh-table-card tbody tr:nth-child(even) > td {
	background: rgba(196, 181, 253, 0.022);
}

.lh-table-card tbody tr {
	transition: background 0.15s ease;
}

/* Generic prose links inside content pick up the palette. */
.app-shell main p > a:not([class]),
.app-shell main td > a:not([class]) {
	color: #c4b5fd;
	text-decoration-color: rgba(192, 132, 252, 0.5);
}

.app-shell main p > a:not([class]):hover,
.app-shell main td > a:not([class]):hover {
	color: #818cf8;
}

/* ---------------------------------------------------------
   Admin: dashboard metrics and actions join the palette.
   --------------------------------------------------------- */
.lh-admin-dashboard .lh-stat-grid > :nth-child(5n+1),
.lh-admin-dashboard .grid > :nth-child(5n+1) { --lh-ac: var(--ac-violet); }
.lh-admin-dashboard .lh-stat-grid > :nth-child(5n+2),
.lh-admin-dashboard .grid > :nth-child(5n+2) { --lh-ac: var(--ac-pink); }
.lh-admin-dashboard .lh-stat-grid > :nth-child(5n+3),
.lh-admin-dashboard .grid > :nth-child(5n+3) { --lh-ac: var(--ac-sky); }
.lh-admin-dashboard .lh-stat-grid > :nth-child(5n+4),
.lh-admin-dashboard .grid > :nth-child(5n+4) { --lh-ac: var(--ac-amber); }
.lh-admin-dashboard .lh-stat-grid > :nth-child(5n+5),
.lh-admin-dashboard .grid > :nth-child(5n+5) { --lh-ac: var(--ac-emerald); }

.lh-admin-overview-icon {
	border-color: rgba(var(--lh-ac, var(--ac-violet)), 0.34) !important;
	background: rgba(var(--lh-ac, var(--ac-violet)), 0.12) !important;
	color: rgb(var(--lh-ac, var(--ac-violet))) !important;
}

.lh-admin-overview-value,
.lh-admin-metric-value {
	color: #fff !important;
	font-family: var(--lh-mono) !important;
}

.app-shell-admin .lh-admin-action {
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.app-shell-admin .lh-admin-action-danger:hover {
	border-color: rgba(251, 113, 133, 0.45) !important;
	background: rgba(251, 113, 133, 0.1) !important;
	color: #fda4af !important;
}

body.app-page-admin { --page-ac: var(--ac-fuchsia); }

/* ---------------------------------------------------------
   Profile and notifications.
   --------------------------------------------------------- */
.lh-notification-summary {
	border-color: rgba(167, 139, 250, 0.24) !important;
}

.lh-security-icon {
	border-color: rgba(var(--page-ac, var(--ac-violet)), 0.34);
	background: rgba(var(--page-ac, var(--ac-violet)), 0.11);
	color: rgb(var(--page-ac, var(--ac-violet)));
}

.lh-security-icon.is-success {
	border-color: rgba(52, 211, 153, 0.3);
	background: rgba(52, 211, 153, 0.1);
	color: var(--lh-green);
}

/* ---------------------------------------------------------
   Cookie bar buttons.
   --------------------------------------------------------- */
.lh-cookie-bar #cookieReject {
	border: 1px solid rgba(167, 139, 250, 0.3);
	background: rgba(139, 92, 246, 0.08);
	color: #ddd3fe;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.lh-cookie-bar #cookieReject:hover {
	border-color: rgba(99, 102, 241, 0.45);
	background: rgba(109, 40, 217, 0.1);
}

/* =========================================================
   FOOTER REFINEMENT V19
   Readable hierarchy and quiet color in the page footer.
   ========================================================= */
.lh-footer-brand p {
	color: #9aa3c7;
}

.lh-footer-links a {
	transition: color 0.16s ease, transform 0.16s ease;
}

.lh-footer-links a:hover {
	transform: translateX(2px);
}

.lh-footer-payments img,
.lh-footer-trust img {
	opacity: 0.78;
	filter: saturate(0.85);
	transition: opacity 0.18s ease, filter 0.18s ease;
}

.lh-footer-payments img:hover,
.lh-footer-trust img:hover {
	opacity: 1;
	filter: saturate(1.1);
}

.lh-footer-legal a {
	transition: color 0.16s ease;
}

@media (max-width: 820px) {
	.lh-footer-signal {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.8rem;
	}

	.lh-footer-support {
		width: 100%;
		justify-content: space-between;
	}
}

/* =========================================================
   DIALOGS, ALERTS & EDITOR V20
   SweetAlert2, flash messages, mobile menu, rich-text
   editor and ticket conversations join the aurora theme.
   ========================================================= */

/* SweetAlert2: dialogs were stock-dark; bring them on-palette.
   !important is required because call sites pass inline colors. */
.swal2-popup {
	background: linear-gradient(160deg, #1e2452, #141838) !important;
	border: 1px solid rgba(167, 139, 250, 0.3) !important;
	border-radius: 16px !important;
	color: #f3f4ff !important;
	box-shadow:
		0 30px 80px rgba(4, 6, 24, 0.6),
		0 0 40px rgba(139, 92, 246, 0.12) !important;
}

.swal2-title {
	color: #fff !important;
}

.swal2-html-container {
	color: #b8bdde !important;
}

.swal2-styled.swal2-confirm {
	background: linear-gradient(118deg, #7c3aed, #a855f7 44%, #6d28d9) !important;
	border: 1px solid rgba(216, 180, 254, 0.38) !important;
	border-radius: 10px !important;
	box-shadow: 0 8px 22px rgba(147, 51, 234, 0.35) !important;
	font-weight: 700 !important;
}

.swal2-styled.swal2-confirm:focus,
.swal2-styled.swal2-cancel:focus,
.swal2-styled.swal2-deny:focus {
	box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.4) !important;
}

.swal2-styled.swal2-cancel {
	background: rgba(139, 92, 246, 0.1) !important;
	border: 1px solid rgba(167, 139, 250, 0.34) !important;
	border-radius: 10px !important;
	color: #ddd3fe !important;
	font-weight: 600 !important;
}

.swal2-styled.swal2-deny {
	background: rgba(251, 113, 133, 0.12) !important;
	border: 1px solid rgba(251, 113, 133, 0.4) !important;
	border-radius: 10px !important;
	color: #fda4af !important;
	font-weight: 600 !important;
}

.swal2-icon.swal2-success {
	border-color: rgba(52, 211, 153, 0.5) !important;
	color: #34d399 !important;
}

.swal2-icon.swal2-success [class^="swal2-success-line"] {
	background-color: #34d399 !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
	border-color: rgba(52, 211, 153, 0.4) !important;
}

.swal2-icon.swal2-error {
	border-color: rgba(251, 113, 133, 0.6) !important;
	color: #fb7185 !important;
}

.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
	background-color: #fb7185 !important;
}

.swal2-icon.swal2-warning {
	border-color: rgba(251, 191, 36, 0.6) !important;
	color: #fbbf24 !important;
}

.swal2-icon.swal2-info {
	border-color: rgba(56, 189, 248, 0.6) !important;
	color: #38bdf8 !important;
}

.swal2-icon.swal2-question {
	border-color: rgba(192, 132, 252, 0.6) !important;
	color: #c084fc !important;
}

.swal2-input,
.swal2-textarea,
.swal2-select {
	background: rgba(10, 13, 34, 0.7) !important;
	border: 1px solid rgba(167, 139, 250, 0.3) !important;
	border-radius: 10px !important;
	color: #f3f4ff !important;
}

.swal2-timer-progress-bar {
	background: var(--lh-spectrum) !important;
}

div:where(.swal2-container).swal2-backdrop-show {
	background: rgba(6, 8, 24, 0.72) !important;
	backdrop-filter: blur(4px);
}

/* ---------------------------------------------------------
   Flash messages: clearer card with a strong color edge.
   --------------------------------------------------------- */
.lh-flash-alert {
	border-left-width: 3px !important;
	box-shadow: 0 14px 34px rgba(5, 8, 28, 0.25);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-size: 0.86rem;
	font-weight: 600;
}

/* ---------------------------------------------------------
   Mobile menu: glassy aurora panel with clear states.
   --------------------------------------------------------- */
.lh-mobile-menu {
	background:
		radial-gradient(ellipse 70% 60% at 50% -10%, rgba(139, 92, 246, 0.14), transparent 64%),
		linear-gradient(170deg, rgba(23, 27, 60, 0.98), rgba(13, 16, 40, 0.99)) !important;
	border-top: 1px solid rgba(167, 139, 250, 0.24) !important;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.lh-mobile-nav-link {
	transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.lh-mobile-nav-link:hover {
	background: rgba(139, 92, 246, 0.12) !important;
	color: #fff !important;
}

.lh-mobile-nav-link.is-active {
	background: linear-gradient(115deg, rgba(139, 92, 246, 0.26), rgba(109, 40, 217, 0.13)) !important;
	color: #fff !important;
	box-shadow: inset 0 0 0 1px rgba(192, 132, 252, 0.3);
}

/* ---------------------------------------------------------
   Rich-text editor (news + ticket replies) matches the theme.
   --------------------------------------------------------- */
.trumbowyg-box,
.trumbowyg-editor {
	border: 1px solid rgba(167, 139, 250, 0.28) !important;
	border-radius: 10px !important;
	background: rgba(10, 13, 34, 0.66) !important;
	color: #f3f4ff !important;
}

.trumbowyg-editor {
	border: none !important;
}

.trumbowyg-button-pane {
	background: rgba(20, 24, 56, 0.95) !important;
	border-bottom: 1px solid rgba(167, 139, 250, 0.22) !important;
	border-radius: 10px 10px 0 0;
}

.trumbowyg-button-pane button {
	filter: none;
}

.trumbowyg-button-pane button:hover,
.trumbowyg-button-pane button.trumbowyg-active {
	background: rgba(139, 92, 246, 0.35) !important;
}

.trumbowyg-button-pane .trumbowyg-button-group::after {
	background: rgba(167, 139, 250, 0.2) !important;
}

/* ---------------------------------------------------------
   Ticket conversations: readable content, friendly links.
   --------------------------------------------------------- */
.message-content a {
	color: #c4b5fd;
	text-decoration: underline;
	text-decoration-color: rgba(192, 132, 252, 0.5);
}

.message-content a:hover {
	color: #818cf8;
}

.message-content code,
.message-content pre {
	padding: 0.1rem 0.35rem;
	border: 1px solid rgba(167, 139, 250, 0.22);
	border-radius: 6px;
	background: rgba(10, 13, 34, 0.7);
	color: #a5f3fc;
	font-size: 0.82em;
}

.message-content pre {
	padding: 0.7rem 0.9rem;
	overflow-x: auto;
}

/* ---------------------------------------------------------
   News listing: titles glow toward the palette on hover.
   --------------------------------------------------------- */
.lh-news-page .glass-card:hover h2,
.lh-news-page .glass-card:hover h3 {
	color: #c4b5fd !important;
}

/* ---------------------------------------------------------
   Misc: spinners, invoice detail, dividers.
   --------------------------------------------------------- */
.lh-config-loading i,
.app-shell .fa-spinner,
.app-shell .fa-circle-notch {
	color: #c084fc !important;
}

.invoice-box {
	border-color: rgba(52, 211, 153, 0.24) !important;
}

.app-shell hr {
	border-color: rgba(167, 139, 250, 0.14) !important;
}

/* =========================================================
   ADMIN DEPTH & PAYMENT FLOW V21
   The admin workspace and the invoice payment flow get the
   full aurora treatment.
   ========================================================= */

/* Admin navigation: colorful icons and a gradient active pill,
   matching the public navigation language. */
.lh-admin-desktop-nav > a,
.lh-admin-mobile-menu a {
	transition: background 0.16s ease, color 0.16s ease;
}

.lh-admin-desktop-nav > a[class*="bg-primary-500"],
.lh-admin-mobile-menu a[class*="bg-primary-500"] {
	background: linear-gradient(120deg, rgba(139, 92, 246, 0.3), rgba(109, 40, 217, 0.16)) !important;
	color: #fff !important;
	box-shadow: inset 0 0 0 1px rgba(192, 132, 252, 0.32);
}

.lh-admin-desktop-nav > a[class*="bg-primary-500"] i {
	color: #e9d5ff !important;
}

.lh-admin-desktop-nav > a:nth-child(8n+1) i,
.lh-admin-mobile-menu a:nth-child(8n+1) i { color: #a78bfa; }
.lh-admin-desktop-nav > a:nth-child(8n+2) i,
.lh-admin-mobile-menu a:nth-child(8n+2) i { color: #818cf8; }
.lh-admin-desktop-nav > a:nth-child(8n+3) i,
.lh-admin-mobile-menu a:nth-child(8n+3) i { color: #38bdf8; }
.lh-admin-desktop-nav > a:nth-child(8n+4) i,
.lh-admin-mobile-menu a:nth-child(8n+4) i { color: #fbbf24; }
.lh-admin-desktop-nav > a:nth-child(8n+5) i,
.lh-admin-mobile-menu a:nth-child(8n+5) i { color: #34d399; }
.lh-admin-desktop-nav > a:nth-child(8n+6) i,
.lh-admin-mobile-menu a:nth-child(8n+6) i { color: #fb923c; }
.lh-admin-desktop-nav > a:nth-child(8n+7) i,
.lh-admin-mobile-menu a:nth-child(8n+7) i { color: #22d3ee; }
.lh-admin-desktop-nav > a:nth-child(8n+8) i,
.lh-admin-mobile-menu a:nth-child(8n+8) i { color: #c084fc; }

/* Admin metrics read as instruments. */
.lh-admin-metric-value,
.lh-admin-overview-value {
	font-size: 1.45rem;
	letter-spacing: -0.01em;
}

.app-shell-admin .stat-card .p-6 {
	position: relative;
}

/* Admin tables: same rhythm as client tables, wherever they live. */
.app-shell-admin table thead th {
	color: #b6aef5 !important;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.app-shell-admin table tbody tr {
	transition: background 0.15s ease;
}

.app-shell-admin table tbody tr:nth-child(even) > td {
	background: rgba(196, 181, 253, 0.022);
}

.app-shell-admin table tbody tr:hover > td {
	background: rgba(139, 92, 246, 0.07) !important;
}

/* Admin forms: section labels and fieldset separation. */
.app-shell-admin .lh-admin-config-form label,
.app-shell-admin .lh-admin-package-form label,
.app-shell-admin .lh-admin-coupon-form label,
.app-shell-admin .lh-admin-order-editor label,
.app-shell-admin .lh-admin-invoice-editor label {
	color: #b8bdde;
}

/* ---------------------------------------------------------
   Invoice payment: selectable method cards and a total
   that reads instantly.
   --------------------------------------------------------- */
.lh-invoice-payment-page .space-y-2 > div[class*="rounded-xl"] {
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.2s ease;
}

.lh-invoice-payment-page .space-y-2 > div[class*="rounded-xl"]:hover {
	border-color: rgba(167, 139, 250, 0.4) !important;
}

.lh-invoice-payment-page .space-y-2 > div[class*="rounded-xl"]:has(input[type="radio"]:checked) {
	border-color: rgba(192, 132, 252, 0.55) !important;
	background:
		linear-gradient(110deg, rgba(139, 92, 246, 0.16), rgba(109, 40, 217, 0.07)) !important;
	box-shadow:
		0 0 0 1px rgba(192, 132, 252, 0.2),
		0 8px 24px rgba(139, 92, 246, 0.14);
}

.lh-invoice-payment-page .space-y-2 > div[class*="rounded-xl"]:has(input[type="radio"]:checked) span.font-medium {
	color: #e9d5ff !important;
}

.lh-invoice-payment-page #totalAmount {
	background: linear-gradient(100deg, #a7f3d0, #34d399);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: var(--lh-mono);
}

.lh-invoice-payment-page h4 {
	letter-spacing: -0.01em;
}

/* Invoice detail + payment headers share the page accent. */
body.app-page-invoices .lh-flash-alert {
	border-left-color: rgb(var(--ac-emerald)) !important;
}

/* ---------------------------------------------------------
   Generic selectable cards across the storefront configurator
   (any rounded label wrapping a checked radio lights up).
   --------------------------------------------------------- */
.lh-config-options label:has(input[type="radio"]:checked),
.lh-config-option-group label:has(input[type="radio"]:checked) {
	border-color: rgba(192, 132, 252, 0.55) !important;
	background: linear-gradient(110deg, rgba(139, 92, 246, 0.16), rgba(109, 40, 217, 0.07)) !important;
	box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.2) !important;
}

/* Password strength meter: gradient fill with a soft glow per level. */
#passwordStrengthFill.bg-red-500 {
	background: linear-gradient(90deg, #fb7185, #f43f5e) !important;
	box-shadow: 0 0 10px rgba(251, 113, 133, 0.55);
}

#passwordStrengthFill.bg-yellow-500 {
	background: linear-gradient(90deg, #fbbf24, #fb923c) !important;
	box-shadow: 0 0 10px rgba(251, 191, 36, 0.55);
}

#passwordStrengthFill.bg-blue-500 {
	background: linear-gradient(90deg, #38bdf8, #818cf8) !important;
	box-shadow: 0 0 10px rgba(56, 189, 248, 0.55);
}

#passwordStrengthFill.bg-green-500 {
	background: linear-gradient(90deg, #34d399, #22d3ee) !important;
	box-shadow: 0 0 10px rgba(52, 211, 153, 0.55);
}

/* =========================================================
   AURORA FX V22
   Companion styles for assets/js/aurora-fx.js: scrolled
   topbar depth and 3D-tilt rendering hints.
   ========================================================= */
.app-shell > header.app-topbar,
.app-shell-public > .lh-public-header {
	transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.app-shell > header.app-topbar.is-scrolled,
.app-shell-public > .lh-public-header.is-scrolled {
	background: rgba(11, 13, 33, 0.97) !important;
	border-color: rgba(167, 139, 250, 0.26) !important;
	box-shadow:
		0 16px 44px rgba(3, 5, 20, 0.5),
		0 1px 0 rgba(139, 92, 246, 0.12) !important;
}

.lh-tilt {
	transform-style: preserve-3d;
	will-change: transform;
}

.lh-tilt .lh-product-image img,
.lh-tilt .lh-store-card-image img {
	transform: translateZ(18px);
}

/* =========================================================
   LEGACY SOLID BUTTONS & STATE PAGES V23
   The remaining flat-indigo buttons (profile, 2FA, orders,
   admin settings) adopt the aurora gradient, and the
   maintenance page gets its own glow.
   ========================================================= */

/* Solid primary buttons only — [class~=] matches the exact
   class, so translucent badge variants (bg-primary-500/20)
   are untouched. */
.app-shell a[class~="bg-primary-500"],
.app-shell a[class~="bg-primary-600"],
.app-shell button[class~="bg-primary-500"],
.app-shell button[class~="bg-primary-600"],
.app-shell input[type="submit"][class~="bg-primary-500"],
.app-shell input[type="submit"][class~="bg-primary-600"] {
	background: linear-gradient(118deg, #7c3aed, #a855f7 44%, #6d28d9) !important;
	border: 1px solid rgba(216, 180, 254, 0.32) !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(147, 51, 234, 0.28) !important;
	transition: filter 0.18s ease, box-shadow 0.2s ease, transform 0.18s ease !important;
}

.app-shell a[class~="bg-primary-500"]:hover,
.app-shell a[class~="bg-primary-600"]:hover,
.app-shell button[class~="bg-primary-500"]:hover,
.app-shell button[class~="bg-primary-600"]:hover {
	filter: brightness(1.08) saturate(1.05);
	box-shadow: 0 10px 26px rgba(168, 85, 247, 0.4) !important;
}

/* ---------------------------------------------------------
   Maintenance page: aurora progress and indicator.
   --------------------------------------------------------- */
.lh-maintenance-indicator {
	background: #c084fc !important;
	box-shadow: 0 0 14px rgba(192, 132, 252, 0.8) !important;
}

.lh-maintenance-page .text-primary-400 {
	color: #c4b5fd !important;
}

.lh-maintenance-progress {
	background: linear-gradient(90deg, #6366f1, #8b5cf6 35%, #a855f7 60%, #22d3ee 85%, #6366f1) !important;
}

.lh-maintenance-page .lh-state-icon {
	width: 64px;
	height: 64px;
	font-size: 1.2rem;
}

/* ---------------------------------------------------------
   Profile: section titles and inline info icons.
   --------------------------------------------------------- */
.lh-profile-page .glass-card h5 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.lh-profile-page .glass-card h5::before {
	content: "";
	width: 4px;
	height: 16px;
	border-radius: 3px;
	background: linear-gradient(180deg, #c084fc, #818cf8);
}

.lh-profile-page .text-white\/70,
.lh-profile-page i[class*="text-white"] {
	color: #a5b4fc !important;
}

/* ---------------------------------------------------------
   Notifications page: summary band matches the route accent.
   --------------------------------------------------------- */
.lh-notification-summary {
	background:
		radial-gradient(ellipse 40% 120% at 0% 0%, rgba(var(--ac-fuchsia), 0.1), transparent 60%),
		linear-gradient(145deg, rgba(36, 44, 92, 0.86), rgba(19, 25, 56, 0.94)) !important;
}

/* =========================================================
   UNIFICATION PASS V24
   One type scale, one UI font, one radius and one button
   system across home, store, client and admin pages. This
   layer deliberately overrides the size drift accumulated
   by the previous passes.
   ========================================================= */
:root {
	--lh-radius: 14px;
	--lh-radius-sm: 10px;
	--fs-hero: clamp(2.1rem, 4vw, 2.9rem);
	--fs-section: clamp(1.4rem, 2.2vw, 1.8rem);
	--fs-page-title: 1.25rem;
	--fs-card-title: 1rem;
	--fs-body: 0.9rem;
	--fs-sub: 0.82rem;
	--fs-label: 0.74rem;
}

/* --- Font: Inter for UI everywhere; mono only for real code. */
body.app-shell {
	font-size: 15.5px;
	line-height: 1.55;
}

.app-shell td:first-child,
.app-shell input[type="number"],
.app-shell [class*="text-2xl"].font-bold,
.app-shell [class*="text-3xl"].font-bold,
.app-shell [class*="text-4xl"].font-bold,
.lh-stat-card h4,
.lh-admin-metric-value,
.lh-admin-overview-value {
	font-family: var(--lh-font) !important;
}

.app-shell code,
.app-shell pre,
.app-shell kbd,
.app-shell samp,
.app-shell .font-mono {
	font-family: var(--lh-mono) !important;
}

.app-shell h1, .app-shell h2, .app-shell h3,
.app-shell h4, .app-shell h5, .app-shell h6 {
	color: #f3f4ff;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* --- Heading scale, identical on every route. */
.app-shell-public .lh-home-hero .lh-hero-copy h1 {
	font-size: var(--fs-hero) !important;
}

.app-shell-public .lh-section-heading h2,
.app-shell-public .lh-store-heading h2,
.app-shell-public .lh-config-title h2 {
	font-size: var(--fs-section) !important;
	font-weight: 800 !important;
}

.lh-client-page-title h2,
.lh-client-page-title h3 {
	font-size: var(--fs-page-title) !important;
	font-weight: 800 !important;
}

.lh-client-page-title p {
	font-size: var(--fs-sub) !important;
	color: #9aa3c8 !important;
	line-height: 1.5 !important;
}

.lh-secondary-heading h1,
.lh-secondary-heading h2 {
	font-size: 1.45rem !important;
	font-weight: 800 !important;
}

.app-shell .glass-card h3,
.app-shell .glass-card h5,
.app-shell .glass-card h6:not(.lh-stat-card h6) {
	font-size: var(--fs-card-title);
}

/* --- Eyebrows: one voice. */
.lh-eyebrow {
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
}

/* --- Stat cards: readable labels, strong Inter values. */
.lh-stat-card h6 {
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lh-stat-card h4,
.lh-stat-card h3 {
	font-size: 1.3rem !important;
	font-weight: 800 !important;
}

/* --- Micro copy floor: nothing under ~12px anywhere. */
.lh-hero-proof span,
.lh-product-specs span,
.lh-console-topline span,
.lh-console-topline small,
.lh-region-selector-label span,
.lh-region-selector-label small,
.lh-live-label,
.lh-node-load,
.lh-platform-specs small,
.lh-platform-title small,
.lh-store-nav-label,
.lh-game-result-meta,
.lh-store-region,
.lh-included-feature,
.lh-config-section-title,
.lh-option-card-heading,
.lh-product-bottom small,
.lh-product-disabled,
.lh-view-all-games small,
.lh-partner-list small,
.lh-quote-grid footer span,
.lh-contact-info-card small,
.lh-cookie-bar p,
.lh-footer-status strong,
.lh-footer-support span,
.lh-footer-legal,
.lh-footer-legal a {
	font-size: var(--fs-label) !important;
	line-height: 1.45;
}

.app-shell main small {
	font-size: 0.73rem;
}

.lh-hero-proof strong {
	font-size: 1.05rem !important;
}

.lh-platform-specs strong,
.lh-platform-title strong {
	font-size: 0.86rem !important;
}

.lh-product-bottom strong {
	font-size: 1.15rem !important;
}

.lh-product-name h3 {
	font-size: 1.02rem !important;
}

.lh-footer-links a {
	font-size: 0.8rem !important;
}

.lh-footer-label {
	font-size: 0.72rem !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lh-footer-brand p {
	font-size: 0.82rem !important;
	line-height: 1.6;
}

.lh-footer-support a {
	font-size: 0.78rem !important;
}

/* --- One button system (content areas; the compact topbar
       keeps its own sizing). */
.app-shell main .lh-button-primary,
.app-shell main .lh-button-secondary,
.app-shell main .btn-gradient,
.app-shell main .lh-secondary-button,
.app-shell main .lh-affiliate-transfer-button,
.app-shell main .lh-checkout-actions > a,
.app-shell main .lh-checkout-actions > button {
	min-height: 42px;
	padding: 0.55rem 1.15rem !important;
	border-radius: var(--lh-radius-sm) !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	line-height: 1.2 !important;
}

/* --- One radius language. */
.app-shell .glass-card,
.app-shell .card,
.app-shell .modern-card,
.app-shell .section-card,
.app-shell .stat-card,
.app-shell .filter-card,
.app-shell .invoice-card,
.app-shell .detail-card,
.app-shell .edit-card,
.app-shell .service-stat,
.app-shell .ticket-card,
.app-shell .lh-auth-card,
.app-shell .lh-contact-form-card,
.app-shell .lh-contact-info-card,
.app-shell .lh-table-card,
.app-shell .lh-stat-card,
.app-shell .lh-store-card,
.app-shell .lh-product-card,
.app-shell .lh-included-card,
.app-shell .lh-checkout-card,
.app-shell .lh-infrastructure-panel,
.app-shell .lh-config-builder,
.lh-client-page-header,
.lh-secondary-heading,
.lh-news-header,
.lh-view-all-games,
.lh-notification-summary {
	border-radius: var(--lh-radius) !important;
}

.lh-icon-tile,
.lh-row-icon,
.lh-stat-icon,
.lh-action-icon,
.lh-news-feature-icon {
	border-radius: 10px !important;
}

.app-shell main input[type="text"],
.app-shell main input[type="email"],
.app-shell main input[type="password"],
.app-shell main input[type="number"],
.app-shell main input[type="search"],
.app-shell main input[type="url"],
.app-shell main textarea,
.app-shell main select {
	border-radius: 10px !important;
	font-size: 0.9rem !important;
	font-family: var(--lh-font) !important;
}

.app-shell main form label {
	font-size: 0.8rem;
	font-weight: 600;
	color: #b8bdde;
}

/* --- Tables: one rhythm everywhere (client + admin). */
.app-shell table td {
	font-size: 0.85rem !important;
	font-family: var(--lh-font) !important;
}

.app-shell table thead th {
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.lh-table-card-heading {
	padding: 0.85rem 1.1rem;
}

.lh-table-card-heading h4,
.lh-table-card-heading h5 {
	font-size: 0.95rem !important;
	font-weight: 750 !important;
}

/* --- Client page headers: same padding and presence as the
       rest of the card system. */
.lh-client-page-header {
	min-height: 84px;
	padding: 1.1rem 1.3rem;
	margin-bottom: 1.25rem;
}

.workspace-page > div > .lh-client-page-header {
	min-height: 84px;
	margin-bottom: 1.25rem !important;
}

.lh-client-page-title > .lh-icon-tile {
	width: 44px;
	height: 44px;
	font-size: 0.85rem;
}

/* --- Secondary buttons in headers match the system. */
.lh-secondary-button {
	border-radius: var(--lh-radius-sm) !important;
}

/* --- Body copy on cards. */
.app-shell .glass-card p,
.app-shell .detail-card p,
.app-shell .edit-card p {
	line-height: 1.55;
}

/* =========================================================
   NEWS ALIGNMENT V25
   The news listing now uses the standard page header and the
   shared card system; these are its only bespoke pieces.
   ========================================================= */
.lh-news-card {
	--lh-ac: var(--ac-violet);
}

.lh-news-page .grid > .lh-news-card:nth-child(5n+1) { --lh-ac: var(--ac-pink); }
.lh-news-page .grid > .lh-news-card:nth-child(5n+2) { --lh-ac: var(--ac-sky); }
.lh-news-page .grid > .lh-news-card:nth-child(5n+3) { --lh-ac: var(--ac-amber); }
.lh-news-page .grid > .lh-news-card:nth-child(5n+4) { --lh-ac: var(--ac-emerald); }
.lh-news-page .grid > .lh-news-card:nth-child(5n+5) { --lh-ac: var(--ac-cyan); }

.lh-news-card-bar {
	height: 3px;
	background: linear-gradient(90deg, rgb(var(--lh-ac)), rgba(var(--lh-ac), 0.08) 85%);
}

.lh-news-badge {
	display: inline-flex;
	align-items: center;
	margin-bottom: 0.55rem;
	padding: 0.22rem 0.62rem;
	border: 1px solid rgba(192, 132, 252, 0.4);
	border-radius: 999px;
	background: linear-gradient(115deg, rgba(139, 92, 246, 0.3), rgba(109, 40, 217, 0.18));
	color: #c084fc;
	font-size: 0.64rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lh-news-title-featured {
	margin: 0 0 0.45rem;
	font-size: 1.35rem !important;
	font-weight: 800 !important;
}

.lh-news-title {
	margin: 0 0 0.3rem;
	font-size: 1.02rem !important;
	font-weight: 700 !important;
	transition: color 0.16s ease;
}

.lh-news-card:hover .lh-news-title,
.lh-news-card-featured:hover .lh-news-title-featured {
	color: rgb(var(--lh-ac)) !important;
}

.lh-news-card .lh-row-icon,
.lh-news-card .lh-news-feature-icon {
	border-color: rgba(var(--lh-ac), 0.34) !important;
	background: rgba(var(--lh-ac), 0.12) !important;
	color: rgb(var(--lh-ac)) !important;
}

.lh-news-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	color: #8289ad;
	font-size: 0.76rem;
}

.lh-news-meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.lh-news-meta i {
	color: rgba(var(--lh-ac), 0.85);
	font-size: 0.7rem;
}

.lh-news-divider {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.75rem 0 1.1rem;
}

.lh-news-divider::before,
.lh-news-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.32), transparent);
}

.lh-news-divider span {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #9aa3c8;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lh-news-divider span i {
	color: #c084fc;
}

/* Danger variants for the shared secondary/icon buttons. */
.lh-secondary-button.is-danger:hover,
.lh-action-icon.is-danger:hover {
	border-color: rgba(251, 113, 133, 0.45) !important;
	background: rgba(251, 113, 133, 0.1) !important;
	color: #fda4af !important;
}

.lh-action-icon {
	cursor: pointer;
}

/* Editor-generated content (news posts, ToS, tickets) is
   normalized to the same type scale as the UI. */
.app-shell .prose h1 { font-size: 1.4rem !important; }
.app-shell .prose h2 { font-size: 1.2rem !important; }
.app-shell .prose h3 { font-size: 1.05rem !important; }
.app-shell .prose h4 { font-size: 0.95rem !important; }

.app-shell .prose h1,
.app-shell .prose h2,
.app-shell .prose h3,
.app-shell .prose h4 {
	margin-top: 1.1em;
	margin-bottom: 0.45em;
	color: #e4ddff !important;
	font-weight: 750 !important;
	line-height: 1.3 !important;
}

.app-shell .prose p,
.app-shell .prose li {
	font-size: 0.9rem;
	line-height: 1.65;
}

.app-shell .prose a {
	color: #c4b5fd !important;
	text-decoration-color: rgba(192, 132, 252, 0.5);
}

.app-shell .prose a:hover {
	color: #818cf8 !important;
}

.app-shell .prose img {
	border-radius: 10px;
}

.app-shell .prose ul li::marker,
.app-shell .prose ol li::marker {
	color: #c084fc;
}

/* Auth page titles sit on the same scale as client pages. */
.lh-auth-title,
.lh-auth-card h2 {
	font-size: 1.25rem !important;
	font-weight: 800 !important;
}

/* =========================================================
   SERVICES SHOWCASE V26
   The services list becomes a card grid: game art banner,
   status-tinted accents, copyable address and a clear
   primary action per service.
   ========================================================= */
.lh-service-card { --sv: var(--ac-violet); }
.lh-service-card[data-status="active"] { --sv: var(--ac-emerald); }
.lh-service-card[data-status="installing"] { --sv: var(--ac-sky); }
.lh-service-card[data-status="suspended"] { --sv: var(--ac-amber); }
.lh-service-card[data-status="terminated"],
.lh-service-card[data-status="failed"] { --sv: 251, 113, 133; }

.lh-service-card {
	display: flex;
	flex-direction: column;
	border-color: rgba(var(--sv), 0.22) !important;
	transition: transform 0.22s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}

.lh-service-card:hover {
	transform: translateY(-3px);
	border-color: rgba(var(--sv), 0.45) !important;
	box-shadow:
		0 22px 50px rgba(5, 9, 30, 0.32),
		0 0 30px rgba(var(--sv), 0.12) !important;
}

.lh-service-card[data-status="terminated"] {
	opacity: 0.72;
}

.lh-service-banner {
	position: relative;
	height: 86px;
	overflow: hidden;
	background:
		radial-gradient(ellipse 70% 120% at 20% 0%, rgba(var(--sv), 0.2), transparent 65%),
		linear-gradient(135deg, rgba(30, 37, 82, 0.9), rgba(16, 21, 50, 0.95));
}

.lh-service-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	opacity: 0.5;
}

.lh-service-banner-shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(10, 13, 34, 0.1), rgba(13, 17, 40, 0.78) 88%),
		linear-gradient(90deg, rgba(var(--sv), 0.14), transparent 55%);
}

.lh-service-banner-status {
	position: absolute;
	top: 10px;
	right: 10px;
}

.lh-service-banner::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 2px;
	background: linear-gradient(90deg, rgb(var(--sv)), rgba(var(--sv), 0.08) 80%);
}

.lh-service-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.7rem;
	padding: 1rem 1.1rem;
}

.lh-service-head {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.lh-service-head .lh-row-icon {
	border-color: rgba(var(--sv), 0.34) !important;
	background: rgba(var(--sv), 0.12) !important;
	color: rgb(var(--sv)) !important;
}

.lh-service-name {
	margin: 0;
	overflow: hidden;
	font-size: 1.02rem !important;
	font-weight: 750 !important;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lh-service-cycle {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.15rem 0 0;
	color: #8e96bd;
	font-size: 0.76rem;
}

.lh-service-cycle i {
	color: rgba(var(--sv), 0.8);
	font-size: 0.66rem;
}

.lh-service-net {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.lh-ip-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.32rem 0.6rem;
	border: 1px solid rgba(167, 139, 250, 0.26);
	border-radius: 8px;
	background: rgba(10, 13, 34, 0.6);
	color: #a5f3fc;
	cursor: pointer;
	transition: border-color 0.16s ease, background 0.16s ease;
}

.lh-ip-chip code {
	font-size: 0.76rem;
}

.lh-ip-chip i {
	color: #8289ad;
	font-size: 0.68rem;
	transition: color 0.16s ease;
}

.lh-ip-chip:hover {
	border-color: rgba(192, 132, 252, 0.5);
	background: rgba(139, 92, 246, 0.1);
}

.lh-ip-chip:hover i {
	color: #c4b5fd;
}

.lh-ip-chip.is-copied {
	border-color: rgba(52, 211, 153, 0.5);
}

.lh-ip-chip.is-copied i {
	color: #34d399;
}

.lh-ip-chip.is-empty {
	color: #8289ad;
	cursor: default;
}

.lh-service-slots {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #8e96bd;
	font-size: 0.74rem;
}

.lh-service-slots i {
	color: rgba(var(--sv), 0.75);
	font-size: 0.66rem;
}

.lh-service-note {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-size: 0.76rem;
	font-weight: 650;
}

.lh-service-note.is-warning { color: #fcd34d; }
.lh-service-note.is-danger { color: #fda4af; }

.lh-service-expiry {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: auto;
	color: #9aa3c8;
	font-size: 0.76rem;
}

.lh-service-expiry span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.lh-service-expiry i {
	font-size: 0.68rem;
	color: rgba(var(--sv), 0.8);
}

.lh-service-expiry .is-warning {
	color: #fcd34d;
	font-weight: 650;
}

.lh-service-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.75rem 1.1rem;
	border-top: 1px solid rgba(167, 139, 250, 0.14);
	background: rgba(10, 13, 34, 0.35);
}

.lh-service-manage {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid rgba(var(--sv), 0.4);
	border-radius: 9px;
	background: rgba(var(--sv), 0.13);
	color: rgb(var(--sv));
	font-size: 0.78rem;
	font-weight: 700;
	transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.lh-service-manage:hover {
	transform: translateY(-1px);
	border-color: rgba(var(--sv), 0.6);
	background: rgba(var(--sv), 0.2);
}

.lh-service-manage.is-muted {
	border-color: rgba(134, 141, 186, 0.2);
	background: rgba(134, 141, 186, 0.07);
	color: #8e96bd;
	cursor: default;
}

.lh-service-manage.is-muted:hover {
	transform: none;
}

/* Filter pills: the JS toggles utility classes; these styles
   take precedence so the look stays consistent. */
.lh-filter-bar .filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.85rem !important;
	border: 1px solid rgba(167, 139, 250, 0.22) !important;
	border-radius: 999px !important;
	background: rgba(139, 92, 246, 0.06) !important;
	color: #b8bdde !important;
	font-size: 0.78rem !important;
	font-weight: 650 !important;
	transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.lh-filter-bar .filter-btn i {
	font-size: 0.68rem;
}

.lh-filter-bar .filter-btn.is-active-state i { color: #34d399; }
.lh-filter-bar .filter-btn.is-installing-state i { color: #38bdf8; }
.lh-filter-bar .filter-btn.is-suspended-state i { color: #fbbf24; }
.lh-filter-bar .filter-btn.is-terminated-state i { color: #fb7185; }

.lh-filter-bar .filter-btn small {
	padding: 0.06rem 0.42rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.68rem !important;
	font-weight: 700;
}

.lh-filter-bar .filter-btn:hover {
	border-color: rgba(192, 132, 252, 0.45) !important;
	color: #fff !important;
}

.lh-filter-bar .filter-btn.active {
	border-color: rgba(192, 132, 252, 0.5) !important;
	background: linear-gradient(115deg, rgba(139, 92, 246, 0.32), rgba(109, 40, 217, 0.16)) !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(139, 92, 246, 0.2);
}

.lh-filter-bar .filter-btn.active small {
	background: rgba(255, 255, 255, 0.16);
}

/* =========================================================
   TABLE STATUS ACCENTS V27
   Rows in invoices/orders tables carry a thin edge in the
   color of their status badge, so state scans instantly.
   ========================================================= */
.lh-table-card tbody tr:has([class*="bg-green-500"]) {
	box-shadow: inset 2px 0 0 rgba(52, 211, 153, 0.55);
}

.lh-table-card tbody tr:has([class*="bg-yellow-500"]) {
	box-shadow: inset 2px 0 0 rgba(251, 191, 36, 0.55);
}

.lh-table-card tbody tr:has([class*="bg-red-500"]) {
	box-shadow: inset 2px 0 0 rgba(251, 113, 133, 0.55);
}

.lh-table-card tbody tr:has([class*="bg-blue-500"]) {
	box-shadow: inset 2px 0 0 rgba(56, 189, 248, 0.55);
}

/* =========================================================
   SERVICE SPEC SHEET V28
   The service card body reads like a clean spec panel:
   prominent price, labeled address with copy, slots and
   expiry as structured cells.
   ========================================================= */
.lh-service-head {
	align-items: flex-start;
}

.lh-service-price {
	margin-left: auto;
	padding-left: 0.6rem;
	text-align: right;
	flex: 0 0 auto;
}

.lh-service-price strong {
	display: block;
	color: #fff;
	font-size: 1.18rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.lh-service-price small {
	color: #8e96bd;
	font-size: 0.66rem !important;
}

.lh-service-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	overflow: hidden;
	border: 1px solid rgba(167, 139, 250, 0.16);
	border-radius: 10px;
	background: rgba(8, 11, 30, 0.45);
}

.lh-service-spec {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
	padding: 0.6rem 0.8rem;
}

.lh-service-spec.is-address {
	grid-column: 1 / -1;
	border-bottom: 1px solid rgba(167, 139, 250, 0.13);
}

.lh-service-spec.is-wide {
	grid-column: 1 / -1;
}

.lh-service-spec:not(.is-address) + .lh-service-spec:not(.is-address):not(.is-wide) {
	border-left: 1px solid rgba(167, 139, 250, 0.13);
}

.lh-service-card .lh-service-spec small {
	color: #7d86b0;
	font-size: 0.62rem !important;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lh-service-spec strong {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
	color: #e7eaff;
	font-size: 0.84rem;
	font-weight: 650;
}

.lh-service-spec strong i {
	flex: 0 0 auto;
	color: rgba(var(--sv), 0.85);
	font-size: 0.68rem;
}

.lh-service-spec.is-address > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-width: 0;
}

.lh-service-spec.is-address code {
	overflow: hidden;
	color: #9be8f5;
	font-size: 0.8rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lh-service-spec.is-address > div:not(:has(.lh-copy-btn)) code {
	color: #8e96bd;
	font-style: italic;
}

.lh-copy-btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(167, 139, 250, 0.28);
	border-radius: 7px;
	background: rgba(139, 92, 246, 0.1);
	color: #c4b5fd;
	cursor: pointer;
	transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.lh-copy-btn:hover {
	border-color: rgba(192, 132, 252, 0.55);
	background: rgba(139, 92, 246, 0.18);
	color: #fff;
}

.lh-copy-btn.is-copied {
	border-color: rgba(52, 211, 153, 0.55);
	background: rgba(52, 211, 153, 0.12);
	color: #34d399;
}

.lh-days-left {
	display: inline-flex;
	align-items: center;
	margin-left: 0.35rem;
	padding: 0.08rem 0.45rem;
	border: 1px solid rgba(251, 191, 36, 0.35);
	border-radius: 999px;
	background: rgba(251, 191, 36, 0.12);
	color: #fcd34d;
	font-size: 0.64rem;
	font-style: normal;
	font-weight: 700;
}

/* =========================================================
   INVOICE LEDGER V29
   Invoices read as a modern ledger: status-tinted rows,
   prominent amount and an explicit pay action.
   ========================================================= */
.lh-invoice-list {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.lh-invoice-row { --iv: 134, 141, 186; }
.lh-invoice-row[data-status="paid"] { --iv: var(--ac-emerald); }
.lh-invoice-row[data-status="unpaid"] { --iv: var(--ac-amber); }
.lh-invoice-row[data-status="draft"] { --iv: var(--ac-sky); }
.lh-invoice-row[data-status="cancelled"] { --iv: 251, 113, 133; }

.lh-invoice-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 1.1rem;
	border-color: rgba(var(--iv), 0.2) !important;
	box-shadow: inset 3px 0 0 rgba(var(--iv), 0.55), 0 14px 32px rgba(5, 8, 28, 0.18) !important;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.22s ease;
}

.lh-invoice-row:hover {
	transform: translateY(-2px);
	border-color: rgba(var(--iv), 0.42) !important;
	box-shadow:
		inset 3px 0 0 rgba(var(--iv), 0.8),
		0 18px 40px rgba(5, 8, 28, 0.26),
		0 0 24px rgba(var(--iv), 0.1) !important;
}

.lh-invoice-row[data-status="cancelled"] {
	opacity: 0.72;
}

.lh-invoice-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(var(--iv), 0.32);
	border-radius: 10px;
	background: rgba(var(--iv), 0.11);
	color: rgb(var(--iv));
	font-size: 0.8rem;
}

.lh-invoice-main {
	flex: 1;
	min-width: 0;
}

.lh-invoice-main h4 {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	min-width: 0;
	font-size: 0.92rem !important;
	font-weight: 700 !important;
}

.lh-invoice-main h4 code {
	flex: 0 0 auto;
	padding: 0.08rem 0.45rem;
	border: 1px solid rgba(167, 139, 250, 0.26);
	border-radius: 6px;
	background: rgba(10, 13, 34, 0.6);
	color: #c4b5fd;
	font-size: 0.72rem;
}

.lh-invoice-main h4 span {
	overflow: hidden;
	color: #e7eaff;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lh-invoice-dates {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin: 0.3rem 0 0;
	color: #8e96bd;
	font-size: 0.73rem;
}

.lh-invoice-dates span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.lh-invoice-dates i {
	font-size: 0.62rem;
	color: #7d86b0;
}

.lh-invoice-dates .is-paid,
.lh-invoice-dates .is-paid i {
	color: #6ee7b7;
}

.lh-invoice-amount {
	flex: 0 0 auto;
	min-width: 86px;
	color: #fff;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-align: right;
}

.lh-invoice-status {
	flex: 0 0 auto;
}

.lh-invoice-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.28rem 0.7rem;
	border: 1px solid rgba(var(--iv), 0.34);
	border-radius: 999px;
	background: rgba(var(--iv), 0.12);
	color: rgb(var(--iv));
	font-size: 0.7rem;
	font-weight: 750;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.lh-invoice-badge i {
	font-size: 0.64rem;
}

.lh-invoice-actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.45rem;
}

.lh-invoice-pay {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.42rem 0.85rem;
	border: 1px solid rgba(52, 211, 153, 0.42);
	border-radius: 9px;
	background: rgba(52, 211, 153, 0.13);
	color: #6ee7b7;
	font-size: 0.76rem;
	font-weight: 750;
	transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.lh-invoice-pay:hover {
	transform: translateY(-1px);
	border-color: rgba(52, 211, 153, 0.6);
	background: rgba(52, 211, 153, 0.2);
	color: #a7f3d0;
}

@media (max-width: 860px) {
	.lh-invoice-row {
		flex-wrap: wrap;
		row-gap: 0.6rem;
	}

	.lh-invoice-main {
		flex: 1 1 calc(100% - 56px);
	}

	.lh-invoice-amount {
		text-align: left;
		min-width: 0;
	}

	.lh-invoice-actions {
		margin-left: auto;
	}
}

/* =========================================================
   TICKET QUEUE V30
   Tickets reuse the ledger-row language with status and
   priority accents.
   ========================================================= */
.lh-ticket-list {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.lh-ticket-row { --iv: 134, 141, 186; }
.lh-ticket-row[data-status="open"] { --iv: var(--ac-sky); }
.lh-ticket-row[data-status="answered"] { --iv: var(--ac-emerald); }
.lh-ticket-row[data-status="on_hold"] { --iv: var(--ac-amber); }
.lh-ticket-row[data-status="closed"] { --iv: 134, 141, 186; }

.lh-ticket-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 1.1rem;
	border-color: rgba(var(--iv), 0.2) !important;
	box-shadow: inset 3px 0 0 rgba(var(--iv), 0.55), 0 14px 32px rgba(5, 8, 28, 0.18) !important;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.22s ease;
}

.lh-ticket-row:hover {
	transform: translateY(-2px);
	border-color: rgba(var(--iv), 0.42) !important;
	box-shadow:
		inset 3px 0 0 rgba(var(--iv), 0.8),
		0 18px 40px rgba(5, 8, 28, 0.26),
		0 0 24px rgba(var(--iv), 0.1) !important;
}

.lh-ticket-row[data-status="closed"] {
	opacity: 0.74;
}

.lh-ticket-row .lh-invoice-badge i {
	font-size: 0.42rem;
}

.lh-priority-flag {
	flex: 0 0 auto;
	padding: 0.08rem 0.5rem;
	border-radius: 999px;
	font-size: 0.62rem;
	font-style: normal;
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lh-ticket-row[data-priority="urgent"] .lh-priority-flag {
	border: 1px solid rgba(251, 113, 133, 0.4);
	background: rgba(251, 113, 133, 0.14);
	color: #fda4af;
}

.lh-ticket-row[data-priority="high"] .lh-priority-flag {
	border: 1px solid rgba(251, 146, 60, 0.4);
	background: rgba(251, 146, 60, 0.13);
	color: #fdba74;
}

.lh-ticket-row[data-priority="medium"] .lh-priority-flag {
	border: 1px solid rgba(56, 189, 248, 0.35);
	background: rgba(56, 189, 248, 0.11);
	color: #7dd3fc;
}

.lh-ticket-row[data-priority="low"] .lh-priority-flag {
	border: 1px solid rgba(134, 141, 186, 0.3);
	background: rgba(134, 141, 186, 0.1);
	color: #9aa3c8;
}

.lh-ticket-row[data-priority="urgent"] {
	background:
		linear-gradient(100deg, rgba(251, 113, 133, 0.07), transparent 45%),
		linear-gradient(150deg, rgba(38, 45, 96, 0.88), rgba(20, 25, 58, 0.95)) !important;
}

.lh-ticket-view {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.42rem 0.85rem;
	border: 1px solid rgba(var(--iv), 0.4);
	border-radius: 9px;
	background: rgba(var(--iv), 0.13);
	color: rgb(var(--iv));
	font-size: 0.76rem;
	font-weight: 750;
	transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.lh-ticket-view:hover {
	transform: translateY(-1px);
	border-color: rgba(var(--iv), 0.6);
	background: rgba(var(--iv), 0.2);
}

@media (max-width: 860px) {
	.lh-ticket-row {
		flex-wrap: wrap;
		row-gap: 0.6rem;
	}

	.lh-ticket-row .lh-invoice-main {
		flex: 1 1 calc(100% - 56px);
	}

	.lh-ticket-row .lh-invoice-actions {
		margin-left: auto;
	}
}

/* =========================================================
   ORDERS LEDGER V31
   Orders reuse the ledger rows with service status accents.
   ========================================================= */
.lh-order-row[data-status="active"] { --iv: var(--ac-emerald); }
.lh-order-row[data-status="installing"] { --iv: var(--ac-sky); }
.lh-order-row[data-status="suspended"] { --iv: var(--ac-amber); }
.lh-order-row[data-status="terminated"],
.lh-order-row[data-status="failed"] { --iv: 251, 113, 133; }

.lh-order-row[data-status="terminated"] {
	opacity: 0.72;
}

.lh-invoice-dates .is-warning,
.lh-invoice-dates .is-warning i {
	color: #fcd34d;
	font-weight: 650;
}

.lh-invoice-dates .is-danger,
.lh-invoice-dates .is-danger i {
	color: #fda4af;
	font-weight: 650;
}

/* =========================================================
   ALIGNMENT FIXES V32
   1) Unified-system buttons always center their content
      (anchors without flex utilities looked broken).
   2) Joined input groups (input + attached button) keep flat
      inner corners — V24's global input radius had rounded
      them on all sides.
   ========================================================= */
.app-shell main .lh-button-primary,
.app-shell main .lh-button-secondary,
.app-shell main .btn-gradient,
.app-shell main .lh-secondary-button,
.app-shell main .lh-affiliate-transfer-button,
.app-shell main .lh-checkout-actions > a,
.app-shell main .lh-checkout-actions > button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
}

.app-shell main input[class~="rounded-l-xl"],
.app-shell main input[class~="rounded-l-lg"] {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.app-shell main input[class~="rounded-r-xl"],
.app-shell main input[class~="rounded-r-lg"] {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.app-shell main span[class~="rounded-l-xl"] {
	border-top-left-radius: 10px !important;
	border-bottom-left-radius: 10px !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.app-shell main button[class~="rounded-r-xl"],
.app-shell main a[class~="rounded-r-xl"] {
	border-top-right-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* =========================================================
   DEEP SPACE V33
   The whole canvas drops several shades darker: near-black
   backgrounds, deeper cards, dimmer pattern lines. The
   platform spec grid also tightens to two columns.
   ========================================================= */
:root {
	--lh-bg: #080a18;
	--lh-bg-deep: #05060f;
	--lh-panel: #0d1026;
	--lh-panel-2: #121532;
	--lh-panel-3: #181c40;
	--lh-line: rgba(148, 130, 230, 0.16);
	--lh-soft: #aeb3d4;
	--lh-muted: #7a81a8;
}

body.app-shell,
body.app-shell-public {
	background:
		radial-gradient(ellipse 56% 42% at 12% -8%, rgba(109, 40, 217, 0.12), transparent 64%),
		radial-gradient(ellipse 44% 34% at 88% -2%, rgba(99, 102, 241, 0.07), transparent 60%),
		radial-gradient(ellipse 52% 42% at 82% 102%, rgba(34, 211, 238, 0.055), transparent 62%),
		linear-gradient(132deg, #090b1c 0%, #0c0e22 46%, #07091a 100%) !important;
	background-attachment: fixed !important;
}

body.app-shell::before,
body.app-shell-public::before {
	opacity: 0.45;
}

body.app-secondary-canvas main {
	background:
		radial-gradient(ellipse 48% 36% at 10% -8%, rgba(109, 40, 217, 0.09), transparent 62%),
		radial-gradient(ellipse 40% 30% at 92% -4%, rgba(99, 102, 241, 0.055), transparent 58%),
		radial-gradient(ellipse 46% 38% at 84% 104%, rgba(34, 211, 238, 0.05), transparent 60%),
		linear-gradient(180deg, rgba(13, 16, 38, 0.5), rgba(8, 10, 26, 0.26) 46%, rgba(6, 8, 22, 0.55)) !important;
}

.app-shell > header.app-topbar,
.app-shell-public > .lh-public-header {
	background: rgba(8, 10, 24, 0.92) !important;
}

.app-shell > header.app-topbar.is-scrolled,
.app-shell-public > .lh-public-header.is-scrolled {
	background: rgba(6, 8, 20, 0.98) !important;
}

/* Cards: deep slate, faint pattern. */
.app-shell .glass-card,
.app-shell .card,
.app-shell .modern-card,
.app-shell .section-card,
.app-shell .stat-card,
.app-shell .stat-mini,
.app-shell .filter-card,
.app-shell .invoice-card,
.app-shell .detail-card,
.app-shell .edit-card,
.app-shell .service-stat,
.app-shell .ticket-card,
body.app-secondary-canvas .glass-card,
body.app-secondary-canvas .card,
body.app-secondary-canvas .modern-card,
body.app-secondary-canvas .section-card,
body.app-secondary-canvas .profile-card,
body.app-secondary-canvas .detail-card,
body.app-secondary-canvas .edit-card,
body.app-secondary-canvas .invoice-card,
body.app-secondary-canvas .services-card,
body.app-secondary-canvas .service-stat,
body.app-secondary-canvas .ticket-card,
body.app-secondary-canvas .lh-auth-card,
body.app-secondary-canvas .lh-contact-form-card,
body.app-secondary-canvas .lh-contact-info-card {
	background:
		linear-gradient(rgba(196, 181, 253, 0.012) 1px, transparent 1px),
		linear-gradient(90deg, rgba(196, 181, 253, 0.012) 1px, transparent 1px),
		linear-gradient(150deg, rgba(22, 26, 54, 0.92), rgba(11, 14, 32, 0.97)) !important;
	background-size: 34px 34px, 34px 34px, auto !important;
	border-color: rgba(148, 130, 230, 0.15) !important;
}

.app-shell .glass-card:hover,
.app-shell .card:hover,
.app-shell .modern-card:hover,
.app-shell .section-card:hover,
.app-shell .invoice-card:hover,
.app-shell .detail-card:hover,
.app-shell .edit-card:hover,
.app-shell .service-stat:hover,
.app-shell .ticket-card:hover,
body.app-secondary-canvas .glass-card:hover,
body.app-secondary-canvas .card:hover,
body.app-secondary-canvas .modern-card:hover,
body.app-secondary-canvas .section-card:hover,
body.app-secondary-canvas .profile-card:hover,
body.app-secondary-canvas .detail-card:hover,
body.app-secondary-canvas .edit-card:hover,
body.app-secondary-canvas .invoice-card:hover,
body.app-secondary-canvas .services-card:hover,
body.app-secondary-canvas .service-stat:hover,
body.app-secondary-canvas .ticket-card:hover,
body.app-secondary-canvas .lh-contact-info-card:hover {
	background:
		linear-gradient(rgba(var(--lh-ac, var(--ac-violet)), 0.018) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--lh-ac, var(--ac-violet)), 0.018) 1px, transparent 1px),
		linear-gradient(150deg, rgba(26, 31, 62, 0.94), rgba(13, 16, 36, 0.98)) !important;
	background-size: 34px 34px, 34px 34px, auto !important;
}

.lh-client-page-header,
.lh-secondary-heading {
	background:
		radial-gradient(ellipse 46% 130% at 0% 0%, rgba(var(--page-ac, var(--ac-violet)), 0.09), transparent 60%),
		linear-gradient(125deg, rgba(20, 25, 52, 0.9), rgba(10, 13, 30, 0.95));
	border-color: rgba(var(--page-ac, var(--ac-violet)), 0.2);
}

.lh-news-header {
	background:
		linear-gradient(118deg, rgba(109, 40, 217, 0.12), rgba(99, 102, 241, 0.04) 58%, transparent),
		linear-gradient(145deg, rgba(20, 25, 52, 0.92), rgba(10, 13, 30, 0.96)) !important;
}

.lh-infrastructure-panel,
.lh-config-builder,
.lh-checkout-card {
	background: linear-gradient(150deg, rgba(20, 24, 50, 0.93), rgba(10, 13, 30, 0.97)) !important;
}

.lh-view-all-games {
	background:
		linear-gradient(108deg, rgba(109, 40, 217, 0.12), rgba(99, 102, 241, 0.06) 48%, rgba(34, 211, 238, 0.04)) !important;
}

.lh-service-banner {
	background:
		radial-gradient(ellipse 70% 120% at 20% 0%, rgba(var(--sv), 0.16), transparent 65%),
		linear-gradient(135deg, rgba(20, 25, 54, 0.92), rgba(10, 13, 30, 0.96));
}

.lh-service-actions {
	background: rgba(6, 8, 20, 0.4);
}

.lh-service-specs,
.lh-invoice-main h4 code,
.lh-ip-chip {
	background: rgba(5, 7, 18, 0.55);
}

/* Inputs match the darker canvas. */
.app-shell main input[type="text"],
.app-shell main input[type="email"],
.app-shell main input[type="password"],
.app-shell main input[type="number"],
.app-shell main input[type="search"],
.app-shell main input[type="url"],
.app-shell main textarea,
.app-shell main select {
	background-color: rgba(6, 8, 20, 0.72) !important;
	border-color: rgba(148, 130, 230, 0.2) !important;
}

/* Footer sits on the darkest band. */
.app-shell-public .lh-footer {
	background: rgba(5, 6, 16, 0.55) !important;
}

.lh-footer-signal {
	background: linear-gradient(100deg, rgba(109, 40, 217, 0.1), rgba(99, 102, 241, 0.05) 48%, rgba(34, 211, 238, 0.04)) !important;
	border-color: rgba(148, 130, 230, 0.18);
}

/* Infrastructure specs: two clean columns. */
.lh-platform-specs {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 640px) {
	.lh-platform-specs {
		grid-template-columns: 1fr !important;
	}
}

/* =========================================================
   EDITOR TOOLBAR REPAIR V34
   The pages wrap Trumbowyg in `.trumbowyg-dark`, whose icons
   are already light — the previous invert() filter made them
   invisible. Explicit fills, visible states and dark
   dropdowns instead.
   ========================================================= */
.trumbowyg-button-pane button svg {
	fill: #c7cbe8 !important;
	color: #c7cbe8 !important;
}

.trumbowyg-button-pane button:hover svg,
.trumbowyg-button-pane button.trumbowyg-active svg {
	fill: #fff !important;
	color: #fff !important;
}

.trumbowyg-button-pane button.trumbowyg-disable {
	opacity: 0.35;
}

.trumbowyg-button-pane button.trumbowyg-open-dropdown::after {
	border-top-color: #c7cbe8 !important;
}

.trumbowyg-dropdown {
	border: 1px solid rgba(148, 130, 230, 0.28) !important;
	border-radius: 10px !important;
	background: linear-gradient(165deg, #1a1f44, #11142e) !important;
	box-shadow: 0 18px 44px rgba(4, 6, 22, 0.6) !important;
}

.trumbowyg-dropdown button {
	background: transparent !important;
	color: #c7cbe8 !important;
}

.trumbowyg-dropdown button:hover {
	background: rgba(139, 92, 246, 0.18) !important;
	color: #fff !important;
}

.trumbowyg-dropdown button svg {
	fill: #c7cbe8 !important;
}

.trumbowyg-modal-box {
	background: #141838 !important;
	color: #f3f4ff !important;
}

.trumbowyg-modal-box label {
	color: #c7cbe8 !important;
}

.trumbowyg-modal-box input {
	border: 1px solid rgba(148, 130, 230, 0.3) !important;
	background: rgba(6, 8, 20, 0.72) !important;
	color: #f3f4ff !important;
}

/* Profile stat strip: text values stay compact (the 1.3rem
   numeric scale is for figures, not names/emails). */
.lh-stat-card h4.lh-profile-stat-value {
	overflow: hidden;
	font-size: 0.92rem !important;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* =========================================================
   INPUT GROUPS V35
   Joined input + button/prefix rows are now one capsule:
   single border, shared focus ring, seamless inner edges and
   equal heights. Children's legacy utility styles are
   neutralized.
   ========================================================= */
.lh-input-group {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid rgba(148, 130, 230, 0.24);
	border-radius: 10px;
	background: rgba(6, 8, 20, 0.72);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.lh-input-group:focus-within {
	border-color: rgba(192, 132, 252, 0.55);
	box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.14);
}

.app-shell .lh-input-group > input,
.app-shell .lh-input-group > input:focus,
.app-shell main .lh-input-group > input,
.app-shell main .lh-input-group > input:focus {
	flex: 1 1 auto;
	min-width: 0;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
}

.app-shell .lh-input-group > span {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	border: none !important;
	border-right: 1px solid rgba(148, 130, 230, 0.16) !important;
	border-radius: 0 !important;
	background: rgba(139, 92, 246, 0.07) !important;
	color: #aeb3d4 !important;
}

.app-shell .lh-input-group > button,
.app-shell .lh-input-group > a,
.app-shell main .lh-input-group > button,
.app-shell main .lh-input-group > a {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	height: auto;
	min-height: 0 !important;
	margin: 0;
	padding: 0 1.15rem !important;
	border: none !important;
	border-radius: 0 !important;
	background: linear-gradient(118deg, #7c3aed, #a855f7 44%, #6d28d9) !important;
	color: #fff !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	white-space: nowrap;
	box-shadow: none !important;
	transition: filter 0.16s ease;
}

.app-shell .lh-input-group > button:hover,
.app-shell .lh-input-group > a:hover,
.app-shell main .lh-input-group > button:hover,
.app-shell main .lh-input-group > a:hover {
	transform: none;
	filter: brightness(1.12);
	box-shadow: none !important;
}

/* =========================================================
   SPLIT INPUT GROUPS V36
   Instead of gluing input and button into one capsule, the
   pieces are now separate, individually rounded elements
   with a clear gap — unambiguous and modern.
   ========================================================= */
.lh-input-group {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
	overflow: visible;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none !important;
}

.lh-input-group:focus-within {
	border: none;
	box-shadow: none !important;
}

.app-shell .lh-input-group > input,
.app-shell main .lh-input-group > input {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid rgba(148, 130, 230, 0.24) !important;
	border-radius: 10px !important;
	background: rgba(6, 8, 20, 0.72) !important;
}

.app-shell .lh-input-group > input:focus,
.app-shell main .lh-input-group > input:focus {
	border-color: rgba(192, 132, 252, 0.58) !important;
	box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.16) !important;
	outline: none !important;
}

.app-shell .lh-input-group > span {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	border: 1px solid rgba(148, 130, 230, 0.24) !important;
	border-radius: 10px !important;
	background: rgba(139, 92, 246, 0.1) !important;
	color: #c4b5fd !important;
	font-weight: 600;
}

.app-shell .lh-input-group > button,
.app-shell .lh-input-group > a,
.app-shell main .lh-input-group > button,
.app-shell main .lh-input-group > a {
	border: 1px solid rgba(216, 180, 254, 0.32) !important;
	border-radius: 10px !important;
	padding: 0 1.15rem !important;
	box-shadow: 0 6px 18px rgba(147, 51, 234, 0.26) !important;
	transition: filter 0.16s ease, transform 0.16s ease, box-shadow 0.18s ease;
}

.app-shell .lh-input-group > button:hover,
.app-shell .lh-input-group > a:hover,
.app-shell main .lh-input-group > button:hover,
.app-shell main .lh-input-group > a:hover {
	transform: translateY(-1px);
	filter: brightness(1.1);
	box-shadow: 0 9px 24px rgba(168, 85, 247, 0.36) !important;
}

/* =========================================================
   ADMIN NAVIGATION V37
   One nav component for desktop + mobile, visible from
   1280px (was 1700px — laptops only saw the hamburger),
   icons-only in the 1280-1599px range.
   ========================================================= */
.lh-admin-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.6rem;
	border-radius: 8px;
	color: #9aa3c8;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background 0.16s ease, color 0.16s ease;
}

.lh-admin-nav-link:hover {
	background: rgba(139, 92, 246, 0.1);
	color: #fff;
}

.lh-admin-nav-link.is-active {
	background: linear-gradient(120deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.16));
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(192, 132, 252, 0.32);
}

.lh-admin-nav-link.is-active i {
	color: #e9d5ff !important;
}

.lh-admin-mobile-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-radius: 12px;
	color: #9aa3c8;
	font-size: 0.85rem;
	font-weight: 600;
	transition: background 0.16s ease, color 0.16s ease;
}

.lh-admin-mobile-link:hover {
	background: rgba(139, 92, 246, 0.1);
	color: #fff;
}

.lh-admin-mobile-link.is-active {
	background: linear-gradient(120deg, rgba(139, 92, 246, 0.28), rgba(99, 102, 241, 0.14));
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(192, 132, 252, 0.3);
}

@media (min-width: 1280px) {
	.app-shell-admin .lh-admin-desktop-nav,
	.app-shell-admin .lh-admin-desktop-actions {
		display: flex !important;
	}

	.app-shell-admin .lh-admin-menu-button,
	.app-shell-admin .lh-admin-mobile-menu {
		display: none !important;
	}
}

@media (min-width: 1280px) and (max-width: 1599px) {
	.lh-admin-nav-link span {
		display: none;
	}

	.lh-admin-nav-link {
		padding: 0.5rem 0.6rem;
	}

	.lh-admin-nav-link i {
		font-size: 0.85rem;
	}
}

/* =========================================================
   ADMIN ACTIONS V38
   Site / Profile / Logout become proper pills with icons,
   matching the rest of the admin navigation.
   ========================================================= */
.lh-admin-action {
	display: inline-flex !important;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.75rem !important;
	border: 1px solid rgba(148, 130, 230, 0.24) !important;
	border-radius: 8px !important;
	background: rgba(139, 92, 246, 0.07) !important;
	color: #b8bdde !important;
	font-size: 0.76rem !important;
	font-weight: 650 !important;
	white-space: nowrap;
	transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.lh-admin-action i {
	font-size: 0.7rem;
	color: #a78bfa;
}

.lh-admin-action:hover {
	border-color: rgba(192, 132, 252, 0.45) !important;
	background: rgba(139, 92, 246, 0.14) !important;
	color: #fff !important;
}

.lh-admin-action.lh-admin-action-danger i {
	color: #fb7185;
}

.lh-admin-action.lh-admin-action-danger:hover {
	border-color: rgba(251, 113, 133, 0.45) !important;
	background: rgba(251, 113, 133, 0.1) !important;
	color: #fda4af !important;
}

.lh-admin-mobile-link.is-danger {
	color: #fda4af;
}

.lh-admin-mobile-link.is-danger:hover {
	background: rgba(251, 113, 133, 0.1);
	color: #fecdd3;
}

@media (min-width: 1280px) and (max-width: 1599px) {
	.lh-admin-action span {
		display: none;
	}

	.lh-admin-action {
		padding: 0.5rem 0.6rem !important;
	}

	.lh-admin-action i {
		font-size: 0.85rem;
	}
}

/* =========================================================
   PRODUCT PRESENTATION + CHECKOUT + ADMIN SHOP V39
   ========================================================= */
.app-shell-public .lh-store-config .payment-choice input[type="radio"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: relative;
	width: 15px !important;
	height: 15px !important;
	margin: 0 !important;
	border: 1px solid rgba(164, 173, 230, 0.42) !important;
	border-radius: 50% !important;
	background: rgba(7, 12, 29, 0.78) !important;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
}

.app-shell-public .lh-store-config .payment-choice input[type="radio"]::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--lh-cyan);
	opacity: 0;
	transform: scale(0.3);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.app-shell-public .lh-store-config .payment-choice input[type="radio"]:checked {
	border-color: var(--lh-cyan) !important;
	background: rgba(35, 215, 237, 0.08) !important;
}

.app-shell-public .lh-store-config .payment-choice input[type="radio"]:checked::after {
	opacity: 1;
	transform: scale(1);
}

.app-shell-public .lh-store-config .payment-choice input[type="radio"]:focus-visible {
	outline: 2px solid rgba(35, 215, 237, 0.42) !important;
	outline-offset: 3px !important;
}

.lh-product-card.is-featured .lh-product-image,
.lh-store-discord-image {
	position: relative;
	overflow: hidden;
}

.lh-product-card.is-featured .lh-product-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(108deg, transparent 30%, rgba(255, 255, 255, 0.17) 48%, transparent 66%);
	transform: translateX(-110%);
	animation: lh-product-flash 6s ease-in-out infinite;
	pointer-events: none;
}

@keyframes lh-product-flash {
	0%, 72%, 100% { transform: translateX(-110%); }
	86% { transform: translateX(110%); }
}

.app-shell-admin .lh-admin-package-form .section-card,
.app-shell-admin .lh-admin-shop .package-card,
.app-shell-admin .lh-admin-shop .stat-mini {
	border: 1px solid rgba(132, 150, 213, 0.18) !important;
	border-radius: 7px !important;
	background: linear-gradient(145deg, rgba(22, 31, 65, 0.92), rgba(10, 17, 39, 0.94)) !important;
	box-shadow: 0 16px 42px rgba(2, 7, 23, 0.22) !important;
}

.app-shell-admin .lh-admin-package-form .section-header {
	border-bottom: 1px solid rgba(35, 215, 237, 0.12) !important;
	background: linear-gradient(90deg, rgba(35, 215, 237, 0.055), rgba(139, 92, 246, 0.045)) !important;
}

.app-shell-admin .lh-admin-package-form .inner-card {
	border: 1px solid rgba(132, 150, 213, 0.15) !important;
	border-radius: 6px !important;
	background: rgba(8, 14, 34, 0.48) !important;
}

.app-shell-admin .lh-admin-package-form .inner-card-title {
	color: #eef4ff !important;
	font-family: var(--lh-mono);
	font-size: 0.77rem !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
}

.app-shell-admin .lh-admin-package-form .form-input {
	border-color: rgba(132, 150, 213, 0.19) !important;
	border-radius: 5px !important;
	background: rgba(8, 14, 34, 0.72) !important;
}

.app-shell-admin .lh-admin-package-form .form-input:focus {
	border-color: rgba(35, 215, 237, 0.5) !important;
	box-shadow: 0 0 0 3px rgba(35, 215, 237, 0.09) !important;
}

.lh-package-visual-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(220px, 0.55fr);
	gap: 1rem;
	margin-top: 1rem;
}

.lh-package-visual-fields small,
.lh-admin-check small {
	display: block;
	margin-top: 0.38rem;
	color: #7f8ba8;
	font-size: 0.68rem;
	line-height: 1.45;
}

.lh-admin-check {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	padding: 0.82rem;
	border: 1px solid rgba(35, 215, 237, 0.16);
	border-radius: 5px;
	background: rgba(35, 215, 237, 0.04);
	cursor: pointer;
}

.lh-admin-check input {
	margin-top: 0.18rem;
	accent-color: var(--lh-cyan);
}

.lh-admin-check strong {
	color: #e8f9ff;
	font-size: 0.76rem;
}

.lh-admin-image-preview {
	display: block;
	width: 100%;
	height: 94px;
	margin-top: 0.65rem;
	overflow: hidden;
	border: 1px solid rgba(132, 150, 213, 0.16);
	border-radius: 5px;
	background: rgba(7, 13, 31, 0.66);
}

.lh-admin-image-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.82;
}

.app-shell-admin .lh-admin-shop .package-card {
	overflow: hidden;
	transform: none !important;
}

.app-shell-admin .lh-admin-shop .package-card::before {
	height: 1px !important;
	background: var(--lh-spectrum) !important;
	opacity: 0.75;
}

.app-shell-admin .lh-admin-shop .package-card:hover {
	border-color: rgba(35, 215, 237, 0.3) !important;
	box-shadow: 0 20px 46px rgba(2, 7, 23, 0.34) !important;
}

.lh-admin-package-image {
	position: relative;
	height: 128px;
	overflow: hidden;
	border-bottom: 1px solid rgba(132, 150, 213, 0.14);
	background: rgba(6, 11, 28, 0.72);
}

.lh-admin-package-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.78;
	transition: opacity 0.2s ease, transform 0.25s ease;
}

.package-card:hover .lh-admin-package-image img {
	opacity: 0.94;
	transform: scale(1.025);
}

.lh-admin-package-image span {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.28rem 0.48rem;
	border: 1px solid rgba(250, 204, 21, 0.3);
	border-radius: 4px;
	background: rgba(8, 14, 34, 0.82);
	color: #fde68a;
	font-family: var(--lh-mono);
	font-size: 0.58rem;
	text-transform: uppercase;
}

.app-shell-admin .lh-admin-shop .price-gradient {
	background: none !important;
	color: #f1f5ff !important;
	-webkit-text-fill-color: currentColor !important;
	font-family: var(--lh-mono);
}

.app-shell-admin .lh-admin-shop .spec-item {
	border-color: rgba(132, 150, 213, 0.13) !important;
	border-radius: 4px !important;
	background: rgba(8, 14, 34, 0.52) !important;
}

.app-shell-admin .lh-admin-package-form .inner-card-title i,
.app-shell-admin .lh-admin-shop .spec-item i,
.app-shell-admin .lh-admin-stocks td.text-indigo-400 {
	color: var(--lh-cyan) !important;
}

@media (max-width: 760px) {
	.lh-package-visual-fields {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lh-product-card.is-featured .lh-product-image::after {
		animation: none;
	}
}

.lh-live-stock {
	display: inline-flex;
	align-items: center;
	gap: 0.42rem;
	padding: 0.32rem 0.52rem;
	border: 1px solid rgba(132, 150, 213, 0.2);
	border-radius: 4px;
	background: rgba(8, 14, 34, 0.62);
	font-family: var(--lh-mono);
	font-size: 0.62rem;
	font-weight: 700;
}

.lh-live-stock.is-checking,
.lh-live-stock.is-warning { color: #facc6b; }
.lh-live-stock.is-available { color: #54e7bb; }
.lh-live-stock.is-out { color: #ff7c92; }

.lh-store-card [data-discord-stock-action].is-disabled {
	pointer-events: none;
	opacity: 0.45;
	filter: grayscale(0.55);
}

/* Admin pages still carrying legacy utility classes inherit one coherent surface. */
.app-shell-admin .glass-card,
.app-shell-admin .settings-section,
.app-shell-admin .filter-card,
.app-shell-admin .invoice-card,
.app-shell-admin .detail-card,
.app-shell-admin .edit-card {
	border: 1px solid rgba(132, 150, 213, 0.17) !important;
	border-radius: 7px !important;
	background: linear-gradient(145deg, rgba(21, 30, 63, 0.9), rgba(9, 16, 37, 0.94)) !important;
	box-shadow: 0 16px 42px rgba(2, 7, 23, 0.2) !important;
}

.app-shell-admin .settings-section::before,
.app-shell-admin .gradient-border-top::before {
	height: 1px !important;
	background: var(--lh-spectrum) !important;
	opacity: 0.7;
}

.app-shell-admin .settings-section-header,
.app-shell-admin .glass-card > .border-b {
	border-color: rgba(132, 150, 213, 0.14) !important;
	background: rgba(9, 16, 37, 0.28) !important;
}

.app-shell-admin .settings-section-header .icon-wrap,
.app-shell-admin .glass-card .w-8.h-8,
.app-shell-admin .glass-card .w-10.h-10,
.app-shell-admin .glass-card .w-12.h-12 {
	border: 1px solid rgba(35, 215, 237, 0.18) !important;
	border-radius: 5px !important;
	background: rgba(35, 215, 237, 0.055) !important;
	color: var(--lh-cyan) !important;
}

.app-shell-admin .settings-section-header .icon-wrap i,
.app-shell-admin .glass-card .w-8.h-8 i,
.app-shell-admin .glass-card .w-10.h-10 i,
.app-shell-admin .glass-card .w-12.h-12 i {
	color: var(--lh-cyan) !important;
}

.app-shell-admin .settings-input,
.app-shell-admin input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.app-shell-admin select,
.app-shell-admin textarea {
	border-color: rgba(132, 150, 213, 0.2) !important;
	border-radius: 5px !important;
	background: rgba(7, 13, 31, 0.72) !important;
	box-shadow: none !important;
}

.app-shell-admin .settings-input:focus,
.app-shell-admin input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.app-shell-admin select:focus,
.app-shell-admin textarea:focus {
	border-color: rgba(35, 215, 237, 0.5) !important;
	box-shadow: 0 0 0 3px rgba(35, 215, 237, 0.08) !important;
	outline: none !important;
}

.app-shell-admin .btn-gradient,
.app-shell-admin .btn-primary,
.app-shell-admin .quick-action-btn,
.app-shell-admin [class*="bg-gradient-to-r"] {
	border: 1px solid rgba(35, 215, 237, 0.24) !important;
	border-radius: 5px !important;
	background: linear-gradient(110deg, rgba(61, 79, 184, 0.72), rgba(17, 151, 184, 0.68)) !important;
	box-shadow: none !important;
	transform: none !important;
}

.app-shell-admin .quick-action-btn {
	min-height: 36px;
	font-size: 0.72rem !important;
}

.app-shell-admin .quick-action-btn:hover,
.app-shell-admin .btn-gradient:hover,
.app-shell-admin .btn-primary:hover,
.app-shell-admin [class*="bg-gradient-to-r"]:hover {
	border-color: rgba(35, 215, 237, 0.45) !important;
	background: linear-gradient(110deg, rgba(74, 92, 202, 0.84), rgba(20, 170, 202, 0.8)) !important;
	box-shadow: 0 8px 22px rgba(6, 25, 58, 0.28) !important;
	transform: translateY(-1px) !important;
}

.app-shell-admin .action-btn,
.app-shell-admin .lh-action-icon {
	border: 1px solid rgba(132, 150, 213, 0.2) !important;
	border-radius: 5px !important;
	background: rgba(8, 14, 34, 0.6) !important;
	box-shadow: none !important;
}

.app-shell-admin .action-btn:hover,
.app-shell-admin .lh-action-icon:hover {
	border-color: rgba(35, 215, 237, 0.42) !important;
	background: rgba(35, 215, 237, 0.08) !important;
}

.app-shell-admin table thead,
.app-shell-admin table thead[class*="bg-gradient"] {
	background: linear-gradient(90deg, rgba(79, 92, 178, 0.18), rgba(26, 121, 155, 0.12)) !important;
}

.app-shell-admin table tbody tr {
	border-color: rgba(132, 150, 213, 0.1) !important;
}

.app-shell-admin table tbody tr:hover {
	background: rgba(35, 215, 237, 0.035) !important;
}

.lh-admin-stock-note {
	display: flex;
	gap: 0.8rem;
	align-items: flex-start;
	margin-bottom: 1rem;
	padding: 0.82rem 0.95rem;
	border: 1px solid rgba(35, 215, 237, 0.18);
	border-radius: 6px;
	background: rgba(35, 215, 237, 0.045);
}

.lh-admin-stock-note > i {
	margin-top: 0.15rem;
	color: var(--lh-cyan);
}

.lh-admin-stock-note strong,
.lh-admin-stock-note span {
	display: block;
}

.lh-admin-stock-note strong {
	color: #e9faff;
	font-size: 0.78rem;
}

.lh-admin-stock-note span {
	margin-top: 0.18rem;
	color: #8390ae;
	font-size: 0.68rem;
}

.lh-admin-stock-modal {
	backdrop-filter: blur(8px);
}

.lh-admin-stock-modal > div {
	border: 1px solid rgba(132, 150, 213, 0.22) !important;
	border-radius: 7px !important;
	background: linear-gradient(145deg, rgba(21, 30, 63, 0.98), rgba(8, 14, 34, 0.98)) !important;
	box-shadow: 0 28px 90px rgba(1, 5, 18, 0.62) !important;
}

.app-shell-admin .settings-toggle {
	width: 44px !important;
	height: 24px !important;
}

.app-shell-admin .settings-toggle .slider {
	border-color: rgba(132, 150, 213, 0.24) !important;
	background: rgba(8, 14, 34, 0.74) !important;
}

.app-shell-admin .settings-toggle .slider::before {
	width: 16px !important;
	height: 16px !important;
	background: #7784a5 !important;
}

.app-shell-admin .settings-toggle input:checked + .slider {
	border-color: rgba(35, 215, 237, 0.48) !important;
	background: rgba(35, 215, 237, 0.12) !important;
}

.app-shell-admin .settings-toggle input:checked + .slider::before {
	transform: translateX(20px) !important;
	background: var(--lh-cyan) !important;
}

.app-shell-admin .tab-btn {
	margin: 0.22rem;
	padding: 0.52rem 0.72rem !important;
	border: 1px solid transparent !important;
	border-radius: 5px !important;
	color: #8792ad !important;
	font-size: 0.7rem !important;
}

.app-shell-admin .tab-btn:hover {
	border-color: rgba(132, 150, 213, 0.2) !important;
	background: rgba(132, 150, 213, 0.055) !important;
	color: #dce5f8 !important;
}

.app-shell-admin .tab-btn.active {
	border-color: rgba(35, 215, 237, 0.32) !important;
	background: rgba(35, 215, 237, 0.075) !important;
	color: #e9fdff !important;
	box-shadow: inset 0 -1px 0 rgba(35, 215, 237, 0.45);
}

.app-shell-admin .status-badge,
.app-shell-admin .stock-badge,
.app-shell-admin [class*="rounded-full"] {
	border-radius: 999px !important;
	box-shadow: none !important;
}

.app-shell-admin .lh-client-page-header {
	border-color: rgba(132, 150, 213, 0.18) !important;
	background: linear-gradient(110deg, rgba(25, 35, 72, 0.82), rgba(9, 18, 42, 0.88)) !important;
	box-shadow: 0 16px 40px rgba(2, 7, 23, 0.18) !important;
}

/* ============================================================
   V39 — ADMIN UNIFICATION
   Harmonizes the legacy page-local classes still used by admin
   pages (coupons, shop, settings, invoices, services, logs…)
   with the current design system, so every admin page shares
   the same surfaces, inputs, buttons and accents.
   ============================================================ */

/* --- Card surfaces --- */
.app-shell-admin .section-card,
.app-shell-admin .table-card,
.app-shell-admin .settings-section {
	background: linear-gradient(160deg, rgba(22, 26, 54, 0.92), rgba(11, 14, 32, 0.97)) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 14px !important;
	backdrop-filter: blur(12px);
	box-shadow: 0 16px 40px rgba(2, 7, 23, 0.25);
}
.app-shell-admin .settings-section::before {
	background: linear-gradient(90deg, #6366f1, #8b5cf6 45%, #22d3ee) !important;
	opacity: 0.65;
}

/* --- Section header bands --- */
.app-shell-admin .section-header,
.app-shell-admin .settings-section-header {
	background:
		radial-gradient(420px 90px at 6% 0%, rgba(124, 58, 237, 0.18), transparent 70%),
		linear-gradient(180deg, rgba(17, 21, 49, 0.6), rgba(11, 14, 32, 0.35)) !important;
	border-bottom: 1px solid rgba(148, 130, 230, 0.16) !important;
}

/* --- Inputs --- */
.app-shell-admin .form-input,
.app-shell-admin .settings-input,
.app-shell-admin .search-input {
	background: rgba(9, 12, 28, 0.6) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 10px !important;
	color: #fff !important;
}
.app-shell-admin .form-input:focus,
.app-shell-admin .settings-input:focus,
.app-shell-admin .search-input:focus {
	outline: none !important;
	border-color: rgba(139, 92, 246, 0.55) !important;
	box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important;
	background: rgba(9, 12, 28, 0.8) !important;
}
.app-shell-admin .form-input::placeholder,
.app-shell-admin .settings-input::placeholder,
.app-shell-admin .search-input::placeholder {
	color: rgba(226, 232, 255, 0.35) !important;
}

/* --- Buttons: align legacy classes with the unified system --- */
.app-shell-admin .btn-primary,
.app-shell-admin .btn-gradient,
.app-shell-admin .btn-search {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem;
	background: linear-gradient(118deg, #7c3aed, #a855f7 44%, #6d28d9) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	font-weight: 600 !important;
	box-shadow: 0 10px 24px rgba(109, 40, 217, 0.28) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}
.app-shell-admin .btn-primary:hover,
.app-shell-admin .btn-gradient:hover,
.app-shell-admin .btn-search:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 14px 30px rgba(124, 58, 237, 0.38) !important;
	filter: brightness(1.06);
}
.app-shell-admin .btn-success,
.app-shell-admin .btn-primary.btn-success {
	background: linear-gradient(118deg, #059669, #34d399 70%, #10b981) !important;
	box-shadow: 0 10px 24px rgba(16, 185, 129, 0.24) !important;
}
.app-shell-admin .btn-danger,
.app-shell-admin .btn-primary.btn-danger {
	background: linear-gradient(118deg, #dc2626, #f87171 70%, #ef4444) !important;
	box-shadow: 0 10px 24px rgba(239, 68, 68, 0.24) !important;
}
.app-shell-admin .btn-secondary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem;
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: rgba(237, 240, 255, 0.85) !important;
	border-radius: 10px !important;
	font-weight: 500 !important;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}
.app-shell-admin .btn-secondary:hover {
	background: rgba(255, 255, 255, 0.1) !important;
	border-color: rgba(167, 139, 250, 0.35) !important;
	color: #fff !important;
}

/* --- Inline action icon buttons --- */
.app-shell-admin .action-btn {
	border-radius: 10px !important;
	border: 1px solid transparent !important;
}
.app-shell-admin .action-btn:hover {
	border-color: rgba(255, 255, 255, 0.08) !important;
	transform: translateY(-1px);
}

/* --- Tabs --- */
.app-shell-admin .tab-btn.active,
.app-shell-admin .nav-tab.active {
	color: #a78bfa !important;
	border-bottom-color: #a78bfa !important;
}

/* --- Shared chips (promoted from page-local styles) --- */
.app-shell-admin .ip-code {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	background: rgba(17, 21, 49, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.375rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.7);
}

/* --- Status badges: translucent + border, like the rest of the site --- */
.app-shell-admin .status-badge.active {
	background: rgba(16, 185, 129, 0.18) !important;
	color: #34d399 !important;
	border: 1px solid rgba(16, 185, 129, 0.3);
}
.app-shell-admin .status-badge.inactive {
	background: rgba(239, 68, 68, 0.16) !important;
	color: #f87171 !important;
	border: 1px solid rgba(239, 68, 68, 0.3);
}

/* V39b — remaining bespoke card surfaces aligned to the standard surface */
.app-shell-admin .stat-mini,
.app-shell-admin .inner-card {
	background: linear-gradient(160deg, rgba(22, 26, 54, 0.85), rgba(11, 14, 32, 0.95)) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 14px !important;
}
.app-shell-admin .package-card {
	background: linear-gradient(160deg, rgba(22, 26, 54, 0.92), rgba(11, 14, 32, 0.97)) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 14px !important;
}
.app-shell-admin .package-card::before {
	background: linear-gradient(90deg, #6366f1, #8b5cf6 45%, #22d3ee) !important;
	opacity: 0.75;
}
.app-shell-admin .package-card.inactive::before {
	background: linear-gradient(90deg, #6b7280, #4b5563) !important;
}

/* V39c — one table-header treatment for every admin table */
.app-shell-admin .workspace-page table thead {
	background: rgba(255, 255, 255, 0.05) !important;
}
.app-shell-admin .workspace-page table thead th {
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: rgba(170, 178, 214, 0.85) !important;
	border-bottom: 1px solid rgba(148, 130, 230, 0.14) !important;
}
.app-shell-admin .workspace-page table tbody tr {
	transition: background 0.2s ease;
}
.app-shell-admin .workspace-page table tbody tr:hover {
	background: rgba(255, 255, 255, 0.04);
}

/* V39d — dashboard stat surfaces on the standard card surface */
.app-shell-admin .stat-card {
	background: linear-gradient(160deg, rgba(22, 26, 54, 0.92), rgba(11, 14, 32, 0.97)) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 14px !important;
}
.app-shell-admin .service-stat {
	background: linear-gradient(160deg, rgba(22, 26, 54, 0.8), rgba(11, 14, 32, 0.9)) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px !important;
}

/* V39e — invoices admin card variants on the standard surface */
.app-shell-admin .invoice-card,
.app-shell-admin .detail-card,
.app-shell-admin .edit-card,
.app-shell-admin .filter-card {
	background: linear-gradient(160deg, rgba(22, 26, 54, 0.92), rgba(11, 14, 32, 0.97)) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 14px !important;
}
.app-shell-admin .invoice-card::before,
.app-shell-admin .detail-card::before,
.app-shell-admin .edit-card::before {
	background: linear-gradient(90deg, #6366f1, #8b5cf6 45%, #22d3ee) !important;
	opacity: 0.75;
}
.app-shell-admin .info-section {
	background: rgba(11, 14, 32, 0.55) !important;
	border: 1px solid rgba(255, 255, 255, 0.06) !important;
	border-radius: 12px !important;
}

/* V39f — in-field icons: page-local input classes (.filter-input/.form-input)
   load after the pl-* utilities and were eating the icon padding */
.app-shell .filter-input[class~="pl-11"],
.app-shell-admin .filter-input[class~="pl-11"] {
	padding-left: 2.75rem !important;
}
.app-shell .form-input[class~="pl-10"],
.app-shell-admin .form-input[class~="pl-10"],
.app-shell .filter-input[class~="pl-10"],
.app-shell-admin .filter-input[class~="pl-10"] {
	padding-left: 2.5rem !important;
}
.app-shell .form-input[class~="pl-9"],
.app-shell-admin .form-input[class~="pl-9"],
.app-shell .settings-input[class~="pl-9"],
.app-shell-admin .settings-input[class~="pl-9"] {
	padding-left: 2.25rem !important;
}

/* ============================================================
   V40 — INPUT-GROUP SEARCH ICON + ADMIN ACTION PILLS
   ============================================================ */

/* The leading magnifier no longer sits in its own rounded box —
   it floats inside the input itself. */
.lh-input-group {
	position: relative;
}
.app-shell .lh-input-group > span:has(> i.fa-search),
.app-shell main .lh-input-group > span:has(> i.fa-search) {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	display: inline-flex;
	align-items: center;
	padding: 0 0 0 1.05rem !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: rgba(167, 139, 250, 0.8) !important;
	z-index: 2;
	pointer-events: none;
}
.app-shell .lh-input-group > span:has(> i.fa-search) ~ input,
.app-shell main .lh-input-group > span:has(> i.fa-search) ~ input {
	padding-left: 2.7rem !important;
}

/* Site / Profile / Logout — full members of the new design,
   not gray leftovers. */
.lh-admin-action {
	padding: 0.5rem 0.85rem !important;
	border-radius: 9px !important;
	font-size: 0.78rem !important;
	border: 1px solid rgba(192, 132, 252, 0.32) !important;
	background: linear-gradient(120deg, rgba(139, 92, 246, 0.18), rgba(99, 102, 241, 0.1)) !important;
	color: #e9d5ff !important;
}
.lh-admin-action i {
	color: #c4b5fd !important;
	font-size: 0.78rem;
}
.lh-admin-action:hover {
	border-color: rgba(216, 180, 254, 0.55) !important;
	background: linear-gradient(120deg, rgba(139, 92, 246, 0.32), rgba(99, 102, 241, 0.18)) !important;
	color: #fff !important;
}
.lh-admin-action.lh-admin-action-danger {
	border-color: rgba(251, 113, 133, 0.38) !important;
	background: linear-gradient(120deg, rgba(244, 63, 94, 0.16), rgba(225, 29, 72, 0.08)) !important;
	color: #fda4af !important;
}
.lh-admin-action.lh-admin-action-danger i {
	color: #fb7185 !important;
}
.lh-admin-action.lh-admin-action-danger:hover {
	border-color: rgba(251, 113, 133, 0.6) !important;
	background: linear-gradient(120deg, rgba(244, 63, 94, 0.28), rgba(225, 29, 72, 0.14)) !important;
	color: #fecdd3 !important;
}

/* Small avatar circle for table rows (logs admin column etc.) */
.lh-mini-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: linear-gradient(135deg, #7c3aed, #6d28d9);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.lh-mini-avatar.is-system {
	background: rgba(148, 163, 184, 0.16);
	color: #94a3b8;
}

/* Row ID chip */
.lh-id-chip {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	border-radius: 0.375rem;
	background: rgba(17, 21, 49, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.08);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   V41 — ADMIN PROFILE DROPDOWN
   Site / Profile / Logout collapse into one avatar dropdown,
   and nav labels come back from 1500px (the compact right
   side frees the space the old action pills were eating).
   ============================================================ */
.lh-admin-user-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.32rem 0.7rem 0.32rem 0.38rem;
	border: 1px solid rgba(148, 130, 230, 0.28);
	border-radius: 999px;
	background: rgba(139, 92, 246, 0.08);
	color: #e2e6ff;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.16s ease, border-color 0.16s ease;
}
.lh-admin-user-btn:hover,
.lh-admin-user-btn[aria-expanded="true"] {
	background: rgba(139, 92, 246, 0.16);
	border-color: rgba(192, 132, 252, 0.5);
}
.lh-admin-user-btn > i.fa-chevron-down {
	font-size: 0.6rem;
	color: #a78bfa;
	transition: transform 0.18s ease;
}
.lh-admin-user-btn[aria-expanded="true"] > i.fa-chevron-down {
	transform: rotate(180deg);
}

.lh-admin-user-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 210px;
	padding: 0.45rem;
	border: 1px solid rgba(148, 130, 230, 0.24);
	border-radius: 14px;
	background: linear-gradient(165deg, rgba(24, 28, 58, 0.98), rgba(11, 14, 32, 0.99));
	box-shadow: 0 24px 55px rgba(2, 7, 23, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
	z-index: 60;
}
.lh-admin-user-menu.hidden {
	display: none;
}

.lh-admin-menu-item {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.6rem 0.75rem;
	border-radius: 9px;
	color: #b9bfdf;
	font-size: 0.82rem;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease;
}
.lh-admin-menu-item i {
	width: 16px;
	text-align: center;
	font-size: 0.78rem;
	color: #a78bfa;
}
.lh-admin-menu-item:hover {
	background: rgba(139, 92, 246, 0.14);
	color: #fff;
}
.lh-admin-menu-item.is-danger {
	color: #fda4af;
}
.lh-admin-menu-item.is-danger i {
	color: #fb7185;
}
.lh-admin-menu-item.is-danger:hover {
	background: rgba(244, 63, 94, 0.14);
	color: #fecdd3;
}

.lh-admin-menu-sep {
	height: 1px;
	margin: 0.35rem 0.5rem;
	background: rgba(148, 130, 230, 0.18);
}

/* Nav labels return earlier now that the right side is compact */
@media (min-width: 1500px) {
	.lh-admin-nav-link span {
		display: inline !important;
	}
}
/* Below 1500px the button shows only the avatar + chevron */
@media (max-width: 1499px) {
	.lh-admin-user-name {
		display: none;
	}
	.lh-admin-user-btn {
		padding: 0.3rem 0.55rem 0.3rem 0.32rem;
	}
}

/* ============================================================
   V42 — CONFIGURABLE TABS + PRIMARY TOKEN CLEANUP
   ============================================================ */
.lh-config-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.95rem 1.5rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
	border-bottom: 2px solid transparent;
	background: transparent;
	cursor: pointer;
	transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.lh-config-tab:hover {
	color: rgba(255, 255, 255, 0.85);
	background: rgba(255, 255, 255, 0.04);
}
.lh-config-tab.is-active {
	color: #c4b5fd;
	border-bottom-color: #a78bfa;
	background: rgba(139, 92, 246, 0.08);
}
.lh-config-tab i {
	font-size: 0.78rem;
}

/* The compiled Tailwind primary-500 is still the OLD #667eea.
   Re-point the token and the hardcoded translucent variants to violet. */
:root {
	--color-primary-500: #8b5cf6;
}
[class*="bg-primary-500/20"] {
	background-color: rgba(139, 92, 246, 0.16) !important;
}
[class*="bg-primary-500/10"] {
	background-color: rgba(139, 92, 246, 0.1) !important;
}
[class*="border-primary-500/30"] {
	border-color: rgba(139, 92, 246, 0.3) !important;
}

/* ============================================================
   V43 — ADMIN SHOP FORM POLISH
   "Feature on homepage" was a column-tall cyan box with one
   line of text; it becomes a slim full-width violet check row.
   ============================================================ */
.lh-package-visual-fields {
	grid-template-columns: 1fr !important;
	gap: 0.85rem !important;
}
.lh-admin-check {
	flex-direction: row !important;
	align-items: center !important;
	align-self: start;
	gap: 0.75rem !important;
	padding: 0.7rem 0.95rem !important;
	border: 1px solid rgba(148, 130, 230, 0.26) !important;
	border-radius: 10px !important;
	background: rgba(139, 92, 246, 0.07) !important;
	transition: background 0.16s ease, border-color 0.16s ease;
}
.lh-admin-check:hover {
	background: rgba(139, 92, 246, 0.12) !important;
	border-color: rgba(192, 132, 252, 0.4) !important;
}
.lh-admin-check input {
	width: 18px !important;
	height: 18px !important;
	flex: 0 0 auto;
	margin: 0 !important;
	accent-color: #8b5cf6;
	cursor: pointer;
}
.lh-admin-check strong {
	color: #fff !important;
	font-size: 0.85rem;
}
.lh-admin-check small {
	margin-top: 0.12rem !important;
	font-size: 0.72rem !important;
	color: #8d97bd !important;
}
.lh-admin-check span {
	display: flex;
	flex-direction: column;
}
.lh-admin-image-preview {
	border-radius: 10px !important;
	height: 110px !important;
	border-color: rgba(148, 130, 230, 0.22) !important;
}

/* ============================================================
   V44 — TABLE TH FIX + ORDER VIEW INFO ROWS + CLIENT PICKER
   ============================================================ */

/* An old layer painted EVERY th with a purple box — label cells
   in detail-view tables (Email:, Balance:…) looked broken.
   Only real table headers keep a background now (via thead). */
.workspace-page table th {
	background: transparent !important;
}
.workspace-page table thead {
	background: rgba(255, 255, 255, 0.05) !important;
}

/* Read-only detail fields: clean spec rows, not fake inputs */
.lh-info-value {
	padding: 0.45rem 0.05rem 0.6rem;
	border-bottom: 1px solid rgba(148, 130, 230, 0.13);
	color: #eef0ff;
	font-size: 0.92rem;
	line-height: 1.5;
}
.lh-info-value small {
	color: rgba(255, 255, 255, 0.45);
}

/* Searchable client picker (orders/new) */
.lh-client-picker {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(148, 130, 230, 0.24);
	border-radius: 12px;
	background: rgba(9, 12, 28, 0.7);
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.lh-client-picker:focus-within {
	border-color: rgba(192, 132, 252, 0.5);
	box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.14);
}
.lh-client-picker input {
	background: rgba(255, 255, 255, 0.04) !important;
	border: none !important;
	border-bottom: 1px solid rgba(148, 130, 230, 0.16) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.lh-client-picker input:focus {
	background: rgba(255, 255, 255, 0.06) !important;
	border-color: rgba(148, 130, 230, 0.16) !important;
	box-shadow: none !important;
	outline: none !important;
}
.lh-client-picker select {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
.lh-client-picker select option {
	background: #10142e;
	color: #dde1f7;
	padding: 0.5rem;
}
.lh-client-picker select option:checked {
	background: rgba(139, 92, 246, 0.35);
	color: #fff;
}

/* ============================================================
   V45 — TABLE ROW HOVER MODERNIZATION
   An early layer painted a cyan inset bar + blue gradient on
   every hovered table row (visible as a weird mark before the
   first letter in detail tables). Replaced with the standard
   soft violet hover everywhere.
   ============================================================ */
.app-shell table tbody tr {
	background: transparent !important;
}
.app-shell table tbody tr:hover,
.app-shell .invoice-row:hover {
	background: rgba(139, 92, 246, 0.07) !important;
	box-shadow: none !important;
}

/* ============================================================
   V46 — DETAIL TABLES: NO ZEBRA/HOVER MISMATCH
   Zebra striping and hover were painted only on td cells, so
   label tables (th + td in body, e.g. order/client info) showed
   values in tinted boxes while labels stayed dark. Label rows
   are now exempt; public tables lose the old cyan inset bar.
   ============================================================ */
.app-shell-admin table tbody tr:has(> th) > td,
.app-shell-admin table tbody tr:has(> th):hover > td,
.app-shell table tbody tr:has(> th):nth-child(even) > td {
	background: transparent !important;
}
.app-shell table tbody tr:has(> th):hover {
	background: transparent !important;
}

.app-shell-public .workspace-page table tbody tr:hover,
.app-shell-public .lh-table-card tbody tr:hover {
	background: rgba(139, 92, 246, 0.07) !important;
	box-shadow: none !important;
}

/* ============================================================
   V47 — QUICK ACTION BUTTONS
   Sidebar action list: each action is a clear tinted row with
   an icon chip, not a faint ghost button.
   ============================================================ */
.lh-quick-action {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 1px solid rgba(148, 130, 230, 0.22);
	border-radius: 12px;
	background: linear-gradient(120deg, rgba(139, 92, 246, 0.09), rgba(99, 102, 241, 0.04));
	color: #e2e6ff;
	font-size: 0.85rem;
	font-weight: 600;
	transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.lh-quick-action > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: 9px;
	background: rgba(139, 92, 246, 0.18);
	color: #c4b5fd;
	font-size: 0.82rem;
}
.lh-quick-action::after {
	content: '\f054';
	font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
	font-weight: 900;
	margin-left: auto;
	font-size: 0.62rem;
	color: rgba(196, 181, 253, 0.45);
	transition: transform 0.16s ease, color 0.16s ease;
}
.lh-quick-action:hover {
	transform: translateX(3px);
	border-color: rgba(192, 132, 252, 0.5);
	background: linear-gradient(120deg, rgba(139, 92, 246, 0.18), rgba(99, 102, 241, 0.09));
	color: #fff;
}
.lh-quick-action:hover::after {
	transform: translateX(2px);
	color: #e9d5ff;
}
.lh-quick-action.is-info > i { background: rgba(34, 211, 238, 0.16); color: #67e8f9; }
.lh-quick-action.is-info:hover { border-color: rgba(34, 211, 238, 0.45); }
.lh-quick-action.is-warning > i { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
.lh-quick-action.is-warning:hover { border-color: rgba(251, 191, 36, 0.45); }
.lh-quick-action.is-success > i { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; }
.lh-quick-action.is-success:hover { border-color: rgba(52, 211, 153, 0.45); }
.lh-quick-action.is-muted > i { background: rgba(148, 163, 184, 0.14); color: #94a3b8; }

/* ============================================================
   V48 — SERVICES ADMIN ALIGNMENT
   ============================================================ */
.lh-quick-action.is-danger {
	border-color: rgba(251, 113, 133, 0.3);
}
.lh-quick-action.is-danger > i {
	background: rgba(244, 63, 94, 0.16);
	color: #fb7185;
}
.lh-quick-action.is-danger:hover {
	border-color: rgba(251, 113, 133, 0.55);
	background: linear-gradient(120deg, rgba(244, 63, 94, 0.16), rgba(225, 29, 72, 0.08));
	color: #fecdd3;
}

/* Warning-flavoured standard button (suspend & co.) */
.app-shell-admin .btn-warning {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem;
	background: linear-gradient(118deg, #d97706, #fbbf24 70%, #f59e0b) !important;
	color: #1c1917 !important;
	border: none !important;
	border-radius: 10px !important;
	font-weight: 650 !important;
	box-shadow: 0 10px 24px rgba(245, 158, 11, 0.22) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}
.app-shell-admin .btn-warning:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 14px 30px rgba(245, 158, 11, 0.32) !important;
	filter: brightness(1.05);
}

/* services edit form inputs join the standard input family */
.app-shell-admin .edit-input {
	background: rgba(9, 12, 28, 0.6) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 10px !important;
	color: #fff !important;
}
.app-shell-admin .edit-input:focus {
	outline: none !important;
	border-color: rgba(139, 92, 246, 0.55) !important;
	box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important;
	background: rgba(9, 12, 28, 0.8) !important;
}

/* V48b — warning-tinted secondary (tickets Actions menu) */
.app-shell .lh-secondary-button.is-warning {
	border-color: rgba(251, 191, 36, 0.35) !important;
	background: rgba(251, 191, 36, 0.08) !important;
	color: #fcd34d !important;
}
.app-shell .lh-secondary-button.is-warning:hover {
	border-color: rgba(251, 191, 36, 0.55) !important;
	background: rgba(251, 191, 36, 0.14) !important;
	color: #fde68a !important;
	box-shadow: 0 9px 24px rgba(245, 158, 11, 0.15) !important;
}

/* V48c — headers that host a dropdown must not clip it */
.lh-client-page-header.lh-header-with-menu {
	overflow: visible !important;
}
.lh-client-page-header.lh-header-with-menu::before {
	border-radius: 8px 8px 0 0;
}

/* V48d — glass-card panels meant to float (dropdowns) keep their
   absolute positioning; the generic card rule was overriding the
   .absolute utility and pushed dropdowns into the layout flow. */
.app-shell .glass-card.absolute {
	position: absolute !important;
}

/* V48e — warning variant for row action icons (disable/pause actions) */
.lh-action-icon.is-warning {
	color: #fcd34d;
}
.lh-action-icon.is-warning:hover {
	background: rgba(251, 191, 36, 0.16);
	border-color: rgba(251, 191, 36, 0.4);
	color: #fde68a;
}

/* ============================================================
   V49 — MODAL OVERLAY GUARANTEE
   Every utility-built overlay (div.fixed.inset-0 — stocks,
   services, tickets modals) is pinned to the viewport with an
   unlayered rule: the compiled Tailwind utilities live inside
   @layer and can lose the cascade to our unlayered styles, so
   the overlay behavior is enforced here explicitly.
   ============================================================ */
.app-shell div.fixed.inset-0 {
	position: fixed !important;
	inset: 0 !important;
	margin: 0 !important;
	z-index: 90;
}
.app-shell div.fixed.inset-0.hidden {
	display: none !important;
}

/* ============================================================
   V50 — SETTINGS MODERNIZATION
   Cron task chips + danger pill, replacing the solid-color
   legacy buttons.
   ============================================================ */
.lh-cron-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.85rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	border: 1px solid rgba(148, 130, 230, 0.28);
	background: rgba(139, 92, 246, 0.1);
	color: #d6cdfb;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.lh-cron-chip i { font-size: 0.7rem; }
.lh-cron-chip:hover {
	transform: translateY(-1px);
	background: rgba(139, 92, 246, 0.2);
	border-color: rgba(192, 132, 252, 0.5);
	color: #fff;
}
.lh-cron-chip.is-primary {
	background: linear-gradient(118deg, #7c3aed, #a855f7 44%, #6d28d9);
	border-color: rgba(216, 180, 254, 0.35);
	color: #fff;
	box-shadow: 0 8px 18px rgba(109, 40, 217, 0.25);
}
.lh-cron-chip.is-primary:hover { filter: brightness(1.08); }
.lh-cron-chip.is-info    { background: rgba(34, 211, 238, 0.1); border-color: rgba(34, 211, 238, 0.3); color: #a5f3fc; }
.lh-cron-chip.is-info:hover    { background: rgba(34, 211, 238, 0.18); border-color: rgba(34, 211, 238, 0.5); color: #fff; }
.lh-cron-chip.is-success { background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.3); color: #a7f3d0; }
.lh-cron-chip.is-success:hover { background: rgba(52, 211, 153, 0.18); border-color: rgba(52, 211, 153, 0.5); color: #fff; }
.lh-cron-chip.is-warning { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3); color: #fde68a; }
.lh-cron-chip.is-warning:hover { background: rgba(251, 191, 36, 0.18); border-color: rgba(251, 191, 36, 0.5); color: #fff; }
.lh-cron-chip.is-danger  { background: rgba(244, 63, 94, 0.1); border-color: rgba(251, 113, 133, 0.3); color: #fecdd3; }
.lh-cron-chip.is-danger:hover  { background: rgba(244, 63, 94, 0.18); border-color: rgba(251, 113, 133, 0.5); color: #fff; }
.lh-cron-chip.is-muted   { background: rgba(148, 163, 184, 0.08); border-color: rgba(148, 163, 184, 0.25); color: #cbd5e1; }
.lh-cron-chip.is-muted:hover   { background: rgba(148, 163, 184, 0.15); border-color: rgba(148, 163, 184, 0.45); color: #fff; }

.lh-pill-danger-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.8rem;
	border-radius: 8px;
	font-size: 0.76rem;
	font-weight: 600;
	background: rgba(244, 63, 94, 0.1);
	border: 1px solid rgba(251, 113, 133, 0.3);
	color: #fda4af;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.lh-pill-danger-btn:hover {
	background: rgba(244, 63, 94, 0.2);
	border-color: rgba(251, 113, 133, 0.55);
	color: #fecdd3;
}

/* ============================================================
   V51 — BUTTON FAMILY SIZING
   The harmonized legacy button classes relied on per-page CSS
   for padding; pages without local definitions (settings) got
   squished buttons. The family now carries its own sizing.
   ============================================================ */
.app-shell-admin .btn-primary,
.app-shell-admin .btn-gradient,
.app-shell-admin .btn-warning,
.app-shell-admin .btn-search,
.app-shell-admin .btn-secondary {
	min-height: 42px;
	padding: 0.6rem 1.35rem;
	font-size: 0.85rem;
	line-height: 1.2;
}

/* ============================================================
   V52 — FILTERABLE CARDS RESPECT .hidden
   Component display rules (unlayered) were beating the layered
   .hidden utility, so the services status filters could never
   hide a card. Scoped to the filterable components only — a
   global rule would break responsive show/hide utilities.
   ============================================================ */
.lh-service-card.hidden,
.lh-invoice-row.hidden,
.lh-ticket-row.hidden,
.lh-news-card.hidden {
	display: none !important;
}

/* ============================================================
   V53 — TEXT PREFIXES FUSE WITH THEIR INPUT
   Phone prefixes (+40 etc.) no longer sit in a separate violet
   box with a gap — prefix and field form one capsule with a
   soft inner divider. Icon spans (search) keep the floating
   in-field treatment from V40.
   ============================================================ */
.app-shell .lh-input-group:has(> span:first-child:not(:has(i))) {
	gap: 0;
}
.app-shell .lh-input-group > span:first-child:not(:has(i)) {
	display: inline-flex;
	align-items: center;
	padding: 0 1.05rem !important;
	border: 1px solid rgba(148, 130, 230, 0.24) !important;
	border-right: none !important;
	border-radius: 10px 0 0 10px !important;
	background: rgba(11, 14, 30, 0.85) !important;
	color: #9aa3c8 !important;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.app-shell .lh-input-group > span:first-child:not(:has(i)) ~ input,
.app-shell main .lh-input-group > span:first-child:not(:has(i)) ~ input {
	border-radius: 0 10px 10px 0 !important;
	border-left: none !important;
	box-shadow: inset 1px 0 0 rgba(148, 130, 230, 0.18) !important;
}
.app-shell .lh-input-group:has(> span:first-child:not(:has(i))):focus-within > span:first-child {
	border-color: rgba(192, 132, 252, 0.58) !important;
	color: #c4b5fd !important;
}
.app-shell .lh-input-group > span:first-child:not(:has(i)) ~ input:focus,
.app-shell main .lh-input-group > span:first-child:not(:has(i)) ~ input:focus {
	box-shadow: inset 1px 0 0 rgba(192, 132, 252, 0.35) !important;
	border-color: rgba(192, 132, 252, 0.58) !important;
}

/* ============================================================
   V53b — PREFIX LIVES INSIDE THE FIELD
   The fused two-piece capsule still read as two elements; the
   prefix now floats inside the input itself (same treatment as
   the search icon): one clean field, prefix as quiet text.
   ============================================================ */
.app-shell .lh-input-group > span:first-child:not(:has(i)) {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	display: inline-flex;
	align-items: center;
	padding: 0 0 0 1.1rem !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #8d97bd !important;
	font-size: 0.92rem;
	font-weight: 600;
	z-index: 2;
	pointer-events: none;
}
.app-shell .lh-input-group > span:first-child:not(:has(i)) ~ input,
.app-shell main .lh-input-group > span:first-child:not(:has(i)) ~ input {
	border-radius: 10px !important;
	border: 1px solid rgba(148, 130, 230, 0.24) !important;
	box-shadow: none !important;
	padding-left: 4.4rem !important;
}
.app-shell .lh-input-group > span:first-child:not(:has(i)) ~ input:focus,
.app-shell main .lh-input-group > span:first-child:not(:has(i)) ~ input:focus {
	border-color: rgba(192, 132, 252, 0.58) !important;
	box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.16) !important;
}
.app-shell .lh-input-group:has(> span:first-child:not(:has(i))):focus-within > span:first-child {
	color: #c4b5fd !important;
}

/* ============================================================
   V54 — CHECKOUT: ROUND RADIOS + WITHDRAWAL CONSENT
   ============================================================ */
/* The payment radios were being squeezed oval by the flex label —
   they keep their 15px circle no matter how long the text is. */
.app-shell-public .lh-store-config .payment-choice input[type="radio"] {
	flex: 0 0 15px !important;
	min-width: 15px !important;
	min-height: 15px !important;
	max-width: 15px !important;
	max-height: 15px !important;
}

/* Legal consent card before checkout */
.lh-withdrawal-consent {
	display: flex;
	gap: 0.8rem;
	align-items: flex-start;
	margin: 1rem 0 0.25rem;
	padding: 0.9rem 1rem;
	border: 1px solid rgba(148, 130, 230, 0.24);
	border-radius: 12px;
	background: rgba(139, 92, 246, 0.06);
	cursor: pointer;
	transition: border-color 0.16s ease, background 0.16s ease;
}
.lh-withdrawal-consent:hover {
	border-color: rgba(192, 132, 252, 0.4);
	background: rgba(139, 92, 246, 0.1);
}
.lh-withdrawal-consent input[type="checkbox"] {
	flex: 0 0 17px;
	width: 17px !important;
	height: 17px !important;
	margin-top: 0.15rem !important;
	accent-color: #8b5cf6;
	cursor: pointer;
}
.lh-withdrawal-consent span {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}
.lh-withdrawal-consent strong {
	color: #fff;
	font-size: 0.85rem;
}
.lh-withdrawal-consent strong em {
	color: #fb7185;
	font-style: normal;
}
.lh-withdrawal-consent small {
	color: #97a0c4;
	font-size: 0.74rem;
	line-height: 1.5;
}
.lh-withdrawal-consent.is-error {
	border-color: rgba(251, 113, 133, 0.6);
	background: rgba(244, 63, 94, 0.08);
	animation: lh-consent-shake 0.3s ease;
}
@keyframes lh-consent-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

/* ============================================================
   V55 — CONFIG STEPS: ACTIVE STATE ON THE CIRCLE, NOT THE TEXT
   A recolor pass painted the active-step gradient over the whole
   span (an unpadded smear behind "1 Configure"); the highlight
   belongs on the number circle.
   ============================================================ */
.lh-config-steps .is-active,
.lh-config-steps [data-step].is-active {
	background: none !important;
	border-color: transparent !important;
	color: #e9eaff !important;
}
.lh-config-steps .is-active i {
	border-color: rgba(192, 132, 252, 0.5) !important;
	background: linear-gradient(115deg, rgba(139, 92, 246, 0.35), rgba(109, 40, 217, 0.16)) !important;
	color: #e9d5ff !important;
	box-shadow: 0 0 12px rgba(139, 92, 246, 0.25);
}

/* ============================================================
   V56 — CONFIG OPTIONS: COMPACT, ORGANIZED CARDS
   No more "OPTION 01" numbering, no centered floating text,
   no oversized half-empty cards. Heading is icon + name +
   description in one tight row; the grid adapts to width.
   ============================================================ */
.app-shell-public .lh-config-options {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
	gap: 0.7rem !important;
	align-items: start;
}
.lh-config-option-group > .glass-card {
	padding: 0.85rem 1rem !important;
}
.lh-option-card-heading {
	align-items: flex-start;
	margin-bottom: 0.6rem !important;
}
.app-shell-public .lh-option-card-heading > span {
	width: 30px;
	height: 30px;
	flex-basis: 30px;
	border-radius: 8px !important;
}
.app-shell-public .lh-store-config #configOptionsContainer .lh-option-card-heading h6 {
	font-size: 0.8rem !important;
	text-align: left !important;
	margin: 0 !important;
}
.lh-option-card-heading small {
	font-family: inherit !important;
	font-size: 0.68rem !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: #8d97bd !important;
	line-height: 1.4;
}
/* controls hug the card — no trailing dead space */
.lh-config-option-group .glass-card > div:last-child {
	margin-bottom: 0 !important;
}
.lh-config-option-group select.config-option,
.lh-config-option-group input[type="number"].config-option,
.lh-config-option-group input[type="text"].config-option {
	padding-top: 0.62rem !important;
	padding-bottom: 0.62rem !important;
	font-size: 0.86rem !important;
}
@media (max-width: 640px) {
	.app-shell-public .lh-config-options {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================
   V54b — CONSENT CHECKBOX IS A CHECKBOX, NOT AN INPUT FIELD
   The checkout card sizes every input to 40-44px min-height;
   the withdrawal checkbox inherited that and grew a tall ugly
   box on interaction. Locked to its real 17px square.
   ============================================================ */
.app-shell .lh-withdrawal-consent input[type="checkbox"],
.app-shell-public .lh-checkout-card .lh-withdrawal-consent input[type="checkbox"] {
	width: 17px !important;
	height: 17px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 17px !important;
	max-height: 17px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 4px !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 1rem !important;
}
.app-shell .lh-withdrawal-consent input[type="checkbox"]:focus,
.app-shell .lh-withdrawal-consent input[type="checkbox"]:focus-visible,
.app-shell-public .lh-checkout-card .lh-withdrawal-consent input[type="checkbox"]:focus {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	outline: 2px solid rgba(192, 132, 252, 0.5) !important;
	outline-offset: 2px !important;
}

/* V56b — options back on the original two columns */
.app-shell-public .lh-config-options {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 640px) {
	.app-shell-public .lh-config-options {
		grid-template-columns: 1fr !important;
	}
}

/* V56c — option cards calibrate to equal heights per row */
.app-shell-public .lh-config-options {
	align-items: stretch !important;
}
.lh-config-option-group {
	display: flex;
}
.lh-config-option-group > .glass-card {
	display: flex;
	flex-direction: column;
	width: 100%;
}
/* the control area centers in whatever space the row gives it */
.lh-config-option-group > .glass-card > div:not(.lh-option-card-heading) {
	margin-top: auto;
	margin-bottom: auto !important;
}

/* ============================================================
   V57 — LOCATION SELECT CARRIES ITS OWN STATUS
   Availability problems show inside the selector (message
   option + tinted border) instead of as loose text below.
   ============================================================ */
select.config-option.lh-select-warn {
	border-color: rgba(251, 191, 36, 0.55) !important;
	box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.08) !important;
	color: #fde68a !important;
}
select.config-option.lh-select-error {
	border-color: rgba(251, 113, 133, 0.6) !important;
	box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.08) !important;
	color: #fda4af !important;
}
select.config-option option[data-msg-option] {
	color: #94a3b8;
	font-style: italic;
}

/* V57b — no leftover gap under the location select */
.location-availability-status:empty {
	display: none !important;
	margin: 0 !important;
}

/* V58 — featured news headline hugs the top of the icon row */
.lh-news-headline {
	margin-top: -3px;
}
.lh-news-headline .lh-news-title-featured {
	margin: 0 0 0.3rem !important;
	line-height: 1.25 !important;
}

/* ============================================================
   V59 — NOTIFICATIONS: MODERN FEED + LIVE BELL
   ============================================================ */
.lh-notif-feed {
	display: flex;
	flex-direction: column;
}
.lh-notif-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid rgba(148, 130, 230, 0.1);
	transition: background 0.16s ease;
}
.lh-notif-item:last-child { border-bottom: none; }
.lh-notif-item:hover { background: rgba(139, 92, 246, 0.06); }
.lh-notif-item.is-unread {
	background: rgba(139, 92, 246, 0.05);
	box-shadow: inset 3px 0 0 #8b5cf6;
}
.lh-notif-item.is-unread:hover { background: rgba(139, 92, 246, 0.09); }

.lh-notif-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border-radius: 11px;
	font-size: 0.9rem;
}
.lh-notif-item.is-info .lh-notif-icon    { background: rgba(56, 189, 248, 0.12); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.25); }
.lh-notif-item.is-success .lh-notif-icon { background: rgba(52, 211, 153, 0.12); color: #6ee7b7; border: 1px solid rgba(52, 211, 153, 0.25); }
.lh-notif-item.is-warning .lh-notif-icon { background: rgba(251, 191, 36, 0.12); color: #fcd34d; border: 1px solid rgba(251, 191, 36, 0.25); }
.lh-notif-item.is-error .lh-notif-icon   { background: rgba(244, 63, 94, 0.12); color: #fb7185; border: 1px solid rgba(251, 113, 133, 0.25); }

.lh-notif-body { flex: 1 1 auto; min-width: 0; }
.lh-notif-title {
	color: #cfd4f1;
	font-weight: 700;
	font-size: 0.92rem;
	margin-bottom: 0.2rem;
}
.lh-notif-item.is-unread .lh-notif-title { color: #fff; }
.lh-notif-title em {
	display: inline-block;
	margin-left: 0.45rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: rgba(139, 92, 246, 0.2);
	border: 1px solid rgba(192, 132, 252, 0.4);
	color: #d8b4fe;
	font-size: 0.62rem;
	font-style: normal;
	font-weight: 800;
	letter-spacing: 0.06em;
	vertical-align: middle;
}
.lh-notif-body p {
	margin: 0;
	color: #8d97bd;
	font-size: 0.82rem;
	line-height: 1.5;
	overflow-wrap: break-word;
}
.lh-notif-time {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.15rem;
	flex: 0 0 auto;
	padding-top: 0.1rem;
}
.lh-notif-time span { color: #aab2d6; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.lh-notif-time small { color: #6e7896; font-size: 0.7rem; font-family: ui-monospace, Menlo, monospace; }

/* --- Bell: numeric badge + gentle swing while unread --- */
.lh-notif-count {
	position: absolute;
	top: -5px;
	right: -5px;
	display: flex;
	width: 17px;
	height: 17px;
}
.lh-notif-count-num {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 999px;
	background: #ef4444;
	border: 2px solid #0c0f26;
	color: #fff;
	font-size: 0.56rem;
	font-weight: 800;
	line-height: 1;
}
.lh-bell-unread i {
	animation: lh-bell-swing 2.4s ease-in-out infinite;
	transform-origin: top center;
}
@keyframes lh-bell-swing {
	0%, 60%, 100% { transform: rotate(0); }
	64% { transform: rotate(14deg); }
	68% { transform: rotate(-12deg); }
	72% { transform: rotate(9deg); }
	76% { transform: rotate(-6deg); }
	80% { transform: rotate(3deg); }
	84% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
	/* Motion is off (e.g. Windows "show animations" disabled), so the swing
	   and ping can't signal an unread notification. Replace them with a clear
	   STATIC indicator: a steady red halo on the count badge + a tinted bell. */
	.lh-bell-unread i { animation: none !important; }
	.lh-notif-count .animate-ping { animation: none !important; opacity: 0 !important; }
	.lh-notif-count-num {
		box-shadow: 0 0 0 2px #0c0f26, 0 0 0 4px rgba(239, 68, 68, 0.45) !important;
	}
	.lh-bell-unread {
		box-shadow: inset 0 0 0 1.5px rgba(239, 68, 68, 0.4) !important;
	}
}

/* ============================================================
   V60 — MOBILE OVERFLOW GUARD + FOOTER HARDENING (S23 ~360px)
   Narrow Androids reported overlapping footer link columns and
   a horizontal-overflow gap on the store. The page can never
   scroll sideways on phones now (overflow-x: clip keeps sticky
   headers working, unlike hidden), and the footer columns are
   hardened against squeeze.
   ============================================================ */
@media (max-width: 640px) {
	html, body {
		overflow-x: clip;
		max-width: 100%;
	}

	.lh-footer-main {
		grid-template-columns: 1fr !important;
	}
	.lh-footer-brand {
		width: 100%;
	}
	.lh-footer-links {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 1.25rem 0.7rem !important;
	}
	.lh-footer-links > div {
		min-width: 0;
	}
	.lh-footer-links a,
	.lh-footer-label {
		white-space: normal !important;
		overflow-wrap: anywhere;
		line-height: 1.55;
		font-size: 0.74rem !important;
	}
	.lh-footer-brand p {
		max-width: 100% !important;
	}
	.lh-footer-meta {
		grid-template-columns: 1fr !important;
		justify-items: start;
		gap: 1rem !important;
	}
	.lh-footer-trust,
	.lh-footer-payments,
	.lh-footer-legal {
		flex-wrap: wrap;
		max-width: 100%;
	}
	.lh-footer-signal {
		max-width: 100%;
	}

	/* store surfaces can never push past the viewport */
	.lh-store-heading,
	.lh-config-heading,
	.lh-store-config #serverConfigForm,
	.lh-store-regions,
	.lh-category-bar,
	.lh-game-search {
		max-width: 100% !important;
		min-width: 0 !important;
	}
}

/* ============================================================
   V61 — LIVE CLIENT LATENCY STATES (homepage network panel)
   The node-load chip now reflects the visitor's real measured
   round-trip latency, colour-coded by quality.
   ============================================================ */
.app-shell-public .lh-location-row .lh-node-load.is-measuring {
	border-color: rgba(148, 163, 184, 0.22) !important;
	background: rgba(148, 163, 184, 0.07) !important;
	color: #94a3b8 !important;
	letter-spacing: 0.12em;
	animation: lh-latency-pulse 1.1s ease-in-out infinite;
}
@keyframes lh-latency-pulse {
	0%, 100% { opacity: 0.45; }
	50% { opacity: 1; }
}
.app-shell-public .lh-location-row .lh-node-load.is-good {
	border-color: rgba(52, 211, 153, 0.28) !important;
	background: rgba(52, 211, 153, 0.08) !important;
	color: #6ee7b7 !important;
}
.app-shell-public .lh-location-row .lh-node-load.is-mid {
	border-color: rgba(251, 191, 36, 0.3) !important;
	background: rgba(251, 191, 36, 0.08) !important;
	color: #fcd34d !important;
}
.app-shell-public .lh-location-row .lh-node-load.is-high {
	border-color: rgba(251, 113, 133, 0.32) !important;
	background: rgba(244, 63, 94, 0.08) !important;
	color: #fda4af !important;
}
.app-shell-public .lh-location-row .lh-node-load.is-warning {
	border-color: rgba(251, 191, 36, 0.3) !important;
	background: rgba(251, 191, 36, 0.07) !important;
	color: var(--lh-yellow) !important;
}

/* ============================================================
   V62 — AUTHENTICATED TOPBAR ON PHONES
   Profile/Logout move to the hamburger menu on phones (they're
   already there), leaving only the bell + menu button, which fit
   without being clipped by the overflow guard. The notification
   dropdown is repositioned to a safe band via notifications.js.
   ============================================================ */
@media (max-width: 640px) {
	.lh-account-actions {
		padding-right: 2px;
	}
	.lh-account-actions > a,
	.lh-account-actions > button,
	.lh-account-actions > #notifContainer {
		flex-shrink: 0;
	}
	#notifDropdown {
		max-width: calc(100vw - 20px);
	}
}

/* ============================================================
   V63 — GRID ITEMS MUST NOT BE WIDENED BY SCROLLABLE TABLES
   .lh-page-flow is a CSS grid; its items default to min-width:auto,
   so a wide table (e.g. a populated affiliate referral list) blew
   the column past the viewport and pushed the whole page right.
   Pinning min-width:0 lets the inner .overflow-x-auto scroll instead.
   ============================================================ */
.lh-page-flow,
.lh-page-flow > * {
	min-width: 0;
	max-width: 100%;
}
.workspace-page .overflow-x-auto {
	max-width: 100%;
}

/* ============================================================
   V64 — PLATFORM SPECS ON PHONES: CLEAN BALANCED ROWS
   Multiple overlapping grid rules left Memory/Storage with the
   label stacked oddly over the value. On phones each spec is now
   one tidy row: [icon] [label] ........... [value right-aligned],
   so both cards read identically and stay centred.
   ============================================================ */
@media (max-width: 640px) {
	.app-shell-public .lh-platform-specs {
		grid-template-columns: 1fr !important;
		gap: .5rem !important;
	}
	.app-shell-public .lh-platform-specs > span {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: .65rem !important;
		padding: .65rem .85rem !important;
		text-align: left !important;
	}
	.app-shell-public .lh-platform-specs i {
		grid-column: auto !important;
		grid-row: auto !important;
		width: 22px !important;
		height: 22px !important;
		flex: 0 0 22px !important;
		margin: 0 !important;
	}
	.app-shell-public .lh-platform-specs small {
		grid-column: auto !important;
		grid-row: auto !important;
		flex: 0 0 auto;
		min-width: 56px;
		line-height: 1.2;
	}
	.app-shell-public .lh-platform-specs strong {
		grid-column: auto !important;
		grid-row: auto !important;
		margin-left: auto !important;
		text-align: right !important;
		white-space: nowrap;
		overflow: visible;
	}
}

/* ============================================================
   V65 — NOTIFICATION DROPDOWN: SMOOTH FADE + SLIDE
   Self-contained open animation (driven by .lh-notif-show from
   notifications.js) so it doesn't depend on fragile Tailwind
   scale utilities. Neutralises the build's `scale:` so transform
   owns the motion.
   ============================================================ */
#notifDropdown {
	scale: none !important;
	transition: opacity .34s ease, transform .34s cubic-bezier(.16, 1, .3, 1) !important;
	transform: translateY(-10px) scale(.96) !important;
	opacity: 0 !important;
	will-change: opacity, transform;
}
#notifDropdown.lh-notif-show {
	transform: translateY(0) scale(1) !important;
	opacity: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
	#notifDropdown {
		transition: opacity .2s ease !important;
		transform: none !important;
	}
	#notifDropdown.lh-notif-show {
		transform: none !important;
	}
}

/* ============================================================
   V66 — NEWS CONTENT SPACING MATCHES THE EDITOR
   The rich-text editor saves empty spacers between sections
   (<p><br></p>, <p></p>, stray <br>, <hr>). With the browser's
   default 1em paragraph margins these stacked into huge gaps on
   the public page. Here paragraph rhythm is tightened and the
   empty spacers are collapsed so the article reads as written.
   ============================================================ */
.lh-news-page .prose p,
.lh-news-page .lh-news-card .prose p {
	margin: 0 0 0.7em !important;
}
.lh-news-page .prose p:last-child {
	margin-bottom: 0 !important;
}
/* Empty spacer paragraphs -> one small, single gap, not a double margin */
.lh-news-page .prose p:empty {
	margin: 0 !important;
	height: 0 !important;
	line-height: 0 !important;
}
.lh-news-page .prose p:has(> br:only-child) {
	margin: 0 0 0.4em !important;
	line-height: 0 !important;
}
.lh-news-page .prose p > br:only-child {
	display: none;
}
/* Stray top-level <br> between blocks adds nothing extra */
.lh-news-page .prose > br {
	display: none;
}
.lh-news-page .prose hr {
	margin: 0.9em 0 !important;
	border: 0;
	border-top: 1px solid rgba(148, 130, 230, 0.18);
}
.lh-news-page .prose img {
	margin: 0.1em 0;
}

/* ============================================================
   V67 — NEWS DETAIL PAGE SPACING (the /news/view/ page)
   Here the article body sits inside a .space-y-6 wrapper (which
   itself injects 1.5rem between every block) AND carries the
   editor's empty spacers — together they ballooned the gaps.
   Kill the space-y stacking and collapse the empty spacers, so
   it reads as written, same as the listing fix (V66).
   ============================================================ */
.lh-news-detail-page .space-y-6 > :not([hidden]) ~ :not([hidden]) {
	margin-top: 0 !important;
}
.lh-news-detail-page .space-y-6 p {
	margin: 0 0 0.7em !important;
	line-height: 1.65;
}
.lh-news-detail-page .space-y-6 p:last-child {
	margin-bottom: 0 !important;
}
.lh-news-detail-page .space-y-6 p:empty {
	margin: 0 !important;
	height: 0 !important;
	line-height: 0 !important;
}
.lh-news-detail-page .space-y-6 p:has(> br:only-child) {
	margin: 0 0 0.4em !important;
	line-height: 0 !important;
}
.lh-news-detail-page .space-y-6 p > br:only-child {
	display: none;
}
.lh-news-detail-page .space-y-6 > br {
	display: none;
}
.lh-news-detail-page .space-y-6 hr {
	margin: 0.9em 0 !important;
	border: 0;
	border-top: 1px solid rgba(148, 130, 230, 0.18);
}
.lh-news-detail-page .space-y-6 img {
	margin: 0.1em 0;
}

/* ============================================================
   V68 — NEWS CONTENT: RENDER EXACTLY LIKE THE EDITOR
   Corrects V66/V67. The editor keeps consecutive <p> tight
   (≈0 margin) and encodes the author's blank lines as <br>
   inside/between paragraphs. So: paragraphs hug each other,
   <br> spacers are KEPT (not hidden), and only genuinely empty
   <p></p> collapse. This makes the article match what's typed.
   ============================================================ */
.lh-news-page .prose p,
.lh-news-page .lh-news-card .prose p,
.lh-news-detail-page .space-y-6 p {
	margin: 0 !important;
	line-height: 1.7 !important;
}
/* <br> ARE the intended blank lines — show them */
.lh-news-page .prose p br,
.lh-news-page .prose > br,
.lh-news-detail-page .space-y-6 p br,
.lh-news-detail-page .space-y-6 > br {
	display: inline !important;
}
.lh-news-page .prose p:has(> br:only-child),
.lh-news-detail-page .space-y-6 p:has(> br:only-child) {
	margin: 0 !important;
	line-height: 1.7 !important;
	height: auto !important;
}
/* only truly empty <p></p> (no <br>) collapses */
.lh-news-page .prose p:empty,
.lh-news-detail-page .space-y-6 p:empty {
	margin: 0 !important;
	height: 0 !important;
	line-height: 0 !important;
	display: block;
}
/* don't let the wrapper stack extra space */
.lh-news-detail-page .space-y-6 > :not([hidden]) ~ :not([hidden]) {
	margin-top: 0 !important;
}
.lh-news-page .prose hr,
.lh-news-detail-page .space-y-6 hr {
	margin: 0.5em 0 !important;
	border: 0;
	border-top: 1px solid rgba(148, 130, 230, 0.18);
}


/* ============================================================
   V69 — GLOBAL ANNOUNCEMENT BAR (panel_settings billing notice)
   Replaces the old full-width centred banner (huge empty band
   for short text). Now a slim, left-aligned info alert on the
   violet palette that reads well at any length.
   ============================================================ */
.lh-global-announce {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 1.5rem;
	padding: 0.8rem 1.05rem;
	border: 1px solid rgba(148, 130, 230, 0.2);
	border-left: 3px solid #8b5cf6;
	border-radius: 12px;
	background: linear-gradient(100deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.04) 55%, rgba(34, 211, 238, 0.02));
}
.lh-global-announce-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 9px;
	background: rgba(139, 92, 246, 0.16);
	color: #c4b5fd;
	font-size: 0.82rem;
}
.lh-global-announce-text {
	min-width: 0;
	color: #dfe3f7;
	font-size: 0.88rem;
	line-height: 1.55;
}
.lh-global-announce-text p {
	margin: 0;
}
.lh-global-announce-text p + p {
	margin-top: 0.3rem;
}
.lh-global-announce-text a {
	color: #c4b5fd;
	text-decoration: underline;
}
@media (max-width: 640px) {
	.lh-global-announce {
		padding: 0.7rem 0.85rem;
		gap: 0.65rem;
	}
	.lh-global-announce-text {
		font-size: 0.82rem;
	}
}

/* V69b — align the announcement with the page content.
   On secondary pages a rule forces `main > div` full-width (max-width:none,
   padding:0) and re-centres the actual content via the inner section at
   `min(100% - 48px, 1420px)`. The announce is a sibling of that section, so
   it must be given the SAME centred container or it spans the whole viewport. */
body.app-secondary-canvas .lh-global-announce {
	width: min(100% - 48px, 1420px) !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 1.5rem;
}

/* V69c — primary-canvas pages (home, store): keep the announce off the
   header, and give it a near-transparent surface + a soft fading accent so
   it sits ON the aurora background instead of cutting a hard band/box. */
.app-shell-public main > div:has(.lh-home-hero) .lh-global-announce,
.app-shell-public main > div:has(.lh-store-catalog) .lh-global-announce,
.app-shell-public main > div:has(.lh-store-config) .lh-global-announce {
	margin-top: 1.75rem;
	margin-bottom: 0.6rem;
}
.lh-global-announce {
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	background: linear-gradient(100deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.035) 55%, rgba(34, 211, 238, 0.02)) !important;
	border-color: rgba(148, 130, 230, 0.16) !important;
	border-left: 1px solid rgba(148, 130, 230, 0.16) !important;
	box-shadow: inset 3px 0 0 rgba(139, 92, 246, 0.5);
}

/* ============================================================
   V70 — UNIFORM CONTENT WIDTH ACROSS ALL PUBLIC PAGES
   home/store sat in a max-w-screen-2xl (1536px) padded wrapper,
   while secondary pages use min(100% - 48px, 1420px) with no
   padding — so content started at different x positions. Pin
   home/store to the exact same container so every page lines up.
   ============================================================ */
.app-shell-public main > div:has(.lh-home-hero),
.app-shell-public main > div:has(.lh-store-catalog),
.app-shell-public main > div:has(.lh-store-config) {
	width: min(100% - 48px, 1420px) !important;
	max-width: 1420px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* ============================================================
   V71 — UNIFORM PAGE BACKGROUND (MAIN ONLY)
   Secondary pages (news, services…) had aurora glow on <main>,
   primary pages (home, store) did not — so they looked darker.
   Apply the SAME glow to every public page so all pages match.
   ============================================================ */
body.app-shell-public main {
	background:
		radial-gradient(ellipse 48% 36% at 10% -8%, rgba(109, 40, 217, 0.09), transparent 62%),
		radial-gradient(ellipse 40% 30% at 92% -4%, rgba(99, 102, 241, 0.055), transparent 58%),
		radial-gradient(ellipse 46% 38% at 84% 104%, rgba(34, 211, 238, 0.05), transparent 60%),
		linear-gradient(180deg, rgba(13, 16, 38, 0.5), rgba(8, 10, 26, 0.26) 46%, rgba(6, 8, 22, 0.55)) !important;
}

/* V71b — announcement on HOME: fully transparent surface so it never
   cuts a box/band through the page background; just a soft accent. */
body.app-page-home .lh-global-announce,
body.app-page-store .lh-global-announce,
body.app-page-shop .lh-global-announce {
	background: transparent !important;
	backdrop-filter: none !important;
	border-color: rgba(148, 130, 230, 0.14) !important;
	box-shadow: inset 2px 0 0 rgba(139, 92, 246, 0.4);
}

/* ============================================================
   V71c — HOME/STORE: SAME GRID + STACKING AS SECONDARY (MAIN ONLY)
   Primary pages lacked the main::before grid pattern, so the left
   side looked bare/darker and a seam formed under the header. Add
   the identical grid + isolation (no overflow:hidden, to keep the
   hero's full-bleed effects intact).
   ============================================================ */
body.app-page-home main,
body.app-page-shop main {
	position: relative;
	isolation: isolate;
}
body.app-page-home main::before,
body.app-page-shop main::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(rgba(177, 186, 235, .025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(177, 186, 235, .025) 1px, transparent 1px),
		linear-gradient(118deg, transparent 0 20%, rgba(128, 119, 255, .024) 20% 20.12%, transparent 20.12% 71%, rgba(35, 215, 237, .02) 71% 71.12%, transparent 71.12%);
	background-size: 56px 56px, 56px 56px, auto;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .72) 72%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .72) 72%, transparent 100%);
	opacity: .88;
}

/* ============================================================
   V72 — UNIFORM, HEADER-MATCHING BACKGROUND (MAIN ONLY)
   The body AND <main> each carried asymmetric radial aurora glows
   (at 12%/88%/82%), stacking into a brighter top band + darker
   left side that showed on the empty area under the header on
   home/store. Replace with one even vertical gradient that starts
   at the header colour, and drop the per-page glow on <main> so
   every public page reads identically. The hero keeps its own
   localized glow (that lives on .lh-home-hero, not on main).
   ============================================================ */
body.app-shell-public {
	background: linear-gradient(180deg, #080a1a 0%, #08091a 50%, #06080f 100%) !important;
	background-attachment: fixed !important;
}
body.app-shell-public main {
	background: transparent !important;
}

/* ============================================================
   V73 — INTEGRATE HOME HERO WITH THE UNIFORM BACKGROUND (MAIN ONLY)
   The hero carried its own full-bleed (100vw) grid/glow overlays
   and decorative corner borders that stacked on top of the now-
   uniform page background, re-introducing the seam under the
   header and the darker left edge. Drop them so the hero shows
   the same even background + grid as every other section.
   ============================================================ */
body.app-page-home .lh-home-hero,
body.app-page-home .lh-home-hero::before,
body.app-page-home .lh-home-hero::after,
body.app-page-home main > div:has(.lh-home-hero)::before,
body.app-page-home main > div:has(.lh-home-hero)::after {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* ============================================================
   V74 — CARDS + ANNOUNCE ON SECONDARY PAGES MATCH THE REST (MAIN)
   Secondary pages styled cards with a lighter blue slate
   (rgba(25,35,70)) at higher specificity, making news/services
   look brighter than home/store. Pin them to the same deep slate
   used everywhere else, and make the announcement transparent on
   every page (it was violet-tinted on secondary, transparent on
   home/store).
   ============================================================ */
body.app-secondary-canvas .glass-card,
body.app-secondary-canvas .card,
body.app-secondary-canvas .modern-card,
body.app-secondary-canvas .section-card,
body.app-secondary-canvas .detail-card,
body.app-secondary-canvas .edit-card,
body.app-secondary-canvas .filter-card,
body.app-secondary-canvas .invoice-card,
body.app-secondary-canvas .lh-table-card,
body.app-secondary-canvas .lh-news-card,
body.app-secondary-canvas .lh-stat-card {
	background:
		linear-gradient(rgba(196, 181, 253, 0.012) 1px, transparent 1px),
		linear-gradient(90deg, rgba(196, 181, 253, 0.012) 1px, transparent 1px),
		linear-gradient(150deg, rgba(22, 26, 54, 0.92), rgba(11, 14, 32, 0.97)) !important;
	background-size: 34px 34px, 34px 34px, auto !important;
	border-color: rgba(148, 130, 230, 0.15) !important;
}
body.app-shell-public .lh-global-announce {
	background: transparent !important;
	backdrop-filter: none !important;
	border-color: rgba(148, 130, 230, 0.14) !important;
	box-shadow: inset 2px 0 0 rgba(139, 92, 246, 0.4);
}

/* ============================================================
   V75 — HOME/STORE GRID REACHES THE MENU + BELL ALWAYS SWINGS (MAIN)
   1) The announcement's margin-top was collapsing up through the
      wrapper into <main>, pushing main (and its ::before grid)
      down — leaving a bare strip under the sticky header. A block
      formatting context (display: flow-root) contains that margin
      so the grid starts right under the menu, like other pages.
   2) Make the unread-bell swing run even when the OS has animations
      disabled (it was gated off by prefers-reduced-motion).
   ============================================================ */
body.app-page-home main,
body.app-page-shop main {
	display: flow-root;
}
@media (prefers-reduced-motion: reduce) {
	.lh-bell-unread i {
		animation: lh-bell-swing 2.4s ease-in-out infinite !important;
	}
}

/* ============================================================
   V76 — TIGHTEN GAP BETWEEN ANNOUNCE AND PAGE HEADER (MAIN)
   The first section's big top padding (meant for the empty space
   under the header) stacks with the announcement above it, leaving
   a large gap before the page-title box. When an announcement is
   present, drop that padding so the title sits close under it.
   ============================================================ */
body.app-secondary-canvas main > div:has(.lh-global-announce) > section:first-of-type {
	padding-top: 0.6rem !important;
}

/* ============================================================
   V77 — NOTIFICATION COUNT BADGE PULSES EVERYWHERE (MAIN)
   The number badge stayed static on mobile and with OS animations
   disabled. Give it its own gentle pulse that runs on every device
   AND is forced through reduced-motion, and re-enable the ping ring
   in reduced-motion too, so an unread count is always noticeable.
   ============================================================ */
@keyframes lh-notif-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.16); }
}
.lh-notif-count-num {
	animation: lh-notif-pulse 1.5s ease-in-out infinite;
	transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
	.lh-notif-count-num {
		animation: lh-notif-pulse 1.5s ease-in-out infinite !important;
	}
	.lh-notif-count .animate-ping {
		animation: ping 1.1s cubic-bezier(0, 0, 0.2, 1) infinite !important;
		opacity: 0.7 !important;
	}
}