/* ============================================================
   КГУ ОШ №74 — СТИЛИ САЙТА
============================================================ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(
        135deg,
        #fffaf5 0%,
        #f5fbfa 50%,
        #f8f4ff 100%
    );
    color: #30343b;
    line-height: 1.6;
}

section {
    scroll-margin-top: 100px;
}

.section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 90px 25px;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}


/* ============================================================
   ШАПКА
============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 18px 5%;

    background: rgba(255, 251, 247, 0.94);
    backdrop-filter: blur(15px);

    border-bottom: 1px solid rgba(80, 80, 80, 0.08);

    box-shadow: 0 5px 25px rgba(80, 80, 80, 0.06);
}


/* ЛОГОТИП */

.logo {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 280px;
}

.logo-number {
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #bfe9e2,
        #c9c3f5
    );

    font-size: 22px;
    font-weight: 800;

    color: #39434a;

    box-shadow: 0 8px 20px rgba(120, 130, 170, 0.18);
}

.logo h1 {
    font-size: 17px;
    line-height: 1.25;
    margin-bottom: 3px;
}

.logo p {
    font-size: 13px;
    color: #737a83;
}


/* НАВИГАЦИЯ */

.navigation {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.navigation a {
    padding: 9px 13px;
    border-radius: 12px;
    font-size: 14px;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.navigation a:hover {
    background: #e7f4f2;
    transform: translateY(-2px);
}


/* ============================================================
   ГЛАВНАЯ СТРАНИЦА
============================================================ */

.hero {
    min-height: 650px;

    padding: 100px 7%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(320px, 0.7fr);

    align-items: center;

    gap: 70px;

    background: linear-gradient(
        135deg,
        #fff8f2,
        #eef9f7 55%,
        #f4f0ff
    );
}

.hero-content {
    max-width: 700px;
}

.small-title {
    display: inline-block;

    margin-bottom: 14px;

    color: #6c7a80;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.5px;
}

.hero h2 {
    font-size: clamp(45px, 6vw, 78px);

    line-height: 1.03;

    margin-bottom: 25px;

    color: #303840;
}

.hero-content > p:not(.small-title) {
    max-width: 650px;

    font-size: 18px;

    color: #5f6870;
}


/* КНОПКИ ГЛАВНОЙ */

.hero-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 35px;
}

.hero-buttons a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 14px 23px;

    border-radius: 15px;

    background: linear-gradient(
        135deg,
        #8fd8cf,
        #9eb9ef
    );

    color: white;

    font-weight: 700;

    box-shadow: 0 10px 25px rgba(120, 160, 190, 0.2);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.hero-buttons a:hover {
    transform: translateY(-3px);

    box-shadow: 0 14px 30px rgba(120, 160, 190, 0.3);
}


/* КАРТОЧКА */

.hero-card {
    padding: 38px;

    border-radius: 30px;

    background: linear-gradient(
        145deg,
        #d9f4ef,
        #dfe5fa
    );

    box-shadow: 0 25px 60px rgba(100, 130, 150, 0.14);

    border: 1px solid rgba(255, 255, 255, 0.7);
}

.big-icon {
    display: block;

    margin-bottom: 20px;

    font-size: 45px;
}

.hero-card h3 {
    margin-bottom: 15px;

    font-size: 27px;

    line-height: 1.2;
}

.hero-card p {
    margin-bottom: 13px;

    color: #59656a;
}


/* ============================================================
   ЗАГОЛОВКИ РАЗДЕЛОВ
============================================================ */

.section-heading {
    margin-bottom: 35px;
}

.section-heading p {
    margin-bottom: 8px;

    color: #7a8c91;

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.section-heading h2 {
    font-size: clamp(34px, 4vw, 50px);

    line-height: 1.1;

    color: #303840;
}

.section-description {
    max-width: 800px;

    margin-bottom: 35px;

    color: #677078;

    font-size: 17px;
}


/* ============================================================
   ДИРЕКТОР
============================================================ */

.director-card {
    display: grid;

    grid-template-columns:
        320px
        1fr;

    gap: 45px;

    align-items: center;

    padding: 35px;

    border-radius: 30px;

    background: #f9e5ed;

    box-shadow: 0 15px 40px rgba(150, 110, 130, 0.08);
}

.director-photo {
    min-height: 300px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 25px;

    background: linear-gradient(
        135deg,
        #f7cbdc,
        #e6d5f3
    );

    color: #697078;

    text-align: center;
}

.director-text h3 {
    margin-bottom: 20px;

    font-size: 28px;
}

.director-text p {
    margin-bottom: 14px;
}


/* ============================================================
   ИНФОРМАЦИОННЫЕ КАРТОЧКИ
============================================================ */

.info-card {
    margin-bottom: 50px;

    padding: 35px;

    border-radius: 28px;

    background: rgba(255, 255, 255, 0.7);

    box-shadow: 0 12px 35px rgba(100, 100, 100, 0.06);
}

.info-card h3 {
    margin-bottom: 15px;

    font-size: 25px;
}

.info-card p {
    margin-bottom: 10px;

    color: #626b72;
}

.gradient-card {
    background: linear-gradient(
        135deg,
        #e0f4ef,
        #e4def8
    );
}


/* ============================================================
   ЦЕННОСТИ
============================================================ */

.cards-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    margin-bottom: 50px;
}

.value-card,
.work-card {
    padding: 28px;

    border-radius: 25px;

    min-height: 210px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.value-card:hover,
.work-card:hover {
    transform: translateY(-6px);

    box-shadow: 0 15px 35px rgba(100, 100, 100, 0.1);
}

.value-card > span {
    display: block;

    margin-bottom: 15px;

    font-size: 30px;
}

.value-card h3,
.work-card h3 {
    margin-bottom: 10px;

    font-size: 20px;
}

.value-card p,
.work-card p {
    color: #5f676d;
}

.pink {
    background: #f9dce8;
}

.blue {
    background: #d8eef9;
}

.purple {
    background: #e8def8;
}

.green {
    background: #d9f0e4;
}

.peach {
    background: #f9e1d2;
}

.gradient {
    background: linear-gradient(
        135deg,
        #d6f0ea,
        #dcd8f5
    );
}


/* ============================================================
   ФОТОГРАФИИ
============================================================ */

.school-photo,
.cabinet-photo {
    min-height: 350px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 50px;

    border-radius: 30px;

    background: linear-gradient(
        135deg,
        #d9edf0,
        #eadff4
    );

    color: #68747b;

    font-size: 18px;
}


/* ============================================================
   УЧЕНИКИ
============================================================ */

.student-controls {
    display: grid;

    grid-template-columns:
        minmax(250px, 1fr)
        180px
        auto;

    gap: 12px;

    margin-bottom: 30px;
}

.student-controls input,
.student-controls select {
    width: 100%;

    padding: 14px 16px;

    border: 1px solid #e0e2e5;

    border-radius: 15px;

    outline: none;

    background: rgba(255, 255, 255, 0.9);

    color: #343a40;

    transition:
        border 0.2s ease,
        box-shadow 0.2s ease;
}

.student-controls input:focus,
.student-controls select:focus {
    border-color: #9ccfc9;

    box-shadow: 0 0 0 4px rgba(156, 207, 201, 0.15);
}


/* ============================================================
   КНОПКИ
============================================================ */

.primary-button,
.secondary-button {
    border: none;

    cursor: pointer;

    padding: 13px 20px;

    border-radius: 14px;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.primary-button {
    background: linear-gradient(
        135deg,
        #8fd8cf,
        #9daeea
    );

    color: white;

    box-shadow: 0 8px 20px rgba(120, 150, 180, 0.18);
}

.primary-button:hover,
.secondary-button:hover {
    transform: translateY(-2px);
}

.secondary-button {
    background: #eeeef2;

    color: #4f555a;
}


/* ============================================================
   КАРТОЧКИ УЧЕНИКОВ
============================================================ */

.students-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

.student-card {
    position: relative;

    padding: 25px;

    border-radius: 25px;

    background: linear-gradient(
        145deg,
        #e1f2f8,
        #eee6f7
    );

    box-shadow: 0 10px 30px rgba(100, 100, 100, 0.07);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.student-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 18px 35px rgba(100, 100, 100, 0.12);
}

.student-icon {
    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.7);

    font-size: 23px;
}

.student-card h3 {
    margin-bottom: 5px;

    font-size: 21px;
}

.student-card p {
    color: #687078;
}

.student-card button {
    width: 100%;

    margin-top: 18px;

    padding: 11px;

    border: none;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.7);

    cursor: pointer;

    font-weight: 700;
}

.empty-message {
    padding: 40px;

    text-align: center;

    border-radius: 20px;

    background: #f7eeee;

    color: #777;
}


/* ============================================================
   УЧИТЕЛЯ
============================================================ */

.teacher-controls {
    margin-bottom: 30px;
}

.teachers-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

.teacher-card {
    padding: 25px;

    border-radius: 25px;

    background: linear-gradient(
        145deg,
        #f8dfeb,
        #e6def7
    );

    box-shadow: 0 10px 30px rgba(100, 100, 100, 0.06);
}

.teacher-photo {
    width: 100%;
    height: 220px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 20px;

    background: linear-gradient(
        135deg,
        #dcefed,
        #eadff5
    );

    color: #68747b;

    overflow: hidden;
}

.teacher-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;

    border-radius: 20px;
}

