/**
 * EBS Event Business Simulator - Cosmic Theme
 * Единый космический стиль для всей игры
 * Создано на основе Donix Cosmic Theme
 */

/* ========== БАЗОВЫЕ СТИЛИ ========== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #2a1b3d 100%);
    min-height: 100vh;
    color: rgba(255, 255, 255, 0.95) !important;
    position: relative;
    overflow-x: hidden;
    font-weight: 500;
}

/* Анимированный фон */
body::before {
    content: '';
    position: fixed;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 193, 7, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 152, 0, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(255, 193, 7, 0.08) 0%, transparent 50%);
    animation: rotate 20s linear infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Частицы */
.particles {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 193, 7, 0.5);
    border-radius: 50%;
    animation: float 15s infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100vh) translateX(100px); opacity: 0; }
}

/* ========== КОНТЕЙНЕРЫ ========== */
.container,
.form-container,
.studio-container {
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 0.8s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-direction: column;
    align-items: center;
}

/* ========== ИЗОБРАЖЕНИЯ ========== */
/* Центрирование всех изображений на страницах */
.profile-image,
.title-image,
.work-schedule-image,
.calendar-image,
img[src*="IMG/pages/"],
img[src*="create_studio"],
img[src*="studio_profile"],
img[src*="work_schedule"],
img[src*="register"],
img[src*="title"],
img[src*="calendar"],
video.title-image {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100%;
    height: auto;
}

/* Специфичные стили для разных типов изображений - уменьшены на 50% для десктопа */
.profile-image,
img.profile-image {
    width: 50% !important;
    max-width: 300px !important;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
    object-fit: cover;
}

.title-image,
video.title-image,
img.title-image {
    width: 50% !important;
    max-width: 910px !important;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
    object-fit: cover;
}

.work-schedule-image,
img.work-schedule-image {
    width: 50% !important;
    max-width: 400px !important;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
    object-fit: cover;
}

.calendar-image,
img.calendar-image {
    width: 50% !important;
    max-width: 400px !important;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
    object-fit: cover;
}

/* Все изображения из IMG/pages/ уменьшены на 50% */
img[src*="IMG/pages/"] {
    width: 50% !important;
    max-width: 400px !important;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
    object-fit: cover;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== ЗАГОЛОВКИ ========== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', sans-serif;
    background: linear-gradient(135deg, #ffc107, #ff9800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
}

h1 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 30px;
    width: 100%;
}

h2 {
    font-size: 1.8rem;
}

h3 {
    font-size: 1.4rem;
}

h4 {
    font-size: 1.2rem;
}

/* ========== КНОПКИ ========== */
.btn, button:not(.close-btn):not(.particle) {
    padding: 12px 25px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    color: white;
}

.btn::before, button:not(.close-btn):not(.particle)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before, button:not(.close-btn):not(.particle):hover::before {
    width: 300px;
    height: 300px;
}

.btn span, button:not(.close-btn):not(.particle) span {
    position: relative;
    z-index: 1;
}

/* Основная кнопка (золотая/оранжевая для игры) */
.btn-primary, button.btn-primary {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: white;
    box-shadow: 0 10px 30px rgba(255, 193, 7, 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 193, 7, 0.6);
}

/* Вторичная кнопка */
.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* Успешная кнопка */
.btn-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    box-shadow: 0 10px 30px rgba(17, 153, 142, 0.4);
}

.btn-success:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(17, 153, 142, 0.6);
}

/* Опасная кнопка */
.btn-danger {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
    color: white;
    box-shadow: 0 10px 30px rgba(235, 51, 73, 0.4);
}

.btn-danger:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(235, 51, 73, 0.6);
}

/* Предупреждающая кнопка */
.btn-warning {
    background: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);
    color: white;
    box-shadow: 0 10px 30px rgba(242, 153, 74, 0.4);
}

.btn-warning:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(242, 153, 74, 0.6);
}

/* ========== КАРТОЧКИ ========== */
.card, .cabinet-card, .studio-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.card:hover, .cabinet-card:hover, .studio-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 193, 7, 0.2);
}

/* ========== ФОРМЫ ========== */
.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="url"],
textarea,
select {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 1;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #ffc107 !important;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.4);
    color: rgba(255, 255, 255, 1) !important;
}

