/**
 * 实时指标科技主题
 * 页面专有规则限定在 .tech-indicator，外层导航由临时 .theme-tech-dark 驱动。
 */
.tech-indicator {
	position: relative;
	min-height: calc(100vh - 50px);
	padding: 24px;
	color: var(--tech-text);
	background: var(--tech-bg-grad);
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(var(--tech-grid-line) 1px, transparent 1px),
			linear-gradient(90deg, var(--tech-grid-line) 1px, transparent 1px);
		background-size: 42px 42px;
		mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 82%);
		pointer-events: none;
	}

	> * {
		position: relative;
		z-index: 1;
	}

	.indicator-hud {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		margin-bottom: 22px;
	}

	.indicator-identity {
		display: flex;
		align-items: center;
		gap: 14px;
		min-width: 0;
	}

	.indicator-identity__mark {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		flex: none;
		border: 1px solid rgba(34, 211, 238, 0.5);
		border-radius: 8px;
		color: var(--tech-cyan);
		background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(59, 130, 246, 0.08));
		box-shadow: inset 0 0 16px rgba(34, 211, 238, 0.08), 0 0 18px rgba(34, 211, 238, 0.2);

		.el-icon {
			font-size: 23px;
		}
	}

	.indicator-title {
		margin: 0;
		color: var(--tech-text-strong);
		font-size: 22px;
		font-weight: 700;
		letter-spacing: 2px;
		line-height: 1.25;
		text-shadow: 0 0 18px rgba(34, 211, 238, 0.3);
	}

	.indicator-kicker {
		margin-top: 4px;
		color: var(--tech-text-dim);
		font-size: 11px;
		letter-spacing: 2px;
		line-height: 1.4;
	}

	.indicator-hud__actions {
		display: flex;
		align-items: center;
		gap: 12px;
		flex: none;
	}

	.indicator-status {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 34px;
		padding: 0 12px;
		border: 1px solid rgba(16, 245, 160, 0.24);
		border-radius: 6px;
		color: var(--tech-green);
		background: rgba(16, 245, 160, 0.06);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 1px;
	}

	.indicator-status.is-error {
		border-color: rgba(255, 77, 109, 0.3);
		color: var(--tech-red);
		background: rgba(255, 77, 109, 0.08);
	}

	.indicator-status__dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: currentColor;
		box-shadow: 0 0 10px currentColor;
		animation: indicator-status-pulse 1.8s ease-in-out infinite;
	}

	.indicator-action.el-button {
		min-height: 34px;
		border-color: rgba(34, 211, 238, 0.3);
		border-radius: 6px;
		color: var(--tech-cyan);
		background: rgba(10, 18, 34, 0.62);

		&:hover,
		&:focus-visible {
			border-color: var(--tech-cyan);
			color: #eaffff;
			background: rgba(34, 211, 238, 0.12);
			box-shadow: 0 0 16px rgba(34, 211, 238, 0.18);
		}
	}

	.indicator-summary {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 14px;
		margin-bottom: 18px;
	}

	.indicator-summary__item {
		position: relative;
		display: flex;
		align-items: center;
		gap: 14px;
		min-height: 92px;
		padding: 16px 18px;
		border: 1px solid var(--tech-border);
		border-radius: 8px;
		background: linear-gradient(135deg, rgba(17, 27, 48, 0.8), rgba(9, 17, 32, 0.68));
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), var(--tech-shadow);
		overflow: hidden;

		&::after {
			content: '';
			position: absolute;
			inset: auto 0 0;
			height: 2px;
			background: linear-gradient(90deg, transparent, var(--summary-accent), transparent);
			opacity: 0.75;
		}
	}

	.indicator-summary__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		flex: none;
		border: 1px solid color-mix(in srgb, var(--summary-accent) 35%, transparent);
		border-radius: 8px;
		color: var(--summary-accent);
		background: color-mix(in srgb, var(--summary-accent) 9%, transparent);
		box-shadow: 0 0 18px color-mix(in srgb, var(--summary-accent) 18%, transparent);

		.el-icon {
			font-size: 21px;
		}
	}

	.indicator-summary__label {
		color: var(--tech-text-dim);
		font-size: 12px;
		letter-spacing: 1px;
	}

	.indicator-summary__value {
		margin-top: 5px;
		color: var(--tech-text-strong);
		font-size: 24px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		line-height: 1;
	}

	.indicator-summary__unit {
		margin-left: 4px;
		color: var(--summary-accent);
		font-size: 12px;
		font-weight: 700;
	}

	.indicator-resource-grid {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 18px;
	}

	.indicator-panel {
		--panel-accent: var(--tech-cyan);
		min-width: 0;
		border: 1px solid var(--tech-border);
		border-radius: 8px;
		background: rgba(11, 20, 37, 0.76);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), var(--tech-shadow);
		backdrop-filter: blur(12px);
		overflow: hidden;
	}

	.indicator-panel--cpu {
		--panel-accent: var(--tech-cyan);
		grid-column: span 3;
	}

	.indicator-panel--memory {
		--panel-accent: var(--tech-purple);
		display: flex;
		grid-column: span 4;
		flex-direction: column;
	}

	.indicator-panel--disk {
		--panel-accent: var(--tech-green);
		display: flex;
		grid-column: span 5;
		flex-direction: column;
	}

	.indicator-panel--memory .indicator-panel__head,
	.indicator-panel--disk .indicator-panel__head {
		flex: none;
	}

	.indicator-panel--memory .indicator-panel__body,
	.indicator-panel--disk .indicator-panel__body {
		flex: 1;
	}

	.indicator-panel__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		min-height: 54px;
		padding: 0 16px;
		border-bottom: 1px solid var(--tech-border);
		background: rgba(13, 24, 43, 0.52);
	}

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

	.indicator-panel__mark {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		flex: none;
		border: 1px solid color-mix(in srgb, var(--panel-accent) 38%, transparent);
		border-radius: 7px;
		color: var(--panel-accent);
		background: color-mix(in srgb, var(--panel-accent) 9%, transparent);

		.el-icon {
			font-size: 17px;
		}
	}

	.indicator-panel__title {
		margin: 0;
		color: var(--tech-text-strong);
		font-size: 14px;
		font-weight: 800;
		letter-spacing: 1.1px;
	}

	.indicator-panel__meta {
		margin-top: 3px;
		color: var(--tech-text-dim);
		font-size: 10px;
		letter-spacing: 1px;
	}

	.indicator-panel__body {
		min-height: 220px;
		padding: 14px 16px 16px;
	}

	.indicator-gauge {
		position: relative;
		min-width: 0;
		text-align: center;
	}

	.indicator-gauge__chart {
		height: 152px;
	}

	.indicator-gauge__caption {
		margin-top: -2px;
		color: #9eb0cc;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.6px;
	}

	.indicator-gauge__caption strong {
		margin: 0 3px;
		color: var(--panel-accent);
		font-size: 14px;
		font-weight: 800;
		font-variant-numeric: tabular-nums;
	}

	.indicator-loads {
		display: grid;
		gap: 7px;
		margin-top: 12px;
	}

	.indicator-load {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		min-height: 29px;
		padding: 0 9px;
		border: 1px solid rgba(34, 211, 238, 0.14);
		border-radius: 5px;
		color: #9eb0cc;
		background: rgba(34, 211, 238, 0.045);
		font-size: 10px;
		letter-spacing: 0.4px;

		strong {
			color: #d8f7ff;
			font-size: 12px;
			font-variant-numeric: tabular-nums;
		}
	}

	.indicator-memory-grid,
	.indicator-disk-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		height: 100%;
	}

	.indicator-capacity-gauge {
		--capacity-accent: #a855f7;
		display: flex;
		justify-content: center;
		padding: 0 3px 3px;
		flex-direction: column;

		.indicator-gauge__chart {
			height: 140px;
		}
	}

	.indicator-capacity-gauge--swap {
		--capacity-accent: #3b82f6;
	}

	.indicator-capacity-track {
		height: 4px;
		margin: 9px 2px 0;
		overflow: hidden;
		border-radius: 2px;
		background: rgba(90, 165, 255, 0.1);

		span {
			display: block;
			height: 100%;
			border-radius: inherit;
			background: var(--capacity-accent);
			box-shadow: 0 0 9px color-mix(in srgb, var(--capacity-accent) 62%, transparent);
			transition: width 360ms ease;
		}
	}

	.indicator-capacity-facts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
		margin-top: 8px;

		span {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 4px;
			min-width: 0;
			padding: 6px;
			border: 1px solid color-mix(in srgb, var(--capacity-accent) 16%, transparent);
			border-radius: 4px;
			background: color-mix(in srgb, var(--capacity-accent) 4%, transparent);
		}

		small {
			color: #8092ad;
			font-size: 9px;
			white-space: nowrap;
		}

		strong {
			overflow: hidden;
			color: #d8e8fa;
			font-size: 10px;
			font-weight: 800;
			font-variant-numeric: tabular-nums;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.indicator-disk-item {
		display: grid;
		grid-template:
			'name' auto
			'kind' auto
			'chart' minmax(130px, 1fr)
			'facts' auto /
			minmax(0, 1fr);
		align-items: stretch;
		gap: 0;
		min-height: 178px;
		padding: 12px;
		border: 1px solid rgba(90, 165, 255, 0.1);
		border-radius: 7px;
		background: rgba(8, 16, 31, 0.54);
	}

	.indicator-disk-copy {
		display: contents;
	}

	.indicator-disk-name {
		grid-area: name;
		color: var(--tech-text-strong);
		font-size: 20px;
		font-weight: 800;
		letter-spacing: 1px;
	}

	.indicator-disk-kind {
		grid-area: kind;
		margin-top: 2px;
		color: var(--tech-text-dim);
		font-size: 8px;
		font-weight: 700;
		letter-spacing: 0.8px;
	}

	.indicator-disk-facts {
		display: grid;
		grid-area: facts;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
		margin-top: 2px;

		span {
			display: flex;
			align-items: flex-start;
			gap: 3px;
			min-width: 0;
			padding: 6px 7px 2px;
			border-left: 1px solid rgba(90, 165, 255, 0.09);
			flex-direction: column;

			&:first-child {
				padding-left: 0;
				border-left: 0;
			}
		}

		small {
			color: #8092ad;
			font-size: 9px;
			white-space: nowrap;
		}

		strong {
			overflow: hidden;
			color: #d8e8fa;
			font-size: 11px;
			font-weight: 800;
			font-variant-numeric: tabular-nums;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.indicator-disk-facts__free {
			strong {
				color: var(--tech-green);
			}
		}
	}

	.indicator-disk-chart {
		grid-area: chart;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 130px;
	}

	.indicator-service-panel {
		--panel-accent: var(--tech-amber);
		margin-top: 18px;
	}

	.indicator-service-tools {
		display: flex;
		align-items: center;
		gap: 14px;
		min-width: 0;
	}

	.indicator-service-search {
		width: 230px;

		.el-input__wrapper {
			min-height: 34px;
			padding: 0 10px;
			border-radius: 5px;
			background:
				linear-gradient(135deg, rgba(255, 176, 32, 0.05), transparent),
				rgba(8, 16, 31, 0.82);
			box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.22);
			transition:
				background 0.2s ease,
				box-shadow 0.2s ease;

			&:hover,
			&.is-focus {
				background:
					linear-gradient(135deg, rgba(255, 176, 32, 0.09), transparent),
					rgba(9, 19, 36, 0.9);
				box-shadow:
					inset 0 0 0 1px rgba(255, 176, 32, 0.46),
					0 0 14px rgba(255, 176, 32, 0.08);
			}
		}

		.el-input__inner {
			color: #d8e8fa;
			font-size: 11px;
			letter-spacing: 0.3px;
		}

		.el-input__prefix,
		.el-input__clear {
			color: var(--tech-amber);
		}
	}

	.indicator-service-count {
		color: #9eb0cc;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.7px;
		white-space: nowrap;

		strong {
			margin-right: 3px;
			color: var(--tech-amber);
			font-size: 16px;
			font-weight: 800;
			font-variant-numeric: tabular-nums;
		}
	}

	.indicator-service-table.el-table {
		--el-table-bg-color: transparent;
		--el-table-tr-bg-color: transparent;
		--el-table-header-bg-color: rgba(18, 31, 54, 0.92);
		--el-table-row-hover-bg-color: rgba(255, 176, 32, 0.065);
		--el-table-border-color: rgba(90, 165, 255, 0.12);
		--el-table-header-text-color: #d7f5ff;
		--el-table-text-color: var(--tech-text);
		width: 100%;
		background: transparent;

		&::before,
		.el-table__inner-wrapper::before {
			display: none;
		}

		th.el-table__cell {
			height: 48px;
			background: rgba(18, 31, 54, 0.92) !important;
			font-size: 11px;
			font-weight: 800;
			letter-spacing: 1.2px;
			text-shadow: 0 0 10px rgba(34, 211, 238, 0.2);

			.cell {
				color: #d7f5ff;
			}
		}

		td.el-table__cell {
			height: 54px;
			border-bottom-color: rgba(90, 165, 255, 0.1);
			background: transparent;
		}

		.el-table__row:hover > td.el-table__cell {
			background: rgba(255, 176, 32, 0.065) !important;
		}
	}

	.indicator-service-name {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		color: #d4e0f2;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.3px;
	}

	.indicator-service-name__dot {
		width: 7px;
		height: 7px;
		flex: none;
		border-radius: 50%;
		background: var(--tech-amber);
		box-shadow: 0 0 9px rgba(255, 176, 32, 0.72);
	}

	.indicator-service-size {
		color: #ffd585;
		font-size: 13px;
		font-weight: 800;
		font-variant-numeric: tabular-nums;
	}

	.indicator-pagination {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		min-height: 58px;
		padding: 10px 16px;
		border-top: 1px solid rgba(90, 165, 255, 0.1);
		background: rgba(9, 18, 34, 0.7);
		overflow-x: auto;

		.el-pagination {
			--el-pagination-bg-color: transparent;
			--el-pagination-text-color: #9eb0cc;
			--el-pagination-button-color: #9eb0cc;
			--el-pagination-button-bg-color: rgba(13, 27, 48, 0.78);
			--el-pagination-hover-color: var(--tech-amber);
			gap: 6px;
			white-space: nowrap;
		}

		.el-pagination__total,
		.el-pagination__sizes {
			color: #8fa2c2;
			font-size: 11px;
			font-weight: 600;
		}

		.el-pagination button,
		.el-pager li {
			min-width: 30px;
			height: 30px;
			border: 1px solid rgba(90, 165, 255, 0.15);
			border-radius: 5px;
			color: #9eb0cc;
			background: rgba(13, 27, 48, 0.78) !important;
		}

		.el-pagination button:not(:disabled):hover,
		.el-pager li:hover {
			border-color: rgba(255, 176, 32, 0.48);
			color: var(--tech-amber);
		}

		.el-pager li.is-active {
			border-color: rgba(255, 176, 32, 0.7);
			color: #fff4d6;
			background: rgba(255, 176, 32, 0.14) !important;
			box-shadow: 0 0 12px rgba(255, 176, 32, 0.14);
		}

		.el-select__wrapper {
			min-height: 30px;
			border-radius: 5px;
			background: rgba(13, 27, 48, 0.82);
			box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.2);
		}
	}

	.indicator-network-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
		margin-top: 18px;
	}

	.indicator-network-panel {
		--panel-accent: var(--tech-cyan);
	}

	.indicator-network-panel--tx {
		--panel-accent: var(--tech-purple);
	}

	.indicator-network-select {
		width: 190px;

		.el-select__wrapper {
			min-height: 34px;
			border-radius: 6px;
			background: rgba(8, 16, 31, 0.84);
			box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel-accent) 28%, transparent);

			&:hover,
			&.is-focused {
				box-shadow:
					inset 0 0 0 1px color-mix(in srgb, var(--panel-accent) 68%, transparent),
					0 0 14px color-mix(in srgb, var(--panel-accent) 14%, transparent);
			}
		}

		.el-select__placeholder,
		.el-select__selected-item {
			color: #c7d2e5;
			font-size: 12px;
			font-weight: 600;
		}
	}

	.indicator-network-chart {
		height: 320px;
		padding: 6px 10px 0;
	}

	.indicator-error {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 16px;
		padding: 11px 14px;
		border: 1px solid rgba(255, 77, 109, 0.28);
		border-radius: 7px;
		color: #ff9daf;
		background: rgba(255, 77, 109, 0.07);
		font-size: 12px;
		font-weight: 600;

		.el-icon {
			font-size: 18px;
		}

		.indicator-action {
			margin-left: auto;
		}
	}
}

