* {					  /* Сброс всех отступов и паддингов, чтобы избежать проблем с различиями в браузерах */
	margin: 0;
	padding: 0;
	box-sizing: border-box; 		  /* Убираем влияние margin и padding на размер элемента */
}

html, body {				  /* Общие стили для html и body */
	height: 100%;                         /* Устанавливаем 100% высоты для body и html */
	width: 100%;                          /* Устанавливаем 100% ширины для body и html */
	font-family: Arial, sans-serif;       /* Основной шрифт на странице */
	display: flex;                        /* Используем flexbox для основного контейнера */
	flex-direction: column;               /* Элементы внутри будут расположены по вертикали */
	justify-content: flex-start;          /* Все элементы выравниваются по верхнему краю */
	align-items: stretch;                 /* Элементы растягиваются по ширине */
	overflow-x: hidden;                   /* Отключаем горизонтальную прокрутку */
}

body::-webkit-scrollbar {		  /* Стили для прокрутки */
	width: 8px;                           /* Устанавливаем ширину полосы прокрутки */
}

body::-webkit-scrollbar-track {
	background-color: #f1f1f1;            /* Цвет фона полосы прокрутки */
}

body::-webkit-scrollbar-thumb {
	background-color: #888;               /* Цвет самой полосы прокрутки */
}

body::-webkit-scrollbar-thumb:hover {
	background-color: #555;               /* Цвет полосы прокрутки при наведении */
}

h1, h2, h3, h4, h5, h6 {		  /* Стиль для всех заголовков (h1, h2, h3, и т.д.) */
	font-weight: normal;                  /* Убираем жирный шрифт по умолчанию */
	margin: 1rem 0;                       /* Отступы сверху и снизу для заголовков */
}

p {					  /* Оформление для абзацев */
	line-height: 1.6;                     /* Высота строки для лучшего восприятия текста */
	margin-bottom: 1rem;                  /* Отступ снизу для абзацев */
}

a {					  /* Оформление ссылок на странице */
	color: inherit;                       /* Ссылки наследуют цвет от родительского элемента */
	text-decoration: none;                /* Убираем подчеркивание по умолчанию */
}

a:hover {
	color: #007bff;                       /* Цвет при наведении на ссылку */
	text-decoration: underline;           /* Подчеркивание при наведении */
}

a:active, a:visited {
	color: #f47059;                       /* Цвет активных и посещенных ссылок */
}

button {				  /* Стили для кнопок */
	background-color: #007bff;            /* Цвет фона кнопки */
	color: #fff;                          /* Цвет текста кнопки */
	border: none;                         /* Убираем рамку */
	padding: 10px 20px;                   /* Отступы внутри кнопки */
	border-radius: 5px;                   /* Закругленные углы кнопки */
	cursor: pointer;                      /* Указатель при наведении */
}

button:hover {
	background-color: #f0f0f0;            /* Цвет кнопки при наведении (светло-серый) */
}

img {					  /* Оформление для изображений */
	max-width: 100%;                      /* Ограничиваем ширину изображений */
	height: auto;                         /* Автоматическая высота изображений */
}

.container {				  /* Универсальные стили для контейнеров */
	width: 100%;                          /* Ширина контейнера 100% */
	max-width: 1200px;                    /* Максимальная ширина контейнера */
	margin: 0 auto;                       /* Центрирование контейнера по горизонтали */
	padding: 20px;                        /* Отступы внутри контейнера */
}

ul, ol {				  /* Стили для списков */
	list-style: none;                     /* Убираем маркеры и нумерацию у списков */
	padding-left: 0;                      /* Убираем отступ слева */
}

li {
	margin-bottom: 10px;                  /* Отступ между элементами списка */
}

