/**
 * Тёмная тема по системной настройке (ОС / браузер).
 * Подключается после Vars.css и стилей страниц; переопределяет :root и точечные жёсткие цвета.
 */

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;

		--color-bg: #0E1015;
		--color-bg-secondary: #14171F;
		--color-surface: #1A1D26;
		--color-surface-muted: #222731;
		--color-surface-dark: #2A2F3C;
		--color-border-light: rgb(52 59 74 / 0.7);
		--color-border: #343B4A;
		--color-border-strong: #434C5E;

		--color-text: #EEF1F6;
		--color-text-secondary: #9AA3B2;
		--color-text-tertiary: #6B7585;
		--color-text-on-accent: #FFFFFF;
		--color-text-on-dark: #FFFFFF;

		--color-link: #8BB8FF;

		--color-primary: #6B95FF;
		--color-primary-hover: #89ACFF;
		--color-primary-active: #537AE8;
		--color-primary-soft: rgba(107, 149, 255, 0.22);

		--color-success: #3DDCA0;
		--color-success-hover: #5CE5B0;
		--color-success-soft: rgba(61, 220, 160, 0.16);

		--color-warning: #FFB04D;
		--color-warning-hover: #FFC266;
		--color-warning-soft: rgba(255, 176, 77, 0.16);

		--color-danger: #FF7A7E;
		--color-danger-hover: #FF9498;
		--color-danger-soft: rgba(255, 122, 126, 0.16);

		--color-info: #8BB8FF;
		--color-info-soft: rgba(139, 184, 255, 0.16);

		--error-message-bg: var(--color-danger-soft);
		--error-message-color: var(--color-danger);
		--success-message-bg: var(--color-success-soft);
		--success-message-color: var(--color-success);
		--success-color: var(--color-success);

		--sport-running: #FFB04D;
		--sport-cycling: #3DDCA0;
		--sport-trail: #6B95FF;
		--sport-yoga: #A78BFA;
		--sport-strength: #FF7A7E;
		--sport-swimming: #22D3EE;
		--sport-hiking: #9CCC65;
		--sport-tennis: #FB7185;

		--status-draft: #6B7585;
		--status-published: #3DDCA0;
		--status-pending: #FFB04D;
		--status-hidden: #9AA3B2;
		--status-blocked: #FF7A7E;

		--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
		--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
		--shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45);
		--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);

		--focus-ring: 0 0 0 4px rgba(107, 149, 255, 0.35);
	}

	/* --- Макет: чаты и общая оболочка --- */
	.page-wrapper {
		background:
			radial-gradient(circle at top right, rgba(107, 149, 255, 0.14), transparent 28%),
			radial-gradient(circle at top left, rgba(61, 220, 160, 0.09), transparent 22%),
			var(--color-bg);
	}

	.page-nav {
		background: rgba(20, 23, 31, 0.94);
	}

	@media all and (max-width: 520px) {
		.page-nav {
			border-top-color: var(--color-border);
		}
	}

	@media all and (min-width: 521px) {
		.page-nav {
			border-right-color: var(--color-border);
		}
	}

	@media all and (min-width: 940px) {
		.page-content__sidebar {
			background: linear-gradient(180deg, rgb(14 16 21) 0%, rgba(20, 23, 31, 0.99) 100%);
			border-right-color: var(--color-border);
		}
	}

	.panel-header {
		background: rgba(20, 23, 31, 0.88);
		border-bottom-color: var(--color-border);
	}

	/* --- Скелетоны загрузки --- */
	.view-loading:after {
		background:
			linear-gradient(90deg, rgba(255, 255, 255, 0.04) 33%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 66%)
			var(--color-surface-muted);
	}

	.loading-style:after {
		background:
			linear-gradient(90deg, rgba(255, 255, 255, 0.04) 33%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 66%)
			var(--color-surface-muted);
	}

	/* --- Модальные окна --- */

	.modal-w__close:hover {
		background: var(--color-surface-muted);
	}

	.modal-w__header {
		border-bottom-color: var(--color-border);
	}

	@media all and (min-width: 521px) {
		.modal-w__container {
			border-color: var(--color-border);
			box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
		}

		.modal-w__close {
			border-color: var(--color-border);
		}
	}

	/* --- Подсветка в подсказках форм --- */
	.input-suggestion .marker {
		background-color: #4a3f1a;
	}
	
	.search-input input:focus {
		box-shadow: 0 0 0 4px rgb(47 107 255 / 24%)
	}
	
	/* --- Аватары-заглушки .avatar_01–.avatar_50 (см. AuthMain.css) --- */
	.avatar__status {
		border-color: var(--color-surface);
	}

	.avatar_01 { background: linear-gradient(135deg, color-mix(in srgb, rgb(218, 228, 255) 26%, var(--color-surface)), color-mix(in srgb, rgb(243, 246, 255) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #2F6BFF 58%, #ffffff); }
	.avatar_02 { background: linear-gradient(135deg, color-mix(in srgb, rgb(214, 244, 232) 26%, var(--color-surface)), color-mix(in srgb, rgb(241, 251, 247) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #19C37D 58%, #ffffff); }
	.avatar_03 { background: linear-gradient(135deg, color-mix(in srgb, rgb(255, 234, 209) 26%, var(--color-surface)), color-mix(in srgb, rgb(255, 248, 240) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #FF8A00 58%, #ffffff); }
	.avatar_04 { background: linear-gradient(135deg, color-mix(in srgb, rgb(234, 226, 253) 26%, var(--color-surface)), color-mix(in srgb, rgb(248, 245, 254) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #8B5CF6 58%, #ffffff); }
	.avatar_05 { background: linear-gradient(135deg, color-mix(in srgb, rgb(250, 222, 223) 26%, var(--color-surface)), color-mix(in srgb, rgb(253, 244, 244) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #E5484D 58%, #ffffff); }

	.avatar_06 { background: linear-gradient(135deg, color-mix(in srgb, rgb(209, 239, 245) 26%, var(--color-surface)), color-mix(in srgb, rgb(240, 250, 252) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #00A6C7 58%, #ffffff); }
	.avatar_07 { background: linear-gradient(135deg, color-mix(in srgb, rgb(253, 220, 226) 26%, var(--color-surface)), color-mix(in srgb, rgb(254, 243, 245) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #F43F5E 58%, #ffffff); }
	.avatar_08 { background: linear-gradient(135deg, color-mix(in srgb, rgb(233, 246, 213) 26%, var(--color-surface)), color-mix(in srgb, rgb(248, 252, 241) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #84CC16 58%, #ffffff); }
	.avatar_09 { background: linear-gradient(135deg, color-mix(in srgb, rgb(252, 222, 237) 26%, var(--color-surface)), color-mix(in srgb, rgb(254, 244, 249) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #EC4899 58%, #ffffff); }
	.avatar_10 { background: linear-gradient(135deg, color-mix(in srgb, rgb(212, 239, 251) 26%, var(--color-surface)), color-mix(in srgb, rgb(241, 250, 254) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #0EA5E9 58%, #ffffff); }

	.avatar_11 { background: linear-gradient(135deg, color-mix(in srgb, rgb(239, 224, 254) 26%, var(--color-surface)), color-mix(in srgb, rgb(250, 245, 255) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #A855F7 58%, #ffffff); }
	.avatar_12 { background: linear-gradient(135deg, color-mix(in srgb, rgb(215, 245, 226) 26%, var(--color-surface)), color-mix(in srgb, rgb(242, 252, 245) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #22C55E 58%, #ffffff); }
	.avatar_13 { background: linear-gradient(135deg, color-mix(in srgb, rgb(254, 235, 220) 26%, var(--color-surface)), color-mix(in srgb, rgb(255, 248, 243) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #FB923C 58%, #ffffff); }
	.avatar_14 { background: linear-gradient(135deg, color-mix(in srgb, rgb(220, 232, 253) 26%, var(--color-surface)), color-mix(in srgb, rgb(243, 248, 254) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #3B82F6 58%, #ffffff); }
	.avatar_15 { background: linear-gradient(135deg, color-mix(in srgb, rgb(248, 222, 252) 26%, var(--color-surface)), color-mix(in srgb, rgb(254, 244, 254) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #D946EF 58%, #ffffff); }

	.avatar_16 { background: linear-gradient(135deg, color-mix(in srgb, rgb(210, 242, 247) 26%, var(--color-surface)), color-mix(in srgb, rgb(240, 251, 252) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #06B6D4 58%, #ffffff); }
	.avatar_17 { background: linear-gradient(135deg, color-mix(in srgb, rgb(254, 230, 213) 26%, var(--color-surface)), color-mix(in srgb, rgb(255, 247, 241) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #F97316 58%, #ffffff); }
	.avatar_18 { background: linear-gradient(135deg, color-mix(in srgb, rgb(212, 242, 232) 26%, var(--color-surface)), color-mix(in srgb, rgb(241, 251, 247) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #10B981 58%, #ffffff); }
	.avatar_19 { background: linear-gradient(135deg, color-mix(in srgb, rgb(227, 227, 252) 26%, var(--color-surface)), color-mix(in srgb, rgb(246, 246, 254) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #6366F1 58%, #ffffff); }
	.avatar_20 { background: linear-gradient(135deg, color-mix(in srgb, rgb(253, 238, 211) 26%, var(--color-surface)), color-mix(in srgb, rgb(254, 249, 240) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #F59E0B 58%, #ffffff); }

	.avatar_21 { background: linear-gradient(135deg, color-mix(in srgb, rgb(252, 221, 221) 26%, var(--color-surface)), color-mix(in srgb, rgb(254, 244, 244) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #EF4444 58%, #ffffff); }
	.avatar_22 { background: linear-gradient(135deg, color-mix(in srgb, rgb(213, 242, 239) 26%, var(--color-surface)), color-mix(in srgb, rgb(241, 251, 250) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #14B8A6 58%, #ffffff); }
	.avatar_23 { background: linear-gradient(135deg, color-mix(in srgb, rgb(231, 220, 252) 26%, var(--color-surface)), color-mix(in srgb, rgb(247, 243, 254) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #7C3AED 58%, #ffffff); }
	.avatar_24 { background: linear-gradient(135deg, color-mix(in srgb, rgb(251, 225, 211) 26%, var(--color-surface)), color-mix(in srgb, rgb(254, 245, 240) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #EA580C 58%, #ffffff); }
	.avatar_25 { background: linear-gradient(135deg, color-mix(in srgb, rgb(216, 227, 251) 26%, var(--color-surface)), color-mix(in srgb, rgb(242, 246, 254) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #2563EB 58%, #ffffff); }

	.avatar_26 { background: linear-gradient(135deg, color-mix(in srgb, rgb(210, 236, 228) 26%, var(--color-surface)), color-mix(in srgb, rgb(240, 249, 246) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #059669 58%, #ffffff); }
	.avatar_27 { background: linear-gradient(135deg, color-mix(in srgb, rgb(243, 213, 226) 26%, var(--color-surface)), color-mix(in srgb, rgb(251, 241, 245) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #BE185D 58%, #ffffff); }
	.avatar_28 { background: linear-gradient(135deg, color-mix(in srgb, rgb(223, 222, 250) 26%, var(--color-surface)), color-mix(in srgb, rgb(244, 244, 253) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #4F46E5 58%, #ffffff); }
	.avatar_29 { background: linear-gradient(135deg, color-mix(in srgb, rgb(245, 234, 210) 26%, var(--color-surface)), color-mix(in srgb, rgb(252, 248, 240) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #CA8A04 58%, #ffffff); }
	.avatar_30 { background: linear-gradient(135deg, color-mix(in srgb, rgb(211, 235, 241) 26%, var(--color-surface)), color-mix(in srgb, rgb(240, 248, 250) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #0891B2 58%, #ffffff); }

	.avatar_31 { background: linear-gradient(135deg, color-mix(in srgb, rgb(249, 216, 216) 26%, var(--color-surface)), color-mix(in srgb, rgb(253, 242, 242) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #DC2626 58%, #ffffff); }
	.avatar_32 { background: linear-gradient(135deg, color-mix(in srgb, rgb(231, 217, 212) 26%, var(--color-surface)), color-mix(in srgb, rgb(247, 242, 241) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #7C2D12 58%, #ffffff); }
	.avatar_33 { background: linear-gradient(135deg, color-mix(in srgb, rgb(213, 238, 222) 26%, var(--color-surface)), color-mix(in srgb, rgb(241, 249, 244) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #16A34A 58%, #ffffff); }
	.avatar_34 { background: linear-gradient(135deg, color-mix(in srgb, rgb(221, 219, 245) 26%, var(--color-surface)), color-mix(in srgb, rgb(244, 243, 252) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #4338CA 58%, #ffffff); }
	.avatar_35 { background: linear-gradient(135deg, color-mix(in srgb, rgb(243, 212, 220) 26%, var(--color-surface)), color-mix(in srgb, rgb(251, 241, 243) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #BE123C 58%, #ffffff); }

	.avatar_36 { background: linear-gradient(135deg, color-mix(in srgb, rgb(209, 233, 245) 26%, var(--color-surface)), color-mix(in srgb, rgb(240, 248, 252) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #0284C7 58%, #ffffff); }
	.avatar_37 { background: linear-gradient(135deg, color-mix(in srgb, rgb(236, 218, 251) 26%, var(--color-surface)), color-mix(in srgb, rgb(249, 243, 254) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #9333EA 58%, #ffffff); }
	.avatar_38 { background: linear-gradient(135deg, color-mix(in srgb, rgb(223, 231, 212) 26%, var(--color-surface)), color-mix(in srgb, rgb(244, 247, 241) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #4D7C0F 58%, #ffffff); }
	.avatar_39 { background: linear-gradient(135deg, color-mix(in srgb, rgb(244, 221, 211) 26%, var(--color-surface)), color-mix(in srgb, rgb(251, 244, 240) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #C2410C 58%, #ffffff); }
	.avatar_40 { background: linear-gradient(135deg, color-mix(in srgb, rgb(214, 223, 248) 26%, var(--color-surface)), color-mix(in srgb, rgb(241, 244, 253) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #1D4ED8 58%, #ffffff); }

	.avatar_41 { background: linear-gradient(135deg, color-mix(in srgb, rgb(211, 236, 234) 26%, var(--color-surface)), color-mix(in srgb, rgb(240, 249, 248) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #0D9488 58%, #ffffff); }
	.avatar_42 { background: linear-gradient(135deg, color-mix(in srgb, rgb(238, 214, 241) 26%, var(--color-surface)), color-mix(in srgb, rgb(249, 241, 250) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #A21CAF 58%, #ffffff); }
	.avatar_43 { background: linear-gradient(135deg, color-mix(in srgb, rgb(242, 222, 211) 26%, var(--color-surface)), color-mix(in srgb, rgb(251, 244, 240) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #B54708 58%, #ffffff); }
	.avatar_44 { background: linear-gradient(135deg, color-mix(in srgb, rgb(213, 232, 220) 26%, var(--color-surface)), color-mix(in srgb, rgb(241, 247, 243) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #15803D 58%, #ffffff); }
	.avatar_45 { background: linear-gradient(135deg, color-mix(in srgb, rgb(229, 216, 248) 26%, var(--color-surface)), color-mix(in srgb, rgb(246, 242, 253) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #6D28D9 58%, #ffffff); }

	.avatar_46 { background: linear-gradient(135deg, color-mix(in srgb, rgb(243, 213, 226) 26%, var(--color-surface)), color-mix(in srgb, rgb(255, 246, 248) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #E11D48 58%, #ffffff); }
	.avatar_47 { background: linear-gradient(135deg, color-mix(in srgb, rgb(212, 230, 229) 26%, var(--color-surface)), color-mix(in srgb, rgb(242, 252, 251) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #0F766E 58%, #ffffff); }
	.avatar_48 { background: linear-gradient(135deg, color-mix(in srgb, rgb(216, 227, 251) 26%, var(--color-surface)), color-mix(in srgb, rgb(245, 250, 255) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #1E40AF 58%, #ffffff); }
	.avatar_49 { background: linear-gradient(135deg, color-mix(in srgb, rgb(253, 238, 211) 26%, var(--color-surface)), color-mix(in srgb, rgb(255, 253, 244) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #B45309 58%, #ffffff); }
	.avatar_50 { background: linear-gradient(135deg, color-mix(in srgb, rgb(225, 214, 233) 26%, var(--color-surface)), color-mix(in srgb, rgb(251, 251, 255) 20%, var(--color-surface-muted))); color: color-mix(in srgb, #7E22CE 58%, #ffffff); }
}