/* Стили для select и option - улучшенная читаемость */
select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffc107' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    padding-right: 40px;
}

select option {
    background: #1a1f3a !important;
    color: rgba(255, 255, 255, 0.95) !important;
    padding: 10px;
    font-weight: 500;
}

select option:hover,
select option:checked,
select option:focus {
    background: rgba(255, 193, 7, 0.2) !important;
    color: #ffc107 !important;
}

/* Улучшение читаемости для всех текстовых элементов */
p, span, div, li, td, th {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Исключение для мессенджера - более специфичные стили */
.main-container,
.main-container *,
.main-container p,
.main-container span,
.messages-container p,
.messages-container span,
.messages-container div,
.message-content p,
.message-content span,
.message-content div,
.message-text,
.message-text * {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Исключения для специфичных элементов в main-container */
.main-container .message-time,
.main-container .contact-time {
    color: rgba(255, 255, 255, 0.6) !important;
}

.main-container .contact-message {
    color: rgba(255, 255, 255, 0.7) !important;
}

.main-container input::placeholder,
.main-container textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Улучшение контраста для важных элементов */
strong, b {
    color: rgba(255, 255, 255, 1) !important;
    font-weight: 600;
}

/* ========== ТАБЛИЦЫ ========== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    overflow: hidden;
}

thead {
    background: rgba(255, 193, 7, 0.15) !important;
}

th {
    padding: 15px;
    text-align: center !important;
    font-weight: 700;
    color: #ffc107 !important;
    border-bottom: 2px solid rgba(255, 193, 7, 0.4);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Центрирование для таблицы фестивалей */
.festivals-list th,
table.festivals-list th {
    text-align: center !important;
    background-color: rgba(128, 203, 196, 0.6) !important;
    color: rgba(255, 255, 255, 1) !important;
    font-weight: 700;
}

.festivals-list td,
table.festivals-list td {
    text-align: center !important;
}

td {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 500;
    text-align: center;
}

/* Цвета фона для таблицы - совпадают с календарем */
.festivals-list .stars-1,
table.festivals-list .stars-1 {
    background-color: rgba(17, 153, 142, 0.2) !important;
}

.festivals-list .stars-2,
table.festivals-list .stars-2 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.festivals-list .stars-3,
table.festivals-list .stars-3 {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

.festivals-list .stars-4,
table.festivals-list .stars-4 {
    background-color: rgba(255, 193, 7, 0.25) !important;
}

.festivals-list .stars-5,
table.festivals-list .stars-5 {
    background-color: rgba(255, 193, 7, 0.35) !important;
}

/* Читаемость текста - белый для всех звезд */
.festivals-list .stars-1 td,
.festivals-list .stars-2 td,
.festivals-list .stars-3 td,
.festivals-list .stars-4 td,
.festivals-list .stars-5 td,
table.festivals-list .stars-1 td,
table.festivals-list .stars-2 td,
table.festivals-list .stars-3 td,
table.festivals-list .stars-4 td,
table.festivals-list .stars-5 td {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600;
}

/* Все элементы внутри ячеек */
.festivals-list .stars-1 td *,
.festivals-list .stars-2 td *,
.festivals-list .stars-3 td *,
.festivals-list .stars-4 td *,
.festivals-list .stars-5 td *,
.festivals-list .stars-1 td span,
.festivals-list .stars-2 td span,
.festivals-list .stars-3 td span,
.festivals-list .stars-4 td span,
.festivals-list .stars-5 td span,
table.festivals-list .stars-1 td *,
table.festivals-list .stars-2 td *,
table.festivals-list .stars-3 td *,
table.festivals-list .stars-4 td *,
table.festivals-list .stars-5 td *,
table.festivals-list .stars-1 td span,
table.festivals-list .stars-2 td span,
table.festivals-list .stars-3 td span,
table.festivals-list .stars-4 td span,
table.festivals-list .stars-5 td span {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Все элементы внутри ячеек на темном фоне */
.festivals-list .stars-3 td *,
.festivals-list .stars-4 td *,
.festivals-list .stars-5 td *,
.festivals-list .stars-3 td span,
.festivals-list .stars-4 td span,
.festivals-list .stars-5 td span,
table.festivals-list .stars-3 td *,
table.festivals-list .stars-4 td *,
table.festivals-list .stars-5 td *,
table.festivals-list .stars-3 td span,
table.festivals-list .stars-4 td span,
table.festivals-list .stars-5 td span {
    color: rgba(255, 255, 255, 1) !important;
}

/* Улучшенная читаемость для названий фестивалей - белый для всех звезд */
.festivals-list .stars-1 .festival-name,
.festivals-list .stars-2 .festival-name,
.festivals-list .stars-3 .festival-name,
.festivals-list .stars-4 .festival-name,
.festivals-list .stars-5 .festival-name,
table.festivals-list .stars-1 .festival-name,
table.festivals-list .stars-2 .festival-name,
table.festivals-list .stars-3 .festival-name,
table.festivals-list .stars-4 .festival-name,
table.festivals-list .stars-5 .festival-name {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 700;
}

tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

tr:hover td {
    color: rgba(255, 255, 255, 1) !important;
}

tr:last-child td {
    border-bottom: none;
}

/* ========== МЕССЕНДЖЕР ========== */
/* Улучшенная читаемость текста в мессенджере */
.messages-section,
.contacts-section {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Текст сообщений - высокая специфичность */
.message-text,
.message-content,
.message-content *,
.message-content p,
.message-content span,
.message-content div {
    color: rgba(255, 255, 255, 0.95) !important;
}

.message-incoming .message-content,
.message-incoming .message-content *,
.message-incoming .message-content p,
.message-incoming .message-content span,
.message-incoming .message-content div,
.message-incoming .message-text {
    color: rgba(255, 255, 255, 0.95) !important;
}

.message-outgoing .message-content,
.message-outgoing .message-content *,
.message-outgoing .message-content p,
.message-outgoing .message-content span,
.message-outgoing .message-content div,
.message-outgoing .message-text {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Имена контактов */
.contact-name,
.contact-name *,
.contact-name span,
.contact-name div {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600;
}

/* Сообщения в списке контактов */
.contact-message,
.contact-message *,
.contact-message span,
.contact-message div {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Время сообщений */
.message-time,
.message-timestamp {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Время контактов */
.contact-time {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Заголовки в мессенджере */
.messages-header,
.messages-header *,
.messages-header h2,
.messages-header span,
.messages-header div,
.contacts-header,
.contacts-header *,
.contacts-header h2,
.contacts-header span,
.contacts-header div {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Информация о контакте в заголовке */
.messages-header .contact-info,
.messages-header .contact-info *,
.messages-header .contact-info span,
.messages-header .contact-info div {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Вкладки контактов */
.contacts-tab {
    color: rgba(255, 255, 255, 0.7) !important;
}

.contacts-tab.active {
    color: #ffc107 !important;
}

/* Поле ввода сообщения */
.message-form-container input,
.message-form-container textarea {
    color: rgba(255, 255, 255, 0.95) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.message-form-container input::placeholder,
.message-form-container textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Звездный рейтинг */
.star-rating,
.contact-badge {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Все текстовые элементы в мессенджере */
.messages-container,
.messages-container *,
.messages-container p,
.messages-container span,
.messages-container div {
    color: rgba(255, 255, 255, 0.95) !important;
}

.contacts-list,
.contacts-list *,
.contacts-list p,
.contacts-list span,
.contacts-list div {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ========== АЛЕРТЫ И УВЕДОМЛЕНИЯ ========== */
.alert, .message {
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid;
    backdrop-filter: blur(10px);
    font-weight: 500;
    font-size: 1rem;
}

.alert-success, .message.success {
    background: rgba(17, 153, 142, 0.2) !important;
    border-color: rgba(17, 153, 142, 0.4) !important;
    color: #38ef7d !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.alert-error, .alert-danger, .message.error {
    background: rgba(235, 51, 73, 0.2) !important;
    border-color: rgba(235, 51, 73, 0.4) !important;
    color: #ff6b6b !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.alert-warning, .message.warning {
    background: rgba(255, 193, 7, 0.2) !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
    color: #ffc107 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.alert-info, .message.info {
    background: rgba(0, 188, 212, 0.2) !important;
    border-color: rgba(0, 188, 212, 0.4) !important;
    color: #00bcd4 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ========== МОДАЛЬНЫЕ ОКНА ========== */
.modal,
#infoModal,
#callModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
    justify-content: center;
    align-items: center;
}

.modal.show,
#infoModal[style*="flex"],
#callModal[style*="flex"] {
    display: flex !important;
}

.modal-content,
#infoModalContent,
#callModalContent {
    background: rgba(26, 31, 58, 0.98) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 20px;
    padding: 25px;
    max-width: 500px !important;
    width: 90%;
    max-height: 85vh !important;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    animation: slideUp 0.3s ease;
    position: relative;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Улучшенная читаемость для содержимого модального окна */
#infoModalContent h2,
#infoModalContent h3,
.modal-content h2,
.modal-content h3 {
    color: #ffc107 !important;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#infoModalContent label,
.info-label {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600;
    font-size: 1rem;
    margin: 10px 0 5px 0;
    display: block;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#infoModalContent textarea,
.info-textarea {
    width: 100% !important;
    height: 80px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    padding: 10px;
    margin-bottom: 15px;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    resize: vertical;
    transition: all 0.3s ease;
}

#infoModalContent textarea:focus,
.info-textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #ffc107 !important;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.3);
    color: rgba(255, 255, 255, 1) !important;
}

#infoModalContent textarea::placeholder,
.info-textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 1;
}

#infoModalContent .info-output,
.info-output {
    font-size: 1rem !important;
    color: rgba(255, 255, 255, 0.95) !important;
    background-color: rgba(255, 193, 7, 0.15) !important;
    border: 1px solid rgba(255, 193, 7, 0.3);
    padding: 10px 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#infoModalContent img,
#organizerImage {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 15px;
    border: 2px solid rgba(255, 193, 7, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Кнопки в модальном окне */
#infoModalContent .info-save-btn,
.info-save-btn {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important;
    color: white !important;
    border: none;
    padding: 12px 25px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    margin-right: 10px;
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
}

#infoModalContent .info-save-btn:hover,
.info-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.6);
}

#infoModalContent .info-close-btn,
.info-close-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    padding: 12px 25px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 600;
}

#infoModalContent .info-close-btn:hover,
.info-close-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px);
}

#infoModalContent .info-close,
.info-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9) !important;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

#infoModalContent .info-close:hover,
.info-close:hover {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107 !important;
    transform: scale(1.1);
}

/* Контейнер для кнопок - чтобы они всегда были видны */
#infoModalContent {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

#infoModalContent .modal-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 20px;
    flex-wrap: wrap;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h2 {
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    color: #ffc107;
}

/* ========== ВИРТУАЛЬНОЕ ВРЕМЯ ========== */
#virtual-time, #virtualDateTime, .virtual-date {
    font-size: 1rem;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    text-align: center;
    background: rgba(255, 193, 7, 0.1);
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.2);
}

#virtualDateTime {
    display: block;
    margin: 5px 0;
}

#virtualDateTime .date {
    display: block;
    font-family: 'Audiowide', sans-serif;
    font-size: 0.75em;
    color: #ffc107;
    text-shadow: 1px 1px 2.5px rgba(0, 0, 0, 0.5);
    margin-bottom: 2px;
}

#virtualDateTime .time {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9em;
    color: #ff9800;
    text-shadow: 0.5px 0.5px 1.5px rgba(0, 0, 0, 0.3);
    margin-bottom: 2px;
}

.virtual-time-window .stars-label {
    display: inline-block;
    margin-right: 3px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.9) !important;
}

.virtual-time-window .star-rating {
    display: inline-block;
    font-size: 0.7rem;
    color: #ffc107 !important;
}

.virtual-time-window strong {
    font-size: 0.8rem;
}

/* ========== ЕДИНЫЙ БЛОК ВИРТУАЛЬНОГО ВРЕМЕНИ ========== */
/* Контейнер для размещения изображения и блока виртуального времени рядом на десктопе */
.image-time-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    margin: 30px 0;
    flex-wrap: wrap;
}

/* Изображения внутри контейнера не должны иметь нижний отступ */
.image-time-container .profile-image,
.image-time-container .calendar-image,
.image-time-container .work-schedule-image {
    margin-bottom: 0 !important;
}

/* Унифицированные стили для virtual-time-window на всех страницах */
.virtual-time-window {
    background: rgba(255, 193, 7, 0.1) !important;
    border: 1px solid rgba(255, 193, 7, 0.2) !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 260px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    flex-shrink: 0;
}

.day-of-week {
    font-size: 1.4rem !important;
    font-weight: bold !important;
    text-align: center !important;
    margin: 0 !important;
    color: white !important;
}

#virtualDateTime {
    font-family: 'Orbitron', sans-serif !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important;
    font-size: 1.1em !important;
    color: #ffc107 !important;
    margin: 4px 0 !important;
}

#virtualDateTime .date {
    display: block !important;
    font-family: 'Audiowide', sans-serif !important;
    font-size: 1.15em !important;
    color: #b2dfdb !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 2px !important;
}

