/* Файл: /style.css (Финальная версия со всеми улучшениями) */

/* --- Глобальные стили и переменные --- */
:root {
	/* Светлая тема (по умолчанию - ПУРПУРНАЯ) */
	--primary-color: #573b68;
	--primary-darker: #402b4f;
	--primary-color-rgb: 87, 59, 104;
	--secondary-color: #6c757d;
	--secondary-darker: #5a6268;
	--secondary-color-rgb: 108, 117, 125;
	--success-color: #28a745;
	--success-darker: #218838;
	--success-color-rgb: 40, 167, 69;
	--danger-color: #dc3545;
	--danger-darker: #c82333;
	--danger-color-rgb: 220, 53, 69;
	--warning-color: #ffc107;
	--warning-color-rgb: 255, 193, 7;
	--info-color: #5a6268; /* Цвет Info как темный серый */
	--info-darker: #495057;
	--info-color-rgb: 90, 98, 104;
	--light-bg: #f8f9fa;
	--default-bg: #ffffff;
	--dark-text: #212529;
	--secondary-text: #6c757d;
	--border-color: #dee2e6;
	--link-color-light: #573b68;
	--input-bg: #ffffff;
	--input-border: #ced4da;
	--input-disabled-bg: #e9ecef;
	--navbar-text: #495057;
	--footer-bg: #ffffff;
	--footer-text: #6c757d;
	--shadow-color-rgb: 0, 0, 0;
	--online-indicator: #28a745;
	--white-color: #ffffff;
	--button-nav-text-light: var(--white-color);
	--danger-bg-light: #f8d7da;
	--danger-text-light: #721c24;
	--success-bg-light: #d4edda;
	--success-text-light: #155724;
	--placeholder-bg: #f0f0f0;
	--border-color-light: #e9ecef;
	--card-bg: var(--default-bg);
	--romantic-pink-light: #fff0f5;
	--romantic-pink-mid: #ffdde1;
	--romantic-purple-light: #f3e8ff;
	--romantic-purple-mid: #e2afff;
	--romantic-header-text: #5c3a6b;
	--svg-texture-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Crect width='5' height='5' fill='none'/%3E%3Ccircle cx='2.5' cy='2.5' r='0.5' fill='rgba(0,0,0,0.05)'/%3E%3C/svg%3E");
	--nav-text-hover-light: var(--primary-color);
	--font-heading: 'Poppins', sans-serif;
	--font-body: 'Lato', sans-serif;
	--container-width: 1140px;
	--border-radius: 0.3rem;
	--shadow-sm: 0 .125rem .25rem rgba(var(--shadow-color-rgb), .075);
	--shadow-md: 0 .5rem 1rem rgba(var(--shadow-color-rgb), .1);
	--shadow-lg: 0 1rem 3rem rgba(var(--shadow-color-rgb), .175);
	--shadow-btn: 0 2px 4px rgba(var(--shadow-color-rgb), .1);
	--shadow-btn-hover: 0 4px 8px rgba(var(--shadow-color-rgb), .15);
    --nav-text-hover-dark: #eddffd;
    --link-color-dark: #eddffd;
    --button-nav-text-dark: #3a2d4d;
	--primary-btn-text-dark: #3a2d4d;
}

