html
{
	min-width:1012px;
}
body
{
	margin:0px;
	font-family:verdana, arial, tahoma, helvetica, sans-serif;
}

#top_menue
{
	position: absolute;
	clear:both;
	top:0px;
	text-align:center;
	width: 100%;
}

#bottom
{
	clear: both;
	margin-top:40px;
	height:60px;
	text-align:center;
}


#center_frame
{
	position: relative;
	margin:40px 220px;
	padding-top:40px;
	min-height:300px;
	height:auto !important;
	height:300px;
	text-align:center;
	text-color:#000000;
	text-decoration:none;
	font-size:10pt;
	min-width:352px;
	
}
.category-cell {
    border: none;
    padding: 5px;
    vertical-align: center;
    width: 30%;
    text-align: left;
    padding-left: 10px;
    padding-right: 20px;
}

a.top
{
	color:#6C5635;
	font-size:10pt;
	text-decoration:none;
	font-weight:bold;
}
a.top:hover
{
	color:#6C5635;
	font-size:10pt;
	text-decoration:underline;
	font-weight:bold;
}

.copyright
{
	color:#6C5635;
	font-size:8pt;
	text-decoration:none;
	font-weight:normal;
}
/* Стили для центрирования надписи */
.centered-text 
{
    display: flex;          /* Включает Flexbox */
    justify-content: center; /* Центрирует содержимое горизонтально */
    align-items: center;     /* Центрирует содержимое вертикально */
    height: 40px;           /* Задает высоту контейнера равной высоте видимой области экрана */
    color:#6C5635;
	font-size:10pt;
	text-decoration:none;
	font-weight:bold;
}
.normal-text 
{
    color:#6C5635;
	font-size:10pt;
	text-decoration:none;
	font-weight:normal;
}
.bold-text
{
    color:#6C5635;
	font-size:10pt;
	text-decoration:none;
	font-weight:bold;
}
.bold-text :hover
{
    color:#FFFFFF;
	font-size:10pt;
	text-decoration:none;
	font-weight:bold;
}	
.hover-text 
{
    color:#FFFFFF;
	font-size:10pt;
	text-decoration:none;
	font-weight:normal;
}
/* ---------------------------------------
   image-mosaic – центрированный
--------------------------------------- */
.image-mosaic 
{
    text-align: center;
	padding: 20px;
}
.image-container {
    position: relative;
    display: inline-block;
}

.image-hover {
    transition: transform 0.3s ease-in-out;
}

.image-hover:hover {
    transform: scale(1.1);
	}

.image-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: auto;
	max-width: none;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    box-sizing: border-box;
    text-align: left;
	z-index: 1000;
	backdrop-filter: blur(1px);
	
}
.hidden { display: none; }

 /* Стили для модельного окна */
.modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.8);
        }

.modal-content {
            margin: auto;
			display: flex; /* Добавляем Flexbox */
			flex-direction: column; /* Располагаем элементы вертикально */
            max-width: 80vw;
			max-height: 95vh;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
			align-items: center;
        }
.modal-content-image {
			margin-bottom: 5px; /* Отступ между изображением и информацией */
            max-height: 90vh; /* Сохраняем пропорции */
			max-width: 80vw; /* Добавлено свойство для масштабирования изображения */
			object-fit: scale-down;
}
.close {
            color: #fff;
            position: absolute;
            top: 10px;
            right: 25px;
            font-size: 35px;
            font-weight: bold;
            cursor: pointer;
        }

.modal-info {
            position: relative;    /* Оставляем для позиционирования элементов внутри */
            text-align: center;    /* Оставляем, если хотим центровку текста */
            color: #fff;           /* Оставляем, чтобы текст был белым */
            padding: 15px;         /* Заменяем margin на padding для внутренних отступов */
            display: flex;         /* Добавляем для управления строками */
            flex-direction: column; /* Чтобы строки (имя, параметры) шли друг под другом */
            gap: 8px;              /* Удобный способ сделать расстояние между строками */
		}
/* Для первой строки (Имя + Дата) */
.modal-header-row {
            display: flex;
            justify-content: center; /* Центрирует содержимое строки */
            gap: 15px;               /* Расстояние между именем и датой */
            font-weight: bold;
}

/* Для строки с параметрами */
#modal-params-row {
            font-size: 0.9em;        /* Параметры обычно делают чуть меньше основного текста */
            opacity: 0.9;            /* Делаем их чуть менее яркими, чтобы не отвлекали от имени */
}
.modal-buttons {
			position: relative;
			display: flex;
			flex-direction: row;
			}
.nav_button {
			position: relative;
			background-color: transparent;
			border: none;
			padding: 25px; /* Ставим отступы */
			}
.pictureboxhttps
	width: 100%;
}
.max 
{
  	max-width: 80%;
}

