html, body {
    font-family: 'Arial';
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    color: #444;
    /*background: #fffbf3; !* Цвет общего фона *!*/
    background-image: url("../images/Геометрия.png"); /*Картинка фона */
    background-size: cover; /*Картинка фона */
}

/* ===== Счетчик просмотров записей и кнопки лайков и дизлайков ===== */
.views-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px 0;
}

/* ===== ГРУППА: СЧЕТЧИК + КНОПКИ ===== */
.view-vote-combo {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

/* ===== СЧЕТЧИК ПРОСМОТРОВ ===== */
.views-widget {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    vertical-align: top; /* ← ИЗМЕНЕНО: было middle, стало top */
}

.views-widget .eye-icon {
    width: 18px;
    height: 18px;
    opacity: 0.8;
}

.views-widget .views-count {
    font-family: 'Times New Roman', serif;
    font-size: 16px;
    font-weight: bold;
    color: #2c3e50;
    line-height: 1;
}

.views-widget--index {
    margin-right: 0;
}

.views-widget--post {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-color: #ccc;
}

/* ===== БЛОК КНОПОК ГОЛОСОВАНИЯ ===== */
.vote-block {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

/* ===== КНОПКИ ЛАЙКОВ/ДИЗЛАЙКОВ ===== */
.vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    vertical-align: top; /* ← ИЗМЕНЕНО: было middle, стало top */
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1;
}

.vote-icon {
    width: 18px;
    height: 18px;
    opacity: 0.8;
    transition: all 0.2s ease;
}

.like-icon {
    stroke: #4caf50;
}

.dislike-icon {
    stroke: #f44336;
}

.vote-count {
    font-weight: bold;
    color: #2c3e50;
    min-width: 18px;
    text-align: center;
}

.like-count {
    color: #2e7d32;
}

.dislike-count {
    color: #c62828;
}

/* Ховер эффекты */
.vote-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-color: #ccc;
}

.like-btn:hover .like-icon {
    stroke: #388e3c;
    opacity: 1;
    transform: scale(1.05);
}

.dislike-btn:hover .dislike-icon {
    stroke: #d32f2f;
    opacity: 1;
    transform: scale(1.05);
}

/* Активное состояние */
.vote-btn.active {
    border-width: 1.5px;
}

.like-btn.active {
    border-color: #4caf50;
    background-color: #f8f9fa;
}

.like-btn.active .like-icon {
    stroke: #388e3c;
    opacity: 1;
}

.like-btn.active .like-count {
    color: #1b5e20;
}

.dislike-btn.active {
    border-color: #f44336;
    background-color: #f8f9fa;
}

.dislike-btn.active .dislike-icon {
    stroke: #d32f2f;
    opacity: 1;
}

.dislike-btn.active .dislike-count {
    color: #b71c1c;
}

/* Для неавторизованных */
.vote-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.vote-btn:disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: #e0e0e0;
    background: white;
}

.vote-btn:disabled .vote-icon {
    stroke: #999;
}

.vote-btn:disabled .vote-count {
    color: #777;
}

/*=========== Стили для Mobile ==================*/

@media all and (max-width: 1280px) {
    /* Скрывание левого меню с категориями и верхнего меню для ПК*/
    .mainmenu, .article-panel, .last_desktop, #theme-switch,.link-read-post {
        display: none;
    }

    .mainmenu-mobile, .article-panel-mobile {
        display: block;
    }


    #leftchapters {
        display: none;
    }

    ul.list-articles, div.list-articles, div.content-text { /* Отступы текста по левому краю */
        margin-top: -10px;
        margin-left: -8px;
        margin-right: 0;
    }

    /* Основной отступ для страницы */
    body {
        padding-top: 70px; /* 112px (высота меню) - 20px (ваш margin-top) */
    }

    /* Специальные корректировки для разных блоков */
    .article-panel-mobile {
        margin-top: 0 !important; /* Компенсируем ваш отрицательный margin */
    }

    /* Исправление для тегов */
    ul.tags-list {
        margin-top: -15px !important; /* Вместо -15px */
        margin-left: -8px;
        padding: 0;
    }