.teacher-card > span {
    display: block;

    margin-bottom: 7px;

    font-size: 13px;

    color: #737b83;

    font-weight: 700;
}

.teacher-card h3 {
    margin-bottom: 10px;

    font-size: 21px;
}

.teacher-card p {
    margin-bottom: 15px;

    color: #626b72;
}

.teacher-card button {
    width: 100%;

    padding: 11px;

    border: none;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.7);

    cursor: pointer;

    font-weight: 700;
}


/* ============================================================
   ГРАФИК РАБОТЫ
============================================================ */

.schedule-card {
    margin-bottom: 50px;

    padding: 30px;

    border-radius: 25px;

    background: linear-gradient(
        135deg,
        #dff2ec,
        #e4effa
    );
}

.schedule-card h3 {
    margin-bottom: 20px;

    font-size: 25px;
}

.schedule-row {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 18px;

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.65);
}

.schedule-card > p {
    margin-top: 15px;

    color: #687078;

    font-size: 14px;
}


/* ============================================================
   ДОСТИЖЕНИЯ
============================================================ */

.achievements-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;
}

.achievement-card {
    padding: 28px;

    border-radius: 25px;

    background: #f8e7dc;

    min-height: 220px;
}

.achievement-icon {
    font-size: 35px;

    margin-bottom: 15px;
}

