/* CyberKavach — premium ops console design system (Tailwind CDN + tokens) */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
	/* ══════════════════════════════════════════════════════════════════════════
	   DESIGN TOKEN ARCHITECTURE — Single Source of Truth
	   All components MUST consume these tokens, never define colors directly.
	   ══════════════════════════════════════════════════════════════════════════ */

	/* ────────────────────────────────────────────────────────────────────────
	   PRIMITIVE TOKENS — Raw color values (DO NOT USE DIRECTLY IN COMPONENTS)
	   ──────────────────────────────────────────────────────────────────────── */

	/* CyberKavach Brand Identity */
	--primitive-brand-base: #E53935;
	--primitive-brand-light: #ff5252;
	--primitive-brand-dark: #c62828;

	/* Technical Accent */
	--primitive-cyan: #5eead4;
	--primitive-teal: #2dd4bf;
	--primitive-teal-dark: #14b8a6;

	/* Semantic States */
	--primitive-success: #34d399;
	--primitive-warning: #fbbf24;
	--primitive-danger: #f87171;

	/* Analytics Spectrum */
	--primitive-pink: #ff006e;
	--primitive-magenta: #ec4899;
	--primitive-purple: #a855f7;
	--primitive-violet: #8b5cf6;
	--primitive-blue: #3b82f6;

	/* ────────────────────────────────────────────────────────────────────────
	   SEMANTIC TOKENS — Component-consumable tokens (USE THESE IN COMPONENTS)
	   ──────────────────────────────────────────────────────────────────────── */

	/* Brand Primary — CyberKavach identity (active states, primary CTAs) */
	--brand-primary: var(--primitive-brand-base);
	--brand-primary-hover: var(--primitive-brand-light);
	--brand-primary-pressed: var(--primitive-brand-dark);
	--brand-primary-rgb: 229, 57, 53;
	--brand-primary-glow: rgba(var(--brand-primary-rgb), 0.3);
	--brand-primary-bg: rgba(var(--brand-primary-rgb), 0.09);
	--brand-primary-bg-hover: rgba(var(--brand-primary-rgb), 0.14);
	--brand-primary-border: rgba(var(--brand-primary-rgb), 0.25);
	--brand-primary-border-strong: rgba(var(--brand-primary-rgb), 0.4);

	/* Brand Secondary — Reserved for future use */
	--brand-secondary: var(--primitive-brand-dark);
	--brand-secondary-hover: var(--primitive-brand-base);

	/* Info/Technical — Non-brand informational elements */
	--info-primary: var(--primitive-cyan);
	--info-secondary: var(--primitive-teal);
	--info-rgb: 94, 234, 212;
	--info-muted: rgba(var(--info-rgb), 0.14);
	--info-border: rgba(var(--info-rgb), 0.22);
	--info-glow: rgba(var(--info-rgb), 0.07);

	/* Success — System success states (keep semantic green) */
	--success-primary: var(--primitive-success);
	--success-rgb: 52, 211, 153;
	--success-muted: rgba(var(--success-rgb), 0.12);
	--success-border: rgba(var(--success-rgb), 0.25);

	/* Warning — Caution states */
	--warning-primary: var(--primitive-warning);
	--warning-rgb: 251, 191, 36;
	--warning-muted: rgba(var(--warning-rgb), 0.12);
	--warning-border: rgba(var(--warning-rgb), 0.25);

	/* Danger — Error/destructive states */
	--danger-primary: var(--primitive-danger);
	--danger-rgb: 248, 113, 113;
	--danger-muted: rgba(var(--danger-rgb), 0.12);
	--danger-border: rgba(var(--danger-rgb), 0.28);

	/* ────────────────────────────────────────────────────────────────────────
	   COMPONENT TOKENS — Specific UI patterns
	   ──────────────────────────────────────────────────────────────────────── */

	/* Navigation Active State — ALWAYS brand primary */
	--nav-active-color: var(--brand-primary-hover);
	--nav-active-bg: var(--brand-primary-bg);
	--nav-active-border: var(--brand-primary-border-strong);
	--nav-active-indicator: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-pressed));
	--nav-active-glow: var(--brand-primary-glow);

	/* Primary Button — ALWAYS brand primary */
	--btn-primary-bg: linear-gradient(145deg, var(--brand-primary-bg-hover), rgba(17, 24, 28, 0.95));
	--btn-primary-border: var(--brand-primary-border);
	--btn-primary-border-hover: var(--brand-primary-border-strong);
	--btn-primary-shadow: 0 8px 24px rgba(var(--brand-primary-rgb), 0.15);
	--btn-primary-shadow-hover: 0 12px 28px rgba(var(--brand-primary-rgb), 0.25);

	/* Focus Ring — Brand primary for brand actions, info for forms */
	--focus-ring-brand: rgba(var(--brand-primary-rgb), 0.32);
	--focus-ring-info: rgba(var(--info-rgb), 0.28);

	/* ────────────────────────────────────────────────────────────────────────
	   LEGACY TOKENS — Kept for backward compatibility (MIGRATE AWAY)
	   ──────────────────────────────────────────────────────────────────────── */

	--ck-brand: var(--brand-primary);
	--ck-brand-bright: var(--brand-primary-hover);
	--ck-brand-deep: var(--brand-primary-pressed);
	--ck-brand-muted: var(--brand-primary-bg);
	--ck-cyan: var(--info-primary);
	--ck-cyan-muted: var(--info-muted);
	--ck-teal: var(--info-secondary);
	--ck-teal-deep: var(--primitive-teal-dark);
	--ck-success: var(--success-primary);
	--ck-success-muted: var(--success-muted);
	--ck-warning: var(--warning-primary);
	--ck-warning-muted: var(--warning-muted);
	--ck-danger: var(--danger-primary);
	--ck-danger-muted: var(--danger-muted);
	--ck-glow-cyan: var(--info-glow);
	--ck-line-accent: var(--info-border);

	/* ────────────────────────────────────────────────────────────────────────
	   SURFACE & LAYOUT TOKENS
	   ──────────────────────────────────────────────────────────────────────── */

	--ck-base: #090a0c;
	--ck-base-mid: #0c0e11;
	--ck-elev-1: #111318;
	--ck-elev-2: #151921;
	--ck-elev-3: #1a1f27;
	--ck-graphite: #12151a;

	--ck-line: rgba(148, 163, 184, 0.09);
	--ck-line-strong: rgba(148, 163, 184, 0.16);

	--ck-text: #e8eaef;
	--ck-text-secondary: #9aa3b2;
	--ck-text-tertiary: #6b7280;

	--ck-glow-edge: rgba(94, 234, 212, 0.04);

	/* ────────────────────────────────────────────────────────────────────────
	   ANALYTICS PALETTE — Data visualization only
	   ──────────────────────────────────────────────────────────────────────── */

	--ck-pink: var(--primitive-pink);
	--ck-pink-bright: #ff1a8c;
	--ck-pink-muted: rgba(255, 0, 110, 0.15);
	--ck-magenta: var(--primitive-magenta);
	--ck-magenta-bright: #f472b6;
	--ck-magenta-muted: rgba(236, 72, 153, 0.15);
	--ck-purple: var(--primitive-purple);
	--ck-purple-bright: #c084fc;
	--ck-purple-muted: rgba(168, 85, 247, 0.15);
	--ck-violet: var(--primitive-violet);
	--ck-violet-muted: rgba(139, 92, 246, 0.15);
	--ck-blue-electric: var(--primitive-blue);
	--ck-blue-bright: #60a5fa;
	--ck-blue-muted: rgba(59, 130, 246, 0.15);

	/* ────────────────────────────────────────────────────────────────────────
	   LAYOUT & UTILITY TOKENS
	   ──────────────────────────────────────────────────────────────────────── */

	--ck-radius-sm: 8px;
	--ck-radius: 11px;
	--ck-radius-lg: 14px;
	--ck-sidebar-w: 248px;
	--ck-sidebar-w-collapsed: 78px;
	--ck-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ck-ease-micro: cubic-bezier(0.33, 1, 0.68, 1);
	--ck-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
	--ck-mono: 'JetBrains Mono', ui-monospace, monospace;

	/* Landing page specific (legacy) */
	--bg-color: #000500;
	--light-color: #00ff7f;
	--glow-color-1: rgba(0, 255, 127, 0.8);
	--glow-color-2: rgba(60, 255, 157, 0.6);

	color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ck-ease-out: ease;
		--ck-ease-micro: ease;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--ck-font);
	font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
	background-color: var(--ck-base);
	background-image:
		radial-gradient(ellipse 120% 80% at 50% -30%, rgba(94, 234, 212, 0.06), transparent 55%),
		radial-gradient(ellipse 70% 50% at 100% 0%, rgba(45, 212, 191, 0.04), transparent 45%),
		linear-gradient(180deg, var(--ck-base) 0%, var(--ck-base-mid) 45%, #08090b 100%);
	color: var(--ck-text);
	-webkit-font-smoothing: antialiased;
}

.ck-scroll {
	scrollbar-width: thin;
	scrollbar-color: rgba(148, 163, 184, 0.22) transparent;
}

.ck-scroll::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.ck-scroll::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.02);
	border-radius: 999px;
}

.ck-scroll::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgba(148, 163, 184, 0.28), rgba(148, 163, 184, 0.14));
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, 0.2);
}

.ck-scroll::-webkit-scrollbar-thumb:hover {
	background: rgba(148, 163, 184, 0.38);
}

/* —— Layout —— */
.ck-layout {
	display: flex;
	min-height: 100vh;
}

.ck-content {
	flex: 1;
	margin-left: var(--ck-sidebar-w);
	min-width: 0;
	padding: 0 16px 40px;
	transition: margin-left 0.36s var(--ck-ease-out);
}

@media (min-width: 1024px) {
	.ck-content {
		padding: 0 32px 48px;
	}
}

.ck-main {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1.55rem;
	padding-top: 24px;
}

@media (min-width: 1280px) {
	.ck-main {
		gap: 1.7rem;
	}
}

/* —— Sidebar —— */
.ck-sidebar,
html .ck-sidebar {
	position: fixed !important;
	inset: 0 auto 0 0 !important;
	width: var(--ck-sidebar-w) !important;
	z-index: 40 !important;
	transform: translateX(0) !important;
	transition: width 0.36s var(--ck-ease-out);
}

/* Collapsed state works on all screen sizes */
html.ck-sidebar-collapsed {
	--ck-sidebar-w: var(--ck-sidebar-w-collapsed);
}

html.ck-sidebar-collapsed .ck-sidebar {
	width: var(--ck-sidebar-w-collapsed) !important;
}

/* On mobile, sidebar is a pure overlay drawer — no width reserved in layout */
@media (max-width: 1023px) {
	html,
	html.ck-sidebar-collapsed,
	html:not(.ck-sidebar-initialized) {
		--ck-sidebar-w: 0px;
	}
}

.ck-sidebar__inner {
	position: relative !important;
	height: 100% !important;
	min-height: 100vh !important;
	max-height: 100vh !important;
	padding: 10px 9px 14px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
	overflow-y: auto !important;
	background:
		linear-gradient(165deg, rgba(26, 31, 39, 0.42) 0%, transparent 40%),
		linear-gradient(180deg, rgba(15, 17, 21, 0.98) 0%, rgba(8, 9, 12, 0.99) 100%) !important;
	border-right: 1px solid var(--ck-line) !important;
	box-shadow:
		1px 0 0 rgba(255, 255, 255, 0.025) inset,
		10px 0 50px rgba(0, 0, 0, 0.45) !important;
	backdrop-filter: blur(16px) saturate(1.2);
	transition: padding 0.32s var(--ck-ease-out);
}

@media (min-width: 1024px) {
	html.ck-sidebar-collapsed .ck-sidebar__inner {
		padding-left: 8px;
		padding-right: 8px;
		align-items: stretch;
	}
}

.ck-sidebar__brand-row {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 3px;
}

@media (min-width: 1024px) {
	html.ck-sidebar-collapsed .ck-sidebar__brand-row {
		flex-direction: column;
		gap: 10px;
	}
}

.ck-sidebar__brand {
	display: flex;
	align-items: center;
	gap: 7px;
	flex: 1;
	min-width: 0;
	padding: 5px 7px 6px;
	border-radius: var(--ck-radius);
	border: 1px solid var(--ck-line);
	background: linear-gradient(145deg, rgba(22, 26, 34, 0.88), rgba(13, 15, 19, 0.82));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
	transition:
		border-color 0.22s var(--ck-ease-micro),
		box-shadow 0.22s var(--ck-ease-micro);
}

.ck-sidebar__brand:hover {
	border-color: var(--ck-line-strong);
}

@media (min-width: 1024px) {
	html.ck-sidebar-collapsed .ck-sidebar__brand {
		justify-content: center;
		padding: 8px;
		flex: none;
		width: 100%;
	}
}

.ck-brand-mark {
	flex-shrink: 0;
	height: 28px;
	width: 28px;
	border-radius: 7px;
	display: grid;
	place-items: center;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #fff;
	background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
	border: 1px solid var(--brand-primary-border);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.06) inset,
		0 3px 12px var(--brand-primary-glow);
	transition: transform 0.22s var(--ck-ease-micro), border-color 0.22s ease;
}

.ck-brand-mark img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.ck-sidebar__brand:hover .ck-brand-mark {
	transform: scale(1.02);
}

.ck-brand-mark.is-lg {
	height: 42px;
	width: 42px;
	font-size: 12px;
}

.ck-sidebar__brand-text {
	overflow: hidden;
	max-width: 200px;
	transition:
		opacity 0.24s var(--ck-ease-out),
		max-width 0.36s var(--ck-ease-out);
}

.ck-sidebar__brand-text .ck-brand-title {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--ck-text);
	line-height: 1.1;
}

.ck-sidebar__brand-text .ck-brand-sub {
	font-size: 8px;
	color: var(--ck-text-secondary);
	margin-top: 0;
	font-weight: 400;
}

@media (min-width: 1024px) {
	html.ck-sidebar-collapsed .ck-sidebar__brand-text {
		opacity: 0;
		max-width: 0;
		pointer-events: none;
	}
}

.ck-sidebar__rail {
	position: absolute;
	left: 0;
	top: 64px;
	bottom: 20px;
	width: 2px;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(180deg, transparent, var(--brand-primary-bg-hover), var(--info-muted), transparent);
	pointer-events: none;
	opacity: 0.85;
	transition: opacity 0.25s ease;
}

@media (min-width: 1024px) {
	html.ck-sidebar-collapsed .ck-sidebar__rail {
		opacity: 0.35;
	}
}

/* Desktop collapse control */
.ck-sidebar__pin {
	display: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: var(--ck-radius-sm);
	border: 1px solid var(--ck-line);
	background: rgba(10, 11, 14, 0.75);
	color: var(--ck-text-tertiary);
	cursor: pointer;
	transition:
		color 0.2s var(--ck-ease-micro),
		border-color 0.2s var(--ck-ease-micro),
		background 0.2s var(--ck-ease-micro),
		box-shadow 0.22s var(--ck-ease-micro),
		transform 0.18s var(--ck-ease-micro);
}

.ck-sidebar__pin:hover {
	color: var(--ck-text);
	border-color: var(--ck-line-strong);
	background: rgba(18, 21, 28, 0.95);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.ck-sidebar__pin:focus-visible {
	outline: 2px solid rgba(94, 234, 212, 0.35);
	outline-offset: 2px;
}

.ck-sidebar__pin .ck-sidebar__pin-icon--collapse,
.ck-sidebar__pin .ck-sidebar__pin-icon--expand {
	width: 11px;
	height: 11px;
	stroke-width: 1.2;
}

.ck-sidebar__pin .ck-sidebar__pin-icon--expand {
	display: none;
}

@media (min-width: 1024px) {
	.ck-sidebar__pin {
		display: inline-flex;
	}

	html.ck-sidebar-collapsed .ck-sidebar__pin .ck-sidebar__pin-icon--collapse {
		display: none;
	}

	html.ck-sidebar-collapsed .ck-sidebar__pin .ck-sidebar__pin-icon--expand {
		display: block;
	}

	html.ck-sidebar-collapsed .ck-sidebar__pin {
		width: 100%;
	}
}

.ck-sidebar__section {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	padding-top: 8px !important;
}

.ck-sidebar__section + .ck-sidebar__section {
	border-top: 1px solid var(--ck-line);
	margin-top: 6px;
	padding-top: 8px;
}

@media (min-width: 1024px) {
	html.ck-sidebar-collapsed .ck-sidebar__section + .ck-sidebar__section {
		border-top: 1px solid var(--ck-line);
		padding-top: 8px;
		margin-top: 4px;
	}
}

.ck-section-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	background: transparent;
	border: none;
	padding: 4px 6px;
	text-align: left;
	color: var(--ck-text-tertiary);
	cursor: pointer;
	border-radius: var(--ck-radius-sm);
	transition: color 0.2s var(--ck-ease-micro), background 0.22s var(--ck-ease-micro);
}

.ck-section-toggle:hover {
	color: var(--ck-text-secondary);
	background: rgba(148, 163, 184, 0.05);
}

.ck-section-toggle i {
	width: 11px;
	height: 11px;
	flex-shrink: 0;
	margin-left: auto;
	transition: transform 0.28s var(--ck-ease-out), opacity 0.2s ease;
	opacity: 0.2;
	stroke-width: 1.1;
}

.ck-section-toggle:hover i {
	opacity: 0.65;
}

.ck-sidebar__section.is-collapsed .ck-section-toggle i {
	transform: rotate(-90deg);
}

.ck-section-label {
	text-transform: uppercase !important;
	font-size: 8.5px !important;
	font-weight: 400 !important;
	letter-spacing: 0.1em !important;
	color: var(--ck-text-tertiary) !important;
	opacity: 0.4 !important;
}

.ck-nav {
	display: grid;
	gap: 1px;
	overflow: hidden;
	transition: max-height 0.32s var(--ck-ease-out), opacity 0.24s var(--ck-ease-out);
}

@media (min-width: 1024px) {
	html.ck-sidebar-collapsed .ck-section-toggle {
		display: none;
	}

	html.ck-sidebar-collapsed .ck-nav[data-collapsible-panel] {
		max-height: none !important;
		opacity: 1 !important;
	}
}

.ck-nav-link {
	display: flex !important;
	align-items: center !important;
	gap: 9px !important;
	min-height: 36px !important;
	padding: 8px 10px !important;
	border-radius: var(--ck-radius-sm) !important;
	color: var(--ck-text-secondary) !important;
	border: 1px solid transparent !important;
	transition: color 0.18s var(--ck-ease-micro), background 0.18s var(--ck-ease-micro), border-color 0.18s var(--ck-ease-micro), box-shadow 0.2s var(--ck-ease-micro), transform 0.16s var(--ck-ease-micro);
	position: relative !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
}

.ck-nav-link span {
	min-width: 0;
	transition:
		opacity 0.22s var(--ck-ease-out),
		max-width 0.3s var(--ck-ease-out);
	overflow: hidden;
	white-space: nowrap;
}

.ck-nav-link i {
	width: 13px !important;
	height: 13px !important;
	flex-shrink: 0 !important;
	opacity: 0.5 !important;
	stroke-width: 1.2 !important;
	transition: color 0.18s var(--ck-ease-micro), opacity 0.18s ease !important;
}

.ck-nav-link:focus-visible {
	outline: 2px solid rgba(94, 234, 212, 0.28);
	outline-offset: 2px;
}

.ck-nav-link:hover {
	color: var(--ck-text);
	background: rgba(148, 163, 184, 0.05);
	border-color: rgba(148, 163, 184, 0.08);
	transform: translateX(1px);
}

.ck-nav-link:hover i {
	opacity: 0.9;
}

.ck-nav-link:active {
	transform: translateX(0);
}

.ck-nav-link.is-active {
	color: var(--ck-text);
	background: rgba(229, 57, 53, 0.08);
	border-color: rgba(229, 57, 53, 0.15);
	box-shadow: none;
	transform: none;
	font-weight: 500;
}

.ck-nav-link.is-active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 1.5px;
	border-radius: 0 1px 1px 0;
	background: var(--brand-primary);
	box-shadow: none;
}

.ck-nav-link.is-active i {
	color: var(--nav-active-color);
	opacity: 1;
}

.ck-nav-link.is-active:hover {
	transform: none;
}

@media (min-width: 1024px) {
	html.ck-sidebar-collapsed .ck-nav-link {
		justify-content: center;
		min-height: 38px;
		padding: 8px;
		gap: 0;
	}

	html.ck-sidebar-collapsed .ck-nav-link span {
		opacity: 0;
		max-width: 0;
		display: none;
	}

	html.ck-sidebar-collapsed .ck-nav-link:hover {
		transform: none;
	}

	html.ck-sidebar-collapsed .ck-nav-link.is-active::before {
		left: 50%;
		top: auto;
		bottom: 2px;
		transform: translateX(-50%);
		width: 14px;
		height: 2px;
		border-radius: 2px;
	}

	html.ck-sidebar-collapsed .ck-nav-link[data-tooltip] {
		position: relative;
	}

	html.ck-sidebar-collapsed .ck-nav-link[data-tooltip]:hover::after {
		content: attr(data-tooltip);
		position: absolute;
		left: calc(100% + 10px);
		top: 50%;
		transform: translateY(-50%) translateX(0);
		padding: 5px 9px;
		border-radius: 8px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.01em;
		color: var(--ck-text);
		background: linear-gradient(165deg, rgba(28, 32, 40, 0.98), rgba(14, 16, 20, 0.98));
		border: 1px solid var(--ck-line-strong);
		box-shadow:
			0 0 0 1px rgba(0, 0, 0, 0.35),
			0 12px 28px rgba(0, 0, 0, 0.45);
		z-index: 60;
		pointer-events: none;
		animation: ck-tooltip-in 0.16s var(--ck-ease-out) both;
		white-space: nowrap;
	}

	html.ck-sidebar-collapsed .ck-nav-link[data-tooltip]:hover::before {
		content: '';
		position: absolute;
		left: calc(100% + 4px);
		top: 50%;
		transform: translateY(-50%);
		border: 5px solid transparent;
		border-right-color: rgba(22, 25, 32, 0.98);
		z-index: 61;
		pointer-events: none;
		animation: ck-tooltip-in 0.16s var(--ck-ease-out) both;
	}
}

@keyframes ck-tooltip-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.ck-sidebar__footer {
	margin-top: auto;
	padding-top: 8px;
	border-top: 1px solid var(--ck-line);
}

.ck-env-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: var(--ck-radius-sm);
	font-size: 7px;
	font-family: var(--ck-mono);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--ck-success);
	background: rgba(52, 211, 153, 0.05);
	border: 1px solid rgba(52, 211, 153, 0.1);
	transition:
		border-color 0.2s var(--ck-ease-micro),
		background 0.2s var(--ck-ease-micro);
}

.ck-env-badge__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ck-success);
	box-shadow: 0 0 4px rgba(52, 211, 153, 0.3);
	animation: ck-pulse-soft 2.5s ease-in-out infinite;
}

.ck-env-badge span:last-child {
	color: var(--ck-success);
	font-weight: 600;
}

@media (min-width: 1024px) {
	html.ck-sidebar-collapsed .ck-env-badge {
		justify-content: center;
		width: 100%;
		padding: 7px 6px;
		gap: 0;
	}

	html.ck-sidebar-collapsed .ck-env-badge span:first-child {
		display: none;
	}

	html.ck-sidebar-collapsed .ck-env-badge span:last-child {
		font-size: 9px;
		letter-spacing: 0.08em;
	}
}

/* —— Navbar —— */
.ck-navbar {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 0;
	background: transparent;
	backdrop-filter: none;
	box-shadow: none;
	transition: none;
}

.ck-navbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	gap: 12px;
	max-width: 1440px;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.ck-navbar__inner {
		padding: 1rem 2rem;
		gap: 16px;
	}
}

.ck-navbar__left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

/* Hamburger menu button with smooth icon animation */
.ck-hamburger-menu {
	display: flex !important;
	transition: transform 0.2s var(--ck-ease-micro);
}

.ck-hamburger-menu:hover {
	transform: scale(1.05);
}

.ck-hamburger-menu:active {
	transform: scale(0.95);
}

