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

#intro {
    position: relative;
    /* остальные стили (высота, padding и т.д.) */
}

#intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
            linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)),
            url('/css/img/1784140796.png') center/cover no-repeat;
    filter: blur(2px); /* ← степень размытия */
    z-index: -1;
}

#intro .page {
    width: 75rem;
}

#intro .logos {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

/* Логотип */
#intro .intro-logo {
    width: 73.2rem;
    margin-bottom: 1rem;
}

@keyframes floatLogo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Подзаголовок */
#intro .intro-subtitle p {
    text-align: center;
    font-size: 2.6rem;
    font-family: 'Georgia', serif;
    font-weight: 600;
    line-height: 1.4;
    opacity: 0.9;
    color: antiquewhite;
    margin: 0;
}

/* Кнопка */
#intro .intro-button {
    /* Пустой контейнер — нужен только для flex-распределения */
}

#intro .start-btn {
    background: linear-gradient(to bottom, #8B4513, #5D4037);
    color: #e0c097;
    border: 2px solid #a0522d;
    padding: 2.5rem 7.2rem;
    font-size: 2.9rem;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.08em;
    box-shadow: 0 5px 22px rgba(160, 82, 45, 0.7);
    text-transform: uppercase;
}

#intro .start-btn:hover {
    background: linear-gradient(to bottom, #a0522d, #6D4C41);
    transform: scale(1.05) translateY(-4px);
    box-shadow: 0 8px 30px rgba(160, 82, 45, 0.95);
}

#intro .butt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 40vh;
    padding-bottom: 8vh;
}

/* ==================== СТРАНИЦА (ОБ ИГРЕ) ==================== */

#about {
    position: relative;
    /* остальные стили (высота, padding и т.д.) */
}

#about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
            linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)),
            url('/css/img/1784140796.png') center/cover no-repeat;
    filter: blur(2px); /* ← степень размытия */
    z-index: -1;
}

#about .page {
    width: 70rem;
}

/* Картинка слева с обтеканием */
.about-image {
    float: left;           /* ← Ключевое свойство */
    width: 35rem;
    height: auto;
    margin: 0 2rem 1.5rem 0; /* отступы: справа и снизу */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    shape-outside: inset(0); /* для плавного обтекания (опционально) */
}

/* Текст */
#about p {
    font-size: 1.8rem;
    line-height: 1.7;
    color: #FFE4C4;
    margin: 0;
    text-align: justify;        /* ← Выравнивание по ширине */
    text-justify: inter-word;   /* ← Лучше работает в старых браузерах */
    hyphens: auto;              /* ← Перенос слов с дефисами (опционально) */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

#about b {
    color: #FAEBD7;
}

/* Очистка float после контента */
#about::after {
    content: "";
    display: table;
    clear: both;
}

/* Кнопка */
#about .intro-button {
    /* Пустой контейнер — нужен только для flex-распределения */
}

#about .start-btn {
    background: linear-gradient(to bottom, #8B4513, #5D4037);
    color: #e0c097;
    border: 2px solid #a0522d;
    padding: 1.5rem 2.2rem;
    font-size: 1.9rem;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.08em;
    box-shadow: 0 5px 22px rgba(160, 82, 45, 0.7);
    text-transform: uppercase;
}

#about .start-btn:hover {
    background: linear-gradient(to bottom, #a0522d, #6D4C41);
    transform: scale(1.05) translateY(-4px);
    box-shadow: 0 8px 30px rgba(160, 82, 45, 0.95);
}

#about .butt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;    /* ← Выравнивание по правому краю */
    -ms-flex-align: end;
    align-items: flex-end;     /* ← Ключевое свойство */
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    height: 8rem;
}

/* ========== СТРАНИЦА (ИСТОРИЯ ИГРЫ) ========== */

#history {
    position: relative;
    /* остальные стили (высота, padding и т.д.) */
}

#history::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
            linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)),
            url('/css/img/1784140796.png') center/cover no-repeat;
    filter: blur(2px); /* ← степень размытия */
    z-index: -1;
}

#history .page {
    width: 85rem;
}