.achievement-card h3 {
    margin-bottom: 10px;

    font-size: 20px;
}

.achievement-card p {
    color: #646c72;
}


/* ============================================================
   ОБРАТНАЯ СВЯЗЬ
============================================================ */

.feedback-card {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

    padding: 45px;

    border-radius: 30px;

    background: linear-gradient(
        135deg,
        #f7dce7,
        #dceef5,
        #e7def5
    );
}

.feedback-card h2 {
    margin-bottom: 12px;

    font-size: 38px;
}

.feedback-card p {
    color: #606a70;
}


/* ============================================================
   FOOTER
============================================================ */

footer {
    background: #303940;

    color: #eef3f3;

    padding: 60px 7% 25px;
}

.footer-content {
    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr;

    gap: 50px;

    max-width: 1200px;

    margin: 0 auto 45px;
}

.footer-column h3 {
    margin-bottom: 18px;

    font-size: 19px;
}

.footer-column p {
    margin-bottom: 10px;

    color: #cbd3d5;
}

.footer-column a {
    display: block;

    margin-bottom: 8px;

    color: #cbd3d5;

    transition: color 0.2s ease;
}

.footer-column a:hover {
    color: white;
}

.footer-bottom {
    max-width: 1200px;

    margin: 0 auto;

    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: #aeb8bb;

    font-size: 13px;
}


