/* ========================================= */
/* === WQS Design System (UI-dev-v3)     === */
/* ========================================= */

:root { --wqs-color-primary: #2563eb; --wqs-color-primary-hover: #1d4ed8; --wqs-color-secondary: #06b6d4; --wqs-color-accent: #7c3aed; --wqs-color-bg: #f7f8fc; --wqs-color-surface: #ffffff; --wqs-color-surface-alt: #f1f5f9; --wqs-color-text: #0b1220; --wqs-color-text-muted: #5b677a; --wqs-color-text-light: #94a3b8; --wqs-color-border: #e5eaf2; --wqs-color-divider: #eef2f7; --wqs-color-success: #10b981; --wqs-color-warning: #f59e0b; --wqs-color-danger: #ef4444; --wqs-color-info: #3b82f6; --wqs-color-tint-rgb: 99 102 241; --wqs-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --wqs-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); --wqs-shadow-md: 0 14px 34px rgba(15, 23, 42, 0.10); --wqs-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.12); --wqs-shadow-primary: 0 16px 40px rgba(37, 99, 235, 0.28); --wqs-radius-sm: 0.375rem; --wqs-radius: 0.75rem; --wqs-radius-lg: 1rem; --wqs-radius-full: 9999px; --wqs-header-height: 72px; --wqs-container-width: 1400px; --wqs-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); color-scheme: light; }
/* Dark Mode: Neon/tech style (inspired by the provided landing template) */
.dark-mode { --wqs-color-primary: #00ff88; --wqs-color-primary-hover: #00e07a; --wqs-color-secondary: #22d3ee; --wqs-color-accent: #22d3ee; --wqs-color-bg: #070b12; --wqs-color-surface: #0b1220; --wqs-color-surface-alt: #0f1a2e; --wqs-color-text: #eef6ff; --wqs-color-text-muted: #9fb1c9; --wqs-color-text-light: #6f86a7; --wqs-color-border: rgba(255,255,255,0.10); --wqs-color-divider: rgba(255,255,255,0.06); --wqs-color-tint-rgb: 0 255 136; --wqs-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.45); --wqs-shadow: 0 10px 28px rgba(0,0,0,0.55); --wqs-shadow-md: 0 16px 40px rgba(0,0,0,0.65); --wqs-shadow-lg: 0 26px 70px rgba(0,0,0,0.75); --wqs-shadow-primary: 0 16px 40px rgba(0, 255, 136, 0.20); color-scheme: dark; }

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--wqs-color-bg); color: var(--wqs-color-text); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color 0.3s, color 0.3s; overflow-x: hidden; }
.dark-mode body { background-image: radial-gradient(circle at 20% -10%, rgb(var(--wqs-color-tint-rgb) / 0.18) 0%, transparent 40%), radial-gradient(circle at 85% 0%, rgba(34, 211, 238, 0.10) 0%, transparent 45%); background-attachment: fixed; }

/* Home background: grid + subtle animated glow (pure CSS, low overhead) */
body.home::before,
body.home::after,
body.page-template-front-page::before,
body.page-template-front-page::after {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -1;
}

/* Light mode: cleaner "mesh" + subtle dots (avoid heavy grid look) */
html:not(.dark-mode) body.home::before,
html:not(.dark-mode) body.page-template-front-page::before {
	background-image:
		repeating-radial-gradient(circle at 0 0, rgb(15 23 42 / 0.06) 0 1px, transparent 1px 22px);
	background-size: 22px 22px;
	opacity: 0.5;
	transform: translateZ(0);
	animation: wqs-bg-dots-pan 50s linear infinite;
}

html:not(.dark-mode) body.home::after,
html:not(.dark-mode) body.page-template-front-page::after {
	background:
		radial-gradient(900px 520px at 15% -10%, rgb(37 99 235 / 0.18) 0%, transparent 60%),
		radial-gradient(780px 520px at 90% 0%, rgb(124 58 237 / 0.14) 0%, transparent 62%),
		radial-gradient(900px 620px at 55% 110%, rgb(6 182 212 / 0.10) 0%, transparent 60%),
		linear-gradient(180deg, rgb(248 250 252 / 0.90), rgb(247 248 252 / 0.90));
	filter: blur(10px);
	opacity: 0.9;
	transform: translateZ(0);
	animation: wqs-bg-glow-float 18s ease-in-out infinite;
}

@keyframes wqs-bg-dots-pan {
	from { background-position: 0 0; }
	to { background-position: 220px 0; }
}

@keyframes wqs-bg-grid-pan {
	from { background-position: 0 0, 0 0; }
	to { background-position: 72px 0, 0 72px; }
}

@keyframes wqs-bg-glow-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -10px, 0); }
}

/* Dark mode: neon grid + stronger glow */
html.dark-mode body.home::before,
html.dark-mode body.page-template-front-page::before {
	background-image:
		linear-gradient(to right, rgb(var(--wqs-color-tint-rgb) / 0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgb(var(--wqs-color-tint-rgb) / 0.08) 1px, transparent 1px);
	background-size: 72px 72px;
	opacity: 0.35;
	animation: wqs-bg-grid-pan 46s linear infinite;
}

html.dark-mode body.home::after,
html.dark-mode body.page-template-front-page::after {
	background:
		radial-gradient(circle at 20% -10%, rgb(var(--wqs-color-tint-rgb) / 0.22) 0%, transparent 45%),
		radial-gradient(circle at 85% 0%, rgb(34 211 238 / 0.14) 0%, transparent 50%),
		radial-gradient(circle at 60% 90%, rgb(0 255 136 / 0.12) 0%, transparent 55%);
	filter: blur(18px);
	opacity: 0.9;
	animation: wqs-bg-glow-float 16s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	body.home::before,
	body.home::after,
	body.page-template-front-page::before,
	body.page-template-front-page::after,
	html.dark-mode body.home::before,
	html.dark-mode body.home::after,
	html.dark-mode body.page-template-front-page::before,
	html.dark-mode body.page-template-front-page::after {
		animation: none;
	}
}
a { color: inherit; text-decoration: none; transition: var(--wqs-transition); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 1rem 0; font-weight: 700; line-height: 1.2; }
p { margin: 0 0 1rem 0; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: inherit; }

/* WordPress accessibility helper (used by pagination headings, etc.) */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	overflow: visible;
	position: static;
	padding: 0.75rem 1rem;
	border-radius: var(--wqs-radius);
	background: var(--wqs-color-surface);
	box-shadow: var(--wqs-shadow-md);
}

/* --- Layout Utilities --- */
.wqs-container { width: 100%; max-width: var(--wqs-container-width); margin: 0 auto; padding: 0 1.5rem; }
.wqs-container-fluid { width: 100%; padding: 0 1.5rem; }
.wqs-flex { display: flex; }
.wqs-flex-col { flex-direction: column; }
.wqs-items-center { align-items: center; }
.wqs-items-start { align-items: flex-start; }
.wqs-items-end { align-items: flex-end; }
.wqs-items-baseline { align-items: baseline; }
.wqs-justify-between { justify-content: space-between; }
.wqs-justify-center { justify-content: center; }
.wqs-justify-end { justify-content: flex-end; }
.wqs-gap-1 { gap: 0.25rem; }
.wqs-gap-2 { gap: 0.5rem; }
.wqs-gap-3 { gap: 0.75rem; }
.wqs-gap-4 { gap: 1rem; }
.wqs-gap-6 { gap: 1.5rem; }
.wqs-gap-8 { gap: 2rem; }
.wqs-flex-1 { flex: 1; }
.wqs-flex-wrap { flex-wrap: wrap; }
.wqs-grid { display: grid; }
.wqs-grid > * { min-width: 0; }
.wqs-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.wqs-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wqs-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wqs-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wqs-col-span-2 { grid-column: span 2; }
.wqs-row-span-2 { grid-row: span 2; }
@media (max-width: 768px) { .wqs-col-span-2 { grid-column: span 1; } .wqs-row-span-2 { grid-row: span 1; } }
.wqs-mt-2 { margin-top: 0.5rem; }
.wqs-mt-4 { margin-top: 1rem; }
.wqs-mt-6 { margin-top: 1.5rem; }
.wqs-mt-8 { margin-top: 2rem; }
.wqs-mb-1 { margin-bottom: 0.25rem; }
.wqs-mb-3 { margin-bottom: 0.75rem; }
.wqs-mb-0 { margin-bottom: 0 !important; }
.wqs-mb-4 { margin-bottom: 1rem; }
.wqs-mb-6 { margin-bottom: 1.5rem; }
.wqs-mb-8 { margin-bottom: 2rem; }
.wqs-mb-10 { margin-bottom: 2.5rem; }
.wqs-mb-12 { margin-bottom: 3rem; }
.wqs-p-4 { padding: 1rem; }
.wqs-py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.wqs-py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.wqs-text-center { text-align: center; }
.wqs-text-right { text-align: right; }
.wqs-text-sm { font-size: 0.875rem; }
.wqs-text-lg { font-size: 1.125rem; }
.wqs-text-xl { font-size: 1.25rem; }
.wqs-text-2xl { font-size: 1.5rem; }
.wqs-text-3xl { font-size: 1.875rem; }
.wqs-text-4xl { font-size: 2.25rem; }
.wqs-font-bold { font-weight: 700; }
.wqs-text-muted { color: var(--wqs-color-text-muted); }
.wqs-text-primary { color: var(--wqs-color-primary); }
.wqs-text-success { color: var(--wqs-color-success); }
.wqs-text-warning { color: var(--wqs-color-warning); }
.wqs-text-danger { color: var(--wqs-color-danger); }
@keyframes wqs-pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }

/* --- Components: Header --- */
.wqs-header {
	height: var(--wqs-header-height);
	position: sticky;
	top: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	background: rgb(255 255 255 / 0.72);
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	backdrop-filter: blur(14px) saturate(180%);
	border-bottom: 1px solid rgb(15 23 42 / 0.06);
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.dark-mode .wqs-header {
	background: rgb(11 18 32 / 0.68);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
	border-bottom: 1px solid rgba(255,255,255,0.10);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
.wqs-logo { font-size: 1.25rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; color: var(--wqs-color-text); }
.wqs-logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg, var(--wqs-color-primary), var(--wqs-color-accent)); border-radius: 8px; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 10px 26px rgba(37, 99, 235, 0.22); }
.dark-mode .wqs-logo-icon {
	background: rgb(var(--wqs-color-tint-rgb) / 0.14);
	border: 1px solid rgb(var(--wqs-color-tint-rgb) / 0.28);
	color: var(--wqs-color-primary);
	box-shadow: 0 16px 40px rgb(var(--wqs-color-tint-rgb) / 0.12);
}
.wqs-nav { display: none; }
.wqs-nav a,
.wqs-nav-link {
	padding: 0.5rem 1rem;
	font-weight: 600;
	color: var(--wqs-color-text-muted);
	border-radius: var(--wqs-radius-sm);
	display: inline-flex;
	align-items: center;
}
.wqs-nav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	min-width: 40px;
	min-height: 40px;
	color: var(--wqs-color-text-muted);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--wqs-radius-sm);
	line-height: 1;
	cursor: pointer;
}
.wqs-nav a:hover,
.wqs-nav a.active,
.wqs-nav-link:hover,
.wqs-nav-icon:hover {
	color: var(--wqs-color-primary);
	background: rgb(var(--wqs-color-tint-rgb) / 0.05);
}
.wqs-nav-icon:hover {
	background: transparent;
}
.wqs-nav a:focus-visible,
.wqs-nav-link:focus-visible,
.wqs-nav-icon:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgb(var(--wqs-color-tint-rgb) / 0.18);
}
@media (min-width: 768px) { .wqs-nav { display: flex; gap: 0.5rem; } }
.wqs-header-inner { width: 100%; }
.wqs-header-actions { display: flex; align-items: center; gap: 0.75rem; }
.wqs-header-search { position: relative; max-width: 560px; width: 100%; }
.wqs-header-search svg { position: absolute; top: 50%; left: 0.875rem; transform: translateY(-50%); color: var(--wqs-color-text-light); pointer-events: none; }
.wqs-header-search .wqs-input { padding-left: 2.5rem; border-color: var(--wqs-color-border); background: var(--wqs-color-surface); }
@media (max-width: 1024px) { .wqs-header-inner { flex-wrap: wrap; align-items: flex-start; gap: 1rem; } .wqs-header-inner .wqs-header-search { order: 3; max-width: none; } .wqs-header-inner .wqs-header-actions { margin-left: auto; } }