/* Слайдер */
.history-slider {
    position: relative;
    width: 100%;
    max-width: 900px;
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* Навигационные кнопки */
.slider-nav {
    background:
            linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)),
            url('/css/img/right.png') center/cover no-repeat;
    border: 1px solid #444;
    color: #e1c543;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    font-size: 2.5rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.slider-nav:hover {
    background:
            linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)),
            url('/css/img/rightHover.png') center/cover no-repeat;
    transform: scale(1.1);
}

.slider-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.slider-nav.slider-prev {
    background:
            linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)),
            url('/css/img/left.png') center/cover no-repeat;
}

.slider-nav.slider-prev:hover {
    background:
            linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)),
            url('/css/img/leftHover.png') center/cover no-repeat;
}

/* Контент главы */
.history-content {
    flex: 1;
    text-align: center;
    color: white;
}

.history-content {
    transition: opacity 0.3s;
    height: 45rem;
}

.history-title {
    font-family: 'Cinzel', serif;
    font-size: 2.8rem;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    color: #e1c543;
}

/* Индикатор прогресса */
.history-progress {
    margin-top: 2rem;
    font-size: 1.5rem;
    color: #FAEBD7;
    font-family: 'Cinzel', serif;
}

/* Контейнер главы */
.history-chapter {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* Изображение */
.history-image {
    float: left;
    width: 35rem;
    height: auto;
    margin: 0 2rem 0 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    shape-outside: inset(0);
}

.history-image.left {
    float: left;
    margin: 0 2rem 0 0;
}

.history-image.right {
    float: right;
    margin: 0 0 0 2rem;
}

/* Текст */
.history-text {
    font-size: 1.8rem;
    line-height: 1.7;
    color: #FFE4C4;
    margin: 0;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* ==================== СТРАНИЦА (КЛАССЫ) ==================== */

#classes {
    position: relative;
    /* остальные стили (высота, padding и т.д.) */
}

#classes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
            linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)),
            url('/css/img/1781149974.png') center/cover no-repeat;
    filter: blur(5px); /* ← степень размытия */
    z-index: -1;
}

#classes .page {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    padding: 2rem;
    max-width: 140rem;
    margin: 0 auto;
    padding-left: 0;
    align-items: flex-start;
}

.profession-full {
    flex: 0 0 50rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-right: 2rem;

    margin-left: 0;
    padding-left: 2rem;
    height: 80vh;
}

.full-image {
    max-width: 100%;
    max-height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.7));
}

.class-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}


#classes {
    border: 2px solid red;
}

.profession-full {
    border: 2px solid blue;
}

.class-details {
    border: 2px solid green;
}

/* Выбор фракции */
.faction-selector {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0.8rem 1.5rem;
    background: rgba(30, 30, 30, 0.5);
    border-radius: 8px;
    justify-content: center;
}

.faction-label {
    color: #e1c543;
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
}

.faction-btn {
    background: rgba(50, 50, 50, 0.7);
    border: 1px solid #444;
    color: #ccc;
    padding: 0.6rem 1.2rem;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.faction-btn:hover,
.faction-btn.active {
    background: rgba(225, 197, 67, 0.25);
    color: #e1c543;
    border-color: #e1c543;
}

/* Выбор пола */
.gender-selector {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 0.8rem 1.5rem;
    background: rgba(30, 30, 30, 0.5);
    border-radius: 8px;
    justify-content: center;
}

.gender-label {
    color: #e1c543;
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
}

.gender-btn {
    background: rgba(50, 50, 50, 0.7);
    border: 1px solid #444;
    color: #ccc;
    padding: 0.6rem 1.2rem;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.gender-btn:hover,
.gender-btn.active {
    background: rgba(225, 197, 67, 0.25);
    color: #e1c543;
    border-color: #e1c543;
}

/* Ряды выбора */
.main-classes,
.advanced-classes {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}

.main-classes {
    grid-template-columns: repeat(6, 1fr);
}

.advanced-classes.has-one {
    grid-template-columns: 1fr;
}

.advanced-classes.has-two {
    grid-template-columns: repeat(2, 1fr);
}

/* Иконки профессий */
.class-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    background: rgba(30, 30, 30, 0.4);
    transition: all 0.2s;
}

.class-option:hover,
.class-option.active {
    background: rgba(225, 197, 67, 0.25);
    transform: translateY(-3px);
}

.class-option img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 6px;
}