/* Закрепляем верхнее меню */
.header {
    margin-top: -20px;
    height: 112px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* ← ДОБАВЬТЕ ЭТУ СТРОЧКУ! */
    background: #3F4137; /* Важно: добавьте фон, чтобы перекрывать контент */
}

    /* Отмена глобальных отступов для контента */
    .content-text {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

p.link-read-post-mobile {
    text-align: right;
}

p.link-read-post-mobile a { /* Кнопка Далее*/
    padding: 10px 15px; /* Размеры кнопки Далее */
    min-width: 100px;
    background: #162d72;
    color: #fff;
    text-decoration: none;
}
    div.logo-mobile {
        position: relative;
        background: #3F4137; /* Цвет фона квадрата */
        border-radius: 8px;
        margin-left: -20px;
        width: 82px;
        height: 82px;
        overflow: visible; /* Видимость границ рамки вокруг аватара вне блока (не будет срезатьтся) */
    }

    div.logo-mobile::before {
        content: '';
        position: absolute;
        top: 9px;  /* Отступ сверху */
        left: 5px; /* Отступ слева */
        width: 68px;  /* 82px - 5px*2 - 2px*2 */
        height: 68px;
        background: url('../images/logo_original.jpg') no-repeat center center;
        background-size: 95px auto; /* Масштабирование изображения внутри круглой рамки */
        background-position: 20% 10%; /* Позиционирование изображения внутри круглой рамки */
        border-radius: 50%; /* Делаем круг */
        border: 3px solid #fff; /* Белая внутренняя обводка */
    }

    img.img-article-left {
        max-width: 200px; /* Ограничение на величину картинки */

    }

    div.content-text.list-articles p img, div.content-text p img {
        max-width: 310px; /* Ограничение на величину картинки в меню "О сайтеb постах"*/
        max-height: 180px;
    }

    div.content-text.list-articles p strong img {
        max-width: 200px; /* Ограничение на величину картинки в меню "О себе"*/
        max-height: 270px;
    }

    p[style*="margin-left:320px"] {
        margin-left: 0 !important; /* Отступы тегов по левому краю */
        margin-top: 300px !important; /* Отступы тегов по левому краю */
    }

    ul.tags-list li {
        display: grid;

    }

    ul.tags-list {
        margin-left: -17px;
        padding: 0;
    }

    .form-input {
        width: 280px;
        font-size: 16px;
    }

    .content-input {
        width: 280px;
        font-size: 16px;
    }

    #footer { /* Нижняя полоса с надписью Джанго */
        height: 90px;
        text-align: left !important;
    }

    .switch {
        width: 50px;
        height: 20px;
    }

    .slider {
        border-radius: 10px;
        background-color: #04ef72;
    }

    .slider:before {
        height: 20px;
        width: 20px;
    }

    input:checked + .slider {
        background-color: #c072e8;
    }

    .list-pages .page-num, .page-num-selected {
        margin: 5px;
        display: inline-block;
        width: 25px; /*60*/
        height: 44px; /*44*/
        padding: 10px 0 5px 0;
        border: 2px solid #162d72; /*#d0d0d0*/ /*Цвет каемок кнопок и толщина линии*/
        /*border-radius: 30px; Чтобы кнопки были круглыми */
    }

    .list-pages .page-num.shadow_light:hover {
        box-shadow: 6px 6px 1px #c072e8 !important; /*#d0d0d0*/ /*Тень от кнопок */
    }

    .list-pages .page-num-selected {
        margin: 5px;
        /*font-size:23px !important;*/
    }

    .list-pages .page-num.shadow_dark:hover {
        box-shadow: 6px 6px 1px #04ef72 !important; /*#d0d0d0*/ /*Тень от кнопок */
    }

    #mobilemenu div.uk-offcanvas-bar {
        background-color: #3F4137;
        color: #eee !important;
    }

    #mobilemenu div.uk-offcanvas-bar.uk-offcanvas-light {
        background-color: #eee;
        color: black !important;
    }

    #mobilemenu li.selected.select-light, #mobilemenu li.last a.selected.select-light { /*Цвет выбранного пункта меню или категории */
        color: #c072e8 !important; /* #c072e8; */
    }

    div.tablemobile li a.text-black, a.uk-text-white.text-black, .uk-offcanvas-close.text-black {
        color: black !important;
    }

    /* Стили для иконки чата в мобильном меню */
    /* Скрываем десктопную иконку */
    .chat-icon {
        display: none !important;
    }

    /* Только для иконки чата */
    .mobile-chat-wrapper {
        position: absolute;
        right: 100px; /* Позиция слева от кнопки меню (трех полосок меню)*/
        top: calc(50% + 10px); /* Сдвигаем на 5px вниз от центра (трех полосок меню)*/
        transform: translateY(-50%);
    }

    .mobile-chat-icon {
        width: 60px;
        height: 60px;
        cursor: pointer;
        display: block;
    }

    /* Фикс для кнопки меню */
    .mainmenu-mobile > button {
        position: relative;
        z-index: 1;
    }
}