/* --- Components: Buttons --- */
.wqs-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.25rem; border-radius: var(--wqs-radius); font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: var(--wqs-transition); gap: 0.5rem; font-size: 0.95rem; }
.wqs-btn-primary { background: var(--wqs-color-primary); color: #ffffff; box-shadow: var(--wqs-shadow-primary); }
.dark-mode .wqs-btn-primary { color: #06121a; }
.wqs-btn-primary:hover { background: var(--wqs-color-primary-hover); transform: translateY(-1px); box-shadow: var(--wqs-shadow-primary); }
.wqs-btn-outline {
	background: var(--wqs-color-surface);
	border-color: var(--wqs-color-border);
	color: var(--wqs-color-text);
	box-shadow: var(--wqs-shadow-sm);
}
.wqs-btn-outline:hover {
	background: var(--wqs-color-surface-alt);
	border-color: rgb(var(--wqs-color-tint-rgb) / 0.35);
	transform: translateY(-1px);
	box-shadow: var(--wqs-shadow);
}
.dark-mode .wqs-btn-outline {
	background: rgba(255,255,255,0.04);
	border-color: rgba(255,255,255,0.14);
	color: rgba(226, 232, 240, 0.92);
	box-shadow: none;
}
.dark-mode .wqs-btn-outline:hover {
	background: rgba(255,255,255,0.07);
	border-color: rgba(255,255,255,0.22);
}

/* Secondary: subtle filled button (non-primary) */
.wqs-btn-secondary {
	background: var(--wqs-color-surface-alt);
	border-color: var(--wqs-color-border);
	color: var(--wqs-color-text);
	box-shadow: var(--wqs-shadow-sm);
}
.wqs-btn-secondary:hover {
	background: rgb(var(--wqs-color-tint-rgb) / 0.06);
	border-color: rgb(var(--wqs-color-tint-rgb) / 0.28);
	transform: translateY(-1px);
	box-shadow: var(--wqs-shadow);
}
.dark-mode .wqs-btn-secondary {
	background: rgba(255,255,255,0.06);
	border-color: rgba(255,255,255,0.14);
	color: rgba(226, 232, 240, 0.92);
	box-shadow: none;
}
.dark-mode .wqs-btn-secondary:hover {
	background: rgba(255,255,255,0.09);
	border-color: rgba(255,255,255,0.22);
}

/* Ghost: light, clean, text-forward (used for cancel/refresh) */
.wqs-btn-ghost {
	background: transparent;
	border-color: var(--wqs-color-border);
	color: var(--wqs-color-text-muted);
}
.wqs-btn-ghost:hover {
	background: rgb(var(--wqs-color-tint-rgb) / 0.06);
	border-color: rgb(var(--wqs-color-tint-rgb) / 0.28);
	color: var(--wqs-color-text);
	transform: translateY(-1px);
}
.dark-mode .wqs-btn-ghost {
	background: transparent;
	border-color: rgba(255,255,255,0.14);
	color: rgba(226, 232, 240, 0.86);
}
.dark-mode .wqs-btn-ghost:hover {
	background: rgba(255,255,255,0.06);
	border-color: rgba(255,255,255,0.22);
}

/* AI Search: prominent gradient ring button (inspired by Google-style multi-color) */
.wqs-btn-ai {
	position: relative;
	border: 1px solid transparent;
	color: #0b1220;
	background: linear-gradient(135deg,
		rgba(66, 133, 244, 0.10),
		rgba(52, 168, 83, 0.08),
		rgba(251, 188, 5, 0.08),
		rgba(234, 67, 53, 0.10)
	);
	box-shadow: var(--wqs-shadow-sm);
	white-space: nowrap;
	isolation: isolate;
}

.dark-mode .wqs-btn-ai {
	background: linear-gradient(135deg,
		rgba(66, 133, 244, 0.14),
		rgba(34, 211, 238, 0.10),
		rgba(0, 255, 136, 0.10)
	);
	border-color: rgba(255,255,255,0.10);
	color: rgba(238, 246, 255, 0.98);
	box-shadow: none;
}

/* Smoothly animate the conic-gradient angle when supported */
@property --wqs-ai-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

.wqs-btn-ai::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: calc(var(--wqs-radius) + 1px);
	--wqs-ai-angle: 0deg;
	background: conic-gradient(
		from var(--wqs-ai-angle),
		#4285F4,
		#34A853,
		#FBBC05,
		#EA4335,
		#4285F4
	);
	z-index: -2;
	filter: saturate(1.05);
	padding: 1px;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: wqs-ai-border-flow 4.2s linear infinite;
}

@keyframes wqs-ai-border-flow {
	to { --wqs-ai-angle: 360deg; }
}

/* Moving highlight stroke (the “line” runs around the border) */
.wqs-btn-ai::after {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: calc(var(--wqs-radius) + 1px);
	/* mostly transparent, with a bright segment */
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 290deg,
		rgba(255, 255, 255, 0.0) 310deg,
		rgba(255, 255, 255, 0.85) 330deg,
		rgba(255, 255, 255, 0.0) 350deg,
		transparent 360deg
	);
	animation: wqs-ai-stroke-run 1.8s linear infinite;
	z-index: -1;
	padding: 1px;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0.9;
	filter: blur(0.2px);
}

@keyframes wqs-ai-stroke-run {
	to { transform: rotate(360deg); }
}

.wqs-btn-ai:hover {
	transform: translateY(-1px);
	box-shadow: var(--wqs-shadow-md);
}

.wqs-btn-ai:hover::after {
	opacity: 1;
	animation-duration: 1.25s;
}

.wqs-btn-ai:hover {
	filter: saturate(1.05);
}

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

.wqs-btn-ai:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 3px rgb(var(--wqs-color-tint-rgb) / 0.18),
		var(--wqs-shadow-md);
}

@media (prefers-reduced-motion: reduce) {
	.wqs-btn-ai::before,
	.wqs-btn-ai::after { animation: none; }
}

@supports not (background: conic-gradient(red, blue)) {
	.wqs-btn-ai::before {
		background: linear-gradient(90deg, #4285F4, #34A853, #FBBC05, #EA4335);
		animation: none;
	}
	.wqs-btn-ai::after { display: none; }
}

/* Danger */
.wqs-btn-danger {
	background: var(--wqs-color-danger);
	border-color: rgba(0,0,0,0.08);
	color: #ffffff;
	box-shadow: 0 14px 34px rgba(239, 68, 68, 0.22);
}
.wqs-btn-danger:hover {
	filter: brightness(0.96);
	transform: translateY(-1px);
	box-shadow: 0 18px 44px rgba(239, 68, 68, 0.28);
}

/* Disabled helpers */
.wqs-btn:disabled,
.wqs-btn[disabled],
.wqs-btn.wqs-btn-disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}
.wqs-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgb(var(--wqs-color-tint-rgb) / 0.18);
}
.wqs-btn-sm { padding: 0.375rem 0.75rem; font-size: 0.875rem; border-radius: var(--wqs-radius-sm); }
.wqs-btn-lg { padding: 0.875rem 2rem; font-size: 1.125rem; }
.wqs-btn-block { width: 100%; }
.wqs-btn-icon { padding: 0.5rem; border-radius: 50%; width: 40px; height: 40px; background: var(--wqs-color-surface); border: 1px solid var(--wqs-color-border); }
.wqs-btn-icon:hover { background: var(--wqs-color-surface-alt); border-color: rgb(var(--wqs-color-tint-rgb) / 0.25); color: var(--wqs-color-primary); }
.dark-mode .wqs-btn-icon { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
.dark-mode .wqs-btn-icon:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); }
.wqs-btn-icon.active { background: var(--wqs-color-primary); color: white; }
.wqs-btn-xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; border-radius: var(--wqs-radius-sm); line-height: 1; gap: 0.25rem; }

/* Theme toggle icon (moon/sun) */
#wqs-theme-toggle .wqs-theme-icon { display: none; line-height: 0; }
html:not(.dark-mode) #wqs-theme-toggle .wqs-theme-icon-moon { display: inline-flex; }
html.dark-mode #wqs-theme-toggle .wqs-theme-icon-sun { display: inline-flex; }

/* --- Components: Cards --- */
.wqs-card { background: var(--wqs-color-surface); border: 1px solid var(--wqs-color-border); border-radius: var(--wqs-radius-lg); padding: 1.5rem; margin: 1.5rem 0 0 0;transition: var(--wqs-transition); }
.wqs-card:hover { border-color: var(--wqs-color-primary); box-shadow: var(--wqs-shadow-lg); transform: translateY(-2px); }
.wqs-card-flat { box-shadow: none; }
.wqs-card-flat:hover { transform: none; box-shadow: none; }
.wqs-input { width: 100%; padding: 0.75rem 1rem; border-radius: var(--wqs-radius); border: 1px solid var(--wqs-color-border); background: var(--wqs-color-surface); color: var(--wqs-color-text); transition: var(--wqs-transition); }
.dark-mode .wqs-input { background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.15); }
.dark-mode .wqs-input:focus { background: rgba(0, 0, 0, 0.4); }
.wqs-input:focus { outline: none; border-color: var(--wqs-color-primary); box-shadow: 0 0 0 3px rgb(var(--wqs-color-tint-rgb) / 0.15); }

/* Search page: make keyword input more recognizable in dark mode */
.dark-mode .wqs-results-header .wqs-header-search-input .wqs-input {
	background: rgba(255,255,255,0.06);
	border-color: rgba(255,255,255,0.18);
}
.dark-mode .wqs-results-header .wqs-header-search-input .wqs-input:focus {
	background: rgba(255,255,255,0.09);
	border-color: rgba(255,255,255,0.26);
}

/* --- Components: Badges --- */
.wqs-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.wqs-badge-primary { background: rgb(var(--wqs-color-tint-rgb) / 0.10); color: var(--wqs-color-primary); }
.wqs-badge-success { background: rgba(16, 185, 129, 0.1); color: var(--wqs-color-success); }
.wqs-badge-warning { background: rgba(245, 158, 11, 0.1); color: var(--wqs-color-warning); }

/* --- Landing: customer carousel (lightweight) --- */
/* --- Landing: customers marquee (single row, 300x200 tiles, gap 50) --- */
.wqs-customers {
	padding: 1.75rem 0 0.75rem 0;
}