.ck-hamburger-menu i,
.ck-hamburger-menu svg {
	width: 20px !important;
	height: 20px !important;
	stroke-width: 1.8 !important;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rotate hamburger icon when sidebar is expanded (not collapsed) */
html:not(.ck-sidebar-collapsed) .ck-hamburger-menu i,
html:not(.ck-sidebar-collapsed) .ck-hamburger-menu svg {
	transform: rotate(90deg);
}

.ck-navbar__right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.ck-status-dot.is-warn {
	background: var(--ck-warning);
	box-shadow: 0 0 0 3px var(--ck-warning-muted), 0 0 12px rgba(251, 191, 36, 0.25);
}

.ck-icon-btn {
	height: 32px;
	width: 32px;
	display: grid;
	place-items: center;
	border-radius: calc(var(--ck-radius-sm) + 1px);
	background: rgba(14, 16, 20, 0.88);
	border: 1px solid var(--ck-line);
	color: var(--ck-text-secondary);
	transition:
		color 0.2s var(--ck-ease-micro),
		border-color 0.22s var(--ck-ease-micro),
		background 0.22s var(--ck-ease-micro),
		box-shadow 0.24s var(--ck-ease-micro),
		transform 0.18s var(--ck-ease-micro);
	cursor: pointer;
}

.ck-icon-btn:hover {
	color: var(--ck-text);
	border-color: var(--ck-line-strong);
	background: rgba(20, 23, 30, 0.96);
	box-shadow:
		0 4px 14px rgba(0, 0, 0, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	transform: translateY(-1px);
}

.ck-icon-btn:active {
	transform: translateY(0);
}

.ck-icon-btn:focus-visible {
	outline: 2px solid rgba(94, 234, 212, 0.32);
	outline-offset: 2px;
}

.ck-icon-btn i,
.ck-icon-btn svg {
	width: 15px;
	height: 15px;
	stroke-width: 1.65;
}

.ck-hamburger-menu i,
.ck-hamburger-menu svg {
	width: 20px !important;
	height: 20px !important;
	stroke-width: 1.8 !important;
}

.ck-dot {
	position: absolute;
	top: 7px;
	right: 7px;
	height: 7px;
	width: 7px;
	border-radius: 999px;
	background: var(--ck-teal);
	box-shadow: 0 0 10px rgba(45, 212, 191, 0.45);
	border: 2px solid var(--ck-elev-1);
}

/* ── Brand New Unified Search Bar Component ── */
.ck-search-bar,
.ck-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	flex: 1 1 auto;
	max-width: 280px;
	height: 36px;
	padding: 0 12px;
	border-radius: var(--ck-radius);
	background: rgba(11, 13, 17, 0.65);
	border: 1px solid var(--ck-line);
	transition: border-color 0.22s var(--ck-ease-micro), box-shadow 0.22s var(--ck-ease-micro), background 0.22s var(--ck-ease-micro);
}

@media (min-width: 768px) {
	.ck-search-bar,
	.ck-search {
		max-width: 420px;
	}
}

.ck-search-bar:focus-within,
.ck-search:focus-within {
	border-color: rgba(94, 234, 212, 0.28) !important;
	box-shadow: 0 0 0 3px var(--ck-glow-cyan), 0 10px 28px rgba(0, 0, 0, 0.32) !important;
	background: rgba(14, 16, 21, 0.85) !important;
}

.ck-search-bar__icon,
.ck-search i,
.ck-search svg {
	width: 15px !important;
	height: 15px !important;
	color: var(--ck-text-tertiary) !important;
	flex-shrink: 0 !important;
	pointer-events: none !important;
}

.ck-search-bar__input,
.ck-search input {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-style: none !important;
	border-width: 0 !important;
	border-color: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	outline-style: none !important;
	outline-width: 0 !important;
	outline-color: transparent !important;
	ring: 0 !important;
	--tw-ring-color: transparent !important;
	--tw-ring-shadow: none !important;
	--tw-ring-offset-shadow: none !important;
	--tw-ring-offset-width: 0px !important;
	--tw-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: var(--ck-font) !important;
	font-size: 12.5px !important;
	font-weight: 450 !important;
	color: var(--ck-text) !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

.ck-search-bar__input:focus,
.ck-search-bar__input:focus-visible,
.ck-search-bar__input:active,
.ck-search-bar__input:hover,
.ck-search input:focus,
.ck-search input:focus-visible,
.ck-search input:active,
.ck-search input:hover {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-width: 0 !important;
	border-color: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	outline-color: transparent !important;
	ring: 0 !important;
	--tw-ring-color: transparent !important;
	--tw-ring-shadow: none !important;
	--tw-ring-offset-shadow: none !important;
	--tw-ring-offset-width: 0px !important;
	--tw-shadow: none !important;
}

.ck-search-bar__input::-webkit-search-decoration,
.ck-search-bar__input::-webkit-search-cancel-button,
.ck-search-bar__input::-webkit-search-results-button,
.ck-search-bar__input::-webkit-search-results-decoration,
.ck-search input::-webkit-search-decoration,
.ck-search input::-webkit-search-cancel-button,
.ck-search input::-webkit-search-results-button,
.ck-search input::-webkit-search-results-decoration {
	-webkit-appearance: none !important;
	display: none !important;
}

.ck-search-bar__input::placeholder,
.ck-search input::placeholder {
	color: var(--ck-text-tertiary) !important;
	opacity: 1 !important;
}

.ck-search-bar__hint,
.ck-search__hint {
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 2px !important;
	font-size: 9px !important;
	font-family: var(--ck-mono) !important;
	font-weight: 500 !important;
	padding: 2px 6px !important;
	border-radius: 5px !important;
	border: 1px solid var(--ck-line) !important;
	color: var(--ck-text-tertiary) !important;
	background: rgba(8, 9, 11, 0.55) !important;
	pointer-events: none !important;
}

body[data-page="profile"] .ck-search,
body[data-page="profile"] .ck-search-bar {
	display: none !important;
}

.ck-search__results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	min-width: 280px;
	max-height: 320px;
	overflow-y: auto;
	border-radius: var(--ck-radius);
	border: 1px solid var(--ck-line-strong);
	background: rgba(14, 16, 20, 0.98);
	backdrop-filter: blur(16px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
	z-index: 60;
	padding: 4px;
}

.ck-search__results[hidden] {
	display: none;
}

.ck-search__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--ck-radius-sm);
	text-decoration: none;
	color: var(--ck-text);
	font-size: 12px;
	transition: background 0.15s;
}

.ck-search__item:hover {
	background: rgba(94, 234, 212, 0.06);
}

.ck-search__item-icon {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	background: var(--ck-cyan-muted);
	color: var(--ck-teal);
}

.ck-search__item-icon i {
	width: 14px;
	height: 14px;
}

.ck-search__item-text {
	min-width: 0;
}

.ck-search__item-title {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ck-search__item-sub {
	font-size: 10px;
	color: var(--ck-text-tertiary);
}

.ck-search__empty {
	padding: 16px 10px;
	text-align: center;
	font-size: 11px;
	color: var(--ck-text-tertiary);
}

/* Profile */
.ck-profile {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 9px 4px 5px;
	border-radius: var(--ck-radius);
	background: rgba(14, 16, 20, 0.78);
	border: 1px solid var(--ck-line);
	color: var(--ck-text);
	transition:
		border-color 0.22s var(--ck-ease-micro),
		box-shadow 0.26s var(--ck-ease-micro),
		background 0.22s var(--ck-ease-micro),
		transform 0.18s var(--ck-ease-micro);
	cursor: pointer;
}

.ck-profile:hover {
	border-color: var(--ck-line-strong);
	box-shadow:
		0 8px 22px rgba(0, 0, 0, 0.36),
		inset 0 1px 0 rgba(255, 255, 255, 0.035);
	background: rgba(19, 22, 28, 0.94);
	transform: translateY(-1px);
}

.ck-profile:focus-visible {
	outline: 2px solid rgba(94, 234, 212, 0.3);
	outline-offset: 2px;
}

.ck-profile__avatar {
	height: 30px;
	width: 30px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--ck-base);
	background: linear-gradient(145deg, #e5e7eb, #94a3b8);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.32) inset;
	flex-shrink: 0;
}

.ck-profile__meta .ck-profile__name {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--ck-text);
}

.ck-profile__meta .ck-profile__role {
	display: block;
	font-size: 10px;
	color: var(--ck-text-tertiary);
	margin-top: 0;
}

.ck-profile>i {
	width: 14px;
	height: 14px;
	color: var(--ck-text-tertiary);
}

/* Dropdowns */
.ck-dropdown-wrap {
	position: relative;
}

.ck-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 268px;
	max-width: min(300px, calc(100vw - 32px));
	border-radius: var(--ck-radius-lg);
	background: linear-gradient(165deg, rgba(24, 27, 34, 0.97), rgba(12, 14, 18, 0.98));
	border: 1px solid var(--ck-line-strong);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.4),
		0 20px 50px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-4px) scale(0.99);
	transition:
		opacity 0.2s var(--ck-ease-micro),
		transform 0.28s var(--ck-ease-out),
		visibility 0.28s;
	visibility: hidden;
	z-index: 50;
}

.ck-dropdown.is-open {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
	visibility: visible;
}

.ck-dropdown__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 12px 8px;
	border-bottom: 1px solid var(--ck-line);
}

.ck-dropdown__header p {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--ck-text);
}

.ck-dropdown__header span {
	font-size: 10px;
	font-family: var(--ck-mono);
	color: var(--ck-teal);
	font-weight: 500;
}

.ck-dropdown__content {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 6px;
	max-height: 300px;
	overflow-y: auto;
}

.ck-dropdown__footer {
	padding: 8px 10px 10px;
	border-top: 1px solid var(--ck-line);
}

.ck-dropdown__link {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--ck-cyan);
	padding: 8px;
	border-radius: var(--ck-radius-sm);
	transition: background 0.15s ease;
}

.ck-dropdown__link:hover {
	background: rgba(94, 234, 212, 0.08);
}

.ck-dropdown__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	padding: 8px 9px;
	border-radius: var(--ck-radius-sm);
	transition: background 0.18s var(--ck-ease-micro);
	cursor: default;
}

.ck-dropdown__item:hover {
	background: rgba(148, 163, 184, 0.06);
}

.ck-dropdown__item p {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	color: var(--ck-text);
	line-height: 1.35;
}

.ck-dropdown__item small {
	font-size: 10px;
	color: var(--ck-text-tertiary);
	font-family: var(--ck-mono);
}

.ck-dropdown__item.is-row {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.ck-dropdown__item.is-row i {
	width: 16px;
	height: 16px;
	color: var(--ck-text-secondary);
	flex-shrink: 0;
}

.ck-dropdown__item.is-row span {
	font-size: 12px;
	font-weight: 500;
	color: var(--ck-text);
}

.ck-dropdown__sep {
	height: 1px;
	margin: 6px 8px;
	background: var(--ck-line);
}

/* Severity chips in notifications */
.ck-severity {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 2px 7px;
	border-radius: 999px;
	font-family: var(--ck-mono);
}

.ck-severity--info {
	color: var(--ck-cyan);
	background: var(--ck-cyan-muted);
	border: 1px solid rgba(94, 234, 212, 0.2);
}

.ck-severity--warn {
	color: #fcd34d;
	background: var(--ck-warning-muted);
	border: 1px solid rgba(251, 191, 36, 0.2);
}

.ck-severity--crit {
	color: #fca5a5;
	background: var(--ck-danger-muted);
	border: 1px solid rgba(248, 113, 113, 0.22);
}

/* —— Cards & surfaces —— */
.ck-card {
	border-radius: var(--ck-radius-lg);
	padding: 18px 20px;
	background: linear-gradient(168deg, rgba(20, 23, 30, 0.65), rgba(11, 13, 17, 0.95));
	border: 1px solid var(--ck-line);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.025) inset,
		0 16px 44px rgba(0, 0, 0, 0.35);
	transition:
		border-color 0.26s var(--ck-ease-micro),
		box-shadow 0.3s var(--ck-ease-out),
		transform 0.28s var(--ck-ease-out);
}

.ck-card:hover {
	border-color: rgba(148, 163, 184, 0.14);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.035) inset,
		0 18px 44px rgba(0, 0, 0, 0.38);
}

.ck-card.ck-card--interactive:hover {
	transform: translateY(-1px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 20px 48px rgba(0, 0, 0, 0.42);
}

.ck-card__label {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ck-text-tertiary);
	margin-bottom: 3px;
}

.ck-card__value {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--ck-text);
	line-height: 1.12;
	font-variant-numeric: tabular-nums;
}

.ck-card__meta {
	font-size: 11px;
	color: var(--ck-text-secondary);
	margin-top: 5px;
}

.ck-glow {
	position: relative;
	overflow: hidden;
}

.ck-glow::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	background:
		radial-gradient(ellipse 50% 50% at 80% 0%, var(--brand-primary-bg), transparent 50%),
		radial-gradient(ellipse 80% 60% at 20% 0%, var(--ck-glow-edge), transparent 55%);
	pointer-events: none;
}

/* Hero */
.ck-hero {
	position: relative;
	padding: 28px 24px;
	border-radius: calc(var(--ck-radius-lg) + 2px);
	border: 1px solid var(--ck-line);
	background:
		linear-gradient(135deg, var(--brand-primary-bg) 0%, transparent 30%),
		linear-gradient(225deg, rgba(94, 234, 212, 0.03) 0%, transparent 35%),
		linear-gradient(180deg, rgba(18, 20, 26, 0.96), rgba(9, 10, 13, 0.94));
	box-shadow:
		0 0 0 1px var(--brand-primary-bg),
		0 24px 60px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

.ck-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 75%);
	pointer-events: none;
}

.ck-hero__content {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

@media (min-width: 1024px) {
	.ck-hero__content {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 24px;
	}
}

.ck-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ck-text-secondary);
	margin-bottom: 6px;
}

.ck-hero__eyebrow i {
	width: 13px;
	height: 13px;
	color: var(--ck-brand);
}

.ck-hero__title {
	font-size: clamp(1.25rem, 2.5vw, 1.6rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: #fff;
	line-height: 1.2;
	margin: 0;
}

.ck-hero__desc {
	font-size: 13px;
	line-height: 1.6;
	color: var(--ck-text-secondary);
	max-width: 520px;
	margin: 10px 0 20px;
}

.ck-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 20px;
}

.ck-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: flex-end;
}

.ck-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 10.5px;
	font-family: var(--ck-mono);
	font-weight: 500;
	color: var(--ck-text-secondary);
	border: 1px solid var(--ck-line);
	background: rgba(8, 9, 11, 0.5);
}

.ck-pill strong {
	color: var(--ck-cyan);
	font-weight: 600;
}

/* Stat cards */
.ck-stat-card {
	position: relative;
	padding: 16px 16px;
	border-radius: var(--ck-radius-lg);
	border: 1px solid var(--ck-line);
	background: linear-gradient(158deg, rgba(22, 25, 33, 0.82), rgba(11, 13, 17, 0.94));
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
	transition:
		transform 0.28s var(--ck-ease-out),
		border-color 0.26s var(--ck-ease-micro),
		box-shadow 0.32s var(--ck-ease-out);
	overflow: hidden;
}

.ck-stat-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--brand-primary-border-strong), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ck-stat-card::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--ck-glow-cyan), transparent 68%);
	opacity: 0;
	transition: opacity 0.32s var(--ck-ease-micro);
	pointer-events: none;
}

.ck-stat-card:hover {
	transform: translateY(-2px);
	border-color: rgba(148, 163, 184, 0.16);
	box-shadow:
		0 16px 42px rgba(0, 0, 0, 0.38),
		inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.ck-stat-card:hover::before {
	opacity: 1;
}

.ck-stat-card:hover::after {
	opacity: 1;
}

.ck-stat-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.ck-stat-card__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid var(--ck-line);
	background: rgba(8, 9, 11, 0.55);
	color: var(--ck-cyan);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
	transition:
		border-color 0.22s var(--ck-ease-micro),
		box-shadow 0.22s var(--ck-ease-micro);
}

.ck-stat-card:hover .ck-stat-card__icon {
	border-color: rgba(94, 234, 212, 0.15);
}

.ck-att-kpi-card {
	cursor: pointer;
}

.ck-att-kpi-card:focus-visible {
	outline: 2px solid rgba(94, 234, 212, 0.32);
	outline-offset: 2px;
}

/* ── KPI Full-Screen Overlay ─────────────────────────────────────────────── */
.ck-kpi-overlay {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: flex;
	flex-direction: column;
	background: rgba(4, 5, 8, 0.88);
	backdrop-filter: blur(14px) saturate(1.2);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.24s ease;
	overflow: hidden;
}

.ck-kpi-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.ck-kpi-overlay__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 28px 16px;
	border-bottom: 1px solid rgba(148, 163, 184, 0.1);
	background: rgba(10, 11, 14, 0.72);
	flex-shrink: 0;
}

.ck-kpi-overlay__title-block {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ck-kpi-overlay__eyebrow {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ck-teal);
}

.ck-kpi-overlay__title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--ck-text);
	margin: 0;
}

.ck-kpi-overlay__toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ck-kpi-overlay__count {
	font-size: 11px;
	font-family: var(--ck-mono);
	color: var(--ck-text-tertiary);
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--ck-line);
	background: rgba(8, 9, 11, 0.55);
	white-space: nowrap;
}

.ck-kpi-overlay__body {
	flex: 1;
	overflow-y: auto;
	padding: 24px 28px;
	scrollbar-width: thin;
	scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
}

.ck-kpi-overlay__body::-webkit-scrollbar {
	width: 5px;
}

.ck-kpi-overlay__body::-webkit-scrollbar-thumb {
	background: rgba(148, 163, 184, 0.2);
	border-radius: 999px;
}

.ck-kpi-overlay__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 28px;
	border-top: 1px solid rgba(148, 163, 184, 0.08);
	background: rgba(10, 11, 14, 0.72);
	flex-shrink: 0;
	font-size: 11px;
	color: var(--ck-text-tertiary);
	font-family: var(--ck-mono);
}

.ck-kpi-overlay__footer-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ── Drill Team List ─────────────────────────────────────────────────────── */
.ck-drill-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ck-drill-team {
	border: 1px solid var(--ck-line);
	border-radius: var(--ck-radius);
	background: linear-gradient(158deg, rgba(18, 21, 28, 0.72), rgba(10, 11, 14, 0.92));
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.ck-drill-team:hover {
	border-color: rgba(148, 163, 184, 0.16);
}

.ck-drill-team__row {
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	cursor: pointer;
	user-select: none;
	transition: background 0.15s ease;
}

.ck-drill-team__row:hover {
	background: rgba(148, 163, 184, 0.04);
}

.ck-drill-team__name {
	font-size: 13px;
	font-weight: 650;
	color: var(--ck-text);
	letter-spacing: -0.01em;
}

.ck-drill-team__leader {
	font-size: 11px;
	color: var(--ck-text-tertiary);
	margin-top: 3px;
}

.ck-drill-team__leader strong {
	color: var(--ck-text-secondary);
	font-weight: 500;
}

.ck-drill-team__stat {
	font-size: 11px;
	font-family: var(--ck-mono);
	color: var(--ck-text-tertiary);
	text-align: right;
	white-space: nowrap;
}

.ck-drill-team__expand-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 10px;
	font-weight: 600;
	color: var(--ck-text-tertiary);
	background: none;
	border: 1px solid var(--ck-line);
	border-radius: 6px;
	padding: 4px 9px;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
	white-space: nowrap;
}

.ck-drill-team__expand-btn:hover {
	color: var(--ck-text);
	border-color: rgba(94, 234, 212, 0.22);
	background: rgba(94, 234, 212, 0.06);
}

.ck-drill-team__expand-btn i {
	width: 12px;
	height: 12px;
	transition: transform 0.25s var(--ck-ease-out);
}

.ck-drill-team.is-expanded .ck-drill-team__expand-btn i {
	transform: rotate(180deg);
}

.ck-drill-team__members {
	display: none;
	border-top: 1px solid rgba(148, 163, 184, 0.08);
	background: rgba(7, 8, 10, 0.45);
}

.ck-drill-team.is-expanded .ck-drill-team__members {
	display: block;
}

.ck-drill-team__members-inner {
	padding: 0 18px 14px;
}

.ck-drill-team__members-header {
	display: grid;
	grid-template-columns: 1fr 100px 100px 90px 70px;
	gap: 12px;
	padding: 10px 0 8px;
	border-bottom: 1px solid rgba(148, 163, 184, 0.07);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ck-text-tertiary);
}

.ck-drill-team__member-row {
	display: grid;
	grid-template-columns: 1fr 100px 100px 90px 70px;
	gap: 12px;
	align-items: center;
	padding: 9px 0;
	border-bottom: 1px solid rgba(148, 163, 184, 0.05);
	font-size: 12px;
}

.ck-drill-team__member-row:last-child {
	border-bottom: none;
}

.ck-drill-team__member-name {
	color: var(--ck-text-secondary);
	font-weight: 500;
}

.ck-drill-team__member-time {
	font-family: var(--ck-mono);
	font-size: 11px;
	color: var(--ck-text-tertiary);
}

/* ── Attendance Pagination ───────────────────────────────────────────────── */
.ck-att-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
	color: var(--ck-text-tertiary);
	font-size: 11px;
	font-family: var(--ck-mono);
}

.ck-att-pagination__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ck-att-pagination .ck-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.ck-stat-card__icon.is-emerald {
	color: var(--ck-success);
	border-color: rgba(52, 211, 153, 0.2);
	background: var(--ck-success-muted);
}

.ck-stat-card__icon.is-amber {
	color: #fcd34d;
	border-color: rgba(251, 191, 36, 0.22);
	background: var(--ck-warning-muted);
}

.ck-stat-card__icon.is-rose {
	color: #fca5a5;
	border-color: rgba(248, 113, 113, 0.22);
	background: var(--ck-danger-muted);
}

.ck-stat-card__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ck-text-tertiary);
}

.ck-stat-card__value {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: #fff;
	font-variant-numeric: tabular-nums;
	line-height: 1.08;
	margin-top: 4px;
}

.ck-stat-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--ck-line);
}

.ck-trend {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	font-weight: 600;
	font-family: var(--ck-mono);
}

.ck-spark {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 24px;
}

.ck-spark span {
	width: 3px;
	border-radius: 2px;
	background: linear-gradient(180deg, rgba(94, 234, 212, 0.55), rgba(94, 234, 212, 0.1));
	opacity: 0.88;
}

.ck-trend--up {
	color: var(--ck-success);
}

.ck-trend--down {
	color: #fca5a5;
}

.ck-trend--neutral {
	color: var(--ck-text-tertiary);
}

/* Section header */
.ck-section-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.ck-section-head h2 {
	margin: 0;
	font-size: 14px;
	font-weight: 650;
	letter-spacing: -0.02em;
	color: #fff;
}

.ck-section-head p {
	margin: 4px 0 0;
	font-size: 11.5px;
	color: var(--ck-text-tertiary);
	line-height: 1.45;
}

/* Chart placeholder */
.ck-chart {
	position: relative;
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: var(--ck-radius);
	border: 1px dashed rgba(148, 163, 184, 0.12);
	background:
		linear-gradient(180deg, rgba(9, 10, 12, 0.48), rgba(16, 18, 23, 0.32)),
		radial-gradient(ellipse at 50% 100%, rgba(94, 234, 212, 0.05), transparent 62%);
	min-height: 188px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	transition:
		border-color 0.26s var(--ck-ease-micro),
		box-shadow 0.28s var(--ck-ease-out);
}

.ck-chart:hover {
	border-color: rgba(148, 163, 184, 0.18);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.ck-chart__bars {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 6px;
	height: 118px;
	padding: 0 3px;
}

.ck-chart__bar {
	flex: 1;
	border-radius: 5px 5px 2px 2px;
	background: linear-gradient(180deg, rgba(94, 234, 212, 0.3), rgba(94, 234, 212, 0.05));
	border: 1px solid rgba(94, 234, 212, 0.1);
	min-height: 20px;
	transition:
		opacity 0.22s ease,
		transform 0.24s var(--ck-ease-micro),
		filter 0.24s ease;
}

.ck-chart:hover .ck-chart__bar {
	filter: brightness(1.06);
}

.ck-chart__bar:nth-child(odd) {
	opacity: 0.88;
}

.ck-chart__caption {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	font-family: var(--ck-mono);
	color: var(--ck-text-tertiary);
}

/* List rows */
.ck-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ck-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 13px 14px;
	border-radius: var(--ck-radius-sm);
	border: 1px solid var(--ck-line);
	background: rgba(9, 10, 12, 0.35);
	transition:
		border-color 0.18s ease,
		background 0.18s ease,
		transform 0.2s var(--ck-ease-micro);
}

.ck-list-item:hover {
	border-color: var(--ck-line-strong);
	background: rgba(148, 163, 184, 0.05);
	transform: translateX(2px);
}

.ck-list-item__main strong {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ck-text);
}

.ck-list-item__main span {
	font-size: 11px;
	color: var(--ck-text-tertiary);
	font-family: var(--ck-mono);
	margin-top: 2px;
	display: block;
}

.ck-list-item__aside {
	font-size: 11px;
	font-family: var(--ck-mono);
	color: var(--ck-text-secondary);
	text-align: right;
	flex-shrink: 0;
}

.ck-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border: 1px solid var(--ck-line);
	color: var(--ck-text-secondary);
	background: rgba(9, 10, 12, 0.45);
}

.ck-tag--live {
	color: var(--ck-success);
	border-color: rgba(52, 211, 153, 0.25);
	background: var(--ck-success-muted);
}

/* Timeline */
.ck-timeline {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 14px;
}

.ck-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 14px 1fr;
	gap: 12px;
	padding-bottom: 18px;
}

.ck-timeline__item:last-child {
	padding-bottom: 0;
}

.ck-timeline__rail {
	position: relative;
	width: 14px;
	display: flex;
	justify-content: center;
}

.ck-timeline__dot {
	width: 9px;
	height: 9px;
	margin-top: 5px;
	border-radius: 999px;
	background: var(--ck-elev-3);
	border: 2px solid var(--ck-teal);
	box-shadow: 0 0 10px rgba(45, 212, 191, 0.25);
	z-index: 1;
}

.ck-timeline__line {
	position: absolute;
	top: 14px;
	bottom: -18px;
	left: 50%;
	width: 1px;
	transform: translateX(-50%);
	background: linear-gradient(180deg, var(--ck-line-strong), transparent);
}

