* {
	padding: 0;
	margin: 0;
	outline: none !important;
	-moz-border-left-colors: transparent;
	-webkit-tap-highlight-color: transparent;
	box-sizing: border-box;
}

body {
	width: 100%;
	font-family: 'IBM Plex Sans', system-ui, sans-serif;
	color: var(--ink-body);
	background: var(--bg-page);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* display: flex;
    align-items: center;
    justify-content: center; */
	scroll-behavior: auto;
	/* background-color: #f7f7f7; */
}

:root {
	--font-sans: 'IBM Plex Sans', system-ui, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

	--ink-title: #141b28;
	--ink-body: #1b2432;
	--ink-secondary: #2a3342;
	--ink-muted: #5b6472;
	--ink-subtle: #7a828f;
	--ink-faint: #98a0ad;
	--ink-eyebrow: #8a92a0;
	--ink-nav-eyebrow: #a4abb6;

	--bg-page: #ffffff;
	--bg-sidebar: #fafbfc;
	--bg-subtle: #f7f8fa;
	--bg-hover: #fafbfc;
	--border: #eaebef;
	--border-soft: #f0f1f3;
	--border-nav: #ecedf0;

	--brand-red: #e01f26;
	--accent-blue: #3b82f6;
	--active-nav-bg: #eef3ff;
	--ok-fg: #15803d;
	--ok-bg: #e7f7ec;
	--live-dot: #22a852;

	--icon-blue-bg: #e7effd;
	--icon-blue-fg: #3b82f6;
	--icon-green-bg: #e6f6ec;
	--icon-green-fg: #16a34a;
	--icon-purple-bg: #f0ecfd;
	--icon-purple-fg: #7c5cd6;
	--icon-orange-bg: #fdf0e3;
	--icon-orange-fg: #e0873f;
	--icon-red-bg: #fdeaea;
	--icon-red-fg: #e0483f;

	--background-color: #f3f2f6;
	--mdc-theme-primary: #b71d1c;
	--mdc-theme-secondary: #757575;
	--white: #fff;
	--black: #2e2b29;
	--black-contrast: #110f0e;
	--gray-1: rgba(61, 37, 20, 0.05);
	--gray-2: rgba(61, 37, 20, 0.08);
	--gray-3: rgba(61, 37, 20, 0.12);
	--gray-4: rgba(53, 38, 28, 0.3);
	--gray-5: rgba(28, 25, 23, 0.6);
	--green: #22c55e;
	--purple: #6a00f5;
	--purple-contrast: #5800cc;
	--purple-light: rgba(88, 5, 255, 0.05);
	--yellow-contrast: #facc15;
	--yellow: rgba(250, 204, 21, 0.4);
	--yellow-light: #fffae5;
	--red: #ff5c33;
	--red-light: #ffebe5;
	--shadow: 0px 12px 33px 0px rgba(0, 0, 0, 0.06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, 0.04);
}

button,
input,
select,
textarea {
	font: inherit;
}

/* Preserve legacy weight utilities while the rest of the app migrates to role-based classes. */
.font-GilroyRegular {
	font-family: var(--font-sans);
	font-weight: 400;
}

.font-GilroyMedium {
	font-family: var(--font-sans);
	font-weight: 500;
}

.font-GilroyBold {
	font-family: var(--font-sans);
	font-weight: 700;
}

.font-mono,
.console-meta,
.console-caption,
.console-eyebrow,
.console-chip,
.console-id,
.console-page table thead th,
.console-page table tbody {
	font-family: var(--font-mono);
}

.console-numeric,
.console-meta,
.console-caption,
.console-page input[type='number'],
.console-page [role='status'],
.console-page table tbody {
	font-variant-numeric: tabular-nums;
}

.console-metric,
.console-chip,
.console-tag,
.console-page [role='status'] {
	white-space: nowrap;
}

.console-chip,
.console-tag,
.console-page [role='status'] {
	font-family: var(--font-mono);
}

.console-page table thead th,
.console-eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-eyebrow);
}

.console-page table {
	width: 100%;
	border-collapse: collapse;
}

.console-page table thead tr {
	border-bottom: 1px solid var(--border-soft);
	background: var(--bg-subtle);
}

.console-page table thead th {
	padding: 14px 16px;
	text-align: left;
}

.console-page table tbody tr {
	border-bottom: 1px solid var(--border-soft);
	transition: background-color 150ms ease;
}