.wqs-customers-head {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.wqs-customers-marquee {
	position: relative;
}

.wqs-customers-marquee-viewport {
	overflow: hidden;
	-webkit-mask-image: none;
	mask-image: none;
}

.wqs-customers-marquee-runner {
	--wqs-marquee-duration: 46s;
	display: flex;
	width: max-content;
	animation: wqs-customers-marquee var(--wqs-marquee-duration) linear infinite;
	will-change: transform;
}

/* Removed old customer tile styles, moved to section 5 */
.wqs-customers-marquee:hover .wqs-customers-marquee-runner,
.wqs-customers-marquee:focus-within .wqs-customers-marquee-runner {
	animation-play-state: paused;
}

@keyframes wqs-customers-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.wqs-customers-marquee-track {
	display: flex;
	gap: 50px;
	padding: 0.25rem 50px 0.25rem 0;
}

/* Fallback definitions for compatibility if needed, but primary styles are below */
@media (max-width: 768px) {
	.wqs-customers-marquee-track { gap: 12px; padding: 0.25rem 12px 0.25rem 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wqs-customers-marquee-runner { animation: none; }
}

/* --- Landing: subtle motion accents --- */
.wqs-landing-hero {
	position: relative;
	overflow: hidden;
}

.wqs-landing-hero::before {
	content: '';
	position: absolute;
	inset: -40% -20% auto -20%;
	height: 520px;
	background: radial-gradient(circle at 30% 30%, rgb(var(--wqs-color-tint-rgb) / 0.12) 0%, transparent 55%);
	filter: blur(18px);
	opacity: 0.9;
	pointer-events: none;
	transform: translateZ(0);
	animation: wqs-hero-glow 14s ease-in-out infinite;
}

@keyframes wqs-hero-glow {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(10px, -8px, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.wqs-landing-hero::before { animation: none; }
}

/* --- Module: Hero Section --- */
.wqs-hero { padding: 6rem 0; text-align: center; background: radial-gradient(circle at top center, rgb(var(--wqs-color-tint-rgb) / 0.10) 0%, transparent 70%); }
.wqs-hero h1 { font-size: 3.5rem; letter-spacing: -0.02em; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--wqs-color-text) 0%, var(--wqs-color-text-light) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wqs-hero p { font-size: 1.25rem; color: var(--wqs-color-text-muted); max-width: 600px; margin: 0 auto 2.5rem auto; }

/* --- Module: Landing (Front Page v2) --- */
.wqs-landing { position: relative; }
.wqs-landing-hero { padding: 1.5rem 0 2.5rem 0; background:
	radial-gradient(900px 380px at 20% -10%, rgba(37, 99, 235, 0.18) 0%, rgba(37, 99, 235, 0) 65%),
	radial-gradient(900px 380px at 85% 0%, rgba(124, 58, 237, 0.14) 0%, rgba(124, 58, 237, 0) 70%);
}

html:not(.dark-mode) .wqs-landing-hero {
	background:
		radial-gradient(1000px 420px at 18% -12%, rgb(37 99 235 / 0.20) 0%, transparent 68%),
		radial-gradient(980px 420px at 86% -4%, rgb(124 58 237 / 0.16) 0%, transparent 70%),
		linear-gradient(180deg, rgb(255 255 255 / 0.85) 0%, transparent 55%);
}

.wqs-hero-announcement { margin: 0 0 1.25rem 0; }
.wqs-hero-announcement-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.55rem 0.95rem;
	border-radius: 9999px;
	border: 1px solid var(--wqs-color-border);
	background: rgb(var(--wqs-color-tint-rgb) / 0.08);
	color: var(--wqs-color-text);
	text-decoration: none;
	transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.wqs-hero-announcement-link:hover {
	transform: translateY(-1px);
	background: rgb(var(--wqs-color-tint-rgb) / 0.11);
	border-color: rgb(var(--wqs-color-tint-rgb) / 0.35);
}
.wqs-hero-announcement-title {
	font-weight: 650;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 44ch;
}
.wqs-hero-announcement-arrow { opacity: 0.75; font-weight: 700; }
@media (max-width: 768px) {
	.wqs-hero-announcement { margin-bottom: 1rem; }
	.wqs-hero-announcement-title { max-width: 26ch; font-size: 0.95rem; }
}

.dark-mode .wqs-hero-announcement-link {
	background: rgb(15 23 42 / 0.35);
	border-color: rgb(var(--wqs-color-tint-rgb) / 0.25);
}
.dark-mode .wqs-hero-announcement-link:hover {
	background: rgb(15 23 42 / 0.50);
	border-color: rgb(var(--wqs-color-tint-rgb) / 0.35);
}

.wqs-landing-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: center; }
@media (max-width: 1024px) { .wqs-landing-hero-grid { grid-template-columns: 1fr; } }
.wqs-landing-hero-copy { text-align: center; }
.wqs-landing-title { font-size: 2.75rem; letter-spacing: -0.03em; margin: 0 0 1rem 0; line-height: 1.12; background: linear-gradient(135deg, var(--wqs-color-text) 0%, rgba(11, 18, 32, 0.55) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 768px) { .wqs-landing-title { font-size: 2.05rem; } }

/* Landing title: remove gradient in dark mode (use solid, higher contrast) */
.dark-mode .wqs-landing-title {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
	color: var(--wqs-color-text);
}
.wqs-landing-subtitle { font-size: 1.125rem; color: var(--wqs-color-text-muted); max-width: 52ch; margin-left: auto; margin-right: auto; }
.wqs-landing-hero-copy .wqs-flex { justify-content: center; }
.wqs-landing-proof { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; color: var(--wqs-color-text-muted); font-size: 0.95rem; }
.wqs-landing-hero-copy .wqs-landing-proof { justify-content: center; }
.wqs-landing-proof-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.wqs-landing-check { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(16, 185, 129, 0.12); color: #059669; font-weight: 800; }

.wqs-landing-mock { border-radius: 1.25rem; border: 1px solid var(--wqs-color-border); background: rgba(255, 255, 255, 0.75); box-shadow: var(--wqs-shadow-lg); overflow: hidden; backdrop-filter: blur(10px); position: relative; }
.dark-mode .wqs-landing-mock { background: rgba(30, 41, 59, 0.75); border-color: #334155; }

html:not(.dark-mode) .wqs-landing-mock {
	background: linear-gradient(180deg, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.72));
	border-color: rgb(15 23 42 / 0.10);
	box-shadow: 0 18px 60px rgba(15, 23, 42, 0.10);
}

html:not(.dark-mode) .wqs-landing-mock::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgb(var(--wqs-color-tint-rgb) / 0.20), rgb(124 58 237 / 0.12), rgb(6 182 212 / 0.12));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.wqs-landing-mock-top { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid var(--wqs-color-divider); }
.dark-mode .wqs-landing-mock-top { border-bottom-color: rgba(255,255,255,0.08); }

html:not(.dark-mode) .wqs-landing-mock-top {
	background: linear-gradient(180deg, rgb(255 255 255 / 0.85), rgb(248 250 252 / 0.72));
}
.wqs-landing-dots { display: inline-flex; gap: 0.35rem; }
.wqs-landing-dots span { width: 10px; height: 10px; border-radius: 9999px; background: rgba(148, 163, 184, 0.5); }
.wqs-landing-dots span:nth-child(1) { background: rgba(239, 68, 68, 0.55); }
.wqs-landing-dots span:nth-child(2) { background: rgba(245, 158, 11, 0.55); }
.wqs-landing-dots span:nth-child(3) { background: rgba(16, 185, 129, 0.55); }
.wqs-landing-mock-title { font-weight: 700; font-size: 0.9rem; color: var(--wqs-color-text-muted); }

html:not(.dark-mode) .wqs-landing-mock-title {
	color: rgb(15 23 42 / 0.55);
	font-weight: 800;
}

.wqs-landing-mock-body { padding: 1.1rem 1.1rem 1.25rem 1.1rem; }
.wqs-landing-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
@media (max-width: 480px) { .wqs-landing-metrics { grid-template-columns: 1fr; } }
.wqs-landing-metric { border: 1px solid var(--wqs-color-border); background: var(--wqs-color-surface); border-radius: 0.9rem; padding: 0.75rem; }
.dark-mode .wqs-landing-metric { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.12); }
.wqs-landing-metric-k { font-size: 0.8rem; color: var(--wqs-color-text-muted); margin-bottom: 0.15rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.wqs-landing-metric-ico { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: rgb(var(--wqs-color-tint-rgb) / 0.85); }
.wqs-landing-metric-ico svg { width: 16px; height: 16px; }
.wqs-landing-metric-v { font-size: 1.05rem; font-weight: 800; color: var(--wqs-color-text); }

.wqs-landing-searchbox { border: 1px dashed rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.06); border-radius: 0.95rem; padding: 0.75rem 0.85rem; margin-bottom: 0.9rem; }
.wqs-landing-searchbox-input { font-weight: 700; color: var(--wqs-color-text); display: inline-flex; align-items: center; gap: 0.45rem; }
.wqs-landing-searchbox-ico { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: rgb(var(--wqs-color-tint-rgb) / 0.85); }
.wqs-landing-searchbox-ico svg { width: 18px; height: 18px; }
.wqs-landing-searchbox-hint { font-size: 0.85rem; color: var(--wqs-color-text-muted); margin-top: 0.2rem; }

html:not(.dark-mode) .wqs-landing-searchbox {
	border-style: solid;
	border-color: rgb(var(--wqs-color-tint-rgb) / 0.22);
	background: linear-gradient(180deg, rgb(var(--wqs-color-tint-rgb) / 0.05), rgb(255 255 255 / 0.55));
	box-shadow: 0 10px 28px rgb(var(--wqs-color-tint-rgb) / 0.10);
}

html:not(.dark-mode) .wqs-landing-searchbox-input {
	letter-spacing: -0.01em;
}

.wqs-landing-result { padding: 0.75rem 0.85rem; border-radius: 0.95rem; border: 1px solid var(--wqs-color-border); background: var(--wqs-color-surface); margin-bottom: 0.6rem; }
.dark-mode .wqs-landing-result { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.12); }
.wqs-landing-result-title { font-weight: 800; margin-bottom: 0.15rem; display: flex; align-items: flex-start; gap: 0.5rem; }
.wqs-landing-result-ico { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 0.05rem; color: rgb(var(--wqs-color-tint-rgb) / 0.85); }
.wqs-landing-result-ico svg { width: 18px; height: 18px; }
.wqs-landing-result-desc { font-size: 0.9rem; color: var(--wqs-color-text-muted); }

html:not(.dark-mode) .wqs-landing-result {
	border-color: rgb(15 23 42 / 0.10);
	background: linear-gradient(180deg, #fff, rgb(248 250 252 / 0.9));
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

html:not(.dark-mode) .wqs-landing-result:hover {
	transform: translateY(-1px);
	border-color: rgb(var(--wqs-color-tint-rgb) / 0.28);
	box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
}

.wqs-landing-feature { margin-top: 0; }
.wqs-landing-feature-title { display: flex; align-items: flex-start; gap: 0.6rem; }
.wqs-landing-feature-ico { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 0.1rem; color: rgb(var(--wqs-color-tint-rgb) / 0.85); }
.wqs-landing-feature-ico svg { width: 20px; height: 20px; }
.wqs-landing-steps { margin: 0 0 1.25rem 0; padding-left: 1.25rem; color: var(--wqs-color-text-muted); }
.wqs-landing-steps li { margin-bottom: 0.5rem; }

.wqs-landing-cta { padding: 4.5rem 0 5.25rem 0; }
.wqs-landing-cta-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.25rem;
	padding: 2.25rem;
	border-radius: 1.25rem;
	border: 1px solid rgba(37, 99, 235, 0.18);
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(124, 58, 237, 0.08));
	box-shadow: var(--wqs-shadow-md);
	position: relative;
	overflow: hidden;
}

.wqs-landing-cta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

@media (max-width: 768px) {
	.wqs-landing-cta-row { flex-direction: column; align-items: flex-start; }
}

.dark-mode .wqs-landing-cta-card {
	border-color: rgb(var(--wqs-color-tint-rgb) / 0.22);
	background: linear-gradient(135deg, rgb(var(--wqs-color-tint-rgb) / 0.10), rgb(34 211 238 / 0.08));
}

/* --- Components: Pagination --- */
.navigation.pagination { display: flex; justify-content: center; }
.navigation.pagination .nav-links { display: inline-flex; gap: 0.5rem; padding: 0.5rem; border: 1px solid var(--wqs-color-border); border-radius: 9999px; background: var(--wqs-color-surface); box-shadow: var(--wqs-shadow-sm); }
.navigation.pagination .page-numbers { min-width: 40px; height: 40px; padding: 0 0.85rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid transparent; color: var(--wqs-color-text-muted); font-weight: 700; }
.navigation.pagination .post-page-numbers { min-width: 40px; height: 40px; padding: 0 0.85rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid transparent; color: var(--wqs-color-text-muted); font-weight: 700; text-decoration: none; }
.navigation.pagination .page-numbers:hover { background: var(--wqs-color-surface-alt); color: var(--wqs-color-text); }
.navigation.pagination .post-page-numbers:hover { background: var(--wqs-color-surface-alt); color: var(--wqs-color-text); }
.navigation.pagination .page-numbers.current { background: rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.18); color: var(--wqs-color-primary); }
.navigation.pagination .post-page-numbers.current { background: rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.18); color: var(--wqs-color-primary); }
.navigation.pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* --- Module: Search V3 (Faceted) --- */
.wqs-search-layout { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: start; padding-top: 2rem; padding-bottom: 4rem; }
@media (max-width: 1024px) {
	.wqs-search-layout { grid-template-columns: 1fr; }
	.wqs-sidebar { position: static !important; top: auto !important; }
	/* <=1024px: hide left sidebars (Search filters + Docs nav) */
	#wqs-search-sidebar { display: none !important; }
	#wqs-docs-sidebar { display: none !important; }
}
.wqs-sidebar { position: sticky; top: calc(var(--wqs-header-height) + 2rem); }
.wqs-filter-group { margin-bottom: 1.5rem; border-bottom: 1px solid var(--wqs-color-divider); padding-bottom: 1.5rem; }
.wqs-filter-group:last-child { border-bottom: 0; }
.wqs-filter-title { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; color: var(--wqs-color-text-muted); margin-bottom: 1rem; }
.wqs-check-item { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; cursor: pointer; user-select: none; }
.wqs-check-item input { display: none; }
.wqs-check-box { width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; border: 2px solid var(--wqs-color-border); border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; transition: var(--wqs-transition); background: var(--wqs-color-surface); }
.wqs-check-item input:checked + .wqs-check-box { background: var(--wqs-color-primary); border-color: var(--wqs-color-primary); }
.wqs-check-box::after { content: '✓'; color: white; font-size: 0.75rem; font-weight: bold; display: none; }
.wqs-check-item input:checked + .wqs-check-box::after { display: block; }
.wqs-check-label { font-size: 0.95rem; color: var(--wqs-color-text-muted); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wqs-check-item:hover .wqs-check-label { color: var(--wqs-color-text); }
.wqs-check-box-round { border-radius: var(--wqs-radius-full); }
.wqs-result-card { display: flex; gap: 1.5rem; padding: 1.5rem; background: var(--wqs-color-surface); border: 1px solid var(--wqs-color-border); border-radius: var(--wqs-radius); margin-bottom: 1rem; transition: var(--wqs-transition); }
.wqs-result-card:hover { border-color: var(--wqs-color-primary); box-shadow: var(--wqs-shadow-md); }
.wqs-result-thumb-link { display: block; flex: 0 0 auto; line-height: 0; text-decoration: none; }
.wqs-result-thumb { width: 180px; height: 120px; border-radius: var(--wqs-radius-sm); object-fit: cover; background: var(--wqs-color-surface-alt); }
.wqs-result-content { flex: 1; }
.wqs-result-title { font-size: 1.25rem; margin-bottom: 0.5rem; }
.wqs-result-title a:hover { color: var(--wqs-color-primary); }
.wqs-result-meta { display: flex; gap: 1rem; font-size: 0.875rem; color: var(--wqs-color-text-muted); margin-bottom: 0.75rem; }
.wqs-highlight { background: rgb(var(--wqs-color-tint-rgb) / 0.15); color: inherit; font-weight: 600; padding: 0 0.15em; border-radius: var(--wqs-radius-sm); }
.wqs-search-main { display: flex; flex-direction: column; gap: 1.5rem; }
.wqs-results-header { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 1.5rem; background: var(--wqs-color-surface); border: 1px solid var(--wqs-color-border); border-radius: var(--wqs-radius-lg); box-shadow: var(--wqs-shadow-sm); }
.wqs-search-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; }
.wqs-search-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.wqs-search-meta-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.wqs-header-search-input { position: relative; }
.wqs-search-hint { margin-top: 0.5rem; line-height: 1.4; }
.wqs-select-sm { padding: 0.5rem 2.25rem 0.5rem 0.75rem; border-radius: var(--wqs-radius-sm); border: 1px solid var(--wqs-color-border); background: var(--wqs-color-surface); font-size: 0.875rem; color: var(--wqs-color-text); }
.wqs-select-sm:focus { outline: none; border-color: var(--wqs-color-primary); box-shadow: 0 0 0 3px rgb(var(--wqs-color-tint-rgb) / 0.12); }
.wqs-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-height: 1.5rem; }
.wqs-filter-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; background: rgb(var(--wqs-color-tint-rgb) / 0.10); color: var(--wqs-color-primary); border-radius: var(--wqs-radius); font-size: 0.75rem; font-weight: 600; }
.wqs-filter-pill button { background: none; border: none; color: inherit; display: inline-flex; align-items: center; cursor: pointer; padding: 0; }
.wqs-filter-pill button:hover { opacity: 0.75; }
.wqs-filter-pill svg { width: 12px; height: 12px; }
.wqs-result-excerpt { font-size: 0.95rem; line-height: 1.7; color: var(--wqs-color-text-muted); margin-bottom: 1.25rem; }
.wqs-result-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.875rem; color: var(--wqs-color-text-muted); flex-wrap: wrap; }
.wqs-result-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wqs-tag-pill { background: var(--wqs-color-surface-alt); color: var(--wqs-color-text-muted); padding: 0.25rem 0.6rem; border-radius: var(--wqs-radius-sm); font-size: 0.75rem; font-weight: 500; }
.wqs-empty-state { padding: 3rem 1rem; text-align: center; background: var(--wqs-color-surface); border: 1px dashed var(--wqs-color-border); border-radius: var(--wqs-radius-lg); color: var(--wqs-color-text-muted); }
.wqs-empty-state h3 { margin: 1rem 0 0.5rem; color: var(--wqs-color-text); }
.wqs-empty-state p { margin: 0 0 1.5rem; }
.wqs-empty-icon { font-size: 2rem; }
.wqs-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; align-items: start; }
.wqs-results-grid .wqs-result-card { flex-direction: column; height: 100%; margin-bottom: 0; }
.wqs-results-grid .wqs-result-card { padding: 1.25rem; }
.wqs-results-grid .wqs-result-thumb { width: 100%; height: 180px; }
.wqs-results-grid .wqs-result-footer { flex-direction: column; align-items: flex-start; }
.wqs-results-grid .wqs-result-tags { width: 100%; }
.wqs-results-grid .wqs-result-excerpt { margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Analytics: keep last-seen date on one line and give it enough width */
#card-zero-results .wqs-table th:nth-child(2),
#card-zero-results .wqs-table td:nth-child(2) { width: 90px; white-space: nowrap; }
#card-zero-results .wqs-table th:nth-child(3),
#card-zero-results .wqs-table td:nth-child(3) { width: 140px; white-space: nowrap; }

/* Search header: reduce occasional wrapping-induced “button jump” */
.wqs-search-actions .wqs-btn { white-space: nowrap; }

/* --- Module: FAQ (Improved for Visuals & Dark Mode) --- */
.wqs-faq-grid { --faq-row-height: auto; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; align-items: start; grid-auto-rows: var(--faq-row-height, auto); }
.wqs-faq-grid.is-masonry-enabled { --faq-row-height: 12px; }
@media (min-width: 768px) { .wqs-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .wqs-faq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wqs-faq-card { --faq-accent: var(--wqs-color-primary); --faq-accent-bg: rgb(var(--wqs-color-tint-rgb) / 0.05); position: relative; padding: 2rem; border: 1px solid var(--wqs-color-border); border-radius: var(--wqs-radius-lg); background: var(--wqs-color-surface); box-shadow: var(--wqs-shadow-sm); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; overflow: hidden; display: block; grid-column: var(--faq-column, auto); }
/* Dark Mode FAQ Card: Subtle glow, lighter border, clear background */
.dark-mode .wqs-faq-card { background: linear-gradient(145deg, #1e293b, #151e2e); border-color: #334155; }
.wqs-faq-card:hover { transform: translateY(-4px); box-shadow: var(--wqs-shadow-md); border-color: var(--wqs-color-primary); }
.wqs-faq-card[open] { border-color: var(--faq-accent); box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--faq-accent); background: linear-gradient(135deg, var(--wqs-color-surface), var(--faq-accent-bg)); }
/* Dark Mode Open State: Subtle accent tint */
.dark-mode .wqs-faq-card[open] { background: linear-gradient(135deg, #0b1220, rgb(var(--wqs-color-tint-rgb) / 0.12)); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--faq-accent); }
.wqs-faq-summary { list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; cursor: pointer; font-weight: 700; font-size: 1.05rem; color: var(--wqs-color-text); margin: 0; padding: 0; line-height: 1.5; }
.wqs-faq-summary::-webkit-details-marker { display: none; }
.wqs-faq-summary span:first-child { flex: 1; }
.wqs-faq-summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--wqs-color-tint-rgb) / 0.18); border-radius: var(--wqs-radius-sm); }
.wqs-faq-toggle-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--wqs-color-surface-alt); color: var(--wqs-color-text-muted); position: relative; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid var(--wqs-color-border); }
.dark-mode .wqs-faq-toggle-icon { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.wqs-faq-toggle-icon::before, .wqs-faq-toggle-icon::after { content: ''; position: absolute; width: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: var(--wqs-transition); }
.wqs-faq-toggle-icon::after { transform: rotate(90deg); }
.wqs-faq-card[open] .wqs-faq-toggle-icon { background: var(--faq-accent); color: #fff; transform: rotate(180deg); border-color: var(--faq-accent); box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.wqs-faq-card[open] .wqs-faq-toggle-icon::after { opacity: 0; transform: rotate(0deg); }
.wqs-faq-bg-icon { position: absolute; bottom: -20px; right: -20px; width: 140px; height: 140px; color: var(--faq-accent); opacity: 0.05; pointer-events: none; transition: all 0.5s ease; filter: grayscale(100%); }
.dark-mode .wqs-faq-bg-icon { opacity: 0.08; }
.wqs-faq-card[open] .wqs-faq-bg-icon { opacity: 0.1; transform: scale(1.1) rotate(-10deg); filter: grayscale(0%); }
.wqs-faq-content { margin-top: 1.5rem; font-size: 0.95rem; line-height: 1.7; color: var(--wqs-color-text-muted); position: relative; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,0.05); animation: wqs-slide-down 0.3s ease; }
.dark-mode .wqs-faq-content { border-top-color: rgba(255,255,255,0.05); }
@keyframes wqs-slide-down { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* --- Component: Button Spinner (Auth Enhancements) --- */
.wqs-btn.is-loading { display: inline-flex; align-items: center; justify-content: center; }
.wqs-spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; }
@keyframes wqs-spin { to { transform: rotate(360deg); } }
.wqs-spinner { animation: wqs-spin 0.9s linear infinite; }
.wqs-faq-card.is-green { --faq-accent: #10b981; --faq-accent-bg: rgba(16, 185, 129, 0.1); }
.wqs-faq-card.is-blue { --faq-accent: #3b82f6; --faq-accent-bg: rgba(59, 130, 246, 0.1); }
.wqs-faq-card.is-indigo { --faq-accent: #6366f1; --faq-accent-bg: rgba(99, 102, 241, 0.1); }
.wqs-faq-card.is-purple { --faq-accent: #8b5cf6; --faq-accent-bg: rgba(139, 92, 246, 0.1); }
.wqs-faq-card.is-orange { --faq-accent: #f97316; --faq-accent-bg: rgba(249, 115, 22, 0.1); }
.wqs-faq-card.is-teal { --faq-accent: #14b8a6; --faq-accent-bg: rgba(20, 184, 166, 0.1); }
.wqs-faq-card.is-rose { --faq-accent: #f43f5e; --faq-accent-bg: rgba(244, 63, 94, 0.1); }
.wqs-faq-card.is-amber { --faq-accent: #f59e0b; --faq-accent-bg: rgba(245, 158, 11, 0.1); }
.wqs-faq-card.is-cyan { --faq-accent: #06b6d4; --faq-accent-bg: rgba(6, 182, 212, 0.1); }
.wqs-faq-card.is-lime { --faq-accent: #84cc16; --faq-accent-bg: rgba(132, 204, 22, 0.1); }
.wqs-faq-card.is-fuchsia { --faq-accent: #d946ef; --faq-accent-bg: rgba(217, 70, 239, 0.1); }
.wqs-faq-card.is-slate { --faq-accent: #64748b; --faq-accent-bg: rgba(100, 116, 139, 0.1); }

@media (max-width: 768px) {
	.wqs-results-header { flex-direction: column; align-items: stretch; }
	.wqs-search-controls {
		width: 100%;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		gap: 0.75rem;
	}
	.wqs-search-actions,
	.wqs-search-meta-controls {
		width: 100%;
		justify-content: center;
	}
}

/* --- Module: Pricing --- */
.wqs-pricing-card { text-align: center; padding: 2.5rem 2rem; border: 1px solid var(--wqs-color-border); border-radius: var(--wqs-radius-lg); background: var(--wqs-color-surface); position: relative; }
.wqs-pricing-card.featured { border-color: var(--wqs-color-primary); box-shadow: var(--wqs-shadow-primary); transform: scale(1.05); z-index: 10; }
.wqs-price { font-size: 3rem; font-weight: 800; color: var(--wqs-color-text); line-height: 1; margin: 1.5rem 0; }
.wqs-price span { font-size: 1rem; font-weight: 500; color: var(--wqs-color-text-muted); }
.wqs-features-list { list-style: none; padding: 0; margin: 2rem 0; text-align: left; }
.wqs-features-list li { margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.75rem; color: var(--wqs-color-text-muted); }
.wqs-features-list li.active { color: var(--wqs-color-text); }
.wqs-features-list li::before {
	content: '';
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border-radius: 9999px;
	background-color: var(--wqs-color-success);
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%206L9%2017l-5-5'%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
}

/* --- Module: User Center --- */
.wqs-dashboard-layout { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - var(--wqs-header-height)); max-width: var(--wqs-container-width); margin: 0 auto; padding: 0 1.5rem; }
.wqs-dash-sidebar { background: transparent; border-right: 1px solid var(--wqs-color-border); padding: 2rem 1rem 2rem 0; }
.wqs-dash-nav a { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; color: var(--wqs-color-text-muted); border-radius: var(--wqs-radius); margin-bottom: 0.5rem; font-weight: 500; }
.wqs-dash-nav a:hover, .wqs-dash-nav a.active { background: var(--wqs-color-surface-alt); color: var(--wqs-color-primary); }
.wqs-dash-content { padding: 2rem; }

/* --- Footer --- */
.wqs-footer { background: var(--wqs-color-surface); border-top: 1px solid var(--wqs-color-border); padding: 4rem 0 2rem 0; margin-top: auto; }
.wqs-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 3rem; }
.wqs-footer-col h4 { font-size: 1rem; margin-bottom: 1.25rem; }
.wqs-footer-col a { display: block; color: var(--wqs-color-text-muted); margin-bottom: 0.75rem; font-size: 0.95rem; }
.wqs-footer-col a:hover { color: var(--wqs-color-primary); }
.wqs-footer-sep { display: inline-block; margin: 0 0.5rem; opacity: 0.75; }

/* --- Tickets: Compact Type Radios (Create Ticket Modal) --- */
.wqs-ticket-type-row { display: flex; gap: 12px; align-items: center; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.wqs-ticket-type-row .wqs-check-item { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0; flex: 0 0 auto; }
.wqs-ticket-type-row .wqs-check-box { flex: 0 0 auto; }
.wqs-ticket-type-row .wqs-check-label { white-space: nowrap; }

/* --- Components: Modals --- */
.wqs-modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.wqs-modal-backdrop.active { opacity: 1; pointer-events: auto; }
.wqs-modal { background: var(--wqs-color-surface); border-radius: var(--wqs-radius-lg); width: 100%; max-width: 480px; padding: 2rem; box-shadow: var(--wqs-shadow-lg); transform: translateY(20px); transition: transform 0.3s ease; }
.wqs-modal-backdrop.active .wqs-modal { transform: translateY(0); }
.wqs-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.wqs-modal-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.wqs-modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--wqs-color-text-muted); }

/* --- Component: Choice Cards (Upgrade Modal) --- */
.wqs-choice-card { position: relative; width: 100%; padding: 1.25rem; margin: 0; border: 1px solid var(--wqs-color-border); border-radius: var(--wqs-radius-lg); background: var(--wqs-color-surface); transition: all 0.2s ease; display: flex; align-items: flex-start; gap: 1rem; cursor: pointer; }
.wqs-choice-card:hover { border-color: var(--wqs-color-primary); background: var(--wqs-color-surface-alt); }
.wqs-choice-card.is-selected { border-color: var(--wqs-color-primary); background-color: rgb(var(--wqs-color-tint-rgb) / 0.04); box-shadow: 0 0 0 1px var(--wqs-color-primary); }
.dark-mode .wqs-choice-card.is-selected { background-color: rgb(var(--wqs-color-tint-rgb) / 0.12); }

.wqs-choice-input { position: absolute; opacity: 0; width: 0; height: 0; }

.wqs-choice-radio-visual { width: 1.25rem; height: 1.25rem; border: 2px solid var(--wqs-color-text-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
.wqs-choice-card.is-selected .wqs-choice-radio-visual { border-color: var(--wqs-color-primary); background: var(--wqs-color-primary); box-shadow: 0 0 0 2px var(--wqs-color-surface); }
.wqs-choice-card:hover .wqs-choice-radio-visual { border-color: var(--wqs-color-primary); }
.wqs-choice-radio-visual::after { content: ''; width: 0.5rem; height: 0.5rem; background: white; border-radius: 50%; opacity: 0; transform: scale(0); transition: all 0.2s; }
.wqs-choice-card.is-selected .wqs-choice-radio-visual::after { opacity: 1; transform: scale(1); }

.wqs-choice-content { flex: 1; min-width: 0; }
.wqs-choice-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; min-width: 0; margin-bottom: 0.25rem; }
.wqs-choice-title-text { font-weight: 700; color: var(--wqs-color-text); min-width: 0; white-space: normal; overflow: visible; word-break: break-word; }
.wqs-choice-title-row .wqs-badge { flex-shrink: 0; }
.wqs-choice-desc { font-size: 0.875rem; color: var(--wqs-color-text-muted); line-height: 1.5; white-space: normal; overflow: visible; word-break: break-word; }
.wqs-choice-subtitle { font-size: 0.875rem; color: var(--wqs-color-text-muted); font-weight: 500; min-width: 0; white-space: normal; overflow: visible; word-break: break-word; }
.wqs-choice-meta-row { margin-top: 0.25rem; }
.wqs-choice-meta { font-size: 0.875rem; color: var(--wqs-color-text-muted); line-height: 1.4; }
.wqs-choice-price { font-weight: 700; color: var(--wqs-color-text); font-size: 1.1rem; flex-shrink: 0; text-align: right; white-space: nowrap; padding-top: 0.1rem; }
.wqs-choice-card.is-selected .wqs-choice-price { color: var(--wqs-color-primary); }

/* --- Components: FAQ (Standard) --- */
.wqs-faq-item { border: 1px solid var(--wqs-color-border); border-radius: var(--wqs-radius); margin-bottom: 1rem; background: var(--wqs-color-surface); overflow: hidden; }
.wqs-faq-item:hover { border-color: var(--wqs-color-text-muted); }
.wqs-faq-summary { padding: 1.25rem; cursor: pointer; font-weight: 600; display: flex; justify-content: space-between; align-items: center; list-style: none; }
.wqs-faq-content { padding: 0 1.25rem 1.25rem 1.25rem; color: var(--wqs-color-text-muted); border-top: 1px solid transparent; }
.wqs-faq-item[open] .wqs-faq-content { border-top-color: var(--wqs-color-divider); padding-top: 1.25rem; }

/* --- Components: Code Block --- */
.wqs-code-block { background: #1e293b; border-radius: var(--wqs-radius); padding: 1.5rem; color: #e2e8f0; font-family: 'Menlo', 'Monaco', 'Courier New', monospace; font-size: 0.875rem; overflow-x: auto; box-shadow: var(--wqs-shadow-lg); max-width: 100%; min-width: 0; }
.wqs-code-header { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.wqs-code-dot { width: 10px; height: 10px; border-radius: 50%; }
.wqs-code-block pre { margin: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wqs-code-block code { white-space: pre; display: block; }

/* --- Components: Auth Pages --- */
.wqs-auth-layout { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--wqs-color-surface-alt); padding: 1.5rem; }
.wqs-auth-card { width: 100%; max-width: 420px; background: var(--wqs-color-surface); padding: 2.5rem; border-radius: var(--wqs-radius-lg); box-shadow: var(--wqs-shadow-lg); }
.wqs-auth-header { text-align: center; margin-bottom: 2rem; }
.wqs-auth-logo { font-size: 2rem; font-weight: 800; color: var(--wqs-color-primary); margin-bottom: 0.5rem; display: inline-block; }

/* Password show/hide toggle */
.wqs-input[type="password"]::-ms-reveal,
.wqs-input[type="password"]::-ms-clear { display: none; }
.wqs-password-field { position: relative; display: flex; align-items: center; }
.wqs-password-field .wqs-input { padding-right: 3rem; }
.wqs-password-toggle { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: transparent; border: 0; padding: 0; width: 32px; height: 32px; border-radius: var(--wqs-radius-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--wqs-color-text-muted); cursor: pointer; }
.wqs-password-toggle:hover { color: var(--wqs-color-text); background: var(--wqs-color-surface-alt); }
.wqs-password-toggle svg { width: 18px; height: 18px; }
.wqs-password-toggle.is-active { color: var(--wqs-color-text); }

/* Sites card actions: 2-line layout (domain+delete / rotate) */
.wqs-site-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; align-items: center; }
.wqs-site-actions .wqs-site-action { white-space: nowrap; width: 100%; justify-content: center; }
.wqs-site-actions .wqs-site-action--domain { order: 1; flex: 1 1 calc(50% - 0.25rem); }
.wqs-site-actions .wqs-site-action--delete { order: 2; flex: 1 1 calc(50% - 0.25rem); }
.wqs-site-actions .wqs-site-action--rotate { order: 3; flex: 1 1 100%; }

/* --- Components: Forms --- */
.wqs-form-group { margin-bottom: 1.25rem; }
.wqs-form-group label { display: block; font-weight: 500; margin-bottom: 0.5rem; font-size: 0.9rem; }
.wqs-form-group label.wqs-checkbox { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; user-select: none; flex-wrap: nowrap; margin-bottom: 0; }
.wqs-checkbox { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; user-select: none; flex-wrap: nowrap; }
.wqs-checkbox input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; opacity: 0; }
.wqs-checkbox-control { width: 1.25rem; height: 1.25rem; border: 2px solid var(--wqs-color-border); border-radius: 0.25rem; display: flex; align-items: center; justify-content: center; transition: var(--wqs-transition); flex-shrink: 0; }
.wqs-checkbox input:checked + .wqs-checkbox-control { background: var(--wqs-color-primary); border-color: var(--wqs-color-primary); }
.wqs-checkbox-control::after { content: '✓'; color: white; font-size: 0.8rem; display: none; }
.wqs-checkbox input:checked + .wqs-checkbox-control::after { display: block; }

/* --- Components: Blog --- */
.wqs-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.wqs-blog-card { overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.wqs-card.wqs-blog-card { padding: 0; }
.wqs-blog-cover { height: 200px; overflow: hidden; background: var(--wqs-color-surface-alt); }
.wqs-blog-cover a { display: block; }
.wqs-blog-cover img { width: 100%; height: 100%; object-fit: cover; }
.wqs-blog-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.wqs-tag { display: inline-block; padding: 0.25rem 0.75rem; background: var(--wqs-color-surface-alt); color: var(--wqs-color-primary); border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.wqs-blog-title { font-size: 1rem; margin: 0.75rem 0; }
.wqs-blog-title a:hover { color: var(--wqs-color-primary); }
.wqs-blog-excerpt { color: var(--wqs-color-text-muted); font-size: 0.95rem; flex: 1; margin-bottom: 1.5rem; }
.wqs-blog-meta { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--wqs-color-text-light); border-top: 1px solid var(--wqs-color-divider); padding-top: 1rem; }

/* Blog cards: compact mode (uniform height, no excerpt) */
.wqs-blog-card--compact { height: 340px; }
.wqs-blog-card--compact .wqs-blog-body { padding: 1rem; }
.wqs-blog-card--compact .wqs-blog-title { margin: 0; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.wqs-blog-card--compact .wqs-blog-meta { margin-top: auto; border-top: 1px solid var(--wqs-color-divider); padding-top: 0.75rem; font-size: 0.85rem; color: var(--wqs-color-text-light); }
.wqs-blog-card--compact .wqs-blog-meta span { white-space: nowrap; }
.wqs-blog-card--compact .wqs-tag { margin-bottom: 0.6rem; }
.wqs-blog-cover--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(37, 99, 235, 0.85), rgba(34, 211, 238, 0.65)); color: rgba(255,255,255,0.35); }
.wqs-blog-cover--placeholder svg { width: 56px; height: 56px; }

/* --- Components: Category Chips --- */
.wqs-category-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.wqs-chip { display: inline-flex; align-items: center; padding: 0.45rem 0.9rem; border-radius: 9999px; border: 1px solid var(--wqs-color-border); background: var(--wqs-color-surface); color: var(--wqs-color-text-muted); font-weight: 700; font-size: 0.9rem; }
.wqs-chip:hover { border-color: rgba(37, 99, 235, 0.35); color: var(--wqs-color-text); background: var(--wqs-color-surface-alt); }
.wqs-chip.is-active { background: rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.18); color: var(--wqs-color-primary); }

/* --- Components: Article (Single Post) --- */
.wqs-article { max-width: 980px; margin: 0 auto; }
.wqs-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; max-width: 1400px; margin: 0 auto; }
.wqs-article-layout .wqs-article { max-width: none; margin: 0; }
.wqs-article-sidebar { position: sticky; top: 96px; align-self: start; }
.wqs-toc-card { border: 1px solid var(--wqs-color-border); border-radius: 1rem; background: linear-gradient(180deg, var(--wqs-color-surface), var(--wqs-color-surface-alt)); box-shadow: var(--wqs-shadow-sm); padding: 0.9rem; max-height: calc(100vh - 140px); overflow: hidden; overflow-y: auto; }
.wqs-toc-heading { font-weight: 900; font-size: 0.9rem; margin-bottom: 0.75rem; color: var(--wqs-color-text); letter-spacing: 0.02em; }
.wqs-toc-empty { color: var(--wqs-color-text-muted); font-size: 0.9rem; }
.wqs-toc-tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.wqs-toc-tree .wqs-toc-tree { margin-top: 4px; margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(148, 163, 184, 0.28); }
.wqs-toc-item { margin: 0; display: grid; grid-template-columns: 22px 1fr; align-items: start; column-gap: 0.35rem; min-width: 0; }
.wqs-toc-item > ul.wqs-toc-tree { grid-column: 2 / -1; }
.wqs-toc-toggle,
.wqs-toc-toggle-spacer { width: 22px; height: 22px; margin-top: 0.2rem; }
.wqs-toc-toggle { border: 1px solid rgba(148, 163, 184, 0.28); background: rgba(255,255,255,0.55); border-radius: 0.55rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--wqs-transition); padding: 0; }
.dark-mode .wqs-toc-toggle { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.wqs-toc-toggle:hover { border-color: rgba(37, 99, 235, 0.35); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10); }
.wqs-toc-toggle::before { content: ''; width: 8px; height: 8px; border-right: 2px solid rgba(71, 85, 105, 0.9); border-bottom: 2px solid rgba(71, 85, 105, 0.9); transform: rotate(45deg); transition: transform 0.18s ease; }
.dark-mode .wqs-toc-toggle::before { border-right-color: rgba(226, 232, 240, 0.8); border-bottom-color: rgba(226, 232, 240, 0.8); }
.wqs-toc-item.is-collapsed > .wqs-toc-toggle::before { transform: rotate(-45deg); }
.wqs-toc-item.is-collapsed > ul.wqs-toc-tree { display: none; }
.wqs-toc-link { display: block; width: 100%; padding: 0.35rem 0.55rem; border-radius: 0.6rem; color: var(--wqs-color-text-muted); text-decoration: none; transition: var(--wqs-transition); line-height: 1.35; white-space: normal; overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.wqs-toc-link:hover { background: rgba(37, 99, 235, 0.06); color: var(--wqs-color-text); }
.wqs-toc-link.is-active { background: rgba(37, 99, 235, 0.10); color: var(--wqs-color-primary); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.16) inset; }
.wqs-toc-level-1 > .wqs-toc-link { font-weight: 900; color: var(--wqs-color-text); }
.wqs-toc-level-2 > .wqs-toc-link { font-weight: 700; }
.wqs-toc-level-3 > .wqs-toc-link { font-size: 0.92rem; }
@media (max-width: 1024px) {
	.wqs-article-layout { grid-template-columns: minmax(0, 1fr); }
	.wqs-article-sidebar { display: none; }
}
.wqs-article-header { margin-bottom: 2rem; }
.wqs-article-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.9rem; margin-bottom: 1rem; }
.wqs-article-title { font-size: 1.5rem; margin: 0 0 0.75rem 0; }
.wqs-article-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; color: var(--wqs-color-text-muted); font-size: 0.95rem; }
.wqs-article-meta-dot { opacity: 0.6; }
.wqs-article-cover { margin-top: 1.5rem; border-radius: 1rem; overflow: hidden; border: 1px solid var(--wqs-color-border); background: var(--wqs-color-surface-alt); }
.wqs-article-cover img { width: 100%; height: auto; display: block; }

/* --- Article: Featured image mixed layout (float right on desktop, full width on mobile) --- */
.wqs-article-featured-float { float: right; margin: 0 0 1rem 1.25rem; width: min(600px, 45%); max-width: 600px; }
.wqs-article-featured-media { position: relative; border-radius: 1rem; overflow: hidden; border: 1px solid var(--wqs-color-border); background: var(--wqs-color-surface-alt); box-shadow: var(--wqs-shadow-sm); aspect-ratio: 4 / 3; max-height: 450px; display: flex; align-items: center; justify-content: center; }
.wqs-article-featured-img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--wqs-color-surface-alt); }
.wqs-article-featured-expand { position: absolute; top: 0.75rem; right: 0.75rem; width: 36px; height: 36px; border-radius: 9999px; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(255,255,255,0.75); color: rgba(15, 23, 42, 0.9); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--wqs-transition); }
.dark-mode .wqs-article-featured-expand { background: rgba(15, 23, 42, 0.35); border-color: rgba(255,255,255,0.16); color: rgba(226, 232, 240, 0.9); }
.wqs-article-featured-expand:hover { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.25); }

@media (max-width: 768px) {
	.wqs-article-featured-float { float: none; width: 100%; max-width: none; margin: 0 0 1rem 0; }
}

/* --- Featured image dialog --- */
dialog.wqs-image-dialog { border: none; padding: 0; background: transparent; width: min(960px, calc(100vw - 2rem)); }
dialog.wqs-image-dialog::backdrop { background: rgba(2, 6, 23, 0.65); }
.wqs-image-dialog-card { position: relative; background: var(--wqs-color-surface); border: 1px solid var(--wqs-color-border); border-radius: 1rem; overflow: hidden; box-shadow: var(--wqs-shadow-md); max-height: calc(100vh - 4rem); display: flex; align-items: center; justify-content: center; }
.wqs-image-dialog-close { position: absolute; top: 0.75rem; right: 0.75rem; width: 38px; height: 38px; border-radius: 9999px; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(255,255,255,0.8); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--wqs-transition); z-index: 2; }
.dark-mode .wqs-image-dialog-close { background: rgba(15, 23, 42, 0.35); border-color: rgba(255,255,255,0.16); }
.wqs-image-dialog-close:hover { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.25); }
.wqs-image-dialog-img { max-width: 100%; max-height: calc(100vh - 4rem); width: auto; height: auto; display: block; background: var(--wqs-color-surface-alt); }