.ck-timeline__body {
	padding: 10px 12px;
	border-radius: var(--ck-radius-sm);
	border: 1px solid var(--ck-line);
	background: rgba(9, 10, 12, 0.4);
}

.ck-timeline__body strong {
	font-size: 13px;
	font-weight: 600;
	color: var(--ck-text);
	display: block;
}

.ck-timeline__body span {
	font-size: 12px;
	color: var(--ck-text-secondary);
	display: block;
	margin-top: 3px;
}

.ck-timeline__time {
	font-size: 11px;
	font-family: var(--ck-mono);
	color: var(--ck-text-tertiary);
	margin-top: 8px;
}

/* Progress bars */
.ck-bar {
	height: 5px;
	border-radius: 999px;
	background: rgba(148, 163, 184, 0.1);
	overflow: hidden;
}

.ck-bar-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ck-teal-deep), var(--ck-cyan));
	box-shadow: 0 0 14px rgba(45, 212, 191, 0.2);
	transition: width 0.5s ease;
}

.ck-bar-fill.is-success {
	background: linear-gradient(90deg, #059669, var(--ck-success));
	box-shadow: 0 0 12px rgba(52, 211, 153, 0.2);
}

.ck-bar-fill.is-warning {
	background: linear-gradient(90deg, #d97706, var(--ck-warning));
	box-shadow: 0 0 12px rgba(251, 191, 36, 0.15);
}

/* Buttons */
.ck-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 8px 14px;
	min-height: 34px;
	border-radius: var(--ck-radius-sm);
	font-family: var(--ck-font);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
	transition:
		border-color 0.22s var(--ck-ease-micro),
		background 0.22s var(--ck-ease-micro),
		box-shadow 0.26s var(--ck-ease-out),
		transform 0.2s var(--ck-ease-micro);
	color: var(--ck-text);
	background: rgba(17, 19, 24, 0.85);
	cursor: pointer;
}

.ck-btn i {
	width: 14px;
	height: 14px;
	stroke-width: 1.75;
}

.ck-btn:hover {
	transform: translateY(-1px);
}

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

.ck-btn:focus-visible {
	outline: 2px solid rgba(94, 234, 212, 0.35);
	outline-offset: 2px;
}

.ck-btn:disabled,
.ck-btn.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.ck-btn-primary {
	background: var(--btn-primary-bg);
	border-color: var(--btn-primary-border);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		var(--btn-primary-shadow);
	color: #fff;
}

.ck-btn-primary:hover {
	border-color: var(--btn-primary-border-hover);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		var(--btn-primary-shadow-hover);
}

.ck-btn-secondary {
	background: rgba(14, 16, 20, 0.92);
	border-color: var(--ck-line-strong);
	color: var(--ck-text-secondary);
}

.ck-btn-secondary:hover {
	border-color: rgba(148, 163, 184, 0.35);
	color: var(--ck-text);
}

.ck-btn-danger {
	background: rgba(48, 16, 18, 0.72);
	border-color: rgba(248, 113, 113, 0.28);
	color: #fecaca;
}

.ck-btn-danger:hover {
	border-color: rgba(248, 113, 113, 0.46);
	background: rgba(64, 20, 24, 0.9);
	color: #fee2e2;
}

.ck-btn-outline {
	background: transparent;
	border-color: var(--ck-line-strong);
	color: var(--ck-text-secondary);
}

.ck-btn-outline:hover {
	border-color: var(--brand-primary-border);
	color: var(--ck-text);
	background: var(--brand-primary-bg);
}

.ck-btn-ghost {
	background: transparent;
	border-color: transparent;
	color: var(--ck-text-secondary);
	padding-left: 10px;
	padding-right: 10px;
}

.ck-btn-ghost:hover {
	background: rgba(148, 163, 184, 0.08);
	color: var(--ck-text);
}

.ck-btn-sm {
	min-height: 32px;
	padding: 6px 11px;
	font-size: 11px;
	gap: 6px;
}

.ck-btn-sm i {
	width: 14px;
	height: 14px;
}

/* Tables */
.ck-table-wrap {
	margin-top: 14px;
	border-radius: var(--ck-radius);
	border: 1px solid var(--ck-line);
	overflow: hidden;
	background: rgba(9, 10, 12, 0.35);
}

.ck-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.ck-table th,
.ck-table td {
	padding: 11px 14px;
	text-align: left;
	border-bottom: 1px solid var(--ck-line);
}

.ck-table th {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ck-text-tertiary);
	background: rgba(17, 19, 24, 0.65);
}

.ck-table tbody tr {
	transition: background 0.15s ease;
}

.ck-table tbody tr:hover {
	background: rgba(148, 163, 184, 0.05);
}

.ck-table tbody tr:last-child td {
	border-bottom: none;
}

.ck-table td {
	color: var(--ck-text-secondary);
	font-weight: 450;
}

.ck-table strong {
	color: var(--ck-text);
	font-weight: 600;
}

/* Quick actions */
.ck-quick-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 14px;
}

@media (min-width: 640px) {
	.ck-quick-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ck-quick {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 12px 12px;
	border-radius: var(--ck-radius-sm);
	border: 1px solid var(--ck-line);
	background: rgba(9, 10, 12, 0.45);
	cursor: pointer;
	text-align: left;
	transition:
		border-color 0.2s ease,
		background 0.2s ease,
		transform 0.15s ease;
	font: inherit;
	color: inherit;
}

.ck-quick:hover {
	border-color: rgba(94, 234, 212, 0.22);
	background: rgba(94, 234, 212, 0.05);
	transform: translateY(-2px);
}

.ck-quick i {
	width: 18px;
	height: 18px;
	color: var(--ck-cyan);
}

.ck-quick span {
	font-size: 12px;
	font-weight: 600;
	color: var(--ck-text);
}

.ck-quick small {
	font-size: 11px;
	color: var(--ck-text-tertiary);
	line-height: 1.35;
}

/* Attendance ring */
.ck-ring {
	position: relative;
	width: 112px;
	height: 112px;
	border-radius: 50%;
	background: conic-gradient(var(--ck-teal) calc(var(--p) * 1%), rgba(148, 163, 184, 0.12) 0);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

.ck-ring::before {
	content: '';
	position: absolute;
	inset: 10px;
	border-radius: 50%;
	background: var(--ck-elev-1);
	border: 1px solid var(--ck-line);
}

.ck-ring__label {
	position: relative;
	z-index: 1;
	text-align: center;
}

.ck-ring__label strong {
	display: block;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--ck-text);
}

.ck-ring__label span {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ck-text-tertiary);
}

/* Metric grid */
.ck-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.ck-metric {
	padding: 10px 10px;
	border-radius: var(--ck-radius-sm);
	border: 1px solid var(--ck-line);
	background: rgba(9, 10, 12, 0.4);
	text-align: center;
}

.ck-metric strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ck-text);
}

.ck-metric span {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ck-text-tertiary);
	margin-top: 4px;
	display: block;
}

/* Overlay - disabled since we use collapse instead */
.ck-overlay {
	display: none !important;
}

@keyframes ck-pulse-soft {

	0%,
	100% {
		opacity: 0.85;
		transform: scale(1);
	}

	50% {
		opacity: 1;
		transform: scale(1.08);
	}
}

@keyframes ck-spin {
	to {
		transform: rotate(360deg);
	}
}

.ck-btn.is-loading {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.ck-btn.is-loading::after {
	content: '';
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 999px;
	border: 2px solid rgba(226, 232, 240, 0.25);
	border-top-color: rgba(226, 232, 240, 0.85);
	animation: ck-spin 0.75s linear infinite;
}

@media (prefers-reduced-motion: reduce) {

	.ck-sidebar,
	.ck-sidebar__inner,
	.ck-content,
	.ck-nav,
	.ck-dropdown,
	.ck-stat-card,
	.ck-card,
	.ck-chart__bar {
		transition-duration: 0.01ms !important;
	}

	.ck-status-dot {
		animation: none !important;
	}

	.ck-btn.is-loading::after {
		animation: none !important;
		border-color: rgba(226, 232, 240, 0.55);
	}
}

/* —— Member Events module —— */
.ck-flash {
	padding: 10px 14px;
	border-radius: var(--ck-radius-sm);
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 12px;
	border: 1px solid var(--ck-line);
	animation: ck-tooltip-in 0.2s var(--ck-ease-out) both;
}

.ck-flash--success {
	color: #a7f3d0;
	background: rgba(6, 78, 59, 0.25);
	border-color: rgba(52, 211, 153, 0.25);
}

.ck-flash--error {
	color: #fecaca;
	background: rgba(127, 29, 29, 0.2);
	border-color: rgba(248, 113, 113, 0.22);
}

.ck-list-item--link {
	text-decoration: none;
	color: inherit;
	display: flex;
}

.ck-list-item--link:hover {
	color: inherit;
}

.ck-events-hero {
	position: relative;
	padding: 16px 18px;
	border-radius: var(--ck-radius-lg);
	border: 1px solid var(--ck-line);
	background: linear-gradient(145deg, rgba(22, 26, 34, 0.75), rgba(10, 11, 14, 0.92));
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}

.ck-events-hero__grid {
	position: absolute;
	inset: 0;
	opacity: 0.4;
	background-image:
		linear-gradient(rgba(148, 163, 184, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(148, 163, 184, 0.03) 1px, transparent 1px);
	background-size: 40px 40px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
	pointer-events: none;
}

.ck-events-filters {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ck-events-filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
}

.ck-events-select-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ck-text-tertiary);
}

.ck-events-select {
	min-width: 130px;
	padding: 6px 10px;
	border-radius: var(--ck-radius-sm);
	border: 1px solid var(--ck-line);
	background: rgba(10, 11, 14, 0.85);
	color: var(--ck-text);
	font-size: 12px;
	font-family: var(--ck-font);
	transition:
		border-color 0.2s var(--ck-ease-micro),
		box-shadow 0.2s ease;
}

.ck-events-select:focus {
	outline: none;
	border-color: rgba(94, 234, 212, 0.25);
	box-shadow: 0 0 0 2px var(--ck-glow-cyan);
}

.ck-events-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 18px;
}

@media (max-width: 640px) {
	.ck-events-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

.ck-event-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--ck-radius-lg);
	border: 1px solid rgba(148, 163, 184, 0.11);
	background: linear-gradient(165deg, rgba(24, 28, 36, 0.62), rgba(12, 14, 18, 0.96));
	overflow: hidden;
	box-shadow:
		0 14px 40px rgba(0, 0, 0, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.025);
	transition:
		transform 0.28s var(--ck-ease-out),
		border-color 0.26s var(--ck-ease-micro),
		box-shadow 0.32s var(--ck-ease-out);
}

.ck-event-card:hover {
	transform: translateY(-3px);
	border-color: rgba(148, 163, 184, 0.22);
	box-shadow:
		0 22px 52px rgba(0, 0, 0, 0.42),
		0 0 0 1px rgba(94, 234, 212, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

/* Category accent indicator (left border) */
.ck-event-card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	border-radius: var(--ck-radius-lg) 0 0 var(--ck-radius-lg);
	transition: width 0.26s var(--ck-ease-micro);
}

.ck-event-card:hover::before {
	width: 4px;
}

/* Category color mappings (from past-events-premium.css) */
.ck-event-card[data-category="ctf"]::before {
	background: linear-gradient(180deg, #DC2626, #991b1b);
}

.ck-event-card[data-category="workshop"]::before {
	background: linear-gradient(180deg, #EA580C, #c2410c);
}

.ck-event-card[data-category="seminar"]::before {
	background: linear-gradient(180deg, #2563EB, #1d4ed8);
}

.ck-event-card[data-category="industry-talk"]::before,
.ck-event-card[data-category="industry talk"]::before {
	background: linear-gradient(180deg, #0891B2, #0e7490);
}

.ck-event-card[data-category="competition"]::before {
	background: linear-gradient(180deg, #D97706, #b45309);
}

.ck-event-card[data-category="hackathon"]::before {
	background: linear-gradient(180deg, #9333EA, #7e22ce);
}

.ck-event-card[data-category="training"]::before {
	background: linear-gradient(180deg, #16A34A, #15803d);
}

.ck-event-card[data-category="awareness"]::before {
	background: linear-gradient(180deg, #0D9488, #0f766e);
}

.ck-event-card[data-category="other"]::before,
.ck-event-card:not([data-category])::before {
	background: linear-gradient(180deg, #6B7280, #4b5563);
}

.ck-event-card--hidden {
	display: none;
}

.ck-event-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: rgba(8, 9, 11, 0.95);
	overflow: hidden;
}

.ck-event-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.35) 100%);
	pointer-events: none;
}

.ck-event-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ck-event-card__placeholder {
	height: 100%;
	display: grid;
	place-items: center;
	color: rgba(94, 234, 212, 0.35);
	background: radial-gradient(circle at 30% 20%, rgba(94, 234, 212, 0.08), transparent 55%);
}

.ck-event-card__placeholder i {
	width: 36px;
	height: 36px;
}

.ck-event-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 6px 11px;
	border-radius: 999px;
	border: 1px solid var(--ck-line);
	backdrop-filter: blur(12px) saturate(1.3);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	z-index: 2;
}

.ck-event-badge::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 0 6px currentColor;
	animation: ck-pulse-soft 2.2s ease-in-out infinite;
}

.ck-event-badge--live {
	color: #6ee7b7;
	border-color: rgba(52, 211, 153, 0.35);
	background: rgba(6, 78, 59, 0.85);
}

.ck-event-badge--live::before {
	background: #34d399;
}

.ck-event-badge--upcoming {
	color: #5eead4;
	border-color: rgba(45, 212, 191, 0.3);
	background: rgba(13, 52, 46, 0.82);
}

.ck-event-badge--upcoming::before {
	background: #2dd4bf;
}

.ck-event-badge--neutral {
	color: rgba(226, 232, 240, 0.88);
	border-color: rgba(148, 163, 184, 0.2);
	background: rgba(10, 11, 14, 0.82);
}

.ck-event-badge--neutral::before {
	background: rgba(148, 163, 184, 0.75);
}

.ck-event-badge--muted {
	color: rgba(148, 163, 184, 0.7);
	border-color: rgba(148, 163, 184, 0.15);
	background: rgba(10, 11, 14, 0.75);
}

.ck-event-badge--muted::before {
	background: rgba(107, 114, 128, 0.6);
}

.ck-event-badge--warning {
	color: #fcd34d;
	border-color: rgba(251, 191, 36, 0.35);
	background: rgba(92, 74, 6, 0.82);
}

.ck-event-badge--warning::before {
	background: #fbbf24;
}

.ck-event-card__body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.ck-event-card__category {
	display: inline-flex;
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: 1px solid rgba(148, 163, 184, 0.18);
	background: rgba(15, 17, 21, 0.75);
	transition: all 0.2s var(--ck-ease-micro);
}

/* Category-specific chip colors */
.ck-event-card[data-category="ctf"] .ck-event-card__category {
	color: #fca5a5;
	border-color: rgba(220, 38, 38, 0.3);
	background: rgba(127, 29, 29, 0.35);
}

.ck-event-card[data-category="workshop"] .ck-event-card__category {
	color: #fdba74;
	border-color: rgba(234, 88, 12, 0.3);
	background: rgba(124, 45, 18, 0.35);
}

.ck-event-card[data-category="seminar"] .ck-event-card__category {
	color: #93c5fd;
	border-color: rgba(37, 99, 235, 0.3);
	background: rgba(30, 58, 138, 0.35);
}

.ck-event-card[data-category="industry-talk"] .ck-event-card__category,
.ck-event-card[data-category="industry talk"] .ck-event-card__category {
	color: #67e8f9;
	border-color: rgba(8, 145, 178, 0.3);
	background: rgba(21, 94, 117, 0.35);
}

.ck-event-card[data-category="competition"] .ck-event-card__category {
	color: #fcd34d;
	border-color: rgba(217, 119, 6, 0.3);
	background: rgba(120, 53, 15, 0.35);
}

.ck-event-card[data-category="hackathon"] .ck-event-card__category {
	color: #d8b4fe;
	border-color: rgba(147, 51, 234, 0.3);
	background: rgba(88, 28, 135, 0.35);
}

.ck-event-card[data-category="training"] .ck-event-card__category {
	color: #86efac;
	border-color: rgba(22, 163, 74, 0.3);
	background: rgba(20, 83, 45, 0.35);
}

.ck-event-card[data-category="awareness"] .ck-event-card__category {
	color: #5eead4;
	border-color: rgba(13, 148, 136, 0.3);
	background: rgba(19, 78, 74, 0.35);
}

.ck-event-card[data-category="other"] .ck-event-card__category,
.ck-event-card:not([data-category]) .ck-event-card__category {
	color: rgba(203, 213, 225, 0.75);
	border-color: rgba(107, 114, 128, 0.25);
	background: rgba(55, 65, 81, 0.3);
}

.ck-event-card:hover .ck-event-card__category {
	border-color: rgba(148, 163, 184, 0.3);
}

.ck-event-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 11px;
	font-family: var(--ck-mono);
	font-weight: 500;
	color: rgba(203, 213, 225, 0.82);
}

.ck-event-card__meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.ck-event-card__meta i {
	width: 13px;
	height: 13px;
	opacity: 0.85;
	transition: color 0.2s var(--ck-ease-micro);
}

/* Category-aware icon colors */
.ck-event-card[data-category="ctf"] .ck-event-card__meta i {
	color: #f87171;
}

.ck-event-card[data-category="workshop"] .ck-event-card__meta i {
	color: #fb923c;
}

.ck-event-card[data-category="seminar"] .ck-event-card__meta i {
	color: #60a5fa;
}

.ck-event-card[data-category="industry-talk"] .ck-event-card__meta i,
.ck-event-card[data-category="industry talk"] .ck-event-card__meta i {
	color: #22d3ee;
}

.ck-event-card[data-category="competition"] .ck-event-card__meta i {
	color: #fbbf24;
}

.ck-event-card[data-category="hackathon"] .ck-event-card__meta i {
	color: #c084fc;
}

.ck-event-card[data-category="training"] .ck-event-card__meta i {
	color: #4ade80;
}

.ck-event-card[data-category="awareness"] .ck-event-card__meta i {
	color: #2dd4bf;
}

.ck-event-card[data-category="other"] .ck-event-card__meta i,
.ck-event-card:not([data-category]) .ck-event-card__meta i {
	color: var(--ck-cyan);
}

.ck-event-card__title {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: rgba(248, 250, 252, 0.98);
	line-height: 1.3;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ck-event-card__excerpt {
	font-size: 12px;
	line-height: 1.5;
	color: rgba(203, 213, 225, 0.75);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ck-event-card__facts {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 0;
}

.ck-event-fact {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 500;
	color: rgba(203, 213, 225, 0.85);
}

.ck-event-fact i {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	opacity: 0.9;
	transition: color 0.2s var(--ck-ease-micro);
}

/* Category-aware fact icon colors */
.ck-event-card[data-category="ctf"] .ck-event-fact i {
	color: #f87171;
}

.ck-event-card[data-category="workshop"] .ck-event-fact i {
	color: #fb923c;
}

.ck-event-card[data-category="seminar"] .ck-event-fact i {
	color: #60a5fa;
}

.ck-event-card[data-category="industry-talk"] .ck-event-fact i,
.ck-event-card[data-category="industry talk"] .ck-event-fact i {
	color: #22d3ee;
}

.ck-event-card[data-category="competition"] .ck-event-fact i {
	color: #fbbf24;
}

.ck-event-card[data-category="hackathon"] .ck-event-fact i {
	color: #c084fc;
}

.ck-event-card[data-category="training"] .ck-event-fact i {
	color: #4ade80;
}

.ck-event-card[data-category="awareness"] .ck-event-fact i {
	color: #2dd4bf;
}

.ck-event-card[data-category="other"] .ck-event-fact i,
.ck-event-card:not([data-category]) .ck-event-fact i {
	color: var(--ck-cyan);
}

.ck-event-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 2px;
}

.ck-event-tag {
	font-size: 10px;
	font-weight: 600;
	padding: 4px 9px;
	border-radius: 7px;
	border: 1px solid rgba(148, 163, 184, 0.14);
	color: rgba(226, 232, 240, 0.75);
	background: rgba(15, 17, 21, 0.65);
	transition: all 0.2s var(--ck-ease-micro);
}

.ck-event-tag:hover {
	border-color: rgba(148, 163, 184, 0.25);
	color: rgba(241, 245, 249, 0.9);
	background: rgba(20, 23, 29, 0.8);
}

.ck-event-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
	padding-top: 6px;
}

.ck-event-card__actions .ck-btn-primary {
	flex: 1;
	min-width: 140px;
	justify-content: center;
	font-weight: 700;
	box-shadow:
		0 4px 12px rgba(var(--brand-primary-rgb), 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ck-event-card__actions .ck-btn-primary:hover {
	box-shadow:
		0 6px 18px rgba(var(--brand-primary-rgb), 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	transform: translateY(-1px);
}

.ck-event-card__actions .ck-btn-outline {
	flex-shrink: 0;
}

/* Mobile touch-friendly enhancements */
@media (max-width: 640px) {
	.ck-event-card__actions {
		flex-direction: column;
	}

	.ck-event-card__actions .ck-btn-primary,
	.ck-event-card__actions .ck-btn-outline {
		width: 100%;
		min-height: 44px;
		justify-content: center;
	}

	.ck-event-card__body {
		padding: 14px 16px 16px;
		gap: 9px;
	}

	.ck-event-card__title {
		font-size: 15px;
	}

	.ck-event-card__meta {
		gap: 10px;
		font-size: 11px;
	}

	.ck-event-card__facts {
		gap: 5px;
	}

	.ck-event-fact {
		font-size: 11.5px;
	}
}

.ck-events-empty {
	text-align: center;
	padding: 36px 24px;
}

.ck-events-empty__icon {
	width: 48px;
	height: 48px;
	margin: 0 auto 14px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	border: 1px solid var(--ck-line);
	color: var(--ck-text-tertiary);
	background: rgba(8, 9, 11, 0.55);
}

.ck-events-empty__icon i {
	width: 22px;
	height: 22px;
}

.ck-events-back {
	margin-bottom: 10px;
}

.ck-events-back__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ck-text-secondary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.ck-events-back__link:hover {
	color: var(--ck-cyan);
}

.ck-events-back__link i {
	width: 15px;
	height: 15px;
}

.ck-event-detail-banner {
	position: relative;
	border-radius: var(--ck-radius-lg);
	overflow: hidden;
	border: 1px solid var(--ck-line);
	min-height: 200px;
	margin-bottom: 14px;
}

.ck-event-detail-banner__img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.ck-event-detail-banner__placeholder {
	height: 220px;
	display: grid;
	place-items: center;
	background: radial-gradient(ellipse at 30% 0%, rgba(94, 234, 212, 0.12), rgba(8, 9, 11, 0.95));
	color: rgba(94, 234, 212, 0.4);
}

.ck-event-detail-banner__placeholder i {
	width: 48px;
	height: 48px;
}

.ck-event-detail-banner__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 20%, rgba(4, 5, 7, 0.92) 100%);
	pointer-events: none;
}

.ck-event-detail-banner__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ck-event-detail-title {
	font-size: clamp(1.1rem, 2.2vw, 1.35rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--ck-text);
	margin: 0;
	line-height: 1.25;
	word-break: break-word;
	overflow-wrap: break-word;
}

.ck-event-detail-banner__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 11px;
	color: var(--ck-text-secondary);
}

.ck-event-detail-banner__meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.ck-event-detail-banner__meta i {
	width: 13px;
	height: 13px;
	color: var(--ck-cyan);
	opacity: 0.85;
}

.ck-event-detail-cat {
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--ck-line);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ck-text-tertiary);
}

.ck-event-prose {
	font-size: 12px;
	line-height: 1.55;
	color: var(--ck-text-secondary);
	margin-top: 8px;
	word-break: break-word;
	overflow-wrap: break-word;
}

.ck-event-dl {
	display: grid;
	gap: 10px;
	font-size: 11px;
}

.ck-event-dl dt {
	color: var(--ck-text-tertiary);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 10px;
}

.ck-event-dl dd {
	margin: 2px 0 0;
	color: var(--ck-text);
	font-family: var(--ck-mono);
}

.ck-event-coord-avatar {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--ck-base);
	background: linear-gradient(135deg, #e2e8f0, #64748b);
	border: 1px solid var(--ck-line);
}

.ck-events-dash-past {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* —— Team System —— */
.ck-btn-xs {
	padding: 6px 10px;
	font-size: 10px;
	border-radius: 9px;
}

.ck-btn-xs i {
	width: 12px;
	height: 12px;
}

.ck-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: 1px solid var(--ck-line);
	color: var(--ck-text-secondary);
	background: rgba(8, 9, 11, 0.6);
}

.ck-badge--success {
	color: #a7f3d0;
	border-color: rgba(52, 211, 153, 0.25);
	background: rgba(8, 46, 33, 0.5);
}

.ck-badge--warning {
	color: #fde68a;
	border-color: rgba(251, 191, 36, 0.3);
	background: rgba(52, 34, 10, 0.55);
}

.ck-badge--danger {
	color: #fecaca;
	border-color: rgba(248, 113, 113, 0.32);
	background: rgba(48, 16, 18, 0.55);
}

.ck-badge--neutral {
	color: var(--ck-text-secondary);
	border-color: rgba(148, 163, 184, 0.18);
	background: rgba(8, 9, 11, 0.6);
}

/* Scoped polish: Teams, Notifications, Profile */
body[data-page="teams"] .ck-card,
body[data-page="notifications"] .ck-card,
body[data-page="profile"] .ck-card {
	border-radius: calc(var(--ck-radius-lg) + 2px);
	border-color: rgba(148, 163, 184, 0.1);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0)),
		linear-gradient(168deg, rgba(17, 20, 26, 0.72), rgba(9, 10, 13, 0.94));
	padding: 20px 22px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.026) inset,
		0 14px 34px rgba(0, 0, 0, 0.24);
	transition:
		border-color 0.22s var(--ck-ease-micro),
		box-shadow 0.24s var(--ck-ease-out),
		background 0.24s var(--ck-ease-micro),
		transform 0.24s var(--ck-ease-out);
}