/* ============================================================
   МОДАЛЬНОЕ ОКНО
============================================================ */

.modal {
    position: fixed;

    inset: 0;

    z-index: 3000;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(35, 40, 45, 0.55);

    backdrop-filter: blur(5px);
}

.modal.active {
    display: flex;
}

.modal-content {
    position: relative;

    width: min(650px, 100%);

    max-height: 90vh;

    overflow-y: auto;

    padding: 35px;

    border-radius: 28px;

    background: #fffaf6;

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}

.modal-content h2 {
    margin-bottom: 25px;

    font-size: 30px;
}

.modal-close {
    position: absolute;

    top: 15px;
    right: 18px;

    width: 38px;
    height: 38px;

    border: none;

    border-radius: 50%;

    background: #f1e8e8;

    cursor: pointer;

    font-size: 25px;

    line-height: 1;
}


/* ============================================================
   ФОРМА ДОБАВЛЕНИЯ УЧЕНИКА
============================================================ */

#studentForm {
    display: grid;

    gap: 16px;
}

#studentForm label {
    display: grid;

    gap: 7px;

    font-size: 14px;

    font-weight: 700;
}

#studentForm input,
#studentForm select,
#studentForm textarea {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid #dedede;

    border-radius: 13px;

    background: white;

    outline: none;

    resize: vertical;
}

#studentForm input:focus,
#studentForm select:focus,
#studentForm textarea:focus {
    border-color: #91cfc8;

    box-shadow: 0 0 0 4px rgba(145, 207, 200, 0.15);
}

.form-buttons {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 10px;
}


/* ============================================================
   АДАПТАЦИЯ ПОД ПЛАНШЕТ
============================================================ */

@media (max-width: 1000px) {

    .site-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .navigation {
        justify-content: flex-start;
    }

    .hero {
        grid-template-columns: 1fr;
    }

    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .students-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .teachers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ============================================================
   АДАПТАЦИЯ ПОД ТЕЛЕФОН
============================================================ */

@media (max-width: 650px) {

    .section {
        padding: 60px 18px;
    }

    .site-header {
        position: relative;
        padding: 15px;
    }

    .logo {
        min-width: 0;
    }

    .logo h1 {
        font-size: 14px;
    }

    .navigation {
        width: 100%;

        display: grid;

        grid-template-columns: repeat(2, 1fr);
    }

    .navigation a {
        text-align: center;

        background: rgba(255, 255, 255, 0.6);
    }

    .hero {
        padding: 70px 20px;

        gap: 35px;
    }

    .hero h2 {
        font-size: 43px;
    }

    .hero-card {
        padding: 25px;
    }

    .director-card {
        grid-template-columns: 1fr;

        padding: 22px;
    }

    .director-photo {
        min-height: 250px;
    }

    .cards-grid,
    .students-grid,
    .teachers-grid,
    .achievements-grid {
        grid-template-columns: 1fr;
    }

    .student-controls {
        grid-template-columns: 1fr;
    }

    .feedback-card {
        flex-direction: column;

        align-items: flex-start;

        padding: 30px;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
    }

    .schedule-row {
        flex-direction: column;

        gap: 8px;
    }

    .form-buttons {
        flex-direction: column;
    }

    .form-buttons button {
        width: 100%;
    }
}

.school-photo {
    width: 100%;
    max-width: 850px;
    margin: 30px auto;
    overflow: hidden;
    border-radius: 28px;
}

.school-photo img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}


/* ============================================================
   ФОРМА ДОБАВЛЕНИЯ СПЕЦИАЛИСТА
============================================================ */

#teacherForm {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* Каждое название + поле идут друг под другом */

#teacherForm > label {
    display: flex;
    flex-direction: column;
    gap: 7px;

    font-size: 14px;
    font-weight: 700;

    color: #39434a;
}


/* Все поля одинаковой ширины */

#teacherForm input,
#teacherForm select,
#teacherForm textarea {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid #dedede;
    border-radius: 13px;

    background: white;

    outline: none;

    font-size: 15px;
}