.wqs-prose { background: var(--wqs-color-surface); border: 1px solid var(--wqs-color-border); border-radius: 1rem; padding: 2rem; box-shadow: var(--wqs-shadow-sm); font-size: 1.05rem; line-height: 1.85; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
@media (max-width: 768px) { .wqs-prose { padding: 1.25rem; } }
.wqs-prose > :first-child { margin-top: 0; }
.wqs-prose > :last-child { margin-bottom: 0; }

.wqs-prose :where(p, ul, ol, blockquote, pre, table, figure, .wp-block-image, .wp-block-table) { margin: 1rem 0; }
.wqs-prose :where(h2, h3, h4) { margin: 2.25rem 0 1rem; }
.wqs-prose :where(h2) { font-size: 1.3rem; }
.wqs-prose :where(h3) { font-size: 1.2rem; }
.wqs-prose :where(h4) { font-size: 1.1rem; }
.wqs-prose :where(h1, h2, h3, h4) { scroll-margin-top: 110px; }

.wqs-prose p { color: var(--wqs-color-text); }
.wqs-prose :where(ul, ol) { padding-left: 1.25rem; }
.wqs-prose :where(li) { margin: 0.35rem 0; }
.wqs-prose :where(li > ul, li > ol) { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.wqs-prose a { color: var(--wqs-color-primary); text-decoration: underline; text-underline-offset: 3px; }
.wqs-prose a:hover { color: var(--wqs-color-primary-hover); }
.wqs-prose blockquote { margin: 1.25rem 0; padding: 0.75rem 1rem; border-left: 4px solid rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.06); border-radius: 0.75rem; color: var(--wqs-color-text-muted); }
.wqs-prose :where(hr) { border: 0; border-top: 1px solid var(--wqs-color-divider); margin: 2rem 0; }
.wqs-prose :where(img:not(.wqs-article-featured-img), video, iframe, embed, object) { max-width: 100%; height: auto; }

/* Content images: avoid being clipped by a fixed-height/overflow wrapper (Gutenberg/classic editor).
 * Keep this scoped to prose, and exclude the featured float figure.
 */
.wqs-prose :where(figure:not(.wqs-article-featured-float), .wp-block-image, .wp-caption) { max-width: 100%; height: auto; overflow: visible; }
.wqs-prose :where(figure:not(.wqs-article-featured-float) img, .wp-block-image img, .wp-caption img) { max-width: 100%; height: auto !important; }

.wqs-prose pre { background: #0b1220; color: #e2e8f0; padding: 1rem; border-radius: 0.9rem; overflow: auto; max-width: 100%; tab-size: 2; white-space: pre; line-height: 1.6; border: 1px solid rgba(255,255,255,0.10); clear: both; }
.wqs-prose code,
.wqs-prose pre,
.wqs-prose kbd,
.wqs-prose samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; }
.wqs-prose code {
	background: rgba(148, 163, 184, 0.16);
	border: 1px solid rgba(148, 163, 184, 0.22);
	padding: 0.08em 0.32em;
	border-radius: 0.38em;
	font-size: 0.92em;
	line-height: 1.4;
	overflow-wrap: anywhere;
	word-break: break-word;
	white-space: pre-wrap;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Code blocks: the <pre> owns the unified background; inner <code> should be plain text.
 * This avoids per-line “bubbles”/uneven backgrounds caused by inline code styling.
 */
.wqs-prose pre code {
	background: transparent;
	border: 0;
	padding: 0;
	border-radius: 0;
	font-size: 0.92em;
	line-height: inherit;
	white-space: pre;
	-webkit-box-decoration-break: slice;
	box-decoration-break: slice;
	display: block;
}

/* Copy button wrapper for <pre> blocks (inserted by JS). */
.wqs-prose .wqs-codeblock {
	position: relative;
	margin: 1rem 0;
	clear: both;
}

/* Customer showcase (CPT: custom) - logo-like image should not be forced full-width */
.wqs-customer-media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	border-radius: 12px;
	border: 1px solid var(--wqs-color-border);
	background: var(--wqs-color-surface-alt);
}
.wqs-customer-logo-img {
	width: auto;
	height: auto;
	max-width: min(320px, 100%);
	max-height: 120px;
	object-fit: contain;
	display: block;
}
.wqs-prose .wqs-codeblock > pre {
	margin: 0;
	padding-top: 2.75rem;
}
.wqs-prose .wqs-codeblock.is-wrap > pre { white-space: pre-wrap; }
.wqs-prose .wqs-codeblock.is-wrap > pre code { white-space: pre-wrap; word-break: break-word; }

.wqs-prose .wqs-codeblock-lang {
	position: absolute;
	top: 0.65rem;
	left: 0.75rem;
	z-index: 2;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(226, 232, 240, 0.72);
	padding: 0.25rem 0.45rem;
	border-radius: 0.55rem;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(15, 23, 42, 0.35);
	backdrop-filter: blur(8px);
}

.wqs-prose .wqs-codeblock-actions {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.wqs-prose .wqs-codeblock-copy {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.55rem;
	border-radius: 0.6rem;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(15, 23, 42, 0.65);
	color: rgba(226, 232, 240, 0.92);
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	backdrop-filter: blur(8px);
}
.wqs-prose .wqs-codeblock-copy:hover { background: rgba(15, 23, 42, 0.85); border-color: rgba(255,255,255,0.22); }
.wqs-prose .wqs-codeblock-copy:active { transform: translateY(1px); }
.wqs-prose .wqs-codeblock-copy:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35); }
.wqs-prose .wqs-codeblock-copy svg { width: 14px; height: 14px; display: block; }
.wqs-prose .wqs-codeblock-copy.is-loading {
	opacity: 0.85;
	cursor: progress;
}
.wqs-prose .wqs-codeblock-copy:disabled {
	opacity: 0.75;
	cursor: not-allowed;
}
.wqs-prose .wqs-codeblock-copy.is-copied {
	background: rgba(16, 185, 129, 0.22);
	border-color: rgba(16, 185, 129, 0.35);
	color: #d1fae5;
}

