.ls-monitor .status-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--showcase-space-20);
	margin-bottom: var(--showcase-space-28);
}

.ls-monitor .status-title-area {
	display: flex;
	align-items: center;
	gap: var(--showcase-space-15);
}

.ls-monitor .status-icon {
	width: var(--showcase-dimension-58);
	height: var(--showcase-dimension-58);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--showcase-radius-16);
	font-size: var(--showcase-type-27);
	background: linear-gradient(135deg, var(--monitor-color-f1f5f9), var(--monitor-color-e2e8f0));
	border: 1px solid var(--monitor-color-dbe1e8);
	color: var(--monitor-color-34d399);
	box-shadow: inset 0 1px 0 var(--monitor-blend-255-255-255-p8);
}

.ls-monitor .status-title {
	font-size: var(--showcase-type-26);
	font-weight: var(--showcase-weight-700); 
}

.ls-monitor .status-subtitle {
	margin-top: var(--showcase-space-5);
	font-size: var(--showcase-type-13);
	color: var(--monitor-color-7b7b7b);
}

.ls-monitor .live-info {
	display: flex;
	align-items: center;
	gap: var(--showcase-space-9);
	font-size: var(--showcase-type-13);
	color: var(--monitor-color-7b7b7b);
	white-space: nowrap;
}

.ls-monitor .live-dot {
	width: var(--showcase-space-9);
	height: var(--showcase-space-9);
	border-radius: 50%;
	background: var(--monitor-color-249a62);
	animation: monitor-pulse-dot var(--monitor-motion-2500) infinite;
}

.ls-monitor .operation-banner {
	--banner-color: var(--monitor-color-34d399);
	--banner-bg: var(--monitor-blend-16-185-129-0p08);
	--banner-border: var(--monitor-blend-16-185-129-0p22);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--showcase-space-20);
	padding: var(--showcase-space-17) var(--showcase-space-20);
	border-radius: var(--showcase-radius-12);
	background: var(--banner-bg);
	border: 1px solid var(--banner-border);
	margin-bottom: var(--showcase-dimension-24);
	transition: background-color var(--monitor-motion-700) ease,
        border-color var(--monitor-motion-700) ease,
        color var(--monitor-motion-700) ease,
        box-shadow var(--monitor-motion-700) ease;
}

.ls-monitor .operation-left {
	display: flex;
	align-items: center;
	gap: var(--showcase-dimension-11);
	font-size: var(--showcase-type-14);
	font-weight: var(--showcase-weight-700);
	color: var(--banner-color);
	transition: color var(--monitor-motion-700) ease;
}

.ls-monitor .operation-dot {
	width: var(--showcase-space-10);
	height: var(--showcase-space-10);
	border-radius: 50%;
	background: var(--banner-color);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--banner-color) 14%, transparent);
	transition: background-color var(--monitor-motion-700) ease,
        box-shadow var(--monitor-motion-700) ease;
}

.ls-monitor .operation-uptime {
	color: var(--banner-color);
	font-size: var(--showcase-type-13);
	font-weight: var(--showcase-weight-700);
	transition: color var(--monitor-motion-700) ease;
}

.ls-monitor .operation-banner.operational {
	--banner-color: var(--monitor-color-34d399);
	--banner-bg: var(--monitor-blend-16-185-129-0p08);
	--banner-border: var(--monitor-blend-16-185-129-0p22);
}

.ls-monitor .operation-banner.warning {
	--banner-color: var(--monitor-color-d97706);
	--banner-bg: var(--monitor-blend-245-158-11-0p09);
	--banner-border: var(--monitor-blend-245-158-11-0p28);
}

.ls-monitor .operation-banner.maintenance {
	--banner-color: var(--monitor-color-2563eb);
	--banner-bg: var(--monitor-blend-37-99-235-0p08);
	--banner-border: var(--monitor-blend-37-99-235-0p25);
}

.ls-monitor .operation-banner.alert {
	--banner-color: var(--monitor-color-dc2626);
	--banner-bg: var(--monitor-blend-239-68-68-0p09);
	--banner-border: var(--monitor-blend-239-68-68-0p28);
}

.ls-monitor .operation-uptime {
	font-size: var(--showcase-type-13);
	font-weight: var(--showcase-weight-700);
}

.ls-monitor .metrics-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--showcase-space-10);
	margin-bottom: var(--showcase-space-15);
}