/* Когда нажимаем на поле */

#teacherForm input:focus,
#teacherForm select:focus,
#teacherForm textarea:focus {
    border-color: #91cfc8;

    box-shadow:
        0 0 0 4px rgba(145, 207, 200, 0.15);
}


/* Поле дополнительной информации */

#teacherForm textarea {
    resize: vertical;
    min-height: 110px;
}


/* ============================================================
   ГРАФИК РАБОТЫ СПЕЦИАЛИСТА
============================================================ */

.teacher-schedule-block {
    margin-top: 10px;

    padding: 20px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #edf8f5,
            #f0ecfa
        );
}


.teacher-schedule-block h3 {
    margin-bottom: 15px;

    font-size: 20px;
}


.teacher-schedule-row {
    display: grid;

    grid-template-columns:
        130px
        1fr
        20px
        1fr;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;
}


.teacher-schedule-row input {
    width: 100%;
}


/* ============================================================
   КНОПКИ ВНИЗУ ФОРМЫ
============================================================ */

#teacherForm .form-buttons {
    display: flex;

    justify-content: flex-end;

    gap: 12px;

    margin-top: 10px;
}


/* ============================================================
   НА ТЕЛЕФОНЕ
============================================================ */

@media (max-width: 650px) {

    .teacher-schedule-row {
        grid-template-columns: 1fr;
    }

    .teacher-schedule-row span {
        display: block;
    }

    #teacherForm .form-buttons {
        flex-direction: column;
    }

    #teacherForm .form-buttons button {
        width: 100%;
    }

}

.cabinet-photo img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    object-fit: cover;
    border-radius: 30px;
    display: block;
}

/* ============================================================
   ФОРМА ДОБАВЛЕНИЯ ДОСТИЖЕНИЯ
============================================================ */

#achievementForm {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* Каждое поле — отдельным блоком */

#achievementForm > label {
    display: flex;
    flex-direction: column;
    gap: 7px;

    font-size: 14px;
    font-weight: 700;

    color: #39434a;
}


/* Все поля одинаковые и аккуратные */

#achievementForm input,
#achievementForm textarea,
#achievementForm select {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid #dedede;
    border-radius: 13px;

    background: white;

    outline: none;

    font-size: 15px;
}


/* При нажатии на поле */

#achievementForm input:focus,
#achievementForm textarea:focus,
#achievementForm select:focus {
    border-color: #91cfc8;

    box-shadow:
        0 0 0 4px rgba(145, 207, 200, 0.15);
}


/* Большие текстовые поля */

#achievementForm textarea {
    resize: vertical;
    min-height: 100px;
}


/* Окно достижения чуть просторнее */

#achievementFormModal .modal-content {
    width: min(700px, 95%);
}


/* Кнопки внизу */

#achievementForm .form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;

    margin-top: 10px;
}


/* ============================================================
   ОКНО СО СПИСКОМ ДОСТИЖЕНИЙ
============================================================ */

.achievements-modal-content {
    width: min(850px, 95%);
}


#addAchievementButton {
    margin-bottom: 25px;
}


/* Список достижений */

.achievement-items-list {
    display: grid;
    gap: 20px;
}


/* Отдельная запись */

.achievement-item-card {
    padding: 22px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #fff7f2,
            #eef8f7,
            #f2effb
        );

    box-shadow:
        0 10px 30px rgba(100, 100, 100, 0.08);
}


.achievement-item-card h3 {
    margin-bottom: 12px;

    font-size: 22px;
}


.achievement-item-card p {
    margin-bottom: 8px;

    color: #5f6870;
}


/* Фото достижения */

.achievement-item-photo {
    width: 100%;
    max-height: 420px;

    margin-bottom: 18px;

    overflow: hidden;

    border-radius: 18px;
}


.achievement-item-photo img {
    width: 100%;
    height: 100%;

    max-height: 420px;

    object-fit: cover;

    display: block;
}


/* Кнопки внутри карточки */