.wqs-prose .wqs-codeblock-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.5rem;
	border-radius: 0.6rem;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(15, 23, 42, 0.35);
	color: rgba(226, 232, 240, 0.78);
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	user-select: none;
}
.wqs-prose .wqs-codeblock-wrap:hover { background: rgba(15, 23, 42, 0.55); border-color: rgba(255,255,255,0.22); }
.wqs-prose .wqs-codeblock-wrap.is-active { background: rgba(37, 99, 235, 0.22); border-color: rgba(37, 99, 235, 0.35); color: #dbeafe; }
.wqs-prose .wqs-codeblock-wrap svg { width: 14px; height: 14px; display: block; }

/* Multiline inline-code (converted to <pre>) should be a single continuous block */
.wqs-prose pre.wqs-inline-code-block {
	background: rgba(148, 163, 184, 0.10);
	border: 1px solid rgba(148, 163, 184, 0.18);
	color: var(--wqs-color-text);
	padding: 0.85rem 1rem;
	border-radius: 0.9rem;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
	overflow: auto;
	max-width: 100%;
}
.dark-mode .wqs-prose pre.wqs-inline-code-block {
	background: rgba(34, 211, 238, 0.08);
	border: 1px solid rgba(34, 211, 238, 0.16);
	color: #e5e7eb;
}

/* Dark mode: improve code contrast + background */
.dark-mode .wqs-prose code { color: #dbeafe;}
.dark-mode .wqs-prose pre { background: linear-gradient(180deg, rgba(15, 26, 46, 0.98), rgba(11, 18, 32, 0.98)); border: 1px solid rgba(255,255,255,0.10); }

.wqs-prose :where(kbd) { background: var(--wqs-color-surface-alt); border: 1px solid var(--wqs-color-border); border-bottom-width: 2px; padding: 0.1rem 0.35rem; border-radius: 0.35rem; font-size: 0.9em; }

.wqs-prose :where(table) { width: 100%; border-collapse: collapse; font-size: 0.95em; display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wqs-prose :where(th, td) { border: 1px solid var(--wqs-color-border); padding: 0.6rem 0.75rem; vertical-align: top; }
.wqs-prose :where(th) { background: var(--wqs-color-surface-alt); text-align: left; }
.wqs-prose :where(.wp-block-table, figure.wp-block-table) { max-width: 100%; overflow-x: visible; }

.wqs-article-footer { margin-top: 1.25rem; }
.wqs-article-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.wqs-article-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 768px) { .wqs-article-nav { grid-template-columns: 1fr; } }
.wqs-article-nav-item { border: 1px solid var(--wqs-color-border); border-radius: 1rem; padding: 1rem; background: var(--wqs-color-surface); }
.wqs-article-nav-link a:hover { color: var(--wqs-color-primary); }
.wqs-comments { margin-top: 1.5rem; }
.wqs-comments-inner .comment-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.wqs-comments-inner .comment-list .children { list-style: none; margin: 1rem 0 0 0; padding-left: 1.25rem; border-left: 2px solid var(--wqs-color-divider); }
.wqs-comment { margin: 0; }
.wqs-comment .comment-body { background: var(--wqs-color-surface); border: 1px solid var(--wqs-color-border); border-radius: var(--wqs-radius-lg); padding: 1.25rem; box-shadow: var(--wqs-shadow-sm); }
.wqs-comment .comment-author { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.wqs-comment .comment-author .avatar { width: 40px; height: 40px; border-radius: 9999px; }
.wqs-comment .comment-author .fn { font-weight: 700; color: var(--wqs-color-text); }
.wqs-comment .comment-metadata { font-size: 0.875rem; color: var(--wqs-color-text-muted); margin-bottom: 0.75rem; }
.wqs-comment .comment-metadata a { color: inherit; text-decoration: none; }
.wqs-comment .comment-metadata a:hover { color: var(--wqs-color-primary); }
.wqs-comment .comment-content { color: var(--wqs-color-text); line-height: 1.75; }
.wqs-comment .comment-content p { margin: 0.5rem 0; }
.wqs-comment .reply { margin-top: 0.75rem; }
.wqs-comment .reply a { display: inline-flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; font-size: 0.875rem; border-radius: var(--wqs-radius-sm); border: 1px solid var(--wqs-color-border); background: transparent; color: var(--wqs-color-text); text-decoration: none; transition: var(--wqs-transition); }
.wqs-comment .reply a:hover { background: var(--wqs-color-surface-alt); border-color: var(--wqs-color-text-muted); }

.wqs-textarea { width: 100%; padding: 0.75rem 1rem; border-radius: var(--wqs-radius); border: 1px solid var(--wqs-color-border); background: var(--wqs-color-surface); color: var(--wqs-color-text); transition: var(--wqs-transition); min-height: 140px; resize: vertical; }
.wqs-textarea:focus { outline: none; border-color: var(--wqs-color-primary); box-shadow: 0 0 0 3px rgb(var(--wqs-color-tint-rgb) / 0.15); }

.wqs-comments-inner .comment-respond { margin-top: 1.5rem; }
.wqs-comments-inner .comment-reply-title {
	font-size: 1.25rem;
	margin: 0 0 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}
.wqs-comments-inner .comment-reply-title small { font-size: 0.875rem; font-weight: 600; }
.wqs-comments-inner #cancel-comment-reply-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.375rem 0.75rem;
	border-radius: var(--wqs-radius-sm);
	border: 1px solid var(--wqs-color-border);
	background: var(--wqs-color-surface);
	color: var(--wqs-color-text-muted);
	text-decoration: none;
	transition: var(--wqs-transition);
}
.wqs-comments-inner #cancel-comment-reply-link:hover {
	background: var(--wqs-color-surface-alt);
	border-color: var(--wqs-color-text-muted);
	color: var(--wqs-color-text);
}

.wqs-comments-inner .logged-in-as {
	margin: 0 0 1rem;
	color: var(--wqs-color-text-muted);
	font-size: 0.875rem;
}
.wqs-comments-inner .logged-in-as a { color: var(--wqs-color-primary); text-decoration: none; font-weight: 600; }
.wqs-comments-inner .logged-in-as a:hover { color: var(--wqs-color-primary-hover); text-decoration: underline; text-underline-offset: 3px; }

.wqs-comments-inner .comment-notes,
.wqs-comments-inner .comment-notes p,
.wqs-comments-inner .comment-form .comment-notes {
	margin: 0 0 1rem;
	color: var(--wqs-color-text-muted);
	font-size: 0.875rem;
	line-height: 1.6;
}
.wqs-comments-inner .comment-form .required,
.wqs-comments-inner .comment-form label .required {
	color: #ef4444;
	font-weight: 800;
}
.wqs-comments-inner .comment-form p { margin: 0 0 1rem; }
.wqs-comments-inner .comment-form-cookies-consent { display: flex; align-items: center; gap: 0.5rem; }
.wqs-comments-inner .comment-form-cookies-consent input { width: 1rem; height: 1rem; }

/* Comments pagination: match SAAS pagination component */
.navigation.comment-navigation { display: flex; justify-content: center; }
.navigation.comment-navigation .nav-links { display: inline-flex; gap: 0.5rem; padding: 0.5rem; border: 1px solid var(--wqs-color-border); border-radius: 9999px; background: var(--wqs-color-surface); box-shadow: var(--wqs-shadow-sm); }
.navigation.comment-navigation .page-numbers { min-width: 40px; height: 40px; padding: 0 0.85rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid transparent; color: var(--wqs-color-text-muted); font-weight: 700; text-decoration: none; }
.navigation.comment-navigation .page-numbers:hover { background: var(--wqs-color-surface-alt); color: var(--wqs-color-text); }
.navigation.comment-navigation .page-numbers.current { background: rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.18); color: var(--wqs-color-primary); }
.navigation.comment-navigation .page-numbers.dots { border-color: transparent; background: transparent; }