.class-name {
    color: #ccc;
    font-size: 0.95rem;
    text-align: center;
}

.class-option.active .class-name {
    color: #e1c543;
}

/* Описание */
.infoclass {
    text-align: left;
}

.title {
    font-family: 'Cinzel', serif;
    font-size: 2.8rem;
    color: #e1c543;
    margin-bottom: 1.2rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.description {
    color: #ccc;
    font-size: 1.7rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

/* Кнопка */
#classes .intro-button {
    /* Пустой контейнер — нужен только для flex-распределения */
}

#classes .start-btn {
    background: linear-gradient(to bottom, #8B4513, #5D4037);
    color: #e0c097;
    border: 2px solid #a0522d;
    padding: 1.5rem 2.2rem;
    font-size: 1.9rem;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.08em;
    box-shadow: 0 5px 22px rgba(160, 82, 45, 0.7);
    text-transform: uppercase;
}

#classes .start-btn:hover {
    background: linear-gradient(to bottom, #a0522d, #6D4C41);
    transform: scale(1.05) translateY(-4px);
    box-shadow: 0 8px 30px rgba(160, 82, 45, 0.95);
}

#classes .butt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;    /* ← Выравнивание по правому краю */
    -ms-flex-align: end;
    align-items: flex-end;     /* ← Ключевое свойство */
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    height: 8rem;
}









/* ========== СТРАНИЦА СКРИНШОТОВ ========== */
#screenshots {
    position: relative;
    /* остальные стили (высота, padding и т.д.) */
    padding: 20px;
    margin: 0 auto;
}

#screenshots::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
            linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
            url('/css/img/1784178160.png') center/cover no-repeat;
    filter: blur(5px); /* ← степень размытия */
    z-index: -1;
}

#screenshots .page {
    width: 120rem;
}

#screenshots h1 {
    color: #e1c543;
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

/* Главный контейнер — выравнивает по горизонтали */
.screenshots-toolbar {
    display: flex;
    justify-content: center;     /* центрирует группу фильтров */
    align-items: center;         /* выравнивает по вертикали */
    gap: 30px;                   /* отступ между фильтрами и кнопкой */
    margin-bottom: 15px;
    flex-wrap: wrap;             /* для мобильных */
    width: 125vh;
}

/* Фильтры — прижаты к левой части центра */
.screenshots-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.filter-btn {
    background: rgba(50, 50, 50, 0.8);
    border: 1px solid #444;
    color: #ccc;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.3rem;
}

.filter-btn:hover,
.filter-btn.active {
    background: rgba(225, 197, 67, 0.2);
    color: #e1c543;
    border-color: #e1c543;
}

.filter-btn2 {
    background: rgba(50, 50, 50, 0.8);
    border: 1px solid #444;
    color: #ccc;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.3rem;
}

.filter-btn2:hover,
.filter-btn2.active {
    background: rgba(225, 197, 67, 0.2);
    color: #e1c543;
    border-color: #e1c543;
}

/* Кнопка добавления скриншота */
.add-screenshot-btn {
    background: linear-gradient(to right, #8B4513, #5D4037);
    border-color: #a0522d;
    color: #e0c097;
    font-weight: bold;
    margin-left: auto; /* прижимает к правому краю */
    margin-right: 20px;
    margin-top: -8px; /* компенсирует отступ от фильтров */
}

.add-screenshot-btn:hover {
    background: linear-gradient(to right, #a0522d, #6D4C41);
    transform: none;
}

/* Адаптивность */
@media (max-width: 768px) {
    .screenshots-filters {
        flex-wrap: wrap;
        justify-content: center;
    }

    .add-screenshot-btn {
        order: 6; /* Перемещаем в конец на мобильных */
    }
}

/* Галерея скриншотов */
.screenshots-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
    max-width: calc(4 * 300px); /* Максимум 3 колонки */
    margin-left: auto;
    margin-right: auto;
    height: 65rem;
}

.screenshot-item {
    border-radius: 12px;
    overflow: hidden;
    background: #2a2a2a;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    width: 30vh;
    height: 21.5vh;
}

.screenshot-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.screenshot-img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
}