.achievement-item-card button {
    margin-top: 12px;
    margin-right: 8px;

    padding: 10px 14px;

    border: none;
    border-radius: 12px;

    background: rgba(255,255,255,0.85);

    cursor: pointer;

    font-weight: 700;
}


/* ============================================================
   ТЕЛЕФОН
============================================================ */

@media (max-width: 650px) {

    #achievementForm .form-buttons {
        flex-direction: column;
    }

    #achievementForm .form-buttons button {
        width: 100%;
    }

}

/* ============================================================
   ГАЛЕРЕЯ ИНКЛЮЗИВНОГО КАБИНЕТА
============================================================ */

.cabinet-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;

    margin-bottom: 50px;
}


/* Все фотографии */
.cabinet-gallery img {
    width: 100%;
    height: 320px;

    object-fit: cover;

    border-radius: 24px;

    display: block;

    box-shadow:
        0 12px 30px rgba(80, 90, 100, 0.12);
}


/* Первая фотография чуть крупнее */
.cabinet-gallery img:first-child {
    height: 320px;
}


/* На планшете */
@media (max-width: 900px) {

    .cabinet-gallery {
        grid-template-columns: 1fr 1fr;
    }

    .cabinet-gallery img:first-child {
        grid-column: 1 / -1;
    }

}


/* На телефоне */
@media (max-width: 600px) {

    .cabinet-gallery {
        grid-template-columns: 1fr;
    }

    .cabinet-gallery img {
        height: 250px;
    }

    .cabinet-gallery img:first-child {
        grid-column: auto;
    }

}

/* ============================================================
   ПОЛНОЭКРАННЫЙ ПРОСМОТР ФОТО
============================================================ */

.image-viewer {
    position: fixed;
    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.88);

    z-index: 5000;

    padding: 30px;
}


/* Когда окно открыто */

.image-viewer.active {
    display: flex;
}


/* Большая фотография */

.image-viewer img {
    max-width: 95vw;
    max-height: 90vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 18px;

    box-shadow:
        0 20px 70px rgba(0, 0, 0, 0.45);

    user-select: none;
}


/* Крестик */

.image-viewer-close {
    position: absolute;

    top: 20px;
    right: 25px;

    width: 45px;
    height: 45px;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.9);

    font-size: 28px;

    cursor: pointer;
}


/* Показываем, что фото можно открыть */

.cabinet-gallery img {
    cursor: zoom-in;
}
/* ============================================================
   РЕЖИМ РЕДАКТОРА
============================================================ */

/* По умолчанию элементы редактирования скрыты */
.editor-only {
    display: none !important;
}

/* Когда включён режим редактора — показываем */
body.editor-mode .editor-only {
    display: inline-flex !important;
}

/* ============================================================
   ВХОД РЕДАКТОРА
============================================================ */

.editor-login-panel {
    position: fixed;

    top: 18px;
    right: 18px;

    z-index: 2000;
}


.editor-login-button,
.editor-logout-button {
    border: none;

    padding: 10px 16px;

    border-radius: 14px;

    cursor: pointer;

    font-weight: 700;

    background: rgba(255, 255, 255, 0.92);

    color: #39434a;

    box-shadow:
        0 8px 25px rgba(50, 60, 70, 0.14);
}


.editor-login-modal-content {
    width: min(420px, 95%);
}


.editor-login-description {
    margin-bottom: 20px;

    color: #687078;
}


#editorLoginForm {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


#editorLoginForm label {
    display: flex;
    flex-direction: column;
    gap: 7px;

    font-weight: 700;
}


#editorLoginForm input {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid #dedede;

    border-radius: 13px;

    outline: none;

    background: white;
}


#editorLoginForm input:focus {
    border-color: #91cfc8;

    box-shadow:
        0 0 0 4px rgba(145, 207, 200, 0.15);
}


.editor-login-error {
    color: #b54444;

    font-size: 14px;

    font-weight: 700;
}

/* ============================================================
   КЛИКАБЕЛЬНЫЕ КАРТОЧКИ ДОСТИЖЕНИЙ
============================================================ */

.achievement-category {
    cursor: pointer;
}

.achievement-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}