/* ================================= */
/* ========= ТЕМНАЯ ТЕМА ========= */
/* ================================= */
[data-theme="dark"] {
	--primary-color: #eddffd;
	--primary-darker: #d8b6ff;
	--primary-color-rgb: 237, 223, 253;
	--secondary-color: #868e96;
	--secondary-darker: #6c757d;
	--secondary-color-rgb: 134, 142, 150;
	--success-color: #40c057;
	--success-darker: #37b24d;
	--success-color-rgb: 64, 192, 87;
	--danger-color: #ff8787;
	--danger-darker: #ff6b6b;
	--danger-color-rgb: 255, 135, 135;
	--warning-color: #fcc419;
	--warning-color-rgb: 252, 196, 25;
	--info-color: #868e96;
	--info-darker: #6c757d;
	--info-color-rgb: 134, 142, 150;
	--light-bg: #1a1a1a;
	--default-bg: #212121;
	--dark-text: #e0e0e0;
	--secondary-text: #adb5bd;
	--border-color: #3e3e3e;
	--card-bg: #252525;
	--input-bg: #2b2b2b;
	--input-border: #4e4e4e;
	--input-disabled-bg: #333;
	--placeholder-bg: #2b2b2b;
	--navbar-text: #b0b0b0;
	--footer-bg: #1e1e1e;
	--footer-text: #adb5bd;
	--shadow-color-rgb: 150, 150, 150; /* Use a lighter shadow base for dark theme */
	--online-indicator: #40c057;
	--danger-bg-light: rgba(var(--danger-color-rgb), 0.15);
	--danger-text-light: var(--danger-color);
	--success-bg-light: rgba(var(--success-color-rgb), 0.15);
	--success-text-light: #69db7c;
	--border-color-light: #333;
	--romantic-pink-light: #4d304a;
	--romantic-pink-mid: #6f3a6a;
	--romantic-purple-light: #3a2d4d;
	--romantic-purple-mid: #563d7c;
	--romantic-header-text: #f0dfff;
	--svg-texture-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Crect width='5' height='5' fill='none'/%3E%3Ccircle cx='2.5' cy='2.5' r='0.5' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E");
	--link-color-dark: var(--primary-color);
	--nav-text-hover-dark: var(--primary-color);
    --button-nav-text-dark: var(--dark-text);
	--primary-btn-text-dark: #3a2d4d; /* Text color for primary button in dark mode */
	--shadow-sm: 0 .125rem .25rem rgba(var(--shadow-color-rgb), .15); /* Dark theme shadows */
	--shadow-md: 0 .5rem 1rem rgba(var(--shadow-color-rgb), .2);
	--shadow-lg: 0 1rem 3rem rgba(var(--shadow-color-rgb), .3);
	--shadow-btn: 0 2px 4px rgba(var(--shadow-color-rgb), .15);
	--shadow-btn-hover: 0 4px 8px rgba(var(--shadow-color-rgb), .2);

	/* Чекбоксы/радио в темной теме */
	input[type="checkbox"], input[type="radio"] { border-color: var(--secondary-text); background-color: var(--input-bg); }
	input[type="checkbox"]:checked, input[type="radio"]:checked { background-color: var(--primary-color); border-color: var(--primary-color); background-image: none; }
    input[type="checkbox"]:checked::before { border-color: var(--primary-btn-text-dark); } /* Checkmark color */
    input[type="radio"]:checked::before { background-color: var(--primary-btn-text-dark); } /* Dot color */
	input[type="checkbox"]:focus, input[type="radio"]:focus { border-color: var(--primary-color); outline: 0; box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), .25); }
	input[type="checkbox"].is-invalid, input[type="radio"].is-invalid { border-color: var(--danger-color) !important; }
	input[type="checkbox"].is-invalid:focus, input[type="radio"].is-invalid:focus { border-color: var(--danger-color) !important; box-shadow: 0 0 0 0.2rem rgba(var(--danger-color-rgb), .25); }

    /* Кнопки в темной теме */
    .btn { color: var(--button-nav-text-dark); } /* Default button text color */
    .btn:hover { color: var(--button-nav-text-dark); }
    .btn-primary { background-color: #5b3d72; border-color: #7c6890; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.12); }
    .btn-primary:hover { background-color: var(--primary-darker); border-color: var(--primary-darker);   }
    .btn-danger { background-color: var(--danger-color); border-color: var(--danger-color); color: var(--dark-text); } /* Danger button text */
    .btn-danger:hover { background-color: var(--danger-darker); border-color: var(--danger-darker); color: var(--dark-text); }
    .btn-secondary { background-color: var(--secondary-color); border-color: var(--secondary-color); color: var(--dark-text); }
    .btn-secondary:hover { background-color: var(--secondary-darker); border-color: var(--secondary-darker); color: var(--dark-text); }
    .btn-success { background-color: var(--success-color); border-color: var(--success-color); color: var(--dark-text); }
    .btn-success:hover { background-color: var(--success-darker); border-color: var(--success-darker); color: var(--dark-text); }
    .btn-info { background-color: var(--info-color); border-color: var(--info-color); color: var(--dark-text); }
    .btn-info:hover { background-color: var(--info-darker); border-color: var(--info-darker); color: var(--dark-text); }
    .btn-google { background-color: #4285F4; border-color: #4285F4; color: var(--white-color); } /* Google button retains colors */
    .btn-google:hover { background-color: #357ae8; border-color: #357ae8; color: var(--white-color); }
    .btn-outline-danger { color: var(--danger-color); border-color: var(--danger-color); }
    .btn-outline-danger:hover { color: var(--dark-text); background-color: var(--danger-color); border-color: var(--danger-color); }


    /* Ссылки и меню в темной теме */
    .nav-links a { color: var(--navbar-text); }
    .nav-links a:hover, .nav-links a.active { color: var(--nav-text-hover-dark); background-color: rgba(0,0,0,0.2); border-bottom-color: var(--nav-text-hover-dark); }
    a { color: var(--link-color-dark); }
    a:hover { color: var(--primary-darker); }
	.intro-text h2 { color: var(--primary-color); }
	.profile-grid .profile-card .profile-info h5 a:hover { color: var(--primary-color); }
	.sidebar-player-list .player-name:hover, .sidebar-player-list .player-activity a:hover { color: var(--primary-color); }
    select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
    select option { background-color: var(--input-bg); color: var(--dark-text); }
    .language-switcher select.language-select { border-color: rgba(255,255,255,0.2); background-color: rgba(0,0,0,0.2); color: var(--romantic-header-text); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f0dfff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
     .language-switcher select option { background-color: var(--input-bg); color: var(--dark-text); }
     .theme-toggle-btn { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.2); color: var(--romantic-header-text); }
    .theme-toggle-btn:hover { background-color: rgba(0,0,0,0.4); }
     .theme-toggle-btn .theme-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z'/%3E%3C/svg%3E"); transform: rotate(360deg); }
    .top-header { background-color: var(--romantic-purple-light); background-image: var(--svg-texture-light), linear-gradient(135deg, var(--romantic-pink-light) 0%, var(--romantic-purple-light) 100%); padding: 0.5rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); transition: background-color 0.3s ease, border-color 0.3s ease; }
     .logo-main { color: var(--romantic-header-text); }
     .logo-tagline { color: var(--romantic-header-text); opacity: 0.7; }
     .logo-link:hover .logo-tagline { opacity: 0.9; }
     .heart-icon { color: var(--danger-color); }
    .main-navbar { background-image: var(--svg-texture-light), linear-gradient(to right, var(--romantic-pink-mid) 0%, var(--romantic-purple-mid) 100%); box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
     .widget-header { background-color: var(--input-bg); } /* Changed from default-bg */
     .sidebar .widget .widget-header { background-image: linear-gradient(135deg, var(--romantic-purple-light) 0%, var(--romantic-pink-light) 100%); border-bottom-color: rgba(255, 255, 255, 0.1); }
     .sidebar .widget .widget-header h4 { color: var(--romantic-header-text); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); }
     .google-signin-prompt { background-color: rgba(var(--primary-color-rgb), 0.1); border-color: rgba(var(--primary-color-rgb), 0.3); }
    .profile-details-list .detail-item:nth-child(even) { background-color: #2b2b2b; }
     .detail-item .detail-definition a { color: var(--link-color-dark); }
     .detail-item .detail-definition a:hover { color: var(--primary-darker); }
     .profile-text-section .card-header { background-color: #2b2b2b; }
     .profile-error-alert { background-color: #664d03; color: #fff3cd; border-color: #ffeeba; }

     /* Темная тема для вкладок диалогов */
    .dialogs-tabs-inner {
        background: #23222b; /* Темный фон для блока вкладок */
        box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    }
    .dialogs-tab {
        color: #c7b6e0; /* Цвет неактивной вкладки */
    }
    .dialogs-tab.active, .dialogs-tab:hover {
        background: #2d2540; /* Фон активной/при наведении */
        color: #fff; /* Текст активной/при наведении */
    }
    .dialogs-tab-sep {
        color: #555; /* Цвет разделителя */
    }

    /* Темная тема для карточек диалогов */
    .dialog-card {
        background: #23222b;
        border-color: #3e3e3e;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }
    .dialog-name { color: var(--dark-text); }
    .dialog-message-text { color: var(--dark-text); }
    .dialog-age,
    .dialog-city,
    .dialog-country,
    .dialog-messages-count,
    .dialog-timestamp {
        color: var(--secondary-text);
    }
    .dialog-messages-count .new { color: var(--danger-color); } /* Цвет новых сообщений */
    .blocked-overlay {
        background: rgba(40,40,60,0.92); /* Полупрозрачный темный оверлей */
        color: #fff;
    }
    .dialog-avatar {
        background: #2d2540; /* Фон-заглушка для аватара */
    }
}
/* ================================= */
/* ===== КОНЕЦ ТЕМНОЙ ТЕМЫ ========= */
/* ================================= */


/* --- Утилита Скрытия --- */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* --- Dialog Card Component (Стиль как у табов) --- */
.dialog-card {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 15px 24px;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(80,80,120,0.06);
    border: 1px solid #f0f0f5;
    margin-bottom: 15px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dialog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(80,80,120,0.1);
}

[data-theme="dark"] .dialog-card {
    background: #252525;
    border-color: #333;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* --- Общие стили --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; padding: 0; margin: 0; }
body { font-family: var(--font-body); line-height: 1.6; color: var(--dark-text); background-color: var(--light-bg); transition: background-color 0.3s ease, color 0.3s ease; display: flex; flex-direction: column; min-height: 100vh; font-size: 16px; padding: 0; margin: 0; }
main { flex: 1; }
a { text-decoration: none; color: var(--link-color-light); transition: color 0.2s ease; }
a:hover { color: var(--primary-darker); text-decoration: underline; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; margin-bottom: 0.75rem; line-height: 1.3; }
h1 { font-size: 2.2rem; } h2 { font-size: 1.8rem; margin-bottom: 1.5rem; } h3 { font-size: 1.4rem; margin-bottom: 1rem; } h4 { font-size: 1.1rem; font-weight: 600; }
fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
label, .search-label { display: block; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.9rem; color: var(--secondary-text); }
label.inline-label { display: inline-block; font-weight: 400; margin-left: 0.3rem; margin-right: 1rem; margin-bottom: 0; color: var(--dark-text); }
input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="number"], input[type="file"], select, textarea { display: block; width: 100%; padding: 0.7rem 0.9rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--dark-text); background-color: var(--input-bg); background-clip: padding-box; border: 1px solid var(--input-border); appearance: none; border-radius: var(--border-radius); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .3s ease, color .3s ease; }
input[type="file"] { padding-right: 0.9rem; background-image: none; }
input[type="file"]:focus { border-color: var(--primary-color); outline: 0; box-shadow: none; }
textarea { resize: vertical; min-height: 120px; appearance: auto; }
select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; padding-right: 2.5rem; }
input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color: var(--primary-color); outline: 0; box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), .15); }
select option { background-color: var(--default-bg); color: var(--dark-text); padding: 8px; }
input[type="checkbox"], input[type="radio"] { width: 1.1em; height: 1.1em; margin-top: 0.15em; vertical-align: top; background-color: var(--input-bg); border: 1px solid var(--input-border); appearance: none; display: inline-block; margin-right: 0.5em; position: relative; cursor: pointer; flex-shrink: 0; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"] { border-radius: 0.2em; }
input[type="checkbox"]:checked, input[type="radio"]:checked { background-color: var(--primary-color); border-color: var(--primary-color); background-image: none; }
input[type="checkbox"]:checked::before { content: ''; display: block; width: 0.7em; height: 0.35em; border-left: 2px solid var(--white-color); border-bottom: 2px solid var(--white-color); transform: translate(0.12em, 0.24em) rotate(-45deg); position: absolute; }
input[type="radio"]:checked::before { content: ''; display: block; width: 0.55em; height: 0.55em; border-radius: 50%; background-color: var(--white-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
input[type="checkbox"].is-valid, input[type="radio"].is-valid, input[type="checkbox"].is-invalid, input[type="radio"].is-invalid { background-image: none; }
input[type="checkbox"].is-invalid, input[type="radio"].is-invalid { border-color: var(--danger-color); }
input[type="checkbox"]:focus, input[type="radio"]:focus { border-color: var(--primary-color); outline: 0; box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), .25); }
input[type="checkbox"].is-invalid:focus, input[type="radio"].is-invalid:focus { border-color: var(--danger-color); box-shadow: 0 0 0 0.2rem rgba(var(--danger-color-rgb), .25); }
.container { width: 100%; max-width: var(--container-width); margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; background-color: transparent; }

/* --- Кнопки (УЛУЧШЕННЫЕ) --- */
.btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--button-nav-text-light); text-align: center; vertical-align: middle; cursor: pointer; user-select: none; background-color: var(--primary-color); border: 1px solid var(--primary-color); padding: 0.6rem 1.2rem; font-size: 0.95rem; line-height: 1.5; border-radius: var(--border-radius); box-shadow: var(--shadow-btn); transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .2s ease-in-out, transform 0.2s ease; }
.btn:hover { background-color: var(--primary-darker); border-color: var(--primary-darker); color: var(--button-nav-text-light); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-btn-hover); }
.btn:focus, .btn.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), .5), var(--shadow-btn); }
.btn:active, .btn.active { transform: translateY(0); box-shadow: var(--shadow-btn); }
.btn i { margin-right: 0.5em; font-size: 0.9em; line-height: 1; }
.btn i.fa-edit, .btn i.fa-images { font-size: 0.85em; }
.btn-secondary { background-color: var(--secondary-color); border-color: var(--secondary-color); color: var(--white-color); }
.btn-secondary:hover { background-color: var(--secondary-darker); border-color: var(--secondary-darker); color: var(--white-color); }
.btn-secondary:focus, .btn-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(var(--secondary-color-rgb), .5), var(--shadow-btn); }
.btn-success { background-color: var(--success-color); border-color: var(--success-color); color: var(--white-color); }
.btn-success:hover { background-color: var(--success-darker); border-color: var(--success-darker); color: var(--white-color); }
.btn-success:focus, .btn-success.focus { box-shadow: 0 0 0 0.2rem rgba(var(--success-color-rgb), .5), var(--shadow-btn); }
.btn-danger { background-color: var(--danger-color); border-color: var(--danger-color); color: var(--white-color); }
.btn-danger:hover { background-color: var(--danger-darker); border-color: var(--danger-darker); color: var(--white-color); }
.btn-danger:focus, .btn-danger.focus { box-shadow: 0 0 0 0.2rem rgba(var(--danger-color-rgb), .5), var(--shadow-btn); }
.btn-info { background-color: var(--info-color); border-color: var(--info-color); color: var(--white-color); }
.btn-info:hover { background-color: var(--info-darker); border-color: var(--info-darker); color: var(--white-color); }
.btn-info:focus, .btn-info.focus { box-shadow: 0 0 0 0.2rem rgba(var(--info-color-rgb), .5), var(--shadow-btn); }
.btn-google { background-color: #4285F4; border-color: #4285F4; color: var(--white-color); }
.btn-google:hover { background-color: #357ae8; border-color: #357ae8; color: var(--white-color); }
.btn-google:focus { box-shadow: 0 0 0 0.2rem rgba(66, 133, 244, .5); }
.btn-google i { margin-right: 8px; }
.btn-lg { padding: 0.8rem 1.6rem; font-size: 1.1rem; }
.btn-sm { padding: 0.3rem 0.8rem; font-size: 0.8rem; }
/* Кнопка разблокировки */
.btn-outline-danger { color: var(--danger-color); border-color: var(--danger-color); background-color: transparent; }
.btn-outline-danger:hover { color: var(--white-color); background-color: var(--danger-color); border-color: var(--danger-color); }


/* --- Утилиты Bootstrap-like --- */
.text-center { text-align: center !important; } .mb-1 { margin-bottom: 0.25rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; } .mt-1 { margin-top: 0.25rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mt-5 { margin-top: 3rem !important; } .pt-3 { padding-top: 1rem !important; } .pb-2 { padding-bottom: 0.5rem !important; } .ms-1 { margin-left: 0.25rem !important; } .me-1 { margin-right: 0.25rem !important; } .d-block { display: block !important; } .d-flex { display: flex !important; } .d-inline-block { display: inline-block !important; } .justify-content-between { justify-content: space-between !important; } .justify-content-center { justify-content: center !important; } .align-items-center { align-items: center !important; } .align-items-start { align-items: flex-start !important; } .gap-2 { gap: 0.5rem !important; } .w-100 { width: 100% !important; } .fs-6 { font-size: .875rem !important; } .fw-normal { font-weight: 400 !important; } .fw-bold { font-weight: 700 !important; } .text-danger { color: var(--danger-color) !important; } .text-muted { color: var(--secondary-text) !important; opacity: 1; } .rounded { border-radius: var(--border-radius) !important; } .shadow-sm { box-shadow: var(--shadow-sm) !important; } .border { border: 1px solid var(--border-color) !important; } .border-top { border-top: 1px solid var(--border-color) !important; } .border-bottom { border-bottom: 1px solid var(--border-color) !important; } .list-unstyled { padding-left: 0; list-style: none; }

/* --- Шапка и Навигация --- */
.top-header { background-color: var(--romantic-purple-light); background-image: var(--svg-texture-light), linear-gradient(135deg, var(--romantic-pink-light) 0%, var(--romantic-purple-light) 100%); padding: 0.5rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); transition: background-color 0.3s ease, border-color 0.3s ease; }
.header-content { display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; }
.header-right-controls { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin-left: auto; }
.logo-area { display: flex; align-items: center; gap: 10px; flex-grow: 1; }
.heart-icon { color: var(--danger-color); line-height: 0; transform: translateY(2px); }
.heart-icon svg { vertical-align: middle; }
.logo { }
.logo-link { display: inline-block; text-decoration: none; line-height: 1.1; }
.logo-link:hover { text-decoration: none; }
.logo-main { display: block; font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700; color: var(--romantic-header-text); margin-bottom: -0.1em; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
.logo-tagline { display: block; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 400; color: var(--romantic-header-text); opacity: 0.8; letter-spacing: 0.5px; margin-top: 0; transition: opacity 0.2s ease; }
.logo-link:hover .logo-tagline { opacity: 1; }
.language-switcher { }
.language-switcher select.language-select { padding: 0.3rem 2rem 0.3rem 0.6rem; font-size: 0.9rem; width: auto; min-width: 100px; border-color: rgba(0,0,0,0.1); cursor: pointer; line-height: 1.5; height: 38px; background-color: rgba(255,255,255,0.4); color: var(--romantic-header-text); border-radius: 20px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235c3a6b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); appearance: none; display: inline-block; vertical-align: middle; transition: all 0.3s ease; }
.language-switcher select.language-select:hover { background-color: rgba(255,255,255,0.6); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.language-switcher select option { background-color: var(--default-bg); color: var(--dark-text); }
.theme-toggle-btn { background: rgba(255,255,255,0.4); border: 1px solid rgba(0,0,0,0.1); color: var(--romantic-header-text); font-size: 1rem; padding: 0; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; margin-left: 0px; line-height: 1; position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.theme-toggle-btn:hover { background-color: rgba(255,255,255,0.6); color: var(--romantic-header-text); transform: rotate(15deg) scale(1.1); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.theme-toggle-btn:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), .2); }
.theme-toggle-btn .theme-icon { display: inline-block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: transform 0.4s ease, -webkit-mask-image 0.1s linear 0.1s; transition: transform 0.4s ease, mask-image 0.1s linear 0.1s; transition: transform 0.4s ease, mask-image 0.1s linear 0.1s, -webkit-mask-image 0.1s linear 0.1s; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z'/%3E%3C/svg%3E"); transform: rotate(0deg); }
.main-navbar { background-color: var(--romantic-pink-mid); background-image: var(--svg-texture-light), linear-gradient(to right, var(--romantic-pink-mid) 0%, var(--romantic-purple-mid) 100%); padding: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-bottom: none; transition: background-color 0.3s ease, border-color 0.3s ease; position: sticky; top: 0; z-index: 1020; }
.main-navbar .container { padding-top: 0.5rem; padding-bottom: 0.5rem; position: relative; }
.nav-links { display: flex; justify-content: center; align-items: center; gap: 5px; }
.nav-links li { margin: 0; }
.nav-links a { color: var(--navbar-text); font-family: var(--font-heading); font-weight: 500; padding: 0.6rem 1.1rem; border-radius: var(--border-radius); transition: background-color 0.2s ease, color 0.2s ease, border-bottom-color 0.2s ease, transform 0.2s ease; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.9rem; border-bottom: 3px solid transparent; position: relative; }
.nav-links a:hover { background-color: rgba(255,255,255,0.1); color: var(--nav-text-hover-light); text-decoration: none; border-bottom-color: rgba(var(--primary-color-rgb), 0.3); transform: translateY(-1px); }
.nav-links a.active { background-color: rgba(255,255,255,0.15); color: var(--nav-text-hover-light); font-weight: 600; border-bottom-color: var(--nav-text-hover-light); }

/* --- Карточки, Виджеты (Общие стили) --- */
.card, .widget { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); transition: background-color 0.3s ease, border-color 0.3s ease; margin-bottom: 1.5rem; }
.card-body, .widget-content { padding: 1.5rem; }
.widget-header { padding: 1rem 1.5rem; margin-bottom: 0; background-color: var(--default-bg); border-bottom: 1px solid var(--border-color); border-radius: var(--border-radius) var(--border-radius) 0 0; transition: background-color 0.3s ease, border-color 0.3s ease; }
.widget-header h3, .widget-header h4 { margin-bottom: 0; font-size: 1.1rem; }

/* --- Стили для главной страницы (index.php) --- */
.main-content { display: flex; flex-wrap: wrap; gap: 30px; padding-top: 30px; padding-bottom: 30px; }
.main-content .sidebar { flex: 1 1 260px; min-width: 260px; display: flex; flex-direction: column; gap: 20px; }
.main-content .content-area { flex: 2 1 600px; min-width: 300px; margin-bottom: 0; }
.main-content .sidebar .widget { margin-bottom: 0; }
.popular-members .profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 15px; }
.profile-grid { /* Base grid for profiles and messages */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}
.profile-grid .profile-card { /* Card styles for index page */
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease;
    border: 1px solid var(--border-color);
    text-align: center;
    display: flex;
    flex-direction: column;
}
.profile-grid .profile-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.profile-grid .profile-card a { text-decoration: none; color: inherit; display: block; }
.profile-grid .profile-card img { width: 100%; height: 190px; object-fit: cover; display: block; background-color: var(--placeholder-bg); border-bottom: 1px solid var(--border-color-light); transition: opacity 0.3s ease; }
.profile-grid .profile-card .profile-info { padding: 0.8rem; margin-top: auto; }
.profile-grid .profile-card .profile-info h5 { font-size: 0.95rem; margin-bottom: 0.2rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-grid .profile-card .profile-info h5 a { color: inherit; text-decoration: none; }
.profile-grid .profile-card .profile-info h5 a:hover { color: var(--primary-color); text-decoration: underline; }
.profile-grid .profile-card .profile-info p { font-size: 0.85rem; color: var(--secondary-text); margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-grid .no-results { grid-column: 1 / -1; text-align: center; color: var(--secondary-text); padding: 2rem 0; }
.intro-text h2 { color: var(--primary-color); font-weight: 700; border-bottom: 1px solid var(--border-color-light); padding-bottom: 0.5rem; }
.google-signin-prompt { background-color: rgba(var(--primary-color-rgb), 0.05); border: 1px dashed rgba(var(--primary-color-rgb), 0.2); padding: 1.5rem; border-radius: var(--border-radius); }
.google-login-button-container > div { display: inline-block; }
.sidebar .widget { border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.08); overflow: hidden; border-radius: 12px; margin-bottom: 25px; transition: transform 0.3s ease; }
.sidebar .widget:hover { transform: translateY(-3px); }
.sidebar .widget .widget-header { background-image: linear-gradient(135deg, var(--romantic-purple-light) 0%, var(--romantic-pink-light) 100%); border-bottom: none; padding: 1rem 1.5rem; }
.sidebar .widget .widget-header h4 { font-size: 1.15rem; font-weight: 700; color: var(--romantic-header-text); text-transform: uppercase; letter-spacing: 1px; }
.sidebar .widget .widget-content { padding: 1.5rem; background-color: var(--card-bg); }
.quick-search-form .form-label { font-weight: 600; color: var(--primary-color); margin-bottom: 0.4rem; font-size: 0.85rem; text-transform: uppercase; }
.quick-search-form .form-select, .quick-search-form .form-control { border-radius: 8px; border: 1.5px solid var(--border-color); padding: 0.6rem 0.8rem; font-size: 0.95rem; transition: all 0.2s ease; background-color: var(--input-bg); color: var(--dark-text); }
.quick-search-form .form-select:focus, .quick-search-form .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1); }
.quick-search-form .btn-primary { padding: 0.8rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; border-radius: 8px; background-image: linear-gradient(to right, var(--primary-color), var(--primary-darker)); border: none; margin-top: 10px; }