html.theme-tech-dark .el-popper.indicator-network-popper {
	border: 1px solid rgba(34, 211, 238, 0.34) !important;
	border-radius: 8px;
	color: #c7d2e5 !important;
	background: #0c172a !important;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.48), 0 0 20px rgba(34, 211, 238, 0.12);
}

html.theme-tech-dark .el-popper.indicator-network-popper {
	padding: 6px;

	.el-select-dropdown {
		background: transparent;
	}

	.el-select-dropdown__item {
		height: 38px;
		margin: 2px 0;
		border-radius: 6px;
		color: #b9c8df !important;

		&:hover,
		&.is-hovering {
			color: #e6fbff !important;
			background: rgba(34, 211, 238, 0.09);
		}

		&.is-selected {
			color: #eaffff !important;
			background: linear-gradient(90deg, rgba(34, 211, 238, 0.16), transparent);
			box-shadow: inset 3px 0 0 var(--tech-cyan);
			font-weight: 700;
		}
	}
}

@keyframes indicator-status-pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.45;
		transform: scale(0.8);
	}
}

@media (max-width: 1380px) {
	.tech-indicator {
		.indicator-panel--cpu,
		.indicator-panel--memory {
			grid-column: span 6;
		}

		.indicator-panel--disk {
			grid-column: span 12;
		}
	}
}