.screenshot-info {
    padding: 7px;
}

.screenshot-title {
    color: #e1c543;
    margin: 0 0 8px 0;
    font-size: 1.3rem;
    font-weight: bold;
}

.screenshot-desc {
    color: #aaa;
    font-size: 1.1rem;
    line-height: 1.4;
}

/* Пагинация */
.screenshots-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 0;
}

.pagination-btn {
    background: rgba(50, 50, 50, 0.8);
    border: 1px solid #444;
    color: #ccc;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.pagination-btn:hover {
    background: rgba(225, 197, 67, 0.2);
    color: #e1c543;
    border-color: #e1c543;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-info {
    color: #e1c543;
    font-size: 1.1rem;
    min-width: 80px;
    text-align: center;
}

/* Модальное окно скриншота */
.screenshot-modal {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: rgba(20, 20, 25, 0.95);
    backdrop-filter: blur(10px);
    position: relative;
    padding: 10px;
    width: auto;
}

#modal-screenshot {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    margin: 0 auto;
    border: 2px solid #e1c543;
    border-radius: 8px;
    display: block;
}

.modal-screenshot-info {
    text-align: center;
    padding: 20px;
    color: #fff;
    margin-top: auto;
    font-size: 1.4rem;
}

.modal-screenshot-info h3 {
    color: #e1c543;
    margin: 0 0 10px 0;
    font-size: 1.5rem;
}

/* Кнопки навигации ПО БОКАМ */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(225, 197, 67, 0.2);
    color: #e1c543;
    border: 1px solid #e1c543;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    backdrop-filter: blur(5px);
}

.nav-btn:hover {
    background: rgba(225, 197, 67, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

/* Адаптивность */
@media (max-width: 1200px) {
    .screenshots-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        justify-items: stretch;
    }

    .screenshot-img {
        height: 200px;
    }
}

@media (max-width: 768px) {
    .screenshots-grid {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .screenshot-img {
        height: 180px;
    }

    .nav-btn {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .prev-btn {
        left: 10px;
    }

    .next-btn {
        right: 10px;
    }
}

.upload-modal {
    max-width: 500px;
    width: 90%;
    background: rgba(30, 30, 40, 0.95);
    padding: 25px;
}

.upload-modal h3 {
    color: #e1c543;
    margin-bottom: 20px;
    text-align: center;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    color: #e1c543;
    margin-bottom: 5px;
    font-size: 0.95rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #444;
    background: #2a2a2a;
    color: #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

.form-group textarea {
    min-height: 80px;
    resize: vertical;
}

.upload-submit-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(to bottom, #8B4513, #5D4037);
    color: #e0c097;
    border: 2px solid #a0522d;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.upload-submit-btn:hover {
    background: linear-gradient(to bottom, #a0522d, #6D4C41);
}






#feedback {
    padding: 2rem 0rem 6rem 0rem;
}

#feedback .page {
    width: 120rem;
    height: 100%;
}


.feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    width: 100vh;
}

.feedback-header h1 {
    color: var(--accent-gold);
}

.feedback-layout {
    display: flex;
    gap: 2rem;
    height: calc(100vh - 14rem); /* адаптивная высота */
    width: 100vh;
}

/* Левая панель */
.feedback-sidebar {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: auto;
    background: var(--main-bg);
    border: 1px solid var(--border);
}

.ticket-search-bar {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.ticket-search-bar input {
    flex: 1;
    padding: 0.7rem;
}

.ticket-search-bar label {
    top: 0.4rem;
}

.tickets-list-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tickets-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* Правая панель — на всю ширину и высоту */
.feedback-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    background: var(--main-bg);
}

.ticket-detail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    font-size: 1.5rem;
}

.ticket-detail {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    height: 100%;
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ticket-status {
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 0.85rem;
    font-weight: bold;
}

.status-open { background: rgba(231, 76, 60, 0.15); color: var(--error); }
.status-answered { background: rgba(46, 204, 113, 0.15); color: var(--success); }
.status-closed { background: rgba(100, 100, 100, 0.15); color: var(--text-secondary); }

.ticket-meta {
    color: var(--text-secondary);
    font-size: 0.95rem;
}