body[data-page="teams"] .ck-card:hover,
body[data-page="notifications"] .ck-card:hover,
body[data-page="profile"] .ck-card:hover {
	border-color: rgba(203, 213, 225, 0.16);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.034) inset,
		0 16px 38px rgba(0, 0, 0, 0.28);
}

body[data-page="teams"] .ck-card--interactive:hover,
body[data-page="notifications"] .ck-card--interactive:hover,
body[data-page="profile"] .ck-card--interactive:hover {
	transform: translateY(-2px);
}

body[data-page="teams"] .ck-section-head,
body[data-page="notifications"] .ck-section-head,
body[data-page="profile"] .ck-section-head {
	gap: 16px;
	align-items: flex-start;
}

body[data-page="teams"] .ck-card__label,
body[data-page="notifications"] .ck-card__label,
body[data-page="profile"] .ck-card__label {
	margin-bottom: 5px;
	color: rgba(148, 163, 184, 0.78);
	letter-spacing: 0.105em;
}

body[data-page="teams"] .ck-card h1,
body[data-page="teams"] .ck-card h2,
body[data-page="notifications"] .ck-card h1,
body[data-page="notifications"] .ck-card h2,
body[data-page="profile"] .ck-card h1,
body[data-page="profile"] .ck-card h2 {
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.32;
}

body[data-page="teams"] .ck-card p:not(.ck-card__label),
body[data-page="notifications"] .ck-card p:not(.ck-card__label),
body[data-page="profile"] .ck-card p:not(.ck-card__label) {
	color: rgba(148, 163, 184, 0.82);
	line-height: 1.6;
}

body[data-page="teams"] .ck-btn,
body[data-page="notifications"] .ck-btn,
body[data-page="profile"] .ck-btn {
	min-height: 32px;
	padding: 7px 12px;
	border-radius: 10px;
	font-size: 11px;
	letter-spacing: 0;
	transition:
		border-color 0.22s var(--ck-ease-micro),
		background 0.22s var(--ck-ease-micro),
		box-shadow 0.24s var(--ck-ease-out),
		transform 0.2s var(--ck-ease-micro);
}

body[data-page="teams"] .ck-btn-sm,
body[data-page="notifications"] .ck-btn-sm,
body[data-page="profile"] .ck-btn-sm {
	min-height: 30px;
	padding: 6px 10px;
	font-size: 10.5px;
}

body[data-page="teams"] .ck-btn-xs,
body[data-page="notifications"] .ck-btn-xs,
body[data-page="profile"] .ck-btn-xs {
	min-height: 27px;
	padding: 5px 9px;
	font-size: 10px;
}

body[data-page="teams"] .ck-btn i,
body[data-page="teams"] .ck-btn svg,
body[data-page="notifications"] .ck-btn i,
body[data-page="notifications"] .ck-btn svg,
body[data-page="profile"] .ck-btn i,
body[data-page="profile"] .ck-btn svg {
	width: 11px;
	height: 11px;
	stroke-width: 1.7;
}

body[data-page="teams"] .ck-badge,
body[data-page="notifications"] .ck-badge,
body[data-page="profile"] .ck-badge,
body[data-page="profile"] span[class*="rounded-full"][class*="border"] {
	gap: 4px;
	padding: 2px 7px;
	font-size: 9px;
	font-weight: 650;
	letter-spacing: 0.055em;
	border-color: rgba(148, 163, 184, 0.15);
}

body[data-page="teams"] .ck-badge--success,
body[data-page="profile"] .ck-badge--success {
	color: rgba(167, 243, 208, 0.88);
	border-color: rgba(52, 211, 153, 0.18);
	background: rgba(8, 46, 33, 0.34);
}

body[data-page="teams"] .ck-badge--warning,
body[data-page="profile"] .ck-badge--warning {
	color: rgba(253, 230, 138, 0.86);
	border-color: rgba(251, 191, 36, 0.2);
	background: rgba(52, 34, 10, 0.36);
}

body[data-page="teams"] .ck-badge--danger,
body[data-page="profile"] .ck-badge--danger {
	color: rgba(254, 202, 202, 0.88);
	border-color: rgba(248, 113, 113, 0.2);
	background: rgba(48, 16, 18, 0.36);
}

body[data-page="teams"] .ck-badge--neutral,
body[data-page="profile"] .ck-badge--neutral {
	color: rgba(203, 213, 225, 0.74);
	border-color: rgba(148, 163, 184, 0.14);
	background: rgba(8, 9, 11, 0.44);
}

body[data-page="teams"] .ck-input,
body[data-page="notifications"] .ck-events-select,
body[data-page="profile"] input,
body[data-page="profile"] select,
body[data-page="profile"] textarea {
	min-height: 40px;
	border-radius: 12px !important;
	border-color: rgba(148, 163, 184, 0.14) !important;
	background-color: rgba(8, 10, 13, 0.58) !important;
	color: rgba(241, 245, 249, 0.9);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.024) inset;
	transition:
		border-color 0.22s var(--ck-ease-micro),
		background 0.22s var(--ck-ease-micro),
		box-shadow 0.22s var(--ck-ease-micro);
}

body[data-page="teams"] .ck-input:focus,
body[data-page="notifications"] .ck-events-select:focus,
body[data-page="profile"] input:focus,
body[data-page="profile"] select:focus,
body[data-page="profile"] textarea:focus {
	border-color: rgba(229, 57, 53, 0.48) !important;
	box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.14) !important;
}

body[data-page="teams"] .ck-table-wrap {
	border-color: rgba(148, 163, 184, 0.1);
	background: rgba(8, 10, 13, 0.34);
}

body[data-page="teams"] .ck-table {
	font-size: 12px;
}

body[data-page="teams"] .ck-table th,
body[data-page="teams"] .ck-table td {
	padding: 12px 14px;
	border-bottom-color: rgba(148, 163, 184, 0.08);
	vertical-align: middle;
}

body[data-page="teams"] .ck-table th {
	font-size: 9px;
	font-weight: 650;
	color: rgba(148, 163, 184, 0.76);
	background: rgba(17, 19, 24, 0.5);
}

body[data-page="teams"] .ck-table tbody tr:hover {
	background: rgba(148, 163, 184, 0.035);
}

body[data-page="teams"] .ck-list,
body[data-page="notifications"] .ck-list {
	gap: 10px;
}

body[data-page="teams"] .ck-list-item,
body[data-page="notifications"] .ck-list-item {
	border-radius: 13px;
	border-color: rgba(148, 163, 184, 0.1);
	background: rgba(8, 10, 13, 0.34);
	padding: 14px 15px;
	transition:
		border-color 0.22s var(--ck-ease-micro),
		background 0.22s var(--ck-ease-micro),
		box-shadow 0.24s var(--ck-ease-out),
		transform 0.22s var(--ck-ease-micro);
}

body[data-page="teams"] .ck-list-item:hover,
body[data-page="notifications"] .ck-list-item:hover {
	border-color: rgba(203, 213, 225, 0.16);
	background: rgba(148, 163, 184, 0.04);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
	transform: translateY(-2px);
}

body[data-page="teams"] .ck-list-item__main strong,
body[data-page="notifications"] .ck-list-item__main strong {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}

body[data-page="teams"] .ck-list-item__main span,
body[data-page="notifications"] .ck-list-item__main span {
	font-size: 10.5px;
	line-height: 1.55;
	color: rgba(148, 163, 184, 0.76);
}

body[data-page="notifications"] .ck-notif-feed .ck-list-item {
	align-items: center;
	gap: 14px;
}

body[data-page="notifications"] .ck-notif-feed .ck-list-item__main strong {
	gap: 7px;
}

body[data-page="notifications"] .ck-notif-feed .ck-list-item__main i,
body[data-page="notifications"] .ck-notif-feed .ck-list-item__main svg {
	width: 12px;
	height: 12px;
	color: rgba(94, 234, 212, 0.7);
	stroke-width: 1.75;
}

body[data-page="notifications"] .ck-notif-feed .ck-list-item.border-teal-500\/20 {
	border-color: rgba(45, 212, 191, 0.16) !important;
	background: rgba(45, 212, 191, 0.035) !important;
}

body[data-page="profile"] label {
	font-size: 12px;
	font-weight: 500;
	color: rgba(203, 213, 225, 0.82);
}

body[data-page="profile"] input[type="file"] {
	min-height: auto;
	border-radius: 0 !important;
	border-color: transparent !important;
	background-color: transparent !important;
	box-shadow: none;
}

body[data-page="profile"] .grid.text-sm {
	gap: 12px;
	font-size: 12px;
}

body[data-page="profile"] .grid.text-sm > div {
	gap: 16px;
	border-color: rgba(148, 163, 184, 0.09) !important;
}

body[data-page="profile"] .grid.text-sm span:last-child {
	text-align: right;
	color: rgba(226, 232, 240, 0.88);
	word-break: break-word;
}

body[data-page="profile"] .relative.h-20.w-20 {
	width: 72px;
	height: 72px;
	border-radius: 18px;
	border-color: rgba(148, 163, 184, 0.16);
	background: rgba(8, 10, 13, 0.72);
}

body[data-page="teams"] .ck-join-code,
body[data-page="teams"] .ck-qr {
	border-color: rgba(148, 163, 184, 0.12);
	background: rgba(8, 10, 13, 0.42);
}

body[data-page="teams"] .ck-events-empty__icon i,
body[data-page="teams"] .ck-events-empty__icon svg {
	width: 20px;
	height: 20px;
	stroke-width: 1.7;
}

@media (max-width: 768px) {
	body[data-page="teams"] .ck-card,
	body[data-page="notifications"] .ck-card,
	body[data-page="profile"] .ck-card {
		padding: 17px;
	}

	body[data-page="teams"] .ck-section-head,
	body[data-page="notifications"] .ck-section-head,
	body[data-page="profile"] .ck-section-head {
		gap: 12px;
	}

	body[data-page="teams"] .ck-table th,
	body[data-page="teams"] .ck-table td {
		padding: 10px 12px;
	}

	body[data-page="notifications"] .ck-notif-feed .ck-list-item {
		align-items: flex-start;
	}

	body[data-page="profile"] .grid.text-sm > div {
		align-items: flex-start;
	}
}

.ck-empty-state {
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px dashed rgba(148, 163, 184, 0.2);
	background: rgba(8, 9, 11, 0.5);
	color: var(--ck-text-tertiary);
	font-size: 11px;
}


.ck-join-code {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--ck-line);
	background: rgba(11, 13, 17, 0.9);
}

.ck-join-code__value {
	font-family: var(--ck-mono);
	font-size: 14px;
	letter-spacing: 0.2em;
	color: var(--ck-text);
}

.ck-user {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ck-user__avatar {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-size: 10px;
	font-weight: 700;
	color: var(--ck-base);
	background: linear-gradient(135deg, #e2e8f0, #94a3b8);
	border: 1px solid var(--ck-line);
}

.ck-user strong {
	display: block;
	font-size: 12px;
	color: var(--ck-text);
}

.ck-user span {
	font-size: 11px;
	color: var(--ck-text-secondary);
}

.ck-qr {
	border-radius: 14px;
	padding: 10px;
	border: 1px solid var(--ck-line);
	background: rgba(8, 9, 11, 0.6);
	display: grid;
	place-items: center;
}

.ck-qr img {
	width: 200px;
	height: 200px;
	object-fit: contain;
}

/* Landing website */
html {
	scroll-behavior: smooth;
}

.ck-landing {
	overflow-x: hidden;
	position: relative;
	background: var(--bg-color);
}

.ck-landing.is-booting {
	overflow: hidden;
}

.ck-landing.is-booting>.ck-landing-nav,
.ck-landing.is-booting>main {
	opacity: 0;
	visibility: hidden;
}

.ck-landing.is-ready>.ck-landing-nav,
.ck-landing.is-ready>main {
	animation: ck-homepage-reveal 0.75s ease-out both;
}

.ck-warning-splash {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 50% 54%, rgba(255, 42, 42, 0.16), transparent 28%),
		radial-gradient(ellipse at 50% 100%, rgba(0, 255, 127, 0.12), transparent 42%),
		linear-gradient(180deg, #010302 0%, #050704 48%, #000 100%);
	animation: ck-warning-splash-state 3.2s ease-in-out forwards;
	transition:
		opacity 0.72s ease,
		visibility 0.72s ease;
}

.ck-warning-splash::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 42, 42, 0.052) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 42, 42, 0.052) 1px, transparent 1px);
	background-size: 80px 40px;
	transform: perspective(520px) rotateX(64deg) scale(1.55);
	transform-origin: center bottom;
	opacity: 0.5;
	mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 32%, rgba(0, 0, 0, 0.85) 100%);
	animation:
		moveGrid 18s linear infinite,
		ck-warning-grid-state 3.2s ease-in-out forwards;
}

.ck-warning-splash::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 50% 50%, transparent 34%, rgba(0, 0, 0, 0.35) 72%, rgba(0, 0, 0, 0.82) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.5));
	pointer-events: none;
}

.ck-warning-splash.is-exiting {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.ck-warning-splash__aura {
	position: absolute;
	width: min(760px, 92vw);
	aspect-ratio: 1 / 0.36;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(255, 42, 42, 0.36), rgba(255, 42, 42, 0.12) 42%, transparent 72%);
	filter: blur(28px);
	opacity: 0.82;
	animation:
		ck-warning-aura 2.8s ease-in-out infinite alternate,
		ck-warning-aura-state 3.2s ease-in-out forwards;
}

.ck-warning-graphic {
	position: relative;
	z-index: 1;
	width: min(600px, 86vw);
	height: auto;
	overflow: visible;
	color: #ff2a2a;
	filter:
		drop-shadow(0 0 10px rgba(255, 42, 42, 0.42)) drop-shadow(0 0 28px rgba(255, 42, 42, 0.18));
	animation: ck-warning-graphic-state 3.2s ease-in-out forwards;
}

.wg-element,
.wg-triangle,
.wg-stripe,
.wg-exclamation {
	fill: #ff2a2a;
	animation-name: wg-symbol-state;
	animation-duration: 3.2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.wg-path-line {
	stroke: #ff2a2a;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	opacity: 0.3;
	animation:
		wg-path-line-draw 1.2s ease-out 0s forwards,
		wg-stroke-state 3.2s ease-in-out forwards;
}

.wg-triangle {
	stroke: #ff2a2a;
	stroke-width: 0.7;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	fill-opacity: 0;
	opacity: 0;
	animation:
		wg-triangle-draw 0.8s ease-out 0.6s forwards,
		wg-symbol-state 3.2s ease-in-out forwards,
		wg-stroke-state 3.2s ease-in-out forwards;
}

.wg-stripe {
	opacity: 0;
	scale: 0 1;
	transform-box: fill-box;
	animation:
		wg-stripe-expand 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards,
		wg-symbol-state 3.2s ease-in-out forwards;
}

.wg-stripe-left {
	transform-origin: right center;
}

.wg-stripe-right {
	transform-origin: left center;
}

.wg-stripe:nth-of-type(1) {
	animation-delay: 1.4s, 0s;
}

.wg-stripe:nth-of-type(2) {
	animation-delay: 1.48s, 0s;
}

.wg-stripe:nth-of-type(3) {
	animation-delay: 1.56s, 0s;
}

.wg-stripe:nth-of-type(4) {
	animation-delay: 1.64s, 0s;
}

.wg-stripe:nth-of-type(5) {
	animation-delay: 1.72s, 0s;
}

.wg-stripe:nth-of-type(6) {
	animation-delay: 1.8s, 0s;
}

.wg-exclamation {
	opacity: 0;
	scale: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation:
		wg-exclamation-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2s forwards,
		wg-symbol-state 3.2s ease-in-out forwards;
}

.wg-element {
	opacity: 0;
	scale: 0.5;
	translate: 0 10px;
	transform-box: fill-box;
	transform-origin: center;
	animation:
		wg-element-in 0.58s cubic-bezier(0.16, 1, 0.3, 1) 2.5s forwards,
		wg-symbol-state 3.2s ease-in-out forwards;
}

.ck-landing-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 14px clamp(16px, 4vw, 52px);
	border-bottom: 1px solid var(--ck-line);
	background: rgba(8, 9, 11, 0.78);
	backdrop-filter: blur(18px) saturate(1.25);
}

.ck-landing-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ck-text);
	text-decoration: none;
	min-width: 0;
}

.ck-landing-brand strong,
.ck-landing-brand small {
	display: block;
	line-height: 1.15;
}

.ck-landing-brand strong {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
}

.ck-landing-brand small {
	margin-top: 2px;
	font-size: 10px;
	color: var(--ck-text-tertiary);
}

.ck-landing-links {
	display: none;
	align-items: center;
	gap: 6px;
	padding: 4px;
	border-radius: var(--ck-radius);
	border: 1px solid var(--ck-line);
	background: rgba(11, 13, 17, 0.58);
}

.ck-landing-links a {
	padding: 6px 10px;
	border-radius: var(--ck-radius-sm);
	color: var(--ck-text-secondary);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s var(--ck-ease-micro), background 0.2s var(--ck-ease-micro);
}

.ck-landing-links a:hover {
	color: var(--ck-text);
	background: rgba(148, 163, 184, 0.08);
}

.ck-landing-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

@media (min-width: 760px) {
	.ck-landing-links {
		display: flex;
	}
}

@media (max-width: 560px) {
	.ck-landing-actions .ck-btn-ghost {
		display: none;
	}
}

.ck-landing-hero {
	position: relative;
	min-height: calc(100vh - 58px);
	display: grid;
	align-items: center;
	padding: clamp(42px, 8vw, 84px) clamp(16px, 4vw, 52px) 40px;
	overflow: hidden;
	border-bottom: 1px solid var(--ck-line);
}

/* Old aurora scene styles - replaced with minimal grid system (see homepage-bg.css) */
/* .scene, .floor, .main-column, .light-beam removed */

body.ck-landing>main {
	position: relative;
	z-index: 1;
}

.ck-landing-hero__inner {
	position: relative;
	z-index: 5;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 5vw, 54px);
	width: min(1180px, 100%);
	margin: 0 auto;
}

@media (min-width: 980px) {
	.ck-landing-hero__inner {
		grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.9fr);
		align-items: center;
	}
}

.ck-landing-copy {
	max-width: 720px;
}

.ck-landing-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid var(--ck-line-accent);
	background: rgba(94, 234, 212, 0.07);
	color: #b2f5ea;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ck-landing-eyebrow i {
	width: 14px;
	height: 14px;
}

.ck-landing-copy h1 {
	margin: 18px 0 0;
	max-width: 720px;
	font-size: clamp(44px, 7vw, 82px);
	line-height: 0.96;
	font-weight: 760;
	letter-spacing: 0;
	color: var(--ck-text);
}

.ck-landing-copy p {
	max-width: 650px;
	margin-top: 18px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ck-text-secondary);
}

.ck-landing-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.ck-trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

.ck-trust-strip span {
	display: inline-flex;
	align-items: center;
	padding: 6px 9px;
	border-radius: 999px;
	border: 1px solid var(--ck-line);
	background: rgba(10, 11, 14, 0.6);
	color: var(--ck-text-tertiary);
	font-family: var(--ck-mono);
	font-size: 10px;
}

.ck-dashboard-preview {
	perspective: 1200px;
}

.ck-preview-window {
	border-radius: var(--ck-radius-lg);
	border: 1px solid rgba(148, 163, 184, 0.18);
	background: linear-gradient(150deg, rgba(23, 28, 36, 0.9), rgba(8, 9, 12, 0.96));
	box-shadow:
		0 24px 70px rgba(0, 0, 0, 0.42),
		0 0 0 1px rgba(94, 234, 212, 0.05),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
	overflow: hidden;
	transform: rotateX(3deg) rotateY(-5deg);
	transition: transform 0.5s var(--ck-ease-out), border-color 0.28s var(--ck-ease-micro);
}

.ck-preview-window:hover {
	transform: rotateX(0) rotateY(0) translateY(-4px);
	border-color: rgba(94, 234, 212, 0.28);
}

.ck-preview-top {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--ck-line);
	background: rgba(8, 9, 11, 0.55);
}

.ck-preview-top span {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: rgba(148, 163, 184, 0.28);
}

.ck-preview-top strong {
	margin-left: 8px;
	color: var(--ck-text-secondary);
	font-size: 11px;
	font-weight: 700;
}

.ck-preview-body {
	display: grid;
	grid-template-columns: 72px 1fr;
	min-height: 360px;
}

.ck-preview-side {
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 16px 14px;
	border-right: 1px solid var(--ck-line);
	background: rgba(8, 9, 11, 0.36);
}

.ck-preview-side span {
	height: 28px;
	border-radius: var(--ck-radius-sm);
	background: rgba(148, 163, 184, 0.08);
}

.ck-preview-side span.is-active {
	background: linear-gradient(90deg, rgba(94, 234, 212, 0.24), rgba(94, 234, 212, 0.06));
	border: 1px solid rgba(94, 234, 212, 0.22);
}

.ck-preview-main {
	display: grid;
	gap: 14px;
	padding: 16px;
}

.ck-preview-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.ck-preview-metrics div,
.ck-dashboard-tile,
.ck-contact-form,
.ck-landing-footer {
	border: 1px solid var(--ck-line);
	background: rgba(9, 10, 12, 0.48);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.ck-preview-metrics div {
	padding: 12px;
	border-radius: var(--ck-radius);
}

.ck-preview-metrics strong {
	display: block;
	color: var(--ck-text);
	font-size: 20px;
	line-height: 1;
}

.ck-preview-metrics small {
	display: block;
	margin-top: 5px;
	color: var(--ck-text-tertiary);
	font-size: 10px;
	text-transform: uppercase;
}

.ck-preview-chart {
	display: flex;
	align-items: end;
	gap: 8px;
	min-height: 132px;
	padding: 14px;
	border-radius: var(--ck-radius);
	border: 1px solid var(--ck-line);
	background: rgba(7, 8, 10, 0.48);
}

.ck-preview-chart span {
	flex: 1;
	min-width: 16px;
	border-radius: 8px 8px 2px 2px;
	background: linear-gradient(180deg, rgba(94, 234, 212, 0.78), rgba(20, 184, 166, 0.18));
	box-shadow: 0 0 16px rgba(45, 212, 191, 0.12);
}

.ck-preview-feed {
	display: grid;
	gap: 8px;
}

.ck-preview-feed span {
	height: 34px;
	border-radius: var(--ck-radius-sm);
	border: 1px solid var(--ck-line);
	background: linear-gradient(90deg, rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0.02));
}

.ck-landing-section {
	width: min(1180px, calc(100% - 32px));
	margin: 0 auto;
	padding: clamp(44px, 8vw, 78px) 0;
}

.ck-section-kicker {
	max-width: 760px;
	margin-bottom: 20px;
}

.ck-section-kicker h2 {
	margin: 6px 0 0;
	font-size: clamp(26px, 4vw, 42px);
	line-height: 1.08;
	font-weight: 740;
	letter-spacing: 0;
	color: var(--ck-text);
}

.ck-section-kicker p:not(.ck-card__label) {
	margin-top: 10px;
	color: var(--ck-text-secondary);
	font-size: 14px;
	line-height: 1.6;
}

.ck-about-grid,
.ck-role-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

.ck-landing-card,
.ck-feature-card,
.ck-role-card {
	border-radius: var(--ck-radius);
	border: 1px solid var(--ck-line);
	background: linear-gradient(160deg, rgba(18, 21, 28, 0.74), rgba(9, 10, 12, 0.78));
	transition:
		transform 0.26s var(--ck-ease-out),
		border-color 0.24s var(--ck-ease-micro),
		background 0.24s var(--ck-ease-micro);
}

.ck-landing-card:hover,
.ck-feature-card:hover,
.ck-role-card:hover,
.ck-landing-event:hover,
.ck-dashboard-tile:hover {
	transform: translateY(-3px);
	border-color: rgba(94, 234, 212, 0.24);
}

.ck-landing-card {
	display: grid;
	gap: 8px;
	padding: 14px;
}

.ck-landing-card i,
.ck-role-card i {
	width: 18px;
	height: 18px;
	color: var(--ck-cyan);
}

.ck-landing-card strong,
.ck-feature-card h3,
.ck-role-card h3 {
	color: var(--ck-text);
	font-size: 14px;
	font-weight: 700;
}

.ck-landing-card span,
.ck-feature-card p,
.ck-role-card p {
	color: var(--ck-text-secondary);
	font-size: 12px;
	line-height: 1.55;
}