.ls-monitor .metric-card {
	min-height: var(--showcase-dimension-165);
	padding: var(--showcase-space-10) var(--showcase-space-15);
	background: linear-gradient(180deg, var(--monitor-color-ffffff), var(--monitor-color-f8fafc));
	border: 1px solid var(--monitor-color-cdd6f2);
	border-radius: var(--showcase-radius-15);
	overflow: hidden;
	position: relative;
	transition: transform var(--monitor-motion-350) ease,
        box-shadow var(--monitor-motion-350) ease;
}

.ls-monitor .metric-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--showcase-space-10);
}

.ls-monitor .metric-label {
	font-size: var(--showcase-type-14);
	color: var(--monitor-color-171717);
	font-weight: var(--showcase-weight-600);
}
 
.ls-monitor .metric-value {
	margin-top: var(--showcase-space-13);
	font-size: var(--showcase-type-28);
	font-weight: var(--showcase-weight-700);
	color: var(--monitor-color-171717);
	transition: color var(--monitor-motion-450) ease,
        transform var(--monitor-motion-450) ease;
}

.ls-monitor .metric-value.value-flash {
	transform: translateY(-1px);
}

.ls-monitor .metric-extra { 
	font-size: var(--showcase-type-12);
	color: var(--monitor-color-7b7b7b);
}

.ls-monitor .mini-chart {
	height: var(--showcase-dimension-45);
	display: flex;
	align-items: flex-end;
	gap: var(--showcase-space-3);
	margin-top: var(--showcase-space-17);
	padding-top: var(--showcase-space-4);
	overflow: hidden;
	position: relative;
}

.ls-monitor .chart-bar {
	flex: 1;
	min-width: var(--showcase-dimension-2);
	min-height: var(--showcase-space-5);
	height: 50%;
	border-radius: var(--showcase-dimension-4) var(--showcase-dimension-4) 0 0;
	background: linear-gradient(to top, var(--monitor-color-10b981), var(--monitor-color-6ee7b7));
	opacity: .80;
	transform: scaleY(1);
	transform-origin: bottom;
	transition: height var(--monitor-motion-750) cubic-bezier(.22, 1, .36, 1),
        opacity var(--monitor-motion-750) ease,
        transform var(--monitor-motion-750) cubic-bezier(.22, 1, .36, 1);
}
 
.ls-monitor #ls-monitor-latencyChart .chart-bar:nth-child(3n) {
	border-radius: var(--showcase-dimension-5) var(--showcase-dimension-5) var(--showcase-dimension-1) var(--showcase-dimension-1);
}

.ls-monitor #ls-monitor-latencyChart .chart-bar:nth-child(4n) {
	opacity: .65;
}

.ls-monitor #ls-monitor-queueChart .chart-bar {
	background: linear-gradient(to top, var(--monitor-color-64748b), var(--monitor-color-cbd5e1));
}

.ls-monitor #ls-monitor-queueChart .chart-bar:nth-child(2n) {
	opacity: .70;
}

.ls-monitor #ls-monitor-queueChart .chart-bar:nth-child(5n) {
	border-radius: var(--showcase-radius-2) var(--showcase-radius-2) 0 0;
}

.ls-monitor #ls-monitor-paymentChart .chart-bar {
	background: linear-gradient(to top, var(--monitor-color-94a3b8), var(--monitor-color-e2e8f0));
}

.ls-monitor #ls-monitor-paymentChart .chart-bar:nth-child(3n) {
	opacity: .55;
}

.ls-monitor #ls-monitor-paymentChart .chart-bar:nth-child(6n) {
	opacity: .78;
} 

.ls-monitor .services-box {
	background: var(--monitor-color-ffffff);
	border: 1px solid var(--monitor-color-cdd6f2);
	border-radius: var(--showcase-radius-15);
	padding: var(--showcase-space-22);
} 

.ls-monitor .services-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--showcase-dimension-12);
}

.ls-monitor .services-title {
	font-size: var(--showcase-type-16);
	font-weight: var(--showcase-weight-800);
}

.ls-monitor .nodes-online {
	font-size: var(--showcase-type-12);
	color: var(--monitor-color-34d399);
	font-weight: var(--showcase-weight-700);
}
 
.ls-monitor .service-item {
	padding: var(--showcase-space-15) 0;
	border-bottom: 1px solid var(--monitor-color-f1f5f9);
}