input, textarea, select, button {	  /* Стили для полей ввода и текстовых областей */
	font-size: 1rem;                      /* Размер шрифта в элементах формы */
	border-radius: 4px;                   /* Закругленные углы */
	border: 1px solid #ccc;               /* Легкая рамка */
	padding: 10px;                        /* Отступы внутри полей ввода */
	margin-bottom: 10px;                  /* Отступ снизу */
}

input:focus, textarea:focus, select:focus { /* Стили для фокуса на полях ввода */
	border-color: #007bff;                /* Изменение цвета бордера при фокусе */
	outline: none;                        /* Убираем обводку вокруг поля */
}

/* Минимальные размеры для удобных touch-таргетов на мобильных */
@media (max-width: 768px) {
        button,
        .btn,
        a.button,
        a.btn,
        input[type="button"],
        input[type="submit"],
        .tap-large {
                min-width: 44px;
                min-height: 44px;
        }
}

/* Доступность - настройки для слабовидящих */
.a11y-large-text { font-size: 18px; }
.a11y-large-text h1 { font-size: 2.2em; }
.a11y-large-text h2 { font-size: 1.8em; }
.a11y-large-text h3 { font-size: 1.4em; }
.a11y-large-text button, .a11y-large-text input, .a11y-large-text select { font-size: 1.05em; }

.a11y-high-contrast { background: #000 !important; color: #fff !important; }
.a11y-high-contrast body { background: #000 !important; color: #fff !important; }
.a11y-high-contrast a { color: #00e5ff !important; }
.a11y-high-contrast .card, .a11y-high-contrast .container, .a11y-high-contrast .menu-container { background: #111 !important; color:#fff !important; border-color:#555 !important; }
.a11y-high-contrast button { background:#fff !important; color:#000 !important; border:2px solid #fff !important; }

.a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 0.15em; }

.a11y-reduce-motion *, .a11y-reduce-motion *::before, .a11y-reduce-motion *::after { transition: none !important; animation: none !important; }

/* Кнопки подписки и RSS — глобальные переопределения для ссылок-кнопок */
.tg-btn, .vk-btn, .rss-btn {
        color: #fff !important;
        text-decoration: none !important;
}
.tg-btn:hover, .vk-btn:hover, .rss-btn:hover {
        color: #fff !important;
        text-decoration: none !important;
}
.tg-btn:visited, .vk-btn:visited, .rss-btn:visited,
.tg-btn:active, .vk-btn:active, .rss-btn:active,
.tg-btn:focus, .vk-btn:focus, .rss-btn:focus {
        color: #fff !important;
        text-decoration: none !important;
        outline: none;
}

/* Кнопки шаринга в статьях */
.share-btn,
.share-btn:hover,
.share-btn:visited,
.share-btn:active,
.share-btn:focus {
        color: #fff !important;
        text-decoration: none !important;
        outline: none;
}

/* Стабильный желобок полосы прокрутки, чтобы контент не прилипал к скроллу */
html, body { scrollbar-gutter: stable; overflow-y: auto; }

/* Отключаем ограничение ширины у body во всех статьях */
body { max-width: none !important; margin: 0 !important; }

/* Центруем и ограничиваем ширину основных контейнеров статей/новостей */
.article-container, .news-container { max-width: 800px; margin-left: auto; margin-right: auto; }

/* Небольшой внутренний отступ справа для статей/новостей */
.article-container, .news-container { padding-right: 12px; }

/* Центрирование хлебных крошек на страницах статей */
.breadcrumb { max-width: 800px; margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; }

/* Адаптивность контента статей */
.article-content img { max-width: 100%; height: auto; }
.article-content table { width: 100%; display: block; overflow-x: auto; }
.article-title { font-size: clamp(1.6rem, 6vw, 2.5rem); }
.tech-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Гарантируем, что контейнеры статей не выходят за экран */
.article-container, .news-container { width: 100%; box-sizing: border-box; }

/* Разрешаем горизонтальную прокрутку на случай редких переполнений */
html, body { overflow-x: auto !important; }