/* --- Стили для страницы Игр (games.php) - ПРИМЕР --- */
.games-page .layout-container { display: flex; flex-wrap: wrap; gap: 25px; } .games-page .sidebar { flex: 0 0 280px; order: 1; } .games-page .main-content { flex: 1; min-width: 0; order: 2; } .games-page .sidebar .widget { margin-bottom: 1.5rem; } .games-page .sidebar .widget:last-child { margin-bottom: 0; } .sidebar-player-list { list-style: none; padding: 0; margin: 0; } .sidebar-player-list .player-item { display: flex; align-items: center; gap: 10px; margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border-color-light); } .sidebar-player-list .player-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .sidebar-player-list .player-avatar-link { flex-shrink: 0; } .sidebar-player-list .player-avatar { border-radius: 50%; width: 40px; height: 40px; object-fit: cover; display: block; background-color: var(--placeholder-bg); } .sidebar-player-list .player-info { display: flex; flex-direction: column; line-height: 1.3; overflow: hidden; } .sidebar-player-list .player-name { font-weight: 500; color: var(--dark-text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-player-list .player-name:hover { color: var(--primary-color); } .sidebar-player-list .player-activity { display: block; font-size: 0.85em; color: var(--secondary-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-player-list .player-activity a { font-weight: normal; color: var(--secondary-text); } .sidebar-player-list .player-activity a:hover { color: var(--primary-color); } .games-page .main-content .section-title { font-size: 1.6rem; font-weight: 600; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color-light); } .games-page .games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; } .games-page .game-item.card { text-align: center; margin-bottom: 0; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; padding: 0; display: flex; flex-direction: column; overflow: hidden; } .games-page .game-item.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .games-page .game-item .game-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; } .games-page .game-item .game-image-container { aspect-ratio: 1 / 1; overflow: hidden; background-color: var(--placeholder-bg); border-bottom: none; } .games-page .game-item .game-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .games-page .game-item:hover .game-image { transform: scale(1.05); } .games-page .game-item .game-title.card-body { font-weight: 600; padding: 0.75rem; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: auto; border-top: 1px solid var(--border-color-light); border-radius: 0; } .games-page .no-results { color: var(--secondary-text); padding: 2rem 0; text-align: center; grid-column: 1 / -1; }

/* --- Унифицированные отступы для основных контейнеров --- */
.page-container { padding-top: 30px; padding-bottom: 30px; } .login-container { padding-top: 30px; padding-bottom: 30px; }

/* --- Футер --- */
.main-footer { padding: 1.5rem 0; margin-top: 3rem; background-color: var(--footer-bg); border-top: 1px solid var(--border-color); color: var(--footer-text); font-size: 0.9rem; text-align: center; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }


/* ============================================ */
/* === Стили Страницы Профиля (profile.php) === */
/* ============================================ */
.profile-page-container { padding-top: 30px; padding-bottom: 40px; }
.profile-page-grid { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: start; }
.profile-sidebar .widget-title { margin-bottom: 0; font-size: 1rem; font-weight: 600; }
.profile-sidebar .similar-users-widget-content { padding: 10px; }
.similar-users-list { list-style: none; padding: 0; margin: 0; }
.similar-profile-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.similar-users-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.similar-profile-item .similar-profile-photo { width: 80px; height: 110px; object-fit: cover; border-radius: var(--border-radius); background-color: var(--placeholder-bg); flex-shrink: 0; }
.similar-profile-item .similar-info { overflow: hidden; line-height: 1.3; }
.similar-profile-item .similar-profile-link { font-weight: 600; color: var(--dark-text); display: block; font-size: 0.9rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.similar-profile-item .similar-profile-link:hover { color: var(--primary-color); }
.online-status { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; display: inline-block; margin-top: 2px; }
.online-status i { font-size: 0.7em; margin-right: 4px; vertical-align: middle; }
.online-status-sidebar { color: var(--online-indicator); }
.profile-sidebar .no-results { font-size: 0.9rem; color: var(--secondary-text); padding: 10px 0; }
.profile-actions { padding-bottom: 15px; border-bottom: 1px solid var(--border-color); display: flex; gap: 10px; flex-wrap: wrap; }
.profile-actions .login-prompt { margin: 0; color: var(--secondary-text); align-self: center; }
.profile-actions .login-prompt a { font-weight: 600; color: var(--link-color-light); }
[data-theme="dark"] .profile-actions .login-prompt a { color: var(--link-color-dark); }
.profile-main-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; align-items: start; margin-top: 1.5rem; }
.profile-photo-column .profile-name { font-size: 1.6rem; margin-bottom: 0.2rem; word-break: break-word; color: var(--dark-text); display: inline-block; vertical-align: baseline; }
.profile-photo-column .profile-online-status { margin-bottom: 1rem; font-weight: bold; display: inline-block; margin-left: 10px; font-size: 0.9em; vertical-align: baseline; }
.profile-photo-column .profile-online-status.is-online { color: var(--online-indicator); }
.profile-photo-column .profile-online-status.is-offline { color: var(--secondary-text); }
.profile-photo-column .profile-online-status .last-seen { font-weight: normal; font-size: 0.9em; margin-left: 5px; color: var(--secondary-text); }
.profile-main-photo { border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-sm); position: relative; margin-top: 0.5rem; }
.profile-main-photo .profile-main-photo-img { display: block; width: 100%; height: auto; background-color: var(--placeholder-bg); }
.profile-view-count { text-align: center; color: var(--secondary-text); font-size: 0.9rem; margin-top: 0.5rem; }
.profile-details-column { }
.profile-details-column .card-body { padding: 0; }
.profile-details-list { margin-bottom: 0; }
.detail-item { display: flex; flex-direction: row; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border-color); transition: background-color 0.3s ease; align-items: baseline; }
.profile-details-list .detail-item:nth-child(even) { background-color: var(--light-bg); }
.profile-details-list .detail-item:last-child { border-bottom: none; }
.detail-item .detail-term { flex: 0 0 150px; font-weight: 600; color: var(--secondary-text); padding-right: 10px; word-break: keep-all; }
.detail-item .detail-definition { flex: 1; margin-bottom: 0; color: var(--dark-text); word-wrap: break-word; }
.detail-item .detail-definition a { color: var(--link-color-light); text-decoration: underline; }
.detail-item .detail-definition a:hover { color: var(--primary-darker); }
[data-theme="dark"] .detail-item .detail-definition a { color: var(--link-color-dark); }
[data-theme="dark"] .detail-item .detail-definition a:hover { color: var(--primary-darker); }
.profile-text-section { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); margin-top: 1.5rem; }
.profile-text-section .card-header { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border-color); background-color: var(--light-bg); }
[data-theme="dark"] .profile-text-section .card-header { background-color: #2b2b2b; }
.profile-text-section .card-header .section-title { margin-bottom: 0; font-size: 1.1rem; font-weight: 600; color: var(--dark-text); }
.profile-text-section .card-body { padding: 1rem; }
/* --- Блок вкладок (Tabs) --- */
.profile-tabs-block {
    display: block;
    margin-bottom: 25px;
    text-align: center; /* Центрируем внутренний inline-flex */
}
.dialogs-tabs-inner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--card-bg, #fff);
    padding: 6px;
    border-radius: 50px;
    box-shadow: var(--shadow-sm, 0 4px 15px rgba(0,0,0,0.05));
    border: none;
}
.profile-tab {
    text-decoration: none;
    color: var(--secondary-text, #666);
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 40px;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}
.profile-tab:hover:not(.active) {
    color: var(--dark-text);
    background: rgba(128,128,128,0.1);
}
.profile-tab.active {
    background: linear-gradient(135deg, var(--romantic-purple-light, var(--primary-color)) 0%, var(--romantic-pink-light, var(--secondary-color)) 100%);
    color: var(--romantic-header-text, white) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    font-weight: 700;
}
.profile-tab-sep {
    display: none;
}
.profile-error-alert { padding: 1rem; border: 1px solid #ffecb5; background-color: #fff3cd; color: #664d03; border-radius: var(--border-radius); text-align: center; }
[data-theme="dark"] .profile-error-alert { background-color: #664d03; color: #fff3cd; border-color: #ffeeba; }


/* ============================================ */
/* === Стили Страницы Сообщений (messages.php) === */
/* ============================================ */

.dialogs-tabs-block {
    margin-top: 24px;
    margin-bottom: 24px;
    text-align: center;
}

.dialogs-tab {
    font-size: 1.1rem;
    color: var(--primary-color);
    text-decoration: none;
    padding: 2px 10px;
    border-radius: 8px;
    transition: 0.2s;
    font-weight: 500;
}

.dialogs-tab:hover, .dialogs-tab.active {
    color: var(--primary-darker);
    background: rgba(var(--primary-rgb), 0.05);
}

.dialogs-tab-sep {
    font-size: 1.1rem;
    color: #eee;
    margin: 0 8px;
    display: inline; /* Возвращаем разделители */
}

/* --- Стили карточек диалогов --- */

/* --- Улучшенный список диалогов (List-based layout) --- */
.messages-list-wrapper {
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

.dialog-row {
    position: relative;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.dialog-row:last-child {
    border-bottom: none;
}

.dialog-row:hover {
    background-color: rgba(var(--primary-color-rgb), 0.03);
}

.dialog-row.is-unread {
    background-color: rgba(var(--primary-color-rgb), 0.05);
}

.dialog-row-link {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5;
}

.dialog-row-content {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.dialog-avatar-wrap {
    flex-shrink: 0;
}

.dialog-avatar-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color-light);
    background-color: var(--placeholder-bg);
}

.dialog-body {
    flex: 1;
    min-width: 0;
}

.dialog-top-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.dialog-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--dark-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dialog-time {
    font-size: 0.85rem;
    color: var(--secondary-text);
}

.dialog-bottom-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dialog-message-snippet {
    font-size: 0.95rem;
    color: var(--secondary-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 15px;
}

.dialog-badge {
    background-color: var(--danger-color);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

/* Оверлей блокировки для строк */
.blocked-row-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(var(--shadow-color-rgb), 0.6);
    backdrop-filter: blur(2px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    gap: 20px;
}

.blocked-row-overlay.no-action {
    background: rgba(var(--shadow-color-rgb), 0.4);
    cursor: not-allowed;
}

.blocked-label {
    font-weight: 600;
    font-size: 1rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.unblock-icon-btn {
    background: #fff;
    border: none;
    color: var(--danger-color);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    pointer-events: auto;
}

.unblock-icon-btn:hover {
    transform: scale(1.1);
    background: var(--danger-color);
    color: #fff;
}

/* --- Пагинация --- */
.pagination-wrapper {
    display: flex;
    justify-content: center;
}

.pagination-list {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
}

.pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--dark-text);
    font-weight: 600;
    transition: all 0.2s;
}

.pagination-link:hover {
    background: var(--primary-color);
    color: #fff !important;
    text-decoration: none;
}

.pagination-link.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.pagination-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    color: var(--secondary-text);
}
.dialog-unblock-form {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
}

/* ============================================ */
/* ========== Адаптивность Общая ============= */
/* ============================================ */
@media (max-width: 1100px) { /* Пример точки перелома */
    /* Стили для экранов <= 1100px */
}

@media (max-width: 992px) {
    /* Игры */
    .games-page .sidebar { flex: 0 0 240px; }
    .games-page .games-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    /* Профиль */
    .profile-page-grid { grid-template-columns: 1fr; }
    .profile-content-area { order: 1; }
    .profile-sidebar { order: 2; margin-top: 30px; }
    .profile-main-grid { grid-template-columns: 1fr; }
    .profile-photo-column { text-align: center; margin-bottom: 20px; }
    .profile-main-photo { max-width: 350px; margin-left: auto; margin-right: auto; }
    .detail-item .detail-term { flex-basis: 100px; }
}

@media (max-width: 768px) {
    /* Шапка */
	.header-content { flex-direction: column; align-items: center; gap: 15px; }
    .logo-area { gap: 15px; justify-content: center; width: 100%; }
    .header-right-controls { margin-left: 0; width: 100%; justify-content: center; gap: 15px; }
    /* Навигация */
	.main-navbar .container { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-right: 0; padding-left: 0; }
    .main-navbar .container::-webkit-scrollbar { display: none; }
    .nav-links { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: nowrap; padding-bottom: 5px; position: static; width: auto; background-color: transparent; box-shadow: none; border-top: none; max-height: none; overflow: visible; padding-left: 0px; padding-right: 15px; gap: 0; }
    .nav-links li { flex-shrink: 0; width: auto; margin: 0; }
    .nav-links a { padding: 0.6rem 0.8rem; font-size: 0.85rem; white-space: nowrap; border-bottom-width: 2px; }
    .nav-item-desktop-only, .nav-item-mobile-only { display: list-item !important; } /* Показ/скрытие пунктов меню */
    /* Главная */
	.main-content { flex-direction: column; gap: 20px; }
    .main-content .sidebar { order: 2; flex-basis: auto; min-width: 0; width: 100%; }
    .main-content .content-area { order: 1; flex-basis: auto; min-width: 0; width: 100%; margin-bottom: 1.5rem; }
    .popular-members .profile-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
    .profile-grid .profile-card img { height: 180px; }
    .profile-grid .profile-card .profile-info { padding: 0.6rem; }
    .profile-grid .profile-card .profile-info h5 { font-size: 0.9rem; }
    .profile-grid .profile-card .profile-info p { font-size: 0.8rem; }
    /* Игры */
	.games-page .layout-container { flex-direction: column; }
    .games-page .sidebar { order: 1; flex-basis: auto; width: 100%; }
    .games-page .main-content { order: 2; }
    .games-page .games-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
    .games-page .main-content .section-title { font-size: 1.4rem; margin-bottom: 1rem; }
    /* Общее */
	.main-content, .page-container, .login-container { padding-top: 20px; padding-bottom: 20px; }
    /* Профиль */
     .detail-item .detail-term { flex-basis: 80px; padding-right: 5px; }
}

/* =================================================== */
/* === АДАПТИВНОСТЬ ДЛЯ СМАРТФОНОВ (max-width: 600px) === */
/* =================================================== */
@media (max-width: 600px) {
    /* Сетка профилей/диалогов */
    .profile-grid {
        grid-template-columns: 1fr; /* Один столбец */
        gap: 15px; /* Уменьшаем промежуток */
    }

    /* --- Адаптация карточек диалогов --- */
    .dialog-card {
        padding: 12px 10px; /* Уменьшаем отступы */
        min-height: unset; /* Убираем минимальную высоту */
        gap: 12px; /* Промежуток между аватаром и инфо, и между строками */
        /* Меняем display для переноса */
        display: flex;
        flex-wrap: wrap; /* !!! Разрешаем элементам переноситься на новую строку */
        align-items: flex-start; /* Выравнивание элементов по верху */
    }
    .dialog-avatar {
        width: 50px; /* Фиксированная ширина аватара */
        height: auto; /* Автоматическая высота или фиксированная, например 60px */
        aspect-ratio: 50 / 60; /* Поддержание пропорций (если высота auto) */
        object-fit: cover;
        border-radius: 8px;
        flex-shrink: 0; /* Не сжимать аватар */
        flex-basis: 50px; /* Явно задаем базовую ширину */
    }
    .dialog-info {
        /* Занимает оставшееся место на первой строке */
        flex-grow: 1;
        min-width: 0; /* Предотвращает выход контента за пределы */
        /* Остается flex-колонкой для своих дочерних элементов */
        display: flex;
        flex-direction: column;
    }
    .dialog-header-row {
        font-size: 0.95em;
        margin-bottom: 2px;
        gap: 0 4px;
        width: 100%; /* Занять всю ширину блока .dialog-info */
    }
    .dialog-name {
        font-size: 1em;
        margin-right: 0; /* Убираем отступ справа на мобильных */
        white-space: normal; /* Позволяем имени переноситься, если очень длинное */
        overflow: visible;
        text-overflow: clip;
    }
    /* --- Адаптація списку діалогів для мобільних --- */
    .dialog-row {
        padding: 12px 15px;
        gap: 12px;
    }
    .dialog-avatar-circle {
        width: 50px;
        height: 50px;
    }
    .dialog-top-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        margin-bottom: 4px;
    }
    .dialog-time {
        font-size: 0.75rem;
    }
    .dialog-name {
        font-size: 1rem;
    }
    .dialog-message-snippet {
        font-size: 0.85rem;
        -webkit-line-clamp: 1; /* Только одна строка на мобиле для компактности */
    }
    .dialog-badge {
        width: 18px;
        height: 18px;
        font-size: 0.7rem;
    }
    .blocked-row-overlay {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }
    .blocked-label {
        font-size: 0.85rem;
    }


    /* Адаптация вкладок */
    .dialogs-tabs-block {
        margin-top: 18px;
        margin-bottom: 22px;
    }
    .dialogs-tabs-inner {
        padding: 6px 12px;
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .dialogs-tab {
        font-size: 1em;
        padding: 1px 7px;
        border-radius: 6px;
    }
    .dialogs-tab-sep {
        font-size: 1em;
        margin: 0 4px;
    }
}
/* =================================================== */
/* === КОНЕЦ АДАПТИВНОСТИ ДЛЯ СМАРТФОНОВ (max-width: 600px) === */
/* =================================================== */


@media (max-width: 480px) {
    /* Общие */
	body { font-size: 15px; }
    .container { padding-left: 10px; padding-right: 10px; }
    /* Лого */
    .logo-main { font-size: 2.2rem; }
    .logo-tagline { font-size: 0.75rem; }
    .logo-area { gap: 8px; }
    .heart-icon svg { width: 24px; height: 24px; }
    /* Заголовки */
    h1 { font-size: 1.8rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.2rem; }
    /* Навигация */
    .nav-links a { padding: 0.5rem 0.6rem; font-size: 0.8rem; }
    .main-navbar .container { padding-left: 10px; padding-right: 10px; }
    /* Главная */
    .popular-members .profile-grid { grid-template-columns: repeat(2, 1fr); } /* 2 колонки для популярных */
    .profile-grid .profile-card img { height: 190px; }
    /* Игры */
    .games-page .games-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .games-page .game-item .game-title.card-body { font-size: 0.9rem; padding: 0.5rem; }
    /* Сайдбар */
    .sidebar .widget .widget-header { padding: 0.6rem 0.8rem;}
    .sidebar .widget .widget-header h4 { font-size: 1rem; }
    .games-page .sidebar .widget-content { padding: 0.8rem; }
    .sidebar-player-list .player-item { gap: 8px; padding-bottom: 0.6rem; margin-bottom: 0.6rem; }
    .sidebar-player-list .player-avatar { width: 35px; height: 35px; }
    .sidebar-player-list .player-info { font-size: 0.85rem; }
    .sidebar-player-list .player-activity { font-size: 0.8em; }
    /* Профиль */
     .profile-photo-column .profile-name { font-size: 1.4rem; }
     .detail-item { padding: 0.6rem 0.8rem; }
     .detail-item .detail-term { flex-basis: auto; width: 100%; margin-bottom: 3px; padding-right: 0; font-size: 0.85em; } /* Метка сверху */
     .detail-item { flex-direction: column; align-items: flex-start;} /* Переключаем на колонку */
     .detail-item .detail-definition { font-size: 0.95em; }
     .profile-photo-column .profile-name, .profile-photo-column .profile-online-status { display: block; text-align: center; margin-left: 0; }
     .profile-photo-column .profile-name { margin-bottom: 0.3rem; }
     .profile-photo-column .profile-online-status { margin-bottom: 0.8rem;}
     /* Диалоги */
     .dialogs-tabs-inner { padding: 6px 6px; gap: 4px; }
     .dialogs-tab { font-size: 0.97em; padding: 1px 4px; }
     .dialogs-tab-sep { margin: 0 2px; }
}

.dialog-meta-small { font-size: 60%; color: var(--secondary-text); }

/* --- Стили из header.php (ранее были в <style> внутри header) --- */
@media (max-width: 768px) {
    .top-header { padding: 0.5rem 7px 0.5rem 7px !important; }
    .mobile-header-row { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; flex-wrap: nowrap !important; }
    .logo-area, .mobile-logo-left { flex: 1 1 0 !important; min-width: 0 !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; }
    .logo-main { font-size: 1.5rem !important; }
    .logo-tagline { font-size: 0.7rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100%; display: block; }
    .mobile-header-right { flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 2px !important; margin-left: auto !important; max-width: 130px !important; min-width: 60px !important; }
    .mobile-lang-select { width: 50px !important; min-width: 0 !important; max-width: 50px !important; padding-left: 0 !important; padding-right: 0 !important; font-size: 0.95rem !important; height: 32px !important; }
    .mobile-lang-select option { font-size: 0.95rem !important; }
    .theme-toggle-btn { width: 30px !important; height: 30px !important; font-size: 0.95rem !important; margin-left: 2px !important; }
}

/* =====================
   Стили диалогов (chat/messages) из dialog.php
   ===================== */
.msg-row { display: flex; align-items: flex-end; margin-bottom: 10px; }
/* .msg-me { flex-direction: row-reverse; }  УДАЛЕНО для правильного порядка */
.msg-avatar { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; margin: 0 8px; }
.msg-bubble { max-width: 70%; padding: 10px 14px; border-radius: 16px; background: #f1f1f1; box-shadow: 0 1px 2px #eee; position: relative; }
.msg-me .msg-bubble { background: #d1e7dd; }
.msg-text { font-size: 1.1em; }
.msg-meta { font-size: 0.85em; color: #888; margin-top: 2px; text-align: right; }
#chat-messages { min-height: 180px; max-height: 350px; overflow-y: auto; background: #f8f9fa; padding: 10px; border-radius: 8px; margin-bottom: 10px; }
.dialog-actions { display: flex; gap: 5px; }
.dialog-actions button {
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
    background: #fff;
    border: 2px solid #d1c4e9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35em;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    box-shadow: 0 1px 2px rgba(80,80,120,0.04);
    color: #6c3483;
    padding: 0;
}
.dialog-actions button:hover {
    box-shadow: 0 2px 8px rgba(80,80,120,0.10);
    border-color: #a569bd;
    background: #f3e6fa;
}
.dialog-actions .btn-success {
    background: #43a047 !important;
    color: #fff !important;
    border-color: #43a047 !important;
}
.dialog-actions .btn-danger {
    background: #e53935 !important;
    color: #fff !important;
    border-color: #e53935 !important;
}
.dialog-actions .btn-outline-primary, 
.dialog-actions .btn-outline-secondary, 
.dialog-actions .btn-outline-danger {
    background: #fff !important;
    color: #6c3483 !important;
}
.dialog-actions .btn-outline-danger:hover {
    border-color: #e53935 !important;
    color: #e53935 !important;
}
.dialog-actions .btn-outline-primary:hover {
    border-color: #43a047 !important;
    color: #43a047 !important;
}
.blocked-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(120,120,120,0.85);
    color: #fff;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    text-align: center;
    border-radius: 8px;
    padding: 20px;
}
.chat-blocked-wrap { position: relative; }

/* Тёмная тема для чата и кнопок */
[data-theme="dark"] .msg-bubble { background: #23222b; box-shadow: 0 1px 2px #18171c; color: var(--dark-text); }
[data-theme="dark"] .msg-me .msg-bubble { background: #2d2540; }
[data-theme="dark"] #chat-messages { background: #18171c; }
[data-theme="dark"] .msg-meta { color: #b0b0b0; }
[data-theme="dark"] .dialog-actions button {
    background: #23222b;
    border-color: #6c3483;
    color: #eddffd;
}
[data-theme="dark"] .dialog-actions button:hover {
    background: #2d2540;
    border-color: #eddffd;
    color: #fff;
}
[data-theme="dark"] .dialog-actions .btn-success {
    background: #40c057 !important;
    color: #23222b !important;
    border-color: #40c057 !important;
}
[data-theme="dark"] .dialog-actions .btn-danger {
    background: #ff8787 !important;
    color: #23222b !important;
    border-color: #ff8787 !important;
}
[data-theme="dark"] .dialog-actions .btn-outline-primary, 
[data-theme="dark"] .dialog-actions .btn-outline-secondary, 
[data-theme="dark"] .dialog-actions .btn-outline-danger {
    background: #23222b !important;
    color: #eddffd !important;
}
[data-theme="dark"] .dialog-actions .btn-outline-danger:hover {
    border-color: #ff8787 !important;
    color: #ff8787 !important;
}
[data-theme="dark"] .dialog-actions .btn-outline-primary:hover {
    border-color: #40c057 !important;
    color: #40c057 !important;
}
[data-theme="dark"] .blocked-overlay {
    background: rgba(40,40,60,0.92);
    color: #eddffd;
}

/* --- Выравнивание сообщений пользователя вправо --- */
.msg-row.msg-me {
    justify-content: flex-end;
}
.msg-row.msg-me .msg-bubble {
    margin-right: 8px;
    margin-left: 0;
}

.msg-bubble {
    /* ...существующие стили... */
    word-break: break-word;
    overflow-wrap: anywhere;
}


.online-status {
    /* Общие стили для обоих статусов, если нужно */
    font-size: 0.8rem; /* Например, сделать текст чуть меньше */
    display: inline-block;
    margin-top: 5px;
}

.online-status.status-online {
    /* Стиль для "Online Now" */
    color: #28a745; /* Зеленый цвет (можете выбрать другой) */
    font-weight: 700; /* Жирный шрифт */
}

.online-status.status-online .fa-circle {
    /* Дополнительные стили для иконки, если нужно (размер уже задан инлайн) */
     /* Например, color: inherit; чтобы иконка была того же цвета, что и текст */
     color: inherit;
}

.online-status.status-offline {
    /* Стиль для "Was ... ago" */
    color: #6c757d; /* Серый цвет (можете выбрать другой) */
    font-style: italic; /* Например, курсив */
}

.guests-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .guests-grid {
        grid-template-columns: 1fr;
    }
}

/* ... существующие стили ... */
[data-theme="dark"] .btn-primary {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
/* ... существующие стили ... */

[data-theme="dark"] .card,
[data-theme="dark"] .widget,
[data-theme="dark"] .intro-text,
[data-theme="dark"] .search-seo-block {
    background: var(--card-bg) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .search-seo-block,
[data-theme="dark"] .search-seo-block[style] {
    border: none !important;
}

.search-seo-block {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 2rem 2.2rem;
    margin-bottom: 1.5rem;
    border: none;
}

.search-seo-block h2 {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.7rem;
    border-bottom: 1px solid var(--border-color-light);
    padding-bottom: 0.5rem;
    margin-bottom: 1.2rem;
}

.search-seo-block p {
    margin-bottom: 0.7em;
    font-size: 1.13rem;
    line-height: 1.7;
    color: var(--dark-text);
}

[data-theme="dark"] .search-seo-block a {
    color: var(--link-color-dark) !important;
}
[data-theme="dark"] .search-seo-block a:hover {
    color: var(--primary-darker) !important;
}

/* --- GALLEY CARD AVATAR FIX --- */
.gallery-grid .gallery-profile-card {
  display: flex;
  align-items: stretch;
  min-height: 140px;
  border-radius: var(--border-radius);
  overflow: hidden;
  padding: 0;
  gap: 0;
}
.gallery-grid .gallery-profile-card .profile-photo {
  flex: 0 0 140px;
  width: 140px;
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--placeholder-bg);
  display: flex;
  align-items: stretch;
  border-radius: 0;
}
.gallery-grid .gallery-profile-card .profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
}
.gallery-grid .gallery-profile-card .profile-details {
  flex: 1;
  padding: 8px 0px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media (max-width: 600px) {
  .gallery-grid .gallery-profile-card {
    min-height: 100px;
  }
  .gallery-grid .gallery-profile-card .profile-photo {
    flex: 0 0 100px;
    width: 100px;
  }
}

/* Стили для пагинации */
.pagination {
    display: flex;
    gap: 5px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 0.9rem;
    color: var(--dark-text);
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: all 0.2s ease;
}

.page-link:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
    text-decoration: none;
}

.page-link.current-page {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
    font-weight: 600;
}

.page-link.disabled {
    color: var(--secondary-text);
    pointer-events: none;
    background-color: var(--input-disabled-bg);
    border-color: var(--border-color);
}

/* Темная тема для пагинации */
[data-theme="dark"] .page-link {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--dark-text);
}

[data-theme="dark"] .page-link:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-btn-text-dark);
}

[data-theme="dark"] .page-link.current-page {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-btn-text-dark);
}

[data-theme="dark"] .page-link.disabled {
    background-color: var(--input-disabled-bg);
    border-color: var(--border-color);
    color: var(--secondary-text);
}
/* --- Geographic SEO Blocks --- */
.search-seo-block {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

[data-theme="dark"] .search-seo-block {
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.geo-link {
    display: block;
    color: var(--primary-color);
    text-decoration: none;
    padding: 10px 15px;
    font-size: 0.95rem;
    border-radius: 12px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.geo-link:hover {
    background: var(--romantic-purple-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

[data-theme="dark"] .geo-link {
    background: var(--input-bg);
    color: var(--dark-text);
    border-color: var(--border-color);
}

[data-theme="dark"] .geo-link:hover {
    background: var(--primary-color);
    color: var(--primary-btn-text-dark);
    border-color: var(--primary-color);
}

/* Global override for dark theme borders */
[data-theme="dark"] .border-bottom {
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .bg-light-subtle {
    background-color: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--border-color);
}

/* --- Geo Sidebar Links (Beautiful Women / Single Men / Free Dating) --- */
.geo-sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.geo-sidebar-links li {
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.geo-sidebar-links li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    line-height: 1.3;
}

.geo-sidebar-links li a:hover {
    background: var(--romantic-purple-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateX(4px);
    text-decoration: none;
}

.geo-sidebar-links li.active-geo-link a {
    background: linear-gradient(135deg, var(--primary-color) 0%, #2575fc 100%);
    color: #fff !important;
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(106,17,203,0.25);
    cursor: default;
    pointer-events: none;
}

.geo-sidebar-links .geo-link-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

[data-theme="dark"] .geo-sidebar-links li a {
    background: var(--input-bg);
    color: var(--dark-text);
    border-color: var(--border-color);
}

[data-theme="dark"] .geo-sidebar-links li a:hover {
    background: rgba(106,17,203,0.15);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

[data-theme="dark"] .geo-sidebar-links li.active-geo-link a {
    background: linear-gradient(135deg, var(--primary-color) 0%, #2575fc 100%);
    color: #fff !important;
    border-color: transparent;
}