.ck-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 12px;
}

.ck-feature-card {
	padding: 15px;
	min-height: 174px;
}

.ck-feature-card__icon {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	margin-bottom: 14px;
	border-radius: var(--ck-radius-sm);
	color: var(--ck-cyan);
	background: rgba(94, 234, 212, 0.08);
	border: 1px solid rgba(94, 234, 212, 0.14);
}

.ck-feature-card__icon i {
	width: 17px;
	height: 17px;
}

.ck-feature-card h3,
.ck-feature-card p {
	margin: 0;
}

.ck-feature-card p {
	margin-top: 8px;
}

.ck-event-showcase,
.ck-preview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
}

.ck-landing-event .ck-event-card__body {
	min-height: 230px;
}

.ck-preview-grid {
	align-items: stretch;
}

.ck-dashboard-tile {
	min-height: 224px;
	border-radius: var(--ck-radius-lg);
	padding: 16px;
	overflow: hidden;
	transition: transform 0.26s var(--ck-ease-out), border-color 0.24s var(--ck-ease-micro);
}

.ck-dashboard-tile>span,
.ck-dashboard-tile strong {
	display: block;
}

.ck-dashboard-tile>span {
	color: var(--ck-cyan);
	font-family: var(--ck-mono);
	font-size: 10px;
	text-transform: uppercase;
}

.ck-dashboard-tile strong {
	margin-top: 6px;
	color: var(--ck-text);
	font-size: 15px;
}

.ck-mini-bars {
	height: 112px;
	margin-top: 24px;
	display: flex;
	align-items: end;
	gap: 10px;
}

.ck-mini-bars i {
	flex: 1;
	border-radius: 8px 8px 2px 2px;
	background: linear-gradient(180deg, rgba(94, 234, 212, 0.7), rgba(94, 234, 212, 0.08));
}

.ck-mini-flow {
	margin-top: 26px;
	display: grid;
	gap: 10px;
}

.ck-mini-flow i {
	height: 34px;
	border-radius: var(--ck-radius-sm);
	background: linear-gradient(90deg, rgba(94, 234, 212, 0.16), rgba(148, 163, 184, 0.05));
	border: 1px solid var(--ck-line);
}

.ck-mini-terminal {
	margin-top: 24px;
	display: grid;
	gap: 8px;
	padding: 12px;
	border-radius: var(--ck-radius);
	background: rgba(4, 5, 7, 0.62);
	border: 1px solid var(--ck-line);
}

.ck-mini-terminal code {
	color: #99f6e4;
	font-family: var(--ck-mono);
	font-size: 11px;
}

/* Approval dashboard */
.ck-approval-main {
	width: min(1180px, 100%);
	max-width: 1180px;
	margin: 0 auto;
	gap: 14px;
}

.ck-approval-hero,
.ck-approval-panel {
	border-radius: 12px;
	border: 1px solid var(--ck-line);
	background: rgba(12, 14, 18, 0.82);
	box-shadow:
		0 16px 36px rgba(0, 0, 0, 0.26),
		inset 0 1px 0 rgba(255, 255, 255, 0.035);
	backdrop-filter: blur(12px) saturate(1.08);
}

.ck-approval-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
}

.ck-approval-hero h1 {
	margin: 3px 0 0;
	font-size: 20px;
	line-height: 1.2;
	font-weight: 740;
	color: var(--ck-text);
	letter-spacing: 0;
}

.ck-approval-hero p:not(.ck-card__label) {
	margin: 8px 0 0;
	color: var(--ck-text-secondary);
	font-size: 12px;
	line-height: 1.45;
}

.ck-approval-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.ck-approval-summary .ck-stat-card {
	min-height: 78px;
	padding: 12px;
	border-radius: 10px;
	background: rgba(12, 14, 18, 0.74);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.ck-approval-summary .ck-stat-card__label {
	font-size: 9px;
	letter-spacing: 0.08em;
	margin-top: 3px;
}

.ck-approval-summary .ck-stat-card__value {
	font-size: 21px;
	line-height: 1;
	margin-top: 0;
}

.ck-approval-summary .ck-stat-card__top {
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin-bottom: 0;
}

.ck-approval-summary .ck-stat-card__icon {
	width: 32px;
	height: 32px;
	border-radius: 9px;
}

.ck-approval-summary .ck-stat-card__icon i {
	width: 15px;
	height: 15px;
}

.ck-approval-panel {
	padding: 14px;
}

.ck-approval-toolbar {
	display: grid;
	grid-template-columns: minmax(300px, 1fr) 190px 150px 150px auto;
	gap: 10px;
	align-items: end;
}

.ck-approval-toolbar__actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
}

.ck-approval-toolbar__actions .ck-btn {
	min-height: 36px;
	padding: 7px 12px;
}

.ck-approval-search,
.ck-approval-field {
	display: grid;
	gap: 6px;
	color: var(--ck-text-tertiary);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ck-approval-search {
	display: grid;
	gap: 6px;
}

.ck-approval-search__input {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 12px;
	border-radius: var(--ck-radius-sm);
	border: 1px solid var(--ck-line);
	background: rgba(7, 8, 10, 0.7);
}

.ck-approval-search__input i {
	width: 15px;
	height: 15px;
	color: var(--ck-text-tertiary);
}

.ck-approval-search input,
.ck-approval-field select,
.ck-approval-field textarea {
	width: 100%;
	border: 1px solid var(--ck-line);
	border-radius: var(--ck-radius-sm);
	background: rgba(7, 8, 10, 0.72);
	color: var(--ck-text);
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	outline: none;
	transition: border-color 0.2s var(--ck-ease-micro), box-shadow 0.2s var(--ck-ease-micro);
}

.ck-approval-search input {
	border: 0;
	background: transparent;
	padding: 0;
}

.ck-approval-field select {
	min-height: 36px;
	padding: 0 30px 0 10px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}

.ck-approval-field textarea {
	min-height: 112px;
	padding: 10px;
	resize: vertical;
}

.ck-approval-field--wide {
	width: 100%;
}

.ck-approval-search__input:focus-within,
.ck-approval-field select:focus,
.ck-approval-field textarea:focus {
	border-color: rgba(94, 234, 212, 0.28);
	box-shadow: 0 0 0 3px var(--ck-glow-cyan);
}

.ck-approval-table-wrap {
	margin-top: 14px;
	border-radius: var(--ck-radius);
	border: 1px solid var(--ck-line);
	overflow: hidden;
	background: rgba(7, 8, 10, 0.45);
}

.ck-approval-table {
	width: 100%;
	min-width: 1040px;
	border-collapse: collapse;
	font-size: 12px;
	table-layout: fixed;
}

.ck-approval-table th,
.ck-approval-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--ck-line);
	text-align: left;
	vertical-align: middle;
}

.ck-approval-table th {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ck-text-tertiary);
	background: rgba(17, 19, 24, 0.72);
	height: 38px;
}

.ck-approval-table th:last-child,
.ck-approval-table td:last-child {
	text-align: right;
}

.ck-approval-table th:nth-child(1),
.ck-approval-table td:nth-child(1) {
	width: 27%;
}

.ck-approval-table th:nth-child(2),
.ck-approval-table td:nth-child(2) {
	width: 16%;
}

.ck-approval-table th:nth-child(3),
.ck-approval-table td:nth-child(3) {
	width: 15%;
}

.ck-approval-table th:nth-child(4),
.ck-approval-table td:nth-child(4) {
	width: 13%;
}

.ck-approval-table th:nth-child(5),
.ck-approval-table td:nth-child(5) {
	width: 9%;
}

.ck-approval-table th:nth-child(6),
.ck-approval-table td:nth-child(6) {
	width: 20%;
}