.ls-monitor .service-item:last-child {
	border-bottom: none;
}

.ls-monitor .service-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--showcase-space-15);
	margin-bottom: var(--showcase-space-10);
}

.ls-monitor .service-name {
	font-size: var(--showcase-type-14);
	color: var(--monitor-color-171717)
}

.ls-monitor .service-status {
	font-size: var(--showcase-type-12);
	font-weight: var(--showcase-weight-700);
	color: var(--monitor-color-059669);
	transition: color var(--monitor-motion-600) ease,
        opacity var(--monitor-motion-400) ease,
        transform var(--monitor-motion-400) ease;
}

 
.ls-monitor .progress {
	height: var(--showcase-dimension-8);
	background: var(--monitor-color-edf0f3);
	border-radius: var(--showcase-radius-20);
	overflow: hidden;
}

.ls-monitor .progress-fill {
	height: 100%;
	width: 80%;
	border-radius: var(--showcase-radius-20);
	background: linear-gradient(90deg, var(--monitor-color-059669), var(--monitor-color-34d399));
	transition: width var(--monitor-motion-1150) cubic-bezier(.22,1,.36,1),
        background var(--monitor-motion-600) ease,
        box-shadow var(--monitor-motion-600) ease;
}

.ls-monitor .progress-fill.operational {
	background: linear-gradient(90deg, var(--monitor-color-059669), var(--monitor-color-34d399));
}
 
.ls-monitor .progress-fill.elevated-load {
	background: linear-gradient(90deg, var(--monitor-color-d97706), var(--monitor-color-fbbf24));
}
 
.ls-monitor .progress-fill.degraded {
	background: linear-gradient(90deg, var(--monitor-color-c2410c), var(--monitor-color-f59e0b));
}

.ls-monitor .progress-fill.monitoring {
	background: linear-gradient(90deg, var(--monitor-color-d97706), var(--monitor-color-fbbf24));
}
 
.ls-monitor .progress-fill.partial-outage {
	background: linear-gradient(90deg, var(--monitor-color-dc2626), var(--monitor-color-f87171));
}
 
.ls-monitor .progress-fill.maintenance {
	background: linear-gradient(90deg, var(--monitor-color-2563eb), var(--monitor-color-60a5fa));
}

.ls-monitor .bars {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: var(--showcase-space-4);
	height: var(--showcase-space-10);
	margin-top: var(--showcase-dimension-50)
}

.ls-monitor .bars div {
	background: var(--monitor-color-10b981);
}

@media (max-width: 1100px) {

	.ls-monitor .metrics-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {

	.ls-monitor .status-wrapper {
		margin: var(--showcase-space-15) auto;
		padding: var(--showcase-space-10);
	}
}

@media (max-width: 700px) {

	.ls-monitor .status-panel {
		padding: var(--showcase-space-18);
	}
}

@media (max-width: 700px) {

	.ls-monitor .status-header {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 700px) {

	.ls-monitor .operation-banner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 700px) {

	.ls-monitor .metrics-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {

	.ls-monitor .service-top {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--showcase-space-5);
	}
}

@media (max-width: 700px) {

	.ls-monitor .live-info {
		font-size: var(--showcase-type-11);
	}
}

@keyframes monitor-pulse-dot {

	0% {
		box-shadow: 0 0 0 0
            var(--monitor-blend-16-185-129-p45);
	}

	70% {
		box-shadow: 0 0 0 9px
            var(--monitor-blend-16-185-129-0);
	}

	100% {
		box-shadow: 0 0 0 0
            var(--monitor-blend-16-185-129-0);
	}
}

.ls-monitor { color:var(--monitor-color-171717); }

.ls-monitor .status-title { margin:0; color:var(--monitor-color-27684a); }

.ls-monitor .services-title { color:var(--monitor-color-27684a); }

.ls-monitor .operation-left .operation-dot,.ls-monitor .live-dot { flex-shrink:0; }

.ls-monitor .metric-value { line-height:1.3; }

.ls-monitor .metric-extra { margin-top:var(--showcase-space-5); }

.ls-monitor .bars div { transition:opacity var(--monitor-motion-1400) ease,transform var(--monitor-motion-1400) ease; transform-origin:bottom; }

@media(prefers-reduced-motion:reduce){.ls-monitor *{animation:none!important;transition:none!important;}}