/* Comment form layout */
.wqs-comments-inner .comment-form { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) {
	.wqs-comments-inner .comment-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wqs-comments-inner .comment-form-comment,
	.wqs-comments-inner .comment-form-cookies-consent,
	.wqs-comments-inner .form-submit { grid-column: 1 / -1; }
}

/* --- Components: Tables (for User Center) --- */
.wqs-table { width: 100%; border-collapse: collapse; text-align: left; }
.wqs-table th { padding: 1rem; border-bottom: 2px solid var(--wqs-color-border); font-weight: 600; color: var(--wqs-color-text-muted); }
.wqs-table td { padding: 1rem; border-bottom: 1px solid var(--wqs-color-divider); }
.wqs-table tr:last-child td { border-bottom: none; }

/* --- Components: Settings Forms --- */
.wqs-setting-section { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--wqs-color-divider); }
.wqs-setting-section:last-child { border-bottom: none; }

/* --- Component: Layout Switcher --- */
.wqs-layout-switcher { display: flex; gap: 0.25rem; background: var(--wqs-color-surface); border: 1px solid var(--wqs-color-border); padding: 0.25rem; border-radius: var(--wqs-radius-sm); }
.wqs-layout-switcher .wqs-btn-icon { width: 32px; height: 32px; border-radius: var(--wqs-radius-sm); padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--wqs-color-text-muted); }
.wqs-layout-switcher .wqs-btn-icon:hover { background: var(--wqs-color-surface-alt); color: var(--wqs-color-text); }
.wqs-layout-switcher .wqs-btn-icon.active { background: var(--wqs-color-surface-alt); color: var(--wqs-color-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* --- Component: Skeleton Loading --- */
.wqs-skeleton-card { display: flex; gap: 1.5rem; padding: 1.5rem; background: var(--wqs-color-surface); border: 1px solid var(--wqs-color-border); border-radius: var(--wqs-radius); margin-bottom: 1rem; }
.wqs-sk-thumb { width: 180px; height: 120px; background: var(--wqs-color-surface-alt); border-radius: var(--wqs-radius-sm); animation: wqs-pulse 1.5s infinite; flex-shrink: 0; }
.wqs-sk-content { flex: 1; }
.wqs-sk-line { height: 1rem; background: var(--wqs-color-surface-alt); border-radius: 0.25rem; margin-bottom: 0.75rem; animation: wqs-pulse 1.5s infinite; }
.wqs-sk-line.short { width: 60%; }
.wqs-sk-line.title { height: 1.5rem; width: 80%; margin-bottom: 1rem; }
.wqs-results-grid .wqs-skeleton-card { flex-direction: column; height: 100%; margin-bottom: 0; }
.wqs-results-grid .wqs-sk-thumb { width: 100%; height: 180px; }

/* --- Component: Pricing Table --- */
.wqs-pricing-table-wrap { overflow-x: auto; margin: 0 -1.5rem; padding: 0 1.5rem; }
.wqs-pricing-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.wqs-pricing-table th, .wqs-pricing-table td { padding: 1rem; border-bottom: 1px solid var(--wqs-color-divider); }
.wqs-pricing-table thead th { border-bottom: 2px solid var(--wqs-color-border); }
.wqs-pricing-table .wqs-col-feature { text-align: left; }
.wqs-pricing-table .wqs-col-plan { text-align: center; width: 20%; }
.wqs-pricing-table td:not(:first-child) { text-align: center; }

/* --- Responsive --- */
@media (max-width: 768px) {
  .wqs-hero h1 { font-size: 2.25rem; } /* Slightly smaller for mobile */
  
  /* Grid Collapse */
  .wqs-grid-cols-2, 
  .wqs-grid-cols-3, 
  .wqs-grid-cols-4 { 
    grid-template-columns: 1fr; 
  }
  
  /* Container Handling */
  .wqs-container { padding-left: 1.25rem; padding-right: 1.25rem; }

	/* Search/Docs sidebar: do NOT sticky on mobile (prevents covering content) */
	.wqs-sidebar { position: static !important; top: auto !important; }
	.wqs-search-layout { gap: 1.25rem; padding-top: 1.25rem; padding-bottom: 2.5rem; }

	/* Mobile: hide faceted sidebar (Search + Docs) */
	/* (handled at <=1024px above) */

  /* Landing Hero Grid */
  .wqs-landing-hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center; 
  }
  .wqs-landing-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%; /* Prevent overflow */
  }
  .wqs-landing-title { word-break: break-word; } /* Safety for long titles */

	/* Landing integration code block: prevent page-level horizontal overflow */
	.wqs-code-block { padding: 1rem; border-radius: var(--wqs-radius); max-width: 100%; }
	.wqs-code-block pre { -webkit-overflow-scrolling: touch; }

  /* Landing Integration Steps */
  /* Remove flex-wrap forcing and rely on column direction */
  .wqs-landing-hero-copy .wqs-flex { 
      justify-content: center; 
  }
  
  /* Footer Optimization (Mobile 2-Col Grid) */
  .wqs-footer { padding-top: 3rem; }
  .wqs-footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1rem;
    margin-bottom: 2rem;
  }
  .wqs-footer-col:first-child {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--wqs-color-border);
    padding-bottom: 1.5rem;
    margin-bottom: 0.5rem;
  }
  .wqs-footer-col h4 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.875rem;
  }
  
  /* Dashboard */
  .wqs-dashboard-layout { grid-template-columns: 1fr; }
  .wqs-dash-sidebar { display: none; }

  /* Navigation Mobile Logic */
  .wqs-nav, 
  .wqs-desktop-auth { display: none !important; }
  .wqs-mobile-only { display: inline-flex !important; }
  
  /* Product Market (Demo Page) */
  .wqs-product-market-layout { grid-template-columns: 1fr !important; }
  .wqs-product-market-sidebar { margin-bottom: 0.5rem; width: 100%; border-right: none; padding-right: 0; }
  
  /* Reset Panel Styles for seamless mobile integration */
  .wqs-product-market-panel {
    position: relative !important; /* Force non-sticky */
    top: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .wqs-product-market-panel::before { display: none !important; }
  
  .wqs-product-market-panel-title {
    font-size: 0.75rem;
    color: var(--wqs-color-text-muted);
    margin: 0.5rem 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Horizontal Scrolling Filters on Mobile */
  .wqs-product-market-filter {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 0.5rem;
    margin: 0 -1rem !important; /* bleed edges */
    padding-left: 1rem;
    padding-right: 1rem;
    gap: 0.5rem;
    /* Optional: Fade out edge */
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }
  .wqs-product-market-filter::-webkit-scrollbar { display: none; }
  
  .wqs-product-filter {
    flex-shrink: 0;
    background: var(--wqs-color-surface);
    border: 1px solid var(--wqs-color-border);
    /* Ensure good touch target */
    padding: 0.35rem 0.85rem;
  }
  
  .wqs-product-market-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* --- Pricing Table Responsive --- */
  /* Remove any fixed widths or overly large padding */
  .wqs-pricing-card { padding: 1.5rem; }
  
	/* --- Docs Sidebar Responsive --- */
	/* (handled via #wqs-docs-sidebar at <=1024px) */
}

/* --- Mobile Menu Drawer (Matches header.php) --- */
.wqs-mobile-only { display: none; } /* Default hidden on desktop */

.wqs-mobile-menu {
  position: fixed;
  inset: 0;
  top: var(--wqs-header-height);
  background: var(--wqs-color-surface);
  z-index: 999;
  transform: translateX(100%); /* Slide from right */
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
  overflow-y: auto;
  border-top: 1px solid var(--wqs-color-border);
}

.wqs-mobile-menu.active {
  transform: translateX(0);
  visibility: visible;
}

.wqs-mobile-menu-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.wqs-mobile-nav-links a {
  display: block;
  padding: 1rem 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--wqs-color-text);
  border-bottom: 1px solid var(--wqs-color-divider);
}
.wqs-mobile-nav-links a:last-child { border-bottom: none; }