/*=========== Стили для ПК ==================*/
@media not all and (max-width: 1280px) {

    .mainmenu, .article-panel,#theme-switch {display: block;}
    .mainmenu-mobile, .article-panel-mobile, .link-read-post-mobile   {display: none;}

    .topmenu-toggle {
        display: none !important;
    }

    ul.list-articles, div.list-articles, div.content-text { /* Отступы текста по левому краю */
        margin-top: 10px;
        margin-left: 0;
    }


    ul.tags-list {
        margin-left: 5px; /* Отступы тегов по левому краю */

    }
    .header {
    height: 65px; /* Ширина поля верхнего меню по высоте*/
}
.logo {
    background: url('../images/logo.png') no-repeat 10px 0; /* Логотип*/
    width: 70px; /* Сдвиг надписей меню относительно логотипа*/
    height: 60px;
}
img.img-article-left {
    max-width: 300px; /* Ограничение на величину картинки */

}
ul.tags-list {
    padding: 0;
}

    ul.tags-list li{
    display: inline-block;
}
.form-input {
    width: 300px;
    font-size: 16px;
}
.content-input {
    width:600px;
    font-size: 16px;
}
#footer { /* Нижняя полоса с надписью Джанго */
    height: 65px;
}

    .switch {
       margin-top: 5px !important;
       width: 50px;
        height: 20px;
    }

    .slider {
        border-radius: 10px;
        background-color: #c072e8;
    }

    .slider:before {
        height: 20px;
        width: 20px;
         left: 1px;
    }
           input:checked + .slider {
            background-color: #04ef72;
        }
  .list-pages .page-num, .page-num-selected {
    display: inline-block;
    width: 40px; /*60*/
    height: 44px; /*44*/
    padding: 16px 0 5px 0;
    border: 2px solid #162d72; /*#d0d0d0*/ /*Цвет каемок кнопок и толщина линии*/
    /*border-radius: 30px;*/ /*Чтобы кнопки были круглыми */
}
/* Чат-кнопка */
.chat-icon {
    position: fixed;
    left: 20px;         /* Левый нижний угол */
    bottom: 10px;
    width: 90px;
    height: 90px;
    z-index: 9999;      /* Поверх всех элементов */
    cursor: pointer;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));

    /* Запрет выделения и перетаскивания */
    user-select: none;
    -webkit-user-drag: none;
}

/* Анимация при наведении */
.chat-icon:hover {
    transform: scale(1.5);
}

}

