/**
 * Bureau 762 — «device» UI layer: dot grid, glass, soft LED strip.
 * Inspired by minimalist transparent-hardware / glyph-matrix aesthetics (no third‑party marks or assets).
 */
:root {
	--b762-dot: rgba(255, 255, 255, 0.11);
	--b762-dot-pitch: 12px;
	--b762-glass-blur: 44px;
	--b762-glass-sat: 1.35;
}

body.light-mode {
	--b762-dot: rgba(15, 15, 18, 0.06);
}

.b762-device-layer {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: radial-gradient(circle at center, var(--b762-dot) 0.85px, transparent 1.1px);
	background-size: var(--b762-dot-pitch) var(--b762-dot-pitch);
	opacity: 0.58;
	animation: b762-device-breathe 10s ease-in-out infinite;
}

@keyframes b762-device-breathe {
	0%,
	100% {
		opacity: 0.36;
	}
	50% {
		opacity: 0.5;
	}
}

/* Soft bottom strip — hint of indicator / charge rail */
.b762-device-layer::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: min(480px, 72vw);
	height: 4px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 68, 56, 0.12) 20%,
		rgba(255, 68, 56, 0.35) 50%,
		rgba(255, 68, 56, 0.12) 80%,
		transparent 100%
	);
	filter: blur(0.5px);
	opacity: 0.55;
}

body.light-mode .b762-device-layer {
	opacity: 0.28;
	animation: none;
}

body.light-mode .b762-device-layer::after {
	opacity: 0.35;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(196, 43, 30, 0.08) 25%,
		rgba(196, 43, 30, 0.22) 50%,
		rgba(196, 43, 30, 0.08) 75%,
		transparent 100%
	);
}

/* Glass: slightly stronger frosted panels (main + ШТАБ + radio) */
nav {
	background: rgba(6, 6, 8, 0.52) !important;
	backdrop-filter: blur(var(--b762-glass-blur)) saturate(var(--b762-glass-sat)) !important;
	-webkit-backdrop-filter: blur(var(--b762-glass-blur)) saturate(var(--b762-glass-sat)) !important;
}

body.light-mode nav {
	background: rgba(244, 242, 237, 0.78) !important;
	backdrop-filter: blur(32px) saturate(1.2) !important;
	-webkit-backdrop-filter: blur(32px) saturate(1.2) !important;
}

.a-card,
.auth-box,
.shtab-header,
.shtab-sidebar,
.modal,
.radio-mod,
.radio-header {
	backdrop-filter: blur(22px) saturate(1.25);
	-webkit-backdrop-filter: blur(22px) saturate(1.25);
}

body.light-mode .a-card,
body.light-mode .auth-box,
body.light-mode .shtab-header,
body.light-mode .shtab-sidebar,
body.light-mode .modal,
body.light-mode .radio-mod,
body.light-mode .radio-header {
	backdrop-filter: blur(18px) saturate(1.1);
	-webkit-backdrop-filter: blur(18px) saturate(1.1);
}

@media (max-width: 520px) {
	:root {
		--b762-dot-pitch: 10px;
	}
}