#virtualDateTime .time {
    display: block !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.4em !important;
    color: #fff !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.star-section {
    background: rgba(0, 0, 0, 0.15) !important;
    padding: 2px 10px !important;
    border-radius: 20px !important;
    margin-top: 3px !important;
}

.star-rating {
    font-size: 1.1rem !important;
    color: #ffca28 !important;
    font-weight: bold !important;
}

/* Мобильная версия */
@media (max-width: 767px) {
    .image-time-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .virtual-time-window {
        max-width: 130px !important;
        padding: 4px 6px !important;
        margin-bottom: 6px !important;
        font-size: 0.75rem !important;
    }
    
    #virtualDateTime {
        font-size: 0.85em !important;
        margin: 2px 0 !important;
    }
    
    .star-rating {
        font-size: 0.85rem !important;
        margin-top: 2px !important;
    }
    
    .day-of-week {
        font-size: 1.1rem !important;
    }
    
    .star-section {
        padding: 2px 5px !important;
        margin-top: 2px !important;
        border-radius: 10px !important;
    }
    
    #virtualDateTime .date {
        font-size: 0.95em !important;
        margin-bottom: 2px !important;
    }
    
    #virtualDateTime .time {
        font-size: 0.95em !important;
    }
}

/* ========== КАЛЕНДАРЬ ========== */
.calendar {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px;
    margin: 20px 0;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.calendar-days,
.calendar-dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.calendar-days div {
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    padding: 10px;
    font-size: 0.9rem;
}

.calendar-dates .day {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.calendar-dates .day:hover {
    background: rgba(255, 193, 7, 0.2);
    border-color: #ffc107;
    transform: scale(1.05);
}

.calendar-dates .day.current-date {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #0a0e27;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(255, 193, 7, 0.4);
}

.calendar-dates .day.empty {
    visibility: hidden;
    pointer-events: none;
}

/* ========== НАВИГАЦИЯ ========== */
.nav, .navigation {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.nav a, .navigation a {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}

.nav a:hover, .navigation a:hover {
    background: rgba(255, 193, 7, 0.2);
    border-color: #ffc107;
    color: #ffc107;
    transform: translateY(-2px);
}

.nav a.active, .navigation a.active {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #0a0e27;
    border-color: #ffc107;
}

/* ========== СКРОЛЛБАР ========== */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 193, 7, 0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 193, 7, 0.5);
}

/* ========== АДАПТИВНОСТЬ ========== */
@media (max-width: 768px) {
    .container,
    .form-container,
    .studio-container {
        width: 95%;
        padding: 20px;
    }

    h1 {
        font-size: 1.8rem;
    }
    
    /* На мобильных изображения возвращаются к нормальному размеру */
    .profile-image,
    .title-image,
    .work-schedule-image,
    .calendar-image,
    img[src*="IMG/pages/"],
    img.profile-image,
    img.title-image,
    img.work-schedule-image,
    img.calendar-image,
    video.title-image {
        width: 100% !important;
        max-width: 100% !important;
    }

    h2 {
        font-size: 1.4rem;
    }

    .btn, button {
        width: 100%;
        padding: 14px 20px;
    }

    table {
        font-size: 0.9rem;
    }

    th, td {
        padding: 10px;
    }
}

/* ========== СПЕЦИАЛЬНЫЕ ЭЛЕМЕНТЫ ДЛЯ ИГРЫ ========== */
.stars-display {
    color: #ffc107;
    font-size: 1.2rem;
    font-weight: bold;
}

.money-display {
    color: #38ef7d;
    font-size: 1.2rem;
    font-weight: bold;
}

.stats-card {
    background: rgba(255, 193, 7, 0.05);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 15px;
    padding: 20px;
    margin: 10px 0;
    text-align: center;
}

.stats-card .label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.stats-card .value {
    color: #ffc107;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
}