body.wqs-no-scroll { overflow: hidden; }


/* --- Component: Service Tabs --- */
.wqs-service-tabs { background: var(--wqs-color-surface); border-bottom: 1px solid var(--wqs-color-border); padding: 0; }
.wqs-service-tabs .wqs-container { display: flex; gap: 2rem; }
.wqs-service-tab { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 0; color: var(--wqs-color-text-muted); font-weight: 600; font-size: 0.95rem; border-bottom: 2px solid transparent; transition: var(--wqs-transition); }
.wqs-service-tab:hover { color: var(--wqs-color-text); }
.wqs-service-tab.active { color: var(--wqs-color-primary); border-bottom-color: var(--wqs-color-primary); }
.wqs-service-tab.disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Component: Sidebar Groups --- */
.wqs-sidebar-group { margin-bottom: 2rem; }
.wqs-sidebar-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--wqs-color-text-light); margin-bottom: 0.75rem; padding-left: 1rem; letter-spacing: 0.05em; }

/* --- Components: Alerts --- */
.wqs-alert { padding: 1rem 1.25rem; border-radius: var(--wqs-radius); border: 1px solid var(--wqs-color-border); background: var(--wqs-color-surface-alt); color: var(--wqs-color-text); }
.wqs-alert-warning { border-color: rgba(245, 158, 11, 0.25); background: rgba(245, 158, 11, 0.08); }
.wqs-alert-danger { border-color: rgba(239, 68, 68, 0.25); background: rgba(239, 68, 68, 0.08); }

/* --- Component: Sidebar Nav Dot --- */
.wqs-dash-nav a.wqs-nav-with-dot { position: relative; }
.wqs-nav-dot { position: absolute; top: 0.65rem; right: 0.9rem; width: 8px; height: 8px; border-radius: 9999px; background: var(--wqs-color-danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); display: none; }
.wqs-nav-dot.is-visible { display: block; }

/* --- Components: Avatars --- */
.wqs-avatar { width: 32px; height: 32px; background: var(--wqs-color-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.875rem; flex-shrink: 0; }
.wqs-avatar-lg { width: 80px; height: 80px; font-size: 2rem; }
.wqs-avatar-sm { width: 24px; height: 24px; font-size: 0.75rem; }
.wqs-avatar-wrapper { position: relative; cursor: pointer; display: inline-block; }
.wqs-avatar-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; opacity: 0; transition: opacity 0.2s; }
.wqs-avatar-wrapper:hover .wqs-avatar-overlay { opacity: 1; }

/* --- Components: Progress Bars --- */
.wqs-progress-track { height: 8px; background: var(--wqs-color-border); border-radius: 4px; overflow: hidden; }
.wqs-progress-bar { height: 100%; background: var(--wqs-color-primary); transition: width 0.3s ease; }
.wqs-progress-bar.success { background: var(--wqs-color-success); }
.wqs-progress-bar.warning { background: var(--wqs-color-warning); }
.wqs-progress-bar.danger { background: var(--wqs-color-danger); }

/* --- Components: List Items --- */
.wqs-list-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--wqs-color-border); border-radius: var(--wqs-radius); background: var(--wqs-color-surface); transition: var(--wqs-transition); }
.wqs-list-item:hover { border-color: var(--wqs-color-primary); }

/* --- Utilities: Backgrounds & Borders --- */
.wqs-bg-alt { background: var(--wqs-color-surface-alt) !important; }
.wqs-bg-surface { background: var(--wqs-color-surface) !important; }
.wqs-bg-gradient-surface { background: linear-gradient(to right, var(--wqs-color-surface), #f8fafc); }
.dark-mode .wqs-bg-gradient-surface { background: var(--wqs-color-surface) !important; }
.wqs-border-top { border-top: 1px solid var(--wqs-color-divider); }
.wqs-border-bottom { border-bottom: 1px solid var(--wqs-color-divider); }

/* --- Utilities: Sizing & Overflow --- */
.wqs-w-full { width: 100%; }
.wqs-h-full { height: 100%; }
.wqs-h-200 { height: 200px; }
.wqs-max-h-200 { max-height: 200px; }
.wqs-overflow-y-auto { overflow-y: auto; }
.wqs-mw-300 { max-width: 300px; }

/* --- Utilities: Table Container --- */
.wqs-table-container { border: 1px solid var(--wqs-color-border); border-radius: var(--wqs-radius); overflow: hidden; }
.wqs-table th, .wqs-table td { padding: 0.75rem 1rem; }

/* --- Components: Status Card --- */
.wqs-status-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--wqs-color-surface-alt); border-radius: var(--wqs-radius); }
.wqs-status-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; }
.wqs-status-icon.success { background: var(--wqs-color-success); }
.wqs-status-icon.warning { background: var(--wqs-color-warning); }
.wqs-status-icon.danger { background: var(--wqs-color-danger); }
.wqs-status-content { flex: 1; }
.wqs-status-title { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem 0; }
.wqs-status-value { font-size: 1.5rem; font-weight: 800; color: var(--wqs-color-text); }
.wqs-status-indicator { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.wqs-status-ok { background-color: var(--wqs-color-success); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1); }
.wqs-status-warning { background-color: var(--wqs-color-warning); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1); }
.wqs-status-error { background-color: var(--wqs-color-danger); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1); }

/* --- Components: Readonly Input --- */
.wqs-input[readonly], .wqs-input:disabled { background: var(--wqs-color-surface-alt); color: var(--wqs-color-text-muted); cursor: not-allowed; }
@media (min-width: 768px) { .md\:wqs-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:wqs-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lg\:wqs-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:wqs-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wqs-indices-details summary { list-style: none; }
.wqs-indices-details summary::-webkit-details-marker { display: none; }
.wqs-indices-details[open] summary svg { transform: rotate(180deg); }
.wqs-indices-details summary svg { transition: transform 0.2s; }

/* Modern Tabs Component with Shimmer Effect */
.wqs-tab-modern { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; border-radius: var(--wqs-radius); color: var(--wqs-color-text-muted); font-weight: 600; font-size: 0.9rem; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; background: transparent; border: 1px solid transparent; text-decoration: none; white-space: nowrap; }
.wqs-tab-modern:hover { color: var(--wqs-color-text); background: var(--wqs-color-surface-alt); }
.wqs-tab-modern.active { background: rgb(var(--wqs-color-tint-rgb) / 0.08); color: var(--wqs-color-primary); border-color: rgb(var(--wqs-color-tint-rgb) / 0.10); box-shadow: 0 1px 2px rgb(var(--wqs-color-tint-rgb) / 0.05); }
.wqs-tab-modern.active::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent); transform: skewX(-20deg); animation: wqs-shimmer-slide 3s infinite; pointer-events: none; }
.dark-mode .wqs-tab-modern.active { background: rgb(var(--wqs-color-tint-rgb) / 0.14); color: var(--wqs-color-primary); border-color: rgb(var(--wqs-color-tint-rgb) / 0.22); }
.dark-mode .wqs-tab-modern.active::before { background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.1), transparent); }
@keyframes wqs-shimmer-slide { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }
/* ========================================================================== */
/* === Front Page Specific Styles (Moved from front-page.php) === */
/* ========================================================================== */

/* === 1. Global Utilities & Animations === */
@keyframes wqs-float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
@keyframes wqs-pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(var(--wqs-color-tint-rgb), 0.4); } 70% { box-shadow: 0 0 0 10px rgba(var(--wqs-color-tint-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--wqs-color-tint-rgb), 0); } }

