/* =====================================================
   Frontend (public) styles — tak to ENT
   ===================================================== */

body.front-body {
    background-color: #f4f6f9;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #2c3e50;
    margin: 0;
    padding: 0;
}

a {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* ===== Navbar ===== */
.front-navbar {
    background: #fff;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
}

.front-nav-inner {
    display: flex;
    align-items: center;
    height: 52px;
}

.front-logo {
    display: flex;
    align-items: center;
    color: #333;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    margin-right: 24px;
    white-space: nowrap;
    flex-shrink: 0;
}

.front-logo:hover { color: #333; text-decoration: none; }

.front-logo img {
    height: 32px;
    margin-right: 0;
}

.front-nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.front-nav-links > li > a {
    display: block;
    padding: 0 13px;
    color: #333;
    font-size: 13px;
    line-height: 52px;
    text-decoration: none;
    white-space: nowrap;
}

.front-nav-links > li > a:hover {
    color: #2d6fa8;
    background: #f7f7f7;
}

.front-nav-links > li.active > a {
    color: #2d6fa8;
}

.front-nav-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-left: 8px;
}

.front-nav-icon {
    color: #666;
    padding: 8px 10px;
    text-decoration: none;
    font-size: 14px;
    border-radius: 3px;
}

.front-nav-icon:hover { color: #333; background: #f0f0f0; }

.front-nav-login {
    font-size: 12px;
    color: #555;
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-left: 6px;
    line-height: 1;
}

.front-nav-login:hover { background: #f0f0f0; color: #333; text-decoration: none; }

.front-nav-register {
    font-size: 12px;
    color: #fff;
    background: #2c5976;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 3px;
    margin-left: 4px;
    line-height: 1;
}

.front-nav-register:hover { background: #235d8e; color: #fff; text-decoration: none; }

/* ===== Main wrapper ===== */
.front-wrapper {
    padding: 18px 0 50px;
    min-height: calc(100vh - 52px - 52px);
}

/* ===== Breadcrumbs ===== */
.front-breadcrumbs {
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
    line-height: 1.6;
}

.front-breadcrumbs a {
    color: #2d6fa8;
    text-decoration: none;
}

.front-breadcrumbs a:hover { text-decoration: underline; }

.front-bc-sep { color: #bbb; margin: 0 4px; }

.front-bc-current { color: #888; }

/* ===== Left sidebar ===== */


.front-cat-count {
    color: #888;
    font-size: 11px;
    background: #f0f0f0;
    border-radius: 10px;
    padding: 1px 7px;
    flex-shrink: 0;
    margin-left: 6px;
}

/* ===== Right sidebar ===== */
.front-sidebar-block {
    background: #fff;
    border: 1px solid #ddd;
    margin-bottom: 16px;
}



.front-recent-post {
    padding: 8px 0;
    border-bottom: 1px solid #f2f2f2;
}

.front-recent-post:last-child { border-bottom: none; padding-bottom: 0; }
.front-recent-post:first-child { padding-top: 0; }


.front-recent-post-title a {
    font-size: 12px;
    color: #2d6fa8;
    text-decoration: none;
    line-height: 1.4;
    display: block;
}

.front-recent-post-title a:hover { text-decoration: underline; }

.front-recent-post-sub {
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
}

.front-recent-post-sub a {
    color: #aaa;
    text-decoration: none;
}

.front-recent-post-sub a:hover { text-decoration: underline; }


/* ===== Post list ===== */
.front-section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a2b3c;
    border-bottom: 3px solid #2c5976;
    padding-bottom: 10px;
    margin: 24px 0 12px;
}



.front-article-body {
    font-size: 14px;
    line-height: 1.75;
    color: #333;
    background: #fff;
    padding: 10px 15px;
    margin: 0 -15px;
}

.front-article-body h2,
.front-article-body h3 {
    font-size: 17px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 24px 0 10px;
    color: #1a1a1a;
}

.front-article-body p { margin-bottom: 14px; }

.front-article-body img { max-width: 100%; height: auto; }

.front-article-body ul,
.front-article-body ol {
    margin-bottom: 14px;
    padding-left: 24px;
}

/* ===== Stats ===== */
.front-stats {
    display: flex;
    gap: 16px;
    max-width: 800px;
    margin: 0 auto;
}
.front-stat-item {
    flex: 1;
    background: #fff;
    border: 1px solid #e1e8ef;
    border-radius: 6px;
    padding: 12px 10px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.front-stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.front-stat-num {
    font-size: 24px;
    font-weight: 700;
    color: #2c5976;
    line-height: 1;
    margin-bottom: 2px;
}
.front-stat-label {
    font-size: 11px;
    color: #7a8a9a;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ===== Subjects grid ===== */
.front-subjects {
    margin-bottom: 24px;
}
.front-subjects-title {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.front-subject-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.front-subject-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    background: #fff;
    border: 1px solid #e4e8ed;
    border-radius: 4px;
    text-decoration: none;
    color: #444;
    font-size: 13px;
    transition: border-color .15s, background .15s, color .15s;
}
.front-subject-item:hover {
    border-color: #2d7bb6;
    background: #f0f6fc;
    color: #2d7bb6;
    text-decoration: none;
}
.front-subject-item.active {
    border-color: #2d7bb6;
    background: #2d7bb6;
    color: #fff;
    text-decoration: none;
}
.front-subject-icon { font-size: 13px; opacity: .75; }
.front-subject-item.active .front-subject-icon { opacity: 1; }
.front-subject-count {
    font-size: 11px;
    color: #bbb;
    margin-left: 2px;
}
/*.front-subject-item.active .front-subject-count { color: rgba(255,255,255,.65); }*/

/* ===== Grades grid ===== */
.front-grades {
    margin-bottom: 24px;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .front-stats { flex-wrap: wrap; }
    .front-stat-item { min-width: calc(50% - 8px); }
}
@media (max-width: 600px) {
    .front-stat-num { font-size: 20px; }
}

/* ===== Auth forms ===== */
.auth-wrap {
    max-width: 440px;
    margin: 36px auto 60px;
}

.auth-card {
    background: #fff;
    border: 1px solid #dde4ec;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
}

.auth-card-header {
    padding: 22px 28px 18px;
    background: #f7f9fc;
    border-bottom: 1px solid #e6eaf0;
    text-align: center;
}

.auth-logo {
    display: block;
    height: 32px;
    margin: 0 auto 12px;
}

h1.auth-card-title {
    font-size: 17px;
    font-weight: bold;
    color: #2c3e50;
    margin: 0;
    line-height: 1.3;
    padding: 0;
}

.auth-card-body {
    padding: 24px 28px;
}

.auth-field {
    margin-bottom: 16px;
}

.auth-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
}

.auth-field.has-error .form-control {
    border-color: #d9534f;
}

.auth-card .form-control {
    height: 38px;
    font-size: 14px;
    border: 1px solid #cdd3db;
    border-radius: 4px;
    box-shadow: none;
}

.auth-card .form-control:focus {
    border-color: #2d7bb6;
    box-shadow: 0 0 0 3px rgba(45,123,182,.1);
    outline: none;
}

.auth-help {
    display: block;
    font-size: 12px;
    color: #c0392b;
    margin-top: 4px;
}

.auth-checkbox {
    margin-bottom: 16px;
}

.auth-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 13px;
    color: #555;
    font-weight: normal;
    cursor: pointer;
}

.auth-checkbox input[type=checkbox] {
    margin-top: 2px;
    flex-shrink: 0;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.auth-submit {
    background: #2d7bb6;
    border: 1px solid #2367a0;
    color: #fff;
    height: 38px;
    padding: 0 24px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.auth-submit:hover {
    background: #235d8e;
    border-color: #1c4e78;
    color: #fff;
}

.auth-submit-block {
    display: block;
    width: 100%;
    margin-top: 20px;
}

.auth-forgot {
    font-size: 12px;
    color: #2d7bb6;
    text-decoration: none;
}

.auth-forgot:hover {
    text-decoration: underline;
    color: #235d8e;
}

.auth-divider {
    border: none;
    border-top: 1px dashed #e6eaf0;
    margin: 20px 0;
}

.auth-alt {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

.auth-btn-link {
    display: block;
    text-align: center;
    padding: 9px 16px;
    border: 1px solid #cdd3db;
    border-radius: 4px;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    background: #f7f9fc;
    transition: background .15s, border-color .15s;
}

.auth-btn-link:hover {
    background: #ecf1f7;
    border-color: #aab5c2;
    color: #333;
    text-decoration: none;
}

.auth-btn-link + .auth-btn-link {
    margin-top: 10px;
}

.auth-info {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 16px;
}

.auth-steps {
    font-size: 13px;
    color: #666;
    line-height: 1.8;
    padding-left: 20px;
    margin-bottom: 16px;
}

/* ===== Mobile hamburger nav ===== */
.front-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
}
.front-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
.front-nav-toggle-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.front-nav-toggle-active span:nth-child(2) { opacity: 0; }
.front-nav-toggle-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 767px) {
    .front-nav-toggle {
        display: flex;
    }
    .front-nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        padding: 8px 0 12px;
        border-top: 1px solid rgba(255,255,255,.15);
        margin-top: 8px;
    }
    .front-nav-links.front-nav-open {
        display: flex;
    }
    .front-nav-links li {
        width: 100%;
    }
    .front-nav-links li a {
        display: block;
        padding: 8px 0;
    }
    .front-nav-inner {
        flex-wrap: wrap;
    }
    .front-nav-actions {
        width: 100%;
        justify-content: flex-start;
        padding: 8px 0 4px;
        border-top: 1px solid rgba(255,255,255,.1);
    }
}


/* ===== Hero section (homepage) ===== */
.front-hero-section {
   /* background: linear-gradient(135deg, #ffffff 0%, #f4f8fc 100%);*/
    border-bottom: 1px solid #e1e8ef;
    padding: 40px 15px 30px;
    margin: -18px -15px 24px;
}
.front-hero-search input {
    padding: 5px 40px;
    font-size: 16px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.hero-main-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a2b3c;
    margin-bottom: 8px;
    line-height: 1.3;
}

.hero-sub-title {
    font-size: 15px;
    color: #637e92;
    margin-bottom: 24px;
}

.front-hero-search {
    margin: 0 auto 28px;
    max-width: 760px;
}

.front-hero-search-wrap {
    display: flex;
    position: relative;
    box-shadow: 0 4px 12px rgba(45, 111, 168, 0.08);
    border-radius: 6px;
    background: #fff;
}

.search-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #aab5c2;
    font-size: 16px;
    z-index: 2;
    pointer-events: none;
}

.front-hero-search-input {
    flex: 1;
    padding: 14px 16px 14px 44px;
    font-size: 15px;
    border: 2px solid #2d6fa8;
    border-right: none;
    border-radius: 6px 0 0 6px;
    outline: none;
    line-height: 1.4;
    color: #2c3e50;
    box-sizing: border-box;
}

.front-hero-search-input:focus {
    border-color: #1a4f8a;
}

.front-hero-search-btn {
    padding: 14px 28px;
    background: #2c5976;
    color: #fff;
    border: 2px solid #2c5976;
    border-radius: 0 6px 6px 0;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}

.front-hero-search-btn:hover {
    background: #2d6fa8;
    border-color: #2d6fa8;
}

@media (max-width: 575px) {
    .hero-main-title { font-size: 20px; }
    .front-hero-search-wrap { flex-direction: column; }
    .front-hero-search-input {
        border-right: 2px solid #2d6fa8;
        border-radius: 6px 6px 0 0;
    }
    .front-hero-search-btn { border-radius: 0 0 6px 6px; }
}

/* ===== Back to top button ===== */
.back-to-top {
    position: fixed;
    bottom: 28px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: #2c5976;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s, background .15s;
    z-index: 999;
    line-height: 40px;
    text-align: center;
    padding: 0;
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}
.back-to-top:hover { background: #2d6fa8; }

/* ===== Comment character counter ===== */
@media (max-width: 767px) {
    .front-breadcrumbs {
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .front-bc-current {
        font-weight: 500;
    }
}


/* =====================================================
   Виджет классов (Улучшенный UX/UI плитки)
   ===================================================== */

.front-grades-widget {
    margin-bottom: 24px;
}

/* Сетка для классов — по 4 в ряд на десктопе, гибко сжимается */
.front-grade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

/* Карточка отдельного класса */
.front-grade-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 6px;
    padding: 10px 4px;
    text-align: center;
    text-decoration: none !important;
    position: relative;
    transition: all 0.2s ease;
    min-height: 64px;
}

/* Эффект при наведении */
.front-grade-item:hover {
    border-color: #2d6fa8;
    background-color: #f7fafd;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(45, 111, 168, 0.08);
}

/* Крупная цифра класса */
.front-grade-num {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
}
.front-grade-item:hover .front-grade-num {
    color: #2d6fa8;
}

/* Маленький счетчик документов внизу */
.front-grade-count {
    font-size: 11px;
    color: #8a99a8;
    margin-top: 2px;
    font-weight: 500;
}
.front-grade-item:hover .front-grade-count {
    color: #55728e;
}

/* =====================================================
   Состояние ACTIVE (Выбранный класс)
   ===================================================== */
.front-grade-item.active {
    background: #2d6fa8 !important;
    border-color: #2d6fa8 !important;
    box-shadow: 0 3px 6px rgba(45, 111, 168, 0.2);
}

.front-grade-item.active .front-grade-num {
    color: #ffffff !important;
}

.front-grade-item.active .front-grade-count {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Небольшой интерактив для сброса активного класса при повторном клике */
.front-grade-item.active:hover {
    background: #1a4f8a !important;
    border-color: #1a4f8a !important;
}

/* =====================================================
   Адаптивность под мобильные (Дизайн-бриф)
   ===================================================== */
@media (max-width: 767px) {
    .front-grade-grid {
        /* На мобильных делаем чуть плотнее, чтобы экономить экран */
        grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
        gap: 8px;
    }
    .front-grade-item {
        padding: 8px 2px;
        min-height: 58px;
    }
    .front-grade-num {
        font-size: 18px;
    }
}


/* =====================================================
   Лента публикаций и Карточки (Улучшенный UX/UI)
   ===================================================== */

.front-post-list {
    margin-top: 16px;
}

/* Описание секции под заголовком */
.front-section-desc {
    font-size: 14px;
    color: #637e92;
    margin: -4px 0 20px 0;
    line-height: 1.4;
}

/* Стили карточки публикации */
.front-post-item {
    display: flex;
    background: #ffffff;
    border: 1px solid #e1e8ef !important;
    border-radius: 6px !important;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.front-post-item:hover {
    border-color: #2c5976 !important;
    box-shadow: 0 4px 12px rgba(45, 111, 168, 0.06) !important;
    transform: translateY(-1px);
}

/* Аватарка автора */
.front-post-avatar-wrap {
    margin-right: 16px;
    flex-shrink: 0;
}

.front-post-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e1e8ef;
}

/* Заглушка аватарки, если фото нет */
.front-avatar-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #f0f4f8;
    color: #7fa1be;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Тело карточки */
.front-post-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Верхняя строчка: бейдж типа и категория */
.front-post-top-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

/* Кастомные бейджи типов документов */
.front-post-type-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: inline-block;
}

.front-badge-load { background-color: #e3f2fd; color: #0d47a1; }   /* Урок — синий */
.front-badge-publ { background-color: #e8f5e9; color: #1b5e20; }   /* Учебник — зеленый */
.front-badge-board { background-color: #fff3e0; color: #e65100; }  /* Объявление — оранжевый */
.front-badge-test  { background-color: #f3e5f5; color: #6a1b9a; }  /* Тест — фиолетовый */

/* Ссылка на категорию (предмет) */
.front-post-cat {
    font-size: 12px;
    color: #7a8a9a;
}
.front-post-cat i {
    margin-right: 3px;
    color: #aab5c2;
}
.front-post-cat a {
    color: #55728e;
    text-decoration: none;
}
.front-post-cat a:hover {
    color: #2d6fa8;
    text-decoration: underline;
}

/* Заголовок публикации */
.front-post-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 10px;
}

.front-post-title a {
    color: #1a2b3c;
    text-decoration: none;
}

.front-post-title a:hover {
    color: #2d6fa8;
}

/* Нижняя строка: мета-данные */
.front-post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto; /* Прижимает мета-строку к низу, если заголовки разной длины */
    padding-top: 4px;
    border-top: 1px dashed #f0f4f8; /* Легкий визуальный разделитель */
}

.front-meta-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Автор и дата */
.front-post-author-name, .front-post-date {
    font-size: 12px;
    color: #7a8a9a;
    text-decoration: none;
}
.front-post-author-name i, .front-post-date i {
    color: #aab5c2;
    margin-right: 4px;
}
.front-post-author-name:hover {
    color: #2d6fa8;
}

/* Стилизация блока звезд рейтинга (если требуется выравнивание) */
.front-meta-right {
    display: flex;
    align-items: center;
}

/* =====================================================
   Адаптивность (Лента)
   ===================================================== */
@media (max-width: 767px) {
    .front-post-item {
        padding: 12px;
    }
    .front-post-avatar-wrap {
        margin-right: 12px;
    }
    .front-post-avatar img, .front-avatar-placeholder {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    .front-post-title {
        font-size: 14px;
    }
    .front-post-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .front-meta-right {
        margin-top: 2px;
    }
}


/* =====================================================
   Кастомный современный Пагинатор (UX/UI)
   ===================================================== */

.front-pagination-container {
    display: flex;
    justify-content: center;
    margin: 32px 0 16px;
}

.front-pagination {
    display: flex;
    list-style: none;
    padding-left: 0;
    margin: 0;
    gap: 6px; /* Создаем аккуратные промежутки между кнопками */
    align-items: center;
}

/* Стили для всех элементов (ссылок и спанов) */
.front-pagination li a,
.front-pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: #2d6fa8;
    background-color: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Наведение на обычную страницу */
.front-pagination li a:hover {
    color: #1a4f8a;
    background-color: #f0f5fa;
    border-color: #2d6fa8;
}

/* Стилизация управляющих кнопок (Вперед/Назад) */
.front-pagination li.page-control a {
    background-color: #ffffff;
    color: #55728e;
}
.front-pagination li.page-control i {
    font-size: 18px; /* Делаем стрелочки крупнее и заметнее */
}

/* Активное состояние (Текущая страница) */
.front-pagination li.active a,
.front-pagination li.active a:hover {
    color: #ffffff !important;
    background-color: #2c5976 !important;
    border-color: #2c5976 !important;
    box-shadow: 0 3px 6px rgba(45, 111, 168, 0.15);
    cursor: default;
}

/* Заблокированные кнопки (Неактивные стрелки) */
.front-pagination li.disabled span {
    color: #bc9abb; /* Блеклый цвет для неактивного состояния */
    background-color: #f8fafc;
    border-color: #eef2f6;
    cursor: not-allowed;
}

/* Троеточие (разделитель) */
.front-pagination li.page-ellipsis span {
    background: transparent;
    border-color: transparent;
    color: #aab5c2;
    font-weight: normal;
    min-width: 28px;
    cursor: default;
}

/* =====================================================
   Адаптивность для мобильных экранов
   ===================================================== */
@media (max-width: 767px) {
    .front-pagination-container {
        margin: 24px 0 8px;
    }
    .front-pagination {
        gap: 4px;
    }
    .front-pagination li a,
    .front-pagination li span {
        min-width: 34px;
        height: 34px;
        font-size: 13px;
        border-radius: 4px;
    }
    .front-pagination li.page-control i {
        font-size: 16px;
    }
}

/* =====================================================
   Блок кнопки добавления материала в Сайдбаре (UX/UI)
   ===================================================== */

.front-sidebar-actions {
    margin-bottom: 24px; /* Отступ до следующего виджета в сайдбаре */
}

.front-publish-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Расстояние между иконкой плюса и текстом */

    background-color: #e67e22;
    color: #ffffff !important;

    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;

    border-radius: 6px;
    border: none;
    box-shadow: 0 4px 6px rgba(230, 126, 34, 0.15);

    transition: all 0.2s ease;
    width: 100%; /* Растягиваем на всю ширину сайдбара */
}

/* Эффект при наведении (Hover) */
.front-publish-btn:hover {
    background-color: #d0691a;
    box-shadow: 0 6px 12px rgba(230, 126, 34, 0.25);
    transform: translateY(-2px); /* Легкое всплытие вверх */
}

/* Активное состояние (Клик) */
.front-publish-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(230, 126, 34, 0.15);
}


/* Стилизация иконки внутри кнопки */
.front-publish-btn i {
    padding-top: 3px;
    padding-left: 0;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.15);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

/* Крутим иконку при наведении на кнопку для микро-интерактива */
.front-publish-btn:hover i {
    transform: rotate(90deg);
}

/* =====================================================
   Адаптивность (Мобильная версия)
   ===================================================== */
@media (max-width: 767px) {
    .front-sidebar-actions {
        margin-bottom: 18px;
        /* Если на мобилках сайдбар падает под ленту,
           можно зафиксировать кнопку снизу или сделать яркой плашкой */
    }
    .front-publish-btn {
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* =====================================================
   Виджет категорий (предметов) в сайдбаре (UX/UI)
   ===================================================== */

.front-categories-sidebar {
    background: #ffffff;
    margin-bottom: 24px;
}

/* Заголовок блока сайдбара */
.front-sidebar-block-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a2b3c;
    padding: 14px 16px;
    margin: 0;
    border-bottom: 1px solid #eef2f6;
    background-color: #fafbfc; /* Выделяем заголовок легкой подложкой */
    border-radius: 6px 6px 0 0;
}

/* Список категорий */
.front-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Элемент списка */
.front-cat-list li {
    border-bottom: 1px solid #f4f6f8;
}

.front-cat-list li:last-child {
    border-bottom: none;
}

/* Ссылка внутри списка — теперь она большая и кликабельная */
.front-cat-list li a {
    display: flex;
    align-items: center;
    padding: 11px 16px;
    color: #3e5569;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Иконка папки */
.front-cat-icon {
    margin-right: 10px;
    color: #aab5c2;
    font-size: 14px;
    transition: color 0.2s ease, transform 0.2s ease;
    width: 14px;
    text-align: center;
}

/* Текст ссылки */
.front-cat-name {
    flex: 1;
    line-height: 1.4;
}

/* =====================================================
   Интерактивные эффекты (Hover)
   ===================================================== */
.front-cat-list li a:hover {
    background-color: #f4f8fc; /* Приятный мягкий синий тон при наведении */
    color: #2d6fa8; /* Перекрашиваем текст в основной бренд-цвет */
    padding-left: 20px; /* Эффект легкого смещения вправо для динамики */
}

.front-cat-list li a:hover .front-cat-icon {
    color: #2d6fa8; /* Иконка становится активной вместе с текстом */
    transform: scale(1.15); /* Слегка увеличиваем иконку */
}

/* Если пункт меню активен (на будущее, если добавишь класс .active на li или a) */
.front-cat-list li.active a {
    background-color: #e3f2fd;
    color: #2d6fa8;
    font-weight: 700;
}
.front-cat-list li.active .front-cat-icon {
    color: #2d6fa8;
}


/* =====================================================
   Виджет "Популярное" в Сайдбаре (UX/UI)
   ===================================================== */

.front-popular-sidebar {
    background: #ffffff;
    margin-bottom: 24px;
}

/* Иконка огонька в заголовке */
.front-popular-sidebar .front-sidebar-block-title i {
    color: #e67e22; /* Наш фирменный оранжевый акцент для огня */
    margin-right: 6px;
}

/* Контейнер для списка */
.front-sidebar-block-body {
    padding: 0; /* Сбрасываем дефолтные паддинги, чтобы карточки прижимались к краям */
}

/* Отдельная строка популярного материала (ссылка-плашка) */
.front-popular-item {
    display: block;
    padding: 12px 16px;
    text-decoration: none !important;
    border-bottom: 1px solid #f4f6f8;
    transition: all 0.2s ease;
}

/* Убираем рамку у последнего элемента */
.front-popular-item:last-child {
    border-bottom: none;
    border-radius: 0 0 6px 6px;
}

/* Наведение на всю плашку */
.front-popular-item:hover {
    background-color: #f8fbfc; /* Мягкий фоновый подсвет */
}

/* Заголовок статьи */

/* Строка мета-данных (просмотры и категория) */
.front-popular-meta {
    display: flex;
    align-items: center;
    gap: 12px; /* Фиксированный отступ между элементами вместо   */
    font-size: 11px;
    color: #8a99a8;
}

/* Просмотры */
.front-popular-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.front-popular-views i {
    color: #7fa1be; /* Спокойный сине-серый для иконки глаза */
}

/* Категория внутри популярного */
.front-popular-cat {
    background-color: #f0f4f8;
    color: #55728e;
    padding: 1px 6px;
    border-radius: 3px;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Если название предмета длинное — аккуратно режем */
}

.front-popular-item:hover .front-popular-cat {
    background-color: #e3f2fd;
    color: #2d6fa8;
}

/* =====================================================
   Виджет "Объявления" в Сайдбаре (UX/UI)
   ===================================================== */

.front-board-sidebar {
    background: #ffffff;
    margin-bottom: 24px;
}

/* Флекс-шапка для выравнивания заголовка и ссылки по краям */
.front-sidebar-block-title.flex-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
}

.front-board-sidebar .title-text i {
    color: #e67e22; /* Оранжевый акцент для рупора объявлений */
    margin-right: 6px;
}

/* Кнопка "Все" в шапке */
.front-sidebar-more {
    font-size: 12px;
    font-weight: 600;
    color: #2d6fa8 !important;
    text-decoration: none !important;
    background: #f0f4f8;
    padding: 3px 10px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.front-sidebar-more i {
    font-size: 13px;
    transition: transform 0.15s ease;
}

.front-sidebar-more:hover {
    background: #2d6fa8;
    color: #ffffff !important;
}

.front-sidebar-more:hover i {
    transform: translateX(2px); /* Стрелочка слегка двигается вправо */
}

/* Карточка отдельного объявления */
.front-board-item {
    display: block;
    padding: 12px 16px;
    text-decoration: none !important;
    border-bottom: 1px solid #f4f6f8;
    transition: all 0.2s ease;
}

.front-board-item:last-child {
    border-bottom: none;
    border-radius: 0 0 6px 6px;
}

.front-board-item:hover {
    background-color: #fafbfc;
}

/* Текст объявления */

/* Мета-строка */
.front-board-meta {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Категория слева, дата справа — для лучшего баланса */
    gap: 8px;
    font-size: 11px;
}

/* Подложка категории объявления */
.front-board-cat {
    color: #637e92;
    font-weight: 500;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Дата публикации */
.front-board-date {
    color: #aab5c2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.front-board-date i {
    font-size: 12px;
}

.front-board-item:hover .front-board-date {
    color: #7a8a9a; /* Дата становится чуть контрастнее */
}

.front-popular-title {
    font-size: 13px;
    font-weight: 500; /* Снизили с 600 до 500 для легкости */
    line-height: 1.4;
    color: #2c3e50;
    margin-bottom: 5px;
    transition: color 0.15s ease;
}

/* При наведении можно вернуть 600, чтобы дать физический отклик */
.front-popular-item:hover .front-popular-title {
    color: #2d6fa8;
    font-weight: 600;
}

.front-board-title {
    font-size: 13px;
    font-weight: 500; /* Снизили с 600 до 500 */
    line-height: 1.4;
    color: #2c3e50;
    margin-bottom: 6px;
    transition: color 0.15s ease;
}

/* Эффект при наведении */
.front-board-item:hover .front-board-title {
    color: #2d6fa8;
    font-weight: 600;
}

/* =====================================================
   Список последних объявлений на странице /board
   ===================================================== */

.front-board-list-item {
    padding: 12px 0;
    border-bottom: 1px solid #eef1f4;
}

.front-board-list-item:last-child {
    border-bottom: none;
}

.front-board-list-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    margin-bottom: 4px;
}

.front-board-list-title a {
    color: #2c3e50;
    text-decoration: none;
}

.front-board-list-title a:hover {
    color: #2d6fa8;
    text-decoration: underline;
}

.front-board-list-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #8a9baa;
}

.front-board-list-meta .front-board-cat {
    max-width: none;
}

/* =====================================================
   Кастомный стильный Футер сайта (UX/UI)
   ===================================================== */

.front-footer {
    background-color: #1a252f; /* Глубокий Dark Navy тон подвала */
    color: #a0b2c6; /* Комфортный для чтения серо-голубой цвет текста */
    margin-top: 40px;
  /*  border-top: 3px solid #2d6fa8; *//* Тонкая фирменная синяя полоса на границе */
}

/* Верхняя часть подвала */
.front-footer-top {
    padding: 40px 0 20px;
}

/* Колонки подвала */
.front-footer-col {
    margin-bottom: 30px;
}

/* Стилизация логотипа в футере */
.front-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none !important;
    margin-bottom: 15px;
}

.front-footer-logo img {
    height: 32px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); /* Легкий объем для лого */
}

/* Описание под логотипом */
.front-footer-desc {
    font-size: 13px;
    line-height: 1.5;
    color: #a0b2c6;
    margin: 0;
}

/* Заголовки колонок */
.front-footer-col-title {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid #2c3e50; /* Линия под заголовком */
}

.front-footer-col-title i {
    color: #2d6fa8; /* Синие иконки в заголовках */
    margin-right: 6px;
}

/* Списки ссылок */
.front-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.front-footer-links li {
    margin-bottom: 10px;
}

.front-footer-links li a {
    color: #cbd5e1;
    text-decoration: none !important;
    font-size: 13px;
    transition: all 0.2s ease;
    display: inline-block;
}

/* Поведение ссылок при наведении (Hover) */
.front-footer-links li a:hover {
    color: #ffffff; /* Текст становится белым */
    transform: translateX(4px); /* Интерактивный микро-сдвиг вправо */
}

/* Нижняя панель копирайта */
.front-footer-bottom {
    background-color: #111921; /* Ультра-темный тон для финальной плашки */
    padding: 16px 0;
    border-top: 1px solid #233242;
}

.front-footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.front-footer-copy {
    font-size: 12px;
    color: #64748b;
}

.front-footer-copy strong {
    color: #94a3b8;
}

/* =====================================================
   Адаптивность для мобильных устройств
   ===================================================== */
@media (max-width: 767px) {
    .front-footer-top {
        padding: 30px 0 0;
    }
    .front-footer-col {
        margin-bottom: 24px;
    }
    .front-footer-col-title {
        margin-bottom: 12px;
    }
    .front-footer-bottom {
        text-align: center;
    }
    .front-footer-bottom-inner {
        justify-content: center;
    }
}


/* =====================================================
   Страница материала (Документа) — Исправленный UI
   ===================================================== */

.front-article {
    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

/* Заголовок документа */
.front-article-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a2b3c;
    line-height: 1.35;
    margin-top: 0;
    margin-bottom: 16px;
}

/* Строка мета-данных (Все элементы строго по левому краю) */
.front-article-meta {
    display: flex;
    justify-content: flex-start; /* Выравнивание строго по левому краю */
    align-items: center;
    flex-wrap: wrap; /* Элементы красиво переносятся, если не влезают */
    column-gap: 16px; /* Расстояние между элементами в строке */
    row-gap: 10px; /* Отступ между строками при переносе */
    padding-bottom: 16px;
    border-bottom: 1px solid #eef2f6;
    margin-bottom: 20px;
}

/* Общий класс для элементов мета-данных */
.front-article-meta-item {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #637e92;
}

/* Иконки в мета-данных */
.front-meta-icon {
    color: #aab5c2;
    margin-right: 5px;
    font-size: 14px;
}

/* Ссылки внутри мета-данных (Автор) */
.front-article-author a {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    color: #2c3e50;
    font-weight: 600;
}
.front-article-author a:hover .author-name {
    color: #2d6fa8;
}

.front-article-author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 6px;
    border: 1px solid #cbd5e1;
}

.front-article-author i {
    color: #2d6fa8; /* Выделяем иконку автора фирменным синим */
    font-size: 16px;
    margin-right: 6px;
}

/* Звезды рейтинга */
.front-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #f1c40f;
}
.front-stars .fa-star-o { color: #cbd5e1; }
.front-stars-num {
    font-weight: 700;
    color: #637e92;
    margin-left: 4px;
}

/* Теги (Предметы и Классы) в общей строке */
.front-tag {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.front-tag-subject {
    background-color: #e3f2fd;
    color: #2d6fa8;
}
.front-tag-subject:hover { background-color: #2d6fa8; color: #ffffff; }

.front-tag-grade {
    background-color: #f0f4f8;
    color: #55728e;
}
.front-tag-grade:hover { background-color: #55728e; color: #ffffff; }


/* =====================================================
   Адаптивность (Мобильная версия)
   ===================================================== */
@media (max-width: 767px) {
    .front-article {
        padding: 16px;
    }
    .front-article-title {
        font-size: 18px;
        margin-bottom: 12px;
    }
    /* На мобильных элементах строка мета-данных сохраняет
       левое выравнивание, блоки просто ложатся друг под друга */
    .front-article-meta {
        column-gap: 12px;
        row-gap: 8px;
        padding-bottom: 12px;
    }
    .front-article-meta-item, .front-tag {
        font-size: 12px;
    }
}



/* =====================================================
   Блок прикреплённых файлов (Чистый воздушный UX)
   ===================================================== */

.front-files {
    margin-top: 32px;
    margin-bottom: 35px;
    padding-top: 24px;
    border-top: 1px solid #eef2f6; /* Просто элегантная линия-разделитель вместо серой коробки */
    background: none; /* Убираем фоновую подложку */
}

/* Заголовок блока */
.front-files-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a2b3c;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.front-files-title i {
    color: #2d6fa8;
}

/* Текстовое предупреждение (Убрали кучу алертов, плашек и рамок) */
.front-files-notice {
    background: none; /* Полностью убираем заливку */
    border: none; /* Убираем левый толстый бордер */
    padding: 0;
    margin-bottom: 20px;
    font-size: 13px;
    color: #64748b; /* Спокойный серо-синий цвет вместо ядовито-желтого */
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

/* Иконка в предупреждении */
.front-files-notice i {
    color: #e67e22; /* Мягкий оранжевый акцент для привлечения внимания к инфо */
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Список файлов */
.front-files-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Карточка файла (Облегчённая, без эффекта тяжести) */
.front-file-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 16px;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

/* Эффект при наведении */
.front-file-link:hover {
    border-color: #2d6fa8;
    background-color: #f8fafc; /* Едва заметный аккуратный подсвет */
    box-shadow: 0 2px 8px rgba(45, 111, 168, 0.06);
}

/* Левая часть (Иконка + Название) */
.front-file-info-group {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.front-file-info-group i {
    font-size: 20px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Цвета иконок */
.front-file-icon-word { color: #2b579a; }
.front-file-icon-pdf { color: #b30b00; }
.front-file-icon-excel { color: #217346; }
.front-file-icon-powerpoint { color: #d24115; }
.front-file-icon-archive { color: #ffc107; }
.front-file-icon-default { color: #718096; }
.front-file-icon-text    { color: #4a5568; }

/* Текст названия файла */
.front-file-name {
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.front-file-link:hover .front-file-name {
    color: #2d6fa8;
}

/* Правая часть (Действия) */
.front-file-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Компактный бейдж */
.front-file-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: #edf2f7;
    color: #4a5568;
    text-transform: uppercase;
}
.front-file-badge.badge-docx, .front-file-badge.badge-doc, .front-file-badge.badge-odt { background: #e1ecf4; color: #2b579a; }
.front-file-badge.badge-pdf  { background: #fbebeb; color: #b30b00; }
.front-file-badge.badge-xlsx, .front-file-badge.badge-xls, .front-file-badge.badge-ods { background: #e6f4ea; color: #217346; }
.front-file-badge.badge-pptx, .front-file-badge.badge-ppt, .front-file-badge.badge-odp { background: #fdeee9; color: #d24115; }
.front-file-badge.badge-zip,  .front-file-badge.badge-rar, .front-file-badge.badge-7z  { background: #fff8e1; color: #b8860b; }
.front-file-badge.badge-txt,  .front-file-badge.badge-rtf, .front-file-badge.badge-csv  { background: #f0f4f8; color: #4a5568; }

/* Скачать */
.front-file-download-label {
    font-size: 12px;
    font-weight: 700;
    color: #7fa1be;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease;
}

.front-file-link:hover .front-file-download-label {
    color: #2d6fa8;
}

/* Адаптив под мобилки */
@media (max-width: 575px) {
    .front-files {
        margin-top: 24px;
        padding-top: 16px;
    }
    .front-file-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px;
    }
    .front-file-actions {
        width: 100%;
        justify-content: space-between;
        border-top: 1px dashed #edf2f7;
        padding-top: 8px;
    }
    .front-file-name {
        white-space: normal;
        word-break: break-all;
    }
}


/* =====================================================
   Новый объединённый блок интерактива и комментариев
   ===================================================== */

.front-comments-block {
    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 8px;
    padding: 24px;
    margin-top: 20px; /* Отступ от основной статьи */
    margin-bottom: 24px;
}

/* =====================================================
   Новый минималистичный inline-рейтинг (Без рамок)
   ===================================================== */
.front-rating-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f4f8; /* Легкая разделительная черта */
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.front-rating-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1a2b3c;
    margin-bottom: 2px;
}

.front-rating-subtitle {
    display: block;
    font-size: 12px;
    color: #718096;
}

.front-rating-stars-interactive {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.front-rating-stars i {
    font-size: 22px; /* Чуть крупнее, чтобы было удобно нажимать */
    color: #cbd5e1;
    cursor: pointer;
    margin-left: 2px;
    transition: color 0.1s ease;
}
.front-rating-stars i:hover,
.front-rating-stars i.hovered {
    color: #f1c40f;
}

.front-rating-hint {
    font-size: 11px;
    color: #a0aec0;
}

.front-rating-voted {
    font-size: 13px;
    font-weight: 600;
    color: #16a085;
    background: #e6f7f4;
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* =====================================================
   Чистый список комментариев (Без коробок и рамок)
   ===================================================== */
.front-comments-section {
    margin-bottom: 32px;
}

.front-comments-heading {
    font-size: 16px;
    font-weight: 700;
    color: #1a2b3c;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.front-comments-heading i {
    color: #2d6fa8;
}
.front-comments-count {
    background: #edf2f7;
    color: #4a5568;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
}

.front-comments-list {
    display: flex;
    flex-direction: column;
}

/* Сам комментарий: теперь это просто чистая строка с линией снизу */
.front-comment {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #f0f4f8; /* Разделитель вместо рамки */
    background: none;
}
.front-comment:last-child {
    border-bottom: none; /* У последнего убираем линию */
}

/* Ответ на комментарий */
.front-comment-reply {
    padding-left: 40px; /* Сдвиг вправо */
    border-bottom: 1px solid #f0f4f8;
}

.front-comment-avatar {
    font-size: 32px;
    color: #a0aec0;
    display: flex;
    align-items: flex-start;
}

.front-comment-main {
    flex: 1;
}

.front-comment-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.front-comment-author {
    font-size: 13px;
    font-weight: 700;
    color: #2d3748;
}

.front-comment-date {
    font-size: 11px;
    color: #a0aec0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.front-comment-text {
    font-size: 13px;
    color: #4a5568;
    line-height: 1.5;
}

.front-comments-empty {
    font-size: 13px;
    color: #718096;
    font-style: italic;
    padding: 10px 0;
}

/* =====================================================
   Форма комментариев
   ===================================================== */
.front-comment-form-wrap {
    padding-top: 20px;
    border-top: 1px solid #edf2f7;
}

.front-comments-heading-sub {
    font-size: 14px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 12px;
}

.front-comment-textarea {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 10px 12px;
    font-size: 13px;
    box-shadow: none !important;
}
.front-comment-textarea:focus {
    border-color: #2d6fa8 !important;
}

.front-comment-char-count {
    font-size: 11px;
    color: #94a3b8;
    text-align: right;
    margin-top: 4px;
}

.front-form-guest-notice {
    font-size: 13px;
    color: #4a5568;
    background: #f7fafc;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

/* Наша оранжевая фирменная кнопка действия */
.front-submit-btn {
    background-color: #e67e22;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(230, 126, 34, 0.1);
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.front-submit-btn:hover {
    background-color: #d0691a;
}

/* =====================================================
   Адаптивность (Мобильные)
   ===================================================== */
@media (max-width: 767px) {
    .front-comments-block {
        padding: 16px;
        margin-top: 16px;
    }
    .front-rating-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-bottom: 16px;
    }
    .front-rating-stars-interactive {
        align-items: flex-start;
    }
    .front-comment-reply {
        padding-left: 16px;
    }
}


/* =====================================================
   Блок похожих материалов (Флекс-выравнивание БЕЗ рамок)
   ===================================================== */

.front-similar-block {
    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 8px;
    padding: 24px;
    margin-top: 20px;
    margin-bottom: 24px;
}

/* Главный заголовок блока */
.front-similar-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a2b3c;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.front-similar-title i {
    color: #2d6fa8;
}

/* Включаем Flexbox для колонок Bootstrap, чтобы выровнять высоту */
.front-similar-flex-grid {
    display: flex;
    flex-wrap: wrap;
}

/* Обнуляем дефолтные отступы флекса для колонок, чтобы они не ломались */
.front-similar-col {
    display: flex;
    flex-direction: column;
}

/* Карточка-ссылка (Никаких рамок, легкий пастельный фон) */
.front-similar-card {
    background: #f8fafc; /* Мягкая чистая подложка вместо белого фона с рамкой */
    border: none; /* ПОЛНОСТЬЮ убираем рамку карточки, убирая "рамку в рамке" */
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
    text-decoration: none !important;

    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Толкает мета-данные строго к нижнему краю */
    flex-grow: 1; /* Заставляет все карточки в ряду растягиваться до одной высоты */

    transition: all 0.15s ease;
}

/* Эффект наведения на всю карточку */
.front-similar-card:hover {
    background: #edf2f7; /* Карточка плавно темнеет при наведении */
}

/* Текст заголовка внутри карточки */
.front-similar-card-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.4;
    margin-bottom: 12px;
    transition: color 0.15s ease;
}

/* При наведении подсвечиваем только текст ссылки */
.front-similar-card:hover .front-similar-card-title {
    color: #2d6fa8; /* Наш фирменный синий */
}

/* Нижняя линейка мета-данных */
.front-similar-card-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: auto; /* Жестко прижимает блок к низу карточки */
    padding-top: 8px;
}

/* Иконки и цифры */
.front-similar-meta-item {
    font-size: 11px;
    color: #718096;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.front-similar-meta-item i {
    color: #a0aec0;
}

/* Адаптивность для мобильных телефонов */
@media (max-width: 767px) {
    .front-similar-block {
        padding: 16px;
    }
    .front-similar-flex-grid {
        display: block; /* Отключаем флекс на мобилках, там они идут друг за другом */
    }
}


/* =====================================================
   Форма поиска в сайдбаре (Монолитный чистый UI)
   ===================================================== */

/* Общий сайдбарный блок (если у тебя для него еще нет стилей) */
.front-searhc-sidebar-block {
    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

/* Контейнер-обертка для инпута и кнопки */
.front-sidebar-search-wrap {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #cbd5e1; /* Аккуратная тонкая рамка */
    border-radius: 6px; /* Мягкое закругление всей формы */
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Эффект фокуса на всей форме, когда учитель вводит текст */
.front-sidebar-search-wrap:focus-within {
    border-color: #2d6fa8; /* Фирменный синий */
    box-shadow: 0 0 0 3px rgba(45, 111, 168, 0.12); /* Мягкое свечение */
}

/* Поле ввода */
.front-sidebar-search-input {
    flex: 1;
    height: 38px;
    border: none !important; /* Убираем внутренние рамки */
    background: transparent;
    padding: 0 14px;
    font-size: 13px;
    color: #333333;
    outline: none !important;
    box-shadow: none !important;
}

.front-sidebar-search-input::placeholder {
    color: #94a3b8; /* Приглушенный цвет плейсхолдера */
}

/* Кнопка поиска (Иконка) */
.front-sidebar-search-btn {
    height: 38px;
    width: 42px;
    background: transparent; /* Никаких серых дефолтных фонов и градиентов */
    border: none !important;
    color: #64748b; /* Спокойный цвет иконки по умолчанию */
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease;
    outline: none !important;
}

/* Эффект при наведении на иконку поиска */
.front-sidebar-search-btn:hover {
    color: #2d6fa8; /* Иконка становится фирменной синей */
    background-color: #f1f5f9; /* Легкий круглый или квадратный подсвет под ней */
}


/* =====================================================
   Сетка подкатегорий (Чистый UI без рамок)
   ===================================================== */

/* Включаем флекс для ряда, чтобы выровнять высоту плашек */
.front-subcat-flex-grid {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Настройка колонок для flex-растяжения */
.front-subcat-col {
    display: flex;
    flex-direction: column;
}

/* Карта подкатегории (Без бордеров, на мягкой подложке) */
.front-cat-card {
   /* background-color: #f8fafc; !* Мягкий, чистый пастельный фон вместо белого с рамкой *!
    border: none !important; *//* Начисто срезаем рамки коробки */
    background: #ffffff;
    border: 1px solid #e1e8ef !important;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
    text-decoration: none !important;

    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Заголовок сверху, счётчик снизу */
    flex-grow: 1; /* Растягивает все карточки в ряду до единой высоты */

    transition: all 0.15s ease-in-out;
}

/* Ховер-эффект для кликабельной карточки */
a.front-cat-card:hover {
    border-color: #2d6fa8 !important;
    box-shadow: 0 4px 12px rgba(45, 111, 168, 0.06) !important;
    transform: translateY(-1px);
}

/* Карточка без ссылки (если нет url) */
.front-cat-card-nolink {
    background-color: #f1f5f9;
    cursor: default;
    opacity: 0.8;
}

/* Название подкатегории */
.front-cat-card-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.4;
    margin-bottom: 10px;
    transition: color 0.15s ease;
}

/* При наведении подсвечиваем название синим */
a.front-cat-card:hover .front-cat-card-title {
    color: #2d6fa8; /* Наш фирменный синий */
}

/* Количество материалов */
.front-cat-card-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #64748b; /* Спокойный серый текст */
    font-weight: 600;
    margin-top: auto; /* Прижимает к нижней границе плашки */
}

.front-cat-card-count i {
    color: #94a3b8; /* Иконка папки чуть бледнее */
}

/* Адаптивность для мобилок */
@media (max-width: 767px) {
    .front-subcat-flex-grid {
        display: block; /* Сбрасываем флекс на смартфонах */
    }
    .front-cat-card {
        padding: 14px;
        margin-bottom: 12px;
    }
}


/* =====================================================
   Страница учителя: Профессиональное Портфолио
   ===================================================== */

.teacher-profile-card {
    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 8px;
    padding: 28px;
    margin-bottom: 28px;
}

/* Флекс-контейнер для аватара и базовой инфы */
.teacher-profile-flex {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* Зона аватара */
.teacher-avatar-zone {
    flex-shrink: 0;
}

/* Реальное фото */
.teacher-img-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f0f4f8;
}

/* Новая стильная заглушка, если фото нет */
.teacher-avatar-placeholder {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.teacher-avatar-placeholder i {
    font-size: 48px;
}

/* Правая зона с контентом */
.teacher-info-zone {
    flex-grow: 1;
}

/* Имя преподавателя */
.teacher-main-name {
    font-size: 22px;
    font-weight: 700;
    color: #1a2b3c;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

/* Список мета-данных (место работы, должность) */
.teacher-meta-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.teacher-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4a5568;
}

.teacher-meta-icon {
    color: #94a3b8;
    width: 16px;
    text-align: center;
    font-size: 14px;
}

.teacher-meta-text {
    line-height: 1.4;
}

/* Визуальные бейджи для вывода статистики */
.teacher-badges-wrapper {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.teacher-badge-stat {
    background: #f1f5f9;
    padding: 6px 14px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.teacher-badge-stat .stat-num {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

.teacher-badge-stat .stat-label {
    font-size: 12px;
    color: #64748b;
}

/* Выделенный золотой бейдж для рейтинга */
.teacher-badge-stat.badge-rating-gold {
    background: #fff9e6;
}

.teacher-badge-stat.badge-rating-gold .stat-num {
    color: #b78a00;
}

.teacher-badge-stat.badge-rating-gold .stat-num i {
    color: #f1c40f; /* Золотая звезда */
}

.teacher-badge-stat.badge-rating-gold .stat-label {
    color: #8a6d1c;
}

/* Блок "О себе" / Текст биографии */
.teacher-biography-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px dashed #e2e8f0;
}

.biography-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 8px;
}

.biography-text {
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
}

/* Адаптив под мобильные устройства */
@media (max-width: 575px) {
    .teacher-profile-card {
        padding: 16px;
    }
    .teacher-profile-flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }
    .teacher-meta-row {
        justify-content: center;
    }
    .teacher-badges-wrapper {
        justify-content: center;
        width: 100%;
    }
    .teacher-badge-stat {
        flex: 1;
        min-width: 100px;
        flex-direction: column;
        gap: 2px;
        padding: 8px;
    }
}


/* =====================================================
   Форма добавления публикации (Вертикальный чистый UI)
   ===================================================== */

/* Основная карточка */
.front-form-card {
    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 8px;
    padding: 32px;
    margin-bottom: 30px;
}

.front-form-header {
    border-bottom: 1px solid #f0f4f8;
    padding-bottom: 20px;
    margin-bottom: 24px;
}

.front-form-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a2b3c;
    margin: 0 0 6px 0;
}

.front-form-desc {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* Стак-группа */
.front-form-group {
    margin-bottom: 20px;
}

/* Лейблы строго над полями */
.front-field-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 8px;
}
.front-field-label .required {
    color: #e74c3c;
    margin-left: 2px;
}

/* Кастомный стиль инпутов */
.front-input {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    height: auto !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.front-input:focus {
    border-color: #2d6fa8 !important;
    box-shadow: 0 0 0 3px rgba(45, 111, 168, 0.12) !important;
}

/* Стилизация селекта */
.front-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px !important;
    cursor: pointer;
}

/* Ошибки валидации */
.front-field-error {
    display: block;
    font-size: 12px;
    color: #e74c3c;
    margin-top: 4px;
    font-weight: 600;
}

/* Вспомогательный текст */
.front-field-help {
    font-size: 12px;
    color: #64748b;
    margin-top: 6px;
    line-height: 1.4;
}

/* Кастомный блок для загрузки файлов */
.front-file-upload-zone {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    padding: 12px 16px;
}

.front-file-label-trigger {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    transition: all 0.15s ease;
}
.front-file-label-trigger:hover {
    border-color: #2d6fa8;
    color: #2d6fa8;
}

.hidden-file-input {
    display: none !important;
}

.front-file-counter {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

/* Кнопки внизу формы */
.front-form-actions {
    border-top: 1px solid #f0f4f8;
    padding-top: 24px;
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Наша главная оранжевая кнопка */
.front-btn-submit-action {
    background-color: #e67e22;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 12px 26px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.front-btn-submit-action:hover {
    background-color: #d0691a;
}

/* Ссылка отмены */
.front-btn-cancel-link {
    font-size: 14px;
    color: #64748b;
    text-decoration: none !important;
    font-weight: 600;
    transition: color 0.15s ease;
}
.front-btn-cancel-link:hover {
    color: #1e293b;
}

/* Адаптивность для мобильных */
@media (max-width: 767px) {
    .front-form-card {
        padding: 20px;
    }
    .front-file-upload-zone {
        flex-direction: column;
        align-items: stroke;
        gap: 10px;
        text-align: center;
    }
    .front-file-label-trigger {
        justify-content: center;
    }
    .front-form-actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    .front-btn-submit-action {
        width: 100%;
        justify-content: center;
    }
    .front-btn-cancel-link {
        display: block;
        text-align: center;
        padding: 6px 0;
    }
}


/* =====================================================
   Кастомный сайдбар для формы публикации (Исправление)
   ===================================================== */

/* Базовый контейнер блока сайдбара */
.create-form-sidebar .front-sidebar-block {
    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 8px;
    padding: 20px;         /* Увеличили внутренний отступ, чтобы текст не лип к краям */
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* Заголовки блоков в сайдбаре */
.front-sidebar-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a2b3c;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;                /* Красивый фиксированный отступ от иконки до текста */
    line-height: 1.2;
}

/* Стилизация списка "Памятка автору" */
.front-sidebar-list-checked {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.front-sidebar-list-checked li {
    position: relative;
    padding-left: 22px;      /* Место под галочку */
    font-size: 13px;
    line-height: 1.5;
    color: #4a5568;
    margin-bottom: 12px;
}

.front-sidebar-list-checked li:last-child {
    margin-bottom: 0;
}

/* Красивая кастомная галочка вместо бутстраповских иконок */
.front-sidebar-list-checked li::before {
    content: "\f00c";        /* Код галочки в FontAwesome */
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 2px;
    color: #2ecc71;          /* Чистый зеленый цвет */
    font-size: 12px;
    font-weight: normal;
}

/* Описание и мелкий текст */
.front-sidebar-text-sm {
    font-size: 13px;
    line-height: 1.5;
    color: #4a5568;
    margin-bottom: 14px;
}

/* ВЫДЕЛЕННЫЙ БЛОК: Свидетельство о публикации */
.front-sidebar-block.bonus-certificate-block {
    background: #fffdf9;     /* Теплый кремовый пастельный фон */
    border: 1px solid #f3e5d8;
}

/* Кнопка "Подробнее об условиях" (переопределяем старый btn-default) */
.bonus-certificate-block .btn-block {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: all 0.15s ease;
}

.bonus-certificate-block .btn-block:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}

/* Блок дефицитных тегов/категорий */
.front-sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;                /* Отступы между плашками */
    margin-top: 12px;
}

/* Кастомный subtle-лейбл (переопределяем жесткие стили .label из Bootstrap) */
.front-sidebar-tags .label-subtle {
    display: inline-block;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    text-shadow: none !important;
    white-space: normal !important; /* Чтобы длинные теги могли переноситься на мобилках */
    line-height: 1.2 !important;
}

/* Цветные маркеры для иконок в заголовках */

/* =====================================================
   Дополнительные стили для доски объявлений и сайдбара
   ===================================================== */

/* Специфический пастельный блок для предупреждений/правил */
.front-sidebar-block.alert-rules-block {
    background: #fffafa; /* Очень мягкий красный/розовый оттенок */
    border-color: #fadbd8;
}

/* Переопределяем цвет галочек для блока правил на предупреждающий оранжево-красный */
.rules-red-marker li::before {
    content: "\f00d" !important; /* Ставим крестик FontAwesome вместо галочки */
    color: #e74c3c !important;   /* Красный цвет маркера */
    font-size: 11px !important;
    top: 3px;
}

/* Цветные маркеры иконок для заголовков сайдбара объявлений */
.front-sidebar-title i.text-primary { color: #2d6fa8 !important; }
.front-sidebar-title i.text-warning { color: #e67e22 !important; }
.front-sidebar-title i.text-success { color: #2ecc71 !important; }


/* Сама карточка предмета */
.front-subject-item {
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 10px 14px;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out;
}


/* Настраиваемая аккуратная иконка */
.front-subject-icon {
    font-size: 14px;
    color: #64748b; /* Спокойный базовый цвет иконок */
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

/* Название предмета */
.front-subject-name {
    font-size: 13px;
    font-weight: 600;
    /*color: #334155;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Если предмет длинный, он изящно сократится */
}

/* Счетчик публикаций */
.front-subject-count {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    background: #e2e8f0;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

/* ХОВЕР-ЭФФЕКТ: мягкая подсветка всей карточки */
.front-subject-item:hover {
    background: #edf2f7;
}
.front-subject-item:hover .front-subject-icon {
    color: #2d6fa8; /* Иконка загорается фирменным синим */
}
.front-subject-item:hover .front-subject-name {
    color: #1e293b;
}
/* АКТИВНОЕ СОСТОЯНИЕ (Выбранный предмет) */
.front-subject-item.active {
    background: #2d6fa8 !important; /* Наш синий цвет становится фоном */
    border-color: #2d6fa8;
}
.front-subject-item.active .front-subject-icon,
.front-subject-item.active .front-subject-name {
    color: #ffffff !important; /* Текст и иконка белые */
}
.front-subject-item.active .front-subject-count {
    background: rgba(255, 255, 255, 0.25) !important; /* Прозрачный белый бадж */
    color: #ffffff !important;
}

/* Адаптивность для планшетов и мобильных */
@media (max-width: 991px) {
    .front-subject-card {
        flex: 1 1 100%; /* На планшетах сайдбара и мелких экранах выстраиваем в 1 колонку */
    }
}

/* Кнопка "Все публикации" на главной */
.front-all-posts-wrap {
    text-align: center;
    padding: 20px 0 8px;
}
.front-all-posts-btn {
    display: inline-block;
    padding: 10px 28px;
    background: #ffffff;
    border: 2px solid #2d6fa8;
    border-radius: 6px;
    color: #2d6fa8;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.15s ease;
}
.front-all-posts-btn i {
    margin-left: 6px;
}
.front-all-posts-btn:hover {
    background: #2d6fa8;
    color: #ffffff;
}

/* =====================================================
   Виджет: Лучшие преподаватели
   ===================================================== */

.front-top-teachers-block {
    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 8px;
    padding: 24px;
    margin-top: 20px;
    margin-bottom: 24px;
}

.front-teachers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.front-teachers-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a2b3c;
    display: flex;
    align-items: center;
    gap: 8px;
}
.front-teachers-title i {
    color: #f1c40f;
    font-size: 18px;
}

.front-teachers-all-link {
    font-size: 13px;
    font-weight: 600;
    color: #2d6fa8;
    text-decoration: none !important;
    transition: color 0.15s ease;
}
.front-teachers-all-link:hover {
    color: #1a4f7c;
}

.front-teachers-flex-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.front-teacher-mini-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 16px;
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    transition: all 0.15s ease-in-out;
}

.front-teacher-mini-card:hover {
    border-color: #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transform: translateY(-2px);
}

.front-teacher-avatar-link {
    display: block;
    margin-bottom: 12px;
}

.front-teacher-mini-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #edf2f7;
}

.front-teacher-mini-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}
.front-teacher-mini-placeholder i {
    font-size: 28px;
}

.front-teacher-mini-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
    width: 100%;
}

.front-teacher-mini-name {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px 0;
    line-height: 1.3;
}
.front-teacher-mini-name a {
    color: #2c3e50;
    text-decoration: none !important;
    transition: color 0.15s ease;
}
.front-teacher-mini-card:hover .front-teacher-mini-name a {
    color: #2d6fa8;
}

.front-teacher-mini-meta {
    font-size: 12px;
    color: #64748b;
    display: block;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.front-teacher-mini-city {
    font-size: 11px;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.front-teacher-mini-footer {
    width: 100%;
    border-top: 1px dashed #f1f5f9;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mini-badge-rating {
    background: #fff9e6;
    color: #b78a00;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.mini-badge-rating i {
    color: #f1c40f;
}

.mini-teacher-pubs {
    font-size: 11px;
    color: #64748b;
}

@media (max-width: 600px) {
    .front-teachers-flex-grid {
        display: block;
    }
    .front-teacher-mini-card {
        margin-bottom: 12px;
        flex-direction: row;
        text-align: left;
        align-items: center;
        padding: 12px;
    }
    .front-teacher-mini-card:last-child {
        margin-bottom: 0;
    }
    .front-teacher-avatar-link {
        margin-bottom: 0;
        margin-right: 14px;
    }
    .front-teacher-mini-info {
        align-items: flex-start;
        margin-bottom: 0;
    }
    .front-teacher-mini-footer {
        width: auto;
        border-top: none;
        padding-top: 0;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        margin-left: auto;
    }
}


/* Родительский флекс-контейнер для карточек */
.front-teachers-flex-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: stretch; /* Важно: заставляет все карточки в ряду быть ОДИНАКОВОЙ высоты */
}

/* Сама карточка */
.front-teacher-mini-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 16px;
    flex: 1;
    min-width: 160px; /* Немного уменьшили, чтобы 5-6 карточек лучше влезали в ряд */

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    transition: all 0.15s ease-in-out;
}

/* Ссылка-обертка аватара: изолируем её размеры */
.front-teacher-avatar-link {
    display: block;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    flex-shrink: 0; /* Не дает аватарке сжиматься */
    position: relative;
}

/* Картинка внутри аватара */
.front-teacher-mini-img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #edf2f7;
    display: block;
}

/* Заглушка аватара */
.front-teacher-mini-placeholder {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

/* Контейнер с текстом */
.front-teacher-mini-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 16px;
    flex-grow: 1; /* Позволяет блоку занимать всё свободное место */
}

/* Имя */
.front-teacher-mini-name {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 6px 0;
    line-height: 1.3;
    width: 100%;
    word-wrap: break-word; /* Позволяет длинным именам переноситься, а не вылезать боком */
}

/* Мета-статус (Должность) */
.front-teacher-mini-meta {
    font-size: 12px;
    color: #64748b;
    display: block;
    margin-bottom: 4px;
    line-height: 1.3;
    width: 100%;
}

/* Город */
.front-teacher-mini-city {
    font-size: 11px;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: auto; /* Мягко толкает город чуть ниже, к подвалу */
}

/* ПОДВАЛ КАРТОЧКИ: теперь он всегда прижат к самому низу */
.front-teacher-mini-footer {
    width: 100%;
    border-top: 1px dashed #edf2f7;
    padding-top: 12px;
    margin-top: auto; /* МАГИЯ: выравнивает все подвалы по одной нижней линии, независимо от высоты текста выше */
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* =====================================================
   Лента объявлений (Современный горизонтальный список)
   ===================================================== */

.front-board-section {
    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

/* Шапка блока */
.front-board-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f4f8;
    padding-bottom: 12px;
}

.front-board-section-header .front-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a2b3c;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.text-info-icon {
    color: #e67e22; /* Выделяем рупор приятным оранжевым цветом доски */
}

.front-board-all-link {
    font-size: 13px;
    font-weight: 600;
    color: #2d6fa8;
    text-decoration: none !important;
}
.front-board-all-link:hover {
    color: #1a4f7c;
}

/* Контейнер списка */
.front-board-list {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Небольшой отступ между строками */
}

/* Строка объявления */
.front-board-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc; /* Спокойный пастельный фон строки */
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 12px 16px;
    transition: all 0.15s ease-in-out;
}

/* Ховер на всю строку */
.front-board-list-item:hover {
    background: #edf2f7;
    border-color: #e2e8f0;
}

/* Левая часть: Тег + Ссылка */
.front-board-item-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-grow: 1;
    overflow: hidden;
}

/* Пастельный аккуратный тег категории */
.front-board-tag {
    display: inline-block;
    background: #e0f2fe; /* Нежно-голубой тон */
    color: #0369a1; /* Контрастный сине-голубой текст */
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Заголовок-ссылка */
.front-board-list-title {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Защита от разрыва строки в длинных тайтлах */
    width: 100%;
}

.front-board-list-title a {
    color: #334155;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.front-board-list-item:hover .front-board-list-title a {
    color: #2d6fa8; /* При ховере на строку заголовок подсвечивается */
}

/* Правая часть: Дата */
.front-board-item-side {
    margin-left: 16px;
    flex-shrink: 0;
}

.front-board-date {
    font-size: 12px;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

/* Адаптивность под мобилки */
@media (max-width: 767px) {
    .front-board-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
    }

    .front-board-item-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

    .front-board-list-title {
        white-space: normal; /* На мобилке пусть текст переносится */
    }

    .front-board-item-side {
        margin-left: 0;
        border-top: 1px dashed #e2e8f0;
        width: 100%;
        padding-top: 8px;
    }
}

/* -----------------------------------------------
   Тесты — вопросы и ответы
----------------------------------------------- */
.front-test-intro {
    color: #555;
    margin-bottom: 20px;
    font-size: 15px;
}

.test-question-block {
    border: 1px solid #e8edf2;
    border-radius: 6px;
    padding: 18px 20px;
    margin-bottom: 18px;
    background: #fff;
}

.test-question-num {
    display: inline-block;
    background: #4a90d9;
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    margin-right: 8px;
    flex-shrink: 0;
}

.test-question-text {
    font-size: 15px;
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 14px;
    line-height: 1.55;
}

.test-answer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.test-answer-item {
    margin-bottom: 8px;
}

.test-answer-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-weight: normal;
    font-size: 14px;
    color: #444;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.test-answer-label:hover {
    background: #f0f6ff;
    border-color: #c3d9f5;
}

.test-answer-input {
    margin-top: 3px;
    flex-shrink: 0;
}

.test-submit-block {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px dashed #dde3ea;
    text-align: center;
}

/* Результат теста */
.test-result-block {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border-radius: 8px;
    margin: 20px 0;
}

.test-result-icon .fa {
    font-size: 48px;
    opacity: 0.85;
}

.test-result-grade {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 6px;
}

.test-result-percent {
    font-size: 14px;
    font-weight: normal;
    color: inherit;
    opacity: 0.75;
    margin-left: 6px;
}

.test-result-message {
    font-size: 15px;
    opacity: 0.9;
}

.test-result-actions {
    margin-top: 24px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.front-sidebar-section {
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .test-result-block {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .test-result-actions {
        flex-direction: column;
    }

    .test-result-actions .btn {
        width: 100%;
    }
}


/* =====================================================
   Страница тестирования (Интерактивный чистый UI)
   ===================================================== */

.front-test-container {
    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 8px;
    padding: 28px;
    margin-bottom: 24px;
}

.front-test-page-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a2b3c;
    margin-top: 0;
    margin-bottom: 14px;
    line-height: 1.4;
}

/* Мета-строка */
.front-test-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #e2e8f0;
}

.front-test-meta-item {
    font-size: 13px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Теги предметов и классов */
.front-test-badge-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.front-test-badge-tag.tag-subject {
    background: #e0f2fe;
    color: #0369a1;
}
.front-test-badge-tag.tag-grade {
    background: #f0fdf4;
    color: #166534;
}

/* Звездный рейтинг в мета-строке */
.front-test-rating-stars-badge {
    background: #fff9e6;
    color: #b78a00;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.icon-star-filled { color: #f1c40f; }

/* Вводное описание к тесту */
.front-test-description-box {
    background: #f8fafc;
    border-left: 4px solid #2d6fa8;
    padding: 14px 18px;
    border-radius: 0 6px 6px 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 28px;
}

/* КАРТОЧКА ВОПРОСА */
.modern-question-card {
    background: #ffffff;
   /* border: 1px solid #e2e8f0;
    border-radius: 8px;*/
    border-bottom: 1px solid #e2e8f0;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.01);
}

.modern-question-header {
    margin-bottom: 16px;
}

.modern-question-number {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #2d6fa8;
    background: #edf5fa;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.modern-question-text {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.5;
}

/* СЕТКА ВАРИАНТОВ ОТВЕТОВ */
.modern-answers-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modern-answer-row {
    position: relative;
    display: flex;
}

/* Скрываем нативный стандартный input */
.modern-answer-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Новый большой label, растянутый на всю ширину плашки */
.modern-answer-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
    font-weight: 500;
    color: #334155;
    font-size: 14px;
    line-height: 1.4;
    transition: all 0.15s ease-in-out;
}

/* Ховер на строку ответа */
.modern-answer-label:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}

/* Кастомный круг / квадрат индикатора */
.modern-custom-indicator {
    width: 18px;
    height: 18px;
    border: 2px solid #94a3b8;
    background: #ffffff;
    flex-shrink: 0;
    margin-top: 1px;
    position: relative;
    transition: all 0.15s ease;
}
.modern-custom-indicator.is-circle { border-radius: 50%; }
.modern-custom-indicator.is-box { border-radius: 4px; }

/* МАГИЯ ХОВЕРА И ВЫБОРА ЧЕРЕЗ СЕЛЕКТОРЫ СВЯЗИ (+) */
.modern-answer-input:checked + .modern-answer-label {
    background: #f0f7fc;
    border-color: #2d6fa8;
    color: #1e40af;
}

.modern-answer-input:checked + .modern-answer-label .modern-custom-indicator {
    border-color: #2d6fa8;
    background: #2d6fa8;
}

/* Внутренняя точка или галочка для выбранного элемента */
.modern-answer-input:checked + .modern-answer-label .modern-custom-indicator::after {
    content: '';
    position: absolute;
    background: #ffffff;
}

.modern-answer-input:checked + .modern-answer-label .modern-custom-indicator.is-circle::after {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    top: 4px;
    left: 4px;
}

.modern-answer-input:checked + .modern-answer-label .modern-custom-indicator.is-box::after {
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    top: 1px;
    left: 5px;
}

/* Текст внутри ответа */
.modern-answer-text {
    flex-grow: 1;
}

/* КНОПКА ЗАВЕРШЕНИЯ ТЕСТА */
.front-test-submit-zone {
    margin-top: 32px;
    text-align: center;
}

.front-test-complete-btn {
    background: #2d6fa8;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(45, 111, 168, 0.2);
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.front-test-complete-btn:hover {
    background: #225480;
    box-shadow: 0 4px 12px rgba(45, 111, 168, 0.3);
    transform: translateY(-1px);
}

/* БЛОК ОЦЕНКИ ("Вам помог этот тест?") */
.front-rating-inline-card {
    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.front-rating-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a2b3c;
    margin: 0 0 4px 0;
}

.front-rating-card-subtitle {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

.front-interactive-stars-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.front-rating-stars-clickable {
    font-size: 20px;
    color: #cbd5e1;
    cursor: pointer;
    display: flex;
    gap: 4px;
}

.rating-star-item:hover,
.rating-star-item.active {
    color: #f1c40f;
}

.front-rating-hint-text {
    font-size: 11px;
    color: #94a3b8;
}

.front-rating-success-message {
    color: #16a34a;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* =====================================================
   Навигационное меню в сайдбаре (Страница тестов)
   ===================================================== */

.front-sidebar-nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Минимальный отступ между пунктами */
    margin-top: 12px;
}

/* Элемент меню */
.front-sidebar-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f8fafc; /* Легкая чистая подложка */
    border: 1px solid transparent;
    border-radius: 6px;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out;
}

/* Контейнер для иконки и текста */
.front-nav-item-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

/* Базовый стиль для иконок внутри меню */
.front-nav-item-content i {
    font-size: 14px;
    width: 20px;
    text-align: center;
    transition: transform 0.15s ease;
}

/* Точечные цвета для иконок, чтобы оживить блок */
.nav-icon-purple { color: #8b5cf6; }
.nav-icon-blue   { color: #2d6fa8; }

/* Стрелочка вправо */
.front-nav-arrow {
    font-size: 14px;
    color: #94a3b8;
    transition: all 0.15s ease;
}

/* ХОВЕР НА СТРОКУ: плашка плавно подсвечивается, стрелочка сдвигается */
.front-sidebar-nav-item:hover {
    background: #edf2f7;
    border-color: #e2e8f0;
}

.front-sidebar-nav-item:hover .front-nav-item-content {
    color: #0f172a;
}

.front-sidebar-nav-item:hover .front-nav-item-content i {
    transform: scale(1.15); /* Иконка слегка увеличивается */
}

.front-sidebar-nav-item:hover .front-nav-arrow {
    color: #2d6fa8;
    transform: translateX(3px); /* Стрелочка делает изящный шаг вправо */
}

/* =====================================================
   Виджет: Популярные тесты в сайдбаре
   ===================================================== */

/* Иконка огонька для заголовка */
.text-danger-icon {
    color: #e74c3c !important; /* Яркий красный/оранжевый цвет для популярного */
}

/* Контейнер списка */
.front-sidebar-popular-list {
    display: flex;
    flex-direction: column;
    gap: 2px; /* Очень плотная, аккуратная склейка границ */
    margin-top: 12px;
}

/* Элемент списка (строка) */
.front-sidebar-popular-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9; /* Мягкая разделительная линия */
    text-decoration: none !important;
    transition: all 0.15s ease-in-out;
}

/* Убираем нижнюю границу у последнего элемента в блоке */
.front-sidebar-popular-item:last-child {
    border-bottom: none;
}

/* Левая текстовая часть */
.front-popular-item-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* Фикс для корректной работы text-overflow внутри флексов */
    flex-grow: 1;
}

/* Заголовок популярного теста */
.front-popular-item-title {
    font-size: 13px;
  /*  font-weight: 600;*/
    color: #334155;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Ограничиваем заголовок строго двумя строками */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Контейнер для баджа */
.front-popular-item-meta {
    display: flex;
    align-items: center;
}

/* Компактный пастельный бейдж предмета */
.front-popular-item-badge {
    font-size: 10px;
   /* font-weight: 700;*/
    background: #f1f5f9;
    color: #475569;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Правая часть: Просмотры */
.front-popular-item-stats {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
  /*  font-weight: 600;*/
    color: #94a3b8;
    background: #f8fafc;
    padding: 4px 8px;
    border-radius: 6px;
    margin-left: 12px;
    flex-shrink: 0; /* Не дает счетчику сжиматься при длинных названиях */
    transition: all 0.15s ease;
}

/* ХОВЕР НА ВСЮ СТРОКУ */
.front-sidebar-popular-item:hover {
    background: #f8fafc;
}

.front-sidebar-popular-item:hover .front-popular-item-title {
    color: #2d6fa8; /* Заголовок загорается нашим фирменным синим */
}

.front-sidebar-popular-item:hover .front-popular-item-stats {
    background: #edf2f7;
    color: #475569; /* Счётчик становится контрастнее при наведении */
}


/* =====================================================
   Страница результатов тестирования (Modern Dashboard)
   ===================================================== */

/* Базовый блок-контейнер для алерта результатов */
.modern-result-alert {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid transparent;
    margin-bottom: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
}

/* Стилизация иконки слева */
.modern-result-alert-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Внутреннее тело контента */
.modern-result-alert-body {
    flex-grow: 1;
}

/* Контейнер текста с оценкой */
.modern-result-grade-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

/* Большая цифра оценки */
.modern-result-grade-title .grade-number {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
}
.modern-result-grade-title .grade-max {
    font-size: 14px;
    color: #94a3b8;
    margin-right: 8px;
}

/* Текстовый бейдж процентов */
.modern-result-percentage {
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.6);
    padding: 2px 8px;
    border-radius: 4px;
    color: #475569;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Кастомный блок текстового напутствия / сообщения */
.modern-result-text-message {
    font-size: 14px;
    line-height: 1.5;
    color: #334155;
    font-weight: 500;
}

/* ДИНАМИЧЕСКИЕ ЦВЕТОВЫЕ СХЕМЫ ДЛЯ ОЦЕНОК (на базе $alertClass) */

/* Оценка 5: Success */
.modern-result-alert.is-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.modern-result-alert.is-success .modern-result-alert-icon i {
    color: #16a34a;
}

/* Оценка 3 и 4: Info */
.modern-result-alert.is-info {
    background: #f0f9ff;
    border-color: #bae6fd;
}
.modern-result-alert.is-info .modern-result-alert-icon i {
    color: #0284c7;
}

/* Оценка 2: Warning */
.modern-result-alert.is-warning {
    background: #fffbfa;
    border-color: #fed7aa;
}
.modern-result-alert.is-warning .modern-result-alert-icon i {
    color: #ea580c;
}

/* Оценка 0 и 1 / Или блок системных ошибок: Danger */
.modern-result-alert.is-danger,
.modern-result-alert.is-error {
    background: #fef2f2;
    border-color: #fecaca;
}
.modern-result-alert.is-danger .modern-result-alert-icon i,
.modern-result-alert.is-error .modern-result-alert-icon i {
    color: #dc2626;
}
.modern-error-text {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: #991b1b;
}
.modern-error-text:last-child { margin-bottom: 0; }


/* БЛОК СРЕДНЕЙ СТАТИСТИКИ ПО САЙТУ */
.modern-result-global-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 24px;
}

.global-stats-icon {
    font-size: 16px;
    color: #64748b;
    width: 20px;
    text-align: center;
}

.global-stats-text {
    font-size: 13px;
    color: #475569;
    line-height: 1.4;
}


/* ЗОНА УПРАВЛЕНИЯ КНОПКАМИ */
.modern-result-actions-zone {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

/* Базовый новый класс кнопок результатов */
.modern-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

/* Кнопка "Пройти ещё раз" (Основная, синяя) */
.modern-action-btn.btn-retry {
    background: #2d6fa8;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(45, 111, 168, 0.15);
}
.modern-action-btn.btn-retry:hover {
    background: #225480;
    box-shadow: 0 4px 8px rgba(45, 111, 168, 0.25);
    transform: translateY(-1px);
}

/* Кнопка "Другие тесты" (Вторичная, контурная) */
.modern-action-btn.btn-back {
    background: #ffffff;
    color: #475569 !important;
    border: 1px solid #cbd5e1;
}
.modern-action-btn.btn-back:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a !important;
}

/* Адаптивность для мобильных телефонов */
@media (max-width: 575px) {
    .modern-result-alert {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }
    .modern-result-alert-icon {
        margin-top: 0;
    }
    .modern-action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================
   Карточка теста в общем списке (Modern Snippet)
   ===================================================== */

.modern-test-snippet {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
    transition: all 0.15s ease-in-out;
}

/* Эффект ховера на всю карточку */
.modern-test-snippet:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.modern-test-snippet-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Шапка сниппета (Бейджи и категории) */
.modern-test-snippet-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Компактный синий бейдж "Тест" */
.modern-test-type-badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    background-color: #f3e5f5;
    color: #6a1b9a;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* Ссылки на предмет и класс */
.modern-test-subject-link,
.modern-test-grade-link {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease;
}

.modern-test-subject-link i { color: #0284c7; }
.modern-test-grade-link i { color: #16a34a; }

.modern-test-subject-link:hover,
.modern-test-grade-link:hover {
    color: #1e293b;
}

/* Заголовок карточки */
.modern-test-snippet-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

.modern-test-snippet-title a {
    color: #1e293b;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

/* Подсветка заголовка при ховере на карточку */
.modern-test-snippet:hover .modern-test-snippet-title a {
    color: #2d6fa8;
}

/* Подвал сниппета (Разносим инфо и звезды в разные концы) */
.modern-test-snippet-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 8px;
    border-top: 1px dashed #f1f5f9;
}

.modern-test-info-meta {
    font-size: 12px;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
}

.modern-test-questions-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #475569;
}
.modern-test-questions-count i {
    color: #94a3b8;
}

/* Стилизация контейнера со звездами из renderPartial */
.modern-test-rating-side {
    display: inline-flex;
    align-items: center;
}

/* Адаптивность для мобильных */
@media (max-width: 575px) {
    .modern-test-snippet {
        padding: 14px;
    }
    .modern-test-snippet-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .modern-test-rating-side {
        width: 100%;
        justify-content: flex-start;
    }
}