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

body {
    font-family: 'Arial', sans-serif;
    background: #0a0e14;
    color: #e0e6ed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* ==================== ШАПКА (общая) ==================== */
.top-bar {
    background: #141a22;
    border-bottom: 2px solid #f7b731;
    padding: 0 30px;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Внутренняя обёртка для игрока */
.top-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    width: 100%;
    background: #141a22;
}

.top-left {
    flex-shrink: 0;
}

.top-left .logo-text {
    font-size: 20px;
    font-weight: bold;
    color: #f7b731;
}

.top-center {
    display: flex;
    gap: 5px;
    margin: 0 auto;
}

.top-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

/* Навигация */
.nav-btn {
    color: #8899aa;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    transition: 0.3s;
    font-size: 14px;
    font-weight: bold;
}

.nav-btn:hover {
    background: rgba(255,255,255,0.05);
    color: #e0e6ed;
}

.nav-btn.active {
    background: linear-gradient(135deg, #f7b731, #e09d1a);
    color: #0a0e14;
}

.nav-links { 
    display: flex; 
    gap: 10px; 
}

.nav-links a { 
    color: #8899aa; 
    text-decoration: none; 
    padding: 8px 16px; 
    border-radius: 8px; 
    font-weight: bold; 
    font-size: 14px; 
}

.nav-links a.active { 
    background: linear-gradient(135deg, #f7b731, #e09d1a);
    color: #0a0e14; 
}

.nav-links a:hover { 
    background: rgba(255,255,255,0.05); 
    color: #e0e6ed; 
}

/* Баланс и пользователь */
.balance-badge {
    background: rgba(247, 183, 49, 0.15);
    border: 1px solid #f7b731;
    padding: 8px 16px;
    border-radius: 20px;
    color: #f7b731;
    font-weight: bold;
    font-size: 14px;
}

.user-name {
    color: #b0c0d0;
    font-size: 14px;
}

/* Логотип в админке */
.top-bar .logo {
    color: #f7b731;
    font-size: 20px;
    font-weight: bold;
}

/* Кнопка выхода */
.logout-btn {
    background: rgba(255,68,68,0.15);
    color: #ff6b6b;
    border: 1px solid #ff6b6b;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: 0.3s;
}

.logout-btn:hover {
    background: rgba(255,68,68,0.3);
}

.top-bar .logout-btn {
    margin-left: auto;
}

/* ==================== АВТОРИЗАЦИЯ ==================== */
.auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.auth-box {
    background: #141a22;
    backdrop-filter: blur(20px);
    padding: 40px;
    border-radius: 20px;
    width: 420px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    border: 1px solid #1e2632;
}

.auth-logo {
    text-align: center;
    font-size: 48px;
    margin-bottom: 5px;
}

.auth-box h1 {
    text-align: center;
    color: #f7b731;
    font-size: 28px;
    margin-bottom: 5px;
}

.auth-subtitle {
    text-align: center;
    color: #8899aa;
    font-size: 14px;
    margin-bottom: 20px;
}

.rates-row {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}

.rate-item {
    flex: 1;
    text-align: center;
    padding: 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    font-size: 12px;
    color: #8899aa;
}

.rate-item span {
    display: block;
    color: #f7b731;
    font-size: 16px;
    font-weight: bold;
}

.auth-tabs {
    display: flex;
    margin-bottom: 25px;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    padding: 4px;
}

.auth-tab {
    flex: 1;
    text-align: center;
    padding: 12px;
    cursor: pointer;
    color: #556677;
    border-radius: 8px;
    transition: 0.3s;
    font-weight: bold;
}

.auth-tab.active {
    background: linear-gradient(135deg, #f7b731, #e09d1a);
    color: #0a0e14;
}

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

.form-group label {
    display: block;
    color: #8899aa;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: bold;
}

.form-group input, .form-group select, .form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #2a3340;
    border-radius: 10px;
    background: #1e2632;
    color: #e0e6ed;
    font-size: 15px;
    outline: none;
    transition: 0.3s;
}

/* ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ SELECT (тёмный фон) */
.form-group select {
    background: #1e2632;
    color: #e0e6ed;
    cursor: pointer;
}

.form-group select option {
    background: #1e2632;
    color: #e0e6ed;
}

.form-group select option:hover,
.form-group select option:checked {
    background: #f7b731;
    color: #0a0e14;
}

.form-group input:focus, .form-input:focus {
    border-color: #f7b731;
    background: #2a3340;
}

.btn-gold {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #f7b731, #e09d1a);
    color: #0a0e14;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(247, 183, 49, 0.35);
}

.btn-gold:disabled {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.3);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ==================== СООБЩЕНИЯ ==================== */
.auth-message {
    margin-top: 15px;
    padding: 12px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    display: none;
}

.auth-message.success {
    display: block;
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.3);
}

.auth-message.error {
    display: block;
    background: rgba(255,68,68,0.15);
    color: #ff6b6b;
    border: 1px solid rgba(255,68,68,0.3);
}

/* ==================== ЛИЧНЫЙ КАБИНЕТ ==================== */
.main-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
    flex: 1;
    width: 100%;
}

.page-content {
    animation: fadeIn 0.3s ease;
}

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

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

.page-header h2 {
    font-size: 24px;
    color: #f7b731;
}

.char-count {
    color: #556677;
    font-size: 14px;
}

/* ==================== КАРТОЧКИ ПЕРСОНАЖЕЙ ==================== */
.characters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    justify-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.char-card {
    background: #141a22;
    border: 1px solid #1e2632;
    border-radius: 15px;
    padding: 25px;
    transition: 0.3s;
    position: relative;
    width: 100%;
    max-width: 320px;
}

.char-card:hover {
    border-color: #f7b731;
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(247, 183, 49, 0.08);
}

.char-race-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.char-name {
    font-size: 20px;
    font-weight: bold;
    color: #f7b731;
    margin-bottom: 12px;
    text-align: center;
}

.char-level {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #f7b731, #e09d1a);
    color: #0a0e14;
    padding: 8px 14px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
}

.char-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    width: 100%;
}