/* === 2. Hero Section === */
.wqs-landing-hero { position: relative; overflow: visible; }
.wqs-landing-mock { transition: transform 0.5s ease-out; }
.wqs-landing-hero-visual:hover .wqs-landing-mock { transform: perspective(1000px) rotateY(-2deg) rotateX(2deg); }

/* Hero Metrics: Glassmorphism */
.wqs-landing-metric {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.dark-mode .wqs-landing-metric {
    background: rgba(15, 23, 42, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    color: #f1f5f9;
}
.wqs-landing-metric:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--wqs-color-primary);
    box-shadow: 0 12px 20px -5px rgba(var(--wqs-color-tint-rgb), 0.25);
    z-index: 10;
}
.wqs-landing-metric-ico { color: var(--wqs-color-primary); transition: transform 0.3s; }
.wqs-landing-metric:hover .wqs-landing-metric-ico { transform: scale(1.2); }

/* === 3. Feature Cards (Legacy/Generic) === */
.wqs-landing-feature {
    position: relative;
    background: var(--wqs-color-surface);
    border: 1px solid transparent; 
    border-radius: 1rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    z-index: 1;
}
.dark-mode .wqs-landing-feature {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Interactive Gradient Border & Glow on Hover */
.wqs-landing-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    padding: 2px;
    background: linear-gradient(135deg, rgba(var(--wqs-color-tint-rgb), 0.1), transparent 50%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.4s;
}

.wqs-landing-feature:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}
.dark-mode .wqs-landing-feature:hover {
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--wqs-color-tint-rgb), 0.1);
    background: rgba(15, 23, 42, 0.8);
}
.wqs-landing-feature:hover::before {
    background: linear-gradient(135deg, var(--wqs-color-primary), var(--wqs-color-secondary));
    opacity: 1;
}

/* Feature Icon Animation */
.wqs-landing-feature-ico {
    display: inline-flex;
    width: 50px !important; height: 50px !important;
    align-items: center; justify-content: center;
    background: rgba(var(--wqs-color-tint-rgb), 0.08);
    border-radius: 12px;
    color: var(--wqs-color-primary);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}
.dark-mode .wqs-landing-feature-ico {
    background: rgba(var(--wqs-color-tint-rgb), 0.15);
}
.wqs-landing-feature:hover .wqs-landing-feature-ico {
    background: var(--wqs-color-primary);
    color: #fff;
    transform:  rotate(5deg) scale(1.1);
    box-shadow: 0 4px 12px rgba(var(--wqs-color-tint-rgb), 0.4);
}

/* === 4. Pricing Cards === */
.wqs-pricing-card {
    border: 1px solid var(--wqs-color-border);
    padding: 2.5rem 2rem;
    border-radius: 1.5rem;
    transition: transform 0.3s, box-shadow 0.3s;
    background: var(--wqs-color-surface);
    position: relative;
}
.dark-mode .wqs-pricing-card {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(255, 255, 255, 0.08);
}
.wqs-pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--wqs-shadow-lg);
    border-color: var(--wqs-color-primary);
}

/* Featured Pricing Card */
.wqs-pricing-card.featured {
    border: 2px solid var(--wqs-color-primary);
    transform: scale(1.05);
    z-index: 5;
    box-shadow: 0 20px 40px rgba(var(--wqs-color-tint-rgb), 0.15);
}
.wqs-pricing-card.featured:hover {
    transform: scale(1.08);
}
.dark-mode .wqs-pricing-card.featured {
        box-shadow: 0 20px 50px rgba(var(--wqs-color-tint-rgb), 0.2);
        background: linear-gradient(180deg, rgba(var(--wqs-color-tint-rgb), 0.08) 0%, rgba(15, 23, 42, 0.8) 100%);
}

/* Badge Animation */
.wqs-pricing-card .wqs-badge {
    animation: wqs-pulse-glow 2s infinite;
}

/* === 5. Customers & Other Sections === */
.wqs-customers-marquee {
	-webkit-mask-image: none;
	mask-image: none;
}

.wqs-customer-tile {
    flex: 0 0 auto;
    width: 200px;
    height: 100px;
    border-radius: 12px; 

	/* Unified image-tile style (align with other covers/thumbs): clean surface + subtle shadow */
	background: var(--wqs-color-surface);
	border: 1px solid transparent;
	box-shadow: var(--wqs-shadow-sm);

    overflow: hidden;
	transition: var(--wqs-transition);
}

.dark-mode .wqs-customer-tile {
	background: rgba(255, 255, 255, 0.03);
}

.wqs-customer-tile:hover {
	transform: translateY(-3px);
	box-shadow: var(--wqs-shadow-md);
	border-color: rgb(var(--wqs-color-tint-rgb) / 0.22);
}

.dark-mode .wqs-customer-tile:hover {
	border-color: rgb(var(--wqs-color-tint-rgb) / 0.18);
}

.wqs-customer-tile:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--wqs-shadow-md);
	border-color: rgb(var(--wqs-color-tint-rgb) / 0.28);
}

/* Make the tile link fill the whole tile; remove ugly default focus outline */
.wqs-customer-tile-link {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}
.wqs-customer-tile-link:focus { outline: none; }
.wqs-customer-tile-link:focus-visible { outline: none; }

.wqs-customer-tile-media {
    height: 100%;
    width: 100%;
	display: block;
	padding: 0;
}

.wqs-customer-tile-media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	opacity: 1;
	transition: transform 0.5s ease, opacity 0.3s ease;
}

.wqs-customer-tile:hover .wqs-customer-tile-media img {
    transform: scale(1.05);
    opacity: 1;
}

.dark-mode .wqs-customer-tile-media img {
	opacity: 1;
}
.dark-mode .wqs-customer-tile:hover .wqs-customer-tile-media img {
    opacity: 1;
}

/* Background Decorations */
.wqs-bg-decor {
    position: absolute; pointer-events: none; z-index: 0;
}

/* === 6. Features Grid Layout (Pro Cards) === */
.wqs-grid-fix-layout {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 992px) { .wqs-grid-fix-layout { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .wqs-grid-fix-layout { grid-template-columns: 1fr; } }

/* Completely REDONE Card Design: Clean, Minimal, Professional */
.wqs-feature-card-pro {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.3s ease;
}

.wqs-feature-card-pro:hover {
    transform: translateY(-5px);
}

.wqs-feature-image-area {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    
    /* Glassmorphism Container */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.dark-mode .wqs-feature-image-area {
    background: rgba(15, 23, 42, 0.4);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.wqs-feature-card-pro:hover .wqs-feature-image-area {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Image Styling with Vignette & Fit */
.wqs-feature-image-area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    display: block;
    /* Edge Fading (Vignette) for blending */
    -webkit-mask-image: radial-gradient(ellipse at center, black 65%, transparent 100%);
    mask-image: radial-gradient(ellipse at center, black 65%, transparent 100%);
    transition: transform 0.5s ease;
    opacity: 0.9;
}

.dark-mode .wqs-feature-image-area img {
    opacity: 0.85; /* Slightly dimmer in dark mode for better blend */
}

.wqs-feature-card-pro:hover .wqs-feature-image-area img {
        transform: scale(1.05);
        opacity: 1;
}

/* Shimmer/Scan Effect on Hover */
.wqs-feature-image-area::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; 
    width: 80%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;
    z-index: 2;
}

.wqs-feature-card-pro:hover .wqs-feature-image-area::after {
    animation: wqs-scan-shine 0.8s ease-in-out;
}

@keyframes wqs-scan-shine {
    0% { left: -100%; }
    100% { left: 200%; }
}

.wqs-feature-title-pro {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wqs-feature-desc-pro {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--wqs-color-text-muted);
}

/* === 7. Integration Visual Animations === */
/* Dynamic Flow Lines */
.wqs-flow-line { 
    stroke-dasharray: 8 4; 
    animation: wqsFlow 1s linear infinite; 
}
@keyframes wqsFlow { 
    from { stroke-dashoffset: 24; } 
    to { stroke-dashoffset: 0; } 
}

/* Reverse Query Line */
.wqs-flow-line-reverse { 
    stroke-dasharray: 8 4; 
    animation: wqsFlowReverse 1s linear infinite; 
}
@keyframes wqsFlowReverse { 
    from { stroke-dashoffset: 24; } 
    to { stroke-dashoffset: 0; } 
}

/* Hover/Float Effect for Modules */
.wqs-anim-float { animation: wqsFloat 4s ease-in-out infinite; }
.wqs-anim-float-delay-1 { animation: wqsFloat 4s ease-in-out infinite 1s; }
.wqs-anim-float-delay-2 { animation: wqsFloat 4s ease-in-out infinite 2s; }
@keyframes wqsFloat { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-6px); } 
}

/* Server blinking light */
.wqs-server-blink { animation: wqsBlink 2s infinite; }
@keyframes wqsBlink { 
    0%, 100% { opacity: 0.3; } 
    50% { opacity: 1; } 
}

/* Result Items Pop-in */
.wqs-result-pop { animation: wqsPop 4s infinite; }
.wqs-result-pop-delay { animation: wqsPop 4s infinite 0.5s; }
@keyframes wqsPop { 
    0%, 10% { opacity: 0.5; width: 60%; } 
    20%, 80% { opacity: 1; width: 100%; } 
    90%, 100% { opacity: 0.5; width: 60%; } 
}

/* === 8. CTA Section === */
.wqs-cta-enhanced {
    position: relative; 
    padding: 4rem 3rem; 
    border-radius: 1.5rem; 
    overflow: hidden; 
    transition: all 0.3s ease;
    
    /* Global Variables Integration */
    --cta-bg-start: var(--wqs-color-surface);
    --cta-bg-end: var(--wqs-color-surface-alt);
    --cta-grid-stroke: rgba(var(--wqs-color-tint-rgb), 0.15);
    --cta-orb-1: rgba(var(--wqs-color-tint-rgb), 0.3);
    --cta-orb-2: rgba(var(--wqs-color-secondary), 0.2);
    
    background: linear-gradient(135deg, var(--cta-bg-start), var(--cta-bg-end));
    box-shadow: var(--wqs-shadow-lg);
    border: 1px solid var(--wqs-color-border);
}

.dark-mode .wqs-cta-enhanced {
    --cta-bg-start: rgba(15, 23, 42, 0.6);
    --cta-bg-end: rgba(15, 23, 42, 0.9);
    --cta-grid-stroke: rgba(var(--wqs-color-tint-rgb), 0.1);
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.7), 0 0 30px rgba(var(--wqs-color-tint-rgb), 0.1);
}

.wqs-cta-title {
    font-size: 2.25rem; 
    font-weight: 800; 
    line-height: 1.2; 
    color: var(--wqs-color-text); 
    margin-bottom: 0.5rem;
}
.wqs-cta-desc {
    font-size: 1.125rem; 
    color: var(--wqs-color-text-muted); 
    margin-top: 1rem;
    max-width: 600px;
}

/* =========================================== */
/* === Tools Hub Layout                     === */
/* =========================================== */

/* Two-col layout: sidebar + main */
.wqs-tools-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 860px) {
  .wqs-tools-layout { grid-template-columns: 1fr; }
}

/* ── Sidebar category nav ────────────────────────────────── */
.wqs-tools-sidebar { position: sticky; top: calc(var(--wqs-header-height) + 1.5rem); }

.wqs-tools-cat-nav { display: flex; flex-direction: column; }

.wqs-tools-cat-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--wqs-color-text-muted);
  border-left: 3px solid transparent;
  transition: var(--wqs-transition);
  text-decoration: none;
}
.wqs-tools-cat-item:hover  { color: var(--wqs-color-text); background: var(--wqs-color-surface-alt); }
.wqs-tools-cat-item.active { color: var(--wqs-color-primary); border-left-color: var(--wqs-color-primary); background: rgb(var(--wqs-color-tint-rgb) / 0.06); font-weight: 700; }
.dark-mode .wqs-tools-cat-item:hover  { background: rgba(255,255,255,0.04); }
.dark-mode .wqs-tools-cat-item.active { background: rgb(var(--wqs-color-tint-rgb) / 0.08); }

.wqs-tools-cat-icon { font-size: 1em; flex-shrink: 0; line-height: 1; }
.wqs-tools-cat-count { margin-left: auto; font-size: 0.75rem; background: var(--wqs-color-surface-alt); border-radius: 9999px; padding: 0.1rem 0.5rem; color: var(--wqs-color-text-muted); }
.wqs-tools-cat-item.active .wqs-tools-cat-count { background: rgb(var(--wqs-color-tint-rgb) / 0.12); color: var(--wqs-color-primary); }

/* ── Category header in main ─────────────────────────────── */
.wqs-tools-cat-icon-lg { font-size: 1.35rem; line-height: 1; }

/* ── Tool card grid ──────────────────────────────────────── */
.wqs-tools-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
@media (max-width: 480px) { .wqs-tools-cards-grid { grid-template-columns: 1fr; } }

.wqs-tool-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 1.25rem;
  background: var(--wqs-color-surface);
  border: 1px solid var(--wqs-color-border);
  border-radius: var(--wqs-radius-lg);
  text-decoration: none;
  color: var(--wqs-color-text);
  transition: var(--wqs-transition);
}
.wqs-tool-card:hover {
  border-color: var(--wqs-color-primary);
  box-shadow: var(--wqs-shadow-md);
  transform: translateY(-2px);
}
.dark-mode .wqs-tool-card { background: rgba(255,255,255,0.03); }
.dark-mode .wqs-tool-card:hover { background: rgba(255,255,255,0.06); }

.wqs-tool-card-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.75rem;
}
.wqs-tool-card-body { flex: 1; }
.wqs-tool-card-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.35rem; }
.wqs-tool-card-desc { font-size: 0.85rem; color: var(--wqs-color-text-muted); line-height: 1.5; }

/* ── Single tool header ──────────────────────────────────── */
.wqs-tools-single-header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--wqs-color-divider);
}
.wqs-tools-icon-lg { font-size: 2.5rem; line-height: 1; }