a.author
{
	color:#000000;
	text-decoration:none;
	font-size:10pt;
	font-weight:bold;
}
a.author:hover
{
	color:#000000;
	text-decoration:underline;
	font-size:10pt;
	font-weight:bold;
}
a.category
{
	color:#000000;
	text-decoration:none;
	font-size:10pt;
	font-weight:bold;
	line-height:20px;
}
a.category:hover
{
	color:#000000;
	text-decoration:underline;
	font-size:10pt;
	font-weight:bold;
	line-height:20px;
}
a.crosslink
{
	color:#6C5635;
	font-size:8pt;
	text-decoration:none;
	font-weight:normal;
}
a.crosslink:hover
{
	color:#6C5635;
	font-size:8pt;
	text-decoration:underline;
	font-weight:normal;
}
.section_name
{
	color:#6C5635;
	font-size:11pt;
	text-decoration:none;
	font-weight:normal;
	line-height:40px;
}
a.section_link
{
	color:#6C5635;
	font-size:11pt;
	text-decoration:none;
	font-weight:bold;
	line-height:40px;
}
a.section_link:hover
{
	color:#6C5635;
	font-size:11pt;
	text-decoration:underline;
	font-weight:bold;
	line-height:40px;
}
.section_name_bold
{
	color:#6C5635;
	font-size:11pt;
	text-decoration:none;
	font-weight:bold;
	line-height:40px;
}
.rate
{
	color:#6C5635;
	text-decoration:none;
	font-size:8pt;
	font-weight:normal;
	line-height:30px;
}
.date
{
	color:#000000;
	text-decoration:none;
	font-size:8pt;
	font-weight:normal;
	line-height:20px;
}
a.img_menu
{
	color:#6C5635;
	font-size:8pt;
	text-decoration:none;
	font-weight:bold;
	line-height:40px;
	padding:10px;
}
a.img_menu:hover
{
	color:#6C5635;
	font-size:8pt;
	text-decoration:underline;
	font-weight:bold;
	line-height:40px;
	padding:10px;
}

.formtext
{
	color:#6C5635;
	font-size:8pt;
	text-decoration:none;
	font-weight:bold;
}
.formheader
{
	color:#6C5635;
	font-size:10pt;
	text-decoration:none;
	font-weight:bold;
}
.formbutton
{
	color:#000000;
	font-size:10pt;
	text-decoration:none;
	font-weight:normal;
}
.formvalue
{
	color:#000000;
	font-size:10pt;
	text-decoration:none;
	font-weight:normal;
}
.error
{
	color:#F26522;
	font-size:10pt;
	text-decoration:none;
	font-weight:bold;
}
a.nav_act
{
	color:#6C5635;
	font-size:8pt;
	text-decoration:none;
	font-weight:normal;
	padding:8px;
}
a.nav_act:hover
{
	color:#6C5635;
	font-size:8pt;
	text-decoration:underline;
	font-weight:normal;
	padding:8px;
}
.nav_inact
{
	color:#D6DDBA;
	font-size:8pt;
	text-decoration:none;
	font-weight:normal;
	padding:8px;
}
/* ===========================================================
   СТИЛИ ДЛЯ ЛИЧНОГО КАБИНЕТА И ПРОФИЛЯ (ДОБАВИТЬ В КОНЕЦ)
   =========================================================== */

/* Контейнер для карточки профиля */
.profile-card {
    background-color: #ffffff; 
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Легкая тень для объема */
    max-width: 600px; /* Ограничим ширину, чтобы формы не растягивались на весь экран */
    margin: 0 auto;   /* Центрируем карточку */
}

/* Заголовки разделов в кабинете */
.profile-section-title {
    color: #6C5635;
    font-size: 14pt;
    font-weight: bold;
    margin: 20px 0 10px 0;
    text-transform: uppercase;
}

/* Сетка для отображения альбомов автора */
.profile-albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* Индивидуальная карточка альбома в профиле */
.album-card-small {
    border: 1px solid #D6DDBA;
    padding: 10px;
    transition: transform 0.3s ease;
    background: white;
	display: flex;
    flex-direction: column;
    height: 100%; /* Чтобы все карточки в ряду были одной высоты */
}

.album-card-small:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Стили для кнопок действий (Редактировать, Выйти и т.д.) */
.btn-action {
    display: inline-block;
    padding: 8px 20px;
    margin: 5px;
    color: #6C5635;
    border: 1px solid #6C5635;
    text-decoration: none;
    font-size: 10pt;
    transition: all 0.3s ease;
}

.btn-action:hover {
    background-color: #6C5635;
    color: #FFFFFF;
    text-decoration: none;
}

/* Стили для форм редактирования профиля */
.profile-edit-form {
    max-width: 400px;
    margin: 0 auto;
    text-align: left;
}

.profile-edit-form input {
    width: 100%;
    padding: 8px;
    margin: 10px 0;
    border: 1px solid #D6DDBA;
    box-sizing: border-box; /* Чтобы padding не раздувал ширину */
}
/* ОБЯЗАТЕЛЬНО ДОБАВЬ ЭТО (новые элементы для форм) */
.profile-form {
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column; /* Чтобы подпись была над полем ввода */
}