.console-page table tbody tr:hover {
	background: var(--bg-hover);
}

.console-page table tbody {
	font-size: 13px;
	font-weight: 400;
	color: var(--ink-secondary);
}

.console-page table tbody td {
	padding: 16px;
}

.console-page {
	font-family: var(--font-sans);
	font-variant-numeric: tabular-nums;
	color: var(--ink-body);
}

.console-page-stack {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.console-page-stack > :first-child {
	margin-bottom: -20px;
}

.console-page-title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 29px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--ink-title);
}

.console-section-title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--ink-title);
}

.console-subtitle {
	margin: 7px 0 0;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink-subtle);
}

.console-card {
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--bg-page);
	box-shadow: 0 1px 2px rgba(20, 27, 40, 0.03);
}

.console-table-shell {
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(20, 27, 40, 0.03);
}

.console-card-label {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-subtle);
}

.console-metric {
	font-family: var(--font-mono);
	font-size: clamp(27px, 2.3vw, 40px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ink-title);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.console-caption,
.console-meta {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--ink-faint);
	font-variant-numeric: tabular-nums;
}

.console-chip,
.console-tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.console-chip {
	padding: 4px 11px;
	border-radius: 999px;
}

.console-tag {
	padding: 4px 11px;
	border-radius: 8px;
}

.console-action:not(:disabled):not(:focus-visible) {
	box-shadow: 0 1px 2px rgba(20, 27, 40, 0.04);
}

.metric-blue {
	color: var(--icon-blue-fg);
	background: var(--icon-blue-bg);
}

.metric-green {
	color: var(--icon-green-fg);
	background: var(--icon-green-bg);
}

.metric-purple {
	color: var(--icon-purple-fg);
	background: var(--icon-purple-bg);
}

.metric-orange {
	color: var(--icon-orange-fg);
	background: var(--icon-orange-bg);
}

.metric-red {
	color: var(--icon-red-fg);
	background: var(--icon-red-bg);
}

.se-wrapper {
	width: 100%;
	min-height: 50vh !important;
}

@layer utilities {
	@variants responsive {
		/* Hide scrollbar for Chrome, Safari and Opera */
		.no-scrollbar::-webkit-scrollbar {
			display: none;
		}

		/* Hide scrollbar for IE, Edge and Firefox */
		.no-scrollbar {
			-ms-overflow-style: none; /* IE and Edge */
			scrollbar-width: none; /* Firefox */
		}
	}
}

.leftToRight {
	animation: moveLR 0.5s 1;
	position: relative;
}

@keyframes moveLR {
	from {
		left: -120px;
	}
	to {
		left: 0;
	}
}

.rightToLeft {
	animation: moveRL 0.5s 1;
	position: relative;
}

@keyframes moveRL {
	from {
		right: -120px;
	}
	to {
		right: 0;
	}
}

.bottomToTop {
	animation: moveBT 0.5s 1;
	position: relative;
}

@keyframes moveBT {
	from {
		top: 70px;
	}
	to {
		top: 0;
	}
}

.topToBottom {
	animation: moveTB 0.5s 1;
	position: relative;
}

@keyframes moveTB {
	from {
		bottom: 70px;
	}
	to {
		bottom: 0;
	}
}

.slideUp {
	-webkit-animation-name: slideUp;
	animation-name: slideUp;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(100%);
		transform: translateY(80%);
		visibility: visible;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes slideUp {
	0% {
		-webkit-transform: translateY(100%);
		transform: translateY(80%);
		visibility: visible;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

.slideDown {
	-webkit-animation-name: slideDown;
	animation-name: slideDown;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
		visibility: visible;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
		visibility: visible;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

.fadeOut {
	animation: fadeOut 0.5s ease-in-out;
}

@keyframes fadeOut {
	0% {
		scale: 0;
	}
	100% {
		scale: 1;
	}
}

.fadeIn {
	animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
	0% {
		scale: 1.75;
	}
	100% {
		scale: 1;
	}
}

.zoomIn {
	animation: zoom 0.6s ease-in;
	position: relative;
}

@keyframes zoom {
	0% {
		-webkit-transform: scale(0.91, 0.91);
		transform: scale(0.91, 0.91);
	}
	50% {
		-webkit-transform: scale(1.02, 1.02);
		transform: scale(1.02, 1.02);
	}
	100% {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
}