/*==========================================================*/
a {
    color: #0059b2;
    text-decoration: none;
}

a:hover {
    color: #CC0000;
    text-decoration: underline;
}

img {
    max-width: 600px;
    height: auto;
}

img.img-article-left {
    height: auto;
    float: left;
    padding: 0 10px 10px 0;
}

img.img-article-left.thumb {
    max-width: 150px;
    height: auto;
}

p img { /* Картинка в текстах меню */
    max-width: 2500px;
    height: auto;
}

p.link-read-post {
    text-align: right;
}

p.link-read-post a{ /* Кнопка Далее*/
    padding: 10px 50px; /* Отступы текста внутри кнопки Далее */
    min-width: 100px;
    background: #162d72;
    color: #fff;
    text-decoration: none;
}

div.article-panel-mobile{ /* Фон, на котором располагается пост с кнопкой "Далее" */
    background: #eeeeee; /* Цвет полос с датой и категорией */
    padding: -5px -10px -5px 10px;
    box-sizing: border-box;
    overflow: hidden;
    color: #555; /* Цвет букв с датой и категорией */
}
div.article-panel-mobile p.first { /* Панель постов с надписью Категория: "Имя категории" */
    margin: 5px;
    float: left;
}

div.article-panel{ /* Фон, на котором располагается пост с кнопкой "Далее" */
    background: #eeeeee; /* Цвет полос с датой и категорией */
    padding: 5px 10px 5px 10px;
    box-sizing: border-box;
    overflow: hidden;
    color: #555; /* Цвет букв с датой и категорией */

}

div.article-panel p.first { /* Панель постов с надписью Категория: "Имя категории" */
    margin: 0;
    float: left;

}

div.article-panel p.last { /* Панель постов с надписью Дата: "Дата  Время" */
    margin: 0;
    float: right;
}

ul.list-articles, div.list-articles { /* Отступы текста по левому краю */
	list-style: none;
	padding: 0;
}
ul.list-articles li { /*Цвет полосок для разделения постов */
    border-bottom: 1px solid #162d72 /* #ccc; <- был такой */
}

.table-page {
    width: 100%;
    height: 100%;
    vertical-align: top;
}

.table-page tr {
    height: 100%;
}

.clear {
    clear: both;
}

.header { /* Цвет полосы верхнего меню */
    background: #3F4137;
}



.content-text, p.content-text {
    margin: 60px 0 0 30px;
    color: #000;
    font-size: 20px;
    font-family: Yandex Sans Display Light ;}

/*========================== Меню ПК ============================= */


ul.mainmenu { /* Верхнее меню*/
    list-style: none;
    margin: 0;
    padding:0;
    height: 60px;
    color: #eeeeee; /* #fdc073; <- Был такой цвет*/
    font-size: 20px; /* Размер шрифта верхнего меню*/
    overflow: hidden;
}

ul.mainmenu li {
    float: left;
    margin: 18px 40px 0 30px; /* Расположение кнопок Обо мне, Добавить и тд. */
}

ul.mainmenu li.logo {
    margin: 0;
}

ul.mainmenu li.last {
    float: right;
}

/* Элемент меню "Войти" располагается справа */

ul.mainmenu li a {
    color: #fffbf3; /* Цвет текста верхнего меню/* #fdc073; <- Был такой цвет*/
    text-decoration: none;
}

/*ul.mainmenu li a:hover { !* Цвет текста при наведении мыши на верхнее меню *!*/
/*    color: #c072e8; !* #c072e8; <- Был такой цвет*!*/
/*}*/
/*========================== Меню mobile ============================= */
#mobilemenu li.selected,#mobilemenu li.last a.selected { /*Цвет выбранного пункта меню или категории */
    color: #04ef72; /* #c072e8; */
}

.uk-margin-right{ /* меню мобильного приложение значок */
    margin-top: -65px;
    float:right;
    color: #ffffff;
}