@media (max-width: 980px) {
	.tech-indicator {
		.indicator-summary,
		.indicator-network-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.indicator-panel--cpu,
		.indicator-panel--memory,
		.indicator-panel--disk {
			grid-column: span 12;
		}
	}
}

@media (max-width: 760px) {
	.tech-indicator {
		min-height: calc(100vh - 50px);
		padding: 16px 12px 24px;

		.indicator-hud {
			align-items: flex-start;
			flex-direction: column;
		}

		.indicator-hud__actions {
			width: 100%;
			flex-wrap: wrap;
		}

		.indicator-summary,
		.indicator-network-grid,
		.indicator-memory-grid,
		.indicator-disk-grid {
			grid-template-columns: 1fr;
		}

		.indicator-summary__item {
			min-height: 76px;
			padding: 13px 15px;
		}

		.indicator-panel__head {
			align-items: flex-start;
			flex-direction: column;
			padding: 12px 14px;
		}

		.indicator-panel__meta {
			display: none;
		}

		.indicator-network-select {
			width: 100%;
		}

		.indicator-service-tools {
			width: 100%;
		}

		.indicator-service-search {
			width: auto;
			min-width: 0;
			flex: 1;
		}

		.indicator-network-chart {
			height: 280px;
		}

		.indicator-pagination {
			justify-content: flex-start;
			padding: 10px 12px;
		}

		.indicator-disk-item {
			grid-template-columns: 1fr minmax(130px, 1fr);
		}
	}
}