.form-group label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #6C5635; /* Твой фирменный цвет */
}

.form-group input {
    padding: 10px;
    border: 1px solid #D6DDBA; /* Твой светлый цвет границ */
    border-radius: 4px;
    font-size: 1rem;
}

/* Эффект при нажатии на поле */
.form-group input:focus {
    outline: none;
    border-color: #6C5635;
    box-shadow: 0 0 5px rgba(108, 86, 53, 0.2);
}

/* Разделители между секциями (Инфо / Пароль) */
hr {
    border: 0;
    border-top: 1px solid #D6DDBA;
    margin: 25px 0;
}
/* --- КНОПКИ (Buttons) --- */

/* Кнопка Редактировать (в списке альбомов) */
.btn-edit {
    display: inline-block;
    padding: 8px 15px;
    background: #CADB2A;
    color: #333;
    text-decoration: none;
    border: 1px solid #D6DDBA;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.85rem;
    transition: 0.3s;
}

.btn-edit:hover {
    background: #FFC20E;
    border-color: #FFC20E;
}

/* Кнопка Сохранить (в форме) */
.btn-save {
    background: #CADB2A;
    color: #333;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: 0.3s;
}

.btn-save:hover {
    background: #FFC20E;
}

/* Кнопка Отмена (ссылка) */
.btn-cancel {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
}

/* --- ФОРМЫ (Forms) --- */

.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.form-control {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

/* --- ОБЩИЕ ЭЛЕМЕНТЫ (Shared Components) --- */

/* Карточка (используется и в списке, и в форме) */
.settings-card {
    background: #f2f2f2;
    border: 1px solid #D6DDBA;
    padding: 30px;
    max-width: 500px;
    margin: 0 auto;
}

/* Контейнер для кнопок в карточке альбома */
.card-actions {
    margin-top: auto; /* МАГИЯ ЗДЕСЬ: это прижмет блок к нижнему краю */
    margin-top: auto; 
    padding-top: 15px; /* Добавим небольшой отступ от текста, чтобы не слипалось */
    display: flex;
    gap: 10px;
}

/* Инфо-блок внутри карточки */
.gallery-info {
    margin-top: 10px;
    line-height: 1.4;
}
/* Стиль для опасной кнопки (удаление) */
/* Стили для того, чтобы кнопки были одинаковой ширины (во всю форму) */
.button-group {
    display: flex;
    flex-direction: column; /* Кнопки друг под другом */
    gap: 10px;             /* Расстояние между кнопками */
    margin-top: 20px;
    }

.btn-full-width {
    width: 100%;           /* Растягиваем на всю ширину контейнера */
    padding: 10px;         /* Внутренние отступы для красоты */
    box-sizing: border-box; /* Чтобы padding не раздувал ширину больше 100% */
    cursor: pointer;
    border: none;
    border-radius: 4px;    /* Скругление углов */
    font-size: 16px;
    }

/* Цвета кнопок (можно настроить под ваш дизайн) */
.btn-save { background-color: #CADB2A; color: white; }
.btn-cancel { background-color: #6c757d; color: white; text-decoration: none; text-align: center; display: block; }
.btn-delete-danger { background-color: #dc3545; color: white; }
.btn-delete {
    background-color: #dc3545;
    color: white;
    padding: 10px 20px; /* Убедитесь, что padding совпадает с кнопкой загрузки */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.btn-delete:hover {
    background-color: #c82333; /* Темно-красный при наведении */
}
.btn-full-width {
    text-decoration: none; /* Убирает подчеркивание */
    display: flex;         /* Включает гибкую верстку */
    align-items: center;   /* Центрирует по вертикали */
    justify-content: center; /* Центрирует по горизонтали */
    text-align: center;
    width: 100%;           /* Растягивает на всю ширину */
    box-sizing: border-box; /* Чтобы padding не раздувал ширину */
}

/* Эффект при наведении */
.btn-full-width:hover { opacity: 0.9; }

        /* Стили для контейнера редактирования */
        .edit-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }

        /* Главное требование по размеру фото */
        .preview-image {
            max-height: 80vh; /* Не более 80% высоты вьюпорта */
            max-width: 100%;  /* Чтобы не вылезало за ширину на мобилках */
            width: auto;      /* Сохраняем пропорции */
            height: auto;     /* Сохраняем пропорции */
            object-fit: contain; /* Гарантируем, что фото не обрежется */
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            margin-bottom: 20px;
        }

        .edit-form {
            width: 100%;
            max-width: 400px; /* Ограничиваем ширину формы для красоты */
        }

        /* Чтобы поле ввода выглядел аккуратно */
        .photo-input {
            width: 100%;
            padding: 12px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box; /* Важно, чтобы padding не раздувал ширину */
        }