.tablemobile{
    border: 1px solid #aaa;
    width: 190px;
    padding: 10px;
    margin-left: 10px;
    margin-top: -15px;
    margin-bottom: 5px;
}

hr{
    border: 1px solid #aaa;
    margin: 7px -10px;  /* низ-верх и право-лево */
}
/*==================================================================== */

.table-content {
    width: 100%;
    min-height: 100%;
    height: 100%;
}


/* Класс выбора элемента, подсвечивается для меню и категорий!!! */
.left-chapters li.selected, li.last a.selected, li.selected {
    color: #c072e8; /* #c072e8; */
}
/* Класс выбора элемента, подсвечивается меню!!! */
.left-chapters ul li a:hover, div.header li a:hover, p.link-read-post a:hover {
    color: #f30a2d;
}

.left-chapters { /* Цвет заливки боковой панели с категориями */
    margin: 0;
    background: #eee; /*#e3e1cb; <- подумать в эту сторону цвета */
    border-right: 2px solid #ccc;
    border-top: 2px solid #ccc;
}


.left-chapters ul {
    width: 230px; /* Ширина полосы слева с категориями */
    margin: 0;
    padding: 20px 10px 10px 20px;
    list-style: none;
    font-size: 20px;
}

.left-chapters ul li { /* Цвет букв надписей "Портфолио:" и "Профиль:" */
    margin: 30px 0 0 0;
    color: #999;
}


/* Класс выбора элемента категорий, подсвечивается фиолетовым */
.left-chapters ul li a {
    color: #444;
    text-decoration: none;
}


/*#CC0000;*/ /*Цвет при наведении мыши на строки категорий */
.left-chapters ul li.share {
    margin: 30px 0 -5px 0;
}

.left-chapters ul li.share p {
    margin: 30px 0 30px 0;
}

.left-chapters ul li.share a {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0 20px 0 0;
}
.tabledesktop{
    border: 2px solid #ccc;
    width: 185px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    margin-left: 1px;
    margin-top: 0;
    margin-bottom: 20px;
}

.table_phone {
    border: 2px solid #ccc;
    width: 205px;
    padding: 5px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;

}

@keyframes shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
  100% { transform: translate(1px, 1px); }
}

.table_phone a{
    font-size: 17px;
    color: #444;
    /*animation: blink 3s infinite;*/

}
.table_phone a:hover{
    color: #f30a2d;
}
.table_phone:hover {
  animation: shake 0.3s;
}

/*====================Логотип Вконтакте=========================*/

.left-chapters ul li.share a.share-vk { /*первывй логотип вконтакте*/
    width: 100%;
    height: 30px;
    background: url('../images/share_vk.png') no-repeat -5px 0
}

.left-chapters ul li.share a.share-vk:hover { /* второй логотип вконтакте*/
    width: 100%;
    height: 30px;
    background: url('../images/share_vk.png') no-repeat -5px -30px /* -30px есть размер сдвига логотипа вконтакте при нажатии на него*/
}

/*====================Логотип Headhunter=========================*/
.left-chapters ul li.share a.share-hh { /*первый логотип headhunter*/
    width: 100%;
    height: 30px;
    background: url('../images/share_hh.png') no-repeat -5px 0
}

.left-chapters ul li.share a.share-hh:hover { /* второй логотип headhunter*/
    width: 100%;
    height: 30px;
    background: url('../images/share_hh.png') no-repeat -5px -30px /* -30px есть размер сдвига логотипа вконтакте при нажатии на него*/
}

/*=====================Логотип Github=========================================*/
.left-chapters ul li.share a.share-gh { /*первый логотип Github*/
    width: 100%;
    height: 30px;
    background: url('../images/share_gh.png') no-repeat -5px 0
}

.left-chapters ul li.share a.share-gh:hover { /* второй логотип Github*/
    width: 100%;
    height: 30px;
    background: url('../images/share_gh.png') no-repeat -5px -30px /* -30px есть размер сдвига логотипа вконтакте при нажатии на него*/
}