.ck-approval-table td:nth-child(2),
.ck-approval-table td:nth-child(3),
.ck-approval-table td:nth-child(4) {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ck-approval-table tbody tr {
	transition: background 0.18s var(--ck-ease-micro), transform 0.18s var(--ck-ease-micro);
	height: 58px;
}

.ck-approval-table tbody tr:hover {
	background: rgba(148, 163, 184, 0.045);
}

.ck-approval-table tbody tr:last-child td {
	border-bottom: 0;
}

.ck-approval-user {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.ck-approval-user strong,
.ck-approval-user span {
	display: block;
}

.ck-approval-user strong {
	color: var(--ck-text);
	font-size: 12px;
	font-weight: 700;
}

.ck-approval-user span {
	margin-top: 2px;
	color: var(--ck-text-tertiary);
	font-size: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ck-approval-avatar {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(94, 234, 212, 0.16);
	background: linear-gradient(145deg, rgba(94, 234, 212, 0.18), rgba(15, 23, 42, 0.78));
	color: #ccfbf1;
	font-size: 10px;
	font-weight: 800;
}

.ck-approval-actions {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	gap: 6px;
	align-items: center;
}

.ck-approval-actions .ck-btn {
	min-width: 0;
	min-height: 30px;
	padding: 5px 8px;
	font-size: 10px;
}

.ck-approval-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	color: var(--ck-text-tertiary);
	font-size: 11px;
}

.ck-approval-pagination__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ck-approval-panel .ck-badge,
.ck-approval-hero .ck-badge {
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 10px;
	padding: 4px 9px;
}

.ck-approval-empty {
	display: grid;
	place-items: center;
	gap: 8px;
	min-height: 180px;
	padding: 28px 16px;
	text-align: center;
	color: var(--ck-text-tertiary);
}

.ck-approval-empty i {
	width: 34px;
	height: 34px;
	color: var(--ck-cyan);
}

.ck-approval-empty strong {
	color: var(--ck-text);
	font-size: 14px;
}

.ck-approval-empty span {
	font-size: 12px;
}

.ck-approval-modal {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	place-items: center;
	padding: 18px;
	background: rgba(0, 0, 0, 0.62);
	backdrop-filter: blur(10px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s var(--ck-ease-micro);
}

.ck-approval-modal.is-open {
	opacity: 1;
	pointer-events: auto;
}

.ck-approval-modal__panel {
	width: min(680px, 100%);
	border-radius: var(--ck-radius-lg);
	border: 1px solid var(--ck-line-strong);
	background: linear-gradient(155deg, rgba(20, 24, 31, 0.98), rgba(8, 9, 12, 0.98));
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
	padding: 16px;
	transform: translateY(8px) scale(0.98);
	transition: transform 0.18s var(--ck-ease-out);
}

.ck-approval-modal.is-open .ck-approval-modal__panel {
	transform: translateY(0) scale(1);
}

.ck-approval-modal__panel--sm {
	width: min(480px, 100%);
}

.ck-approval-modal__head,
.ck-approval-modal__actions {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.ck-approval-modal__head h2 {
	margin: 2px 0 0;
	color: var(--ck-text);
	font-size: 18px;
	font-weight: 760;
}

.ck-approval-modal__actions {
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	margin-top: 14px;
}

.ck-approval-detail-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 10px;
	margin-top: 14px;
}

@media (min-width: 620px) {
	.ck-approval-detail-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ck-approval-detail-grid div {
	padding: 11px;
	border-radius: var(--ck-radius-sm);
	border: 1px solid var(--ck-line);
	background: rgba(7, 8, 10, 0.55);
}

.ck-approval-detail-grid span,
.ck-approval-detail-grid strong {
	display: block;
}

.ck-approval-detail-grid span {
	color: var(--ck-text-tertiary);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ck-approval-detail-grid strong {
	margin-top: 5px;
	color: var(--ck-text);
	font-size: 12px;
	line-height: 1.45;
}

body[data-page="events-manage"] .ck-approval-hero,
body[data-page="events-manage"] .ck-approval-panel {
	border-color: rgba(148, 163, 184, 0.12);
	background: linear-gradient(165deg, rgba(16, 20, 27, 0.9), rgba(9, 11, 15, 0.96));
	box-shadow:
		0 18px 44px rgba(0, 0, 0, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.035);
	backdrop-filter: blur(14px) saturate(1.08);
}

body[data-page="events-manage"] .ck-approval-hero {
	align-items: flex-end;
	padding: 20px 22px;
	gap: 18px;
}

body[data-page="events-manage"] .ck-approval-hero h1 {
	margin-top: 4px;
	font-size: 22px;
	letter-spacing: -0.03em;
}

body[data-page="events-manage"] .ck-approval-hero p:not(.ck-card__label) {
	max-width: 640px;
	font-size: 12.5px;
	line-height: 1.5;
}

body[data-page="events-manage"] .ck-approval-panel {
	padding: 16px;
}

body[data-page="events-manage"] .ck-approval-toolbar {
	grid-template-columns: minmax(280px, 1fr) 200px auto;
	gap: 12px;
	align-items: end;
}

body[data-page="events-manage"] .ck-approval-toolbar__actions .ck-btn {
	min-height: 40px;
	padding: 0 14px;
	border-radius: 12px;
}

body[data-page="events-manage"] .ck-approval-search,
body[data-page="events-manage"] .ck-approval-field {
	font-size: 9px;
	letter-spacing: 0.1em;
}

body[data-page="events-manage"] .ck-approval-search__input,
body[data-page="events-manage"] .ck-approval-field select {
	min-height: 40px;
	border-radius: 12px;
	background: rgba(7, 8, 11, 0.74);
	border-color: rgba(148, 163, 184, 0.14);
	transition:
		border-color 0.18s var(--ck-ease-micro),
		box-shadow 0.18s var(--ck-ease-micro),
		background 0.18s var(--ck-ease-micro);
}

body[data-page="events-manage"] .ck-approval-search__input:hover,
body[data-page="events-manage"] .ck-approval-field select:hover {
	border-color: rgba(148, 163, 184, 0.22);
	background: rgba(10, 12, 16, 0.82);
}

body[data-page="events-manage"] .ck-approval-search__input:focus-within,
body[data-page="events-manage"] .ck-approval-field select:focus {
	border-color: rgba(94, 234, 212, 0.3);
	box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
}

body[data-page="events-manage"] .ck-approval-search__input i {
	width: 14px;
	height: 14px;
	opacity: 0.8;
}

body[data-page="events-manage"] .ck-approval-search input {
	font-size: 13px;
	font-weight: 500;
}

body[data-page="events-manage"] .ck-approval-table-wrap {
	margin-top: 16px;
	border-radius: 14px;
	background: rgba(8, 10, 13, 0.55);
	border-color: rgba(148, 163, 184, 0.11);
}

body[data-page="events-manage"] .ck-approval-table {
	min-width: 960px;
	font-size: 12.5px;
}

body[data-page="events-manage"] .ck-approval-table th,
body[data-page="events-manage"] .ck-approval-table td {
	padding: 14px 14px;
	border-bottom-color: rgba(148, 163, 184, 0.1);
	vertical-align: middle;
}

body[data-page="events-manage"] .ck-approval-table th {
	height: 42px;
	background: rgba(15, 18, 23, 0.9);
}

body[data-page="events-manage"] .ck-approval-table tbody tr {
	height: 66px;
	transition:
		background 0.18s var(--ck-ease-micro),
		transform 0.18s var(--ck-ease-micro);
}

body[data-page="events-manage"] .ck-approval-table tbody tr:hover {
	background: rgba(148, 163, 184, 0.04);
}

body[data-page="events-manage"] .ck-approval-table td:first-child {
	padding-right: 18px;
}

body[data-page="events-manage"] .ck-table-muted {
	color: var(--ck-text-secondary);
	font-size: 12px;
}

body[data-page="events-manage"] .ck-table-mono {
	font-family: var(--ck-mono);
	color: var(--ck-text-tertiary);
}

body[data-page="events-manage"] .ck-event-row {
	display: flex;
	align-items: center;
	gap: 0;
	min-width: 0;
}

body[data-page="events-manage"] .ck-event-row__content {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	line-height: 1;
}

body[data-page="events-manage"] .ck-event-row__title {
	display: block;
	font-size: 13px;
	font-weight: 740;
	line-height: 1.25;
	color: var(--ck-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body[data-page="events-manage"] .ck-event-row__meta {
	display: none;
}

body[data-page="events-manage"] .ck-badge {
	padding: 4px 9px;
	font-size: 10px;
	line-height: 1;
	border-radius: 999px;
	backdrop-filter: blur(10px) saturate(1.2);
}

body[data-page="events-manage"] .ck-approval-panel .ck-badge,
body[data-page="events-manage"] .ck-approval-hero .ck-badge {
	text-transform: none;
	letter-spacing: 0.02em;
}

body[data-page="events-manage"] .ck-approval-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: nowrap;
}

body[data-page="events-manage"] .ck-mgmt-action-btn {
	width: 26px;
	height: 26px;
	min-width: 26px;
	min-height: 26px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--ck-text-secondary);
	box-shadow: none;
	transition:
		transform 0.18s var(--ck-ease-micro),
		border-color 0.18s var(--ck-ease-micro),
		background 0.18s var(--ck-ease-micro),
		color 0.18s var(--ck-ease-micro);
	cursor: pointer;
}

body[data-page="events-manage"] .ck-mgmt-action-btn:hover {
	transform: translateY(-1px);
	border-color: rgba(148, 163, 184, 0.14);
	background: rgba(16, 19, 25, 0.6);
	color: var(--ck-text);
}

body[data-page="events-manage"] .ck-mgmt-action-btn:active {
	transform: translateY(0) scale(0.96);
}

body[data-page="events-manage"] .ck-mgmt-action-btn:focus-visible {
	outline: 2px solid rgba(94, 234, 212, 0.28);
	outline-offset: 2px;
}

body[data-page="events-manage"] .ck-mgmt-action-btn i {
	width: 11px;
	height: 11px;
	stroke-width: 2;
}

body[data-page="events-manage"] .ck-mgmt-action-btn--approve {
	border-color: rgba(45, 212, 191, 0.18);
	background: rgba(13, 50, 45, 0.42);
	color: #99f6e4;
}

body[data-page="events-manage"] .ck-mgmt-action-btn--approve:hover {
	border-color: rgba(45, 212, 191, 0.32);
	background: rgba(16, 61, 55, 0.72);
	color: #d1fae5;
}

body[data-page="events-manage"] .ck-mgmt-action-btn--reject {
	border-color: rgba(248, 113, 113, 0.16);
	background: rgba(54, 18, 21, 0.5);
	color: #fca5a5;
}

body[data-page="events-manage"] .ck-mgmt-action-btn--reject:hover {
	border-color: rgba(248, 113, 113, 0.28);
	background: rgba(74, 22, 26, 0.78);
	color: #fecaca;
}

body[data-page="events-manage"] .ck-mgmt-action-btn--edit {
	border-color: transparent;
	background: transparent;
	color: var(--ck-text-secondary);
}

body[data-page="events-manage"] .ck-mgmt-action-btn--edit:hover {
	border-color: transparent;
	background: transparent;
	color: var(--ck-text);
}

body[data-page="events-manage"] .ck-mgmt-action-btn--delete {
	border-color: transparent;
	background: transparent;
	color: #fda4af;
}

body[data-page="events-manage"] .ck-mgmt-action-btn--delete:hover {
	border-color: transparent;
	background: transparent;
	color: #fee2e2;
}

body[data-page="events-manage"] .ck-event-action-modal {
	background: rgba(4, 6, 10, 0.7);
	backdrop-filter: blur(16px) saturate(1.08);
	transition: opacity 0.18s var(--ck-ease-micro);
}

body[data-page="events-manage"] .ck-event-action-modal__panel {
	width: min(440px, 100%);
	padding: 20px;
	border-radius: 18px;
	border-color: rgba(148, 163, 184, 0.14);
	background: linear-gradient(160deg, rgba(18, 22, 29, 0.98), rgba(8, 10, 13, 0.98));
	box-shadow: 0 32px 90px rgba(0, 0, 0, 0.58);
}

body[data-page="events-manage"] .ck-event-action-modal.is-open .ck-event-action-modal__panel {
	transform: translateY(0) scale(1);
}

body[data-page="events-manage"] .ck-event-action-modal__eyebrow {
	display: none;
}

body[data-page="events-manage"] .ck-event-action-modal .ck-icon-btn {
	display: none;
}

body[data-page="events-manage"] .ck-event-action-modal__panel h2 {
	margin: 4px 0 0;
	font-size: 18px;
	font-weight: 780;
	letter-spacing: -0.02em;
	color: var(--ck-text);
}

body[data-page="events-manage"] .ck-event-action-modal__desc {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ck-text-secondary);
}

body[data-page="events-manage"] .ck-event-action-modal__event-name {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid rgba(148, 163, 184, 0.12);
	background: rgba(8, 10, 13, 0.7);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ck-text);
	min-height: 20px;
	word-break: break-word;
}

body[data-page="events-manage"] .ck-event-action-modal__actions {
	margin-top: 16px;
	justify-content: flex-end;
	gap: 10px;
}

body[data-page="events-manage"] .ck-event-action-modal__actions .ck-btn {
	min-height: 38px;
	padding: 0 14px;
	border-radius: 12px;
}

body[data-page="events-manage"] .ck-event-action-modal__actions .ck-btn i {
	width: 13px;
	height: 13px;
}

body[data-page="events-manage"] .ck-mobile-card {
	border-radius: 16px;
	background: linear-gradient(165deg, rgba(22, 26, 34, 0.7), rgba(11, 13, 17, 0.86));
	border-color: rgba(148, 163, 184, 0.12);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24);
}

body[data-page="events-manage"] .ck-mobile-card__name {
	font-size: 14px;
	font-weight: 700;
}

body[data-page="events-manage"] .ck-mobile-card__sub,
body[data-page="events-manage"] .ck-mobile-card__field-value {
	color: var(--ck-text-secondary);
}

body[data-page="events-manage"] .ck-mobile-card__actions {
	gap: 10px;
}

body[data-page="events-manage"] .ck-mobile-card__actions .ck-btn {
	min-height: 40px;
	padding: 0 12px;
	border-radius: 12px;
	flex: 1 1 calc(50% - 5px);
	justify-content: center;
}

body[data-page="events-manage"] .ck-mobile-card__actions .ck-btn i {
	width: 14px;
	height: 14px;
}

@media (max-width: 1023px) {
	body[data-page="events-manage"] .ck-approval-toolbar {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}

	body[data-page="events-manage"] .ck-approval-hero {
		align-items: flex-start;
		flex-direction: column;
	}

	body[data-page="events-manage"] .ck-approval-table-wrap {
		overflow-x: auto;
	}

	body[data-page="events-manage"] .ck-approval-table {
		min-width: 900px;
	}

	body[data-page="events-manage"] .ck-event-action-modal__panel {
		width: min(480px, 100%);
	}
}

@media (max-width: 767px) {
	body[data-page="events-manage"] .ck-approval-panel {
		padding: 14px;
	}

	body[data-page="events-manage"] .ck-approval-hero {
		padding: 18px;
	}

	body[data-page="events-manage"] .ck-approval-table th,
	body[data-page="events-manage"] .ck-approval-table td {
		padding: 12px 12px;
	}

	body[data-page="events-manage"] .ck-event-row__avatar {
		width: 13px;
		height: 13px;
	}

	body[data-page="events-manage"] .ck-event-row__title {
		font-size: 12.5px;
	}

	body[data-page="events-manage"] .ck-mobile-card__actions {
		gap: 8px;
	}

	body[data-page="events-manage"] .ck-event-action-modal__actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	body[data-page="events-manage"] .ck-event-action-modal__actions .ck-btn {
		width: 100%;
	}
}

.ck-toast-stack {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 100;
	display: grid;
	gap: 8px;
	width: min(340px, calc(100vw - 32px));
}

.ck-toast {
	padding: 11px 12px;
	border-radius: var(--ck-radius-sm);
	border: 1px solid rgba(52, 211, 153, 0.28);
	background: rgba(9, 45, 34, 0.94);
	color: #d1fae5;
	font-size: 12px;
	font-weight: 650;
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42);
	animation: ck-toast-in 0.22s var(--ck-ease-out) both;
}

.ck-toast--error {
	border-color: rgba(248, 113, 113, 0.32);
	background: rgba(50, 18, 20, 0.94);
	color: #fecaca;
}

.ck-toast.is-leaving {
	animation: ck-toast-out 0.24s var(--ck-ease-micro) both;
}

.ck-skeleton-card,
.ck-skeleton-line {
	position: relative;
	overflow: hidden;
	min-height: 64px;
	background: rgba(148, 163, 184, 0.06);
}

.ck-skeleton-line {
	min-height: 18px;
	border-radius: 999px;
}

.ck-skeleton-card::after,
.ck-skeleton-line::after {
	content: '';
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
	animation: ck-skeleton 1.15s infinite;
}

@keyframes ck-toast-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ck-toast-out {
	to {
		opacity: 0;
		transform: translateY(8px);
	}
}

@keyframes ck-skeleton {
	to {
		transform: translateX(100%);
	}
}

.ck-stats-band {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	width: min(1180px, calc(100% - 32px));
	margin: 0 auto;
	border: 1px solid var(--ck-line);
	border-radius: var(--ck-radius-lg);
	overflow: hidden;
	background: var(--ck-line);
}

@media (min-width: 780px) {
	.ck-stats-band {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ck-stat-block {
	padding: 22px 16px;
	background: rgba(11, 13, 17, 0.86);
}

.ck-stat-block strong,
.ck-stat-block span {
	display: block;
	text-align: center;
}

.ck-stat-block strong {
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1;
	color: var(--ck-text);
	font-variant-numeric: tabular-nums;
}

.ck-stat-block span {
	margin-top: 8px;
	color: var(--ck-text-tertiary);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ck-role-card {
	padding: 16px;
	min-height: 158px;
}

.ck-role-card h3,
.ck-role-card p {
	margin: 10px 0 0;
}

.ck-contact-section {
	padding-bottom: 36px;
}

.ck-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

@media (min-width: 900px) {
	.ck-contact-grid {
		grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.65fr);
	}
}

.ck-contact-form,
.ck-landing-footer {
	border-radius: var(--ck-radius-lg);
	padding: 16px;
}

.ck-contact-form {
	display: grid;
	gap: 12px;
}

.ck-contact-form label {
	display: grid;
	gap: 6px;
	color: var(--ck-text-tertiary);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ck-contact-form input,
.ck-contact-form textarea {
	width: 100%;
	border: 1px solid var(--ck-line);
	border-radius: var(--ck-radius-sm);
	background: rgba(7, 8, 10, 0.74);
	color: var(--ck-text);
	font: inherit;
	font-size: 13px;
	padding: 10px 11px;
	outline: none;
	transition: border-color 0.2s var(--ck-ease-micro), box-shadow 0.2s var(--ck-ease-micro);
}

.ck-contact-form input:focus,
.ck-contact-form textarea:focus {
	border-color: rgba(94, 234, 212, 0.32);
	box-shadow: 0 0 0 3px var(--ck-glow-cyan);
}

.ck-landing-footer {
	display: grid;
	align-content: start;
	gap: 18px;
}

.ck-footer-links,
.ck-social-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ck-footer-links a,
.ck-social-row a {
	color: var(--ck-text-secondary);
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
}

.ck-footer-links a:hover,
.ck-social-row a:hover {
	color: var(--ck-cyan);
}

.ck-social-row a {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: var(--ck-radius-sm);
	border: 1px solid var(--ck-line);
	background: rgba(8, 9, 11, 0.48);
}

.ck-social-row i {
	width: 15px;
	height: 15px;
}

.ck-landing-footer p {
	margin: 0;
	color: var(--ck-text-tertiary);
	font-size: 12px;
	line-height: 1.6;
}

[data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 0.55s var(--ck-ease-out),
		transform 0.55s var(--ck-ease-out);
}

[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

@keyframes ck-homepage-reveal {
	from {
		opacity: 0;
		filter: blur(8px);
	}

	to {
		opacity: 1;
		filter: blur(0);
	}
}

@keyframes ck-warning-aura {
	from {
		transform: scale(0.92);
		opacity: 0.62;
	}

	to {
		transform: scale(1.08);
		opacity: 0.94;
	}
}

@keyframes ck-warning-splash-state {
	0% {
		background:
			radial-gradient(ellipse at 50% 54%, rgba(255, 42, 42, 0.16), transparent 28%),
			radial-gradient(ellipse at 50% 100%, rgba(255, 42, 42, 0.1), transparent 42%),
			linear-gradient(180deg, #030101 0%, #070404 48%, #000 100%);
	}

	38% {
		background:
			radial-gradient(ellipse at 50% 54%, rgba(255, 112, 31, 0.17), transparent 28%),
			radial-gradient(ellipse at 50% 100%, rgba(255, 112, 31, 0.1), transparent 42%),
			linear-gradient(180deg, #030201 0%, #070504 48%, #000 100%);
	}

	68% {
		background:
			radial-gradient(ellipse at 50% 54%, rgba(253, 194, 33, 0.15), transparent 28%),
			radial-gradient(ellipse at 50% 100%, rgba(253, 194, 33, 0.1), transparent 42%),
			linear-gradient(180deg, #030301 0%, #060704 48%, #000 100%);
	}

	100% {
		background:
			radial-gradient(ellipse at 50% 54%, rgba(0, 255, 127, 0.16), transparent 28%),
			radial-gradient(ellipse at 50% 100%, rgba(0, 255, 127, 0.12), transparent 42%),
			linear-gradient(180deg, #010302 0%, #050704 48%, #000 100%);
	}
}

@keyframes ck-warning-grid-state {
	0% {
		background-image:
			linear-gradient(rgba(255, 42, 42, 0.052) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 42, 42, 0.052) 1px, transparent 1px);
	}

	38% {
		background-image:
			linear-gradient(rgba(255, 112, 31, 0.052) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 112, 31, 0.052) 1px, transparent 1px);
	}

	68% {
		background-image:
			linear-gradient(rgba(253, 194, 33, 0.048) 1px, transparent 1px),
			linear-gradient(90deg, rgba(253, 194, 33, 0.048) 1px, transparent 1px);
	}

	100% {
		background-image:
			linear-gradient(rgba(0, 255, 127, 0.052) 1px, transparent 1px),
			linear-gradient(90deg, rgba(0, 255, 127, 0.052) 1px, transparent 1px);
	}
}

@keyframes ck-warning-aura-state {
	0% {
		background: radial-gradient(ellipse at center, rgba(255, 42, 42, 0.36), rgba(255, 42, 42, 0.12) 42%, transparent 72%);
	}

	38% {
		background: radial-gradient(ellipse at center, rgba(255, 112, 31, 0.36), rgba(255, 112, 31, 0.12) 42%, transparent 72%);
	}

	68% {
		background: radial-gradient(ellipse at center, rgba(253, 194, 33, 0.34), rgba(253, 194, 33, 0.11) 42%, transparent 72%);
	}

	100% {
		background: radial-gradient(ellipse at center, rgba(0, 255, 127, 0.36), rgba(0, 255, 127, 0.12) 42%, transparent 72%);
	}
}

@keyframes ck-warning-graphic-state {
	0% {
		color: #ff2a2a;
		filter:
			drop-shadow(0 0 10px rgba(255, 42, 42, 0.42)) drop-shadow(0 0 28px rgba(255, 42, 42, 0.18));
	}

	38% {
		color: #ff701f;
		filter:
			drop-shadow(0 0 10px rgba(255, 112, 31, 0.42)) drop-shadow(0 0 28px rgba(255, 112, 31, 0.18));
	}

	68% {
		color: #fdc221;
		filter:
			drop-shadow(0 0 10px rgba(253, 194, 33, 0.38)) drop-shadow(0 0 28px rgba(253, 194, 33, 0.16));
	}

	100% {
		color: #00ff7f;
		filter:
			drop-shadow(0 0 10px rgba(0, 255, 127, 0.38)) drop-shadow(0 0 28px rgba(0, 255, 127, 0.16));
	}
}

@keyframes wg-symbol-state {
	0% {
		fill: #ff2a2a;
	}

	38% {
		fill: #ff701f;
	}

	68% {
		fill: #fdc221;
	}

	100% {
		fill: #00ff7f;
	}
}

@keyframes wg-stroke-state {
	0% {
		stroke: #ff2a2a;
	}

	38% {
		stroke: #ff701f;
	}

	68% {
		stroke: #fdc221;
	}

	100% {
		stroke: #00ff7f;
	}
}

@keyframes wg-path-line-draw {
	from {
		stroke-dashoffset: 1;
		opacity: 0.3;
	}

	to {
		stroke-dashoffset: 0;
		opacity: 0.3;
	}
}

@keyframes wg-triangle-draw {
	0% {
		stroke-dashoffset: 1;
		fill-opacity: 0;
		opacity: 0;
	}

	38% {
		opacity: 1;
	}

	74% {
		fill-opacity: 0;
	}

	100% {
		stroke-dashoffset: 0;
		fill-opacity: 1;
		opacity: 1;
	}
}

@keyframes wg-stripe-expand {
	from {
		opacity: 0;
		scale: 0 1;
	}

	to {
		opacity: 1;
		scale: 1 1;
	}
}

@keyframes wg-exclamation-pop {
	0% {
		opacity: 0;
		scale: 0;
	}

	60% {
		opacity: 1;
		scale: 1.3;
	}

	100% {
		opacity: 1;
		scale: 1;
	}
}

@keyframes wg-element-in {
	from {
		opacity: 0;
		scale: 0.5;
		translate: 0 10px;
	}

	to {
		opacity: 1;
		scale: 1;
		translate: 0 0;
	}
}

@keyframes rise {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	100% {
		transform: translateY(-10%);
		opacity: 0;
	}
}

@keyframes fade {

	0%,
	100% {
		opacity: 0;
	}

	5%,
	80% {
		opacity: 0.7;
	}
}

@keyframes floorGlow {

	0%,
	100% {
		transform: translateX(-50%) scale(0.9);
		opacity: 0.7;
	}

	50% {
		transform: translateX(-50%) scale(1.1);
		opacity: 1;
	}
}

@keyframes mainGlow {
	from {
		opacity: 0.6;
		filter: blur(25px);
	}

	to {
		opacity: 0.8;
		filter: blur(15px);
	}
}

@keyframes moveGrid {
	from {
		background-position: 0 0;
	}

	to {
		background-position: -80px -40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		transition-duration: 0.01ms;
	}
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE / TABLET ONLY — max-width: 1023px
   Desktop (lg+) is NEVER affected by rules below.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

	/* ─── Sticky mobile header ─── */
	.ck-navbar {
		position: sticky;
		top: 0;
		z-index: 50;
	}

	.ck-navbar__inner {
		padding: 6px 12px;
	}

	/* ─── Hide Ctrl+K hint on mobile ─── */
	.ck-search__hint {
		display: none;
	}

	/* ─── Compact search on mobile ─── */
	.ck-search {
		max-width: 180px;
	}

	.ck-search input::placeholder {
		font-size: 11px;
	}

	/* ═══════════════════════════════════════════════════════════════════════
	   MOBILE SIDEBAR: Pure overlay drawer — completely off-screen when closed.
	   No icons, no collapsed state, no reserved width. Full-screen content.
	   ═══════════════════════════════════════════════════════════════════════ */

	/* Force sidebar completely off-screen */
	.ck-sidebar,
	html .ck-sidebar,
	html.ck-sidebar-collapsed .ck-sidebar {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		bottom: 0 !important;
		right: auto !important;
		width: 300px !important;
		max-width: 85vw !important;
		height: 100vh !important;
		height: 100dvh !important;
		transform: translate3d(-100%, 0, 0) !important;
		transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1) !important;
		will-change: transform !important;
		z-index: 60 !important;
		visibility: visible !important;
		opacity: 1 !important;
		inset: auto !important;
		inset: 0 auto 0 0 !important;
	}

	/* Slide in when open */
	.ck-sidebar.is-open,
	html .ck-sidebar.is-open,
	html.ck-sidebar-collapsed .ck-sidebar.is-open {
		transform: translate3d(0, 0, 0) !important;
	}

	/* Reset all collapsed-state overrides on mobile — sidebar always shows full content */
	html.ck-sidebar-collapsed .ck-sidebar__brand-text {
		opacity: 1 !important;
		max-width: none !important;
		display: flex !important;
		pointer-events: auto !important;
	}

	html.ck-sidebar-collapsed .ck-section-toggle {
		display: flex !important;
	}

	html.ck-sidebar-collapsed .ck-nav-link span {
		opacity: 1 !important;
		max-width: none !important;
		display: inline !important;
	}

	html.ck-sidebar-collapsed .ck-nav-link {
		justify-content: flex-start !important;
		gap: 7px !important;
		padding: 5px 8px !important;
		min-height: 30px !important;
	}

	html.ck-sidebar-collapsed .ck-nav[data-collapsible-panel] {
		max-height: none !important;
		opacity: 1 !important;
	}

	html.ck-sidebar-collapsed .ck-sidebar__brand {
		justify-content: flex-start !important;
		padding: 5px 7px 6px !important;
		flex: 1 !important;
		width: auto !important;
	}

	html.ck-sidebar-collapsed .ck-sidebar__brand-row {
		flex-direction: row !important;
		gap: 5px !important;
	}

	html.ck-sidebar-collapsed .ck-sidebar__pin {
		display: none !important;
	}

	html.ck-sidebar-collapsed .ck-env-badge {
		justify-content: flex-start !important;
		width: auto !important;
		gap: 4px !important;
	}

	html.ck-sidebar-collapsed .ck-env-badge span:first-child {
		display: inline !important;
	}

	html.ck-sidebar-collapsed .ck-sidebar__rail {
		opacity: 0.85 !important;
	}

	html.ck-sidebar-collapsed .ck-nav-link.is-active::before {
		left: 0 !important;
		top: 6px !important;
		bottom: 6px !important;
		width: 1.5px !important;
		height: auto !important;
		transform: none !important;
		border-radius: 0 1px 1px 0 !important;
	}

	/* Tooltip disabled on mobile — not needed for full-width sidebar */
	html.ck-sidebar-collapsed .ck-nav-link[data-tooltip]:hover::after,
	html.ck-sidebar-collapsed .ck-nav-link[data-tooltip]:hover::before {
		display: none !important;
	}

	.ck-sidebar__inner {
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* ─── Mobile overlay/backdrop ─── */
	.ck-overlay,
	html .ck-overlay {
		display: block !important;
		position: fixed !important;
		inset: 0 !important;
		z-index: 55 !important;
		background: rgba(0, 0, 0, 0.55) !important;
		backdrop-filter: blur(3px) !important;
		-webkit-backdrop-filter: blur(3px) !important;
		opacity: 0 !important;
		pointer-events: none !important;
		transition: opacity 280ms cubic-bezier(0.32, 0.72, 0, 1) !important;
		will-change: opacity !important;
	}

	.ck-overlay.is-active,
	html .ck-overlay.is-active {
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	/* ─── Content: full width, zero sidebar space ─── */
	.ck-content,
	html .ck-content,
	html.ck-sidebar-collapsed .ck-content {
		margin-left: 0 !important;
		padding-left: 16px !important;
		transition: none !important;
		width: 100% !important;
	}

	/* ─── Content padding — account for bottom nav ─── */
	.ck-content,
	.ck-main {
		padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 24px) !important;
	}

	/* ─── Bottom Navigation ─── */
	.ck-bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 45;
		display: flex;
		align-items: stretch;
		justify-content: space-around;
		height: calc(60px + env(safe-area-inset-bottom, 0px));
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: rgba(9, 10, 12, 0.94);
		backdrop-filter: blur(16px) saturate(1.3);
		border-top: 1px solid var(--ck-line);
		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
		transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
		transform: translateY(0);
		opacity: 1;
		will-change: transform, opacity;
	}

	.ck-bottom-nav.is-hidden {
		transform: translateY(calc(100% + 24px));
		opacity: 0;
		pointer-events: none;
	}

	.ck-bottom-nav__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		gap: 3px;
		padding: 6px 4px;
		color: var(--ck-text-tertiary);
		text-decoration: none;
		font-size: 10px;
		font-weight: 500;
		letter-spacing: 0.01em;
		transition: color 0.2s var(--ck-ease-micro);
		-webkit-tap-highlight-color: transparent;
		position: relative;
	}

	.ck-bottom-nav__item i,
	.ck-bottom-nav__item svg {
		width: 20px;
		height: 20px;
		stroke-width: 1.75;
	}

	.ck-bottom-nav__item.is-active {
		color: var(--nav-active-color);
	}

	.ck-bottom-nav__item.is-active::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 24px;
		height: 2px;
		border-radius: 0 0 2px 2px;
		background: var(--nav-active-indicator);
		box-shadow: 0 0 6px var(--nav-active-glow);
	}

	.ck-bottom-nav__item:active {
		color: var(--nav-active-color);
		transform: scale(0.92);
	}

	.ck-bottom-nav__badge {
		position: absolute;
		top: 4px;
		right: 50%;
		transform: translateX(calc(50% + 8px));
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 999px;
		background: var(--ck-danger);
		color: #fff;
		font-size: 9px;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}

	.ck-bottom-nav__badge:empty,
	.ck-bottom-nav__badge.hidden {
		display: none;
	}
}

/* Hide bottom nav on desktop */
@media (min-width: 1024px) {
	.ck-bottom-nav {
		display: none !important;
	}
}

/* ─── Mobile: Dashboard hero compaction ─── */
@media (max-width: 1023px) {
	.ck-hero {
		padding: 14px 14px;
	}

	.ck-hero__desc {
		display: none;
	}

	.ck-hero__title {
		font-size: 1rem;
	}

	.ck-hero__actions {
		margin-top: 10px !important;
	}

	.ck-hero__actions .ck-btn {
		font-size: 11px;
		padding: 6px 10px;
	}

	.ck-hero__meta {
		display: none;
	}

	.ck-hero__eyebrow {
		margin-bottom: 3px;
	}
}

/* ─── Mobile: table/card toggle ─── */
@media (max-width: 1023px) {
	.ck-mobile-hidden {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.ck-desktop-hidden {
		display: none !important;
	}

	.ck-lb-mobile-list,
	.ck-lb-mobile-top3 {
		display: none !important;
	}
}

/* ─── Mobile: approval/event cards ─── */
@media (max-width: 1023px) {
	.ck-mobile-cards {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.ck-mobile-card {
		border: 1px solid var(--ck-line);
		border-radius: var(--ck-radius);
		padding: 14px;
		background: linear-gradient(145deg, rgba(22, 26, 34, 0.6), rgba(13, 15, 19, 0.7));
	}

	.ck-mobile-card__header {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 10px;
	}

	.ck-mobile-card__avatar {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		display: grid;
		place-items: center;
		font-size: 11px;
		font-weight: 700;
		color: var(--ck-teal);
		background: var(--ck-cyan-muted);
		flex-shrink: 0;
	}

	.ck-mobile-card__info {
		min-width: 0;
	}

	.ck-mobile-card__name {
		font-size: 13px;
		font-weight: 650;
		color: var(--ck-text);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ck-mobile-card__sub {
		font-size: 11px;
		color: var(--ck-text-secondary);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ck-mobile-card__fields {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px 12px;
		margin-bottom: 12px;
	}

	.ck-mobile-card__field {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.ck-mobile-card__field-label {
		font-size: 9px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--ck-text-tertiary);
	}

	.ck-mobile-card__field-value {
		font-size: 12px;
		color: var(--ck-text);
	}

	.ck-mobile-card__actions {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}

	.ck-mobile-card__actions .ck-btn {
		flex: 1;
		justify-content: center;
		min-height: 34px;
		font-size: 11px;
	}

	/* Toolbar stacking on mobile */
	.ck-approval-toolbar {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}

	/* Approval stats 2x2 grid on mobile */
	.ck-approval-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Approval hero stacking */
	.ck-approval-hero {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px !important;
	}

	/* ─── Certificates: full-width stacked actions ─── */
	[data-page="certificates"] .ck-hero__actions {
		flex-direction: column;
		width: 100%;
	}

	[data-page="certificates"] .ck-hero__actions .ck-btn {
		width: 100%;
		justify-content: center;
	}

	/* ─── Leaderboard mobile cards ─── */
	.ck-lb-hero {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px !important;
	}

	.ck-lb-table-wrap {
		display: none !important;
	}

	.ck-lb-mobile-list {
		display: flex !important;
		flex-direction: column;
		gap: 8px;
	}

	.ck-lb-mobile-top3 {
		display: grid !important;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 8px;
		margin-bottom: 8px;
	}

	.ck-lb-mobile-podium {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 12px 6px;
		border-radius: var(--ck-radius);
		border: 1px solid var(--ck-line);
		background: rgba(12, 14, 18, 0.7);
	}

	.ck-lb-mobile-podium.is-gold {
		border-color: rgba(245, 158, 11, 0.3);
		background: linear-gradient(165deg, rgba(245, 158, 11, 0.08), rgba(12, 14, 18, 0.8));
	}

	.ck-lb-mobile-podium.is-silver {
		border-color: rgba(203, 213, 225, 0.2);
	}

	.ck-lb-mobile-podium.is-bronze {
		border-color: rgba(180, 83, 9, 0.25);
	}

	.ck-lb-mobile-podium__rank {
		font-size: 18px;
		font-weight: 800;
		margin-bottom: 6px;
	}

	.ck-lb-mobile-podium__avatar {
		width: 40px;
		height: 40px;
		border-radius: 10px;
		display: grid;
		place-items: center;
		font-size: 12px;
		font-weight: 700;
		color: var(--ck-base);
		background: linear-gradient(145deg, #e5e7eb, #94a3b8);
		margin-bottom: 6px;
		overflow: hidden;
	}

	.ck-lb-mobile-podium__avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.ck-lb-mobile-podium__name {
		font-size: 11px;
		font-weight: 600;
		color: var(--ck-text);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	.ck-lb-mobile-podium__points {
		font-size: 13px;
		font-weight: 700;
		color: var(--ck-cyan);
		font-family: var(--ck-mono);
		margin-top: 4px;
	}

	.ck-lb-mobile-podium__reactions {
		display: flex;
		gap: 4px;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		margin-top: 8px;
		padding-top: 8px;
		border-top: 1px solid var(--ck-line);
	}

	.ck-lb-mobile-podium__reactions .ck-lb-rxn-btn {
		pointer-events: auto !important;
		touch-action: manipulation;
		-webkit-tap-highlight-color: rgba(94, 234, 212, 0.2);
		position: relative;
		z-index: 10;
	}

	.ck-lb-mobile-row {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px;
		padding: 10px 12px;
		border-radius: var(--ck-radius);
		border: 1px solid var(--ck-line);
		background: rgba(12, 14, 18, 0.55);
	}

	.ck-lb-mobile-row__rank {
		font-size: 12px;
		font-weight: 700;
		color: var(--ck-text-tertiary);
		min-width: 24px;
		text-align: center;
	}

	.ck-lb-mobile-row__avatar {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		display: grid;
		place-items: center;
		font-size: 10px;
		font-weight: 700;
		color: var(--ck-base);
		background: linear-gradient(145deg, #e5e7eb, #94a3b8);
		flex-shrink: 0;
		overflow: hidden;
	}

	.ck-lb-mobile-row__avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.ck-lb-mobile-row__info {
		flex: 1;
		min-width: 0;
	}

	.ck-lb-mobile-row__name {
		font-size: 12px;
		font-weight: 600;
		color: var(--ck-text);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ck-lb-mobile-row__role {
		font-size: 10px;
		color: var(--ck-text-tertiary);
	}

	.ck-lb-mobile-row__points {
		font-size: 14px;
		font-weight: 700;
		color: var(--ck-cyan);
		font-family: var(--ck-mono);
		flex-shrink: 0;
	}

	.ck-lb-mobile-row__reactions {
		display: flex;
		gap: 4px;
		flex-wrap: wrap;
		width: 100%;
		margin-top: 6px;
	}

	.ck-lb-mobile-row__reactions .ck-lb-rxn-btn {
		pointer-events: auto !important;
		touch-action: manipulation;
		-webkit-tap-highlight-color: rgba(94, 234, 212, 0.2);
		position: relative;
		z-index: 10;
	}

	/* Ensure mobile rows allow interactions */
	.ck-lb-mobile-row {
		pointer-events: auto !important;
		overflow: visible !important;
	}

	/* ─── Notifications: feed-style cards ─── */
	.ck-notif-feed .ck-list-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding: 12px;
	}

	.ck-notif-feed .ck-list-item__aside {
		align-self: flex-end;
	}

	/* ─── Attendance ops: compact mobile KPIs ─── */
	.ck-att-kpi-card .ck-stat-card__foot {
		display: none;
	}

	/* ─── Analytics: mobile swipeable charts ─── */
	.ck-analytics-scroll {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 8px;
	}

	.ck-analytics-scroll > .ck-card {
		flex: 0 0 85vw;
		scroll-snap-align: start;
		min-width: 0;
	}

	.ck-analytics-scroll::-webkit-scrollbar {
		height: 4px;
	}

	.ck-analytics-scroll::-webkit-scrollbar-track {
		background: transparent;
	}

	.ck-analytics-scroll::-webkit-scrollbar-thumb {
		background: rgba(148, 163, 184, 0.2);
		border-radius: 999px;
	}

	/* Leaderboard select full-width on mobile */
	.ck-lb-select {
		min-width: 0 !important;
		width: 100%;
	}

	/* ─── QA Fixes ─── */

	/* Fix: Attendance coordinator event selector must remain visible on mobile.
	   Override the global .ck-hero__meta hide for this page only. */
	[data-page="attendance-ops"] .ck-hero__meta {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		width: 100%;
	}

	[data-page="attendance-ops"] .ck-hero__meta .ck-events-select-label {
		width: 100%;
	}

	[data-page="attendance-ops"] .ck-hero__meta select {
		min-width: 0 !important;
		width: 100% !important;
	}

	/* Fix: Event grid min-width overflow on narrow screens */
	.ck-events-grid {
		grid-template-columns: 1fr !important;
	}

	/* Fix: Event/attendance selects should not overflow */
	.ck-events-select {
		min-width: 0 !important;
		max-width: 100%;
	}

	/* Fix: KPI drill search input should be fluid */
	#kpi-drill-search {
		width: 100% !important;
		max-width: 100%;
	}

	/* Fix: KPI overlay toolbar should stack on mobile */
	.ck-kpi-overlay__toolbar {
		flex-wrap: wrap;
		gap: 8px;
	}

	/* Fix: Event Edit Page - grid overflow on mobile */
	.ck-approval-panel > form > div > div[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
	}

	/* Target all nested grid containers in forms */
	body[data-page="events-manage"] form div[style*="display:grid"] div[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
	}

	/* Prevent inputs from overflowing */
	body[data-page="events-manage"] .ck-approval-field input,
	body[data-page="events-manage"] .ck-approval-field select,
	body[data-page="events-manage"] .ck-approval-field textarea {
		max-width: 100%;
		min-width: 0;
	}

	/* Prevent datetime-local inputs from causing overflow */
	body[data-page="events-manage"] input[type="datetime-local"] {
		font-size: 14px;
	}

	/* Fix: Mobile event registration CTA */
	.ck-mobile-register-cta {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 14px;
		border-radius: var(--ck-radius);
		border: 1px solid var(--ck-line-accent);
		background: rgba(45, 212, 191, 0.04);
	}
}

/* ── Cyber Globe Container ── */
/* Premium polish: profile dropdown, event cards, sidebar icons */
.ck-icon-btn,
.ck-hamburger-menu {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 0 !important;
}

.ck-icon-btn i,
.ck-icon-btn svg,
.ck-hamburger-menu i,
.ck-hamburger-menu svg {
	display: block;
	width: 13px;
	height: 13px;
	stroke-width: 1.65;
	flex-shrink: 0;
}

.ck-hamburger-menu {
	border-radius: 10px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
		rgba(12, 14, 18, 0.88);
	border-color: rgba(148, 163, 184, 0.12);
}

.ck-hamburger-menu:hover {
	transform: translateY(-1px);
	border-color: rgba(203, 213, 225, 0.18);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.004)),
		rgba(17, 20, 26, 0.96);
}

.ck-sidebar__inner {
	gap: 7px !important;
}

.ck-sidebar__brand {
	border-radius: 12px;
	border-color: rgba(148, 163, 184, 0.1);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0)),
		rgba(10, 12, 16, 0.78);
}

.ck-section-toggle {
	padding-inline: 8px !important;
}

.ck-section-label {
	font-size: 9.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.13em !important;
	color: rgba(203, 213, 225, 0.72) !important;
	opacity: 1 !important;
}

.ck-nav {
	gap: 4px;
}

.ck-nav-link {
	min-height: 40px !important;
	gap: 12px !important;
	padding: 9px 11px !important;
	border-radius: 10px !important;
	color: rgba(203, 213, 225, 0.7) !important;
	font-size: 15px !important;
	font-weight: 450 !important;
	line-height: 1.2 !important;
}

.ck-nav-link i,
.ck-nav-link svg {
	width: 18px !important;
	height: 18px !important;
	opacity: 0.7 !important;
	stroke-width: 1.45 !important;
}

.ck-nav-link:hover {
	background: rgba(148, 163, 184, 0.055);
	border-color: rgba(148, 163, 184, 0.11);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.ck-nav-link.is-active {
	background: rgba(229, 57, 53, 0.075);
	border-color: rgba(229, 57, 53, 0.16);
	color: rgba(248, 250, 252, 0.94) !important;
}

.ck-nav-link.is-active::before {
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: rgba(229, 57, 53, 0.85);
}

html.ck-sidebar-collapsed .ck-nav-link {
	min-height: 40px !important;
	padding: 8px 10px !important;
	justify-content: center !important;
	align-items: center !important;
	overflow: visible !important;
}

html.ck-sidebar-collapsed .ck-nav-link i,
html.ck-sidebar-collapsed .ck-nav-link svg {
	width: 20px !important;
	height: 20px !important;
	flex-shrink: 0 !important;
}

.ck-profile {
	gap: 10px;
	padding: 6px 12px 6px 7px;
	border-radius: 13px;
	border-color: rgba(148, 163, 184, 0.11);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
		rgba(12, 14, 18, 0.82);
}

.ck-profile:hover {
	border-color: rgba(203, 213, 225, 0.17);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.004)),
		rgba(17, 20, 26, 0.94);
	box-shadow:
		0 10px 24px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ck-profile__avatar {
	width: 31px;
	height: 31px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.42),
		inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.ck-profile__avatar img {
	border-radius: 9px !important;
}

.ck-profile__meta .ck-profile__name {
	font-size: 12px;
	font-weight: 560;
	line-height: 1.25;
}

.ck-profile__meta .ck-profile__role {
	font-size: 10px;
	color: rgba(148, 163, 184, 0.78);
	line-height: 1.25;
}

.ck-profile > i,
.ck-profile > svg {
	width: 12px !important;
	height: 12px !important;
	color: rgba(148, 163, 184, 0.68);
}

.ck-dropdown[data-dropdown-panel="profile"] {
	min-width: 286px;
	border-radius: 16px;
	border-color: rgba(148, 163, 184, 0.16);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
		linear-gradient(165deg, rgba(18, 21, 28, 0.98), rgba(9, 11, 15, 0.98));
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.28),
		0 18px 44px rgba(0, 0, 0, 0.42),
		inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__header {
	padding: 14px 15px 12px;
	gap: 12px;
	border-bottom-color: rgba(148, 163, 184, 0.09);
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__header p {
	font-size: 11.5px;
	font-weight: 560;
	color: rgba(248, 250, 252, 0.92);
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__header span {
	font-size: 10px;
	font-family: var(--ck-font);
	color: rgba(148, 163, 184, 0.78);
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__content {
	gap: 5px;
	padding: 8px;
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__item {
	border-radius: 11px;
	padding: 9px 10px;
	transition:
		background 0.22s var(--ck-ease-micro),
		color 0.22s var(--ck-ease-micro),
		transform 0.2s var(--ck-ease-micro);
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__item:hover {
	background: rgba(148, 163, 184, 0.065);
	transform: translateY(-1px);
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__item.is-row {
	gap: 9px;
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__item.is-row i,
.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__item.is-row svg {
	width: 13px;
	height: 13px;
	color: rgba(148, 163, 184, 0.72);
	stroke-width: 1.7;
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__item.is-row span {
	font-size: 11.5px;
	font-weight: 500;
	color: rgba(226, 232, 240, 0.9);
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__sep {
	margin: 5px 10px;
	background: rgba(148, 163, 184, 0.09);
}

body[data-page="events"] .ck-event-card {
	border-radius: 16px;
	border-color: rgba(148, 163, 184, 0.095);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0)),
		linear-gradient(165deg, rgba(18, 21, 28, 0.58), rgba(9, 11, 15, 0.96));
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.024) inset,
		0 12px 30px rgba(0, 0, 0, 0.24);
	transition:
		transform 0.24s var(--ck-ease-out),
		border-color 0.22s var(--ck-ease-micro),
		box-shadow 0.24s var(--ck-ease-out),
		background 0.22s var(--ck-ease-micro);
}

body[data-page="events"] .ck-event-card:hover {
	transform: translateY(-2px);
	border-color: rgba(203, 213, 225, 0.16);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.034) inset,
		0 18px 40px rgba(0, 0, 0, 0.3);
}

body[data-page="events"] .ck-event-card::before {
	width: 2px;
	opacity: 0.72;
}

body[data-page="events"] .ck-event-card:hover::before {
	width: 2px;
	opacity: 0.9;
}

body[data-page="events"] .ck-event-card__media {
	border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

body[data-page="events"] .ck-event-card__media .ck-event-badge,
body[data-page="events"] .ck-event-card__media span[class*="ck-event-badge"] {
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 650;
	letter-spacing: 0.055em;
	filter: saturate(0.82);
}

body[data-page="events"] .ck-event-card__body {
	padding: 18px 19px 19px;
	gap: 11px;
}

body[data-page="events"] .ck-event-card__category {
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 650;
	letter-spacing: 0.055em;
	filter: saturate(0.78);
}

body[data-page="events"] .ck-event-card__title {
	font-size: 14.5px;
	font-weight: 560;
	letter-spacing: 0;
	line-height: 1.38;
	color: rgba(248, 250, 252, 0.94);
}

body[data-page="events"] .ck-event-card__meta {
	gap: 8px 13px;
	font-size: 10px;
	font-weight: 450;
	color: rgba(148, 163, 184, 0.8);
}

body[data-page="events"] .ck-event-card__meta span {
	gap: 5px;
}

body[data-page="events"] .ck-event-card__meta i,
body[data-page="events"] .ck-event-card__meta svg,
body[data-page="events"] .ck-event-fact i,
body[data-page="events"] .ck-event-fact svg {
	width: 11px;
	height: 11px;
	opacity: 0.68;
	stroke-width: 1.7;
}

body[data-page="events"] .ck-event-card__excerpt {
	font-size: 11.5px;
	line-height: 1.58;
	color: rgba(203, 213, 225, 0.68);
}

body[data-page="events"] .ck-event-card__facts {
	gap: 7px;
	padding: 5px 0 3px;
}

body[data-page="events"] .ck-event-fact {
	gap: 6px;
	font-size: 11px;
	font-weight: 450;
	line-height: 1.45;
	color: rgba(203, 213, 225, 0.74);
}

body[data-page="events"] .ck-event-card__tags {
	gap: 5px;
	padding-top: 1px;
}

body[data-page="events"] .ck-event-tag {
	padding: 3px 7px;
	border-radius: 999px;
	font-size: 9.5px;
	font-weight: 550;
	color: rgba(203, 213, 225, 0.72);
	background: rgba(15, 17, 21, 0.46);
	border-color: rgba(148, 163, 184, 0.1);
}

body[data-page="events"] .ck-event-card__actions {
	gap: 8px;
	padding-top: 8px;
}

body[data-page="events"] .ck-event-card__actions .ck-btn {
	min-height: 31px;
	border-radius: 10px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0;
}

body[data-page="events"] .ck-event-card__actions .ck-btn i,
body[data-page="events"] .ck-event-card__actions .ck-btn svg {
	width: 11px;
	height: 11px;
}

body[data-page="events"] .ck-event-card__actions .ck-btn-primary {
	min-width: 126px;
	box-shadow:
		0 3px 10px rgba(var(--brand-primary-rgb), 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

body[data-page="events"] .ck-event-card__actions .ck-btn-primary:hover {
	box-shadow:
		0 6px 16px rgba(var(--brand-primary-rgb), 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.075);
}

@media (max-width: 640px) {
	body[data-page="events"] .ck-event-card__body {
		padding: 16px;
		gap: 10px;
	}

	body[data-page="events"] .ck-event-card__title {
		font-size: 14px;
	}

	body[data-page="events"] .ck-event-card__actions .ck-btn-primary,
	body[data-page="events"] .ck-event-card__actions .ck-btn-outline {
		min-height: 39px;
	}
}

/* Compact dashboard headers: remove oversized decorative banner treatment */
.ck-main {
	gap: 1.15rem;
}

.ck-main > .ck-hero,
.ck-main > .ck-events-hero,
.ck-main > .ck-approval-hero {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible !important;
}

.ck-main > .ck-hero:hover,
.ck-main > .ck-events-hero:hover,
.ck-main > .ck-approval-hero:hover {
	border-color: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}

.ck-main > .ck-hero::before,
.ck-main > .ck-events-hero::before,
.ck-main > .ck-approval-hero::before,
.ck-main > .ck-hero .ck-hero__grid,
.ck-main > .ck-events-hero .ck-events-hero__grid {
	display: none !important;
}

.ck-main > .ck-hero .ck-hero__content,
.ck-main > .ck-events-hero > .relative,
.ck-main > .ck-approval-hero {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.ck-main > .ck-hero .ck-hero__eyebrow,
.ck-main > .ck-events-hero .ck-hero__eyebrow,
.ck-main > .ck-approval-hero .ck-hero__eyebrow {
	display: none !important;
}

.ck-main > .ck-hero .ck-hero__title,
.ck-main > .ck-events-hero .ck-hero__title,
.ck-main > .ck-approval-hero h1,
.ck-main > .ck-approval-hero .ck-hero__title {
	margin: 0 !important;
	font-size: 20px !important;
	font-weight: 650 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	color: rgba(248, 250, 252, 0.94) !important;
}

.ck-main > .ck-hero .ck-hero__desc,
.ck-main > .ck-events-hero .ck-hero__desc,
.ck-main > .ck-approval-hero p:not(.ck-hero__eyebrow):not(.ck-card__label) {
	display: none !important;
}

.ck-main > .ck-hero .ck-hero__actions,
.ck-main > .ck-events-hero .ck-hero__actions,
.ck-main > .ck-approval-hero .ck-hero__actions,
.ck-main > .ck-approval-hero .ck-hero__meta {
	margin-top: 0 !important;
}

.ck-main > .ck-hero .ck-hero__meta {
	align-self: center;
	margin-top: 0 !important;
}

@media (max-width: 768px) {
	.ck-main > .ck-hero .ck-hero__content,
	.ck-main > .ck-events-hero > .relative,
	.ck-main > .ck-approval-hero {
		align-items: flex-start;
		gap: 10px;
	}

	.ck-main > .ck-hero .ck-hero__title,
	.ck-main > .ck-events-hero .ck-hero__title,
	.ck-main > .ck-approval-hero h1,
	.ck-main > .ck-approval-hero .ck-hero__title {
		font-size: 18px !important;
	}
}

.ck-main > .ck-card.ck-glow:not(:has(form)) {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible !important;
}

.ck-main > .ck-card.ck-glow:not(:has(form))::before {
	display: none !important;
}

.ck-main > .ck-card.ck-glow:not(:has(form)):hover {
	border-color: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}

.ck-main > .ck-card.ck-glow:not(:has(form)) .ck-card__label,
.ck-main > .ck-card.ck-glow:not(:has(form)) p:not(.ck-card__label) {
	display: none !important;
}

.ck-main > .ck-card.ck-glow:not(:has(form)) h1,
.ck-main > .ck-card.ck-glow:not(:has(form)) h2 {
	margin: 0 !important;
	font-size: 20px !important;
	font-weight: 650 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	color: rgba(248, 250, 252, 0.94) !important;
}

body[data-page="member"] .ck-main {
	gap: 1.15rem;
}

body[data-page="member"] .ck-main > .ck-hero {
	padding-top: 0 !important;
	margin-top: 2px;
}

body[data-page="member"] .ck-main > .grid,
body[data-page="member"] .ck-main > section.grid {
	margin-top: 2px;
}

body[data-page="member"] .ck-hero__content {
	align-items: flex-start;
	gap: 22px;
}

body[data-page="member"] .ck-hero__actions {
	gap: 12px;
}

body[data-page="member"] .ck-hero__actions .ck-btn {
	min-height: 42px;
}

body[data-page="member"] .ck-hero__meta {
	gap: 12px;
}

body[data-page="member"] .ck-pill {
	padding: 6px 11px;
	font-size: 10.75px;
}

body[data-page="member"] .ck-stat-card {
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

body[data-page="member"] .ck-stat-card__top {
	margin-bottom: 14px;
}

body[data-page="member"] .ck-stat-card__foot {
	padding-top: 12px;
}

body[data-page="member"] .ck-card {
	border-radius: calc(var(--ck-radius-lg) + 1px);
}

body[data-page="member"] .ck-card .ck-section-head {
	margin-bottom: 10px;
}

body[data-page="member"] .ck-card .ck-section-head h2 {
	font-size: 15px;
}

body[data-page="member"] .ck-card .ck-section-head p {
	margin-top: 5px;
}

body[data-page="member"] .ck-list {
	margin-top: 14px;
}

body[data-page="member"] .ck-events-grid {
	margin-top: 16px;
}

body[data-page="member"] .ck-event-card__body {
	padding: 16px 16px 17px;
}

body[data-page="member"] .ck-event-card__actions {
	margin-top: 14px;
	align-items: center;
}

body[data-page="member"] .ck-event-card__actions .ck-btn {
	min-height: 38px;
}

/* Final dashboard spacing polish: keeps the shared shell compact while improving scanability. */
.ck-main {
	gap: 1.75rem;
}

.ck-main > .ck-hero .ck-hero__content,
.ck-main > .ck-events-hero > .relative,
.ck-main > .ck-approval-hero {
	align-items: flex-start !important;
	flex-direction: column !important;
	gap: 24px !important;
}

.ck-main > .ck-hero .ck-hero__actions,
.ck-main > .ck-events-hero .ck-hero__actions,
.ck-main > .ck-approval-hero .ck-hero__actions,
.ck-main > .ck-approval-hero .ck-hero__meta {
	gap: 12px !important;
	margin-top: 0 !important;
}

.ck-main > .ck-hero .ck-hero__meta {
	align-self: flex-start !important;
	gap: 12px !important;
}

.ck-section-head {
	margin-bottom: 14px;
}

.ck-profile {
	gap: 11px;
	padding: 7px 12px 7px 8px;
}

.ck-profile__avatar {
	width: 34px;
	height: 34px;
}

.ck-profile__meta .ck-profile__name {
	font-size: 13px;
}

.ck-profile__meta .ck-profile__role {
	font-size: 11px;
}

.ck-profile > i,
.ck-profile > svg {
	width: 14px !important;
	height: 14px !important;
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__header {
	padding: 15px 15px 13px;
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__header p {
	font-size: 13px;
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__header span {
	font-size: 11px;
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__content {
	gap: 7px;
	padding: 9px;
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__item {
	padding: 11px 10px;
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__item.is-row {
	gap: 11px;
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__item.is-row i,
.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__item.is-row svg {
	width: 16px;
	height: 16px;
}

.ck-dropdown[data-dropdown-panel="profile"] .ck-dropdown__item.is-row span {
	font-size: 13px;
}

.ck-navbar__right {
	gap: 10px;
}

.ck-navbar__right .ck-icon-btn {
	height: 36px;
	width: 36px;
}

.ck-navbar__right .ck-icon-btn i,
.ck-navbar__right .ck-icon-btn svg {
	width: 17px;
	height: 17px;
}

.ck-navbar__right [data-notification-badge] {
	right: -4px !important;
	top: -5px !important;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	padding: 0 5px;
}

.ck-dot {
	top: 6px;
	right: 6px;
}

.ck-event-card__media span[class*="ck-event-badge"],
body[data-page="events"] .ck-event-card__media span[class*="ck-event-badge"] {
	font-size: 10.5px;
	padding: 5px 10px;
}

.ck-event-card__title,
body[data-page="events"] .ck-event-card__title {
	font-size: 17px;
	font-weight: 650;
	line-height: 1.32;
}

.ck-event-card__meta,
body[data-page="events"] .ck-event-card__meta {
	font-size: 11.75px;
	gap: 9px 14px;
}

.ck-event-card__meta i,
.ck-event-card__meta svg,
.ck-event-fact i,
.ck-event-fact svg,
body[data-page="events"] .ck-event-card__meta i,
body[data-page="events"] .ck-event-card__meta svg,
body[data-page="events"] .ck-event-fact i,
body[data-page="events"] .ck-event-fact svg {
	width: 14px;
	height: 14px;
	opacity: 0.82;
}

.ck-event-fact,
body[data-page="events"] .ck-event-fact {
	font-size: 12.5px;
}

.ck-event-card__actions .ck-btn,
body[data-page="events"] .ck-event-card__actions .ck-btn {
	min-height: 36px;
	font-size: 12px;
}

.ck-event-card__actions .ck-btn i,
.ck-event-card__actions .ck-btn svg,
body[data-page="events"] .ck-event-card__actions .ck-btn i,
body[data-page="events"] .ck-event-card__actions .ck-btn svg {
	width: 14px;
	height: 14px;
}

body[data-page="attendance-ops"] .ck-main > .ck-hero .ck-hero__content {
	gap: 24px !important;
}

body[data-page="attendance-ops"] .ck-hero__actions {
	display: flex;
	align-items: center;
	gap: 12px !important;
	margin-top: 24px !important;
}

body[data-page="attendance-ops"] .ck-hero__actions .ck-btn,
body[data-page="attendance-ops"] #btn-gen-qr {
	min-height: 38px;
	padding: 9px 15px;
	border-radius: var(--ck-radius-sm);
	font-size: 12.5px;
	font-weight: 650;
	letter-spacing: 0;
	gap: 8px;
	border: 1px solid var(--ck-line-strong);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
		rgba(14, 16, 20, 0.92);
	color: rgba(241, 245, 249, 0.92);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body[data-page="attendance-ops"] .ck-hero__actions .ck-btn:hover,
body[data-page="attendance-ops"] #btn-gen-qr:hover {
	border-color: rgba(148, 163, 184, 0.35);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.005)),
		rgba(18, 21, 27, 0.96);
	box-shadow:
		0 8px 20px rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-page="attendance-ops"] .ck-hero__actions .ck-btn i,
body[data-page="attendance-ops"] .ck-hero__actions .ck-btn svg {
	width: 16px;
	height: 16px;
	stroke-width: 1.8;
	flex-shrink: 0;
}

body[data-page="attendance-ops"] .ck-hero__actions .ck-btn-primary {
	border-color: var(--btn-primary-border);
	background: var(--btn-primary-bg);
	color: #fff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		var(--btn-primary-shadow);
}

body[data-page="attendance-ops"] .ck-hero__actions .ck-btn-primary:hover {
	border-color: var(--btn-primary-border-hover);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		var(--btn-primary-shadow-hover);
}

body[data-page="attendance-ops"] .ck-hero__meta {
	display: flex !important;
	align-items: flex-start !important;
	gap: 14px !important;
}

body[data-page="attendance-ops"] .ck-events-select-label {
	gap: 7px;
	font-size: 10.75px;
	letter-spacing: 0.08em;
}

body[data-page="attendance-ops"] .ck-events-select {
	min-height: 38px;
	padding: 8px 12px;
	font-size: 12.75px;
	border-radius: var(--ck-radius-sm);
	border-color: var(--ck-line-strong);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0)),
		rgba(10, 11, 14, 0.9);
}

body[data-page="attendance-ops"] .ck-hero__meta .ck-pill {
	min-height: 38px;
	padding: 8px 12px;
	gap: 8px;
	font-size: 11px;
	align-self: flex-start;
}

@media (max-width: 768px) {
	body[data-page="attendance-ops"] .ck-hero__actions {
		margin-top: 22px !important;
		gap: 10px !important;
	}

	body[data-page="attendance-ops"] .ck-hero__meta {
		align-items: stretch !important;
		gap: 10px !important;
	}

	body[data-page="attendance-ops"] .ck-hero__meta .ck-pill {
		align-self: flex-start;
	}
}

/* Final dashboard page refinements requested after the shared polish pass. */
.ck-sidebar .ck-nav-link i,
.ck-sidebar .ck-nav-link svg {
	width: 22px !important;
	height: 22px !important;
	stroke-width: 1.55 !important;
}

html.ck-sidebar-collapsed .ck-sidebar .ck-nav-link i,
html.ck-sidebar-collapsed .ck-sidebar .ck-nav-link svg {
	width: 20px !important;
	height: 20px !important;
	stroke-width: 1.6 !important;
}

body[data-page="member"] .ck-main,
body[data-page="overview"] .ck-main {
	gap: 1.75rem;
}

body[data-page="member"] .ck-main > .ck-hero .ck-hero__content,
body[data-page="overview"] .ck-main > .ck-hero .ck-hero__content {
	gap: 28px !important;
}

body[data-page="member"] .ck-hero__actions,
body[data-page="overview"] .ck-hero__actions {
	margin-top: 24px !important;
	gap: 14px !important;
}

body[data-page="member"] .ck-hero__meta,
body[data-page="overview"] .ck-hero__meta {
	margin-top: 4px !important;
	gap: 14px !important;
}

body[data-page="member"] .ck-main > section.grid:first-of-type,
body[data-page="overview"] .ck-main > section.grid:first-of-type {
	margin-top: 8px;
}

body[data-page="certificates"] .ck-main {
	gap: 1.75rem;
}

body[data-page="certificates"] .ck-card {
	border-radius: calc(var(--ck-radius-lg) + 1px);
	padding: 22px;
}

body[data-page="certificates"] .ck-card > .grid {
	gap: 24px;
	align-items: start;
}

body[data-page="certificates"] label {
	display: grid;
	gap: 9px;
	font-size: 12px !important;
	font-weight: 650 !important;
	letter-spacing: 0.01em;
	color: rgba(203, 213, 225, 0.88) !important;
}

body[data-page="certificates"] .ck-input,
body[data-page="certificates"] select.ck-input {
	min-height: 42px;
	padding: 10px 12px;
	border-radius: var(--ck-radius-sm);
	font-size: 13px;
	border-color: var(--ck-line-strong);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0)),
		rgba(10, 11, 14, 0.9);
}

body[data-page="certificates"] .ck-list {
	display: grid;
	gap: 10px;
	margin-top: 2px;
}

body[data-page="certificates"] .ck-list-item {
	padding: 14px 15px;
	border-radius: var(--ck-radius);
}

body[data-page="certificates"] .ck-list-item__main {
	gap: 5px;
}

body[data-page="certificates"] .ck-list-item__main strong {
	font-size: 13px;
}

body[data-page="certificates"] .ck-list-item__main span {
	font-size: 12px;
	line-height: 1.45;
}

body[data-page="certificates"] .ck-btn {
	min-height: 40px;
	padding-inline: 15px;
	font-size: 12.5px;
	gap: 8px;
}

body[data-page="certificates"] .ck-btn i,
body[data-page="certificates"] .ck-btn svg {
	width: 16px;
	height: 16px;
}

body[data-page="certificates"] .ck-cert-preview {
	width: 100%;
	max-width: 300px;
	border-radius: var(--ck-radius);
	border-color: rgba(148, 163, 184, 0.22);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

body[data-page="certificates"] .ck-progress {
	height: 13px;
	margin-top: 4px;
	border: 1px solid rgba(148, 163, 184, 0.12);
	background: rgba(8, 9, 11, 0.62);
}

body[data-page="certificates"] #statusText,
body[data-page="certificates"] #progressText {
	font-size: 12px;
	line-height: 1.5;
}

@media (max-width: 768px) {
	body[data-page="certificates"] .ck-card {
		padding: 18px;
	}

	body[data-page="certificates"] .ck-cert-preview {
		max-width: 100%;
	}
}

.ck-globe-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	min-height: 400px;
	position: relative;
	background: transparent;
}

.cyber-globe {
	position: relative;
	display: block;
	width: 100%;
	min-height: 400px;
	max-width: 550px;
	max-height: 550px;
	margin: 0 auto;
	background: transparent;
	aspect-ratio: 1 / 1;
}

.cyber-globe canvas {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
	border-radius: 12px;
}

.cyber-globe div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media (max-width: 980px) {
	.cyber-globe {
		max-width: 450px;
		max-height: 400px;
		min-height: 300px;
	}
}

@media (max-width: 640px) {
	.ck-landing-hero__inner {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.ck-globe-container {
		min-height: 300px;
		margin-top: 32px;
		order: 2;
	}

	.cyber-globe {
		max-width: 100%;
		max-height: 350px;
		min-height: 280px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════════
   CYBERKAVACH COMPREHENSIVE MOBILE RESPONSIVENESS OVERHAUL
   Ensures 100% zero horizontal overflow from 320px up to 768px+
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Global Layout & Container Constraints ── */
html, body {
	max-width: 100vw;
	overflow-x: hidden;
}

*, *::before, *::after {
	box-sizing: border-box;
}

.ck-layout {
	max-width: 100vw;
	width: 100%;
	min-width: 0;
	overflow-x: clip;
}

.ck-main {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

/* ── Standard Responsive Form Grids ── */
.ck-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ck-form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ck-form-grid-sm { display: grid; grid-template-columns: 160px 160px; gap: 12px; }

/* ── Universal Table Scrolling Wrappers ── */
.ck-table-wrap,
.sa-table-wrap,
.sec-table-wrap,
.ck-approval-table-wrap,
.table-responsive {
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	min-width: 0 !important;
	display: block !important;
}

/* ── Mobile Breakpoint: Tablets & Below (< 768px) ── */
@media (max-width: 767px) {
	.ck-content {
		padding: 0 14px 36px !important;
		margin-left: 0 !important;
		width: 100% !important;
		max-width: 100vw !important;
		min-width: 0 !important;
	}

	.ck-navbar__inner {
		padding: 0.75rem 0.875rem !important;
		gap: 8px !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.ck-card {
		padding: 16px 18px !important;
	}

	.ck-form-grid-3 {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}
}

/* ── Mobile Breakpoint: Phones (< 640px) ── */
@media (max-width: 639px) {
	.ck-content {
		padding: 0 10px 28px !important;
	}

	.ck-main {
		gap: 1rem !important;
		padding-top: 10px !important;
	}

	/* Card scaling */
	.ck-card {
		padding: 14px 14px !important;
		border-radius: var(--ck-radius) !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	/* Navbar */
	.ck-navbar__inner {
		padding: 0.6rem 0.65rem !important;
		gap: 6px !important;
	}

	.ck-search-bar,
	.ck-search {
		height: 34px !important;
		padding: 0 8px !important;
		font-size: 11px !important;
		max-width: 100% !important;
		min-width: 0 !important;
		flex: 1 1 auto !important;
	}

	.ck-dropdown,
	.ck-dropdown[data-dropdown-panel="profile"],
	.ck-dropdown[data-dropdown-panel="notifications"] {
		max-width: calc(100vw - 16px) !important;
		width: min(280px, calc(100vw - 16px)) !important;
		min-width: 0 !important;
		right: 0 !important;
	}

	/* Hero */
	.ck-hero,
	.ck-approval-hero,
	.ck-events-hero {
		padding: 16px 14px !important;
		border-radius: var(--ck-radius) !important;
	}

	.ck-hero__title {
		font-size: clamp(1.1rem, 5.2vw, 1.35rem) !important;
		line-height: 1.25 !important;
		word-break: break-word !important;
	}

	.ck-hero__desc {
		font-size: 11.5px !important;
		line-height: 1.5 !important;
	}

	.ck-hero__meta {
		display: none !important;
	}

	/* Mobile Action Buttons Redesign: 2-Column Touch Grid */
	.ck-hero__actions {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
		width: 100% !important;
		margin-top: 14px !important;
	}

	.ck-hero__actions .ck-btn {
		width: 100% !important;
		min-height: 40px !important;
		padding: 8px 10px !important;
		font-size: 11.5px !important;
		justify-content: center !important;
		text-align: center !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	.ck-hero__actions .ck-btn:last-child:nth-child(odd) {
		grid-column: 1 / -1 !important;
	}

	/* Form Grids */
	.ck-form-grid-2,
	.ck-form-grid-3,
	.ck-form-grid-sm {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}

	/* Stat cards */
	.ck-stat-card {
		padding: 12px 12px !important;
		min-width: 0 !important;
	}

	.ck-stat-card__value {
		font-size: 1.35rem !important;
	}

	.ck-stat-card__label {
		font-size: 9px !important;
	}

	.ck-stat-card__icon {
		width: 32px !important;
		height: 32px !important;
	}

	.ck-stat-card__icon i,
	.ck-stat-card__icon svg {
		width: 15px !important;
		height: 15px !important;
	}

	/* List items & filters */
	.sa-list-item {
		padding: 10px 8px !important;
		gap: 8px !important;
	}

	.ops-kpi {
		padding: 12px 8px !important;
	}

	.ops-kpi__num {
		font-size: 24px !important;
	}

	.sc-kpi {
		padding: 12px 8px !important;
	}

	.sc-kpi__num {
		font-size: 22px !important;
	}

	/* Modals */
	.sa-modal__panel,
	.ck-modal__panel,
	.ck-event-action-modal__panel {
		width: calc(100vw - 20px) !important;
		max-width: calc(100vw - 20px) !important;
		margin: 10px auto !important;
		max-height: 88vh !important;
	}
}

/* ── Ultra-Compact Mobile Breakpoint (< 380px, e.g. 320px - 360px) ── */
@media (max-width: 379px) {
	.ck-content {
		padding: 0 8px 24px !important;
	}

	.ck-navbar__inner {
		padding: 0.5rem 0.5rem !important;
		gap: 4px !important;
	}

	.ck-card {
		padding: 12px 10px !important;
	}

	.ck-hero,
	.ck-approval-hero,
	.ck-events-hero {
		padding: 14px 10px !important;
	}

	.ck-hero__actions {
		grid-template-columns: 1fr !important;
		gap: 6px !important;
	}

	.ck-hero__actions .ck-btn:last-child:nth-child(odd) {
		grid-column: auto !important;
	}

	.sa-filter-actions {
		grid-template-columns: 1fr !important;
	}

	.ck-stat-card {
		padding: 10px 8px !important;
	}

	.ck-stat-card__value {
		font-size: 1.15rem !important;
	}

	.ops-kpi__num,
	.sc-kpi__num {
		font-size: 19px !important;
	}
}

/* ── Standard Leaderboard Pagination ─────────────────────────────────────── */
.ck-lb-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-top: 1px solid var(--ck-line);
	background: rgba(10, 12, 16, 0.35);
	font-size: 11.5px;
	color: var(--ck-text-tertiary);
}

.ck-lb-pagination__info {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	color: var(--ck-text-tertiary);
	white-space: nowrap;
}

.ck-lb-pagination__info strong {
	color: var(--ck-text);
	font-weight: 600;
}

.ck-lb-pagination__actions {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

.ck-lb-pagination__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 29px;
	height: 29px;
	padding: 0 9px;
	border-radius: var(--ck-radius-sm);
	border: 1px solid var(--ck-line);
	background: rgba(255, 255, 255, 0.03);
	color: var(--ck-text-secondary);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.18s ease;
	user-select: none;
}

.ck-lb-pagination__btn:hover:not(:disabled) {
	border-color: rgba(244, 63, 94, 0.4);
	background: rgba(244, 63, 94, 0.08);
	color: var(--ck-text);
}

.ck-lb-pagination__btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

.ck-lb-pagination__btn.is-active {
	border-color: rgba(244, 63, 94, 0.55);
	background: rgba(244, 63, 94, 0.16);
	color: #fb7185;
	font-weight: 700;
	box-shadow: 0 0 12px rgba(244, 63, 94, 0.22);
}

.ck-lb-pagination__btn i,
.ck-lb-pagination__btn svg {
	width: 12px;
	height: 12px;
}

@media (max-width: 640px) {
	.ck-lb-pagination {
		flex-direction: column;
		align-items: center;
		gap: 9px;
		padding: 11px 12px;
	}

	.ck-lb-pagination__actions {
		width: 100%;
		justify-content: center;
	}
}


/* ══════════════════════════════════════════════════════════════════════════════
   PARTICIPANT DASHBOARD (overview) — Premium spacing & layout refinements
   ══════════════════════════════════════════════════════════════════════════════ */

body[data-page="overview"] .ck-main {
	gap: 2.5rem;
	padding-top: 40px;
}

/* ── Hero: restore full card treatment, improve internal spacing ── */
body[data-page="overview"] .ck-main > .ck-hero {
	padding: 32px 28px !important;
	border: 1px solid var(--ck-line) !important;
	border-radius: calc(var(--ck-radius-lg) + 2px) !important;
	background:
		linear-gradient(135deg, var(--brand-primary-bg) 0%, transparent 30%),
		linear-gradient(225deg, rgba(94, 234, 212, 0.03) 0%, transparent 35%),
		linear-gradient(180deg, rgba(18, 20, 26, 0.96), rgba(9, 10, 13, 0.94)) !important;
	box-shadow:
		0 0 0 1px var(--brand-primary-bg),
		0 24px 60px rgba(0, 0, 0, 0.45) !important;
	overflow: hidden !important;
}

body[data-page="overview"] .ck-main > .ck-hero::before {
	display: block !important;
}

body[data-page="overview"] .ck-main > .ck-hero .ck-hero__grid {
	display: block !important;
}

body[data-page="overview"] .ck-main > .ck-hero .ck-hero__content {
	flex-direction: row !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 32px !important;
}

body[data-page="overview"] .ck-main > .ck-hero .ck-hero__eyebrow {
	display: inline-flex !important;
	margin-bottom: 10px;
}

body[data-page="overview"] .ck-main > .ck-hero .ck-hero__title {
	font-size: clamp(1.5rem, 2.8vw, 2rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.03em !important;
	color: #fff !important;
	line-height: 1.15 !important;
	margin: 0 !important;
}

body[data-page="overview"] .ck-main > .ck-hero .ck-hero__desc {
	display: block !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: var(--ck-text-secondary) !important;
	margin: 12px 0 0 !important;
	max-width: 480px !important;
}

body[data-page="overview"] .ck-hero__actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-top: 24px !important;
}

body[data-page="overview"] .ck-hero__actions .ck-btn {
	min-height: 38px;
	padding: 9px 16px;
	font-size: 12.5px;
}

body[data-page="overview"] .ck-hero__meta {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	align-items: flex-start !important;
	justify-content: flex-end !important;
	align-self: center !important;
	margin-top: 0 !important;
	flex-shrink: 0;
}

body[data-page="overview"] .ck-pill {
	padding: 7px 12px;
	font-size: 11px;
}

/* ── Stats grid: generous padding & spacing ── */
body[data-page="overview"] .ck-main > section.grid {
	gap: 20px;
}

body[data-page="overview"] .ck-stat-card {
	padding: 24px 22px;
}

body[data-page="overview"] .ck-stat-card__top {
	margin-bottom: 16px;
}

body[data-page="overview"] .ck-stat-card__label {
	font-size: 10.5px;
	letter-spacing: 0.09em;
}

body[data-page="overview"] .ck-stat-card__value {
	font-size: 36px;
	margin-top: 8px;
	line-height: 1;
}

body[data-page="overview"] .ck-stat-card__icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
}

body[data-page="overview"] .ck-stat-card__icon i,
body[data-page="overview"] .ck-stat-card__icon svg {
	width: 18px;
	height: 18px;
}

body[data-page="overview"] .ck-stat-card__foot {
	padding-top: 14px;
	margin-top: 14px;
}

/* ── Section cards: breathing room ── */
body[data-page="overview"] .ck-card {
	padding: 28px 26px;
	border-radius: calc(var(--ck-radius-lg) + 2px);
}

body[data-page="overview"] .ck-section-head {
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ck-line);
}

body[data-page="overview"] .ck-section-head h2 {
	font-size: 17px;
	font-weight: 650;
	letter-spacing: -0.02em;
	color: #fff;
}

body[data-page="overview"] .ck-section-head p {
	margin-top: 5px;
	font-size: 12.5px;
	color: var(--ck-text-tertiary);
	line-height: 1.5;
}

body[data-page="overview"] .ck-card__label {
	font-size: 9.5px;
	letter-spacing: 0.13em;
	margin-bottom: 6px;
	color: rgba(148, 163, 184, 0.72);
}

/* ── List items: premium row spacing ── */
body[data-page="overview"] .ck-list {
	gap: 10px;
}

body[data-page="overview"] .ck-list-item {
	padding: 16px 18px;
	border-radius: 12px;
	border-color: rgba(148, 163, 184, 0.1);
	background: rgba(8, 10, 13, 0.38);
	transition:
		border-color 0.2s var(--ck-ease-micro),
		background 0.2s var(--ck-ease-micro),
		box-shadow 0.24s var(--ck-ease-out),
		transform 0.2s var(--ck-ease-micro);
}

body[data-page="overview"] .ck-list-item:hover {
	border-color: rgba(203, 213, 225, 0.16);
	background: rgba(148, 163, 184, 0.045);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
	transform: translateY(-1px);
}

body[data-page="overview"] .ck-list-item__main strong {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
}

body[data-page="overview"] .ck-list-item__main span {
	font-size: 11.5px;
	margin-top: 3px;
	line-height: 1.45;
	color: rgba(148, 163, 184, 0.76);
}

body[data-page="overview"] .ck-list-item__aside {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ── Empty state: compact, not a giant void ── */
body[data-page="overview"] .ck-empty-state {
	padding: 32px 24px;
	text-align: center;
	border-radius: 12px;
	border: 1px dashed rgba(148, 163, 184, 0.18);
	background: rgba(8, 9, 11, 0.4);
	max-height: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* ── Mobile overrides for overview ── */
@media (max-width: 1023px) {
	body[data-page="overview"] .ck-main > .ck-hero {
		padding: 22px 18px !important;
	}

	body[data-page="overview"] .ck-main > .ck-hero .ck-hero__content {
		flex-direction: column !important;
		gap: 20px !important;
	}

	body[data-page="overview"] .ck-hero__meta {
		justify-content: flex-start !important;
	}

	body[data-page="overview"] .ck-main > .ck-hero .ck-hero__desc {
		display: none !important;
	}

	body[data-page="overview"] .ck-main {
		gap: 1.5rem;
		padding-top: 20px;
	}

	body[data-page="overview"] .ck-stat-card {
		padding: 18px 16px;
	}

	body[data-page="overview"] .ck-stat-card__value {
		font-size: 28px;
	}

	body[data-page="overview"] .ck-card {
		padding: 20px 18px;
	}
}

@media (max-width: 639px) {
	body[data-page="overview"] .ck-main > .ck-hero {
		padding: 18px 16px !important;
	}

	body[data-page="overview"] .ck-main {
		gap: 1.25rem;
		padding-top: 16px;
	}

	body[data-page="overview"] .ck-hero__meta {
		display: none !important;
	}

	body[data-page="overview"] .ck-stat-card {
		padding: 16px 14px;
	}

	body[data-page="overview"] .ck-stat-card__value {
		font-size: 24px;
	}

	body[data-page="overview"] .ck-card {
		padding: 18px 16px;
	}

	body[data-page="overview"] .ck-list-item {
		padding: 14px 14px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGE HEADER — Clean SaaS-style top section (replaces hero on overview)
   ══════════════════════════════════════════════════════════════════════════════ */

.ck-page-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--ck-line);
}

.ck-page-header__left {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
}

.ck-page-header__title {
	font-size: clamp(1.45rem, 2.4vw, 1.85rem);
	font-weight: 650;
	letter-spacing: -0.03em;
	color: var(--ck-text);
	line-height: 1.15;
	margin: 0;
}

.ck-page-header__sub {
	font-size: 13.5px;
	color: var(--ck-text-tertiary);
	line-height: 1.55;
	margin: 8px 0 0;
	max-width: 480px;
}

.ck-page-header__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

/* Overview page: undo the hero overrides that no longer apply */
body[data-page="overview"] .ck-main > .ck-hero {
	all: unset;
	display: none !important;
}

body[data-page="overview"] .ck-main {
	padding-top: 32px;
}

@media (max-width: 639px) {
	.ck-page-header {
		flex-direction: column;
		align-items: flex-start;
		padding-bottom: 24px;
		gap: 0;
	}

	.ck-page-header__title {
		font-size: 1.3rem;
	}

	.ck-page-header__sub {
		font-size: 12.5px;
	}

	.ck-page-header__actions {
		margin-top: 16px;
	}

	body[data-page="overview"] .ck-main {
		padding-top: 20px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════════
   OVERVIEW PAGE — Compact, premium proportions (authoritative, wins over all
   previous overview overrides above)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Page layout */
body[data-page="overview"] .ck-main {
	gap: 1.25rem !important;
	padding-top: 24px !important;
}

/* Page header */
body[data-page="overview"] .ck-page-header {
	padding-bottom: 20px !important;
}

body[data-page="overview"] .ck-page-header__title {
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.2 !important;
}

body[data-page="overview"] .ck-page-header__sub {
	font-size: 12.5px !important;
	margin-top: 5px !important;
}

body[data-page="overview"] .ck-page-header__actions {
	margin-top: 14px !important;
	gap: 8px !important;
}

/* Stat cards */
body[data-page="overview"] .ck-main > section.grid {
	gap: 12px !important;
}

body[data-page="overview"] .ck-stat-card {
	padding: 14px 16px !important;
}

body[data-page="overview"] .ck-stat-card__top {
	margin-bottom: 10px !important;
}

body[data-page="overview"] .ck-stat-card__label {
	font-size: 10px !important;
	letter-spacing: 0.08em !important;
}

body[data-page="overview"] .ck-stat-card__value {
	font-size: 26px !important;
	margin-top: 4px !important;
	line-height: 1 !important;
}

body[data-page="overview"] .ck-stat-card__icon {
	width: 32px !important;
	height: 32px !important;
	border-radius: 9px !important;
}

body[data-page="overview"] .ck-stat-card__icon i,
body[data-page="overview"] .ck-stat-card__icon svg {
	width: 15px !important;
	height: 15px !important;
}

body[data-page="overview"] .ck-stat-card__foot {
	padding-top: 10px !important;
	margin-top: 10px !important;
}

/* Section cards */
body[data-page="overview"] .ck-card {
	padding: 16px 18px !important;
	border-radius: var(--ck-radius-lg) !important;
}

body[data-page="overview"] .ck-section-head {
	margin-bottom: 12px !important;
	padding-bottom: 12px !important;
	border-bottom: 1px solid var(--ck-line) !important;
}

body[data-page="overview"] .ck-section-head h2 {
	font-size: 13.5px !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
}

body[data-page="overview"] .ck-section-head p {
	font-size: 11.5px !important;
	margin-top: 3px !important;
	line-height: 1.45 !important;
}

body[data-page="overview"] .ck-card__label {
	font-size: 9px !important;
	letter-spacing: 0.11em !important;
	margin-bottom: 4px !important;
}

/* List rows */
body[data-page="overview"] .ck-list {
	gap: 6px !important;
}

body[data-page="overview"] .ck-list-item {
	padding: 10px 12px !important;
	border-radius: 8px !important;
}

body[data-page="overview"] .ck-list-item__main strong {
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}

body[data-page="overview"] .ck-list-item__main span {
	font-size: 11px !important;
	margin-top: 2px !important;
}

body[data-page="overview"] .ck-list-item__aside {
	gap: 8px !important;
}

/* Empty state */
body[data-page="overview"] .ck-empty-state {
	padding: 24px 16px !important;
	max-height: 200px !important;
	gap: 6px !important;
}

/* Badges inside list rows */
body[data-page="overview"] .ck-badge {
	font-size: 9px !important;
	padding: 2px 7px !important;
	letter-spacing: 0.06em !important;
}

/* Mobile */
@media (max-width: 1023px) {
	body[data-page="overview"] .ck-main {
		gap: 1rem !important;
		padding-top: 16px !important;
	}

	body[data-page="overview"] .ck-stat-card {
		padding: 12px 14px !important;
	}

	body[data-page="overview"] .ck-stat-card__value {
		font-size: 22px !important;
	}

	body[data-page="overview"] .ck-card {
		padding: 14px 16px !important;
	}
}

@media (max-width: 639px) {
	body[data-page="overview"] .ck-main {
		gap: 0.875rem !important;
		padding-top: 12px !important;
	}

	body[data-page="overview"] .ck-page-header__title {
		font-size: 1.1rem !important;
	}

	body[data-page="overview"] .ck-stat-card__value {
		font-size: 20px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════════
   CLEAN & COMPACT TIMELINE COMPONENT
   ══════════════════════════════════════════════════════════════════════════════ */
.ck-timeline-wrapper {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.ck-tl-tabs {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ck-line, rgba(255, 255, 255, 0.07));
	margin-bottom: 4px;
}

.ck-tl-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ck-text-secondary, #94a3b8);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ck-line, rgba(255, 255, 255, 0.08));
	cursor: pointer;
	transition: all 0.15s ease;
	user-select: none;
	line-height: 1;
}

.ck-tl-tab:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.15);
}

.ck-tl-tab.is-active {
	color: #38bdf8;
	background: rgba(56, 189, 248, 0.12);
	border-color: rgba(56, 189, 248, 0.35);
	box-shadow: 0 0 10px rgba(56, 189, 248, 0.12);
}

.ck-tl-tab-count {
	font-size: 9.5px;
	font-weight: 700;
	padding: 1px 5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: inherit;
}

.ck-tl-tab.is-active .ck-tl-tab-count {
	background: rgba(56, 189, 248, 0.25);
	color: #38bdf8;
}

.ck-tl-panels {
	display: flex;
	flex-direction: column;
}

.ck-tl-day-panel {
	display: flex;
	flex-direction: column;
}

.ck-tl-day-panel.is-hidden {
	display: none !important;
}

.ck-tl-day-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0 8px 0;
}

.ck-tl-day-badge {
	font-size: 9.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 2px 7px;
	border-radius: 4px;
	background: rgba(248, 113, 113, 0.12);
	color: #f87171;
	border: 1px solid rgba(248, 113, 113, 0.25);
}

.ck-tl-day-count {
	font-size: 11px;
	color: var(--ck-text-tertiary, #64748b);
}

.ck-tl-stream {
	display: flex;
	flex-direction: column;
	position: relative;
}

.ck-tl-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	position: relative;
	padding: 6px 6px;
	border-radius: 6px;
	transition: background 0.15s ease;
}

.ck-tl-item:hover {
	background: rgba(255, 255, 255, 0.025);
}

.ck-tl-time {
	width: 82px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-top: 1px;
	font-family: var(--ck-font-mono, monospace);
	line-height: 1.25;
}

.ck-tl-time-start {
	font-size: 11px;
	font-weight: 700;
	color: #fbbf24;
}

.ck-tl-time-end {
	font-size: 9.5px;
	color: var(--ck-text-tertiary, #64748b);
}

.ck-tl-track {
	width: 14px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	position: relative;
}

.ck-tl-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #38bdf8;
	border: 1.5px solid #090a0c;
	box-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
	margin-top: 4px;
	z-index: 2;
	flex-shrink: 0;
}

.ck-tl-line {
	position: absolute;
	top: 11px;
	bottom: -6px;
	width: 1.5px;
	background: var(--ck-line, rgba(255, 255, 255, 0.1));
	z-index: 1;
}

.ck-tl-item:last-child .ck-tl-line {
	display: none;
}

.ck-tl-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ck-tl-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.ck-tl-title {
	font-size: 12.5px;
	font-weight: 650;
	color: var(--ck-text, #f1f5f9);
	line-height: 1.35;
	margin: 0;
}

.ck-tl-venue {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 10px;
	color: var(--ck-text-secondary, #94a3b8);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--ck-line, rgba(255, 255, 255, 0.08));
	padding: 1px 6px;
	border-radius: 4px;
	white-space: nowrap;
	flex-shrink: 0;
}

.ck-tl-venue svg,
.ck-tl-venue i {
	width: 11px;
	height: 11px;
	color: #f87171;
}

.ck-tl-desc {
	font-size: 11px;
	color: var(--ck-text-tertiary, #94a3b8);
	line-height: 1.45;
	margin: 0;
}

@media (max-width: 540px) {
	.ck-tl-item {
		gap: 8px;
		padding: 5px 2px;
	}
	.ck-tl-time {
		width: 68px;
	}
	.ck-tl-time-start {
		font-size: 10px;
	}
	.ck-tl-time-end {
		font-size: 9px;
	}
	.ck-tl-title {
		font-size: 12px;
	}
}