.char-info-item {
    font-size: 13px;
    color: #8899aa;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.char-info-item:last-child {
    border-bottom: none;
}

.char-info-item span {
    color: #e0e6ed;
    font-weight: bold;
    text-align: right;
}

.empty-text {
    text-align: center;
    color: #556677;
    padding: 50px;
    grid-column: 1 / -1;
}

/* Для мобильных устройств */
@media (max-width: 600px) {
    .char-info-item {
        font-size: 12px;
        padding: 3px 0;
    }
}

.donate-card {
    background: #141a22;
    border: 1px solid #1e2632;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    transition: 0.3s;
}

.donate-card:hover { border-color: #f7b731; }

.donate-amount { font-size: 28px; font-weight: bold; color: #f7b731; margin-bottom: 10px; }
.donate-price { font-size: 18px; color: #8899aa; margin-bottom: 20px; }

/* ==================== НАСТРОЙКИ ==================== */
.settings-box {
    background: #141a22;
    border: 1px solid #1e2632;
    border-radius: 15px;
    padding: 30px;
    max-width: 500px;
}

.settings-box h3 { color: #f7b731; margin-bottom: 20px; font-size: 18px; }

/* ==================== РЕЙТИНГ ==================== */
.ranking-container {
    background: #141a22;
    border: 1px solid #1e2632;
    border-radius: 15px;
    overflow: hidden;
}

.ranking-table { width: 100%; border-collapse: collapse; }

.ranking-table th {
    background: rgba(247, 183, 49, 0.1);
    color: #f7b731;
    padding: 15px;
    text-align: left;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #f7b731;
}

.ranking-table td {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 14px;
    color: #b0c0d0;
}

.ranking-table tr:hover { background: rgba(255,255,255,0.03); }

.ranking-table tr:nth-child(1) td:first-child::before { content: '🥇 '; }
.ranking-table tr:nth-child(2) td:first-child::before { content: '🥈 '; }
.ranking-table tr:nth-child(3) td:first-child::before { content: '🥉 '; }

/* ==================== АДМИН-ПАНЕЛЬ ==================== */
.admin-login {
    max-width: 400px;
    margin: 100px auto;
    background: #141a22;
    border-radius: 15px;
    padding: 30px;
    border: 1px solid #1e2632;
}

.admin-login h1 { color: #f7b731; text-align: center; margin-bottom: 20px; }

.admin-menu { display: flex; gap: 5px; margin-bottom: 20px; flex-wrap: wrap; }

.admin-menu-link { 
    color: #8899aa; 
    text-decoration: none; 
    padding: 8px 16px; 
    border-radius: 8px; 
    font-size: 13px; 
    font-weight: bold; 
}

.admin-menu-link.active { background: rgba(247, 183, 49, 0.1); color: #f7b731; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 30px; }

.stat-card {
    background: #141a22;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.stat-icon { font-size: 36px; }
.stat-value { font-size: 28px; font-weight: bold; color: #f7b731; }
.stat-label { font-size: 12px; color: #556677; text-transform: uppercase; }

/* ==================== МОДАЛКА ПЕРСОНАЖА ==================== */
.char-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 300;
}

.char-modal {
    background: #141a22;
    border: 2px solid #f7b731;
    border-radius: 20px;
    padding: 30px;
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.char-modal-close {
    position: absolute;
    top: 15px; right: 15px;
    background: rgba(255,68,68,0.3);
    color: white;
    border: none;
    width: 35px; height: 35px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
}

/* ==================== СЕРИАЛЫ И РЕДАКТИРОВАНИЕ ПЕРСОНАЖА В МОДАЛКЕ ==================== */

/* Блок с Serial информацией */
.char-serial-info {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 10px;
    margin: 15px 0;
    font-size: 13px;
}

.serial-item {
    margin: 5px 0;
    color: rgba(255, 255, 255, 0.8);
}

.serial-item strong {
    color: #f7b731;
}

/* Отступ для кнопки сохранения */
.mt-5 {
    margin-top: 5px;
}

/* Сообщения об ошибках/успехе в модалке */
.form-message-success {
    color: #2ecc71 !important;
}

.form-message-error {
    color: #ff6b6b !important;
}

.form-message {
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
}

.char-modal-content { display: grid; grid-template-columns: 300px 1fr; gap: 30px; }
.char-modal-left { text-align: center; padding: 20px; background: rgba(0,0,0,0.3); border-radius: 15px; }
.char-modal-icon { font-size: 64px; margin-bottom: 15px; }
.char-modal-left h2 { color: #f7b731; margin-bottom: 15px; }
.char-modal-balance { margin-top: 20px; padding: 15px; background: rgba(247, 183, 49, 0.1); border-radius: 10px; }
.bal-item { font-size: 16px; color: #f7b731; }
.char-modal-right h3 { color: #f7b731; margin-bottom: 15px; }

.equip-table { width: 100%; border-collapse: collapse; }
.equip-table th { background: rgba(247, 183, 49, 0.1); color: #f7b731; padding: 10px; font-size: 12px; text-transform: uppercase; }
.equip-table td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; color: #b0c0d0; }
.equip-table tr:hover { background: rgba(255,255,255,0.03); }

/* ==================== АДМИНСКИЕ ТАБЛИЦЫ ==================== */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { background: rgba(247, 183, 49, 0.1); color: #f7b731; padding: 10px; text-align: left; font-size: 13px; }
.admin-table td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.04); }

/* ==================== КНОПКИ ==================== */
.btn { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 14px; }
.btn-full { width: 100%; }
.btn-red { background: rgba(255,68,68,0.15); color: #ff6b6b; border: 1px solid #ff6b6b; }
.btn-green { background: rgba(46, 204, 113, 0.15); color: #2ecc71; border: 1px solid #2ecc71; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

.quick-actions { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }

/* ==================== СТАТУСЫ ==================== */
.active-status { color: #2ecc71; }
.inactive-status { color: #ff6b6b; }
.expired-status { color: #f7b731; }

/* ==================== ПОИСК ==================== */
.search-section { display: flex; gap: 10px; margin-bottom: 20px; }
.search-section input { flex: 1; padding: 10px; background: #1e2632; border: 1px solid #2a3340; border-radius: 8px; color: #e0e6ed; }

/* ==================== СУПЕР-АДМИН ==================== */
.super-login {
    max-width: 400px;
    margin: 100px auto;
    background: #141a22;
    border-radius: 15px;
    padding: 30px;
    border: 1px solid #1e2632;
}

.super-login h1 { color: #f7b731; text-align: center; margin-bottom: 20px; }

.super-header {
    background: #141a22;
    padding: 15px 30px;
    border-bottom: 2px solid #f7b731;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.super-header h2 { color: #f7b731; margin: 0; }
.super-header-buttons { display: flex; gap: 10px; margin-left: auto; }
.super-content { padding: 20px; }

/* ==================== CSP-КЛАССЫ ==================== */
.hidden { display: none !important; }
.section-title { color: #f7b731; }
.form-message { margin-top: 10px; }
.login-error-msg { color: #ff6b6b; margin-top: 10px; text-align: center; }

.donate-form-box { max-width: 500px; }
.modules-btn-row { display: flex; gap: 20px; flex-wrap: wrap; }
.module-form-container { margin-top: 20px; }
.search-results-container { margin-top: 20px; }
.admins-form-box { max-width: 500px; }
.admins-table-container { margin-top: 20px; }
.server-config-box { max-width: 600px; }
.server-save-btn { margin-top: 15px; }

#donatePage .settings-box { margin: 0 auto; }
#donatePage .admin-menu { justify-content: center; }

/* ==================== ПЛАТЁЖНЫЕ СИСТЕМЫ ==================== */
.payment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 20px; }

.payment-card {
    background: #141a22;
    border: 1px solid #1e2632;
    border-radius: 15px;
    padding: 25px;
    transition: 0.3s;
}

.payment-card:hover { border-color: #f7b731; }

.payment-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.payment-card-name { color: #f7b731; font-size: 18px; font-weight: bold; }
.payment-card-toggle { display: flex; align-items: center; gap: 8px; }
.payment-card-toggle input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #f7b731; }
.payment-card-toggle label { color: #8899aa; font-size: 13px; cursor: pointer; }
.payment-card-actions { margin-top: 15px; }

.payment-save-btn { display: block; margin: 20px auto 0; width: 300px; }

/* ==================== МОДАЛКА ПЛАТЕЖЕЙ ==================== */
.payment-modal-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex; justify-content: center; align-items: center;
    z-index: 300;
}

.payment-modal {
    background: #141a22;
    border: 2px solid #f7b731;
    border-radius: 20px;
    padding: 30px;
    max-width: 600px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.payment-modal-close {
    position: absolute; top: 15px; right: 15px;
    background: rgba(255,68,68,0.3);
    color: white;
    border: none;
    width: 35px; height: 35px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
}

.payment-modal h3 { color: #f7b731; margin-bottom: 20px; font-size: 18px; }
.payment-modal .form-group { margin-bottom: 15px; }
.payment-modal .form-group label { display: block; color: #8899aa; margin-bottom: 5px; font-size: 13px; }
.payment-modal .form-group input,
.payment-modal .form-group textarea { width: 100%; padding: 10px; background: #1e2632; border: 1px solid #2a3340; border-radius: 8px; color: #e0e6ed; font-size: 14px; }
.payment-modal .form-group input:focus,
.payment-modal .form-group textarea:focus { border-color: #f7b731; outline: none; }
.payment-modal-save-btn { margin-top: 15px; }

/* Шапка админки = шапка игрока */
.top-bar {
    height: 60px;
    padding: 0 30px;
}

.top-bar .logo {
    font-size: 20px;
    font-weight: bold;
    color: #f7b731;
    flex-shrink: 0;
}

.top-bar .nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.top-bar .nav-links a {
    padding: 10px 20px;
    font-size: 14px;
}

.top-bar .logout-btn {
    flex-shrink: 0;
    margin-left: auto;
}

.stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 30px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.stat-card {
    padding: 15px 10px;
}

.stat-value {
    font-size: 28px;
}

.stat-label {
    font-size: 11px;
}

#dashboardPage {
    padding-top: 10px;
}

.tab-content:not(.hidden) {
    display: block !important;
}

#modulesPage:not(.hidden) {
    display: block !important;
}

#searchPage:not(.hidden) {
    display: block !important;
}

#adminsPage:not(.hidden) {
    display: block !important;
}

#settingsPage:not(.hidden) {
    display: block !important;
}

#donatePage:not(.hidden) {
    display: block !important;
}

/* ==================== CSP-безопасные классы для JS ==================== */
.donation-amount-cell {
    color: #f7b731;
    font-weight: bold;
}

.card-title {
    color: #f7b731;
}

.status-bold {
    font-weight: bold;
}

.mt-5 {
    margin-top: 5px;
}

.equip-input-short {
    width: 80px;
    background: #1e2632;
    color: #e0e6ed;
    border: 1px solid #2a3340;
    padding: 4px;
    border-radius: 4px;
}

.equip-input-long {
    width: 100px;
    background: #1e2632;
    color: #e0e6ed;
    border: 1px solid #2a3340;
    padding: 4px;
    border-radius: 4px;
}

.modal-max-1000 {
    max-width: 1000px;
}

/* CSP-безопасные классы */
.donation-amount-cell { color: #f7b731; font-weight: bold; }
.card-title { color: #f7b731; }
.status-bold { font-weight: bold; }
.mt-5 { margin-top: 5px; }
.equip-input-short { width: 80px; background: #1e2632; color: #e0e6ed; border: 1px solid #2a3340; padding: 4px; border-radius: 4px; }
.equip-input-long { width: 100px; background: #1e2632; color: #e0e6ed; border: 1px solid #2a3340; padding: 4px; border-radius: 4px; }
.modal-max-1000 { max-width: 1000px; }

#modulesPage.tab-content:not(.hidden),
#searchPage.tab-content:not(.hidden),
#adminsPage.tab-content:not(.hidden),
#settingsPage.tab-content:not(.hidden),
#donatePage.tab-content:not(.hidden),
#donateSerial:not(.hidden),
#donateLogin:not(.hidden),
#donateNickname:not(.hidden),
#donatePayments:not(.hidden) {
    display: block !important;
}

/* ==================== ЦЕНТРИРОВАНИЕ ЭЛЕМЕНТОВ ==================== */

/* Центрирование меню */
.admin-menu-center {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* Центрирование контейнера */
.center-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Секция поиска по центру, поле ввода сверху, кнопка снизу */
.search-section-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 400px;
    margin: 0 auto 30px auto;
    gap: 12px;
}

.search-section-center .form-input {
    width: 100%;
    min-width: 280px;
}

.search-section-center .search-btn {
    width: auto;
    min-width: 120px;
    padding: 10px 20px;
    margin-top: 0;
}

/* Центрирование кнопок модулей */
.modules-btn-row-center {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

/* Центрирование формы модулей */
.module-form-container-center {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Форма модулей по центру */
.module-form-container-center .settings-box {
    margin: 0 auto;
    width: 100%;
    max-width: 450px;
}

/* Админ-форма по центру */
.admins-form-box {
    margin: 0 auto;
    width: 100%;
}

/* Настройки по центру */
.server-config-box {
    margin: 0 auto;
    width: 100%;
}

/* Для donate форм */
.donate-form-box {
    margin: 0 auto;
}

/* ==================== ПЛАТЁЖНЫЕ СИСТЕМЫ - КАРТОЧКИ В РЯД ==================== */

.payments-full-width {
    width: 100%;
    max-width: 100%;
}

.payments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.payment-card {
    background: #141a22;
    border: 1px solid rgba(247, 183, 49, 0.2);
    border-radius: 15px;
    padding: 20px;
    transition: all 0.3s ease;
}

.payment-card:hover {
    border-color: #f7b731;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

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

.payment-card-name {
    color: #f7b731;
    font-size: 18px;
    font-weight: bold;
}

.payment-card-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.payment-card-toggle label {
    color: #8899aa;
    font-size: 13px;
    cursor: pointer;
}

.payment-card-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #f7b731;
}

.payment-card-status {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 12px;
}

.payment-card-status.enabled {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    border: 1px solid #2ecc71;
}

.payment-card-status.disabled {
    background: rgba(255, 68, 68, 0.15);
    color: #ff6b6b;
    border: 1px solid #ff6b6b;
}

.payment-card-actions {
    margin-top: 15px;
}

.payment-card-actions .btn {
    width: 100%;
}

.payment-save-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.payment-save-btn {
    width: auto;
    min-width: 250px;
    padding: 12px 30px;
}

.form-message-center {
    text-align: center;
    margin-top: 15px;
}

/* ==================== УМЕНЬШЕННАЯ ТАБЛИЦА ПОПОЛНЕНИЙ ==================== */

.section-title-center {
    text-align: center;
}

.donations-table-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
}

.donations-table {
    width: 100%;
    max-width: 800px;
    border-collapse: collapse;
    background: rgba(20, 20, 50, 0.3);
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
}

.donations-table th {
    background: rgba(247, 183, 49, 0.1);
    color: #f7b731;
    padding: 10px 15px;
    text-align: left;
    font-size: 13px;
    font-weight: bold;
}

.donations-table td {
    padding: 8px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 13px;
    color: #b0c0d0;
}

.donations-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.donation-amount-cell {
    color: #f7b731;
    font-weight: bold;
}

/* Адаптив для мобильных устройств */
@media (max-width: 768px) {
    .donations-table {
        max-width: 100%;
        font-size: 12px;
    }
    
    .donations-table th,
    .donations-table td {
        padding: 6px 10px;
    }
}

/* ==================== БАЛАНС И УВЕДОМЛЕНИЯ ==================== */

/* Цвета для баланса */
.balance-positive {
    color: #2ecc71;
}

.balance-negative {
    color: #ff6b6b;
}

/* Кнопка настроек баланса */
.settings-balance-btn {
    margin-top: 5px;
    width: 100%;
}

/* Красная кнопка (для опасных действий) */
.btn-red {
    background: rgba(255, 68, 68, 0.15);
    color: #ff6b6b;
    border: 1px solid #ff6b6b;
}

.btn-red:hover {
    background: rgba(255, 68, 68, 0.3);
}

/* Анимация для всплывающих уведомлений */
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(20px); }
    15% { opacity: 1; transform: translateY(0); }
    85% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(20px); }
}

/* Уведомления (toast) */
.toast-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 24px;
    border-radius: 8px;
    color: white;
    z-index: 1000;
    animation: fadeInOut 3s ease;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.toast-notification.success {
    background: rgba(46, 204, 113, 0.9);
    border-left: 4px solid #2ecc71;
}

.toast-notification.warning {
    background: rgba(247, 183, 49, 0.9);
    border-left: 4px solid #f7b731;
}

.toast-notification.error {
    background: rgba(255, 68, 68, 0.9);
    border-left: 4px solid #ff6b6b;
}

/* Разделитель в карточках */
.char-card hr {
    margin: 10px 0;
    border-color: rgba(255, 255, 255, 0.05);
}

/* Быстрые действия в карточке */
.quick-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

/* Маленькая подпись в модалке */
.payment-modal small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
}

.payment-modal-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex; justify-content: center; align-items: center;
    z-index: 300;
}

.payment-modal {
    background: #141a22;
    border: 2px solid #f7b731;
    border-radius: 20px;
    padding: 30px;
    max-width: 600px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.payment-modal-close {
    position: absolute; top: 15px; right: 15px;
    background: rgba(255,68,68,0.3);
    color: white;
    border: none;
    width: 35px; height: 35px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
}

.inv-title { margin-top: 20px; }
.inv-scroll { max-height: 300px; overflow-y: auto; }
.inv-empty { margin-top: 20px; }

.bag-tabs { display: flex; gap: 5px; margin-bottom: 15px; flex-wrap: wrap; }
.bag-tab { padding: 8px 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #b0c0d0; cursor: pointer; font-size: 13px; }
.bag-tab.active { background: linear-gradient(135deg, #f7b731, #e09d1a); color: #0a0e14; border-color: #f7b731; }
.bag-tab:hover { background: rgba(255,255,255,0.1); }
.empty-slot { opacity: 0.5; }
.modal-max-1200 { max-width: 1200px !important; }

.inv-buttons-row { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 15px; }
.bag-content-empty { min-height: 200px; }
.bag-placeholder { color: #556677; text-align: center; }
.bag-loading { text-align: center; color: #f7b731; }
.bag-error { color: #ff6b6b; text-align: center; }
.inv-count-input { width: 60px; background: #1e2632; border: 1px solid #2a3340; color: #e0e6ed; padding: 4px; border-radius: 4px; }

.form-message-success { color: #2ecc71 !important; }
.form-message-error { color: #ff6b6b !important; }

#authPage:not(.hidden) { display: flex; }
.modal-hr { margin: 15px 0; border-color: rgba(255,255,255,0.05); }

/* ==================== ИСТОРИЯ ПОПОЛНЕНИЙ В ЛИЧНОМ КАБИНЕТЕ ==================== */

.donation-history-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(247, 183, 49, 0.2);
}

.donation-history-section .section-title {
    text-align: center;
    margin-bottom: 20px;
    color: #f7b731;
}

.module-form-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.module-form-title {
    flex: 1;
}

.module-form-title h3 {
    margin: 0;
}

.module-form-close-btn {
    background: rgba(255,68,68,0.3);
    color: white;
    border: 1px solid #ff6b6b;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

/* Заголовок формы модуля */
.module-form-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.module-form-title {
    flex: 1;
}

.module-form-title h3 {
    margin: 0;
}

.module-form-close-btn {
    background: rgba(255,68,68,0.3);
    color: white;
    border: 1px solid #ff6b6b;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

/* Список купонов */
.coupons-list-scroll {
    max-height: 60vh;
    overflow-y: auto;
}

.coupon-items-title {
    margin-top: 15px;
}

.coupon-card {
    margin-bottom: 10px;
    padding: 15px;
}

/* Кнопка купона в шапке */
.coupon-top-btn {
    padding: 8px 16px;
}

.coupon-code-input {
    text-transform: uppercase;
}

/* ==================== ФУТЕР В СТИЛЕ ЛИЧНОГО КАБИНЕТА ==================== */

/* Делаем body flex-контейнером для прилипания футера */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Основной контент растягивается */
main {
    flex: 1;
}

/* Swiper слайдер тоже растягивается */
.fp-swiper {
    flex: 1;
}

/* Футер */
.servers-bar {
    margin-top: auto;
    background: #141a22;
    backdrop-filter: blur(10px);
    border-top: 2px solid rgba(247, 183, 49, 0.3);
    padding: 20px 0 15px;
    width: 100%;
}

.servers-bar__bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.servers-bar__links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.servers-bar__links a {
    color: #8899aa;
    text-decoration: none;
    font-size: 13px;
    transition: 0.3s;
    cursor: pointer;
}

.servers-bar__links a:hover {
    color: #f7b731;
    text-decoration: underline;
}

.servers-bar__sep {
    color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
}

.servers-bar__copy {
    font-size: 12px;
    color: #556677;
    margin: 0;
}

/* Адаптация под мобильные устройства */
@media (max-width: 768px) {
    .servers-bar__bottom {
        flex-direction: column;
        text-align: center;
        padding: 0 20px;
    }
    
    .servers-bar__links {
        justify-content: center;
    }
}

/* ==================== МОДАЛЬНЫЕ ОКНА ==================== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
}

.modal.active {
    visibility: visible;
    opacity: 1;
}

.modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal__container {
    position: relative;
    background: #141a22;
    border: 2px solid #f7b731;
    border-radius: 20px;
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    z-index: 1001;
    animation: modalFadeIn 0.3s ease;
}

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

.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid rgba(247, 183, 49, 0.3);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 18px 18px 0 0;
}

.modal__title {
    color: #f7b731;
    margin: 0;
    font-size: 20px;
}

.modal__close {
    background: rgba(255,68,68,0.3);
    border: 1px solid #ff6b6b;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.modal__close:hover {
    background: rgba(255,68,68,0.5);
    transform: scale(1.05);
}

.modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    color: #b0c0d0;
    font-size: 14px;
    line-height: 1.5;
}

.loading-text {
    text-align: center;
    color: #f7b731;
    padding: 40px;
}

@media (max-width: 768px) {
    .modal__container { width: 95%; max-height: 90vh; }
    .modal__header { padding: 15px 20px; }
    .modal__title { font-size: 16px; }
    .modal__body { padding: 15px; font-size: 12px; }
}

/* ==================== СТРАНИЦА ВХОДА БЕЗ ПРОКРУТКИ С ФУТЕРОМ ==================== */

/* Убираем прокрутку у body на странице входа */
body:has(#authPage:not(.hidden)) {
    overflow: hidden;
}

/* Фиксируем футер внизу на странице входа */
body:has(#authPage:not(.hidden)) .servers-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    margin-top: 0;
}

/* Добавляем отступ контенту, чтобы не перекрывался футером */
body:has(#authPage:not(.hidden)) .auth-wrapper {
    padding-bottom: 100px;
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    body:has(#authPage:not(.hidden)) .auth-wrapper {
        padding-bottom: 80px;
    }
}

/* ==================== ПЛАТЁЖНЫЕ СИСТЕМЫ - ЦЕНТРИРОВАНИЕ ==================== */

.payments-full-width {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.payments-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    width: 100%;
}

.payment-card {
    background: #141a22;
    border: 1px solid rgba(247, 183, 49, 0.2);
    border-radius: 15px;
    padding: 20px;
    transition: all 0.3s ease;
    width: 320px;
    min-width: 280px;
    flex-shrink: 0;
}

.payment-card:hover {
    border-color: #f7b731;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Блок курса обмена */
.rate-box {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

/* Кнопка сохранения */
.payment-save-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.payment-save-btn {
    width: auto;
    min-width: 250px;
    padding: 12px 30px;
}

/* Блок курса обмена - центрирование и отступ */
.rate-box {
    max-width: 500px;
    margin: 30px auto 0 auto;
    text-align: center;
}

/* Платёжные системы - центрирование */
.payments-full-width {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.payments-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.payment-card {
    width: 320px;
    min-width: 280px;
}

/* ==================== УДАЛЕННЫЕ ПЕРСОНАЖИ ==================== */
.deleted-char-card {
    border-color: rgba(255, 68, 68, 0.2);
    background: rgba(30, 10, 10, 0.3);
}

.deleted-char-card:hover {
    border-color: #ff6b6b;
}

.restore-char-btn {
    margin-top: 10px;
}

/* ==================== КАРТОЧКИ ПЕРСОНАЖЕЙ ==================== */
.char-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.char-info-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.char-info-item {
    font-size: 13px;
    color: #8899aa;
    flex: 1;
}

.char-info-item span {
    color: #e0e6ed;
    font-weight: bold;
}

/* Для мобильных устройств */
@media (max-width: 600px) {
    .char-info-row {
        flex-direction: column;
        gap: 2px;
    }
}

/* ==================== КАРТИНКИ КЛАССОВ - МАКСИМАЛЬНЫЙ РАЗМЕР ==================== */
.char-class-image {
    text-align: center;
    margin: 0 -25px 12px -25px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    height: 400px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.class-icon {
    height: 100%;
    width: 100%;
    object-fit: contain;
    display: block;
    padding: 8px;
}

/* Для мобильных устройств */
@media (max-width: 600px) {
    .char-class-image {
        margin: 0 -15px 8px -15px;
        height: 280px;
        min-height: 200px;
    }
    
    .class-icon {
        padding: 4px;
    }
}

/* ==================== АУКЦИОН - НОВЫЙ ДИЗАЙН ==================== */

/* Вторая шапка (вкладки) */
.market-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 25px;
    background: rgba(20, 20, 50, 0.3);
    border-radius: 12px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    max-width: 400px;
}

.market-tab {
    flex: 1;
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #556677;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.market-tab:hover {
    color: #8899aa;
}

.market-tab.active {
    background: linear-gradient(135deg, #f7b731, #e09d1a);
    color: #0a0e14;
}

/* Основная сетка */
.market-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 25px;
    align-items: start;
}

/* Левая колонка - фильтры */
.market-sidebar {
    background: rgba(20, 20, 50, 0.6);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 18px;
    position: sticky;
    top: 80px;
}

.market-sidebar-title {
    font-size: 13px;
    font-weight: 700;
    color: #556677;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.market-filter-group {
    margin-bottom: 18px;
}

.market-filter-group:last-of-type {
    margin-bottom: 0;
}

.market-filter-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #556677;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.market-filter-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1.5px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: #8899aa;
    font-size: 14px;
    font-weight: 500;
    cursor: default;
    transition: all 0.2s ease;
}

.market-filter-btn .icon {
    font-size: 18px;
    width: 28px;
    text-align: center;
}

.market-filter-btn.active {
    background: rgba(247, 183, 49, 0.08);
    border-color: rgba(247, 183, 49, 0.3);
    color: #f7b731;
}

.market-filter-select,
.market-filter-input {
    width: 100%;
    padding: 9px 12px;
    background: #1e2632;
    border: 1px solid #2a3340;
    border-radius: 8px;
    color: #e0e6ed;
    font-size: 13px;
    outline: none;
    transition: border 0.2s;
}

.market-filter-select:focus,
.market-filter-input:focus {
    border-color: #f7b731;
}

.market-filter-select option {
    background: #1e2632;
    color: #e0e6ed;
}

.market-filter-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.market-filter-actions .btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    text-align: center;
}

/* Правая часть - карточки */
.market-content {
    min-height: 400px;
}

.market-content .characters-grid {
    max-width: 100%;
}

/* Карточка на аукционе */
.market-card .char-level {
    background: linear-gradient(135deg, #f7b731, #e09d1a);
    color: #0a0e14;
}

.market-card .char-name {
    color: #f7b731;
}

.market-card .char-info-item span {
    color: #e0e6ed;
}

.market-card .char-info-item .price-highlight {
    color: #f7b731;
    font-weight: bold;
}

/* Кнопка "Снять с продажи" */
.cancel-listing-btn {
    background: rgba(255, 68, 68, 0.15);
    color: #ff6b6b;
    border: 1px solid #ff6b6b;
}

.cancel-listing-btn:hover {
    background: rgba(255, 68, 68, 0.3);
}

/* Адаптив */
@media (max-width: 1024px) {
    .market-layout {
        grid-template-columns: 1fr;
    }
    .market-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .market-sidebar-title {
        grid-column: 1 / -1;
    }
    .market-filter-group {
        margin-bottom: 0;
    }
    .market-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .market-sidebar {
        grid-template-columns: 1fr;
    }
    .market-tabs {
        max-width: 100%;
    }
}

.btn-outline {
    background: transparent;
    border: 1.5px solid #2a3340;
    color: #e0e6ed;
}

.btn-outline:hover {
    border-color: #f7b731;
    color: #f7b731;
}

/* ============================================
   МОДАЛЬНОЕ ОКНО — БЕЗ СКРОЛЛА
   ============================================ */

/* Оверлей */
.char-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 5px;
}

/* Само модальное окно — максимальная высота */
.char-modal.modal-max-1400 {
    max-width: 1100px !important;
    width: 94% !important;
    max-height: 98vh !important;   /* Почти весь экран */
    height: 98vh !important;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #1a1a2e, #2a2a4e);
    border-radius: 14px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    margin: 0;
}

/* Контент внутри модалки — минимальные отступы */
.char-modal .char-modal-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: 8px 15px !important;   /* Минимальные отступы */
    gap: 12px !important;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* Левая часть (информация о персонаже) */
.char-modal .char-modal-left {
    flex: 0 0 28%;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5px;
    overflow-y: auto;
}

/* Правая часть (экипировка) — без ограничения высоты */
.char-modal .char-modal-right {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 0 8px;
    max-height: 94vh;
}

/* Заголовки в правой части */
.char-modal .char-modal-right h3 {
    margin-top: 0;
    margin-bottom: 4px;
    font-size: 16px;
    color: #f7b731;
}

/* Таблица экипировки — максимально компактная */
.char-modal .equip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.char-modal .equip-table th {
    text-align: left;
    color: #8899aa;
    font-weight: 600;
    padding: 1px 4px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.char-modal .equip-table td {
    padding: 1px 4px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    color: #e0e6ed;
    font-size: 12px;
    line-height: 1.2;
}

.char-modal .equip-table tr:last-child td {
    border-bottom: none;
}

/* ============================================
   СТИЛИ ДЛЯ ИКОНОК ЗАТОЧКИ (АУКЦИОН)
   ============================================ */

/* Контейнер заточки в модальном окне */
.char-modal .upgrade-container-market {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px solid rgba(255, 215, 0, 0.08);
    min-height: 22px;
}

/* Иконки заточки в модальном окне */
.char-modal .upgrade-icon-market {
    width: 30px !important;
    height: 30px !important;
    display: inline-block;
    border-radius: 3px;
    background: rgba(255, 215, 0, 0.06);
    padding: 1px;
    border: 1px solid rgba(255, 215, 0, 0.06);
    image-rendering: pixelated;
    object-fit: contain;
    flex-shrink: 0;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Hover-эффект для иконок */
.char-modal .upgrade-icon-market:hover {
    transform: scale(1.15);
    filter: brightness(1.3);
    border-color: rgba(255, 215, 0, 0.3);
}

/* Текст "—" когда нет заточки */
.char-modal .upgrade-empty-market {
    color: rgba(255, 255, 255, 0.3);
    font-size: 10px;
    font-style: italic;
}

/* Анимация появления иконок */
.char-modal .upgrade-icon-market {
    animation: upgradeAppear 0.2s ease-out;
}

@keyframes upgradeAppear {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Задержка для каждой иконки */
.char-modal .upgrade-icon-market:nth-child(1) { animation-delay: 0.00s; }
.char-modal .upgrade-icon-market:nth-child(2) { animation-delay: 0.03s; }
.char-modal .upgrade-icon-market:nth-child(3) { animation-delay: 0.06s; }
.char-modal .upgrade-icon-market:nth-child(4) { animation-delay: 0.09s; }
.char-modal .upgrade-icon-market:nth-child(5) { animation-delay: 0.12s; }
.char-modal .upgrade-icon-market:nth-child(6) { animation-delay: 0.15s; }
.char-modal .upgrade-icon-market:nth-child(7) { animation-delay: 0.18s; }

/* ==================== ДОСТИЖЕНИЯ (СТИЛИ ДЛЯ ИГРОКА) ==================== */
.achievement-section {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.achievement-section:last-child {
    border-bottom: none;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.achievement-card {
    background: #141a22;
    border: 1px solid #1e2632;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
}

.achievement-card:hover {
    transform: translateY(-3px);
    border-color: #f7b731;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Статусы карточек */
.achievement-card.can-claim {
    border-color: #2ecc71;
    background: rgba(46, 204, 113, 0.05);
    animation: pulse-glow 2s infinite;
}

.achievement-card.claimed {
    border-color: rgba(255, 255, 255, 0.1);
    opacity: 0.6;
    background: rgba(255, 255, 255, 0.02);
}

.achievement-card.locked {
    border-color: rgba(255, 68, 68, 0.2);
    background: rgba(255, 68, 68, 0.03);
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.2); }
    70% { box-shadow: 0 0 15px 5px rgba(46, 204, 113, 0.1); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.ach-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.ach-title {
    font-size: 18px;
    font-weight: bold;
    color: #f7b731;
    margin-bottom: 6px;
}

.ach-desc {
    font-size: 13px;
    color: #8899aa;
    margin-bottom: 12px;
    line-height: 1.4;
}

.ach-reward {
    font-size: 13px;
    color: #b0c0d0;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.ach-reward strong {
    color: #ffd700;
}

.ach-claimed-by {
    font-size: 12px;
    color: #ff6b6b;
    background: rgba(255, 68, 68, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 68, 68, 0.2);
}

.achievement-card .btn {
    width: 100%;
    font-size: 13px;
    padding: 10px;
    margin-top: auto;
}

.achievement-card .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.05);
}

/* ==================== АДМИНКА - УПРАВЛЕНИЕ ДОСТИЖЕНИЯМИ ==================== */
.ach-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.ach-admin-card {
    background: #141a22;
    border: 1px solid #1e2632;
    border-radius: 12px;
    padding: 18px;
    transition: 0.3s;
}

.ach-admin-card:hover {
    border-color: #f7b731;
}

.ach-admin-card .ach-title {
    font-size: 16px;
    margin-bottom: 4px;
}

.ach-admin-card .ach-desc {
    font-size: 12px;
    color: #8899aa;
    margin-bottom: 8px;
}

.ach-admin-card .ach-reward {
    font-size: 12px;
    padding: 6px 10px;
    margin-bottom: 10px;
}

.create-ach-btn {
    margin-bottom: 20px;
    width: auto;
    padding: 10px 24px;
}

/* ==================== МОДАЛКА СОЗДАНИЯ ДОСТИЖЕНИЯ (АДМИНКА) ==================== */
.create-ach-modal .form-group {
    margin-bottom: 12px;
}

.create-ach-modal .form-group label {
    display: block;
    font-size: 13px;
    color: #8899aa;
    margin-bottom: 5px;
    font-weight: bold;
}

.create-ach-modal .form-group input,
.create-ach-modal .form-group select {
    width: 100%;
    padding: 10px;
    background: #1e2632;
    border: 1px solid #2a3340;
    border-radius: 8px;
    color: #e0e6ed;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
}

.create-ach-modal .form-group input:focus,
.create-ach-modal .form-group select:focus {
    border-color: #f7b731;
}

.create-ach-modal .reward-group {
    display: flex;
    gap: 10px;
}

.create-ach-modal .reward-group input {
    flex: 1;
}

.create-ach-modal .reward-group input:first-child {
    flex: 2;
}

.create-ach-modal .small-hint {
    font-size: 11px;
    color: #556677;
    margin-top: 3px;
}

/* ==================== ЧЕКБОКСЫ ПОЛИТИК ==================== */
.policy-checkboxes {
    margin: 15px 0 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.policy-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b0c0d0;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.2s;
}

.policy-label:hover {
    background: rgba(255, 255, 255, 0.03);
}

.policy-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #f7b731;
    flex-shrink: 0;
}

.policy-label input[type="checkbox"]:checked {
    accent-color: #f7b731;
}

.policy-link {
    color: #f7b731;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s;
}

.policy-link:hover {
    color: #ffd700;
}

/* Стиль для незаполненных чекбоксов (ошибка) */
.policy-label.error {
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-radius: 8px;
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}