/*======================Логотип Stepik========================================*/
.left-chapters ul li.share a.share-st { /*первый логотип Stepik*/
    width: 100%;
    height: 30px;
    background: url('../images/share_st.png') no-repeat -5px 0
}

.left-chapters ul li.share a.share-st:hover { /* второй логотип Stepik*/
    width: 100%;
    height: 30px;
    background: url('../images/share_st.png') no-repeat -5px -30px /* -30px есть размер сдвига логотипа вконтакте при нажатии на него*/
}

/*======================Логотип Все сдал!========================================*/
.left-chapters ul li.share a.share-vs { /*первый логотип Vsesdal*/
    width: 100%;
    height: 30px;
    background: url('../images/share_vs.png') no-repeat -5px 0
}

.left-chapters ul li.share a.share-vs:hover { /* второй логотип Vsesdal*/
    width: 100%;
    height: 30px;
    background: url('../images/share_vs.png') no-repeat -5px -30px /* -30px есть размер сдвига логотипа вконтакте при нажатии на него*/
}

/* ======================= Теги ================================= */

ul.tags-list li{
    margin: 0;
    padding: 5px 0 ;
    /*display: inline-block;*/
}

ul.tags-list li a, ul.tags-list li.tags-select{
     border: 1px solid #aaa; /* Цвет рамки вокруг тега */
     padding: 5px 5px;
}

ul.tags-list li.tags-select { /* Подсветка поля тега при выборе данного тега. */
    background: #eae6e6; /*#fdc073;*/
}

/* ============================================================== */


.content {
    padding: 40px 20px 20px 40px;
    width: 100%;
    box-sizing: border-box;
}

/*========================================================================== */

.content-text h2, .content-text h1 { /* Текст заголовков постов */
    margin-top:-5px;
    margin-bottom:-10px;
    font-size: 32px;
    font-family: serif, Times;
    font-weight: bold ;
}

#footer { /* Нижняя полоса с надписью Джанго */
    /*box-sizing: border-box;*/
    background: #3F4137;
    /*padding: 15px; !* Ширина нижней полосы *!*/
    color: #eeeeee; /* Нижняя надпись с Джанго */

    /*overflow: hidden;*/
    border-top: 2px solid #ccc;
    text-align: right;
}

#footer div{
    margin-top: 23px;
    font-size: 14px;
    font-family: Verdana, Geneva, Arial, Helvetica;

}


.form-label {
    display: inline-block;
    min-width: 150px;
    vertical-align: top;
}

.form-error ul {
    list-style: none;
    padding: 0;
    color: #CC0000;
}

.form-button {
    min-width: 200px;
    font-size: 16px;
}

/* =========================  Кнопки навигации ==============================*/
.list-pages {
    text-align: center;
    margin-left: -20px !important;
}

.list-pages ul {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
}

.list-pages ul li {
    display: inline-block;
    margin: 0 15px 0 0;
}

.list-pages a {
    color: #000;
    font-size: 24px;
    text-decoration: none;
}



.list-pages .page-num:hover {
    box-shadow: 6px 6px 1px #c072e8; /*#d0d0d0*/ /*Тень от кнопок */
}

.list-pages .page-num-selected {
    border: none;
    color: #000;
    font-size: 20px;
}

/*.list-pages .page-num-selected:hover {*/
/*    box-shadow: none;*/
/*}*/
.list-pages .page-num-selected{font-size:23px !important;}

/* =======================Стили для красивого переключателя =================*/

        .switch {
            position: relative;
            display: inline-block;
            border-radius: 50%;
            margin-top: 2px;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /*background-color: #c072e8;*/
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            left: 0;

            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }



        input:checked + .slider:before {
            transform: translateX(31px);
        }


    .list-articles {
        margin-top: -10px !important; /* Для списка статей */
    }